/* Palette lifted from mesh-lab (vitoraguila.github.io/mesh-lab), so the two
   sites read as the same family. Light is the default; dark is opt-in. */
:root{
  color-scheme: light;
  --bg:       #f6f8fc;   /* canvas */
  --surface:  #ffffff;   /* raised */
  --surface2: #edf1f8;   /* sunken */
  --surface3: #e2e8f3;
  --line:       rgb(14 14 16 / 0.11);
  --line2:      rgb(14 14 16 / 0.24);
  --ink:      #182238;
  --ink2:     #475773;
  --ink3:     #4c5b75;   /* faint */
  --accent:   #294bc5;
  --accent2:  #2341b0;
  --accent-soft: rgb(49 85 217 / 0.09);
  --accent-wash: rgb(49 85 217 / 0.04);
  --accent-d: rgb(49 85 217 / 0.22);
  --on-accent: #ffffff;
  --glow:     rgb(49 85 217 / 0.12);
  /* Reserved: only a data race or a fatal error uses this hue. */
  --race:     #b8202a;
  --race-d:   #b8202a26;
  --warn:     #9a5a1c;
  --warn-d:   #c97a2e26;
  --ok:       #127a3e;
  --ok-d:     #127a3e26;
  --go:       #2a7fa8;
  /* Goroutine identity palette: mesh-lab's accent family, darkened to read on
     a light ground, and kept clear of the race hue. */
  --g0: #4c5b75;
  --g1: #294bc5;
  --g2: #127a3e;
  --g3: #6d5a12;
  --g4: #8d6bd8;
  --g5: #1b6f8c;
  --g6: #3f7a1f;
  --g7: #a8503a;
  --syn-kw:    #6b3fb5;
  --syn-ctrl:  #7a35a8;
  --syn-str:   #1f6b45;
  --syn-num:   #8a5a12;
  --syn-fn:    #1b5f9c;
  --syn-type:  #1b6f8c;
  --syn-punct: #6b7a95;
  --lilac: #ded3ff;
  --lime:  #e0f695;
  --peach: #ffc4b2;
  --mint:  #c0edda;
  --sky:   #cedeff;
  --chapter-ink: #182238;
  --grid: rgb(14 14 16 / 0.05);
  --shadow: 0 1px 2px #0e0e100f, 0 4px 16px #0e0e100a;
  --mono:'Geist Mono','JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ui:'Geist','Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  /* Display typography for ideas, mono only for implementation. */
  --display:'Space Grotesk','Geist',var(--ui);
  --r: 16px;
  --r-chip: 8px;
}

:root[data-theme="dark"]{
  color-scheme: dark;
  --bg:       #10141e;   /* canvas */
  --surface:  #191f2c;   /* raised */
  --surface2: #0c1019;   /* sunken */
  --surface3: #232b3b;
  --line:       rgb(255 255 255 / 0.09);
  --line2:      rgb(255 255 255 / 0.18);
  --ink:      #edf1fa;
  --ink2:     #afb9cc;
  --ink3:     #919fb8;
  --accent:   #91aaff;
  --accent2:  #b6c6ff;
  --accent-soft: rgb(145 170 255 / 0.13);
  --accent-wash: rgb(145 170 255 / 0.06);
  --accent-d: rgb(145 170 255 / 0.28);
  --on-accent: #101936;
  --glow:     rgb(145 170 255 / 0.15);
  --race:     #ff6b6b;
  --race-d:   #ff6b6b2e;
  --warn:     #ffc4b2;
  --warn-d:   #ffc4b22e;
  --ok:       #5ee08a;
  --ok-d:     #5ee08a2e;
  --go:       #79d0ed;
  --g0: #919fb8;
  --g1: #91aaff;
  --g2: #5ee08a;
  --g3: #e0f695;
  --g4: #ded3ff;
  --g5: #79d0ed;
  --g6: #c0edda;
  --g7: #f0a8e0;
  --syn-kw:    #ded3ff;
  --syn-ctrl:  #e3c0ff;
  --syn-str:   #c0edda;
  --syn-num:   #e0f695;
  --syn-fn:    #91aaff;
  --syn-type:  #79d0ed;
  --syn-punct: #919fb8;
  --lilac: #302747;
  --lime:  #303b1f;
  --peach: #412b29;
  --mint:  #193c34;
  --sky:   #243653;
  --chapter-ink: #f2f3ec;
  --grid: rgb(255 255 255 / 0.045);
  --shadow: 0 1px 2px #00000052, 0 6px 20px #00000040;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:14px;
  font-feature-settings:'cv11','ss01';-webkit-font-smoothing:antialiased;overflow-x:clip}
