:root{
  /* warm editorial — cream chrome around a dark planet */
  --cream:#F4F1EA;        /* page */
  --cream-2:#ECE6D9;      /* cards, rails, deeper cream */
  --cream-3:#E2DBCB;      /* hairlines on cream */
  --ink:#13233A;          /* primary text + the map's deep-space fill */
  --ink-soft:#445268;     /* secondary text on cream */
  --ink-faint:#79838F;    /* labels, hints */
  --amber:#E8A33D;        /* the signal, the light, the arc */
  --amber-deep:#B0741A;   /* amber that must read as text on cream */
  --rust:#A85636;         /* the single destructive action */
  /* inside the porthole (on dark) */
  --space:#13233A;
  --night:#0C1626;
  --land:#1E3550;
  --on-dark:#D7DEEA;      /* text on the dark map */
  --on-dark-2:#8492A6;
  --sans:'Poppins',system-ui,sans-serif;
  --mono:'IBM Plex Mono','Cascadia Mono',Consolas,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;background:var(--cream);overflow:hidden;
  font-family:var(--sans);color:var(--ink);font-size:13px;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
canvas#map{position:fixed;inset:0;z-index:1}
input{font-family:inherit;background:transparent;border:0;outline:none;color:inherit}
:focus-visible{outline:2px solid var(--amber-deep);outline-offset:2px;border-radius:4px}

/* ---------------- wordmark (globe-a) ---------------- */
.wm{display:inline-flex;align-items:baseline;font-weight:800;letter-spacing:.004em;color:var(--ink);
  line-height:1;user-select:none}
.wm .aw{position:relative;display:inline-block}
.wm .aw .arc{position:absolute;right:-0.16em;top:-0.30em;width:0.66em;height:0.56em;
  pointer-events:none;overflow:visible}
.wm .aw .arc svg{width:100%;height:100%;overflow:visible;display:block}

/* ---------------- header ---------------- */
#hdr{position:fixed;top:0;left:0;right:0;height:54px;z-index:6;display:flex;align-items:center;
  padding:0 46px;gap:22px}
#hdr .brand{display:flex;align-items:baseline;gap:14px}
#hdr .wm{font-size:27px}
#hdr .tag{font-size:12.5px;color:var(--ink-faint);font-weight:500;letter-spacing:.01em}
#hdr .sp{flex:1}
#hdr .feeds{display:flex;gap:16px;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.02em}
#hdr .feeds .f{display:flex;align-items:center;gap:6px}
#hdr .feeds b{font-weight:500;color:var(--ink)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 6px rgba(232,163,61,.8)}
.dot.cold{background:#C7C0B0;box-shadow:none}
#hdr .utc{font-family:var(--mono);font-size:13px;color:var(--ink);letter-spacing:.06em}
#hdr .bench-link{font-family:var(--mono);font-size:11px;color:var(--amber-deep);text-decoration:none;
  letter-spacing:.04em;border-bottom:1px solid rgba(176,116,26,.32);padding-bottom:1px;cursor:pointer}

/* ---------------- openings ticker ---------------- */
#ticker{position:fixed;top:54px;left:0;right:0;height:30px;z-index:6;display:flex;align-items:center;
  padding:0 46px;gap:0;white-space:nowrap;overflow:hidden;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-soft)}
#ticker .lbl{color:var(--ink-faint);letter-spacing:.16em;margin-right:16px;font-weight:500;flex:none}
#ticker #tickerbody{overflow:hidden;text-overflow:ellipsis}
#ticker .it{margin-right:4px;cursor:pointer}
#ticker em{font-style:normal;color:var(--amber-deep);font-weight:500}
#ticker .sep{color:var(--cream-3);margin:0 12px}
#ticker .new{color:var(--ink);font-weight:500}

/* ---------------- bottom control deck ---------------- */
#deck{position:fixed;left:0;right:0;bottom:0;z-index:6;padding:0 46px 20px;
  display:flex;flex-direction:column;gap:12px}
/* scrubber */
#scrub{display:flex;align-items:center;gap:14px;font-family:var(--mono)}
#scrub .end{font-size:10px;color:var(--ink-faint);letter-spacing:.08em}
#scrub .track{position:relative;flex:1;height:18px;cursor:crosshair;touch-action:none}
#scrub .rail{position:absolute;left:0;right:0;top:9px;height:2px;background:var(--cream-3);border-radius:2px}
#scrub .tick{position:absolute;top:6px;width:1px;height:8px;background:var(--cream-3)}
#scrub .tick.maj{top:3px;height:13px;background:#D2C9B6}
#scrub .tlabel{position:absolute;top:18px;font-size:9px;color:var(--ink-faint);transform:translateX(-50%)}
#scrub .cursor{position:absolute;top:2px;width:2px;height:14px;background:var(--amber);border-radius:2px;
  box-shadow:0 0 7px rgba(232,163,61,.7)}
