:root{--bg:#030303;--ink:#f0f0f0;--dim:#a7a7a7;--gold:#e8be59;--red:#ff3333;--line:#2a2a2a;--osd:ui-monospace,SFMono-Regular,Menlo,"Courier New",monospace}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.5 Helvetica,Arial,sans-serif}
a{color:var(--gold)}
.unit{max-width:1180px;margin:0 auto;padding:16px}
.banner{position:sticky;top:0;z-index:20;padding:6px 12px;background:var(--red);color:#030303;font:700 11px var(--osd);letter-spacing:.22em;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.seal{width:54px;height:54px;flex:0 0 54px}
.ident{display:flex;flex-direction:column;line-height:1.25}
.ident b{font:700 15px var(--osd);letter-spacing:.2em;color:var(--gold)}
.ident span{font:11px var(--osd);color:var(--dim);letter-spacing:.08em}
.console{display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid #343434;border-top:0;background:linear-gradient(#141414,#070707)}
.console .tv{border:0}
.file{display:flex;flex-direction:column;gap:10px;padding:16px 16px 16px 0;font:12px/1.45 var(--osd);color:#cfcfcf}
.box{padding:10px 12px;background:#0b0b0b;border:1px solid #2a2a2a;border-left:3px solid var(--gold)}
.box h2{margin:0 0 6px;font:700 11px var(--osd);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.box h2 small{font-weight:400;letter-spacing:.06em;color:#7f7f7f;text-transform:none}
.box dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0}
.box dt{color:#7f7f7f}.box dd{margin:0;color:var(--ink)}
.log ol{list-style:none;margin:0;padding:0;max-height:210px;overflow:auto;display:flex;flex-direction:column-reverse}
.log li{padding:2px 0;border-top:1px dotted #222;color:#d8d8d8}
.log li time{color:#7f7f7f;margin-right:6px}
.log li.you{color:var(--gold)}
.intercept{border-left-color:var(--red)}
.intercept p{margin:0 0 6px;color:var(--ink);font-style:italic}
.intercept small{color:#7f7f7f}
.gice{border-left-color:#c8bcff;background:linear-gradient(135deg,#101018,#0b0b0b)}
.gice h2{color:#c8bcff}
.gice p{margin:0 0 4px}
.cert b{color:var(--red)}

/* the chassis */
.top{display:flex;align-items:center;gap:14px;padding:10px 14px;background:linear-gradient(#1c1c1c,#0b0b0b);border:1px solid #343434;border-bottom:0;border-radius:12px 12px 0 0}
.mark{font:700 13px var(--osd);letter-spacing:.18em;text-transform:lowercase;text-decoration:none;color:var(--gold)}
.leds{display:flex;gap:6px;margin-left:auto}
.leds i{width:9px;height:9px;border-radius:50%;background:#3a0b0b;box-shadow:inset 0 1px 1px #000}
.leds i.on{background:var(--red);box-shadow:0 0 8px var(--red);animation:blink 1.6s steps(2) infinite}
.feed{font:11px var(--osd);color:var(--dim);letter-spacing:.12em}
.stripe{height:6px;background:repeating-linear-gradient(45deg,var(--gold) 0 8px,#030303 8px 16px);opacity:.85;border-left:1px solid #343434;border-right:1px solid #343434}
.tv{padding:16px;background:linear-gradient(#141414,#070707);border:1px solid #343434;border-top:0}
.reticle{position:absolute;inset:0;z-index:4;pointer-events:none;background:linear-gradient(rgba(240,240,240,.55),rgba(240,240,240,.55)) 50% 50%/22px 1px no-repeat,linear-gradient(rgba(240,240,240,.55),rgba(240,240,240,.55)) 50% 50%/1px 22px no-repeat,linear-gradient(rgba(240,240,240,.35),rgba(240,240,240,.35)) 6% 12%/28px 2px no-repeat,linear-gradient(rgba(240,240,240,.35),rgba(240,240,240,.35)) 6% 12%/2px 28px no-repeat,linear-gradient(rgba(240,240,240,.35),rgba(240,240,240,.35)) 94% 88%/28px 2px no-repeat,linear-gradient(rgba(240,240,240,.35),rgba(240,240,240,.35)) 94% 88%/2px 28px no-repeat}
.playing .reticle{display:none}
.deck{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 14px;background:linear-gradient(#191919,#0a0a0a);border:1px solid #343434;border-top:1px solid #000;border-radius:0 0 12px 12px}
.slot{flex:1 1 220px;height:38px;display:flex;align-items:center;padding:0 10px;background:#000;border:1px solid #1e1e1e;border-radius:4px;box-shadow:inset 0 2px 6px #000}
.label{font:12px "Courier New",monospace;background:#efe4c4;color:#030303;padding:2px 8px;letter-spacing:.05em}
.keys{display:flex;gap:8px}
.keys button,.keys a{min-width:52px;height:44px;display:inline-flex;align-items:center;justify-content:center;font:16px var(--osd);color:var(--gold);text-decoration:none;background:linear-gradient(#2c2c2c,#111);border:1px solid #3a3a3a;border-radius:6px;cursor:pointer}
.keys button:active,.keys a:active{background:linear-gradient(#111,#2c2c2c)}
.keys button:focus-visible,.keys a:focus-visible,.nw-spot:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.keys .lit{color:var(--red);text-shadow:0 0 6px var(--red)}
.note{min-height:1.5em;margin:12px 2px 0;font:13px var(--osd);color:var(--dim)}
.note a{color:var(--gold)}
footer{margin:28px 2px 8px;font:12px var(--osd);color:#7f7f7f}

/* the screen (nodeworld) with a VHS signal */
.nw-screen{position:relative;width:100%;background:#000;overflow:hidden;border-radius:14px;box-shadow:0 0 0 2px #000,inset 0 0 60px #000}
.nw-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.15) contrast(1.06) blur(.35px);user-select:none}
.nw-screen::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:3;background:repeating-linear-gradient(rgba(0,0,0,.22) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.45) 100%)}
.nw-fx{position:absolute;left:0;right:0;height:14%;top:-20%;z-index:4;pointer-events:none;opacity:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.55) 0 2px,rgba(255,255,255,.05) 2px 5px,rgba(255,255,255,.35) 5px 6px);mix-blend-mode:screen;filter:blur(.6px)}
.nw-go .nw-fx{opacity:1;animation:track .38s linear}
.nw-go .nw-img{animation:jitter .38s steps(6)}
.nw-leave{animation:crt-off .9s ease-in forwards}
.nw-arrive{animation:crt-on .9s ease-out}
.nw-spots,.nw-people{position:absolute;inset:0;z-index:5}
.nw-people{pointer-events:none;z-index:2}
.nw-spot{position:absolute;min-width:44px;min-height:44px;padding:0;margin:0;background:transparent;border:0;cursor:pointer}
.nw-mark{position:absolute;inset:0;opacity:0;transition:opacity .15s;border:2px solid transparent;
  background:linear-gradient(var(--gold),var(--gold)) top left/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) top left/2px 12px no-repeat,
  linear-gradient(var(--gold),var(--gold)) bottom right/12px 2px no-repeat,linear-gradient(var(--gold),var(--gold)) bottom right/2px 12px no-repeat}
.nw-door .nw-mark{--gold:var(--red)}
.nw-label{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);white-space:nowrap;padding:1px 6px;font:12px var(--osd);color:#fff;background:rgba(0,0,0,.7);opacity:0;pointer-events:none}
.nw-spot:hover .nw-mark,.nw-spot:focus-visible .nw-mark,.nw-spot:hover .nw-label,.nw-spot:focus-visible .nw-label{opacity:1}
@media (hover:none){.nw-mark{opacity:.6}}
.nw-person{position:absolute;width:10px;height:24px;transform:translate(-50%,-100%)}
.nw-person::before{content:"";position:absolute;left:2px;top:0;width:6px;height:6px;border-radius:50%;background:var(--c)}
.nw-person::after{content:"";position:absolute;left:0;top:7px;width:10px;height:17px;border-radius:4px 4px 1px 1px;background:var(--c)}
.nw-caption{margin:10px 2px 0;font:13px var(--osd);color:var(--dim);letter-spacing:.04em}

/* on-screen display, the gate, the tape, a card */
.osd{position:absolute;inset:0;z-index:6;pointer-events:none;font:700 clamp(12px,2.6vw,20px) var(--osd);color:#fff;text-shadow:2px 0 rgba(255,51,51,.6),-2px 0 rgba(0,220,255,.45)}
.osd span{position:absolute}
.osd .mode{top:5%;left:4%}
.osd .ch{top:5%;right:4%;color:var(--red)}
.osd .ch.blink{animation:blink 1.2s steps(2) infinite}
.osd .sub{left:6%;right:6%;bottom:16%;text-align:center;font-size:clamp(11px,2.2vw,18px);background:rgba(0,0,0,.55);padding:2px 6px}
.osd .sub:empty{display:none}
.osd .tick{bottom:5%;left:4%;font-weight:400;font-size:clamp(9px,1.6vw,12px);color:#bdbdbd;text-shadow:none}
.osd .bug{bottom:5%;right:4%;font-weight:400;font-size:clamp(9px,1.6vw,12px);color:#e0e0e0;text-shadow:none}
.evidence{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;display:none;filter:grayscale(.55) contrast(1.15) blur(.4px)}
.evidencing .evidence{display:block}
.evidencing .nw-spots,.evidencing .nw-people,.evidencing .reticle{display:none}
.tape{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:contain;background:#000;display:none;filter:saturate(1.25) contrast(1.05) blur(.4px)}
.playing .tape{display:block}
.playing .nw-spots,.playing .nw-people{display:none}
.gate{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;border:0;cursor:pointer;background:#0a1a9e;color:#fff;font:700 clamp(14px,3vw,22px) var(--osd);text-shadow:2px 0 rgba(255,51,51,.5)}
.gate small{font-weight:400;font-size:clamp(11px,2vw,14px);letter-spacing:.06em}
.card{position:absolute;z-index:7;left:50%;top:50%;transform:translate(-50%,-50%);max-width:78%;padding:16px 22px;background:#f0f0f0;color:#030303;font:700 clamp(12px,2.2vw,16px)/1.35 Helvetica,Arial,sans-serif;text-align:center;border:3px solid #030303;box-shadow:0 0 0 3px #f0f0f0;cursor:pointer}
.card .big{display:block;font:900 clamp(16px,3.4vw,26px)/1.05 Impact,Haettenschweiler,"Arial Black",sans-serif;letter-spacing:.02em}
.card .small{display:block;font:400 clamp(10px,1.8vw,13px) "Courier New",monospace;margin-top:6px}

@keyframes blink{50%{opacity:.25}}
@keyframes track{from{top:-20%}to{top:110%}}
@keyframes jitter{0%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(4px) skewX(-2deg)}60%{transform:translateX(-3px)}80%{transform:translateX(5px)}100%{transform:translateX(0)}}
@keyframes crt-off{0%{transform:scale(1);filter:brightness(1)}60%{transform:scale(1,.006);filter:brightness(3)}100%{transform:scale(0,.006);filter:brightness(0)}}
@keyframes crt-on{0%{transform:scale(0,.006);filter:brightness(3)}40%{transform:scale(1,.006)}100%{transform:scale(1);filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){.nw-go .nw-img,.nw-go .nw-fx,.nw-leave,.nw-arrive,.leds i.on{animation:none}}
@media (max-width:900px){.console{grid-template-columns:1fr}.file{padding:0 16px 16px}}
@media (max-width:520px){.banner{font-size:9px;letter-spacing:.12em}.file{padding:0 8px 10px}.ident span{font-size:10px}.unit{padding:10px}.tv{padding:8px}.top{padding:8px 10px}.feed{display:none}.deck{padding:10px}.slot{flex-basis:100%}.keys{width:100%;justify-content:space-between}.keys button,.keys a{flex:1}}

/* 10-20x: the ticker, crosstalk, the theory board, the signal, motion boxes, dropouts */
.ticker{position:sticky;top:26px;z-index:19;overflow:hidden;background:#030303;border-bottom:1px solid #2a2a2a;font:12px var(--osd);color:#cfcfcf;white-space:nowrap}
.ticker span{display:inline-block;padding:4px 0;animation:tick 120s linear infinite}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.crosstalk{list-style:none;margin:8px 0 0;padding:0;border-top:1px dotted #333}
.crosstalk li{padding:4px 0;border-bottom:1px dotted #222}
.crosstalk span{display:block;color:#cfcfcf;font-style:normal}
.theory{border-left-color:#d61e1e}
.theory ol{list-style:none;margin:0;padding:0}
.theory li{padding:3px 0;border-top:1px dotted #2a1010;color:#d8d8d8}
.theory b{color:#ff6a6a;font-weight:700}
.signal{border-left-color:#7dff7d}
#scope{display:block;width:100%;height:64px;background:#040804;border:1px solid #1d3a1d;margin:2px 0 6px}
#readout{margin:0;color:#7dff7d}
.mbox{position:absolute;z-index:5;pointer-events:none;border:2px solid #7dff7d;box-shadow:0 0 6px rgba(125,255,125,.5);animation:mbox 2.4s linear forwards}
.mbox.hot{border-color:#ff3333;box-shadow:0 0 6px rgba(255,51,51,.6)}
.mbox::after{content:attr(data-label);position:absolute;left:-2px;bottom:100%;padding:1px 5px;white-space:nowrap;font:700 10px var(--osd);color:#030303;background:#7dff7d}
.mbox.hot::after{background:#ff3333}
@keyframes mbox{0%{opacity:0}8%{opacity:1}85%{opacity:1}100%{opacity:0}}
.nosig{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;background:#0a1a9e;color:#fff;font:700 clamp(16px,3vw,26px) var(--osd);letter-spacing:.3em}
@media (prefers-reduced-motion:reduce){.ticker span,.mbox{animation:none}}
@media (max-width:520px){.ticker{top:22px;font-size:11px}}

/* the feed stays in view while the case file scrolls */
@media (min-width:901px){.console .tv{position:sticky;top:64px;align-self:start}}

/* THE GICEPHONE (KB 10-24): the Corner is seen on Gice's flip phone ("see your gice provider"). On a desktop the page lives in the
   phone's screen (it scrolls inside the screen) and the keypad works; on a phone, your screen is the screen: only the status bar. */
.gp-status{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:8px;height:22px;padding:0 8px;background:#0b0f0b;border-bottom:1px solid #1d261d;font:700 10px var(--osd);color:#9fd89f;letter-spacing:.06em;white-space:nowrap;overflow:hidden}
.gp-bars{display:inline-flex;align-items:flex-end;gap:1px;height:10px}.gp-bars i{display:block;width:3px;background:#9fd89f}
.gp-bars i:nth-child(1){height:3px}.gp-bars i:nth-child(2){height:5px}.gp-bars i:nth-child(3){height:7px}.gp-bars i:nth-child(4){height:10px;opacity:.3;animation:gpBar 3.2s steps(1) infinite}
@keyframes gpBar{50%{opacity:1}}
.gp-carrier{color:var(--gold)}
.gp-msg{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:#cfe9cf;animation:gpBlink 1.6s steps(1) infinite}
@keyframes gpBlink{50%{opacity:.35}}
.gp-batt{display:inline-block;width:18px;height:8px;border:1px solid #9fd89f;position:relative}.gp-batt::after{content:"";position:absolute;right:-3px;top:2px;width:2px;height:4px;background:#9fd89f}
.gp-batt i{position:absolute;inset:1px auto 1px 1px;width:30%;background:var(--red)}
.gp .banner{top:22px}.gp .ticker{top:48px}
.gp-ear,.gp-brand,.gp-glass,.gp-hinge,.gp-base{display:none}
@media (max-width:520px){.gp .ticker{top:44px}}

@media (min-width:601px){
  html,body{height:100%}
  body{display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse at 50% 35%,#202020,#030303 70%)}
  .gp{--h:min(1000px,96vh);display:flex;flex-direction:column;overflow:hidden;width:min(620px,calc(var(--h) * .6),96vw);height:var(--h)}
  .gp-lid{position:relative;flex:0 0 62%;min-height:0;display:flex;flex-direction:column;padding:46px 18px 18px;border-radius:38px 38px 12px 12px;
    background:linear-gradient(150deg,#e4e6ea,#9ea2a9 35%,#62666d 68%,#b5b9bf);box-shadow:inset 0 2px 1px rgba(255,255,255,.7),inset 0 -4px 8px rgba(0,0,0,.45),0 22px 50px rgba(0,0,0,.65)}
  .gp-ear{display:block;position:absolute;top:13px;left:50%;width:76px;height:7px;margin-left:-38px;border-radius:4px;background:repeating-linear-gradient(90deg,#1b1b1b 0 3px,#5a5a5a 3px 5px)}
  .gp-brand{display:block;position:absolute;top:25px;left:0;right:0;text-align:center;font:700 10px var(--osd);letter-spacing:.5em;color:#2a2c30;text-shadow:0 1px 0 rgba(255,255,255,.5)}
  .gp-screen{position:relative;flex:1;min-height:0;overflow:auto;border:7px solid #050505;border-radius:10px;background:var(--bg);box-shadow:0 0 0 2px #2c2e33;container:gp/inline-size;scrollbar-width:thin;scrollbar-color:#2e2e2e #050505;overscroll-behavior:contain}
  .gp-glass{display:block;position:absolute;inset:46px 18px 18px;z-index:40;border-radius:10px;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.10),rgba(255,255,255,0) 38%),radial-gradient(ellipse at 50% 120%,rgba(120,255,140,.05),transparent 60%);box-shadow:inset 0 0 30px rgba(0,0,0,.6)}
  .gp-hinge{display:block;flex:0 0 14px;margin:0 26px;border-radius:6px;background:linear-gradient(#34373c,#a7abb2 45%,#34373c)}
  .gp-base{display:flex;flex-direction:column;gap:9px;flex:1;min-height:0;padding:14px 26px 22px;border-radius:12px 12px 46px 46px;
    background:linear-gradient(165deg,#d3d6db,#868a92 45%,#575b61);box-shadow:inset 0 2px 1px rgba(255,255,255,.55),inset 0 -5px 10px rgba(0,0,0,.4),0 22px 50px rgba(0,0,0,.65)}
  .gp-base button{cursor:pointer;border:0;color:#16181b;font:700 12px var(--osd);background:linear-gradient(#f4f5f7,#c3c6cc);box-shadow:0 2px 0 #4d5056,inset 0 1px 0 #fff;border-radius:8px}
  .gp-base button:active{transform:translateY(2px);box-shadow:0 0 0 #4d5056,inset 0 1px 0 #fff}
  .gp-base button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
  .gp-soft{display:flex;justify-content:space-between}.gp-soft button{width:30%;padding:5px 0;text-transform:uppercase;letter-spacing:.12em;font-size:10px}
  .gp-nav{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
  .gp-call,.gp-end{padding:9px 0;letter-spacing:.15em}.gp-call{color:#fff!important;background:linear-gradient(#3fbf5b,#1f7a33)!important}.gp-end{color:#fff!important;background:linear-gradient(#e54848,#8f1f1f)!important}
  .gp-dpad{display:grid;grid-template:repeat(3,26px)/repeat(3,30px);gap:2px}
  .gp-dpad button{font-size:10px;padding:0}.gp-dpad [data-k=up]{grid-area:1/2}.gp-dpad [data-k=left]{grid-area:2/1}.gp-dpad .gp-ok{grid-area:2/2;border-radius:50%;background:linear-gradient(#e8be59,#a8822a);font-size:10px}.gp-dpad [data-k=right]{grid-area:2/3}.gp-dpad [data-k=down]{grid-area:3/2}
  .gp-pad{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:7px}
  .gp-pad button{display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;border-radius:12px}
  .gp-pad b{font:700 clamp(13px,2.2vh,18px) var(--osd)}.gp-pad small{font:9px var(--osd);color:#55585e;letter-spacing:.12em;text-transform:uppercase;margin-top:2px}
  .gp .console{grid-template-columns:1fr}.gp .file{padding:0 12px 12px}.gp .console .tv{position:static}
}
/* inside the phone's screen the Corner lays out as it does on a phone: the same rules, keyed to the screen's width */
@container gp (max-width:520px){.banner{font-size:9px;letter-spacing:.12em}.file{padding:0 8px 10px}.ident span{font-size:10px}.unit{padding:10px}.tv{padding:8px}.top{padding:8px 10px}.feed{display:none}.deck{padding:10px}.slot{flex-basis:100%}.keys{width:100%;justify-content:space-between}.keys button,.keys a{flex:1}.ticker{font-size:11px}.gp .ticker{top:44px}.gate{font-size:15px}}
@media (prefers-reduced-motion:reduce){.gp-bars i,.gp-msg{animation:none}}