:root{
  --ground:#FBFBFD; --surface:#FFFFFF; --surface-2:#F3F3F8;
  --ink:#17171F; --ink-2:#4A4A5A; --muted:#7A7A8C;
  --rule:#E4E4EC; --rule-2:#D2D2DE;
  --accent:#6667AB; --accent-text:#54549B; --accent-soft:#6667AB22; --accent-ring:#6667AB55;
  --shadow:0 1px 2px #17171f0d, 0 8px 24px -16px #17171f33;
  --fd:"Elms Sans","Avenir Next",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --fb:"IBM Plex Serif",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --ground:#131318; --surface:#1B1B22; --surface-2:#23232C;
    --ink:#EDEDF2; --ink-2:#B8B8C6; --muted:#86869A;
    --rule:#2A2A34; --rule-2:#3A3A47;
    --shadow:0 1px 2px #0006, 0 10px 28px -18px #000a;
  }
}
:root[data-theme="dark"]{
  --ground:#131318; --surface:#1B1B22; --surface-2:#23232C;
  --ink:#EDEDF2; --ink-2:#B8B8C6; --muted:#86869A;
  --rule:#2A2A34; --rule-2:#3A3A47;
  --shadow:0 1px 2px #0006, 0 10px 28px -18px #000a;
}

*{box-sizing:border-box}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--fb); font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh;
}
button,input,textarea,select{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px; border-radius:4px}

.wrap{max-width:1180px; margin:0 auto; padding:20px 20px 40px;
      display:flex; flex-direction:column; gap:20px; min-height:100vh}
body.setup-view #setup{margin-top:auto; margin-bottom:auto}

/* ---------- header ---------- */
.top{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.brand{font-family:var(--fd); font-weight:700; font-size:19px; letter-spacing:-.01em;
       display:flex; align-items:center; gap:9px; margin-right:auto; color:inherit; text-decoration:none}
.brand .dot{width:13px;height:13px;border-radius:50%;background:var(--accent);flex:none}
.nav{display:flex; gap:3px; background:var(--surface-2); padding:3px; border-radius:11px}
.nav a{font-family:var(--fd); font-weight:500; font-size:14px; padding:8px 15px;
  border:0; background:transparent; border-radius:8px; cursor:pointer; color:var(--ink-2); text-decoration:none}
.nav a[aria-current="page"]{background:var(--surface); color:var(--ink);
  box-shadow:0 0 0 2px var(--accent), var(--shadow)}
.iconbtn{font-family:var(--fd); font-size:14px; font-weight:500; padding:9px 14px;
  background:var(--surface); border:1px solid var(--rule); border-radius:10px; cursor:pointer}
.iconbtn:hover{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft)}
.iconbtn-icon{padding:9px; display:inline-flex; align-items:center; justify-content:center}
.pop{animation:pop .3s cubic-bezier(.2,.9,.3,1)}
.reveal{animation:reveal .38s cubic-bezier(.22,.8,.25,1) both}
@keyframes reveal{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- stage ---------- */
.stage{
  background:var(--surface); border:1px solid var(--rule); border-radius:20px;
  flex:1; min-height:min(56vh,440px);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:32px 24px; position:relative; overflow:hidden; box-shadow:var(--shadow);
}
.name{
  font-family:var(--fd); font-weight:700; letter-spacing:-.03em; line-height:1.02;
  font-size:clamp(44px, 13vw, 168px); text-wrap:balance; word-break:break-word;
  color:var(--ink); max-width:100%;
}
.name.hit{animation:pop .34s cubic-bezier(.2,.9,.3,1)}
@keyframes pop{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:none}}
.stage.lit{box-shadow:0 0 0 3px var(--accent-ring), var(--shadow)}
.hint{font-family:var(--fb); font-size:clamp(15px,2.2vw,20px); color:var(--muted); max-width:34ch}

/* ---------- progress ---------- */
.progress{width:100%; height:8px; background:var(--surface-2); border:1px solid var(--rule);
          border-radius:999px; overflow:hidden}
.progress-fill{height:100%; width:0%; background:var(--accent); border-radius:999px;
               transition:width .25s ease}

