:root{
    /* palette based on PostHog's visual identity: warm cream canvas,
       olive-charcoal ink, a single saturated amber accent, flat surfaces */
    --ink:#23251D;
    --ink-soft:#4D4F46;
    --ink-faint:#9B9C92;
    --paper:#EEEFE9;
    --paper-raised:#FFFFFF;
    --surface-soft:#E5E7E0;
    --line:#BFC1B7;
    --accent:#F7A501;
    --accent-deep:#DD9001;
    --accent-ink:#23251D;
    --good:#2C8C66;
    --good-bg:#D9EDDF;
    --bad:#CD4239;
    --bad-bg:#F7D6D3;
    --pending:#7C44A6;
    --pending-bg:#E7D8EE;
    --info:#2C84E0;
    --info-bg:#DCEAF6;
    --warn:#DD9001;
    --warn-bg:#FBEBC7;
    --focus-ring: rgba(44,132,224,0.55);
    /* PostHog uses flat surfaces with hairline borders, no elevation */
    --shadow: none;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-full: 9999px;
    /* the scoreboard bars are a fixed dark "surface dark" look in both
       themes, matching the olive-charcoal PostHog uses for code blocks */
    --bar-bg:#23251D;
    --bar-ink:#F5F5F0;
    --bar-ink-dim:#9B9C92;
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --ink:#F1F1EA;
      --ink-soft:#C7C8BE;
      --ink-faint:#8B8C82;
      --paper:#15160F;
      --paper-raised:#1F2116;
      --surface-soft:#262819;
      --line:#3A3C2E;
      --accent:#FFB627;
      --accent-deep:#FFC857;
      --accent-ink:#23190A;
      --good:#4CBE8B;
      --good-bg:#16311F;
      --bad:#E2776C;
      --bad-bg:#3A1712;
      --pending:#B98CDB;
      --pending-bg:#2E1F3A;
      --info:#6FA8E8;
      --info-bg:#16283A;
      --warn:#FFC857;
      --warn-bg:#3A2C0C;
      --focus-ring: rgba(111,168,232,0.6);
      --shadow: none;
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --ink:#F1F1EA;
    --ink-soft:#C7C8BE;
    --ink-faint:#8B8C82;
    --paper:#15160F;
    --paper-raised:#1F2116;
    --surface-soft:#262819;
    --line:#3A3C2E;
    --accent:#FFB627;
    --accent-deep:#FFC857;
    --accent-ink:#23190A;
    --good:#4CBE8B;
    --good-bg:#16311F;
    --bad:#E2776C;
    --bad-bg:#3A1712;
    --pending:#B98CDB;
    --pending-bg:#2E1F3A;
    --info:#6FA8E8;
    --info-bg:#16283A;
    --warn:#FFC857;
    --warn-bg:#3A2C0C;
    --focus-ring: rgba(111,168,232,0.6);
    --shadow: none;
    color-scheme: dark;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--paper);
    color:var(--ink);
    font-family:'IBM Plex Sans',system-ui,-apple-system,sans-serif;
    font-size:16px;
    line-height:1.5;
    min-height:100vh;
    overflow-x:hidden;
  }
  #app{min-height:100vh;display:flex;flex-direction:column;}
  h1,h2,h3{font-family:'IBM Plex Sans',system-ui,sans-serif;font-weight:700;letter-spacing:-0.01em;text-wrap:balance;margin:0;}
  .mono{font-family:'IBM Plex Mono',ui-monospace,'Source Code Pro',monospace;font-variant-numeric:tabular-nums;}
  a{color:var(--accent-deep);}
  button{font-family:inherit;}
  .wrap{max-width:760px;margin:0 auto;padding:1.25rem;width:100%;}
  .wrap-wide{max-width:980px;margin:0 auto;padding:1.25rem;width:100%;}

  /* buttons */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;gap:0.4rem;
    padding:0.65rem 1.1rem;border-radius:var(--radius-md);border:1px solid var(--line);
    background:var(--surface-soft);color:var(--ink);font-size:0.95rem;font-weight:600;
    text-decoration:none;
    cursor:pointer;transition:transform 0.08s ease, border-color 0.15s ease;
  }
  .btn:hover{border-color:var(--accent);}
  .btn:active{transform:scale(0.98);}
  .btn:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px;}
  .btn-accent{background:var(--accent);border-color:var(--accent-deep);color:var(--accent-ink);}
  .btn-accent:hover{background:var(--accent-deep);}
  .btn-ghost{background:transparent;border-color:transparent;color:var(--ink-soft);}
  .btn-ghost:hover{color:var(--ink);border-color:var(--line);}
  .btn-danger{color:var(--bad);}
  .btn-sm{padding:0.4rem 0.75rem;font-size:0.85rem;border-radius:var(--radius-sm);}
  .btn-block{width:100%;}
  .btn-row{display:flex;gap:0.6rem;flex-wrap:wrap;}
  .btn-pill{border-radius:var(--radius-full);padding:0.75rem 1.5rem;}

  /* cards */
  .card{
    background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md);
    padding:1.25rem;box-shadow:var(--shadow);
  }
  .stack{display:flex;flex-direction:column;gap:1rem;}

  /* role picker */
  .picker-screen{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1.25rem;gap:2rem;text-align:center;}
  .picker-title{font-size:clamp(1.8rem,6vw,2.6rem);}
  .picker-sub{color:var(--ink-soft);max-width:32ch;}
  .picker-choices{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:640px;}
  @media (max-width:520px){.picker-choices{grid-template-columns:1fr;}}
  .picker-card{
    background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.75rem 1.25rem;
    cursor:pointer;text-align:center;box-shadow:var(--shadow);transition:border-color .15s ease, transform .08s ease;
  }
  .picker-card:hover{border-color:var(--accent);}
  .picker-card:active{transform:scale(0.99);}
  .picker-emoji{font-size:2.4rem;display:block;margin-bottom:0.6rem;}
  .picker-card h2{font-size:1.25rem;margin-bottom:0.35rem;}
  .picker-card p{color:var(--ink-soft);font-size:0.9rem;margin:0;}

  /* top bars — a fixed dark "surface dark" look, intentionally constant across themes */
  .adminbar{background:var(--bar-bg);color:var(--bar-ink);border-bottom:1px solid rgba(0,0,0,0.4);}
  .adminbar-inner{max-width:980px;margin:0 auto;padding:1.1rem 1.25rem;display:flex;flex-wrap:wrap;gap:0.75rem;align-items:center;justify-content:space-between;}
  .adminbar h1{color:var(--bar-ink);font-size:1.4rem;}
  .adminbar .eyebrow-dim{color:var(--bar-ink-dim);}
  .adminbar .btn{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.18);color:var(--bar-ink);}
  .adminbar .btn:hover{border-color:var(--accent);}
  .linkbox{display:flex;gap:0.5rem;align-items:center;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.14);border-radius:var(--radius-md);padding:0.5rem 0.65rem;flex:1;min-width:220px;}
  .linkbox input{flex:1;min-width:0;background:transparent;border:none;color:var(--bar-ink);font-family:'IBM Plex Mono',monospace;font-size:0.82rem;}
  .linkbox input:focus{outline:none;}

  .teambar{position:sticky;top:0;z-index:5;background:var(--bar-bg);color:var(--bar-ink);box-shadow:var(--shadow);border-bottom:1px solid rgba(0,0,0,0.4);}
  .teambar-inner{max-width:760px;margin:0 auto;padding:0.85rem 1.25rem;display:flex;align-items:center;justify-content:space-between;gap:0.75rem;}
  .teambar .name{font-family:'IBM Plex Sans';font-weight:700;font-size:1.1rem;color:var(--bar-ink);}
  .teambar .score{font-size:1.3rem;font-weight:700;color:var(--accent);}
  .teambar .sub{font-size:0.75rem;color:var(--bar-ink-dim);}
  .teambar .btn-ghost{color:var(--bar-ink-dim);}

  /* banners / toast */
  .banner{padding:0.7rem 1.25rem;font-size:0.88rem;text-align:center;}
  .banner-warn{background:var(--warn-bg);color:var(--warn);}
  .banner-block{background:var(--bad-bg);color:var(--bad);}
  #qz-toast{position:fixed;bottom:1.25rem;left:50%;transform:translateX(-50%) translateY(10px);
    background:var(--ink);color:var(--paper);padding:0.6rem 1rem;border-radius:var(--radius-md);font-size:0.85rem;
    box-shadow:var(--shadow);opacity:0;transition:opacity .2s ease, transform .2s ease;pointer-events:none;z-index:50;}
  #qz-toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

  /* section headers */
  .section-head{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;margin-bottom:0.9rem;}
  .section-head h2{font-size:1.15rem;}
  .eyebrow{font-size:0.75rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--ink-faint);font-weight:700;}

  /* question cards (admin list) */
  .qrow{display:flex;gap:0.85rem;align-items:flex-start;padding:0.85rem 0;border-bottom:1px solid var(--line);}
  .qrow:last-child{border-bottom:none;}
  .qnum{font-family:'IBM Plex Mono';font-weight:700;color:var(--ink-faint);min-width:2ch;padding-top:0.15rem;}
  .qrow-body{flex:1;min-width:0;}
  .qrow-body .qtext{font-weight:600;margin-bottom:0.3rem;}
  .qrow-body .qmeta{color:var(--ink-soft);font-size:0.85rem;}
  .badge{display:inline-flex;align-items:center;padding:0.15rem 0.55rem;border-radius:var(--radius-full);font-size:0.72rem;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;}
  .badge-mc{background:var(--info-bg);color:var(--info);}
  .badge-open{background:var(--pending-bg);color:var(--pending);}

  /* forms */
  .field{display:flex;flex-direction:column;gap:0.35rem;margin-bottom:0.9rem;}
  .field label{font-size:0.85rem;font-weight:600;color:var(--ink-soft);}
  .field input[type="text"], .field input[type="password"], .field textarea, .field input[type="number"]{
    border:1px solid var(--line);border-radius:var(--radius-sm);padding:0.6rem 0.7rem;font-size:0.95rem;
    background:var(--paper);color:var(--ink);font-family:inherit;
  }
  .field input[type="text"]:focus, .field input[type="password"]:focus, .field textarea:focus, .field input[type="number"]:focus{outline:3px solid var(--focus-ring);border-color:var(--accent);}
  .radio-toggle{display:flex;gap:0.6rem;margin-bottom:1rem;position:relative;}
  .radio-toggle label{
    flex:1;display:flex;align-items:center;justify-content:center;gap:0.4rem;padding:0.55rem;border:1px solid var(--line);
    border-radius:var(--radius-sm);cursor:pointer;font-weight:600;font-size:0.88rem;color:var(--ink-soft);
  }
  .radio-toggle input{position:absolute;opacity:0;pointer-events:none;}
  .radio-toggle input:checked + label{border-color:var(--accent-deep);background:var(--warn-bg);color:var(--ink);}
  .fields-mc{flex-direction:column;gap:0.6rem;}
  .opt-row{display:flex;gap:0.5rem;align-items:center;}
  .opt-row input[type="text"]{flex:1;}
  .opt-radio{width:1.15rem;height:1.15rem;accent-color:var(--good);flex:none;}

  /* scoreboard */
  .board{width:100%;border-collapse:collapse;}
  .board th{text-align:left;font-size:0.72rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--ink-faint);padding:0 0.5rem 0.5rem;}
  .board td{padding:0.55rem 0.5rem;border-top:1px solid var(--line);}
  .board tr:first-child td{border-top:none;}
  .board .rank{font-family:'IBM Plex Mono';color:var(--ink-faint);width:2ch;}
  .board .gname{font-weight:700;}
  .board .score{font-family:'IBM Plex Mono';font-weight:700;font-size:1.05rem;color:var(--accent-deep);}
  .board .pend{color:var(--pending);font-size:0.8rem;}
  .empty{color:var(--ink-faint);font-size:0.9rem;padding:0.75rem 0;text-align:center;}

  /* grading */
  .gradecard{border:1px solid var(--line);border-radius:var(--radius-md);padding:0.9rem;margin-bottom:0.75rem;background:var(--paper);}
  .gradecard .who{font-weight:700;font-size:0.9rem;}
  .gradecard .qtext{color:var(--ink-soft);font-size:0.85rem;margin:0.25rem 0 0.5rem;}
  .given{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-sm);padding:0.6rem 0.75rem;font-size:0.9rem;margin-bottom:0.6rem;}
  .gradecard .given{background:var(--paper-raised);}
  .gradecard .model{font-size:0.8rem;color:var(--ink-faint);margin-bottom:0.6rem;}
  .grade-btns{display:flex;gap:0.5rem;}
  .grade-btn{flex:1;padding:0.45rem;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--paper-raised);font-weight:700;font-size:0.85rem;cursor:pointer;}
  .grade-btn.good.active{background:var(--good-bg);border-color:var(--good);color:var(--good);}
  .grade-btn.bad.active{background:var(--bad-bg);border-color:var(--bad);color:var(--bad);}

  /* homepage */
  .home{min-height:100vh;display:flex;flex-direction:column;}
  .home-hero{background:var(--bar-bg);color:var(--bar-ink);padding:4rem 1.25rem 3.5rem;text-align:center;}
  .home-hero-inner{max-width:640px;margin:0 auto;}
  .home-hero .eyebrow{color:var(--bar-ink-dim);}
  .home-hero h1{color:var(--bar-ink);font-weight:800;letter-spacing:-0.02em;font-size:clamp(2rem,6vw,2.8rem);margin:0.5rem 0 0.9rem;}
  .home-sub{color:var(--bar-ink-dim);font-size:1.05rem;max-width:46ch;margin:0 auto;}

  .home-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;padding-top:2.5rem;padding-bottom:1rem;}
  @media (max-width:720px){.home-steps{grid-template-columns:1fr;}}
  .home-step{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.5rem 1.25rem;box-shadow:var(--shadow);}
  .home-step-num{font-family:'IBM Plex Mono',monospace;font-weight:700;color:var(--accent-deep);font-size:1.4rem;margin-bottom:0.5rem;}
  .home-step h2{font-size:1.05rem;margin-bottom:0.4rem;}
  .home-step p{color:var(--ink-soft);font-size:0.9rem;margin:0;}

  .home-cta{padding-top:1.5rem;padding-bottom:2.5rem;flex:1;}
  .home-cta-card{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex-wrap:wrap;}
  .home-cta-text h2{font-size:1.2rem;margin:0.3rem 0 0.4rem;}
  .home-cta-text p{color:var(--ink-soft);font-size:0.9rem;margin:0;max-width:44ch;}
  .home-note{text-align:center;color:var(--ink-faint);font-size:0.85rem;margin-top:1.25rem;}

  /* live question control (admin) */
  .live-panel{border-color:var(--accent-deep);}
  .live-timer-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:0.25rem;}
  .live-timer{font-size:2.2rem;font-weight:700;color:var(--accent-deep);}
  .live-timer.urgent{color:var(--bad);}
  .live-timer.expired{color:var(--ink-faint);}
  .live-progress-count{color:var(--ink-soft);font-size:0.9rem;}

  /* live countdown (group view) */
  .live-countdown{
    display:inline-flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:700;
    font-family:'IBM Plex Mono',monospace;
    color:var(--warn);background:var(--warn-bg);border-radius:var(--radius-md);padding:0.3rem 0.75rem;margin-bottom:0.75rem;
  }
  .live-countdown.urgent{color:var(--bad);background:var(--bad-bg);}
  .live-countdown.expired{color:var(--ink-faint);background:var(--paper);}

  /* group play */
  .progress-wrap{height:6px;border-radius:var(--radius-full);background:var(--line);overflow:hidden;margin-top:0.35rem;}
  .progress-bar{height:100%;background:var(--accent);border-radius:var(--radius-full);transition:width .3s ease;}
  .qcard{background:var(--paper-raised);border:1px solid var(--line);border-radius:var(--radius-md);padding:1.1rem;box-shadow:var(--shadow);}
  .qcard .qtext{font-weight:600;font-size:1.05rem;margin-bottom:0.85rem;}
  .option-btn{
    display:flex;align-items:center;gap:0.6rem;width:100%;text-align:left;padding:0.7rem 0.85rem;margin-bottom:0.5rem;
    border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--paper);color:var(--ink);font-size:0.95rem;
    cursor:pointer;transition:border-color .12s ease, background .12s ease;
  }
  .option-btn:last-child{margin-bottom:0;}
  .option-btn:hover{border-color:var(--accent);}
  .option-btn .letter{font-family:'IBM Plex Mono';font-weight:700;color:var(--ink-faint);width:1.4rem;flex:none;}
  .option-btn.selected{border-color:var(--accent-deep);}
  .option-btn.correct{background:var(--good-bg);border-color:var(--good);color:var(--good);}
  .option-btn.correct .letter{color:var(--good);}
  .option-btn.wrong{background:var(--bad-bg);border-color:var(--bad);color:var(--bad);}
  .option-btn.wrong .letter{color:var(--bad);}
  .option-btn.locked{pointer-events:none;}
  .option-btn.locked:not(.selected){opacity:0.55;}
  .status-pill{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.8rem;font-weight:700;padding:0.25rem 0.6rem;border-radius:var(--radius-full);margin-top:0.6rem;}
  .status-pill.pending{background:var(--pending-bg);color:var(--pending);}
  .status-pill.good{background:var(--good-bg);color:var(--good);}
  .status-pill.bad{background:var(--bad-bg);color:var(--bad);}

  details.leaderboard summary{cursor:pointer;font-weight:700;padding:0.5rem 0;list-style:none;}
  details.leaderboard summary::-webkit-details-marker{display:none;}
  details.leaderboard summary::before{content:"▸ ";color:var(--accent-deep);}
  details.leaderboard[open] summary::before{content:"▾ ";}

  footer.qz-foot{text-align:center;color:var(--ink-faint);font-size:0.78rem;padding:2rem 1rem 2.5rem;}

  @media (prefers-reduced-motion: reduce){*{transition:none !important;}}