@font-face { font-family: "STIX Two Text"; src: url(fonts/stix-two-text.ttf) format("truetype"); font-style: normal; font-weight: 400 700; font-display: block; }
@font-face { font-family: "STIX Two Text"; src: url(fonts/stix-two-text-italic.ttf) format("truetype"); font-style: italic; font-weight: 400 700; font-display: block; }

:root {
  --bg: #0c0d10; --ink: #ece9e2; --dim: #8b9099; --grey: #6f747d; --faint: #3a3f48; --line: #1d2026;
  --blue: #58c4dd; --yellow: #f7d96f; --red: #fc6255; --green: #83c167; --purple: #a585c9; --gold: #d9b45a;
  --serif: "STIX Two Text", "Times New Roman", serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* chrome type scale: 13 / 15 / 17 / 22 */
  --t1: 14px; --t2: 16px; --t3: 18px; --t4: 24px;
  --rail: 200px; --topH: 72px; --footH: 48px;
  --ease: cubic-bezier(.65,0,.35,1);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink); overflow: hidden;
  font-family: var(--serif); font-size: var(--t2); -webkit-font-smoothing: antialiased; }
.num, .tab { font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
svg text { font-family: var(--serif); }
svg text.num, svg tspan.num { font-style: normal; font-variant-numeric: tabular-nums lining-nums; font-feature-settings: "tnum" 1, "lnum" 1; }
::selection { background: rgba(247, 217, 111, .25); }

/* ---------------------------------------------------------------- canvas */
#views { position: fixed; inset: 0; display: flex; }
.view { position: relative; flex: 1 1 0; min-width: 0; height: 100%; }
.view svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.view + .view::before { content: ""; position: absolute; left: 0; top: var(--topH); bottom: var(--footH); width: 1px; background: var(--line); }
body.explore .view svg { cursor: grab; }
body.explore.dragging .view svg { cursor: grabbing; }
.insp { transition: opacity .15s; }
.insp:hover { opacity: .78; }
.view-name { position: absolute; top: calc(var(--topH) + 8px); left: 24px; font-style: italic; color: var(--dim); font-size: var(--t3); pointer-events: none; }

/* ---------------------------------------------------------------- top */
#top { position: fixed; left: 0; right: 0; top: 0; height: var(--topH); display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 5; }
.pill { pointer-events: auto; position: absolute; left: 50%; transform: translateX(-50%); transition: top .7s var(--ease), width .7s var(--ease), opacity .4s; }
.pill.landing { top: calc(50vh - 28px); width: min(560px, 80vw); }
.pill.docked { top: 16px; width: 0; opacity: 0; pointer-events: none; }
.pill input { width: 100%; height: 56px; border-radius: 28px; border: 1px solid var(--faint); background: transparent; color: var(--ink);
  font: italic var(--t4)/1 var(--serif); padding: 0 28px; outline: none; transition: border-color .2s; }
.pill input::placeholder { color: var(--grey); }
.pill input:focus { border-color: var(--grey); }
#suggest { list-style: none; margin: 12px 0 0; padding: 0; }
#suggest li { padding: 10px 28px; font-style: italic; font-size: 20px; color: var(--dim); cursor: pointer; border-radius: 20px; display: flex; justify-content: space-between; gap: 16px; transition: color .15s, background .15s; }
#suggest li .why { font-style: normal; color: var(--grey); font-size: var(--t1); }
#suggest li[aria-selected="true"], #suggest li:hover { color: var(--ink); background: #15171c; }
#suggest li.off { opacity: .45; }
#title { opacity: 0; font-style: italic; font-size: var(--t4); color: var(--ink); transition: opacity .5s .3s; display: flex; gap: 24px; align-items: baseline; pointer-events: auto; cursor: default; }
#title.on { opacity: 1; }
#title .vs { color: var(--grey); font-size: var(--t2); }
#modes { position: absolute; right: 28px; top: 0; height: var(--topH); display: flex; align-items: center; gap: 18px; font-style: italic; color: var(--dim); font-size: var(--t2); }
#modes span { display: inline-flex; align-items: center; gap: 7px; }
#modes span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--dim); }
#modes span.live::before { background: var(--green); }

/* ---------------------------------------------------------------- rail */
#rail { position: fixed; left: 0; top: var(--topH); bottom: var(--footH); width: var(--rail); display: flex; flex-direction: column; justify-content: center; gap: 2px; padding-left: 24px; z-index: 4; opacity: 0; transition: opacity .6s .4s; pointer-events: none; }
#rail.on { opacity: 1; pointer-events: auto; }
#rail button { all: unset; display: grid; grid-template-columns: 14px 1fr; column-gap: 12px; align-items: center; padding: 8px 0; cursor: pointer; color: var(--grey); font-style: italic; font-size: var(--t3); transition: color .2s; }
#rail button:hover { color: var(--dim); }
#rail button.cur { color: var(--ink); }
#rail button.done { color: var(--dim); }
#rail button.cur.done { color: var(--ink); }
#rail button:focus-visible { outline: 1px solid var(--faint); outline-offset: 4px; border-radius: 3px; }
#rail .st { width: 14px; height: 14px; }
#rail .ct { grid-column: 2; font-style: normal; font-size: var(--t1); color: var(--grey); margin-top: 1px; font-variant-numeric: tabular-nums; }
#rail .agent .ct { font-style: italic; }

/* ---------------------------------------------------------------- foot */
#foot { position: fixed; left: 0; right: 0; bottom: 0; height: var(--footH); display: flex; align-items: center; justify-content: space-between; padding: 0 28px 0 24px; z-index: 4; pointer-events: none; opacity: 0; transition: opacity .6s; }
#foot.on { opacity: 1; }
#ticker { font-family: var(--mono); font-size: 13px; color: var(--grey); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 60vw; transition: opacity .3s; }
#ticker.off { opacity: 0; }
#ticker .tk { display: inline-block; }
#counter { font-size: var(--t2); color: var(--grey); font-style: italic; white-space: nowrap; margin-right: 40px; }
#counter b { font-weight: 400; font-style: normal; color: var(--dim); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- drawer */
#drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(460px, 36vw); background: #101115; border-left: 1px solid var(--line); z-index: 8;
  transform: translateX(100%); transition: transform .45s var(--ease); display: flex; flex-direction: column; }
