:root {
  --void: #05070A;
  --panel: rgba(12, 16, 23, 0.78);
  --panel-border: rgba(255, 255, 255, 0.08);
  --hover: rgba(255, 255, 255, 0.05);
  --text: #E2E8F0;
  --text-2: #94A3B8;
  --text-3: #64748B;
  --cherenkov: #38BDF8;
  --slate: #1E293B;
  --fog: #111622;
  --orphan: #F59E0B;
  --link: #A855F7;
  --ok: #10B981;
  --bad: #F43F5E;
  --lock: #EF4444;
  --gap: 16px;
  --loom-h: 64px;
  --left-w: 280px;
  --right-w: 360px;
  --sans: "Inter", "Geist Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", "Geist Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body {
  margin: 0; width: 100vw; height: 100vh; overflow: hidden;
  background: var(--void); color: var(--text);
  font: 12px/1.4 var(--sans);
  -webkit-font-smoothing: antialiased;
}
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--text-3); }
.small { font-size: 11px; }
.hidden { display: none !important; }
code { font-family: var(--mono); font-size: 11px; color: var(--text-2); }

#sky { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 1; cursor: grab; display: block; }
#sky.dragging { cursor: grabbing; }

.hud {
  position: fixed; z-index: 10;
  background: var(--panel);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--panel-border);
  border-radius: 8px;
}

/* ---------------- Zone A ---------------- */
/* the top bar spans the sky between the docks, so the left dock never covers the command bar;
   it wraps onto a second row before anything is cut */
#topbar {
  position: fixed; z-index: 11; top: var(--gap);
  left: calc(var(--left-w) + var(--gap) * 2); right: var(--gap);
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 8px;
}
body.left-collapsed #topbar { left: calc(var(--gap) + 36px); }
body.inspecting #topbar { right: calc(var(--right-w) + var(--gap) * 2); }
#topbar > * { flex: none; }
/* a narrow bar drops the UTC time and the extra words of the lock badge */
body.inspecting #lock-text .utc, body.inspecting #ro-lod { display: none; }
@media (max-width: 1600px) { #lock-text .utc { display: none; } } /* the badge title keeps the UTC time */
#cmd {
  position: relative; flex: 1 1 240px; min-width: 200px; max-width: 480px; height: 34px; border-radius: 17px;
  display: flex; align-items: center; padding: 0 8px 0 14px; cursor: text;
}
#cmd:hover { border-color: rgba(255, 255, 255, 0.14); }
#cmd-readout { flex: 1; display: flex; gap: 6px; align-items: baseline; font-size: 12px; white-space: nowrap; overflow: hidden; }
#cmd-readout .k { color: var(--text-3); font-size: 10px; letter-spacing: .04em; margin-left: 4px; }
#cmd-readout .k:first-child { margin-left: 0; }
#cmd-readout .lod { margin-left: auto; color: var(--cherenkov); font-size: 10px; }
#cmd-input {
  flex: 1; background: transparent; border: 0; outline: 0; color: var(--text); font-size: 12px;
}
kbd {
  font-family: var(--mono); font-size: 10px; color: var(--text-3);
  border: 1px solid var(--panel-border); border-radius: 4px; padding: 1px 5px; margin-left: 8px;
}
#cmd-suggest {
  position: absolute; top: 40px; left: 0; width: 480px; max-width: calc(100vw - 32px); margin: 0; padding: 4px; list-style: none;
}
#cmd-suggest li { padding: 6px 10px; border-radius: 5px; display: flex; gap: 12px; cursor: pointer; }
#cmd-suggest li.active, #cmd-suggest li:hover { background: var(--hover); }
#cmd-suggest li b { font-family: var(--mono); font-weight: 500; color: var(--text); min-width: 190px; }
#cmd-suggest li span { color: var(--text-3); }

