:root{
  --bg:#0d0d10; --bg-2:#15151a; --bg-3:#1d1d24;
  --line:#2b2b34; --line-2:#3a3a46;
  --fg:#ececed; --fg-2:#9c9caa; --fg-3:#6b6b78;
  --red:#e2312e; --red-dim:#8f1f1d;
  --green:#1db954;
  --amber:#e0a030;
  --radius:14px;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:15px/1.55 var(--sans);
  -webkit-font-smoothing:antialiased;
  padding-bottom:5rem;
}
a{color:var(--fg);text-decoration-color:var(--line-2);text-underline-offset:3px}
a:hover{text-decoration-color:var(--red)}
code{font:0.88em var(--mono);background:var(--bg-3);padding:.12em .38em;border-radius:5px}
.wrap{max-width:720px;margin:0 auto;padding:0 20px}

/* header */
.top{padding:clamp(2.5rem,8vw,5rem) 0 2rem}
h1{margin:0;font-size:clamp(2.4rem,9vw,3.4rem);letter-spacing:-.04em;font-weight:680}
.mark{position:relative}
.mark::after{
  content:"";position:absolute;left:0;right:-.06em;bottom:.12em;height:.1em;
  background:var(--red);border-radius:2px;
}
.tag{margin:.9rem 0 0;max-width:34em;color:var(--fg-2);font-size:1.02rem}