/* ---------- controls ---------- */
.controls{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.pick{
  font-family:var(--fd); font-weight:600; font-size:clamp(17px,2.4vw,21px);
  padding:16px 40px; border:0; border-radius:14px; cursor:pointer;
  background:var(--accent); color:#fff; box-shadow:var(--shadow); flex:1 1 200px; max-width:340px;
}
.pick:hover{filter:brightness(1.07)}
.pick:active{transform:translateY(1px)}
.pick[disabled]{opacity:.45; cursor:not-allowed; filter:none}
.count{font-family:var(--fb); font-variant-numeric:tabular-nums; color:var(--ink-2); font-size:15px}
.count b{color:var(--accent-text); font-weight:600}
.spacer{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
.num{width:64px; padding:8px 10px; border:1px solid var(--rule); border-radius:9px; background:var(--surface-2)}
#timerMin,#timerSec{width:48px}
.kbd{font-family:var(--fd); font-size:12px; color:var(--muted); border:1px solid var(--rule);
     border-radius:6px; padding:2px 7px}

/* ---------- panels ---------- */
.panel{background:var(--surface); border:1px solid var(--rule); border-radius:16px;
       padding:20px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--shadow)}
.panel h2{font-family:var(--fd); font-size:17px; font-weight:600; margin:0; letter-spacing:-.01em}
.panel p{margin:0; color:var(--ink-2); font-size:15px; max-width:62ch}
textarea{
  width:100%; min-height:190px; resize:vertical; padding:14px 16px;
  background:var(--surface-2); border:1px solid var(--rule); border-radius:12px;
  font-family:var(--fb); font-size:16px; line-height:1.6;
}
textarea:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); outline:none}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.trust{font-size:14px; color:var(--muted); display:flex; align-items:center; gap:7px}
.trust svg{flex:none}

/* settings */
.setwrap{position:relative}
.setwrap::after{content:""; position:absolute; left:0; right:0; top:100%; height:10px}
.settings-pop{
  position:absolute; top:calc(100% + 10px); right:0; width:min(320px,88vw); z-index:60;
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.settings-pop:not(.hidden){opacity:1; visibility:visible; transform:none}
.setwrap:hover .settings-pop.hidden{
  display:flex !important; opacity:1; visibility:visible; transform:none;
}
.setrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between;
        padding:11px 0; border-bottom:1px solid var(--rule)}
.setrow:last-child{border-bottom:0}
.setrow > span{font-family:var(--fd); font-size:14.5px; font-weight:500}
.swatches{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.sw[aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 3px var(--ground) inset}
input[type=color]{width:34px;height:34px;padding:0;border:1px solid var(--rule);border-radius:8px;background:none;cursor:pointer}
.seg{display:flex; gap:2px; background:var(--surface-2); padding:3px; border-radius:10px}
.seg button{font-family:var(--fd);font-size:13.5px;padding:6px 13px;border:0;background:transparent;
            border-radius:7px;cursor:pointer;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}

/* groups */
.groups{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:14px; width:100%}
.gcard{background:var(--surface-2); border:1px solid var(--rule); border-radius:14px; padding:16px; text-align:left}
.gcard h3{font-family:var(--fd);font-size:14px;font-weight:600;margin:0 0 9px;color:var(--accent-text);
          letter-spacing:.04em;text-transform:uppercase}
.gcard ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.gcard li{font-size:16px}

/* timer */
.clock{font-family:var(--fd);font-weight:700;font-variant-numeric:tabular-nums;
       font-size:clamp(56px,17vw,190px);letter-spacing:-.04em;line-height:1}
.clock.done{color:var(--accent-text)}
.clock-digit{display:inline-block;width:1ch;text-align:center}
.clock-colon{display:inline-block}
.clock-sign{display:inline-block;margin-right:.08em}

/* interval timer: small running total above, big interval countdown below */
.interval{display:flex; flex-direction:column; align-items:center; gap:8px}
.interval-total{font-family:var(--fd); font-weight:500; font-variant-numeric:tabular-nums;
                font-size:clamp(16px,2.4vw,26px); color:var(--muted); letter-spacing:.01em}
.interval-total .clock-digit,.interval-total .clock-colon{display:inline}
.interval .clock{font-size:clamp(56px,15vw,170px)}
body.present .interval-total{font-size:clamp(22px,3vw,40px)}
body.present .interval .clock{font-size:clamp(80px,22vw,360px)}

/* order: numbered speaking order, sized to be read from the back of the room */
.order{width:100%; margin:0; padding:0 0 0 1.6em; text-align:left; columns:2; column-gap:32px;
       font-family:var(--fd); font-weight:600; font-size:clamp(18px,2.6vw,30px); line-height:1.45}
.order li{break-inside:avoid; padding:2px 0}
.order li::marker{color:var(--accent-text); font-variant-numeric:tabular-nums}
@media (min-width:1024px){ .order{columns:3} }
body.present .order{font-size:clamp(24px,3.4vw,44px)}

/* about: crawlable text below the tool, and the static text pages (404, privacy) */
.about{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px;
       padding-top:24px; border-top:1px solid var(--rule); color:var(--ink-2); font-size:15.5px}
.about h1,.prose h1{font-family:var(--fd); font-size:26px; font-weight:700; letter-spacing:-.02em; margin:0 0 10px; color:var(--ink)}
.about h2,.prose h2{font-family:var(--fd); font-size:17px; font-weight:600; margin:22px 0 8px; color:var(--ink)}
.about h3{font-family:var(--fd); font-size:15px; font-weight:600; margin:14px 0 4px; color:var(--ink)}
.about p,.prose p{margin:0 0 10px; max-width:62ch}
.about ol,.about ul,.prose ul{margin:0 0 10px; padding-left:1.3em; max-width:62ch}
.about li,.prose li{margin:4px 0}
.about a,.prose a,footer a{color:var(--accent-text); text-decoration-thickness:1px; text-underline-offset:2px}
.tools{list-style:none; padding:0}
/* collapsible remainder: spans both columns, two columns inside when open */
.about-more{grid-column:1 / -1; border-top:1px solid var(--rule); padding-top:14px}
.about-more summary{font-family:var(--fd); font-weight:600; font-size:15px; color:var(--ink); cursor:pointer;
                    list-style:none; display:flex; align-items:center; gap:8px; width:max-content}
.about-more summary::-webkit-details-marker{display:none}
.about-more summary::before{content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
                            transform:rotate(-45deg); transition:transform .15s ease; margin-left:2px}
.about-more[open] summary::before{transform:rotate(45deg)}
.about-more summary:hover{color:var(--accent-text)}
.about-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; padding-top:8px}
.about-col > h2:first-child{margin-top:4px}
.about pre{background:var(--surface-2); border:1px solid var(--rule); border-radius:10px; padding:12px 14px;
           font-size:13px; line-height:1.5; overflow-x:auto; white-space:pre-wrap; word-break:break-all; margin:0 0 10px}