::selection{background:var(--accent);color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
body.challenge-view{overflow:hidden}
body.challenge-view #app{height:100vh;display:flex;flex-direction:column}
body.lobby-view{overflow-y:auto}
img{max-width:100%}[hidden]{display:none!important}
button{font-family:inherit}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:var(--line2)}
@keyframes gtflash{0%{background:color-mix(in oklch,var(--accent) 34%,transparent)}100%{background:transparent}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes land{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:scale(1)}}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-4px)}
  40%{transform:translateX(4px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* ---- header ---- */
header{display:flex;align-items:center;gap:20px;padding:0 18px;height:54px;flex:none;
  border-bottom:1px solid var(--line);background:var(--surface)}
.logo{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.055em;flex:none;color:var(--ink)}
.logo i{color:var(--accent);font-style:normal}
.gotcha-mark{display:block;width:36px;height:36px;flex:none}
.gotcha-wordmark{white-space:nowrap;line-height:1}
.leave{color:var(--ink3);text-decoration:none;font-size:13px;font-weight:500;padding:7px 11px;
  border-radius:8px;border:1px solid transparent;white-space:nowrap;transition:color .13s,background .13s}
.leave:hover{color:var(--ink);background:var(--surface2);border-color:var(--line2)}
.hsep{width:1px;height:20px;background:var(--line);flex:none}
.htitle{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  min-width:0;flex:1}

/* ---- lobby ----
   Laid out the way mesh-lab is: display typography for ideas, a kicker in the
   accent, very tight tracking on large headings, and full-bleed chapter
   grounds so each track is somewhere you arrive rather than another band of
   the same paint. */
h1,h2,h3,.tiername,.chtitle,.steptitle{font-family:var(--display)}

.lobbyhead{display:flex;align-items:center;gap:18px;
  padding:0 max(24px,calc((100vw - 1320px) / 2));height:66px;
  border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--canvas,var(--bg)) 86%,transparent);
  position:sticky;top:0;z-index:20;backdrop-filter:blur(10px)}
.lobbyhead .tagline{color:var(--ink3);font-size:13px;flex:1;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lobbyhead .progress{font-family:var(--mono);font-size:12px;color:var(--ink3);flex:none}
.lobbyhead .progress b{color:var(--accent)}

.lobbybody{max-width:none;margin:0;padding:0}

/* Hero: lilac chapter ground, oversized display title, pill actions. */
.hero{position:relative;overflow:clip;isolation:isolate;background:var(--lilac);
  padding:clamp(56px,7vw,104px) max(24px,calc((100vw - 1320px) / 2)) clamp(48px,6vw,88px);
  display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(32px,5vw,64px);align-items:center;
  border-bottom:1px solid var(--line)}
.heroleft{min-width:0}
.heroright{min-width:0}
.herokicker{font-size:14px;font-weight:500;color:var(--accent);margin-bottom:24px;
  display:flex;align-items:center;gap:10px}
.hero h1{margin:0;font-size:clamp(44px,5.6vw,82px);font-weight:600;line-height:1.04;
  letter-spacing:-.075em;color:var(--chapter-ink);text-wrap:balance}
.hero h1 .accentline{color:var(--accent);display:block}
.hero p{max-width:43ch;font-size:clamp(15px,1.3vw,18px);line-height:1.7;margin:28px 0 0;
  color:var(--ink2)}
.hero p b{color:var(--chapter-ink);font-weight:600}
.hero .warn{margin-top:18px;padding:16px 18px;border-radius:16px;background:var(--surface);
  border:1.5px solid var(--line2);color:var(--ink2);font-size:14.5px;line-height:1.65;max-width:46ch}
.hero .warn b{color:var(--chapter-ink)}
.hero code{font-family:var(--mono);font-size:.9em;color:var(--ink);
  background:var(--accent-soft);padding:2px 6px;border-radius:6px}
.hero .small{font-size:13px;color:var(--ink3);margin-top:18px}
.herologo{display:none}

/* The stat card opposite the title, echoing the hero-model shape. */
.herocard{background:var(--surface);border:1.5px solid var(--line2);
  border-radius:64px 20px 20px 20px;padding:26px 28px;box-shadow:var(--shadow)}
.herocard .hc-head{display:flex;justify-content:space-between;gap:12px;font-size:12px;
  color:var(--ink);margin-bottom:20px}
.herocard .hc-head span:last-child{font-family:var(--mono);color:var(--ink3);font-size:10px}
.hcstats{display:grid;grid-template-columns:1fr 1fr;gap:18px 14px}
.hcstat b{display:block;font-family:var(--display);font-size:34px;font-weight:600;
  letter-spacing:-.05em;line-height:1;color:var(--accent)}
.hcstat span{display:block;font-size:12px;color:var(--ink3);margin-top:6px}
.herocard figcaption{font-size:11px;color:var(--ink3);text-align:center;margin-top:20px;
  padding-top:16px;border-top:1px solid var(--line)}

@media (max-width:1023px){.hero{grid-template-columns:1fr 1fr;gap:32px}}
@media (max-width:860px){
  .hero{grid-template-columns:1fr;padding-inline:20px}
  .hero h1{font-size:clamp(38px,9vw,62px);letter-spacing:-.055em}
  .herocard{border-radius:40px 20px 20px 20px}
}

/* Body sections sit on the canvas with generous rhythm. */
.lobbysections{padding:0}
.tier{position:relative;padding:clamp(56px,7vw,104px) max(24px,calc((100vw - 1320px) / 2));
  border-bottom:1px solid var(--line)}
.tier:nth-of-type(6n+1){background:var(--bg)}
.tier:nth-of-type(6n+2){background:var(--sky)}
.tier:nth-of-type(6n+3){background:var(--mint)}
.tier:nth-of-type(6n+4){background:var(--bg)}
.tier:nth-of-type(6n+5){background:var(--peach)}
.tier:nth-of-type(6n+6){background:var(--lime)}
.tierhead{display:flex;align-items:flex-end;gap:16px;margin-bottom:clamp(24px,3vw,40px);
  padding-bottom:0;border-bottom:0}
.tierhead>div:first-child{flex:1;min-width:0}
.tiername{font-size:clamp(28px,3.4vw,48px);font-weight:600;line-height:1.08;
  letter-spacing:-.055em;color:var(--chapter-ink);max-width:24ch}
.tiernote{color:var(--ink2);font-size:15px;margin-top:12px;max-width:52ch;line-height:1.6}
.tiercount{font-family:var(--mono);font-size:13px;color:var(--ink3);flex:none;padding-bottom:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px}

/* Filters and mode switch live on the canvas between hero and tracks. */
.filters,.modes{max-width:1320px;margin-inline:auto;
  padding-inline:max(24px,calc((100vw - 1320px) / 2))}
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px;
  padding-block:clamp(36px,5vw,64px) 0;border-bottom:0}
