/* Palette and base */
:root{--background:#0B0A0E;--text:#D8D5DF;--accent:#9B8ACB;--muted:#77717F;--border:#393044;--surface:#15121A;--secondary:#A39BAF;color-scheme:dark;font-family:"JetBrains Mono","IBM Plex Mono",Consolas,"Liberation Mono",monospace}
*{box-sizing:border-box}body{margin:0;min-height:100dvh;display:grid;place-items:center;background:var(--background);color:var(--text);font-size:13px;line-height:1.6;padding:42px 24px}body::before,body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:0}body::before{background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(155,138,203,.025) 3px 4px)}body::after{background:radial-gradient(ellipse at center,transparent 50%,rgba(0,0,0,.22) 100%)}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit}button,a{touch-action:manipulation}a:focus-visible,button:focus-visible,video:focus-visible{outline:2px solid var(--accent);outline-offset:5px}.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}[hidden]{display:none!important}
/* Composition */
.terminal{position:relative;z-index:1;width:min(100%,900px)}.system-bar,.frame-label,footer{display:flex;justify-content:space-between;gap:16px;font-size:10px;letter-spacing:.09em;color:var(--secondary)}.system-bar{margin-bottom:32px}.system-bar i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-right:6px;vertical-align:middle}.ascii{font-size:clamp(8px,1.8vw,24px);line-height:1.18;text-align:center;white-space:pre;margin:0;letter-spacing:0;text-shadow:0 0 12px rgba(155,138,203,.15)}.subtitle{text-align:center;font-size:11px;letter-spacing:.16em;color:var(--accent);margin:22px 0 30px}.transmission{width:min(100%,720px);margin:auto;border:1px solid var(--accent);border-radius:2px;background:var(--surface)}.frame-label{padding:10px 14px;border-bottom:1px solid var(--border);font-size:9px}.frame-label span:last-child{color:var(--accent)}.media-stage{position:relative;aspect-ratio:16/9;background:var(--background);overflow:hidden}video{display:block;width:100%;height:100%;object-fit:contain}.media-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;background:var(--surface);pointer-events:none;text-align:center;padding:20px}.placeholder-mark{font-size:32px;font-weight:300;color:var(--accent);opacity:.7}.media-placeholder p{font-size:11px;letter-spacing:.12em;margin:18px 0 6px}.media-help{font-size:10px;color:var(--secondary)}.poster-ready .media-placeholder{background:transparent;justify-content:flex-start}.poster-ready .placeholder-mark,.poster-ready .media-help{display:none}.play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:60px;height:60px;border:1px solid var(--accent);border-radius:2px;background:rgba(11,10,14,.8);color:var(--text);cursor:pointer}.play svg{width:24px;height:24px;fill:currentColor}.play:hover{background:var(--accent);color:var(--background)}.navigation{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;width:min(100%,720px);margin:24px auto 0}.navigation a{display:flex;align-items:center;justify-content:center;gap:22px;min-height:48px;border:1px solid var(--border);border-radius:2px;text-decoration:none;color:var(--text);font-size:11px;letter-spacing:.15em;background:var(--background);transition:background .18s,color .18s,border-color .18s}.navigation .nav-arrow{color:var(--accent)}.navigation a:hover{background:var(--accent);color:var(--background);border-color:var(--accent)}.navigation a:hover .nav-arrow{color:inherit}.navigation a[aria-disabled="true"]{cursor:not-allowed}.destination-note{font-size:10px;color:var(--secondary);text-align:center;margin:10px 0 0}footer{border-top:1px solid var(--border);margin-top:32px;padding-top:14px;font-size:9px}.accent{color:var(--accent)}
/* Boot: content stays visible without JavaScript */
@keyframes arrive{from{opacity:.05}to{opacity:1}}
/* Hidden terminal */
dialog{width:min(520px,calc(100% - 32px));padding:24px;border:1px solid var(--accent);border-radius:2px;background:var(--background);color:var(--text);max-height:calc(100dvh - 40px);overflow:auto}dialog::backdrop{background:rgba(0,0,0,.78)}dialog[open]{animation:arrive .18s}.dialog-bar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding-bottom:12px;gap:12px}.dialog-bar h2{font-size:10px;font-weight:400;color:var(--accent);letter-spacing:.08em;margin:0}.dialog-bar button{min-width:44px;min-height:44px;background:transparent;border:1px solid var(--border);color:var(--text);font-size:24px;cursor:pointer}.prompt{margin-top:24px;color:var(--accent)}dialog pre{font:inherit;white-space:pre-wrap;overflow-wrap:anywhere}.fiction,.disconnect{font-size:10px;color:var(--secondary)}.disconnect{margin-top:28px}
@media(min-width:1000px) and (max-height:800px){body{padding-block:24px}.system-bar{margin-bottom:24px}.transmission{max-width:620px}.subtitle{margin:16px 0 22px}footer{margin-top:24px}}
@media(max-width:600px){body{padding:28px 18px}.system-bar{font-size:8px;letter-spacing:0;gap:8px;margin-bottom:30px}.ascii{font-size:clamp(7px,1.7vw,10px)}.subtitle{font-size:9px;margin:20px 0 26px}.navigation{grid-template-columns:1fr;gap:10px;margin-top:20px}.navigation a{min-height:50px}.frame-label{font-size:8px;padding:9px 10px;letter-spacing:0}.media-help{font-size:9px}footer{font-size:8px;letter-spacing:0;margin-top:26px}.placeholder-mark{font-size:24px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
/* Preserve every ASCII column while centering the block itself. */
.ascii{width:max-content;max-width:100%;margin-inline:auto;text-align:left} @media(min-width:1000px) and (min-height:801px){body{padding-block:30px}.ascii{font-size:22px}}

/* CRT: scanlines sit above the interface; media stays in a clear layer. */
.terminal{z-index:auto}
body::before{z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 4px),repeating-linear-gradient(90deg,rgba(155,138,203,.022) 0 1px,transparent 1px 3px)}
body::after{z-index:0;background-image:radial-gradient(ellipse at center,transparent 38%,rgba(0,0,0,.42) 100%),linear-gradient(180deg,transparent 44%,rgba(155,138,203,.055) 49%,transparent 54%);background-size:100% 100%,100% 250%;animation:crt-sweep 14s linear infinite}
.transmission{position:relative;z-index:3;animation:frame-glow 6s ease-in-out infinite}
@keyframes crt-sweep{from{background-position:0 0,0 150%}to{background-position:0 0,0 -150%}}
@keyframes frame-glow{0%,100%{border-color:var(--accent);box-shadow:0 0 0 rgba(155,138,203,0)}50%{border-color:#B5A4E0;box-shadow:0 0 14px rgba(155,138,203,.08)}}
/* A quiet, steady terminal rhythm, with no rapid flashing or text distortion. */
.system-bar i{width:6px;height:6px;animation:online-blink 1.8s ease-in-out infinite;box-shadow:0 0 7px rgba(155,138,203,.45)}
@keyframes online-blink{0%,100%{opacity:1;box-shadow:0 0 8px rgba(155,138,203,.6)}50%{opacity:.2;box-shadow:0 0 0 rgba(155,138,203,0)}}
.ascii{animation:phosphor-glow 5s ease-in-out infinite}
@keyframes phosphor-glow{0%,100%{text-shadow:0 0 10px rgba(155,138,203,.15)}50%{text-shadow:0 0 18px rgba(155,138,203,.38)}}
.cursor{animation:cursor-blink 1.3s steps(1,end) infinite}
@keyframes cursor-blink{0%,60%,100%{opacity:1}61%,99%{opacity:0}}
.play{animation:play-glow 3.8s ease-in-out infinite;transition:background .18s,color .18s}
@keyframes play-glow{0%,100%{box-shadow:0 0 0 0 rgba(155,138,203,0)}50%{box-shadow:0 0 0 5px rgba(155,138,203,.07)}}
.navigation a{position:relative;overflow:hidden;transition:background .18s,color .18s,border-color .18s,box-shadow .18s}
.navigation a::before{content:'>';position:absolute;left:14px;opacity:0;transform:translateX(-3px);transition:opacity .18s,transform .18s}
.navigation a::after{content:'';position:absolute;bottom:0;left:0;height:1px;width:100%;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s}
.navigation .nav-arrow{display:inline-block;transition:transform .18s,color .18s}
.navigation a:is(:hover,:focus-visible)::before{opacity:1;transform:translateX(0)}
.navigation a:is(:hover,:focus-visible)::after{transform:scaleX(1)}
.navigation a:is(:hover,:focus-visible) .nav-arrow{transform:translate(2px,-2px)}
/* Short staggered boot; no interaction is blocked during the reveal. */
.boot .system-bar{animation:terminal-enter .18s backwards}
.boot .ascii{animation:terminal-enter .28s .2s backwards,phosphor-glow 5s .48s ease-in-out infinite}
.boot .subtitle{animation:terminal-enter .24s .34s backwards}
.boot .transmission{animation:terminal-enter .25s .45s backwards,frame-glow 6s .7s ease-in-out infinite}
.boot .navigation a{animation:terminal-enter .24s .55s backwards}
.boot .navigation a:nth-child(2){animation-delay:.62s}
.boot .navigation a:nth-child(3){animation-delay:.69s}
.boot .destination-note,.boot footer{animation:terminal-enter .22s .74s backwards}
@keyframes terminal-enter{from{opacity:.08;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
dialog[open]{animation:terminal-enter .2s ease-out}
/* Visitors can pause the ambient effects without changing the static CRT texture. */
footer{align-items:center;flex-wrap:wrap}
.footer-identity{display:flex;align-items:center;gap:12px}
.fx-toggle{position:relative;z-index:3;padding:4px 6px;min-height:28px;border:1px solid var(--border);border-radius:2px;background:var(--background);color:var(--secondary);font-size:9px;cursor:pointer;letter-spacing:0;transition:color .18s,border-color .18s}
.fx-toggle:hover{color:var(--accent);border-color:var(--accent)}
.effects-paused *, .effects-paused *::before, .effects-paused *::after, .effects-paused::before, .effects-paused::after{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* User-supplied block art: preserve every glyph and space, recolored Ghost Violet. */
.terminal header{container-type:inline-size}
.ascii{font-family:"Courier New",Courier,monospace;color:var(--accent);line-height:1.17;font-size:clamp(5px,2.2769cqw,18px);letter-spacing:0}
@media(min-width:1000px) and (min-height:801px){.ascii{font-size:clamp(5px,2.2769cqw,18px)}}
@media(max-width:600px){.ascii{font-size:clamp(5px,2.2769cqw,18px)}}

/* Header-only signal glitch: brief sliced echoes; the original art stays stable. */
.ascii{position:relative;isolation:isolate}
.ascii::before,.ascii::after{content:attr(data-glitch);position:absolute;inset:0;pointer-events:none;white-space:pre;font:inherit;line-height:inherit;letter-spacing:inherit;text-align:inherit;color:var(--accent);text-shadow:none;opacity:0;clip-path:inset(0 0 100% 0)}
.ascii::before{color:var(--text);animation:ascii-glitch-light 8s 1.2s steps(1,end) infinite}
.ascii::after{animation:ascii-glitch-violet 8s 1.2s steps(1,end) infinite}
@keyframes ascii-glitch-light{
  0%,10%,12.4%,65%,67.4%,100%{opacity:0;transform:translateX(0);clip-path:inset(0 0 100% 0)}
  10.2%,11.1%{opacity:.7;transform:translateX(3px);clip-path:inset(24% 0 63% 0)}
  11.2%,12.2%{opacity:.55;transform:translateX(-2px);clip-path:inset(61% 0 14% 0)}
  65.2%,66.2%{opacity:.6;transform:translateX(-3px);clip-path:inset(39% 0 46% 0)}
  66.3%,67.2%{opacity:.45;transform:translateX(2px);clip-path:inset(76% 0 8% 0)}
}
@keyframes ascii-glitch-violet{
  0%,10%,12.6%,65%,67.6%,100%{opacity:0;transform:translateX(0);clip-path:inset(0 0 100% 0)}
  10.5%,11.6%{opacity:.85;transform:translateX(-3px);clip-path:inset(51% 0 31% 0)}
  11.7%,12.4%{opacity:.65;transform:translateX(3px);clip-path:inset(18% 0 71% 0)}
  65.5%,66.5%{opacity:.8;transform:translateX(3px);clip-path:inset(66% 0 17% 0)}
  66.6%,67.4%{opacity:.6;transform:translateX(-2px);clip-path:inset(30% 0 54% 0)}
}
.effects-paused .ascii::before,.effects-paused .ascii::after{opacity:0;clip-path:inset(0 0 100% 0)}
@media(prefers-reduced-motion:reduce){.ascii::before,.ascii::after{opacity:0;clip-path:inset(0 0 100% 0)}}

/* Real one-time service availability, in the existing terminal status style. */
.system-bar{align-items:flex-start;flex-wrap:wrap}
.system-statuses{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:8px 14px}
.system-indicator,.service-indicator{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.service-indicator{min-width:108px}
.system-statuses i{margin:0;flex:none}
.service-indicator[data-state="online"] i{background:var(--accent)}
.service-indicator:not([data-state="online"]) i{animation:none;box-shadow:none;background:var(--muted)}
.service-indicator[data-state="checking"] i,.service-indicator[data-state="unknown"] i,.service-indicator[data-state="unchecked"] i{background:transparent;border:1px solid var(--accent)}
.service-indicator[data-state="online"] .service-state{color:var(--accent)}
.service-indicator[data-state="offline"] .service-state{color:var(--text)}
@media(max-width:700px){.system-bar{flex-direction:column;align-items:stretch;gap:12px}.system-statuses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px}.service-indicator{min-width:0}.system-statuses>span:nth-child(even){justify-self:end}}

/* Decorative echo buffers in the outer margins; never real operational logs. */
.ambient-terminal{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;user-select:none;transition:opacity .2s}
.ambient-log{position:absolute;width:190px;color:var(--accent);font-size:9px;line-height:2.4;letter-spacing:.02em;white-space:nowrap}
.ambient-log-left{left:32px;top:24%}
.ambient-log-right{right:32px;bottom:18%}
.ambient-label{display:block;opacity:.12;font-size:8px;letter-spacing:.09em;padding-bottom:6px;border-bottom:1px solid rgba(155,138,203,.12);margin-bottom:8px}
.ambient-line{display:block;opacity:0;animation:ambient-echo 20s ease-out infinite}
.ambient-line:nth-of-type(3){animation-delay:3.5s}
.ambient-line:nth-of-type(4){animation-delay:7s}
.ambient-line:nth-of-type(5){animation-delay:10.5s}
.ambient-log-right .ambient-line{animation-delay:2s}
.ambient-log-right .ambient-line:nth-of-type(3){animation-delay:5.5s}
.ambient-log-right .ambient-line:nth-of-type(4){animation-delay:9s}
.ambient-log-right .ambient-line:nth-of-type(5){animation-delay:12.5s}
@keyframes ambient-echo{0%,4%,72%,100%{opacity:0;transform:translateY(3px)}12%,44%{opacity:.24;transform:translateY(0)}60%{opacity:.08;transform:translateY(0)}}
/* A dim, broad phosphor wake follows the screen's slow scan. No blur filters. */
.phosphor-trail{position:absolute;top:-20vh;left:0;right:0;height:20vh;background:linear-gradient(180deg,transparent 0%,rgba(155,138,203,.012) 20%,rgba(155,138,203,.065) 68%,rgba(155,138,203,.018) 88%,transparent 100%);animation:phosphor-trace 14s linear infinite}
@keyframes phosphor-trace{from{transform:translateY(0)}to{transform:translateY(120vh)}}
.effects-paused .ambient-terminal{opacity:0}
/* Stable accessible link names, with visual command prompts on hover or focus. */
.navigation a::before{content:none}
.navigation .nav-label,.navigation .nav-arrow{transition:opacity .18s,color .18s,transform .18s}
.navigation .nav-label{color:inherit}
.navigation .nav-command{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;pointer-events:none;color:inherit;font-size:10px;letter-spacing:.02em;white-space:nowrap;transition:opacity .18s}
.navigation a:is(:hover,:focus-visible) .nav-label,.navigation a:is(:hover,:focus-visible) .nav-arrow{opacity:0}
.navigation a:is(:hover,:focus-visible) .nav-command{opacity:1}
.command-cursor{animation:cursor-blink 1.3s steps(1,end) infinite}
@media(max-width:1180px){.ambient-log{width:auto;font-size:8px;line-height:1.5}.ambient-log-left{left:24px;top:8px}.ambient-log-right{right:24px;bottom:8px;text-align:right}.ambient-label{display:none}.ambient-line{display:none}.ambient-log-left .ambient-line:nth-of-type(2),.ambient-log-right .ambient-line:nth-of-type(4){display:block}}
@media(prefers-reduced-motion:reduce){.ambient-terminal{display:none}}