.prose{gap:0; color:var(--ink-2)}
.muted{color:var(--muted); font-size:14px}
body.text-page .wrap{gap:24px}

/* ad slot — hidden in present mode */
.ad{border:1px dashed var(--rule-2); border-radius:14px; padding:18px; text-align:center;
    color:var(--muted); font-size:13px; background:var(--surface)}
.ad b{font-family:var(--fd); display:block; font-size:12px; letter-spacing:.1em;
      text-transform:uppercase; margin-bottom:5px; color:var(--muted)}

footer{font-size:13.5px; color:var(--muted); display:flex; gap:14px; flex-wrap:wrap; align-items:center}

.hidden{display:none !important}

/* ---------- present mode ---------- */
body.present{background:var(--ground)}
body.present .wrap{max-width:none; padding:0; height:100vh; gap:0}
body.present .top,
body.present .controls,
body.present .progress,
body.present .panel,
body.present .ad,
body.present .about,
body.present footer{display:none !important}
body.present .stage{border:0; border-radius:0; height:100vh; min-height:100vh; box-shadow:none; padding:24px}
body.present .name{font-size:clamp(64px, 19vw, 340px)}
body.present .clock{font-size:clamp(80px, 24vw, 400px)}
.exit{position:fixed; top:16px; right:16px; z-index:5; opacity:.25}
.exit:hover{opacity:1}
body:not(.present) .exit{display:none}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .wrap{padding:14px 14px 28px; gap:14px}
  /* Row one: brand pushed left, class and settings icons right. Row two: full-width nav. */
  .top{gap:10px}
  .brand{font-size:17px; order:0}
  #editBtn{order:1}
  .setwrap{order:2}
  .nav{order:3; width:100%}
  .nav a{flex:1; padding:10px 8px; text-align:center}
  #presentBtn{display:none}
  .about,.about-grid{grid-template-columns:1fr; gap:20px}
  .stage{min-height:38vh; border-radius:16px; padding:24px 16px}
  .pick{flex:1 1 100%; max-width:none; padding:18px 24px}
  .spacer{margin-left:0; width:100%}
  .spacer .iconbtn{flex:1}
  .kbd{display:none}
  .controls{gap:10px}
}
@media (min-width:721px) and (max-width:1024px){
  .stage{min-height:44vh}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
}