#scrub .curlabel{position:absolute;top:-13px;font-size:9px;color:var(--amber-deep);transform:translateX(-50%);display:none;letter-spacing:.04em}
#scrub .live{font-size:11px;color:var(--amber-deep);letter-spacing:.14em;font-weight:600;cursor:pointer}
#scrub .live.off{color:var(--ink-faint)}

/* controls row */
#controls{display:flex;align-items:center;gap:18px}
#call{display:flex;align-items:center;gap:11px}
#call .pre{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.16em}
#call .box{position:relative;min-width:148px;padding:8px 13px;border:1.5px solid var(--cream-3);border-radius:9px;
  background:#FBF9F3;font-family:var(--mono);font-size:15px;letter-spacing:.18em;color:var(--ink);font-weight:500}
#call .box input{width:158px;font-family:var(--mono);font-size:15px;letter-spacing:.18em;color:var(--ink);font-weight:500;
  text-transform:uppercase;caret-color:transparent}
#call .box input::placeholder{color:var(--ink-faint);letter-spacing:.02em;font-size:12px;font-weight:400;text-transform:none}
#call .box .caret{position:absolute;display:inline-block;width:7px;height:15px;background:var(--amber);
  top:9px;border-radius:1px;pointer-events:none}
#bands{display:flex;gap:3px;font-family:var(--mono);font-size:11px}
#bands span{padding:5px 8px;color:var(--ink-faint);letter-spacing:.03em;border-radius:7px;cursor:pointer}
#bands span.on{color:var(--amber-deep);background:rgba(232,163,61,.13);font-weight:600}
#stats{margin-left:auto;font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);
  text-align:right;letter-spacing:.01em}
#stats b{font-weight:600;color:var(--ink)}
#stats .meas{color:var(--ink-faint)}

/* ask box */
#ask{display:flex;align-items:center;gap:12px;padding:11px 15px;border-radius:11px;
  background:var(--cream-2);border:1.5px solid var(--cream-3)}
#ask .ch{font-family:var(--mono);color:var(--amber-deep);font-weight:600;font-size:14px}
#ask .line{position:relative;flex:1;font-size:13.5px;color:var(--ink-faint)}
#ask .line input{width:100%;font-size:13.5px;color:var(--ink);font-weight:500;caret-color:transparent}
#ask .line input::placeholder{color:var(--ink-faint);font-weight:400}
#ask .line .caret{position:absolute;display:inline-block;width:7px;height:15px;background:var(--amber);
  top:1px;border-radius:1px;pointer-events:none}
#ask .line .status{position:absolute;inset:0;display:none;color:var(--ink-soft);background:var(--cream-2)}
#ask .line .status em{font-style:normal;color:var(--amber-deep);font-weight:500}
#ask .hint{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.02em}

/* answer card */
#answer{display:none;padding:14px 17px;border-radius:11px;background:#FBF9F3;
  border:1.5px solid var(--cream-3);border-left:3px solid var(--amber)}
#answer .a{font-size:14px;color:var(--ink);line-height:1.6;max-width:920px;font-weight:400}
#answer .a .k{color:var(--amber-deep);font-weight:600}
#answer .trace{margin-top:11px;display:flex;flex-wrap:wrap;gap:7px;align-items:center}
#answer .chip{font-family:var(--mono);font-size:10.5px;color:var(--ink-soft);
  background:var(--cream-2);border:1px solid var(--cream-3);border-radius:6px;padding:3px 8px;letter-spacing:.01em}
#answer .chip b{color:var(--ink);font-weight:600}
#answer .tracelbl{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.06em;margin-right:5px;text-transform:uppercase}
#answer .obs{font-family:var(--mono);font-size:10px;color:var(--ink-faint);letter-spacing:.04em;margin-left:2px}

/* center message (dark planet truth state) — printed on the dark map */
#centermsg{position:fixed;left:0;right:0;top:46%;z-index:5;text-align:center;display:none;padding:0 40px}
#centermsg .l1{font-size:17px;color:var(--on-dark);letter-spacing:.01em;font-weight:500}
#centermsg .l2{font-size:12.5px;color:var(--on-dark-2);margin-top:9px;font-weight:400;max-width:560px;margin-left:auto;margin-right:auto;line-height:1.6}

