:root {
  --wall: #17172b;
  --card: rgba(22, 22, 42, 0.74);
  --card-solid: #1c1c33;
  --ink: #eef1f6;
  --ink-soft: #aab4c2;
  --ink-faint: #7a859a;
  --line: rgba(255, 255, 255, 0.14);
  --line-soft: rgba(255, 255, 255, 0.08);
  --cobalt: #7aa2ff;
  --cobalt-soft: rgba(122, 162, 255, 0.16);
  --gold: #e2b955;
  --gold-soft: rgba(226, 185, 85, 0.16);
  --anti: #ff6f7d;
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --gut: 24px;
  --console-h: 100px;
  --k: 1; /* interface scale: 1 on a laptop, larger on a classroom board */
  color-scheme: dark;
}
@media (min-width: 1800px) and (min-height: 950px) { :root { --k: 1.2; } }
html[data-board='on'] { --k: 1.1; }
@media (min-width: 1600px) and (min-height: 880px) { html[data-board='on'] { --k: 1.35; } }
html[data-board='on'] .hint { display: none; }

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--wall);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.45;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; color: inherit; cursor: pointer; }
b { font-weight: 600; }
kbd {
  font-family: var(--mono); font-size: 10px; padding: 1px 5px; border-radius: 4px;
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04); color: var(--ink-soft);
}

.app { position: fixed; inset: 0; overflow: hidden; }
.stage { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; }
.app.dragging .stage { cursor: grabbing; }

.eyebrow {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0; font-style: normal;
}
.faint { color: var(--ink-faint); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 18px 50px rgba(5, 5, 20, 0.35);
}

/* ---------- intro ---------- */
.intro { position: absolute; left: var(--gut); top: 22px; width: 356px; pointer-events: none; scale: var(--k); transform-origin: top left; }
.intro > * { pointer-events: auto; }
.intro h1 {
  font-family: var(--serif); font-weight: 400; font-size: 42px; line-height: 1; letter-spacing: -0.01em;
  margin: 10px 0 12px; color: var(--ink);
}
.intro h1 .stop { color: var(--cobalt); }
.lede { margin: 0 0 14px; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); text-wrap: pretty; }
.stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.stat {
  background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 7px 10px 8px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
}
.stat .eyebrow { font-size: 9px; letter-spacing: 0.1em; display: block; white-space: nowrap; }
.stat b { display: block; font-family: var(--mono); font-weight: 500; font-size: 18px; margin-top: 3px; color: var(--ink); transition: color 200ms var(--ease); white-space: nowrap; }
.stat small { display: block; margin-top: 2px; font-size: 10.5px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat.warn b { color: var(--anti); }
.stat.good b { color: #8fe3b0; }
.caption {
  margin: 0; padding: 11px 13px; font-size: 13px; line-height: 1.55; color: var(--ink);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-wrap: pretty;
}
.caption:empty { display: none; }
.caption .k { color: var(--c, var(--cobalt)); font-weight: 600; }

/* ---------- controls ---------- */
.controls {
  position: absolute; right: var(--gut); top: 22px; width: 392px; padding: 12px 14px 12px; scale: var(--k); transform-origin: top right;
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  display: flex; flex-direction: column; gap: 11px;
}
.controls .row { display: flex; flex-direction: column; gap: 6px; }
.controls .row.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.controls .row[hidden] { display: none; }
.controls .head { display: flex; justify-content: space-between; align-items: baseline; }
.controls .head em { font-style: normal; }
.val { font-family: var(--mono); font-size: 11.5px; font-style: normal; color: var(--ink); }
.segment { display: flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line-soft); }
.segment.wrap { flex-wrap: wrap; }
.segment button {
  flex: 1 1 auto; border: 0; background: transparent; padding: 6px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: var(--ink-soft); white-space: nowrap;
  transition: background 160ms var(--ease), color 160ms var(--ease);
}
.segment button:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }
.segment button[aria-checked='true'] { background: var(--ink); color: #15152a; }
.segment.small button { padding: 5px 8px; font-size: 11px; }
.segment button:focus-visible, .icon:focus-visible, .play:focus-visible, .toggle:focus-visible, input[type='range']:focus-visible {
  outline: 2px solid var(--cobalt); outline-offset: 2px;
}
.controls .foot { flex-direction: row; justify-content: space-between; align-items: center; gap: 10px; }
.controls .foot .segment { flex: 1; }
.tools { display: flex; gap: 6px; }
.icon {
  width: 32px; height: 30px; border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  display: grid; place-items: center; font-family: var(--mono); font-weight: 600; font-size: 13px; color: var(--ink-soft);
}
.icon svg { width: 17px; height: 17px; }
.icon[aria-pressed='true'] { background: var(--ink); color: #15152a; border-color: var(--ink); }

.slider { display: flex; flex-direction: column; gap: 5px; }
.slider.off { opacity: 0.38; }
input[type='range'] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px; background: transparent; margin: 0;
}
input[type='range']::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--cobalt) 0 var(--fill, 50%), rgba(255, 255, 255, 0.16) var(--fill, 50%) 100%);
}
input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; margin-top: -7px;
  background: var(--ink); border: 3px solid #15152a; box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(0, 0, 0, 0.4);
}
input[type='range']::-moz-range-track { height: 2px; background: rgba(255, 255, 255, 0.16); }
input[type='range']::-moz-range-progress { height: 2px; background: var(--cobalt); }
input[type='range']::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: var(--ink); border: 3px solid #15152a; }

