/* One look for every screen in the room: felt green, marquee gold, alarm red. */
:root{
  --felt:#0d231c;--felt-2:#122e25;--felt-3:#1a3b30;--ivory:#efe6d2;--ivory-2:#b9b09c;
  --gold:#e4c067;--alarm:#ff3b2f;--alarm-ink:#ffb3ad;--win:#4fd18b;
  --display:"Big Shoulders Display","Oswald","Arial Narrow",Impact,sans-serif;
  --body:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--felt);color:var(--ivory);font:16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
body.alarm{background:#160a09}
h1,h2,h3{font-family:var(--display);text-transform:uppercase;line-height:1;margin:0;letter-spacing:.02em}
h1{font-size:clamp(2.4rem,8vw,5rem);font-weight:900;color:var(--gold)}
h2{font-size:1.6rem;font-weight:700;color:var(--gold)}
.eyebrow{font:600 .72rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ivory-2)}
.mono{font-family:var(--mono)}
.wrap{max-width:1100px;margin:0 auto;padding:20px 16px}
.panel{background:var(--felt-2);border:1px solid var(--felt-3);border-radius:6px;padding:16px}
.btn{font:700 1.05rem var(--display);text-transform:uppercase;letter-spacing:.08em;padding:12px 18px;border-radius:4px;border:2px solid var(--gold);color:var(--gold);background:transparent;cursor:pointer}
.btn.solid{background:var(--gold);color:#1a1507}
.btn.alarm{border-color:var(--alarm);color:var(--alarm)}
.btn.win{border-color:var(--win);color:var(--win)}
.btn:disabled{opacity:.4;cursor:default}
.btn.big{font-size:1.6rem;padding:22px 26px;width:100%}
.clock{font:600 clamp(3rem,10vw,7rem)/1 var(--mono);color:var(--alarm);font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(255,59,47,.6)}
.clock.ok{color:var(--win);text-shadow:0 0 18px rgba(79,209,139,.5)}
.sys{font:600 .72rem var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:8px 10px;border-radius:3px;background:#1e0d0b;border:1px solid #3a1612;color:var(--alarm-ink);display:flex;justify-content:space-between;gap:8px}
.sys.ok{background:#0e2a1c;border-color:#1f5a3c;color:#bdf0d3}
.sys.traced{background:#2a2410;border-color:#6a5a1c;color:var(--gold)}
.feed{font:.9rem/1.5 var(--mono);display:grid;gap:4px}
.feed .l{display:grid;grid-template-columns:4.5em 6em 1fr;gap:10px}
.feed .q{color:var(--ivory-2)}.feed .a{color:var(--alarm)}.feed .e{color:var(--win)}.feed .s{color:var(--gold)}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.grid{display:grid;gap:10px}
.log{width:100%;text-align:left;font:.9rem var(--mono);display:grid;grid-template-columns:5em 1fr 1fr;gap:10px;padding:12px;border-radius:4px;background:var(--felt);border:1px solid var(--felt-3);color:var(--ivory);cursor:pointer}
.log.hit{border-color:var(--alarm);background:#2a0f0c}
.log:disabled{opacity:.45}
input,textarea{font:1rem var(--body);background:var(--felt);color:var(--ivory);border:1px solid var(--felt-3);border-radius:4px;padding:12px;width:100%}
.tag{display:inline-block;padding:4px 10px;border-radius:999px;font:600 .7rem var(--mono);letter-spacing:.08em;text-transform:uppercase}
.tag.red{background:#4a1612;color:#ffb3ad}.tag.yellow{background:#4a3a12;color:#ffe3a3}.tag.green{background:#0e2a1c;color:#bdf0d3}
.badge{display:inline-block;padding:6px 12px;border-radius:4px;font:700 .8rem var(--mono);letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold)}
.pulse{animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.4}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}

[hidden]{display:none!important}
body.calm *,body.calm *::before,body.calm *::after{animation:none!important;transition:none!important}
body.calm .takeover.brief li{opacity:1}
a.btn{text-decoration:none;display:inline-block}
:focus-visible{outline:3px solid var(--ivory);outline-offset:4px}
@media(max-width:700px){.feed .l{grid-template-columns:3.5em 5em 1fr;font-size:.72rem;gap:4px}.log{font-size:.72rem;grid-template-columns:4em 1fr 1fr}.task{grid-template-columns:1fr!important}.task code{overflow-wrap:anywhere}.cols{grid-template-columns:1fr!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.takeover.brief li{opacity:1!important}}