/* first-visit hint, in cream just under the porthole */
#hint{position:fixed;left:0;right:0;z-index:5;text-align:center;display:none;
  font-family:var(--mono);font-size:11.5px;color:var(--ink-soft);letter-spacing:.05em;transition:opacity 1.1s}

/* hover tooltip pinned on the map */
#tip{position:fixed;display:none;z-index:7;border:1px solid rgba(215,222,234,.18);
  background:rgba(8,16,30,.9);border-radius:8px;padding:7px 11px;font-family:var(--mono);
  font-size:10px;letter-spacing:.05em;color:var(--on-dark-2);line-height:1.75;backdrop-filter:blur(2px);cursor:pointer}
#tip b{color:var(--amber);font-weight:500}
#tip .pin{color:var(--on-dark);font-weight:500}

/* replay watermark — on the map, always visible while replaying */
#replay{position:fixed;z-index:7;display:none;border:1px solid rgba(232,163,61,.5);
  color:var(--amber);background:rgba(232,163,61,.1);border-radius:7px;
  padding:5px 13px;font-family:var(--mono);font-size:11px;letter-spacing:.3em;font-weight:500}

/* ---------------- the bench (settings) — a calm cream page ---------------- */
#bench{position:fixed;inset:0;z-index:8;display:none;background:var(--cream);overflow:hidden auto}
#bench .wrap{max-width:1080px;margin:0 auto;padding:32px 46px 40px}
#bench .top{display:flex;align-items:baseline;gap:16px}
#bench .wm{font-size:22px}
#bench h1{font-size:13px;font-weight:600;letter-spacing:.06em;color:var(--ink-soft)}
#bench .back{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--amber-deep);
  text-decoration:none;letter-spacing:.03em;cursor:pointer}
#bench .sub{font-size:12.5px;color:var(--ink-faint);margin-top:6px;font-weight:400}
#bench .grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 46px;margin-top:16px}
.sec{border-top:1px solid var(--cream-3);padding-top:9px}
.sec h2{font-family:var(--mono);font-size:10px;font-weight:600;letter-spacing:.18em;
  color:var(--amber-deep);margin-bottom:6px}
.row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;font-size:12.5px;gap:14px}
.row .k{color:var(--ink-soft)}
.row .v{font-family:var(--mono);color:var(--ink);letter-spacing:.02em;font-size:12px}
.row .v.meas{color:var(--ink-faint)}
.row input.inp{font-family:var(--mono);font-size:12px;color:var(--ink);text-align:right;letter-spacing:.06em;
  width:120px;text-transform:uppercase;border-bottom:1px solid var(--cream-3)}
.row input.inp::placeholder{color:var(--ink-faint);text-transform:none}
.tog{font-family:var(--mono);letter-spacing:.05em;font-size:11px;cursor:pointer;user-select:none}
.tog.on{color:var(--amber-deep);font-weight:600}
.tog.off{color:var(--ink-faint)}
.vtog{cursor:pointer;user-select:none}
.slider{display:inline-flex;align-items:center;gap:11px}
.slider .tr{position:relative;width:118px;height:9px;cursor:ew-resize;touch-action:none}
.slider .tr::before{content:'';position:absolute;left:0;right:0;top:4px;height:2px;background:var(--cream-3);border-radius:2px}
.slider .fl{position:absolute;left:0;top:4px;height:2px;background:var(--amber);border-radius:2px}
.slider .nub{position:absolute;top:1px;width:8px;height:8px;border-radius:50%;background:var(--amber);
  box-shadow:0 0 5px rgba(232,163,61,.5)}
.slider .v{min-width:46px;text-align:right}
.note{font-size:11px;color:var(--ink-faint);line-height:1.55;margin-top:6px;max-width:440px}
.danger{color:var(--rust);font-family:var(--mono);font-size:11px;margin-top:11px;letter-spacing:.03em;
  border:1px solid rgba(168,86,54,.3);border-radius:7px;padding:5px 10px;display:inline-block;cursor:pointer}

@media (max-width:720px){
  #hdr{padding:0 18px;gap:12px}#hdr .tag{display:none}#hdr .feeds{gap:10px;font-size:10.5px}
  #ticker{padding:0 18px}#deck{padding:0 18px 14px}#bench .wrap{padding:24px 18px 40px}
  #bench .grid{grid-template-columns:1fr}#controls{flex-wrap:wrap;gap:10px}
  #stats{margin-left:0;width:100%;text-align:left}
}