.filters{display:flex;flex-direction:column;gap:10px;
  padding-block:clamp(28px,4vw,44px);border-bottom:1px solid var(--line);margin-bottom:0}
.mode{display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;
  padding:20px 22px;border-radius:20px;border:1.5px solid var(--line2);background:var(--surface);
  color:inherit;cursor:pointer;transition:border-color .18s,background .18s,transform .18s}
.mode:hover{transform:translateY(-2px)}
.mtitle{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.03em}
.mnote{font-size:13.5px;color:var(--ink2);line-height:1.55}

.card-ch{display:flex;flex-direction:column;gap:9px;padding:17px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;
  box-shadow:var(--shadow);transition:border-color .15s,background .15s,transform .12s,box-shadow .15s}
.card-ch:hover{border-color:var(--accent-d);background:var(--surface);transform:translateY(-2px);
  box-shadow:0 2px 4px #0e0e100f,0 10px 28px #0e0e1014}
.card-ch.done{border-color:var(--ok-d)}
.chtop{display:flex;align-items:center;gap:9px}
.chclass{font-family:var(--mono);font-size:10px;color:var(--ink3);letter-spacing:.02em;
  border:1px solid var(--line);padding:2px 8px;border-radius:8px}
.chdone{font-family:var(--mono);font-size:10px;color:var(--ok);border:1px solid var(--ok-d);
  padding:2px 7px;border-radius:5px;margin-left:auto}
.chtitle{font-size:15px;font-weight:600;letter-spacing:-.01em;line-height:1.35}
.chbrief{color:var(--ink2);font-size:12.8px;line-height:1.55;flex:1}
.chfoot{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px}
.chdet{font-family:var(--mono);font-size:10.5px;color:var(--ink3)}
.chblind{font-family:var(--mono);font-size:9.5px;color:var(--race);
  border:1px solid var(--race-d);padding:2px 6px;border-radius:5px;margin-left:auto;flex:none}

/* ---- layout ---- */
main{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);min-height:0}
@media (max-width:1060px){main{grid-template-columns:1fr;overflow:auto}
  .pane{min-height:62vh}.side{min-height:auto;overflow:visible}}
.pane{display:flex;flex-direction:column;min-width:0;min-height:0;border-right:1px solid var(--line)}
.side{display:flex;flex-direction:column;min-width:0;min-height:0;overflow-y:auto}

/* ---- brief ---- */
.brief{padding:16px 20px 14px;border-bottom:1px solid var(--line);flex:none}
.brief p{margin:0;color:var(--ink2);font-size:13px;line-height:1.55;max-width:66ch}
.brief .meta{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;align-items:center}
.pill{font-family:var(--mono);font-size:10.5px;padding:3px 9px;border-radius:8px;
  border:1px solid var(--line2);color:var(--ink3)}
.pill.blind{color:var(--race);border-color:var(--race-d)}
.ft .lock{font-size:9px;opacity:.55;font-family:var(--mono)}
.hintbtn{font-size:11.5px;color:var(--ink3);background:none;border:1px solid var(--line2);
  padding:3px 9px;border-radius:5px;cursor:pointer}
.hintbtn:hover{color:var(--ink2);border-color:var(--line2)}
.hinttext{margin-top:10px;padding:10px 12px;border-radius:8px;background:var(--surface2);
  border-left:2px solid var(--warn);color:var(--ink2);font-size:12.5px;line-height:1.55;animation:rise .25s}

/* ---- file tabs ---- */
.files{display:flex;align-items:stretch;gap:0;border-bottom:1px solid var(--line);
  background:var(--surface);flex:none;overflow-x:auto}
