:root{
  --bg:#10131f;
  --panel:rgba(255,255,255,.045);
  --line:rgba(255,255,255,.13);
  --text:#f6f3ee;
  --text-2:rgba(246,243,238,.68);
  --text-3:rgba(246,243,238,.45);
  --accent:#ffb457;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --serif:'Instrument Serif',Georgia,'Times New Roman',serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--text); font-family:var(--sans);
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(120% 90% at 50% 0%, #1a2036 0%, #10131f 62%, #0b0d16 100%);
}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:6px}
button{font-family:inherit; color:inherit}

.page{min-height:100%; display:flex; flex-direction:column}

/* ---------- top bar ---------- */
.bar{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:max(14px, env(safe-area-inset-top)) 20px 0; flex:none;
}
.home,.icon{
  display:inline-flex; align-items:center; gap:7px; height:38px;
  color:var(--text); text-decoration:none; font:500 14px/1 var(--sans);
  background:var(--panel); border:1px solid var(--line); border-radius:999px;
  cursor:pointer; transition:background .15s, border-color .15s;
}
.home{padding:0 14px 0 10px}
.home span{font-family:var(--serif); font-size:18px; letter-spacing:.01em}
.icon{width:38px; justify-content:center; padding:0}
.home:hover,.icon:hover{background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.28)}

/* ---------- layout ---------- */
main{
  flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) 336px;
  gap:24px; padding:10px 20px max(18px, env(safe-area-inset-bottom));
}
.stage{display:flex; flex-direction:column; min-height:0; min-width:0}
.titleblock{flex:none; padding:6px 4px 10px; max-width:600px}
.kicker{font-size:11.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase; color:var(--text-3)}
h1{
  font-family:var(--serif); font-weight:400; font-size:clamp(34px, 4.6vw, 62px);
  line-height:.98; letter-spacing:-.01em; margin:4px 0 8px;
}
.sub{font-size:14.5px; line-height:1.55; color:var(--text-2); max-width:52ch}
.sub em{color:var(--text); font-style:italic; font-family:var(--serif); font-size:17px}
.wheelwrap{flex:1; min-height:0; position:relative}
#wheel{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none; cursor:pointer}
.readout{
  flex:none; text-align:center; padding:8px 4px 0; min-height:22px;
  font-size:13px; color:var(--text-2); font-variant-numeric:tabular-nums;
}
.readout b{color:var(--text); font-weight:500}
.readout .mn{color:var(--accent); font-family:var(--serif); font-size:16px; font-style:italic}

/* ---------- deck ---------- */
.deck{
  display:flex; flex-direction:column; gap:14px; overflow:auto; min-height:0;
  padding:16px; border-radius:18px;
  background:rgba(255,255,255,.04); border:1px solid var(--line);
}
.lbl{display:block; font-size:11.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3)}

.transport{display:flex; align-items:center; gap:12px}
.play{
  display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 18px 0 15px;
  border:0; border-radius:999px; cursor:pointer; flex:none;
  background:var(--accent); color:#1a1508; font:600 14.5px var(--sans);
  transition:transform .12s, filter .15s;
}
.play:hover{filter:brightness(1.07)}
.play:active{transform:scale(.97)}
.play .i-stop{display:none}
.play[aria-pressed="true"] .i-stop{display:block}
.play[aria-pressed="true"] .i-play{display:none}
.tempo{flex:1; min-width:0; display:block}
.tempo .lbl{margin-bottom:2px}
.tempo output{color:var(--text); font-variant-numeric:tabular-nums; letter-spacing:0; text-transform:none; font-weight:500}
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:20px; background:transparent; cursor:pointer;
}
input[type=range]::-webkit-slider-runnable-track{height:4px; border-radius:4px; background:rgba(255,255,255,.18)}
input[type=range]::-moz-range-track{height:4px; border-radius:4px; background:rgba(255,255,255,.18)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:16px; height:16px; margin-top:-6px; border-radius:50%;
  background:var(--text); border:3px solid var(--accent);
}
input[type=range]::-moz-range-thumb{width:12px; height:12px; border-radius:50%; background:var(--text); border:3px solid var(--accent)}