/* ---------- console ---------- */
.console {
  position: absolute; left: var(--gut); width: calc((100% - 2 * var(--gut)) / var(--k)); bottom: 30px; height: var(--console-h);
  scale: var(--k); transform-origin: bottom left;
  display: grid; grid-template-columns: auto minmax(280px, 1fr) 262px 96px; gap: 18px; align-items: center;
  padding: 10px 14px 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
}
.transport { display: flex; flex-direction: column; gap: 8px; }
.play {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 12px; border-radius: 10px;
  border: 0; background: var(--ink); color: #15152a; font-weight: 700; font-size: 13px; white-space: nowrap;
}
.play svg { width: 18px; height: 18px; fill: currentColor; }
.play .i-stop { display: none; }
.play[aria-pressed='true'] .i-stop { display: block; }
.play[aria-pressed='true'] .i-play { display: none; }
.toggle {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; height: 30px; padding: 0 10px;
  border-radius: 8px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
}
.toggle i { width: 26px; height: 14px; border-radius: 8px; background: rgba(255, 255, 255, 0.16); position: relative; transition: background 160ms var(--ease); }
.toggle i::after { content: ''; position: absolute; left: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); transition: transform 200ms var(--ease); }
.toggle[aria-pressed='true'] i { background: var(--anti); }
.toggle[aria-pressed='true'] i::after { transform: translateX(12px); }