.files::-webkit-scrollbar{display:none}
.ft{flex:none;padding:0 15px;height:37px;background:none;border:0;border-right:1px solid var(--line);
  color:var(--ink3);cursor:pointer;font-family:var(--mono);font-size:12px;display:flex;
  align-items:center;gap:7px;transition:color .13s,background .13s;position:relative}
.ft:hover{color:var(--ink2);background:var(--surface2)}
.ft[aria-selected=true]{color:var(--ink);background:var(--bg)}
.ft[aria-selected=true]::after{content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--accent)}
.ft .dirty{width:6px;height:6px;border-radius:99px;background:var(--warn);flex:none}
.ft .lock{font-size:10px;opacity:.6}

/* ---- editor ---- */
.edwrap{flex:1;min-height:0;position:relative;background:var(--bg)}
.cm-editor{height:100%}
.cm-editor.cm-focused{outline:none}
.gt-dotgutter{min-width:12px}
.gt-dot{width:6px;height:6px;border-radius:99px;margin:6px 3px 0}
.gt-dot.flag{background:var(--accent)}
.gt-dot.race{background:var(--race);box-shadow:0 0 0 3px color-mix(in oklch,var(--race) 25%,transparent)}
.gt-dot.spawn{background:var(--warn)}
.gt-dot.none{background:transparent}
.ro{position:absolute;inset:0;background:color-mix(in oklch,var(--bg) 55%,transparent);
  display:flex;align-items:flex-start;justify-content:center;padding-top:14px;pointer-events:none}
.ro span{font-family:var(--mono);font-size:11px;color:var(--ink3);background:var(--surface2);
  padding:4px 10px;border-radius:6px;border:1px solid var(--line2)}

/* ---- actions ---- */
.actions{display:flex;align-items:center;gap:9px;padding:11px 16px;border-top:1px solid var(--line);
  background:var(--surface);flex:none;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;font-weight:500;
  border:1px solid var(--line2);background:var(--surface2);color:var(--ink);cursor:pointer;
  font-size:13px;font-weight:550;transition:background .13s,border-color .13s,transform .08s}
.btn:hover:not(:disabled){background:var(--surface3)}
.btn:active:not(:disabled){transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600}
.btn.primary:hover:not(:disabled){background:var(--accent2);border-color:var(--accent2);transform:translateY(-2px)}
.btn.ghost{background:none}
.btn kbd{font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:4px;
  background:color-mix(in oklch,var(--bg) 45%,transparent);border:1px solid color-mix(in oklch,var(--ink) 15%,transparent)}
.spacer{flex:1}
.flagcount{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}
.flagcount b{color:var(--accent)}
.spinner{width:13px;height:13px;border:2px solid color-mix(in oklch,var(--bg) 40%,transparent);
  border-top-color:currentColor;border-radius:99px;animation:spin .7s linear infinite;flex:none}

/* ---- side panels ---- */
.card{border-bottom:1px solid var(--line);animation:rise .3s backwards}
.card h2{margin:0;padding:12px 18px;font-size:11px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.card h2 .n{font-family:var(--mono);font-size:10.5px;color:var(--ink3);text-transform:none;
  letter-spacing:0;font-weight:400;opacity:.8}
.pad{padding:0 18px 18px}

.placeholder{padding:52px 24px;text-align:center;color:var(--ink3);font-size:13px;line-height:1.7}
.placeholder .big{font-size:34px;margin-bottom:12px;opacity:.5}
.placeholder b{color:var(--ink2);font-weight:550}

/* verdict */
.verdict{padding:18px;display:flex;gap:14px;align-items:flex-start;border-bottom:1px solid var(--line)}
.vicon{width:36px;height:36px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-size:18px;font-weight:700;font-family:var(--mono)}
.v-solved .vicon{background:var(--ok-d);color:var(--ok)}
.v-buggy .vicon{background:var(--race-d);color:var(--race)}
.v-broken .vicon{background:var(--warn-d);color:var(--warn)}
.vtext{flex:1;min-width:0}
.vtitle{font-size:15px;font-weight:650;margin-bottom:3px}
.v-solved .vtitle{color:var(--ok)}
.v-buggy .vtitle{color:var(--race)}
.v-broken .vtitle{color:var(--warn)}
.vsub{color:var(--ink2);font-size:12.8px;line-height:1.55}
.v-buggy.shake{animation:shake .32s}

/* probes */
.probe{display:flex;align-items:center;gap:11px;padding:10px 18px;font-size:12.5px;
  border-top:1px solid color-mix(in oklch,var(--line) 55%,transparent)}
.probe:first-child{border-top:0}
.dotm{width:8px;height:8px;border-radius:99px;flex:none}
.dotm.hit{background:var(--race);box-shadow:0 0 0 3px color-mix(in oklch,var(--race) 22%,transparent)}
.dotm.clean{background:var(--ok)}
.dotm.skip{background:var(--line2)}
.dotm.run{background:var(--ink3);animation:pulse 1s infinite}
.pnm{font-family:var(--mono);font-size:11.5px;color:var(--ink2);flex:1;min-width:0}
.pv{font-family:var(--mono);font-size:11px;text-align:right}
.pv.hit{color:var(--race)}.pv.clean{color:var(--ok)}.pv.skip{color:var(--ink3)}
.pms{font-family:var(--mono);font-size:10px;color:var(--ink3);width:52px;text-align:right;flex:none}

/* compile errors */
.diag{display:flex;gap:10px;padding:9px 12px;border-radius:8px;background:var(--surface2);
  border-left:2px solid var(--warn);margin-bottom:7px;cursor:pointer;font-family:var(--mono);font-size:11.5px}
.diag:hover{background:var(--surface3)}
.diag .loc{color:var(--warn);flex:none}
.diag .msg{color:var(--ink2);min-width:0}

/* race panel */
.addr{font-family:var(--mono);font-size:11.5px;color:var(--race);
  background:color-mix(in oklch,var(--race) 11%,transparent);padding:4px 9px;border-radius:6px;
  border:1px solid var(--race-d);display:inline-block}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:700px){.cols{grid-template-columns:1fr}}
