:root{
  --bg:#000; --fg:#fff; --muted:#8a8a8a; --line:#2a2a2a; --dim:#161616; --mid:#444;
  --pad:clamp(20px,5vw,56px);
}
*{box-sizing:border-box;margin:0}
html{background:var(--bg);color:var(--fg);font:16px/1.5 "Helvetica Neue",Helvetica,Arial,system-ui,sans-serif;-webkit-text-size-adjust:100%}
body{min-height:100svh;display:flex;flex-direction:column;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:4px}
:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.top,.foot{display:flex;align-items:center;gap:16px;padding:20px var(--pad);font-size:14px}
.brand{font-weight:700;letter-spacing:.02em}
.links{display:flex;gap:24px;flex-wrap:wrap}
.foot{margin-top:auto;border-top:1px solid var(--line);color:var(--muted)}
.foot a:hover{color:var(--fg)}

main{flex:1;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,4vw,40px);padding:clamp(24px,6vw,72px) var(--pad);max-width:1200px;width:100%;margin:0 auto}

.mark{display:flex;align-items:baseline;font-weight:800;font-size:clamp(120px,34vw,360px);line-height:.8;letter-spacing:-.06em;margin-left:-.04em}
.mark .slash{color:var(--muted);font-weight:200;margin:0 .02em;transform:skewX(-8deg)}

/* 8 шагов: 5 активных (ритм 5/8) */
.steps{display:grid;grid-template-columns:repeat(8,1fr);gap:clamp(6px,1.2vw,14px)}
.steps i{display:block;height:clamp(10px,1.8vw,18px);background:var(--dim)}
.steps i.on{background:var(--mid)}
.steps i.hit{background:var(--fg)}
.steps i.cur{outline:1px solid var(--fg)}

.player{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(16px,3vw,32px);border:1px solid var(--fg);padding:clamp(16px,3vw,28px)}
.play{width:clamp(72px,12vw,104px);aspect-ratio:1;border:0;border-radius:50%;background:var(--fg);color:var(--bg);cursor:pointer;display:grid;place-items:center;transition:transform .15s}
.play:active{transform:scale(.94)}
.play[aria-pressed="true"]{background:var(--bg);color:var(--fg);box-shadow:inset 0 0 0 2px var(--fg)}
.play svg{width:42%;fill:currentColor}
.ic-stop{display:none}
.play[aria-pressed="true"] .ic-play{display:none}
.play[aria-pressed="true"] .ic-stop{display:block}
.np{min-width:0}
.np-label{color:var(--muted);font-size:14px}
.np-track{font-size:clamp(18px,3.2vw,30px);font-weight:700;line-height:1.2;margin:2px 0 4px;overflow-wrap:anywhere}
.np-state{color:var(--muted);font-size:14px}
.vol input{width:clamp(90px,14vw,160px);accent-color:#fff}

@media (max-width:640px){
  .player{grid-template-columns:auto 1fr}
  .vol{grid-column:1/-1}
  .vol input{width:100%}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}