/* ---------- ring rows ---------- */
.ringlist{display:flex; flex-direction:column; gap:7px}
.ring{
  display:flex; align-items:center; gap:8px; padding:7px 8px 7px 10px;
  border-radius:12px; background:rgba(255,255,255,.05); border:1px solid transparent;
}
.ring.is-muted{opacity:.45}
.ring .dot{
  width:15px; height:15px; border-radius:50%; flex:none; cursor:pointer; padding:0;
  background:var(--c); border:2px solid transparent; box-shadow:0 0 12px -2px var(--c);
}
.ring.is-muted .dot{background:transparent; border-color:var(--c); box-shadow:none}
.stepper{display:flex; align-items:center; gap:2px; flex:none}
.stepper button{
  width:24px; height:26px; border:0; border-radius:7px; background:rgba(255,255,255,.07);
  color:var(--text-2); font-size:15px; line-height:1; cursor:pointer;
}
.stepper button:hover:not(:disabled){background:rgba(255,255,255,.16); color:var(--text)}
.stepper button:disabled{opacity:.3; cursor:default}
.stepper .n{
  min-width:32px; text-align:center; font-size:14.5px; font-weight:600;
  font-variant-numeric:tabular-nums; color:var(--c);
}
.ring .beats{font-size:12.5px; color:var(--text-3); flex:1; min-width:0; white-space:nowrap; overflow:hidden}
.ring .voice{
  height:26px; padding:0 10px; border:1px solid var(--line); border-radius:999px;
  background:transparent; color:var(--text-2); font:500 12px var(--sans); cursor:pointer; flex:none;
}
.ring .voice:hover{background:rgba(255,255,255,.1); color:var(--text)}
.ring .del{
  width:26px; height:26px; flex:none; display:grid; place-items:center;
  border:0; border-radius:7px; background:transparent; color:var(--text-3); cursor:pointer;
}
.ring .del:hover:not(:disabled){background:rgba(255,255,255,.1); color:var(--text)}
.ring .del:disabled{opacity:.25; cursor:default}

.deck-row{display:flex; gap:8px}
.ghost{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px; height:34px;
  border:1px dashed var(--line); border-radius:10px; background:transparent;
  color:var(--text-2); font:500 13px var(--sans); cursor:pointer;
}
.ghost:hover:not(:disabled){background:rgba(255,255,255,.06); color:var(--text); border-style:solid}
.ghost:disabled{opacity:.35; cursor:default}

.presets .lbl{margin-bottom:8px}
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chips button{
  height:30px; padding:0 12px; border-radius:999px; cursor:pointer;
  border:1px solid var(--line); background:rgba(255,255,255,.04);
  color:var(--text-2); font:500 12.5px var(--sans);
}
.chips button:hover{background:rgba(255,255,255,.12); color:var(--text)}
.chips button.is-on{background:var(--text); border-color:var(--text); color:#12141d}
.note{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font-size:13px; line-height:1.6; color:var(--text-2);
}
.note em{font-family:var(--serif); font-size:15px; color:var(--text)}
.link{
  display:block; margin-top:4px; padding:0; border:0; background:none; cursor:pointer;
  color:var(--accent); font:500 13px var(--sans);
}
.link:hover{text-decoration:underline}
.keys{font-size:11.5px; line-height:1.6; color:var(--text-3); padding-top:2px}
kbd{font:500 11px var(--sans); padding:1px 5px; border-radius:4px; border:1px solid rgba(255,255,255,.25)}

/* ---------- about ---------- */
dialog{
  margin:auto; width:min(580px, calc(100% - 32px)); max-height:calc(100% - 40px);
  border:0; border-radius:20px; padding:0; color:#1d1b24; background:#fbf7f2;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.6);
}
dialog::backdrop{background:rgba(8,10,18,.6); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px)}
.about{position:relative; padding:30px 32px 28px}
.about .x{position:absolute; top:14px; right:14px; width:30px; height:30px; display:grid; place-items:center;
  border:0; border-radius:8px; background:transparent; color:#6b6674; cursor:pointer}
.about .x:hover{background:#efe9df; color:#1d1b24}
.about .kicker{color:#a8622a}
.about h2{font-family:var(--serif); font-weight:400; font-size:38px; line-height:1.05; margin:6px 0 14px}
.about p{font-size:15px; line-height:1.65; color:#403b48; margin-bottom:12px}
.about b{font-weight:600; color:#1d1b24}
.about .fine{font-size:13.5px; color:#6b6674; margin:16px 0 0; padding-top:14px; border-top:1px solid #e6dfd3}

/* ---------- phone ---------- */
@media (max-width:880px){
  main{grid-template-columns:1fr; gap:16px; padding:8px 14px max(18px, env(safe-area-inset-bottom))}
  .titleblock{padding:4px 2px 8px}
  .sub{font-size:13.5px}
  .sub em{font-size:15.5px}
  .wheelwrap{aspect-ratio:1/1; height:auto; max-height:none}
  .deck{padding:14px; gap:13px}
  .keys{margin-top:2px}
  .about{padding:26px 22px 22px}
  .about h2{font-size:32px}
}
@media (min-width:881px){
  html,body{overflow:hidden}
  .page{height:100%}
}