:root{
  --bg:#0F1420;         /* tab-room at night */
  --panel:#161D2D;
  --panel2:#1C2438;
  --edge:#2A3450;
  --edge-hover:#3A4460;
  --text:#EDEBE3;       /* warm stage-light ivory */
  --dim:#8B93A7;
  --accent:#FF5A47;     /* red pen, lit */
  --gold:#FFD166;       /* speaker points */
  --win:#44C97B;
  --paper:#FBFAF6;      /* the ballot stays physical paper */
  --ink:#1B2A4A;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg); color:var(--text);
  font-family:'Archivo',sans-serif; line-height:1.5;
  background-image:radial-gradient(ellipse 90% 50% at 50% -10%, rgba(255,209,102,.07), transparent 60%);
}
a{color:inherit}
.wrap{max-width:640px;margin:0 auto;padding:26px 16px 90px}

/* ---------- nav (shared header bar) ---------- */
.nav{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:6px 0 30px}
.nav a.wordmark{text-decoration:none}

/* ---------- brand lockup (icon + wordmark) ---------- */
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none}
.brand-icon{height:30px;width:30px;border-radius:22%;flex-shrink:0;display:block}

/* ---------- wordmark ---------- */
.wordmark{font-weight:900;font-variation-settings:'wdth' 76;font-size:26px;letter-spacing:-.01em;text-transform:uppercase}
.wordmark .tick{color:var(--accent)}
header{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:8px}
header .wordmark{font-size:30px}
.avg{font-family:'IBM Plex Mono';font-size:11px;color:var(--dim);text-align:right}
.avg b{color:var(--gold);font-size:15px}
.tagline{font-family:'IBM Plex Mono';font-size:12px;color:var(--dim);margin-bottom:26px}
.tagline em{color:var(--gold);font-style:normal}

/* ---------- hero (landing) ---------- */
.hero{padding:20px 0 46px}
.hero h1{font-weight:900;font-variation-settings:'wdth' 78;font-size:clamp(32px,7vw,50px);line-height:1.08;letter-spacing:-.01em;margin-bottom:18px}
.hero h1 em{color:var(--gold);font-style:normal}
.hero p.sub{font-family:'Archivo';font-size:16.5px;color:var(--dim);max-width:44ch;line-height:1.6;margin-bottom:30px}
.hero .go{width:auto;padding:16px 30px}

/* ---------- generic marketing section ---------- */
.section{padding:44px 0;border-top:1px solid var(--edge)}
.section .seceyebrow{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:18px}
.section h2{font-size:22px;font-weight:900;font-variation-settings:'wdth' 80;margin-bottom:10px}
.section p.lede{color:var(--dim);font-size:14.5px;max-width:52ch;line-height:1.6;margin-bottom:26px}

.steps{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:600px){.steps{grid-template-columns:repeat(3,1fr)}}
.stepcard{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:20px}
.stepcard .stepn{font-family:'IBM Plex Mono';color:var(--accent);font-size:12px;letter-spacing:.08em;margin-bottom:12px}
.stepcard h3{font-size:15px;font-weight:900;text-transform:uppercase;font-variation-settings:'wdth' 82;margin-bottom:8px}
.stepcard p{font-size:13.5px;color:var(--dim);line-height:1.55}

.ctaband{text-align:center;padding:54px 0 20px}
.ctaband h2{font-size:24px;font-weight:900;margin-bottom:20px;font-variation-settings:'wdth' 80}
.ctaband .go{width:auto;padding:16px 34px}