/* steps */
.step{
  border:1px solid var(--line);background:var(--bg-2);
  border-radius:var(--radius);padding:22px;margin:16px 0;
}
.step[hidden]{display:none}
.step-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.num{
  flex:none;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--bg-3);border:1px solid var(--line-2);
  font:600 13px/1 var(--mono);color:var(--fg-2);
}
.step.done .num{background:var(--red);border-color:var(--red);color:#fff}
.step h2{margin:0;font-size:1.06rem;font-weight:620;letter-spacing:-.01em}
.lead{margin:0 0 14px;color:var(--fg-2);font-size:.93rem}

/* dropzone */
.drop{
  border:1.5px dashed var(--line-2);border-radius:12px;
  padding:34px 20px;text-align:center;cursor:pointer;
  transition:border-color .15s,background .15s;
  background:var(--bg-3);
}
.drop:hover,.drop:focus-visible{border-color:var(--green);outline:none}
.drop.over{border-color:var(--green);background:#132a1c}
.drop.busy{opacity:.55;pointer-events:none}
.drop-inner strong{display:block;font-weight:560;margin-bottom:6px}
.drop-inner span{color:var(--fg-3);font-size:.88rem}

/* how-to */
.how{margin-top:14px;font-size:.9rem;color:var(--fg-2)}
.how summary{cursor:pointer;color:var(--fg-2);user-select:none}
.how summary:hover{color:var(--fg)}
.how ol{margin:10px 0 0;padding-left:1.3em;display:grid;gap:6px}

/* controls */
.controls{display:grid;gap:18px;margin-bottom:20px}
.ctl{display:grid;gap:7px}
.ctl-label{font-size:.85rem;color:var(--fg-2);font-weight:520}
.ctl-row{display:flex;align-items:center;gap:14px}
.ctl-row output{font:600 .92rem var(--mono);min-width:5.5ch;color:var(--red)}
.hint{display:block;font-size:.8rem;color:var(--fg-3);margin-top:3px}
input[type=range]{flex:1;accent-color:var(--red);height:22px}
.ctl.check{grid-template-columns:auto 1fr;align-items:start;gap:10px;cursor:pointer}
.ctl.check input{margin-top:3px;accent-color:var(--red);width:16px;height:16px}
.ctl.check b{font-weight:520;font-size:.93rem}

/* stats grid */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.stat{background:var(--bg-3);padding:13px 14px}
.stat .v{font:640 1.32rem/1.1 var(--mono);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.stat .k{font-size:.74rem;color:var(--fg-3);margin-top:4px;letter-spacing:.02em}
.stat.warn .v{color:var(--amber)}
.stat.good .v{color:var(--green)}

/* top artists */
.top-list{margin-top:16px;display:grid;gap:5px}
.ta{display:grid;grid-template-columns:1.6ch 1fr auto;gap:10px;align-items:center;font-size:.88rem}
.ta .i{color:var(--fg-3);font:.8rem var(--mono);text-align:right}
.ta .n{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta .c{font:.82rem var(--mono);color:var(--fg-3);font-variant-numeric:tabular-nums}
.ta .bar{grid-column:2/4;height:2px;background:var(--red-dim);border-radius:2px;margin-top:-3px}

/* buttons */
.btn{
  appearance:none;border:1px solid var(--line-2);background:var(--bg-3);color:var(--fg);
  font:540 .93rem var(--sans);padding:10px 18px;border-radius:9px;cursor:pointer;
  transition:background .13s,border-color .13s;
}
.btn:hover:not(:disabled){background:#25252e;border-color:#4a4a58}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:var(--red);border-color:var(--red);color:#fff;font-weight:580}
.btn.primary:hover:not(:disabled){background:#f0403d;border-color:#f0403d}
.btn.ghost{background:transparent}
.btn-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:16px}

/* generic note / rows */
.note{
  margin-top:14px;padding:11px 13px;border-radius:9px;font-size:.87rem;
  background:var(--bg-3);border:1px solid var(--line);color:var(--fg-2);
}
.note.err{border-color:var(--red-dim);background:#2a1414;color:#f0a9a7}
.note.warn{border-color:#5c4415;background:#2a2214;color:#e8c98a}
.note.ok{border-color:#1c5133;background:#122a1c;color:#9fdcb6}
.note b{color:var(--fg);font-weight:580}

.who{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.who .av{width:38px;height:38px;border-radius:50%;background:var(--bg-3);border:1px solid var(--line-2);object-fit:cover;flex:none}
.who .nm{font-weight:580}
.who .sub{font-size:.82rem;color:var(--fg-3)}
.who .spacer{flex:1}

/* choice cards */
.choices{display:grid;gap:10px;margin-top:6px}
.choice{
  display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:start;
  border:1px solid var(--line);background:var(--bg-3);border-radius:11px;padding:14px;cursor:pointer;
  transition:border-color .13s;
}
.choice:hover{border-color:var(--line-2)}
.choice:has(input:checked){border-color:var(--red);background:#22161a}
.choice input{margin-top:2px;accent-color:var(--red);width:16px;height:16px}
.choice .t{font-weight:560;font-size:.94rem}
.choice .d{font-size:.83rem;color:var(--fg-3);margin-top:4px}
.choice .d b{color:var(--fg-2);font-weight:560;font-variant-numeric:tabular-nums}

/* progress */
.bar-outer{height:7px;background:var(--bg-3);border-radius:4px;overflow:hidden;margin:14px 0 10px;border:1px solid var(--line)}
.bar-inner{height:100%;background:var(--red);width:0;transition:width .25s ease}
.bar-inner.done{background:var(--green)}

/* log */
.log{
  margin-top:14px;max-height:240px;overflow-y:auto;overscroll-behavior:contain;
  background:#0a0a0d;border:1px solid var(--line);border-radius:9px;padding:10px 12px;
  font:.78rem/1.65 var(--mono);color:var(--fg-2);
}
.log div{white-space:pre-wrap;word-break:break-word}
.log .t{color:var(--fg-3)}
.log .e{color:#f08a88}
.log .w{color:var(--amber)}
.log .s{color:#7fd8a0}

/* footer */
.foot{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--line);font-size:.83rem;color:var(--fg-3)}
.foot p{margin:.6rem 0;max-width:52em}
.foot .dim{color:var(--fg-3)}

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

/* Turnstile: слот создаётся по требованию и удаляется после проверки.
   В interaction-only виджет обычно невидим — подпись показываем только
   если проверка затянулась, то есть человеку и правда нужно что-то нажать. */
#ts-slot[hidden]{display:none}
#ts-slot{
  border:1px solid var(--line);background:var(--bg-2);
  border-radius:var(--radius);padding:16px 18px;margin:16px 0;
}
#ts-slot .ts-label{font-size:.86rem;color:var(--fg-2);margin-bottom:10px}
#ts-slot .ts-label[hidden]{display:none}