:root{
  --paper:#efede7; --panel:#f7f5f0; --ink:#17160f; --dim:#6e6a5e; --line:#d8d5cc;
  --signal:#1f3bff; --meter:#e0912a; --meter-soft:#f0d9b3;
  --disp:"Bricolage Grotesque",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.55;
  font-size:16px;letter-spacing:-.005em}
a{color:var(--signal)}
.mono{font-family:var(--mono);font-weight:400}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--dim);margin:0 0 18px}

/* masthead */
.mast{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;
  padding:20px 28px;border-bottom:1.5px solid var(--ink)}
.wordmark{font-family:var(--disp);font-weight:800;font-size:20px;letter-spacing:-.02em}
.wordmark span{color:var(--signal)}
.wordmark span::before{content:"·";margin:0 3px;color:var(--line)}
.mast-meta{font-size:11px;color:var(--dim);letter-spacing:.1em}

main{max-width:760px;margin:0 auto;padding:56px 28px 80px}
.view{display:block}
.view.hidden{display:none}
footer{border-top:1px solid var(--line);text-align:center;color:var(--dim);font-size:11px;
  letter-spacing:.12em;padding:22px}

/* type */
.display{font-family:var(--disp);font-weight:800;font-size:clamp(34px,6.4vw,60px);line-height:1.02;
  letter-spacing:-.03em;margin:0 0 22px}
.lede{font-size:18px;color:#3b382e;max-width:33em;margin:0 0 34px}
.note{font-size:13px;color:var(--dim)}

/* waveform — the signature */
.wave{display:flex;align-items:center;gap:3px;height:76px;width:100%}
.wave i{flex:1;min-width:2px;max-width:6px;height:var(--h,40%);background:var(--line);border-radius:1px;
  transform-origin:center;transform:scaleY(var(--s,1))}
.wave.hero{margin:6px 0 34px}
.wave.hero i{background:var(--ink)}
.wave.train{height:120px;margin:26px 0}
.wave.train i{background:var(--meter-soft)}
.wave.train i.on{background:var(--meter)}
@media (prefers-reduced-motion:no-preference){
  .wave.hero i{animation:rise .5s cubic-bezier(.2,.8,.2,1) backwards}
}
@keyframes rise{from{transform:scaleY(0)}to{transform:scaleY(1)}}

/* forms & buttons */
.inline-form{display:flex;gap:0;max-width:440px;border:1.5px solid var(--ink);border-radius:2px;overflow:hidden}
.inline-form input{flex:1;border:0;background:var(--panel);padding:15px 16px;font-size:16px;font-family:inherit;color:var(--ink)}
.inline-form input:focus{outline:none;background:#fff}
.btn{cursor:pointer;font-family:var(--mono);font-size:14px;border:1.5px solid var(--ink);background:var(--paper);
  color:var(--ink);padding:13px 22px;border-radius:2px;transition:.12s;letter-spacing:.02em}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn:focus-visible{outline:3px solid var(--signal);outline-offset:2px}
.btn.primary{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.primary:hover{background:#0a24e0;border-color:#0a24e0}
.btn.line{background:transparent}
.btn.lg{padding:16px 30px;font-size:15px}
.inline-form .btn{border:0;border-left:1.5px solid var(--ink);border-radius:0}

.field{display:block;margin-bottom:36px}
.field .eyebrow{margin-bottom:10px}
.name{width:100%;border:0;border-bottom:1.5px solid var(--ink);background:transparent;
  font-family:var(--disp);font-weight:600;font-size:26px;padding:6px 2px;color:var(--ink)}
.name:focus{outline:none;border-color:var(--signal)}
.acct{font-size:12px;color:var(--dim);margin-bottom:34px}

/* command "channels" */
.cmds-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cmds-head .eyebrow{margin:0}
.cmd{border:1px solid var(--line);border-radius:2px;
  background:var(--panel);padding:15px 16px;margin-bottom:12px}
.cmd-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cmd .lab{flex:1;border:0;background:transparent;font-family:var(--mono);font-size:15px;color:var(--ink);padding:4px 0}
.cmd .lab:focus{outline:none}
.cmd .rm{border:0;background:transparent;color:var(--dim);font-size:20px;cursor:pointer;line-height:1;padding:0 4px}
.cmd .rm:hover{color:var(--signal)}
.cmd .ph{width:100%;border:0;border-top:1px dashed var(--line);background:transparent;
  font-family:var(--sans);font-size:14px;color:#3b382e;padding:10px 0 0;resize:vertical;min-height:64px}
.cmd .ph:focus{outline:none}
#add-cmd{margin:2px 0 8px}
.train-row{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:26px;
  border-top:1.5px solid var(--ink);padding-top:24px}

/* progress */
.pct{font-family:var(--mono);font-size:34px;color:var(--ink)}
.pct span:last-child{color:var(--dim);font-size:20px}

/* result */
.readout{display:flex;align-items:baseline;gap:16px;margin:6px 0 30px;
  border-bottom:1.5px solid var(--ink);padding-bottom:22px}
.acc-num{font-family:var(--disp);font-weight:800;font-size:clamp(56px,12vw,96px);line-height:.9;letter-spacing:-.04em}
.acc-num::after{content:"%";font-size:.4em;color:var(--meter);margin-left:2px}
.acc-cap{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.channels{margin-bottom:30px}
.chan{display:grid;grid-template-columns:1fr 2fr auto;align-items:center;gap:14px;padding:9px 0;border-bottom:1px solid var(--line)}
.chan-name{font-family:var(--mono);font-size:14px}
.chan-meter{height:8px;background:var(--meter-soft);border-radius:1px;overflow:hidden}
.chan-meter i{display:block;height:100%;background:var(--meter)}
.chan-val{font-family:var(--mono);font-size:13px;color:var(--dim)}
.dl-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap}

/* misc */
.msg{font-family:var(--mono);font-size:13px;margin-top:16px;min-height:18px}
.msg.err{color:#c0392b} .msg.ok{color:var(--meter)}
.embed{margin-top:30px;font-size:14px;color:#3b382e;border-top:1px solid var(--line);padding-top:18px}
.embed summary{cursor:pointer;color:var(--signal);font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.embed p{margin:14px 0 8px}
pre{background:var(--ink);color:#e9e6dc;border-radius:2px;padding:16px;overflow-x:auto;
  font-family:var(--mono);font-size:13px;line-height:1.6}
pre .c{color:var(--meter)}
code{font-family:var(--mono);background:var(--panel);border:1px solid var(--line);border-radius:2px;padding:1px 6px;font-size:13px}
@media(max-width:520px){ main{padding:40px 20px 60px} .readout{flex-wrap:wrap} }