/* Shared Public/Live 404 illustration, using each host's light and dark theme tokens. */
.error-404 { --error-current: var(--accent); --error-wire: var(--text-muted); --error-spark: var(--accent); --error-action-hover: #80ecd3; --error-action-text: #04231a; text-align: center; }
:root[data-theme="light"] .error-404 { --error-action-hover: #065a4d; --error-action-text: #fff; }
@media (prefers-color-scheme: light) { :root:not([data-theme]) .error-404 { --error-action-hover: #065a4d; --error-action-text: #fff; } }
.error-404-code { margin: 0 0 .2rem; color: var(--text); font-size: clamp(5rem, 14vw, 8rem); line-height: 1; font-weight: 800; letter-spacing: -.075em; text-shadow: 0 .08em .12em rgb(0 0 0 / .13); }
.error-404-zero { position: relative; display: inline-block; }
.error-404-bolt { position: absolute; inset: 10% 0 0; display: grid; place-items: center; color: var(--error-current); font-size: .5em; line-height: 1; letter-spacing: 0; }
.error-404 h1 { max-width: none; margin: 0 auto .35rem; color: var(--text); font-size: clamp(1.35rem, 3.1vw, 1.9rem); line-height: 1.25; font-weight: 730; }
.error-404-joke { min-height: 1.65em; margin: 0 auto; color: var(--text-muted); font-size: clamp(.94rem, 1.5vw, 1.05rem); }
.error-404 .error-404-actions { display: flex; justify-content: center; margin-top: 1.25rem; }
.error-404-primary { display: inline-flex; gap: .75rem; align-items: center; justify-content: center; min-height: 2.75rem; padding: .55rem 1.3rem; border: 1px solid var(--accent); border-radius: .45rem; background: var(--accent); color: var(--error-action-text); font-size: .95rem; font-weight: 650; text-decoration: none; box-shadow: 0 .15rem .4rem rgb(0 0 0 / .12); }
.error-404-primary:hover { border-color: var(--error-action-hover); background: var(--error-action-hover); color: var(--error-action-text); }
.error-404-primary:focus-visible, .error-404-secondary:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.error-404-secondary { display: inline-block; margin-top: .1rem; color: var(--text-muted); font-size: .82rem; text-decoration: underline; }
.error-circuit { width: 100%; height: clamp(7rem, 18vw, 11rem); margin-top: clamp(.75rem, 3vw, 1.5rem); overflow: hidden; }
.error-circuit svg { display: block; width: 100%; height: 100%; }
.error-circuit-base, .error-circuit-pulse { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-width: 4; }
.error-circuit-base { stroke: var(--error-wire); opacity: .58; }
.error-circuit-pulse { stroke: var(--error-current); stroke-dasharray: 75 900; stroke-dashoffset: 990; opacity: 0; filter: drop-shadow(0 0 5px var(--error-current)); }
.error-circuit-plug rect { fill: var(--error-wire); stroke: var(--error-wire); }
.error-circuit-plug path { fill: none; stroke: var(--error-wire); stroke-linecap: round; stroke-width: 4; }
.error-circuit-sparks { fill: none; stroke: var(--error-spark); stroke-linecap: round; stroke-width: 3; opacity: 0; transform-box: fill-box; transform-origin: center; }
.error-circuit-zero { fill: var(--text-muted); font: 600 20px system-ui, sans-serif; opacity: 0; }
.error-404-animate .error-circuit-pulse { animation: error-current 3.5s linear 2s 1 both; }
.error-404-animate .error-circuit-sparks { animation: error-sparks 3.5s ease-out 2s 1 both; }
.error-404-animate .error-circuit-zero { animation: error-zero 3.5s ease-out 2s 1 both; }
@keyframes error-current { 0%, 1% { opacity: 0; stroke-dashoffset: 990; } 5% { opacity: .9; } 53% { opacity: 1; stroke-dashoffset: 555; } 72% { opacity: 1; stroke-dashoffset: 475; } 84% { opacity: .3; } 100% { opacity: 0; stroke-dashoffset: 475; } }
@keyframes error-sparks { 0%, 47%, 69%, 100% { opacity: 0; transform: scale(.7); } 54% { opacity: .65; transform: scale(1); } 72% { opacity: 1; transform: scale(1.22); } 80% { opacity: 0; transform: scale(.8); } }
@keyframes error-zero { 0%, 72% { opacity: 0; } 80% { opacity: .85; } 100% { opacity: .48; } }
@media (prefers-reduced-motion: reduce) { .error-404 .error-circuit-pulse, .error-404 .error-circuit-sparks, .error-404 .error-circuit-zero { animation: none; opacity: 0; } }
@media (max-width: 40rem) { .error-circuit svg { width: 135%; max-width: none; margin-left: -17.5%; } .error-404-code { font-size: clamp(4.5rem, 21vw, 6.5rem); } }