.col{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:12px}
.who{font-family:var(--mono);font-size:11px;font-weight:700;margin-bottom:8px;display:flex;
  align-items:center;gap:7px}
.gchip{width:8px;height:8px;border-radius:2px;flex:none}
.frame{display:block;font-family:var(--mono);font-size:11px;padding:5px 8px;border-radius:6px;
  cursor:pointer;text-decoration:none;border:1px solid transparent;margin-bottom:2px}
.frame:hover{background:var(--surface2);border-color:var(--line)}
.frame .fn{color:var(--ink);display:block}
.frame .loc{color:var(--ink3);font-size:10px}
.frame.std{opacity:.38;cursor:default}
.frame.std:hover{background:none;border-color:transparent}
details.raw{margin-top:12px;border-top:1px solid var(--line);padding-top:4px}
details.raw summary{padding:7px 0;cursor:pointer;font-size:11.5px;color:var(--ink3);user-select:none}
details.raw summary:hover{color:var(--ink2)}
details.raw pre{margin:0;font-family:var(--mono);font-size:10.5px;color:var(--ink2);
  overflow-x:auto;line-height:1.55;background:var(--surface);padding:11px;border-radius:8px;
  border:1px solid var(--line)}

/* teaching note */
.note{padding:13px 15px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  border-left:2px solid var(--race);color:var(--ink2);font-size:12.8px;line-height:1.65}
.note b{color:var(--ink);font-weight:600}
.note.ok{border-left-color:var(--ok)}

/* deadlock */
.gwrap{display:flex;justify-content:center;padding:4px 0 14px}
.ltable{width:100%;border-collapse:collapse;font-family:var(--mono);font-size:11px}
.ltable th{text-align:left;padding:6px 8px;color:var(--ink3);font-weight:600;
  border-bottom:1px solid var(--line);white-space:nowrap}
.ltable td{padding:6px 8px;color:var(--ink2);border-bottom:1px solid var(--line);white-space:nowrap}
.ltable .want{color:var(--race);font-weight:700}
.ltable a{color:var(--accent);text-decoration:none}
.ltable a:hover{text-decoration:underline}