/* ---------- cards & labels ---------- */
.card{background:var(--panel);border:1px solid var(--edge);border-radius:16px;padding:18px 16px;margin-bottom:14px}
.eyebrow{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.18em;color:var(--accent);text-transform:uppercase;margin-bottom:12px}
label.fl{display:block;font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);margin:14px 0 6px}
input[type=text],textarea{
  width:100%;background:var(--panel2);border:1px solid var(--edge);border-radius:10px;
  padding:12px;font-family:'Archivo';font-size:15px;color:var(--text);
  transition:border-color .15s;
}
input[type=text]:hover,textarea:hover{border-color:var(--edge-hover)}
textarea{min-height:104px;resize:vertical}
input:focus,textarea:focus,button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
::placeholder{color:#5B6478}

/* ---------- pills ---------- */
.row{display:flex;gap:10px;flex-wrap:wrap}
.pills{display:flex;background:var(--panel2);border:1px solid var(--edge);border-radius:999px;padding:3px}
.pills button{
  font-family:'Archivo';font-weight:700;font-size:13px;padding:8px 18px;border:none;border-radius:999px;
  background:none;color:var(--dim);cursor:pointer;transition:color .15s,background-color .15s;
}
.pills button.on{background:var(--text);color:var(--bg)}
.pills button:not(.on):hover{color:var(--text)}
.pills.wide{width:100%}
.pills.wide button{flex:1}

/* ---------- judges ---------- */
.judges{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:500px){.judges{grid-template-columns:repeat(3,1fr)}}
.judge{
  text-align:left;background:var(--panel2);border:1px solid var(--edge);border-radius:12px;
  padding:12px;cursor:pointer;color:var(--text);font-family:'Archivo';position:relative;
  transition:border-color .15s,background-color .15s,transform .15s;
}
.judge .jname{font-weight:900;font-size:14px;font-variation-settings:'wdth' 82;text-transform:uppercase}
.judge .jdesc{font-size:12px;color:var(--dim);margin-top:4px;line-height:1.45}
.judge.on{border-color:var(--gold);background:linear-gradient(180deg, rgba(255,209,102,.10), rgba(255,209,102,.03))}
.judge.on .jname{color:var(--gold)}
.judge:not(.on):hover{border-color:var(--edge-hover);transform:translateY(-1px)}
.judge.preview{cursor:default}
.judge.preview:hover{transform:none;border-color:var(--edge)}

.hint{font-family:'IBM Plex Mono';font-size:11px;color:var(--dim);margin-top:10px;line-height:1.6}

/* ---------- primary buttons ---------- */
.go{
  width:100%;margin-top:6px;padding:16px;border:none;border-radius:12px;cursor:pointer;
  background:var(--accent);color:#fff;font-family:'Archivo';font-weight:900;font-size:16px;
  letter-spacing:.04em;text-transform:uppercase;font-variation-settings:'wdth' 85;
  box-shadow:0 6px 24px rgba(255,90,71,.25);
  transition:transform .15s ease,box-shadow .15s ease,background-color .15s ease;
  text-decoration:none;display:inline-block;text-align:center;
}
.go:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 10px 28px rgba(255,90,71,.32)}
.go:active:not(:disabled){transform:translateY(0)}
.go:disabled{background:#3A4258;box-shadow:none;cursor:wait}
.go.secondary{background:var(--panel2);border:1px solid var(--edge);color:var(--text);box-shadow:none}
.go.secondary:hover{background:var(--edge)}

/* ---------- attack ---------- */
.atk{background:var(--panel2);border:1px solid var(--edge);border-left:4px solid var(--accent);border-radius:12px;padding:14px;margin-top:4px}
.atk .atkname{font-weight:900;text-transform:uppercase;font-variation-settings:'wdth' 82;color:var(--accent);font-size:15px}
.atk p{margin-top:6px;font-size:14.5px;color:var(--text)}
.atk .who{font-family:'IBM Plex Mono';font-size:10px;letter-spacing:.14em;color:var(--dim);margin-bottom:6px}

/* ---------- voice deck ---------- */
.microw{display:flex;align-items:center;gap:14px;margin-top:4px}
.micbtn{
  width:74px;height:74px;border-radius:50%;border:none;cursor:pointer;flex-shrink:0;
  background:var(--accent);color:#fff;font-size:28px;position:relative;
  box-shadow:0 0 0 6px rgba(255,90,71,.15);transition:transform .15s ease;
}
.micbtn:hover{transform:scale(1.04)}
.micbtn.rec{animation:ring 1.4s infinite}
@keyframes ring{0%{box-shadow:0 0 0 6px rgba(255,90,71,.25)}70%{box-shadow:0 0 0 18px rgba(255,90,71,0)}100%{box-shadow:0 0 0 6px rgba(255,90,71,0)}}
.micside{flex:1}
.micstate{font-family:'IBM Plex Mono';font-size:11px;letter-spacing:.12em;color:var(--dim)}
.micstate.live{color:var(--accent)}
.clockline{display:flex;align-items:center;gap:10px;margin-top:4px}
.clock{font-family:'IBM Plex Mono';font-weight:600;font-size:24px}
.clock.low{color:var(--accent)}
.tbtn{border:1px solid var(--edge);background:var(--panel2);border-radius:8px;font-family:'IBM Plex Mono';font-size:11px;padding:6px 10px;cursor:pointer;color:var(--dim);transition:border-color .15s,color .15s}
.tbtn:hover{border-color:var(--edge-hover);color:var(--text)}

.hud{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.stat{background:var(--panel2);border:1px solid var(--edge);border-radius:10px;padding:10px 6px;text-align:center}
.stat .hv{font-family:'IBM Plex Mono';font-weight:600;font-size:19px;display:block;color:var(--text)}
.stat .hv.warn{color:var(--accent)}
.stat .hv.good{color:var(--win)}
.stat .hl{font-family:'IBM Plex Mono';font-size:8.5px;letter-spacing:.12em;color:var(--dim)}

.transcript{
  margin-top:12px;min-height:88px;max-height:180px;overflow-y:auto;border:1px dashed var(--edge);
  border-radius:10px;padding:12px;font-size:14.5px;background:rgba(0,0,0,.18);color:var(--text)
}
.transcript:empty::before{content:'Live transcript appears here as you speak — or tap to type.';color:#5B6478;font-family:'IBM Plex Mono';font-size:11.5px}

/* ---------- loading + error callouts ---------- */
.loading{display:inline-flex;align-items:center;gap:8px;color:var(--dim);font-family:'IBM Plex Mono';font-size:11.5px}
.loading .dot{width:5px;height:5px;border-radius:50%;background:var(--gold);animation:pulse 1.1s infinite ease-in-out}
.loading .dot:nth-child(2){animation-delay:.15s}
.loading .dot:nth-child(3){animation-delay:.3s}
@keyframes pulse{0%,80%,100%{opacity:.25;transform:scale(.8)}40%{opacity:1;transform:scale(1)}}
.callout{display:block;padding:10px 12px;border-radius:10px;font-family:'IBM Plex Mono';font-size:11.5px;line-height:1.55}
.callout.error{background:rgba(255,90,71,.1);border:1px solid rgba(255,90,71,.35);color:#FF8478}

/* ---------- ballot: physical paper on a dark desk ---------- */
.ballot{
  margin-top:6px;background:var(--paper);color:var(--ink);border-radius:4px;
  font-family:'IBM Plex Mono',monospace;
  box-shadow:0 18px 50px rgba(0,0,0,.55), 0 2px 0 rgba(255,255,255,.06) inset;
  transform:rotate(-.4deg);
}
.ballot .bhead{border-bottom:2px solid var(--ink);padding:12px 14px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.ballot .btitle{font-size:10px;letter-spacing:.14em}
.stamp{font-family:'Archivo';font-weight:900;text-transform:uppercase;font-variation-settings:'wdth' 80;font-size:17px;padding:3px 10px;border:3px solid;transform:rotate(-3deg)}
.stamp.won{color:#1E6E45;border-color:#1E6E45}
.stamp.lost{color:#C7382C;border-color:#C7382C}
.bmeta{display:flex;border-bottom:2px solid var(--ink);flex-wrap:wrap}
.bmeta div{flex:1;min-width:86px;padding:9px 12px;font-size:10px}
.bmeta div + div{border-left:2px solid var(--ink)}
.bmeta .big{font-size:19px;font-weight:600}
.rfd,.delivery{padding:13px 14px;font-size:13px;line-height:1.65;border-bottom:2px solid var(--ink);white-space:pre-wrap}
.rfd::before{content:'RFD:';display:block;font-weight:600;letter-spacing:.1em;margin-bottom:6px;color:#C7382C}
.delivery::before{content:'DELIVERY NOTES:';display:block;font-weight:600;letter-spacing:.1em;margin-bottom:6px;color:#C7382C}
.drills{padding:13px 14px}
.drills h3{font-size:10px;letter-spacing:.14em;margin-bottom:8px;color:#C7382C}
.drills li{font-size:13px;margin:0 0 8px 18px;line-height:1.55}

/* ---------- history ---------- */
.hrow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--edge);font-family:'IBM Plex Mono';font-size:12px}
.hrow:last-child{border-bottom:none}
.hrow .hjudge{color:var(--dim);font-size:10.5px}
.hrow .hres.w{color:var(--win)} .hrow .hres.l{color:var(--accent)}
.hrow .hspk{color:var(--gold)}

.status{font-family:'IBM Plex Mono';font-size:11.5px;color:var(--dim);margin-top:10px;min-height:14px}
.err{color:var(--accent)}
.hidden{display:none}
.sitefooter{margin-top:50px;font-family:'IBM Plex Mono';font-size:10.5px;color:#5B6478;line-height:1.7;border-top:1px solid var(--edge);padding-top:22px}
.sitefooter a{color:var(--dim)}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}