.badge {
  position: static; min-width: 0; max-width: 100%; overflow: hidden; height: 34px; border-radius: 17px; display: flex; align-items: center; gap: 8px;
  padding: 0 14px; font-size: 11px; letter-spacing: .02em; white-space: nowrap;
}
.badge .dot { width: 7px; height: 7px; border-radius: 50%; }
.badge.live { color: var(--ok); }
.badge.live .dot { background: var(--ok); animation: pulse 1.6s ease-in-out infinite; }
.badge.locked { color: var(--orphan); border-color: rgba(239, 68, 68, 0.35); }
.badge.locked .dot { background: var(--lock); }
@keyframes pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(16,185,129,.6); } 50% { box-shadow: 0 0 0 5px rgba(16,185,129,0); } }

.toast {
  top: 60px; left: 50%; transform: translateX(-50%); padding: 7px 14px; font-size: 12px;
  font-family: var(--mono);
}
.toast.err { color: var(--bad); border-color: rgba(244, 63, 94, .35); }

/* ---------------- Docks ---------------- */
.dock {
  top: var(--gap); bottom: calc(var(--loom-h) + var(--gap) * 2);
  display: flex; flex-direction: column; overflow: hidden;
}
#left { left: var(--gap); width: var(--left-w); transition: transform .2s ease; }
#left.collapsed { transform: translateX(calc(-1 * var(--left-w) + 28px)); }
#left.collapsed { bottom: auto; }
#left.collapsed > *:not(.brand) { display: none; }
/* the inspector scrolls as one column, so the light curve below a long task panel stays reachable */
#right { right: var(--gap); width: var(--right-w); display: block; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
body.inspecting #lasso { right: calc(var(--gap) * 2 + var(--right-w)); }
.block { padding: 10px 14px; border-top: 1px solid var(--panel-border); }
.block.grow { flex: 1; min-height: 0; }
h3 {
  margin: 0 0 8px; font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-3); display: flex; align-items: center; gap: 6px;
}
.brand { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.brand .title { font-weight: 600; letter-spacing: .12em; font-size: 12px; }
.brand .sub { font-weight: 400; letter-spacing: 0; color: var(--text-3); margin-left: 6px; }
.icon-btn {
  background: transparent; border: 1px solid transparent; color: var(--text-2); border-radius: 5px;
  width: 22px; height: 22px; font-size: 14px; line-height: 1; cursor: pointer;
}
.icon-btn:hover { background: var(--hover); border-color: var(--panel-border); }
.count { margin-left: auto; color: var(--text-2); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 11px; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; text-align: right; color: var(--text); }
.kv.grid4 { grid-template-columns: auto 1fr auto 1fr; padding: 0 14px 10px; }

.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pill-btn {
  font: 500 11px var(--sans); color: var(--text-2); background: transparent; cursor: pointer;
  border: 1px solid var(--panel-border); border-radius: 12px; padding: 3px 10px;
  display: inline-flex; align-items: center; gap: 6px;
}
.pill-btn .sw { width: 7px; height: 7px; border-radius: 2px; background: currentColor; opacity: .35; }
.pill-btn:hover { background: var(--hover); }
.pill-btn.on { color: var(--text); border-color: rgba(255,255,255,.18); }
.pill-btn.on .sw { opacity: 1; }
.pill-btn:disabled { opacity: .35; cursor: not-allowed; }
.pill-btn.chip { color: var(--text); }
.pill-btn.chip::after { content: "×"; color: var(--text-3); }

.empty { border: 1px dashed var(--panel-border); border-radius: 6px; padding: 12px; }
.empty-title { color: var(--text-2); font-weight: 500; margin-bottom: 4px; }

/* ---------------- Inspector ---------------- */
.insp-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 12px 14px 8px; }
.obj-id { font-size: 14px; font-weight: 500; }
.triptych { display: flex; gap: 8px; margin-bottom: 6px; }
.cut {
  width: 96px; height: 96px; border: 1px solid var(--panel-border); border-radius: 4px; position: relative;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.025) 0 6px, transparent 6px 12px);
}
.cut span { position: absolute; left: 6px; top: 4px; font: 500 10px var(--mono); color: var(--text-3); z-index: 1;
  text-shadow: 0 0 3px #000; }
.cut img { width: 100%; height: 100%; border-radius: 3px; image-rendering: pixelated; display: block; }
.cut img.missing { display: none; }
#lc { display: block; width: 328px; height: 180px; }
.legend { display: flex; gap: 10px; font-size: 10px; margin-top: 4px; color: var(--text-2); }
.legend i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px; }