/* distribution */
.strip{display:grid;grid-template-columns:repeat(30,1fr);gap:2px;margin-bottom:14px}
.cell{aspect-ratio:1;border-radius:1.5px;animation:land .3s ease-out backwards}
.cell.ok{background:var(--ok)}
.cell.bad{background:var(--race)}
.bar{display:flex;align-items:center;gap:9px;margin-bottom:6px;font-family:var(--mono);font-size:11px}
.bar .lbl{width:165px;flex:none;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bar .track{flex:1;height:16px;background:var(--surface2);border-radius:4px;overflow:hidden;min-width:40px}
.bar .fill{height:100%;border-radius:4px;background:var(--race);width:0;transition:width .7s cubic-bezier(.2,0,0,1)}
.bar.ok .fill{background:var(--ok)}
.bar .pct{width:78px;text-align:right;color:var(--ink3);flex:none}
.headline{font-size:13.5px;line-height:1.6;margin-bottom:14px;color:var(--ink2)}
.headline .big{font-family:var(--mono);font-weight:700;color:var(--race)}
.headline .good{font-family:var(--mono);font-weight:700;color:var(--ok)}
.headline b{font-family:var(--mono);color:var(--ink)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* difficulty pips on a lobby card */
.chband{display:inline-flex;gap:2.5px;align-items:center;flex:none}
.pip{width:5px;height:5px;border-radius:99px;background:var(--surface3)}
.pip.on{background:var(--accent2)}
.card-ch.done .pip.on{background:var(--ok)}
.chdraft{font-family:var(--mono);font-size:10px;color:var(--warn);border:1px solid var(--warn-d);
  padding:2px 7px;border-radius:5px;margin-left:auto}
.chclass{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.hero .small{font-size:12.5px;color:var(--ink3)}
.hero code{font-family:var(--mono);font-size:.92em;color:var(--ink2);
  background:var(--surface2);padding:1px 5px;border-radius:4px}
.linkbtn{background:none;border:0;color:var(--accent);cursor:pointer;font:inherit;
  padding:0;text-decoration:underline;text-underline-offset:2px}
.linkbtn:hover{color:var(--ink)}

/* hidden test results */
.tcase{display:flex;gap:10px;padding:9px 11px;border-radius:8px;background:var(--surface);
  border:1px solid var(--line);margin-bottom:7px}
.tcase.fail{border-left:2px solid var(--race)}
.tcase.pass{border-left:2px solid var(--ok-d);opacity:.72}
.tmark{font-family:var(--mono);font-size:9.5px;font-weight:700;flex:none;padding-top:2px;letter-spacing:.04em}
.tcase.fail .tmark{color:var(--race)}
.tcase.pass .tmark{color:var(--ok)}
.tbody{min-width:0;flex:1}
.tname{font-family:var(--mono);font-size:11.5px;color:var(--ink)}
.tout{margin:6px 0 0;font-family:var(--mono);font-size:10.5px;color:var(--ink2);
  white-space:pre-wrap;word-break:break-word;line-height:1.5;
  background:var(--bg);padding:8px 9px;border-radius:6px;border:1px solid var(--line)}

/* ---- Go logo ---- */
.gologo{height:19px;width:auto;color:var(--go);flex:none}

.logo{display:flex;align-items:center;gap:10px}
.herologo{margin-bottom:22px}
.herologo .gologo{height:44px}

/* ---- filters ---- */
.filters{display:flex;flex-direction:column;gap:9px;padding:20px 0 24px;margin-bottom:12px;
  border-bottom:1px solid var(--line)}
.frow{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.flabel{font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink3);width:74px;flex:none}
.chip{display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border-radius:99px;
  border:1px solid var(--line);background:var(--surface);color:var(--ink2);cursor:pointer;
  font-size:12.5px;transition:background .13s,border-color .13s,color .13s}
.chip:hover{background:var(--surface2);color:var(--ink)}
.chip[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent2)}
.chipn{font-family:var(--mono);font-size:10px;color:var(--ink3)}
.chip[aria-pressed=true] .chipn{color:var(--accent)}
.fcount{font-family:var(--mono);font-size:11.5px;color:var(--ink3)}

/* ---- solution diff ---- */
.difffiles{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto}
.dft{padding:0 14px;height:33px;background:none;border:0;border-right:1px solid var(--line);
  color:var(--ink3);cursor:pointer;font-family:var(--mono);font-size:11.5px;flex:none}
.dft[aria-selected=true]{color:var(--ink);background:var(--bg)}
.dft:hover{color:var(--ink2)}
.diffbar{display:flex;align-items:center;gap:8px;padding:11px 18px;border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.btn.small{padding:6px 14px;font-size:12px;border-radius:99px}
.difflegend{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--ink3)}
.sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.sw.del{background:color-mix(in oklch,var(--race) 45%,transparent)}
.sw.add{background:color-mix(in oklch,var(--ok) 45%,transparent)}

.hunk{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:11px;
  background:var(--bg)}
.hunk.applied{border-color:var(--ok-d)}
.hunkbar{display:flex;align-items:center;gap:10px;padding:7px 11px;background:var(--surface);
  border-bottom:1px solid var(--line)}
.hunkn{font-family:var(--mono);font-size:10.5px;color:var(--ink3);flex:1}
.hunkbtn{padding:4px 12px;border-radius:6px;border:1px solid var(--accent2);background:none;
  color:var(--accent);cursor:pointer;font-size:11.5px;font-weight:550}
.hunkbtn:hover{background:color-mix(in oklch,var(--accent) 14%,transparent)}
.hunk.applied .hunkbtn{border-color:var(--line2);color:var(--ink3)}
.dlines{font-family:var(--mono);font-size:11.5px;line-height:1.62;overflow-x:auto}
.dl{display:flex;gap:0;white-space:pre}
.dl code{font:inherit;padding:0 10px 0 0}
.ds{width:20px;flex:none;text-align:center;color:var(--ink3);user-select:none}
.dl.ctx{color:var(--ink3)}
.dl.del{background:color-mix(in oklch,var(--race) 13%,transparent);color:var(--ink2)}
.dl.del .ds{color:var(--race)}
.dl.add{background:color-mix(in oklch,var(--ok) 13%,transparent);color:var(--ink)}
.dl.add .ds{color:var(--ok)}

/* crashed test case */
.tcase.fail .tmark{white-space:nowrap}
.tcase.crash{border-left-color:var(--warn)}
.tcase.crash .tmark{color:var(--warn)}

/* ---- mode switch ---- */
.modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px;
  padding:22px 0 24px;border-bottom:1px solid var(--line);margin-bottom:22px}
.mode{display:flex;flex-direction:column;gap:5px;align-items:flex-start;text-align:left;
  padding:15px 17px;border-radius:16px;border:1px solid var(--line);background:var(--surface);
  color:inherit;cursor:pointer;transition:border-color .14s,background .14s}
.mode:hover{background:var(--surface2)}
.mode[aria-pressed=true]{border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 0 0 1px var(--accent-d)}
.mtitle{font-size:14.5px;font-weight:650}
.mode[aria-pressed=true] .mtitle{color:var(--accent)}
.mnote{font-size:12.5px;color:var(--ink3);line-height:1.5}

/* ---- guided path ---- */
.path{margin-bottom:44px}

.step{display:flex;align-items:center;gap:15px;padding:14px 17px;border-radius:16px;
  background:var(--surface);border:1px solid var(--line);text-decoration:none;color:inherit;
  transition:border-color .14s,background .14s,transform .12s}
a.step:hover{background:var(--surface2);border-color:var(--line2);transform:translateX(2px)}
.step.current{border-color:var(--accent);background:var(--accent-soft)}
.step.solved{opacity:.72}
.step.solved .stepn{background:var(--ok-d);color:var(--ok);border-color:transparent}
.step.locked{opacity:.4;cursor:not-allowed}
.stepn{width:30px;height:30px;border-radius:9px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink3);
  background:var(--surface2);border:1px solid var(--line)}