#drawer.open { transform: none; }
#drawer-x { all: unset; position: absolute; right: 18px; top: 16px; font-size: 22px; color: var(--grey); cursor: pointer; width: 28px; text-align: center; }
#drawer-x:hover { color: var(--ink); }
#drawer-body { overflow-y: auto; padding: 28px 32px 40px; flex: 1; }
#drawer h2 { font-weight: 400; font-style: italic; font-size: var(--t4); margin: 0 40px 6px 0; }
#drawer .val { font-size: 34px; margin: 8px 0 2px; font-variant-numeric: tabular-nums lining-nums; }
#drawer .val small { font-size: var(--t3); color: var(--dim); font-style: italic; margin-left: 6px; }
#drawer .ok { color: var(--green); font-size: var(--t2); margin: 14px 0 0; }
#drawer .bad { color: var(--red); font-size: var(--t2); margin: 14px 0 0; }
#drawer .muted { color: var(--grey); font-size: var(--t2); font-style: italic; margin: 14px 0 0; }
#drawer .cite { color: var(--dim); font-size: var(--t2); margin: 22px 0 8px; font-style: italic; }
#drawer a { color: var(--dim); text-decoration: none; border-bottom: 1px solid var(--faint); }
#drawer a:hover { color: var(--ink); border-color: var(--grey); }
#drawer .src { font-size: var(--t2); line-height: 1.6; color: var(--grey); white-space: pre-wrap; margin-top: 10px; }
#drawer mark { background: none; color: var(--ink); box-shadow: inset 0 -1.5px 0 var(--yellow); }
#drawer .reject mark { box-shadow: inset 0 -1.5px 0 var(--red); }
#drawer code, #drawer .mono { font-family: var(--mono); font-size: 12.5px; color: var(--dim); word-break: break-word; }
#drawer .q { display: block; padding: 10px 0; border-top: 1px solid var(--line); }
#drawer .row { display: flex; justify-content: space-between; gap: 16px; font-size: var(--t2); padding: 8px 0; border-top: 1px solid var(--line); color: var(--dim); }
#drawer .row span:last-child { color: var(--ink); text-align: right; }
#drawer .lbl { color: var(--grey); font-size: var(--t1); margin-top: 22px; font-style: italic; }

/* ---------------------------------------------------------------- help */
#help-btn { all: unset; position: fixed; right: 20px; bottom: 12px; width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--faint); color: var(--grey); text-align: center; font: var(--t1)/24px var(--serif); cursor: pointer; z-index: 6; transition: color .2s, border-color .2s; }
#help-btn:hover { color: var(--ink); border-color: var(--grey); }
#help { position: fixed; right: 20px; bottom: 48px; z-index: 9; background: #101115; border: 1px solid var(--line); border-radius: 10px; padding: 16px 20px; opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s; pointer-events: none; }
#help.open { opacity: 1; transform: none; pointer-events: auto; }
#help dl { display: grid; grid-template-columns: auto auto; gap: 6px 20px; margin: 0; font-size: var(--t2); }
#help dt { font-family: var(--mono); font-size: 12.5px; color: var(--dim); text-align: right; line-height: 20px; }
#help dd { margin: 0; font-style: italic; color: var(--ink); line-height: 20px; }

@media (max-width: 1500px) { :root { --rail: 172px; --t1: 13px; --t2: 15px; --t3: 16px; --t4: 22px; } }

/* compare: give the left view the rail's width so both canvases fit stages at the same scale */
#views:has(.view + .view) .view:first-child { flex: 0 0 calc((100% - var(--rail) - 40px) / 2 + var(--rail)); }