/* ---------------- Zone D ---------------- */
#lasso {
  right: var(--gap); bottom: calc(var(--loom-h) + var(--gap) * 2); width: 220px; height: 220px; padding: 7px;
}
.lasso-head { display: flex; gap: 6px; align-items: center; margin-bottom: 4px; font-size: 10px; }
select {
  background: transparent; color: var(--text-2); border: 1px solid var(--panel-border); border-radius: 4px;
  font-size: 10px; padding: 2px 4px; flex: 1; min-width: 0; width: 0;
}
select option { background: #0c1017; }
#lasso-cv { display: block; width: 204px; height: 180px; cursor: crosshair; }
.lasso-empty { position: absolute; left: 0; right: 0; top: 100px; text-align: center; font-size: 11px; padding: 0 20px; }

/* ---------------- Zone E ---------------- */
#loom { left: var(--gap); right: var(--gap); bottom: var(--gap); height: var(--loom-h); padding: 0; }
#loom-cv { display: block; width: 100%; height: 100%; cursor: ew-resize; }
.live-btn {
  position: absolute; right: 8px; top: 8px; font-size: 10px; letter-spacing: .06em;
  background: transparent; border: 1px solid var(--panel-border); color: var(--text-3);
  border-radius: 10px; padding: 2px 8px; cursor: pointer;
}
.live-btn.on { color: var(--ok); border-color: rgba(16,185,129,.4); }

.tooltip {
  position: fixed; z-index: 20; pointer-events: none; padding: 6px 9px; border-radius: 6px;
  background: rgba(12,16,23,.92); border: 1px solid var(--panel-border);
  font: 11px/1.5 var(--mono); font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
}
.tooltip .t { color: var(--text-3); }

@media (max-width: 1100px) {
  :root { --left-w: 240px; --right-w: 320px; }
  #cmd-suggest { width: 380px; }
}

/* ---------------- candidate queue ---------------- */
.queue { display: flex; flex-direction: column; min-height: 230px; }
/* the arena scrolls so that it never pushes the candidate queue out of the dock */
.block.arena { flex-shrink: 1; min-height: 90px; max-height: 26vh; display: flex; flex-direction: column; }
#arena { overflow-y: auto; min-height: 0; scrollbar-width: thin;
  /* the last visible row fades instead of ending in a hard cut */
  -webkit-mask-image: linear-gradient(#000 calc(100% - 18px), transparent); mask-image: linear-gradient(#000 calc(100% - 18px), transparent);
  padding-bottom: 14px; }
.sorts { margin-bottom: 6px; }
.sorts .pill-btn { padding: 2px 8px; font-size: 10px; }
.queue-list { list-style: none; margin: 0; padding: 0; overflow: hidden; flex: 1; min-height: 0; font-size: 11px; }
.queue-list li {
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: baseline;
  padding: 3px 6px; margin: 0 -6px; border-radius: 4px; cursor: pointer;
}
.queue-list li:hover, .queue-list li.sel { background: var(--hover); }
.queue-list li .v { color: var(--text); text-align: right; min-width: 52px; }
.queue-list li .n { color: var(--text-3); text-align: right; min-width: 34px; }
.queue-list li .id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); }
.queue-list li.orph .id { color: var(--orphan); }
.queue-list .head { cursor: default; color: var(--text-3); font-size: 10px; }
.queue-list .head:hover { background: transparent; }
.arena .lb { display: grid; grid-template-columns: 10px 1fr auto auto; gap: 6px; font-size: 11px; align-items: center; padding: 2px 0; }
.arena .lb i { width: 8px; height: 8px; border-radius: 2px; }
.arena .lb .nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arena .lb .act { grid-column: 2 / 5; color: var(--text-3); font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.lod0 #lasso { display: none; }
#lock-text .utc { color: var(--text-3); }
#lock-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- arena ---------------- */
#follow-glow {
  position: fixed; inset: 0; z-index: 5; pointer-events: none;
  box-shadow: inset 0 0 0 2px var(--agent, #fff), inset 0 0 40px -10px var(--agent, #fff);
}
#follow-glow .tag {
  position: absolute; left: 50%; top: 58px; transform: translateX(-50%);
  font: 500 11px var(--mono); color: var(--agent); background: rgba(12,16,23,.85);
  border: 1px solid var(--agent); border-radius: 10px; padding: 2px 10px;
}
.arena .lb { cursor: pointer; border-radius: 4px; padding: 3px 6px; margin: 0 -6px; }
.arena .lb:hover, .arena .lb.following { background: var(--hover); }
.arena .lb .crps { color: var(--text); }
.arena .lb .nh { color: var(--text-3); }
.arena .hint { font-size: 10px; color: var(--text-3); margin-top: 4px; }