.step.current .stepn{background:var(--accent);color:var(--on-accent);border-color:transparent}
.stepbody{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.steptop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.steptrack{font-size:10.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--ink3)}
.stepclass{font-family:var(--mono);font-size:10px;color:var(--ink3);border:1px solid var(--line);
  padding:1px 6px;border-radius:4px}
.steptitle{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.stepbrief{font-size:12.5px;color:var(--ink2);line-height:1.5}
.stepcta{font-family:var(--mono);font-size:11px;color:var(--ink3);flex:none}
.step.current .stepcta{color:var(--accent);font-weight:700}
.pathdone{padding:44px 24px;text-align:center;border:1px solid var(--ok-d);border-radius:16px;
  background:var(--ok-d)}
.pathdonetitle{font-size:19px;font-weight:700;color:var(--ok);margin-bottom:7px}
.pathdone p{margin:0;color:var(--ink2);font-size:13.5px}
@media (max-width:600px){.step{gap:11px;padding:12px 13px}.stepcta{display:none}}

/* ---- guided path map ---- */
.pathmap{margin:0 0 56px}
.pathhead{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:16px 18px;margin-bottom:8px;border-radius:16px;
  background:var(--accent-soft);border:1px solid var(--accent-d)}
.pathhead>div:first-child{flex:1;min-width:0}
.mapwrap{overflow-x:auto;padding:4px 0 8px}
.map{width:100%;min-width:560px;height:auto;display:block;overflow:visible}

.trailbg{fill:none;stroke:var(--line);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1 13;opacity:.85}
.trailfg{fill:none;stroke:url(#trail);stroke-width:5;stroke-linecap:round;
  transition:stroke-dashoffset 1.5s cubic-bezier(.22,1,.36,1);
  filter:drop-shadow(0 0 8px var(--glow))}

.pnode{--hue:var(--accent)}
.pnode .halo{fill:none;stroke:var(--line);stroke-width:1.5}
.pnode .disc{fill:var(--surface2);stroke:var(--line2);stroke-width:2;
  transition:transform .18s cubic-bezier(.3,1.4,.5,1),fill .18s}
.pnode .glyph{color:var(--ink3)}
.pnode .ntrack{fill:var(--ink3);font-size:9.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;font-family:var(--ui)}
.pnode .ntitle{fill:var(--ink2);font-size:12.5px;font-weight:600;font-family:var(--ui)}
.pnode .ndraft{fill:var(--warn);font-size:10px;font-family:var(--mono)}

/* nodes fade in along the trail */
.pnode{opacity:0;animation:nodein .45s cubic-bezier(.22,1,.36,1) forwards;animation-delay:var(--d)}
@keyframes nodein{from{opacity:0;transform-box:fill-box}to{opacity:1}}

.pnode.solved .disc{fill:color-mix(in oklch,var(--ok) 22%,var(--surface2));stroke:var(--ok)}
.pnode.solved .glyph{color:var(--ok)}
.pnode.solved .ntitle{fill:var(--ink3)}
.pnode.solved .halo{stroke:color-mix(in oklch,var(--ok) 35%,transparent)}

.pnode.current .disc{fill:var(--hue);stroke:var(--hue);
  filter:drop-shadow(0 0 12px color-mix(in oklch,var(--accent) 55%,transparent))}
.pnode.current .glyph{color:var(--on-accent)}
.pnode.current .ntitle{fill:var(--ink);font-weight:700}
.pnode.current .ntrack{fill:var(--accent)}
.pnode.current .halo{stroke:var(--hue);opacity:.5}
.pnode .ping{fill:none;stroke:var(--hue);stroke-width:2;transform-origin:center;
  animation:ping 2.1s ease-out infinite}
@keyframes ping{
  0%{r:18;opacity:.75;stroke-width:2.5}
  70%{r:34;opacity:0;stroke-width:.5}
  100%{r:34;opacity:0}
}

.pnode.locked{opacity:.34}
.pnode.locked .disc{fill:var(--surface);stroke:var(--line)}
.pnode.locked .ntitle{fill:var(--ink3)}

.pnode[data-goto]{cursor:pointer}
.pnode[data-goto]:hover .disc{transform:scale(1.16)}
.pnode[data-goto]:hover .ntitle{fill:var(--ink)}
.pnode[data-goto]:focus-visible .halo{stroke:var(--accent);stroke-width:2.5}

@media (prefers-reduced-motion:reduce){
  .pnode{opacity:1;animation:none}
  .ping{animation:none;opacity:0}
  .trailfg{transition:none}
}

/* ---- theme toggle ---- */
.themebtn{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;
  border-radius:9px;border:1px solid var(--line);background:var(--surface);color:var(--ink2);
  cursor:pointer;flex:none;transition:background .13s,color .13s,border-color .13s}
.themebtn:hover{background:var(--surface2);color:var(--ink);border-color:var(--line2)}
.themebtn svg{width:15px;height:15px}
:root:not([data-theme="dark"]) .themebtn .moon{display:none}
:root[data-theme="dark"] .themebtn .sun{display:none}

/* ---- shortcut sheet ---- */
.iconbtn{padding:9px 11px}
.keysheet{position:absolute;right:16px;bottom:62px;z-index:40;width:min(430px,calc(100vw - 32px))}
.keysheetinner{background:var(--surface);border:1px solid var(--line2);border-radius:16px;
  box-shadow:var(--shadow);overflow:hidden;animation:rise .16s ease-out}
.keyshead{padding:11px 15px;font-size:11px;font-weight:650;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line)}
.krows{max-height:min(58vh,440px);overflow-y:auto;padding:5px 0}
.krow{display:flex;align-items:center;gap:12px;padding:6px 15px}
.krow:hover{background:var(--surface2)}
.klabel{flex:1;min-width:0;font-size:12.5px;color:var(--ink2)}
.kcombos{display:flex;align-items:center;gap:6px;flex:none}
.kcombo{display:inline-flex;gap:3px}
.kor{font-size:10px;color:var(--ink3)}
.kcombo kbd{font-family:var(--mono);font-size:10px;padding:2px 6px;border-radius:5px;
  background:var(--surface2);border:1px solid var(--line2);color:var(--ink2);
  box-shadow:0 1px 0 var(--line2)}
body.challenge-view #app{position:relative}
.mcount{font-family:var(--mono);font-size:11px;color:var(--ink3);font-weight:400;margin-left:6px}
.mode[aria-pressed=true] .mcount{color:var(--accent)}

/* CodeMirror search panel, themed */
.cm-panels{background:var(--surface);color:var(--ink);border-bottom:1px solid var(--line)}
.cm-panel.cm-search input,.cm-panel.cm-search button,.cm-panel.cm-search label{
  font-family:var(--ui);font-size:12px}
.cm-panel.cm-search input[type=text]{background:var(--bg);color:var(--ink);
  border:1px solid var(--line2);border-radius:6px;padding:3px 7px}
.cm-panel.cm-search button{background:var(--surface2);color:var(--ink2);
  border:1px solid var(--line2);border-radius:6px;padding:3px 9px;cursor:pointer}
.cm-selectionMatch{background:color-mix(in oklch,var(--warn) 26%,transparent)}

/* ---- mesh-lab grounds ----
   A faint engineering grid as a section ground, and a single restrained accent
   wash in the corner. Both are lifted from the mesh-lab stylesheet so the two
   sites read as the same family. */
body.lobby-view{background:var(--bg)}
.hero::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:radial-gradient(var(--line2) .7px, transparent .7px);
  background-size:18px 18px;opacity:.5;
}
.hero::after{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 95% 5%, var(--accent-soft), transparent 52%);
}
.hero h1,.chtitle,.steptitle,.tiername{text-wrap:balance}
.lobbyhead{backdrop-filter:blur(8px);background:color-mix(in srgb,var(--surface) 88%,transparent)}
body.challenge-view header{backdrop-filter:blur(8px)}

/* Section grounds get the fine grid, so cards sit on something rather than
   floating on flat paint. */
.tier,.path,.pathmap{position:relative}
.modes{position:relative;isolation:isolate}

.herocopy{max-width:1320px;margin-inline:auto;
  padding:clamp(40px,5vw,72px) max(24px,calc((100vw - 1320px) / 2)) 0;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);
  align-items:start}
.herocopy p{margin:0;font-size:16px;line-height:1.7;color:var(--ink2);max-width:52ch}
.herocopy p b{color:var(--ink);font-weight:600}
.herocopy .warn{padding:18px 20px;border-radius:20px;background:var(--accent-wash);
  border:1.5px solid var(--accent-d);font-size:15px}
.herocopy code{font-family:var(--mono);font-size:.9em;background:var(--surface);
  padding:2px 6px;border-radius:6px;border:1px solid var(--line)}
.herocopy .small{grid-column:1/-1;font-size:13px;color:var(--ink3)}
@media (max-width:860px){.herocopy{grid-template-columns:1fr;padding-inline:20px}}
.herokicker svg{height:16px}