.prm-top{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:18px;align-items:center}
@media (max-width:640px){.prm-top{grid-template-columns:1fr}}
#prm-ring{width:100%;max-width:320px;aspect-ratio:1;display:block;margin:auto}
.prm-ratio{font-size:44px;font-weight:800;letter-spacing:.04em;font-variant-numeric:tabular-nums;color:var(--accent)}
.prm-go{font-size:18px;padding:12px 28px;margin:6px 0 10px}
.prm-tempo input[type=number]{width:5em;text-align:center}
#prm-bpm-range{width:100%;margin:8px 0}
.prm-quick{font-size:14px}
.prm-layer{border-top:1px solid var(--line);padding:10px 0;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.prm-layer.locked{opacity:.55}
.prm-accents{display:flex;flex-wrap:wrap;gap:4px;width:100%}
.prm-chip{width:30px;height:30px;border-radius:50%;border:1px solid var(--accent);background:transparent;color:var(--fg);cursor:pointer;font:inherit;font-size:13px}
.prm-chip.on{background:var(--accent);color:#fff}
.prm-plan input{width:5em}
.prm-list{padding-left:1.2em}
.prm-list li{display:flex;gap:8px;align-items:center;padding:4px 0}
.prm-list li span{flex:1}
.prm-list li.cur span{font-weight:700;color:var(--accent)}
.small{font-size:.85em}