:root { --bg:#0d1117; --panel:#161b22; --border:#30363d; --fg:#c9d1d9; --accent:#3fb950; --muted:#9aa4af; --scroll-track:#11161d; --scroll-thumb:#39424d; --scroll-thumb-hover:#4a5562; }
  * { box-sizing:border-box; }
  body { margin:0; font:14px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace; background:var(--bg); color:var(--fg); }
  html { scrollbar-color:var(--scroll-thumb) var(--scroll-track); }
  header { padding:16px 24px; border-bottom:1px solid var(--border);
    display:grid; grid-template-columns:minmax(0,1fr) auto auto auto;
    grid-template-areas:"brand who modebar nav";
    align-items:center; gap:12px 18px; min-width:0;
    background:linear-gradient(180deg, #0f141c, var(--bg)); }
  .brandblock { grid-area:brand; min-width:0; display:grid; gap:4px; align-content:center; }
  header h1 { margin:0; font-size:18px; color:var(--accent); cursor:pointer;
    line-height:1.05; }
  header h1:hover { text-decoration:underline; text-underline-offset:3px; }
  header .tag { color:var(--muted); font-size:12px; min-width:0;
    white-space:normal; overflow:visible; text-overflow:clip;
    line-height:1.45; max-width:72ch; }
  .grow { display:none; }
  #modebar { grid-area:modebar; display:flex; gap:10px; flex:0 0 auto; min-width:0; justify-content:flex-end; }
  #modebar button { min-width:138px; padding:12px 18px; font-size:13px;
    letter-spacing:.02em; border-radius:14px; font-weight:700;
    box-shadow:inset 0 0 0 1px #ffffff08; transition:transform .12s ease,
      border-color .12s ease, box-shadow .12s ease, background .12s ease,
      color .12s ease, filter .12s ease; }
  #modebar button:hover, #modebar button:focus-visible {
    transform:translateY(-2px);
    border-color:#5a6a79;
    box-shadow:0 12px 24px #0007, 0 0 0 1px #ffffff08,
      inset 0 0 0 1px #ffffff10;
    filter:saturate(1.06); }
  #modebar button.on { border-color:var(--accent); color:var(--accent); }
  #modebar button.primary.on { color:#02180a; box-shadow:0 10px 24px #3fb95033; }
  #modebar button.primary.on:hover, #modebar button.primary.on:focus-visible {
    box-shadow:0 14px 28px #3fb95040, 0 0 0 1px #58c46633,
      inset 0 0 0 1px #ffffff18; }
  #termwrap { position:relative; flex:1; min-height:0; }
  /* Maximize the terminal (↖ → ↘). Lift the whole #stage into a
     full-viewport flex column (rather than pinning #termwrap alone,
     which buried the challenge card behind it): the brief card stays
     pinned across the top and the terminal fills the rest. */
  body.maxterm #stage { position:fixed; inset:0; z-index:100;
    padding:0; gap:0; background:var(--bg); }
  body.maxterm #termwrap { flex:1; min-height:0; border-radius:0; }
  body.maxterm #term { border-radius:0; padding:8px 10px; }
  /* Only the play-tab navigation and the problem-leaderboard card have
     no place full-screen; the session toolbar + readouts stay. */
  body.maxterm #resumebanner,
  body.maxterm #playdeck,
  body.maxterm #problemstats { display:none !important; }
  /* Surface the session toolbar and its readouts (creds, hint text,
     grader verdict) so Restart / Check / Hint / End / Hide challenge are
     usable without un-maximizing. #stage has no padding full-screen, so
     inset these chrome rows from the edge; the terminal still bleeds
     edge-to-edge. */
  body.maxterm #bar { margin:0; padding:8px 12px;
    border-bottom:1px solid var(--border); }
  body.maxterm.has-session #start { display:none; } /* pre-session only */
  body.maxterm #creds { margin:0; padding:6px 12px; }
  body.maxterm #hints { margin:0; padding:6px 12px 0; }
  body.maxterm #verdict.show { margin:8px 12px 12px; }
  /* The brief card: a scrollable strip beneath the toolbar. */
  body.maxterm #notepad.show { flex:0 0 auto; max-height:40vh;
    margin:0; padding:10px 12px 14px; overflow:auto;
    border-bottom:1px solid var(--border);
    background:linear-gradient(180deg,#0f141c,var(--bg)); }
  .navtog { position:absolute; top:8px; z-index:6;
    font-size:16px; font-weight:700; line-height:1; padding:3px 8px;
    opacity:.5; background:#161b22cc; transition:opacity .12s; }
  .navtog:hover { opacity:1; }
  #navtoggle   { left:8px; }
  #navtoggle-r { right:8px; }
  /* Get out of the way while the user is selecting terminal text. */
  #termwrap.selecting .navtog { display:none; }
  main { display:grid; grid-template-columns:360px 1fr; gap:0; height:calc(100vh - 61px); }
  main.nav-hidden { grid-template-columns:0 1fr; }
  /* Collapse the catalog's track WITHOUT display:none — removing it
     from the grid auto-flows #stage into the 0-width track and the
     terminal vanishes. */
  main.nav-hidden #catalog { width:0; min-width:0; padding:0;
    border:0; overflow:hidden; }
  #catalog { border-right:1px solid var(--border); overflow-y:auto; padding:14px; }
  body.play-mode #catalog { width:0; min-width:0; padding:0; border:0; overflow:hidden; }
  body.leaderboard-mode #catalog { width:0; min-width:0; padding:0; border:0; overflow:hidden; }
  /* keep the maximize-terminal arrow visible in play-mode too */
  #catalog, .sheet2, #notepad, #idle {
    scrollbar-color:var(--scroll-thumb) var(--scroll-track);
    scrollbar-width:thin;
  }
  #catalog::-webkit-scrollbar, .sheet2::-webkit-scrollbar,
  #notepad::-webkit-scrollbar, #idle::-webkit-scrollbar {
    width:12px;
    height:12px;
  }
  #catalog::-webkit-scrollbar-track, .sheet2::-webkit-scrollbar-track,
  #notepad::-webkit-scrollbar-track, #idle::-webkit-scrollbar-track {
    background:var(--scroll-track);
    border-left:1px solid #0f141b;
  }
  #catalog::-webkit-scrollbar-thumb, .sheet2::-webkit-scrollbar-thumb,
  #notepad::-webkit-scrollbar-thumb, #idle::-webkit-scrollbar-thumb {
    background:linear-gradient(180deg, #46515d, var(--scroll-thumb));
    border:2px solid var(--scroll-track);
    border-radius:999px;
    box-shadow:inset 0 0 0 1px #ffffff10;
  }
  #catalog::-webkit-scrollbar-thumb:hover, .sheet2::-webkit-scrollbar-thumb:hover,
  #notepad::-webkit-scrollbar-thumb:hover, #idle::-webkit-scrollbar-thumb:hover {
    background:linear-gradient(180deg, #566272, var(--scroll-thumb-hover));
  }
  #catalog::-webkit-scrollbar-corner, .sheet2::-webkit-scrollbar-corner,
  #notepad::-webkit-scrollbar-corner, #idle::-webkit-scrollbar-corner {
    background:var(--scroll-track);
  }
  .navgroup { margin-bottom:6px; }
  .navhead { display:flex; align-items:center; justify-content:space-between;
    padding:8px 10px; margin:10px 0 6px; border-radius:6px; cursor:pointer;
    font-size:12px; text-transform:uppercase; letter-spacing:.08em; font-weight:700;
    border:1px solid var(--border); user-select:none;
    transition:border-color .14s, background-color .14s, box-shadow .14s,
      transform .14s, color .14s; }
  .navhead:first-child { margin-top:0; }
  .navhead .count { font-weight:600; opacity:.7; }
  .navhead.easy   { color:#3fb950; border-color:#27502b; background:#10211440; }
  .navhead.medium { color:#d29922; border-color:#5a431a; background:#211a0840; }
  .navhead.pro    { color:#f85149; border-color:#5c2b29; background:#21100f40; }
  .navhead .chev { transition:transform .15s, color .15s, opacity .15s; }
  .navgroup.collapsed > .navhead .chev { transform:rotate(-90deg); }
  .navgroup.collapsed > .gbody { display:none; }
  /* Top-level theme track: neutral, a touch larger than difficulty. */
  .navhead.track { color:var(--fg); border-color:var(--border);
    background:var(--panel); font-size:13px; }
  .navhead.track .count { color:var(--muted); }
  .navhead:hover, .navhead:focus-visible {
    border-color:var(--accent);
    box-shadow:0 0 0 1px #3fb95055, 0 10px 24px #00000026;
    transform:translateY(-1px);
    outline:none;
  }
  .navhead:hover .chev, .navhead:focus-visible .chev {
    opacity:.95; color:var(--accent);
  }
  .navhead:active { transform:translateY(0); }
  .navgroup:not(.collapsed) > .navhead {
    box-shadow:inset 0 0 0 1px #ffffff08, 0 10px 24px #0000001c;
  }
  .track > .gbody { margin:0 0 4px 6px; padding-left:9px;
    border-left:1px solid var(--border); }
  .diffgroup > .navhead { font-size:11px; padding:6px 9px;
    margin:6px 0 5px; }
  .card { background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:12px; margin-bottom:10px; cursor:pointer; }
  .card:hover { border-color:var(--accent); }
  .card h3 { margin:0 0 4px; font-size:14px; }
  .meta { font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
  .brief { color:var(--muted); font-size:12px; margin-top:8px; white-space:pre-wrap; display:none; }
  .card.active .brief { display:block; }
  #stage { display:flex; flex-direction:column; padding:14px; min-width:0; }
  #resumebanner { margin:0 0 14px; }
  #resumebanner[hidden] { display:none; }
  body.leaderboard-home #resumebanner,
  body.play-mode #resumebanner { margin:0 auto 14px; width:min(1280px, 100%); }
  .resumebtn { width:100%; display:flex; align-items:center; gap:14px;
    padding:14px 20px; background:linear-gradient(90deg, #1b3a1f 0%, #163018 100%);
    border:1px solid var(--accent); border-radius:10px; color:var(--fg);
    font:inherit; text-align:left; cursor:pointer;
    box-shadow:0 6px 18px #3fb95022;
    transition:transform .12s ease, box-shadow .12s ease, background .12s ease; }
  .resumebtn:hover, .resumebtn:focus-visible {
    transform:translateY(-1px); box-shadow:0 10px 26px #3fb9503a;
    background:linear-gradient(90deg, #224a27 0%, #1b3d1f 100%); outline:none; }
  .resumearrow { color:var(--accent); font-size:18px; line-height:1; }
  .resumetext { font-size:14px; }
  .resumetext b { color:var(--accent); font-weight:600; }
  #playdeck { display:none; margin-bottom:12px; }
  body.play-mode #playdeck { display:block; }
  body.leaderboard-mode #playdeck { display:block; }
  /* On the Play tab, an active session means the terminal is the
     focus — don't shove a "Play recommended puzzle" card above it. */
  body.play-mode.has-session #playdeck { display:none; }
  body.play-home #stage { padding:28px 30px 34px; overflow:auto; }
  body.leaderboard-home #stage { padding:28px 30px 34px; overflow:auto; }
  body.play-home #bar,
  body.play-home #creds,
  body.play-home #hints,
  body.play-home #notepad,
  body.play-home #problemstats,
  body.play-home #termwrap,
  body.play-home #verdict { display:none !important; }
  body.leaderboard-home #bar,
  body.leaderboard-home #creds,
  body.leaderboard-home #hints,
  body.leaderboard-home #notepad,
  body.leaderboard-home #problemstats,
  body.leaderboard-home #termwrap,
  body.leaderboard-home #verdict { display:none !important; }
  body.play-home #playdeck { margin:0 auto; width:min(1280px, 100%); display:grid; gap:16px; }
  body.leaderboard-home #playdeck { margin:0 auto; width:min(1280px, 100%); display:grid; gap:16px; }
  #bar { display:flex; gap:10px; align-items:center; margin-bottom:10px; flex-wrap:wrap; }
  button { font:inherit; background:var(--panel); color:var(--fg); border:1px solid var(--border); border-radius:6px; padding:7px 14px; cursor:pointer;
    transition:transform .12s ease, border-color .12s ease, box-shadow .12s ease,
      background .12s ease, color .12s ease, opacity .12s ease, filter .12s ease; }
  button.primary { background:var(--accent); color:#02180a; border-color:var(--accent); font-weight:600; }
  button:not(:disabled):hover, button:not(:disabled):focus-visible {
    border-color:#4d8f5b;
    background:linear-gradient(180deg, #1d2520, #161b22);
    box-shadow:0 10px 22px #0007, 0 0 0 1px #ffffff08,
      inset 0 0 0 1px #ffffff10;
    transform:translateY(-2px);
    filter:saturate(1.04);
    outline:none;
  }
  button.primary:not(:disabled):hover, button.primary:not(:disabled):focus-visible {
    border-color:#58c466;
    background:linear-gradient(180deg, #49c758, #3fb950);
    box-shadow:0 14px 28px #3fb95040, 0 0 0 1px #58c46633,
      inset 0 0 0 1px #ffffff18;
  }
  button:not(:disabled):active { transform:translateY(0); box-shadow:inset 0 1px 0 #00000022; }
  button:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; transform:none; }
  #status { color:var(--muted); font-size:12px; }
  #status.ok { color:var(--accent); } #status.err { color:#f85149; }
  #creds { font-size:12px; color:var(--muted); margin-bottom:8px; min-height:18px; }
  .playcard { border:1px solid var(--border); border-radius:12px; padding:18px;
    background:
      radial-gradient(circle at top right, rgba(63,185,80,.14), transparent 34%),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
      var(--panel); }
  .playkicker { color:var(--accent); font-size:11px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px;
    display:flex; align-items:center; gap:6px; }
  .playcollapse { font:inherit; background:transparent; color:var(--accent);
    border:1px solid var(--border); border-radius:4px; padding:0 6px;
    line-height:1.1; cursor:pointer; font-size:12px; }
  .playcollapse:hover { background:var(--bg); }
  /* Collapsed: keep the kicker + title visible (one-liner); hide
     subtitle, meta chips, action buttons and the alternates list. */
  .playcard.collapsed { padding:8px 14px; }
  .playcard.collapsed .playtitle { font-size:14px; margin:0; display:inline; }
  .playcard.collapsed .playkicker { margin-bottom:0; }
  .playcard.collapsed .playsub,
  .playcard.collapsed .playmeta,
  .playcard.collapsed .playactions,
  .playcard.collapsed .playnext { display:none; }
  .playtitle { margin:0 0 8px; font-size:24px; line-height:1.15; }
  .playsub { color:var(--muted); font-size:14px; line-height:1.6; margin:0 0 14px; }
  .playmeta { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
  .playmeta span { font-size:12px; color:var(--muted); background:var(--bg);
    border:1px solid var(--border); border-radius:999px; padding:4px 10px; }
  .playactions { display:flex; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
  .playnext { display:grid; gap:8px; }
  .playrow { display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:10px 0; border-top:1px solid var(--border); }
  .playrow:first-child { border-top:0; }
  .playrow small { display:block; color:var(--muted); margin-top:3px; }
  .playempty { border:1px dashed var(--border); border-radius:12px; padding:18px;
    color:var(--muted); background:var(--panel); }
  .playhome { display:grid; gap:16px; }
  .playhome-footer { display:flex; justify-content:flex-end; padding-top:4px;
    border-top:1px solid var(--border); }
  .leaderboardpage { display:grid; gap:16px; }
  .leaderboardhero { border:1px solid var(--border); border-radius:24px; padding:30px;
    background:
      radial-gradient(circle at top right, rgba(121,192,255,.18), transparent 30%),
      radial-gradient(circle at bottom left, rgba(63,185,80,.14), transparent 28%),
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
      var(--panel);
    box-shadow:0 26px 48px #0000002c; }
  .leaderboardgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:16px; }
  .leaderboardgrid.one { grid-template-columns:minmax(0, 560px); }
  .leaderboardpanel { border:1px solid var(--border); border-radius:18px; padding:18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
      var(--panel);
    box-shadow:0 18px 34px #00000022; min-width:0; }
  /* Segmented control for the leaderboard sub-views — single scrolling row */
  .lbtabs { display:flex; flex-wrap:nowrap; gap:4px; margin:0 0 16px;
    border-bottom:1px solid var(--border); overflow-x:auto;
    scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
  .lbtab { appearance:none; background:none; border:none; cursor:pointer;
    flex:0 0 auto; white-space:nowrap;
    color:var(--muted); font:inherit; font-size:13px; font-weight:600;
    padding:8px 14px; border-radius:10px 10px 0 0; border-bottom:2px solid transparent;
    margin-bottom:-1px; transition:color .12s, border-color .12s; }
  .lbtab:hover { color:var(--text, #e9eef5); }
  .lbtab.on { color:var(--accent); border-bottom-color:var(--accent); }
  /* "You are here" rank strip */
  .lbyou { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    font-size:13px; padding:10px 14px; margin:0 0 14px; border-radius:12px;
    border:1px solid color-mix(in srgb, var(--accent) 35%, var(--border));
    background:color-mix(in srgb, var(--accent) 10%, transparent); }
  .lbyou.signedout { color:var(--muted);
    border-color:var(--border); background:var(--panel); }
  .lbyou b { color:var(--accent); }
  .lbyoulabel { font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    font-size:10px; padding:2px 7px; border-radius:6px; color:#0a0d12;
    background:var(--accent); }
  .lbsecthead { display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .lbtrackpick { background:var(--panel); color:inherit; font:inherit; font-size:12px;
    border:1px solid var(--border); border-radius:8px; padding:4px 8px; cursor:pointer; }
  .lbtable td.lbrank { width:34px; text-align:center; font-variant-numeric:tabular-nums; }
  /* Daily-challenge header card inside the Daily sub-tab */
  .lbdaily { display:flex; align-items:center; justify-content:space-between; gap:14px;
    flex-wrap:wrap; padding:12px 14px; margin:0 0 12px; border-radius:12px;
    border:1px solid var(--border);
    background:linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,0)), var(--panel); }
  .lbdailylabel { font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .lbdailytitle { font-size:16px; font-weight:700; margin:2px 0; }
  .footerlink { color:var(--muted); font-size:12px; letter-spacing:.06em;
    text-transform:uppercase; text-decoration:none; }
  .footerlink:hover, .footerlink:focus-visible { color:var(--accent);
    text-decoration:underline; text-underline-offset:3px; outline:none; }
  .playviz { display:grid; gap:14px; }
  .playviz-head { color:var(--accent); font-size:11px; font-weight:700;
    letter-spacing:.16em; text-transform:uppercase; }
  .playviz-grid { display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px; }
  .playbars { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
  .playbar { border:1px solid var(--border); border-radius:14px; padding:12px 14px;
    background:#0f151d; }
  .playstat.hoverable, .playbar.hoverable {
    transition:transform .14s ease, border-color .14s ease,
      box-shadow .14s ease, background .14s ease; }
  .playstat.hoverable:hover, .playbar.hoverable:hover {
    border-color:#5a8f67;
    background:linear-gradient(180deg, #17202a, #101720);
    box-shadow:0 16px 32px #00000028, 0 0 0 1px #ffffff05,
      inset 0 0 0 1px #3fb95026;
    transform:translateY(-3px);
  }
  .playbar-top { display:flex; justify-content:space-between; gap:10px;
    color:var(--muted); font-size:12px; margin-bottom:8px; text-transform:capitalize; }
  .playbar.easy .bar i { background:#3fb950; }
  .playbar.medium .bar i { background:#d29922; }
  .playbar.pro .bar i { background:#f85149; }
  .playhero { display:grid; grid-template-columns:minmax(0, 1.45fr) minmax(280px, .9fr); gap:16px; }
  .playhero-main, .playhero-side { min-width:0; }
  .playhero-main {
    border:1px solid var(--border); border-radius:24px; padding:30px;
    background:
      radial-gradient(circle at top right, rgba(63,185,80,.24), transparent 36%),
      radial-gradient(circle at bottom left, rgba(121,192,255,.12), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
      var(--panel);
    box-shadow:0 26px 48px #0000002c;
  }
  .playhero-side { display:grid; gap:16px; }
  .playhero-kicker { color:var(--accent); font-size:12px; font-weight:700;
    letter-spacing:.22em; text-transform:uppercase; margin-bottom:12px; }
  .playhero-title { margin:0 0 14px; font-size:48px; line-height:1.02; max-width:10ch; }
  .playhero-copy { max-width:64ch; color:var(--muted); font-size:16px; line-height:1.7; margin:0 0 18px; }
  .playhero-note { margin-top:14px; color:#8fb8ff; font-size:13px; }
  .playemptyhero .playhero-title { max-width:12ch; }
  body:not(.play-home) .playhome-aux { display:none; }
  .playhome-aux { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:16px; margin-top:16px; }
  .playpanel { border:1px solid var(--border); border-radius:18px; padding:18px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
      var(--panel);
    box-shadow:0 18px 34px #00000022; }
  .playpanel h3 { margin:0 0 8px; font-size:18px; }
  .playpanel p { margin:0 0 14px; color:var(--muted); line-height:1.6; }
  .playpanel-kicker, .playpanel-head { color:var(--accent); font-size:11px;
    font-weight:700; letter-spacing:.16em; text-transform:uppercase;
    margin-bottom:10px; }
  .playstats { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .playstat { border:1px solid var(--border); border-radius:14px; padding:12px 13px;
    background:#0f151d; }
  .playstat span { display:block; color:var(--muted); font-size:11px;
    text-transform:uppercase; letter-spacing:.08em; margin-bottom:6px; }
  .playstat strong { font-size:18px; color:var(--fg); }
  .playsteps { display:grid; gap:12px; }
  .playstep { display:grid; grid-template-columns:28px 1fr; gap:12px; align-items:start; }
  .playstep b { display:grid; place-items:center; width:28px; height:28px;
    border-radius:999px; background:#102114; color:var(--accent); }
  .playstep span { color:var(--muted); line-height:1.6; }
  .playquick { display:grid; gap:10px; }
  .playquick button { width:100%; justify-content:center; }
  body.play-home .playcard {
    padding:30px; border-radius:24px;
    background:
      radial-gradient(circle at top right, rgba(63,185,80,.24), transparent 36%),
      radial-gradient(circle at bottom left, rgba(121,192,255,.12), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0)),
      var(--panel);
    box-shadow:0 26px 48px #0000002c;
  }
  body.play-home .playcollapse { display:none; }
  body.play-home .playcard.collapsed { padding:30px; }
  body.play-home .playcard.collapsed .playsub,
  body.play-home .playcard.collapsed .playmeta,
  body.play-home .playcard.collapsed .playactions,
  body.play-home .playcard.collapsed .playnext { display:block; }
  body.play-home .playkicker { font-size:12px; letter-spacing:.22em; margin-bottom:12px; }
  body.play-home .playtitle { font-size:48px; line-height:1.02; max-width:10ch; margin-bottom:14px; }
  body.play-home .playsub { max-width:64ch; font-size:16px; margin-bottom:18px; }
  body.play-home .playmeta { margin-bottom:18px; }
  body.play-home .playactions { margin-bottom:0; }

  /* Handwritten challenge brief on a torn sheet of ruled notepad. */
  #notepad { display:none; margin:2px 0 12px; max-height:42vh; overflow:auto; }
  #notepad.show { display:block; }
  #problemstats { display:none; margin:8px 0 0; }
  #problemstats.show { display:block; }
  .sheet {
    position:relative; max-width:680px; padding:34px 30px 30px 64px;
    color:#1d3a8a; background:#fffdf4;
    background-image:
      linear-gradient(#fffdf4 0 0),
      repeating-linear-gradient(#fffdf4 0 27px, #cfe0ef 27px 28px);
    background-size:100% 100%, 100% 28px;
    background-position:0 0, 0 14px;
    border:1px solid #e6e0c8; border-radius:3px;
    box-shadow:0 10px 22px #0008, inset 0 0 40px #00000008;
    transform:rotate(-.5deg); }
  .sheet::before {  /* red margin rule */
    content:""; position:absolute; top:0; bottom:0; left:46px;
    width:2px; background:#e2786e; opacity:.7; }
  .sheet::after {   /* bit of tape up top */
    content:""; position:absolute; top:-10px; left:50%;
    width:90px; height:22px; transform:translateX(-50%) rotate(-2deg);
    background:#ffffff22; border:1px solid #ffffff30;
    box-shadow:0 1px 3px #0006; }
  .sheet h2 { font-family:'Caveat',cursive; font-weight:700;
    font-size:30px; margin:0 0 6px; color:#15235e; }
  .sheet .sub { font-family:'Caveat',cursive; font-size:19px;
    color:#7a6a3a; margin-bottom:10px; }
  .sheet pre { font-family:'Caveat',cursive; font-weight:500;
    font-size:21px; line-height:28px; white-space:pre-wrap;
    margin:0; color:#1d3a8a; }

  /* When a challenge is completed the notepad takes the whole stage
     and the grader output is replaced by a teacher's marked page. */
  #notepad.graded { display:block; max-height:none; flex:1; }
  main.solved #termwrap { display:none; }
  .sheet.graded { max-width:760px; min-height:340px; }
  .grade-stamp {
    position:absolute; top:24px; right:26px;
    font-family:'Caveat',cursive; font-weight:700; font-size:46px;
    color:#c0392b; border:4px solid #c0392b; border-radius:10px;
    padding:2px 18px 6px; transform:rotate(7deg);
    text-shadow:0 0 1px #c0392b88;
    box-shadow:0 0 0 1px #c0392b22, inset 0 0 14px #c0392b14; }
  .teacher { font-family:'Caveat',cursive; color:#c0392b;
    font-weight:700; font-size:34px; margin:26px 0 6px;
    transform:rotate(-1.2deg); }
  .teacher .tick { color:#1f8b3b; margin-right:8px; }
  .teacher-sub { font-family:'Caveat',cursive; color:#b03a2e;
    font-size:23px; transform:rotate(-.6deg); }
  .grade-mark { font-family:'Caveat',cursive; color:#c0392b;
    font-weight:700; font-size:30px; margin-top:18px; }
  .grade-mark .score { font-size:40px;
    border-bottom:3px double #c0392b; padding:0 6px; }
  .grade-foot { font-family:'Caveat',cursive; color:#7a6a3a;
    font-size:18px; margin-top:22px; opacity:.85; }
  .problemboard-card { border:1px solid var(--border); border-radius:16px; padding:16px 18px;
    background:
      radial-gradient(circle at top right, rgba(121,192,255,.10), transparent 30%),
      linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)),
      var(--panel);
    box-shadow:0 16px 28px #00000022; }
  .problemboard-card.compact { padding:10px 14px; border-radius:12px;
    box-shadow:0 8px 16px #00000016; }
  .problemboard-card.loading { border-style:dashed; }
  .problemboard-head { display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:12px; }
  .problemboard-head.compact { align-items:center; margin-bottom:0; }
  .problemboard-kicker { color:#79c0ff; font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; margin-bottom:8px; }
  .problemboard-head h3 { margin:0 0 6px; font-size:20px; }
  .problemboard-head p { margin:0; color:var(--muted); font-size:13px; line-height:1.6; max-width:64ch; }
  .problemboard-titleline { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .problemboard-card.compact .problemboard-kicker { margin-bottom:4px; font-size:10px; }
  .problemboard-card.compact .problemboard-head h3 { margin:0; font-size:15px; }
  .problemboard-card.compact .problemboard-head p { font-size:12px; line-height:1.45; }
  .problemboard-actions { display:flex; gap:8px; flex-wrap:wrap; flex:0 0 auto; }
  .problemboard-actions button { font-size:11px; padding:5px 10px; }
  .problemboard-detail { margin-top:10px; padding-top:10px; border-top:1px solid var(--border); }
  .problemboard-meta { color:var(--muted); font-size:12px; line-height:1.5; margin-bottom:8px; }
  .problemboard-empty { margin:0; color:var(--muted); font-size:13px; line-height:1.6; }
  #term { position:absolute; inset:0; background:#0c0c0c;
    border:1px solid #2b2b2b; border-radius:8px; padding:0;
    overflow:hidden; box-sizing:border-box;
    box-shadow:inset 0 0 0 1px #ffffff08, 0 8px 28px #0009;
    transition:border-color .12s, box-shadow .12s; }
  #term .xterm { height:100% !important; padding:0 !important; }
  #term .xterm-viewport { overflow:hidden !important; }
  /* xterm keeps a focusable textarea inside #term, so :focus-within
     lights a box around the pane whenever the terminal has focus. */
  #term:focus-within { border-color:var(--accent);
    box-shadow:0 0 0 1px var(--accent), 0 0 14px #3fb95055,
      inset 0 0 0 1px #3fb95033; }
  #term .xterm-viewport::-webkit-scrollbar { width:10px; }
  #term .xterm-viewport::-webkit-scrollbar-thumb {
    background:#3a3a3a; border-radius:5px; }
  #term .xterm-viewport::-webkit-scrollbar-track { background:transparent; }
  /* Grader failure detail. Capped + scrollable + dismissable so a long
     `output` can never cover the screen with no way out (was an unbounded
     bare div). Shown only when populated, via the .show class. */
  #verdict { display:none; }
  #verdict.show {
    display:block; position:relative; margin-top:8px;
    border:1px solid #5c2b29; border-radius:8px; background:#21100f;
    padding:8px 34px 8px 12px; }
  #verdict .vbody {
    margin:0; max-height:32vh; overflow:auto; font-size:13px;
    line-height:1.5; color:#f85149; white-space:pre-wrap;
    overflow-wrap:anywhere; word-break:break-word;
    font-family:ui-monospace,Menlo,monospace; }
  #verdict .vclose {
    position:absolute; top:5px; right:6px; width:24px; height:24px;
    display:flex; align-items:center; justify-content:center;
    background:transparent; border:0; border-radius:6px; cursor:pointer;
    color:#f85149; font-size:16px; line-height:1; }
  #verdict .vclose:hover { background:#5c2b2933; color:#fff; }
  code { color:#79c0ff; }
  #who { grid-area:who; margin-left:0; color:var(--muted); font-size:12px;
    justify-self:end; text-align:right; max-width:32ch; white-space:normal;
    line-height:1.45; padding-right:10px; }
  /* keep the "sign out" link atomic so it never breaks to "sign" / "out". */
  #who a { color:var(--accent); text-decoration:none; white-space:nowrap; }
  #who .who-pill { display:inline-block; margin-right:8px; padding:3px 8px;
    border:1px solid #27502b; border-radius:999px; background:#10211440;
    color:var(--accent); font-size:11px; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; }
  #who .who-copy { color:var(--muted); }
  #gate { position:fixed; inset:0; background:#0d1117; display:none;
    flex-direction:column; align-items:center; justify-content:center;
    gap:18px; z-index:50; text-align:center; padding:24px; }
  #gate.show { display:flex; }
  #gate h2 { color:var(--accent); margin:0; font-size:22px; }
  #gate p { color:var(--muted); max-width:420px; margin:0; }
  .gor { display:flex; align-items:center; gap:10px; color:var(--muted);
    font-size:12px; width:260px; }
  .gor::before, .gor::after { content:""; flex:1; height:1px;
    background:var(--border); }
  .guestform { display:flex; gap:8px; }
  .guestform input { font:inherit; font-size:14px; padding:10px 12px;
    width:200px; background:var(--panel); color:var(--fg);
    border:1px solid var(--border); border-radius:6px; }
  .guestform button { font:inherit; }
  /* Stacked variant — used by the gate when there are more than two
     children (name + email + button) so each row gets its own width. */
  .guestform.stack { flex-direction:column; width:min(320px,100%);
    align-items:stretch; }
  .guestform.stack input, .guestform.stack button { width:100%; }
  .gerr { color:#f85149 !important; font-size:12px; min-height:14px; }
  .gclose { background:none; border:0; color:var(--muted);
    font-size:12px; cursor:pointer; text-decoration:underline; }
  /* Browser-only warm-up gate (no AWS) — real xterm REPL. */
  #intro { position:fixed; inset:0; background:#0d1117; display:none;
    flex-direction:column; align-items:center; justify-content:center;
    gap:0; z-index:55; padding:24px; }
  body.gated #intro { display:flex; }
  body.gated main, body.gated .navtog { display:none; }
  .introbox { width:min(720px,100%); }
  .introbox.welcome { width:min(980px,100%); }
  .introview { display:none; }
  #intro[data-mode="welcome"] #introWelcome { display:block; }
  #intro[data-mode="placement"] #introPlacement { display:block; }
  .introkicker { text-align:center; color:var(--accent);
    font-size:11px; font-weight:700; letter-spacing:.22em;
    margin-bottom:6px; }
  #intro h2 { color:var(--fg); margin:0 0 6px; font-size:24px;
    text-align:center; font-weight:700; }
  .introsub { color:var(--muted); font-size:13px; margin:0 auto 18px;
    max-width:540px; text-align:center; line-height:1.55; }
  .welgrid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
    margin:18px 0 20px; }
  .welcard { background:linear-gradient(180deg,#151b23,#11161d);
    border:1px solid var(--border); border-radius:12px; padding:16px;
    text-align:left; box-shadow:0 12px 30px #00000026; }
  .welcard b { display:block; color:var(--fg); margin-bottom:6px; }
  .welcard span { color:var(--muted); font-size:13px; line-height:1.55; }
  .welcomeactions { display:flex; flex-direction:column; align-items:center;
    gap:12px; }
  .guestform.wide { width:min(420px,100%); justify-content:center; }
  .guestform.wide input { flex:1 1 auto; width:auto; }
  .welnote { color:var(--muted); font-size:12px; line-height:1.6;
    text-align:center; max-width:620px; margin:4px auto 0; }
  #introProg { display:flex; gap:8px; justify-content:center;
    margin-bottom:16px; }
  #introProg span { width:40px; height:6px; border-radius:3px;
    background:var(--border); transition:background .2s; }
  #introProg span.on { background:var(--accent); }
  #introProg span.cur { background:#e6c275; }
  #introTask { background:var(--panel); border:1px solid var(--border);
    border-left:3px solid var(--accent); border-radius:8px;
    padding:12px 16px; font-size:14px; color:var(--fg);
    margin-bottom:10px; }
  #introTask b { color:var(--accent); }
  #introTask .obj { color:#e6c275; font-weight:600; }
  #introTask small { display:block; color:var(--muted); font-size:12px;
    margin-top:4px; }
  /* No fixed height: the wrapper hugs the fixed-row xterm, so the
     terminal can never overflow it (cursor never clipped). */
  #introTerm { width:100%; background:#000; border:1px solid var(--border);
    border-radius:8px; padding:0; overflow:hidden; box-sizing:border-box; }
  #introTerm .xterm { padding:6px 8px !important; }
  #introTerm .xterm-viewport { overflow:hidden !important; }
  .introfoot { text-align:center; color:var(--muted); font-size:12px;
    margin-top:12px; }
  .introfoot b { color:var(--fg); }
  .introlinks { display:flex; gap:10px; justify-content:center;
    margin-top:16px; }
  .introlinks button { font:inherit; font-size:12px; padding:7px 14px;
    background:var(--panel); color:var(--muted);
    border:1px solid var(--border); border-radius:6px; cursor:pointer; }
  .introlinks button:hover { color:var(--accent);
    border-color:var(--accent); }
  .gbtn { display:inline-flex; align-items:center; gap:10px;
    background:#fff; color:#3c4043; font-weight:600; border-radius:6px;
    padding:11px 18px; text-decoration:none; font-size:14px;
    border:1px solid #dadce0; }
  .gbtn img { width:18px; height:18px; }
  @media (max-width: 780px) {
    .welgrid { grid-template-columns:1fr; }
    .guestform.wide { flex-direction:column; }
    .guestform.wide input, .guestform.wide button { width:100%; }
  }

  /* Header nav menu. */
  #nav { grid-area:nav; position:relative; display:flex; flex:0 0 auto; justify-self:end; }
  #nav button { font-size:12px; padding:6px 12px; }
  #navmenu { position:absolute; top:calc(100% + 8px); right:0; min-width:220px;
    display:none; padding:8px; background:var(--panel); border:1px solid var(--border);
    border-radius:10px; box-shadow:0 12px 32px #000a; z-index:20; }
  #nav.open #navmenu { display:grid; gap:6px; }
  #navmenu button { width:100%; text-align:left;
    transition:transform .12s ease, border-color .12s ease,
      box-shadow .12s ease, background .12s ease, color .12s ease; }
  #navmenu button:hover, #navmenu button:focus-visible,
  #panelnav button:hover, #panelnav button:focus-visible { color:var(--fg);
    border-color:#4d8f5b;
    background:linear-gradient(180deg, #1c2520, #161b22);
    box-shadow:inset 0 0 0 1px #3fb95022, 0 6px 14px #0005;
    transform:translateX(2px); }
  #navmenu button.on { border-color:var(--accent); color:var(--accent); }
  .hamb { min-width:58px; font-size:24px !important; line-height:1;
    padding:10px 12px !important; border-radius:14px !important;
    transition:transform .12s ease, border-color .12s ease,
      box-shadow .12s ease, background .12s ease, color .12s ease; }
  .hamb:hover, .hamb:focus-visible { color:var(--accent);
    border-color:#4d8f5b;
    background:linear-gradient(180deg, #1c2520, #161b22);
    box-shadow:0 8px 18px #0006, 0 0 0 1px #3fb95033, inset 0 0 0 1px #ffffff08;
    transform:translateY(-1px); }
  /* Hint button + revealed-hint stack. */
  #hint { border-color:#5a431a; color:#d29922; }
  #hint:not(:disabled):hover, #hint:not(:disabled):focus-visible {
    border-color:#8b6a2a;
    background:linear-gradient(180deg, #241d0c, #18140a);
    color:#e6c275;
    box-shadow:0 8px 18px #0006, inset 0 0 0 1px #d299221f;
  }
  #hints { margin:0 0 8px; display:flex; flex-direction:column; gap:6px; }
  #hints:empty { display:none; }
  .hint { background:#211a0822; border:1px solid #5a431a; border-left:3px solid #d29922;
    border-radius:6px; padding:8px 12px; font-size:13px; color:#e6c275; }
  .hint b { color:#d29922; }

  /* Feedback modal (general + per-challenge "report a problem"). */
  #fbmodal { position:fixed; inset:0; background:#0009; display:flex;
    align-items:center; justify-content:center; z-index:80;
    backdrop-filter:blur(2px); padding:20px; }
  #fbmodal[hidden] { display:none; }
  .fbsheet { width:min(520px, 100%); background:var(--panel);
    border:1px solid var(--border); border-radius:12px;
    box-shadow:0 24px 48px #000c; padding:0; overflow:hidden;
    animation:fbpop .15s ease-out; }
  @keyframes fbpop { from { transform:translateY(8px) scale(.98); opacity:.5; } }
  .fbhead { display:flex; align-items:center; justify-content:space-between;
    padding:14px 18px; border-bottom:1px solid var(--border); gap:12px; }
  .fbhead h2 { margin:0; font-size:15px; color:var(--accent); }
  .fbclose { background:transparent; border:none; color:var(--muted);
    font-size:18px; cursor:pointer; padding:4px 8px; border-radius:6px; }
  .fbclose:hover { color:var(--fg); background:var(--bg); }
  .fbsub { color:var(--muted); font-size:12px; margin:12px 18px 0; }
  #fbmsg { display:block; width:calc(100% - 36px); margin:12px 18px 0;
    background:var(--bg); color:var(--fg); border:1px solid var(--border);
    border-radius:8px; padding:10px 12px; font:inherit; resize:vertical;
    min-height:120px; box-sizing:border-box; }
  #fbmsg:focus { outline:none; border-color:var(--accent); }
  .fbfoot { display:flex; align-items:center; gap:10px; padding:14px 18px;
    border-top:1px solid var(--border); margin-top:14px;
    background:var(--bg); flex-wrap:wrap; }
  .fbcount { color:var(--muted); font-size:11px; margin-right:auto; }
  .fbe { color:#ff6b6b; font-size:12px; }

  .np-report { display:inline-block; margin-top:14px; padding:6px 12px;
    font-size:11px; color:var(--muted); background:transparent;
    border:1px dashed var(--border); border-radius:6px; cursor:pointer; }
  .np-report:hover { color:var(--accent); border-color:var(--accent); }

  .privpref { display:inline-flex; align-items:center; gap:8px;
    font-size:13px; color:var(--fg); cursor:pointer;
    padding:6px 0; user-select:none; }
  .privpref input { accent-color:var(--accent); cursor:pointer; }

  .dangerbtn { background:#3a1010; color:#ff8b8b; border:1px solid #6a1f1f;
    border-radius:8px; padding:10px 16px; font:inherit; cursor:pointer;
    transition:background .12s ease, border-color .12s ease,
      transform .12s ease, box-shadow .12s ease; }
  .dangerbtn:hover, .dangerbtn:focus-visible {
    background:#521616; border-color:#a33; color:#ffb3b3;
    box-shadow:0 6px 16px #ff4d4d22; transform:translateY(-1px);
    outline:none; }

  /* Slide-over panel for Progress / Leaderboard. */
  #panel { position:fixed; inset:0; background:#0008; display:none;
    z-index:60; backdrop-filter:blur(2px); }
  #panel.show { display:flex; justify-content:flex-end; }
  .sheet2 { width:min(560px,100%); height:100%; background:var(--panel);
    border-left:1px solid var(--border); overflow-y:auto;
    box-shadow:-12px 0 32px #000a; animation:slidein .18s ease; }
  @keyframes slidein { from { transform:translateX(40px); opacity:.4; } }
  .sheet2 header { position:sticky; top:0; background:var(--panel);
    z-index:1; justify-content:space-between; }
  .sheet2 header h2 { margin:0; font-size:16px; color:var(--accent); }
  .panelhead { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 18px 14px; border-bottom:1px solid var(--border); }
  .panelactions { display:flex; align-items:center; gap:10px; position:relative; }
  #panelnav { position:absolute; top:calc(100% + 8px); right:56px; min-width:220px;
    display:none; padding:8px; background:var(--panel); border:1px solid var(--border);
    border-radius:10px; box-shadow:0 12px 32px #000a; z-index:21; }
  #panel.nav-open #panelnav { display:grid; gap:6px; }
  #panelnav button { width:100%; text-align:left;
    transition:transform .12s ease, border-color .12s ease,
      box-shadow .12s ease, background .12s ease, color .12s ease; }
  #panelnav button.on { border-color:var(--accent); color:var(--accent); }
  .pclose { font-size:18px; line-height:1; padding:4px 10px; }
  .pbody { padding:16px 18px 28px; }
  .signin-note { color:var(--muted); text-align:center; padding:40px 10px; }
  .signin-note a { color:var(--accent); cursor:pointer; }
  .statgrid { display:grid; grid-template-columns:1fr 1fr; gap:10px;
    margin-bottom:18px; }
  .stat { background:var(--bg); border:1px solid var(--border);
    border-radius:8px; padding:12px 14px; }
  .stat .n { font-size:22px; color:var(--accent); font-weight:700; }
  .stat .l { font-size:11px; color:var(--muted); text-transform:uppercase;
    letter-spacing:.05em; margin-top:2px; }
  .bar { height:6px; background:var(--border); border-radius:3px;
    overflow:hidden; margin-top:8px; }
  .bar i { display:block; height:100%; background:var(--accent); }
  .secthead { font-size:12px; text-transform:uppercase; letter-spacing:.08em;
    color:var(--muted); margin:20px 0 8px; font-weight:700; }
  .badges { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .badge { background:var(--bg); border:1px solid var(--border);
    border-radius:8px; padding:10px 12px; opacity:.42; }
  .badge.on { opacity:1; border-color:#3fb95066; background:#10211440; }
  .badge .bt { font-size:13px; font-weight:700; }
  .badge.on .bt { color:var(--accent); }
  .badge .bd { font-size:11px; color:var(--muted); margin-top:2px; }
  .lbtable { width:100%; border-collapse:collapse; font-size:12px;
    margin-bottom:16px; }
  .lbtable th,.lbtable td { text-align:left; padding:5px 8px;
    border-bottom:1px solid var(--border); }
  .lbtable th { color:var(--muted); font-weight:600; }
  .lbtable td.t { color:var(--accent); font-variant-numeric:tabular-nums; }
  .lbc { font-size:13px; font-weight:700; margin:14px 0 4px; }
  .lbc small { color:var(--muted); font-weight:400; text-transform:uppercase;
    letter-spacing:.04em; margin-left:6px; }
  .nohint { color:#3fb950; }
  .nohint-wrap { position:relative; display:inline-flex; align-items:center; }
  .nohint-tip { position:absolute; left:50%; bottom:calc(100% + 10px);
    transform:translateX(-50%) translateY(4px); opacity:0; pointer-events:none;
    white-space:nowrap; background:#0b1016; color:var(--fg);
    border:1px solid var(--border); border-radius:8px; padding:6px 9px;
    font-size:11px; line-height:1.3; box-shadow:0 12px 24px #0008;
    transition:opacity .12s ease, transform .12s ease; z-index:8; }
  .nohint-tip::after { content:""; position:absolute; top:100%; left:50%;
    transform:translateX(-50%); border:6px solid transparent;
    border-top-color:var(--border); }
  .nohint-wrap:hover .nohint-tip, .nohint-wrap:focus-within .nohint-tip {
    opacity:1; transform:translateX(-50%) translateY(0); }
  .rowlist { font-size:12px; }
  .rowlist div { display:flex; justify-content:space-between;
    padding:5px 0; border-bottom:1px solid var(--border); color:var(--muted); }
  .rowlist b { color:var(--fg); font-weight:600; }

  /* Solved-challenge markers in the left catalog. */
  .card { position:relative; }
  .card.done { border-color:#27502b; background:#0f1c11; }
  .card.done h3 { color:var(--accent); }
  .card .tick { position:absolute; top:10px; right:10px; color:var(--accent);
    font-size:13px; font-weight:700; display:none; }
  .card.done .tick { display:block; }
  .card .lock { position:absolute; top:10px; right:10px;
    font-size:13px; display:none; }
  .card.locked { opacity:.5; border-style:dashed; cursor:not-allowed; }
  .card.locked:hover { border-color:var(--border); }
  .card.locked .lock { display:block; }
  .card.locked.done { opacity:.85; }
  .card.locked.done .lock { display:none; }
  .navhead .count .of { opacity:.55; }
  .navhead .count .all { color:var(--accent); }

  /* Editable leaderboard name in the Progress tab. */
  .namerow { display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    margin:0 0 16px; color:var(--muted); }
  .namerow .nm { color:var(--fg); font-weight:700; }
  .namerow input { font:inherit; font-size:13px; padding:5px 9px;
    background:var(--bg); color:var(--fg); border:1px solid var(--border);
    border-radius:6px; width:190px; }
  .namerow button { font-size:11px; padding:4px 10px; }
  .namerow .hintnote { font-size:11px; opacity:.7; flex-basis:100%; }

  /* Idle splash shown in the terminal pane before a challenge runs. */
  #idle { position:absolute; inset:0; display:none; overflow:auto;
    background:#000; border:1px solid var(--border); border-radius:6px;
    padding:18px 20px; color:#c8c8c8; font-size:13px; line-height:1.55; }
  #termwrap.idle #idle { display:block; }
  #termwrap.idle #term { visibility:hidden; }
  #idle pre { margin:0; }
  #idle .lo { color:var(--accent); font-weight:700; }
  #idle .k { color:#79c0ff; }
  #idle .v { color:#e6c275; }
  #idle .dim { color:var(--muted); }
  #idle .tip { margin-top:16px; padding:10px 14px; border-radius:6px;
    border:1px solid #5a431a; background:#211a0822; color:#e6c275;
    max-width:620px; }
  #idle .cur { color:var(--accent); animation:bl 1.05s steps(1) infinite; }
  @keyframes bl { 50% { opacity:0; } }
  /* In-browser authoring editor (no VM): overlays the terminal */
  #editor { position:absolute; inset:0; display:none;
    flex-direction:column; background:#0c0c0c;
    border:1px solid var(--border); border-radius:6px; overflow:hidden; }
  #termwrap.editing #editor { display:flex; }
  #termwrap.editing #term { visibility:hidden; }
  #editor .ehead { padding:8px 12px; font-size:12px; color:#79c0ff;
    border-bottom:1px solid var(--border); display:flex; gap:10px;
    align-items:center; flex-wrap:wrap; }
  #editor .ehead .epath { color:#e6c275; font-weight:700; }
  #editor .ehead .dim { color:var(--muted); }
  #editor textarea { flex:1; min-height:0; width:100%; resize:none;
    border:0; outline:0; background:#0c0c0c; color:#d8d8d8;
    font:13px/1.55 ui-monospace,Menlo,Consolas,monospace;
    padding:12px; tab-size:2; box-sizing:border-box; }
  .card .bwsr { display:inline-block; margin-left:6px; padding:0 5px;
    border-radius:4px; font-size:10px; background:#1b2a1b;
    color:#7ee787; border:1px solid #2ea04333; vertical-align:middle; }
  /* --- guided learning paths (web/paths.json) --- */
  #pathwrap { margin:0 0 14px; }
  #pathwrap > .phead { font-size:11px; letter-spacing:.08em;
    text-transform:uppercase; opacity:.6; margin:0 0 8px; }
  .pathcard { background:var(--panel); border:1px solid var(--border);
    border-radius:6px; padding:12px; margin-bottom:10px; }
  .pathcard .ptop { display:flex; align-items:center; gap:12px;
    cursor:pointer; border-radius:8px; padding:3px 4px; margin:-3px -4px 0;
    transition:border-color .14s, background-color .14s, box-shadow .14s,
      transform .14s, color .14s; }
  .ring { --pct:0; flex:0 0 auto; width:42px; height:42px;
    border-radius:50%; display:grid; place-items:center;
    background:conic-gradient(var(--accent) calc(var(--pct)*1%),
      var(--border) 0); }
  .ring > i { width:32px; height:32px; border-radius:50%;
    background:var(--panel); display:grid; place-items:center;
    font-size:10px; font-style:normal; color:var(--fg); }
  .pathcard .pmeta { flex:1; min-width:0; }
  .pathcard .pmeta b { display:block; }
  .pathcard .pmeta small { opacity:.65; }
  .pathcard .chev { opacity:.5; transition:transform .15s, color .15s, opacity .15s; }
  .pathcard.open .chev { transform:rotate(90deg); }
  .pathcard .ptop:hover, .pathcard .ptop:focus-visible {
    border-color:var(--accent);
    box-shadow:0 0 0 1px #3fb95055, 0 10px 24px #00000026;
    transform:translateY(-1px);
    outline:none;
  }
  .pathcard .ptop:hover .chev, .pathcard .ptop:focus-visible .chev {
    opacity:.95; color:var(--accent);
  }
  .pathcard .ptop:active { transform:translateY(0); }
  .pathcard.open .ptop {
    box-shadow:inset 0 0 0 1px #ffffff08, 0 10px 24px #0000001c;
  }
  .pathcard.open .ring { box-shadow:0 0 0 1px #3fb95044, 0 0 18px #3fb95022; }
  .pathcard .pbody { display:none; margin:10px 0 0;
    border-top:1px solid var(--border); padding-top:10px; }
  .pathcard.open .pbody { display:block; }
  .pathcard .pnar { font-size:12px; opacity:.75; margin:0 0 10px;
    line-height:1.5; }
  .pstep { display:flex; gap:9px; align-items:flex-start;
    padding:6px 4px; border-radius:5px; cursor:pointer; }
  .pstep:hover { background:var(--border); }
  .pstep.gone { opacity:.4; cursor:not-allowed; }
  .pstep .mark { flex:0 0 auto; width:18px; text-align:center;
    color:var(--accent); }
  .pstep .mark.todo { opacity:.4; color:var(--fg); }
  .pstep .ptxt { flex:1; min-width:0; font-size:13px; }
  .pstep .ptxt small { display:block; opacity:.6; font-size:11px; }
  @media (max-width: 1180px) {
    header { grid-template-columns:minmax(0,1fr) auto auto;
      grid-template-areas:
        "brand brand brand"
        "who modebar nav";
      align-items:end; }
    #who { justify-self:end; text-align:right; max-width:24ch; }
    .grow { display:none; }
    #modebar, #nav { width:auto; }
    #nav { margin-left:0; }
    #navmenu { left:0; right:auto; min-width:100%; }
    #panelnav { right:56px; min-width:200px; }
    main { grid-template-columns:1fr; height:auto; min-height:calc(100vh - 61px); }
    #catalog { border-right:0; border-bottom:1px solid var(--border); max-height:42vh; }
    body.play-mode #catalog { border-bottom:0; max-height:0; }
    body.leaderboard-mode #catalog { border-bottom:0; max-height:0; }
    #playdeck { margin-bottom:8px; }
    .playactions, .playrow { flex-direction:column; align-items:flex-start; }
    .playrow span:last-child { display:flex; gap:8px; }
    body.play-home #stage { padding:20px 16px 24px; }
    body.leaderboard-home #stage { padding:20px 16px 24px; }
    .playviz-grid, .playbars { grid-template-columns:1fr 1fr; }
    .playhero { grid-template-columns:1fr; }
    .playhome-aux { grid-template-columns:1fr; }
    .playstats { grid-template-columns:1fr 1fr; }
    .playhero-copy { max-width:none; }
    body.play-home .playtitle { font-size:34px; max-width:none; }
    .playhero-title { font-size:34px; max-width:none; }
    body.play-home .playsub { font-size:15px; }
    .leaderboardgrid, .leaderboardgrid.one { grid-template-columns:1fr; }
    .problemboard-head, .problemboard-head.compact { flex-direction:column; align-items:flex-start; }
    .problemboard-titleline { align-items:flex-start; }
  }
  @media (max-width: 700px) {
    header { grid-template-columns:1fr;
      grid-template-areas:
        "brand"
        "modebar"
        "nav"
        "who"; }
    #modebar, #nav, #who { width:100%; justify-self:stretch; }
    #who { text-align:left; max-width:none; padding-right:0; }
    /* let the pills wrap to a 2nd row at very narrow widths so labels like
       "Leaderboard" show in full instead of clipping/ellipsis */
    #modebar { flex-wrap:wrap; }
    #modebar button { flex:1 1 auto; min-width:92px; padding:10px 8px;
      font-size:12px; white-space:nowrap; }
    #nav { display:flex; justify-content:flex-start; }
  }

  .card.locked .lock { cursor: help; }

  /* Public feedback log (panel tab) */
  .fblog-intro { color:var(--fg); font-size:13px; line-height:1.6; margin:0 0 14px; }
  .fblog { padding:12px 0; border-bottom:1px solid var(--border); }
  .fblog:last-child { border-bottom:none; }
  .fblog-h { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:6px; }
  .fblog-where { color:var(--accent); font-weight:600; font-size:12px; }
  .fblog-when { color:var(--muted); font-size:11px; margin-left:auto; }
  .fblog-st { font-size:10px; text-transform:uppercase; letter-spacing:.4px; font-weight:700;
    padding:2px 7px; border-radius:10px; border:1px solid var(--border); color:var(--muted); }
  .fblog-st.implemented { color:#0d1117; background:var(--accent); border-color:var(--accent); }
  .fblog-st.rejected { color:var(--fg); border-color:#f0883e; }
  .fblog-st.open { color:#79c0ff; border-color:#79c0ff; }
  .fblog-msg { color:var(--fg); font-size:13px; line-height:1.5; white-space:pre-wrap;
    word-break:break-word; }
  .fblog-note { color:var(--muted); font-size:12px; line-height:1.5; margin-top:6px;
    padding:8px 10px; background:var(--bg); border-left:2px solid var(--accent);
    border-radius:0 4px 4px 0; }
  .fblog-note b { color:var(--fg); }