/* ------------------------------------------------------------ universe view */
#universe { position: fixed; inset: 0; z-index: 8; background: #05070a; transition: opacity .45s ease; }
#universe.fading { opacity: 0; }
#uni-cv { display: block; width: 100vw; height: 100vh; cursor: grab; }
#uni-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ulabel { position: absolute; transform: translate(10px, -50%); font: 11px 'JetBrains Mono', monospace;
  color: #CBD5E1; white-space: nowrap; display: flex; align-items: center; gap: 6px; }
.ulabel i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-left: -13px; }
.ulabel.sun { color: #FDB813; } .ulabel.moon { color: #CBD5E1; } .ulabel.obs { color: #F59E0B; }
#uni-panel { position: absolute; top: calc(var(--gap) + 52px); left: 50%; transform: translateX(-50%);
  padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 520px; }
.uni-head { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; }
#uni-read { font-size: 11px; line-height: 1.6; color: #E2E8F0; }
.uni-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; font-size: 11px; }
.pill-btn { background: transparent; color: #CBD5E1; border: 1px solid #334155; border-radius: 999px;
  padding: 3px 10px; font-size: 11px; cursor: pointer; }
.pill-btn:hover { border-color: #64748B; color: #F8FAFC; }
.uni-open { padding: 7px 12px; background: rgba(11,15,20,0.82); backdrop-filter: blur(8px); }
body.universe #left, body.universe #right, body.universe #lasso, body.universe #cmd { display: none !important; }
@media (max-width: 700px) { #uni-panel { min-width: 0; left: 16px; right: 16px; transform: none; } }
.survey-sel { font: 500 11px var(--mono); color: #CBD5E1; background: rgba(11,15,20,0.82); backdrop-filter: blur(8px);
  border: 1px solid #334155; border-radius: 999px; padding: 6px 10px; cursor: pointer;
  min-width: 128px; height: 32px; appearance: none; -webkit-appearance: none; text-align: center; }
.survey-sel:disabled { cursor: default; opacity: .75; }
.inj-badge { font-size: 10px; letter-spacing: .04em; color: #F0ABFC; background: rgba(11,15,20,0.82);
  border: 1px dashed #C026D3; border-radius: 999px; padding: 8px 10px; white-space: nowrap; cursor: help; }
/* ChronoBench task panel */
.task { padding: 12px 14px 10px; border-bottom: 1px solid var(--panel-border); }
.task .task-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.task .task-head .tt { font: 600 11px var(--mono); letter-spacing: .04em; color: var(--text); }
.task .task-head i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; }
.task .task-head .grow { flex: 1; }
.task .st { font: 500 10px var(--mono); padding: 2px 7px; border-radius: 999px; border: 1px solid currentColor; }
.task .st.sealed { color: #94A3B8; border-style: dashed; }
.task .st.settled { color: #38BDF8; }
.task .st.unresolved { color: #F59E0B; }
.task table { width: 100%; border-collapse: collapse; font: 11px var(--mono); margin: 6px 0; }
.task td, .task th { padding: 2px 4px; text-align: right; }
.task th { color: var(--text-3); font-weight: 500; }
.task td:first-child, .task th:first-child { text-align: left; }
.task .rank { font: 11px var(--mono); columns: 2; margin: 6px 0 0; padding-left: 22px; }
.task .rank li { cursor: pointer; }
.task .rank li:hover { color: var(--text); }
.task .nav { display: flex; gap: 6px; margin-top: 8px; }
.task .verdict { font: 600 12px var(--mono); }
#right.task-only #obj-panel { display: none; }
/* a task alone is short: the dock fits its content instead of running to the loom */
#right.task-only { bottom: auto; max-height: calc(100vh - var(--loom-h) - var(--gap) * 3); }
.task .peers tr { cursor: pointer; }
.task .peers tr:hover td, .task .peers tr.me td { color: var(--text); }
.task .peers tr.me td:first-child { font-weight: 600; }
.task .peers i { width: 7px; height: 7px; border-radius: 2px; display: inline-block; margin-right: 6px; }

/* ---------------- short and narrow screens ---------------- */
/* short: the left dock scrolls as a whole instead of letting the queue run under the arena */
@media (max-height: 1000px), (max-width: 1100px) {
  #left { overflow-y: auto; scrollbar-width: thin; }
  #left > section { flex: 0 0 auto; }
  #left > section.queue { min-height: 0; }
  .queue-list { flex: none; height: 150px; overflow-y: auto; }
  .block.arena { max-height: 200px; }
}
/* narrow (tablet): the phase-space lasso gives way to the sky, the top bar starts after the left dock
   and scrolls sideways */
@media (max-width: 900px) {
  #lasso { display: none; }
  /* the inspector goes below the top bar instead of beside it */
  body.inspecting #topbar { right: var(--gap); }
  #right { top: calc(var(--top-h, 34px) + var(--gap) * 2); }
}
/* phone: the inspector takes the full width below the top bar, the left dock starts collapsed
   (app.js) */
@media (max-width: 700px) {
  :root { --left-w: 260px; --gap: 10px; }
  #right { left: var(--gap); width: auto; z-index: 6; }
  /* the open dock lies over the top bar on a phone; the bar keeps its full width */
  #topbar, body:not(.left-collapsed) #topbar { left: calc(var(--gap) + 36px); right: var(--gap); justify-content: flex-start; }
  #cmd { flex: 1 1 100%; max-width: none; min-width: 0; }
  #cmd-readout .k:nth-child(5), #ro-k5, #ro-lod { display: none; }
  #cmd-suggest { width: calc(100vw - 56px); }
  .site-menu .lbl, #lock-text .bx, #lock-text .utc { display: none; }
  .survey-sel { min-width: 132px; height: 30px; padding: 4px 8px; }
  body.inspecting #legend { display: none; }
  .uni-open { padding: 5px 10px; }
  .badge { height: 30px; padding: 0 10px; }
  body.inspecting #left { visibility: hidden; }
  #legend { bottom: calc(var(--loom-h) + var(--gap) * 2); max-width: calc(100vw - 2 * var(--gap)); }
  .legend-body { max-height: 38vh; }
}
/* keyboard focus is always visible */
button:focus-visible, select:focus-visible, [tabindex]:focus-visible, .queue-list li:focus-visible {
  outline: 2px solid var(--cherenkov); outline-offset: 1px;
}
/* night replay */
.replay-btn { right: 64px; }
.replay-btn.on { color: var(--cherenkov); border-color: rgba(56,189,248,.45); }
.replay {
  left: 50%; transform: translateX(-50%); bottom: calc(var(--loom-h) + var(--gap) * 2 + 34px);
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 10px; font-size: 11px; z-index: 7;
}
.replay #rp-text { color: var(--text-2); white-space: nowrap; }
.replay #rp-text b { color: var(--text); font-weight: 500; }
@media (max-width: 700px) { .replay { left: var(--gap); right: var(--gap); transform: none; } .replay #rp-text { overflow: hidden; text-overflow: ellipsis; } }
/* arena: replay / live switch */
.arena-mode { margin-left: auto; display: inline-flex; gap: 2px; text-transform: none; letter-spacing: 0; }
.arena-mode button { font: 500 9.5px var(--mono); color: var(--text-3); background: transparent; border: 1px solid transparent;
  border-radius: 8px; padding: 1px 6px; cursor: pointer; }
.arena-mode button.on { color: var(--text); border-color: var(--panel-border); background: var(--hover); }
.arena-mode button:disabled { opacity: .4; cursor: default; }
.task .st.awaiting { color: #A78BFA; border-style: dashed; }
.task .awaiting { color: #C4B5FD; border-left: 2px solid #A78BFA; padding: 4px 8px; margin: 2px 0 8px; }
/* agent trace */
.trace ol { list-style: none; margin: 6px 0 0; padding: 0; font: 10.5px/1.45 var(--mono); max-height: 52vh; overflow-y: auto; }
.trace li { display: grid; grid-template-columns: 58px 92px 1fr 44px; gap: 6px; padding: 1px 2px; color: var(--text-2); }
.trace li[data-i] { cursor: pointer; }
.trace li[data-i]:hover, .trace li.cur { background: var(--hover); color: var(--text); }
.trace li.commit { color: #E2E8F0; }
.trace li.commit .tool::before { content: "▲ "; }
.trace li.err { color: #F43F5E; }
.trace li .tgt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trace li .n { text-align: right; color: var(--text-3); }
#right.trace-only #obj-panel, #right.trace-only #task { display: none; }
#right.trace-only { bottom: auto; max-height: calc(100vh - var(--loom-h) - var(--gap) * 3); }
.task .st.void { color: #64748B; text-decoration: line-through; }
.task table.cls { width: 100%; }
.task table.cls td:first-child { white-space: nowrap; width: 5.5em; }
.task table.cls td.bar { width: 100%; }
.task table.cls td.bar i { display: block; height: 6px; background: var(--accent, #38BDF8); border-radius: 2px; min-width: 1px; }
.task table.cls tr.truth td:first-child { color: #10B981; }
.task table.cls tr.truth td.bar i { background: #10B981; }
/* links to the public site (landing, leaderboard, docs) under the brand */
.site-links { display: flex; flex-wrap: wrap; gap: 2px 12px; padding: 0 16px 10px; margin-top: -4px; font-size: 11.5px; }
.site-links a { color: var(--text-2); text-decoration: none; }
.site-links a:hover { color: var(--cherenkov); }
/* topbar menu to the public site */
.site-menu { position: relative; }
.site-menu-list { position: absolute; top: 40px; left: 0; min-width: 190px; padding: 6px; border-radius: 10px; display: flex; flex-direction: column; z-index: 30; }
.site-menu-list a { color: var(--text); text-decoration: none; padding: 7px 10px; border-radius: 6px; font-size: 12.5px; }
.site-menu-list a:hover, .site-menu-list a:focus-visible { background: var(--hover); color: var(--cherenkov); }
#site-menu-btn { white-space: nowrap; }
/* legend of the sky marks: bottom left of the sky, after the open dock */
.legend-box { left: calc(var(--left-w) + var(--gap) * 2); bottom: calc(var(--loom-h) + var(--gap) * 2 + 30px);
  width: 300px; padding: 4px; z-index: 9; }
.legend-box:not(.open) { width: auto; }
body.left-collapsed .legend-box { left: var(--gap); }
body.universe .legend-box { display: none; }
.legend-btn { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); background: transparent;
  border: 0; padding: 3px 8px; cursor: pointer; }
.legend-btn::after { content: " ▸"; color: var(--text-3); }
.legend-box.open .legend-btn::after { content: " ▾"; }
.legend-body { display: none; list-style: none; margin: 2px 0 0; padding: 2px 6px 4px; max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.legend-box.open .legend-body { display: block; }
.legend-body li { display: grid; grid-template-columns: 20px 1fr; gap: 6px; align-items: start; font-size: 11px; line-height: 1.35;
  color: var(--text-2); padding: 2px 0; }
.legend-body svg { margin-top: 1px; }
/* first-run orientation */
.intro { left: 50%; top: 42%; transform: translate(-50%, -50%); z-index: 30; padding: 16px 20px; max-width: min(440px, calc(100vw - 32px));
  background: rgba(12,16,23,.94); border-color: rgba(56,189,248,.35); box-shadow: 0 10px 40px rgba(0,0,0,.5); }
.intro p { margin: 0 0 6px; font-size: 13px; line-height: 1.45; color: var(--text); }
.intro .small { margin-top: 10px; }
/* task panel: reveal a settled answer */
.task .reveal { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 8px; }
.task .reveal-btn { color: var(--cherenkov); border-color: rgba(56,189,248,.45); }