.image { display: grid; grid-template-columns: 22px 1fr 22px; align-items: center; gap: 10px; height: 100%; }
.image .spk { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--ink-soft); text-align: center; border: 1px solid var(--line); border-radius: 5px; padding: 3px 0; }
.image .spk.l { color: var(--gold); border-color: rgba(226, 185, 85, 0.4); }
.image .spk.r { color: var(--cobalt); border-color: rgba(122, 162, 255, 0.4); }
.track { position: relative; height: 64px; border-radius: 8px; background: linear-gradient(90deg, rgba(226, 185, 85, 0.08), rgba(255, 255, 255, 0.02) 50%, rgba(122, 162, 255, 0.08)); border: 1px solid var(--line-soft); }
.track::before, .track::after { content: ''; position: absolute; top: 8px; bottom: 8px; width: 1px; background: var(--line); }
.track::before { left: 25%; }
.track::after { left: 75%; }
.track .c { position: absolute; left: 50%; top: 4px; bottom: 4px; width: 1px; background: rgba(255, 255, 255, 0.28); }
.blob {
  position: absolute; top: 50%; height: 24px; transform: translate(-50%, -50%); border-radius: 12px;
  opacity: 0.95; transition: opacity 200ms var(--ease), top 250ms var(--ease);
  display: grid; place-items: center; pointer-events: auto; cursor: pointer;
}
/* the glow is the image: crisp for level differences, soft for time differences */
.blob::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: radial-gradient(closest-side, var(--c) 0%, color-mix(in srgb, var(--c) 62%, transparent) 55%, transparent 100%);
  filter: blur(var(--soft, 0px));
}
.blob span { position: relative; }
.comb { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 8px; }
.track.mono .blob { opacity: 0; pointer-events: none; }
.blob span { font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; color: #0f0f22; text-transform: uppercase; white-space: nowrap; }
.blob.dim { opacity: 0.35; }
.blob.anti { outline: 1px dashed var(--anti); outline-offset: 2px; }

.readout { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.who { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.who i { width: 9px; height: 9px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.who b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nums { display: grid; grid-template-columns: repeat(3, auto); gap: 14px; justify-content: start; }
.nums span { display: flex; flex-direction: column; gap: 2px; }
.nums .eyebrow { font-size: 9px; }
.nums b { font-family: var(--mono); font-weight: 500; font-size: 13.5px; white-space: nowrap; }
.scope { width: 88px; height: 88px; border-radius: 10px; border: 1px solid var(--line-soft); background: rgba(8, 8, 22, 0.5); justify-self: end; }

.hint { position: absolute; left: 0; right: 0; bottom: 7px; text-align: center; font-family: var(--mono); font-size: 10.5px; color: var(--ink-soft); letter-spacing: 0.02em; pointer-events: none; text-shadow: 0 1px 6px rgba(10, 10, 26, 0.95), 0 0 14px rgba(10, 10, 26, 0.9); }

/* ---------- player labels in the scene ---------- */
.labels { position: absolute; inset: 0; pointer-events: none; }
.tag {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  padding: 4px 9px 4px 7px; border-radius: 999px; background: var(--card); border: 1px solid var(--line);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: calc(11.5px * var(--k)); font-weight: 600; color: var(--ink);
  pointer-events: auto; cursor: grab; will-change: transform; transition: border-color 160ms var(--ease), opacity 200ms var(--ease);
}
.tag i { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); }
.tag em { font-family: var(--mono); font-size: calc(10px * var(--k)); font-style: normal; color: var(--ink-soft); font-weight: 500; }
.tag.sel { border-color: var(--c); box-shadow: 0 0 0 2px color-mix(in srgb, var(--c) 25%, transparent); }
.tag.out em { color: var(--anti); }
.tag.small { font-size: 10.5px; padding: 3px 8px; font-weight: 500; color: var(--ink-soft); cursor: default; }
.tag.small i { display: none; }

/* ---------- how it works ---------- */
.how {
  width: min(620px, calc(100vw - 32px)); max-height: min(78vh, 760px); padding: 26px 30px 24px; border-radius: 16px;
  background: #1a1a31; color: var(--ink); border: 1px solid var(--line); box-shadow: 0 40px 120px rgba(0, 0, 0, 0.6); overflow: auto;
}
.how::backdrop { background: rgba(10, 10, 24, 0.55); backdrop-filter: blur(6px); }
.how h2 { font-family: var(--serif); font-weight: 400; font-size: 28px; margin: 0 0 10px; }
.how h3 { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 18px 0 6px; }
.how p { margin: 0; font-size: 14px; line-height: 1.62; color: #d6dbe6; }
.how p + p { margin-top: 8px; }
.how .close { position: absolute; right: 16px; top: 14px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line); background: transparent; font-size: 18px; color: var(--ink-soft); }
.how .src { font-size: 12px; color: var(--ink-faint); margin-top: 14px; }

/* ---------- arrival ---------- */
.app[data-arrival='pending'] .intro, .app[data-arrival='pending'] .controls, .app[data-arrival='pending'] .console { opacity: 0; transform: translateY(8px); }
.intro, .controls, .console { transition: opacity 700ms var(--ease), transform 700ms var(--ease); }
.app[data-hud='off'] .intro, .app[data-hud='off'] .controls, .app[data-hud='off'] .console, .app[data-hud='off'] .hint, .app[data-hud='off'] .labels { opacity: 0; pointer-events: none; }

/* ---------- short windows (the 1280 x 700 law) ---------- */
@media (max-height: 780px) {
  :root { --console-h: 88px; }
  .intro { top: 16px; width: 330px; }
  .intro h1 { font-size: 34px; margin: 6px 0 8px; }
  .lede { font-size: 12.5px; margin-bottom: 10px; }
  .controls { top: 16px; gap: 9px; padding: 10px 12px; width: 372px; }
  .track { height: 54px; }
  .console { bottom: 26px; }
  .scope { width: 76px; height: 76px; }
  .console { grid-template-columns: auto minmax(240px, 1fr) 250px 80px; }
}
@media (max-width: 1180px) {
  .console { grid-template-columns: auto 1fr 230px; }
  .scope { display: none; }
  .hint { display: none; }
}

/* the workshops host's member return rail tucks into the bottom-left corner (a tab about 60 px
   wide): when it is on the page the console starts to its right */
.app[data-rail='1'] .console { left: calc(var(--gut) + 64px); width: calc((100% - 2 * var(--gut) - 64px) / var(--k)); }
.app[data-rail='1'] .hint { left: 72px; letter-spacing: 0; }

/* ---------- phones ---------- */
@media (max-width: 720px) {
  :root { --gut: 12px; --console-h: auto; }
  .intro { top: 12px; left: 12px; right: 12px; width: auto; }
  .intro h1 { font-size: 28px; margin: 4px 0 6px; }
  .lede, .intro > .eyebrow { display: none; }
  .stat .eyebrow { font-size: 8px; letter-spacing: 0.06em; }
  .stats { gap: 4px; margin-bottom: 6px; }
  .stat { padding: 5px 8px; }
  .stat b { font-size: 15px; }
  .caption { font-size: 12px; padding: 8px 10px; }
  .controls { top: auto; bottom: 112px; left: 12px; right: 12px; width: auto; padding: 9px 10px; gap: 8px; }
  .controls .row.two { gap: 10px; }
  #pattern-row .head, .controls .foot .tools { display: none; }
  .segment button { padding: 5px 6px; font-size: 11px; }
  .console { left: 12px; right: 12px; width: auto; bottom: 12px; height: auto; grid-template-columns: auto 1fr; gap: 10px; padding: 8px 10px; scale: 1; }
  .intro, .controls { scale: 1; }
  .readout, .scope { display: none; }
  .transport { flex-direction: column; gap: 6px; }
  .play { height: 34px; padding: 0 10px; font-size: 12px; }
  .track { height: 44px; }
  .hint { display: none; }
  .app[data-rail='1'] .console { left: 12px; width: auto; padding-left: 66px; }
}
@media (prefers-reduced-motion: reduce) {
  .intro, .controls, .console { transition: none; }
}

/* ---------- additions: toggles row, solo, curve card ---------- */
.toggles { display: flex; gap: 6px; }
.toggles .toggle { flex: 1; }
.toggles [hidden] { display: none; }
.solo {
  margin-left: auto; height: 24px; padding: 0 10px; border-radius: 6px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04); font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft);
}
.solo[aria-pressed='true'] { background: var(--ink); color: #15152a; border-color: var(--ink); }
.nums [hidden] { display: none; }
.curve-row canvas { width: 100%; height: 108px; display: block; border-radius: 8px; background: rgba(8, 8, 22, 0.35); }
.curve-row .head em { font-style: normal; }
.curve-row .room { margin: 2px 0 0; font-size: 11.5px; line-height: 1.45; color: var(--ink-soft); }
.curve-row .room b { font-family: var(--mono); font-weight: 500; color: var(--ink); }
.play.loading { opacity: 0.7; }
@media (max-height: 780px) {
  .curve-row canvas { max-height: 118px; object-fit: contain; }
  .curve-row .room { display: none; }
}
@media (max-width: 720px) {
  .curve-row, .toggles #flip { display: none; }
  .labels .tag:not(.sel) { display: none; } /* on a phone only the selected player keeps a label */
  .labels .tag.small { display: none; }
  .blob span { display: none; }
  .blob { height: 16px; }
  .comb { display: none; }
}


/* viewpoints, top centre */
.views {
  position: absolute; top: 22px; left: 50%; translate: -50% 0; scale: var(--k); transform-origin: top center;
  background: var(--card); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid var(--line); border-radius: 10px; padding: 3px;
}
.views button { padding: 6px 12px; }
@media (max-height: 780px) { .views { top: 16px; } }
@media (max-width: 1180px) { .views { top: auto; bottom: calc(30px + var(--console-h) + 10px); } }
@media (max-width: 720px) { .views { display: none; } }
.app[data-arrival='pending'] .views { opacity: 0; }
.views { transition: opacity 700ms var(--ease); }
.app[data-hud='off'] .views { opacity: 0; pointer-events: none; }