/* Variables: active variables stylesheet selected by the master layout. */
.demo-error-page {     padding: 64px 24px; }
.demo-error-page .demo-error-card { max-width: 1080px; margin: auto; padding: 60px; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 64px; align-items: center; background: var(--site-surface); border: 1px solid var(--site-border) !important; border-radius: 28px; box-shadow: 0 16px 60px rgba(0,31,91,.06); }
.demo-error-art { position: relative; min-height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #001f5b; }
.demo-error-orbit { position: absolute; width: 230px; height: 230px; border-radius: 50%; background: radial-gradient(circle, #ffd100 0%, rgba(255,209,0,.12) 65%, transparent 72%); }
.demo-error-art svg { position: relative; width: 100px; height: 100px; }
.demo-error-page .demo-error-code { position: relative; font-size: 72px; font-weight: 800; letter-spacing: -4px; line-height: 1.1; }
html.dark .demo-error-art { color: #ffd100; }
html.dark .demo-error-orbit { opacity: .16; }
.demo-error-page .demo-error-eyebrow { color: var(--site-text-muted); font-size: 12px; letter-spacing: 2px; text-transform: uppercase; font-weight: 600; margin: 0 0 16px; }
.demo-error-page h1 { color: var(--site-text-strong) !important; font-size: clamp(28px, 4vw, 42px); line-height: 1.15; margin: 0 0 20px; letter-spacing: -1px; }
.demo-error-page .demo-error-description { color: var(--site-text-muted); font-size: 15px; line-height: 1.8; margin: 0 0 24px; }
.demo-error-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.demo-error-page .demo-error-actions a { display: inline-flex; justify-content: center; align-items: center; gap: 16px; padding: 14px 20px; border-radius: 12px; font-size: 14px; font-weight: 600; text-decoration: none; }
.demo-error-page .demo-error-primary { background: #ffd100; color: #001f5b !important; }
.demo-error-page .demo-error-secondary { background: transparent; border: 1px solid var(--site-border) !important; color: var(--site-text-strong) !important; }
.demo-error-page .demo-error-actions a:hover { filter: brightness(.94); }
.demo-error-search { margin-top: 32px; }
.demo-error-page .demo-error-search label { display: block; color: var(--site-text-strong); font-size: 13px; margin-bottom: 10px; }
.demo-error-search > div { display: flex; gap: 8px; }
.demo-error-page .demo-error-search input { min-width: 0; flex: 1; width: 100%; background: var(--site-surface); color: var(--site-text-strong); border: 1px solid var(--site-border) !important; border-radius: 10px; padding: 12px; font-size: 14px; }
.demo-error-page .demo-error-search button { border-radius: 10px; padding: 12px 18px; background: #001f5b; color: white; font-weight: 600; }
html.dark .demo-error-page .demo-error-search button { background: #ffd100; color: #001f5b; }
/* Override the shared dark-mode inherited text colour for this button only. */
html.dark .demo-error-search #error-product-search + button { color: #001f5b !important; }
.demo-error-page a:focus-visible, .demo-error-page input:focus-visible, .demo-error-page button:focus-visible { outline: 3px solid #d4a900 !important; outline-offset: 3px; }
@media(max-width: 768px) { .demo-error-page { padding: 32px 18px; } .demo-error-page .demo-error-card { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 32px 24px; } .demo-error-art { min-height: 180px; } .demo-error-art svg { width: 64px; height: 64px; } .demo-error-orbit { width: 180px; height: 180px; } .demo-error-page .demo-error-code { font-size: 56px; } }