:root{--bg:#1d130e;--card:#2c1d15;--ac:#e8954a;--ac2:#c8643a;--tx:#f3e2cc;--mu:#a98b70}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;background:radial-gradient(circle at 50% 0,#3a2518,var(--bg) 70%);color:var(--tx);font-family:ui-rounded,system-ui,sans-serif;min-height:100vh;padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom)}
.grain{position:fixed;inset:0;pointer-events:none;opacity:.12;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:9}
header{text-align:center;padding:14px}h1{margin:0;font-size:1.6rem;color:var(--ac)}
.chordname{font-size:1.3rem;color:var(--mu);margin-top:4px;min-height:1.6em}
main{max-width:560px;margin:auto;padding:0 12px 30px}
.transport{display:flex;gap:10px}
.big{flex:1;font-size:1.4rem;padding:22px 0;border:0;border-radius:18px;background:var(--ac);color:#2a160b;font-weight:700}
.big.rec{background:#5a2e22;color:#ffb39a}.big.on{background:#d9452e;color:#fff}
.status{text-align:center;color:var(--mu);margin:8px 0;min-height:1.2em}.status a,.status button{color:var(--ac);font-size:1.05rem;background:none;border:1px solid var(--ac);border-radius:10px;padding:8px 12px;margin:4px;text-decoration:none}
.card{background:var(--card);border-radius:18px;padding:14px;margin:12px 0;box-shadow:0 4px 18px #0006}
.row{display:flex;align-items:center;gap:10px;margin:10px 0}.row label{width:110px;color:var(--mu);flex-shrink:0}
select{flex:1;font-size:1rem;padding:10px;border-radius:10px;background:#1d130e;color:var(--tx);border:1px solid #4a3324}
input[type=range]{flex:1;accent-color:var(--ac);height:34px}
.mix{display:flex;align-items:center;gap:10px;margin:8px 0}
.tog{width:110px;padding:12px 0;border-radius:12px;border:0;background:#3a271c;color:var(--mu);font-size:1rem;flex-shrink:0}
.tog.on{background:var(--ac2);color:#fff}
#grid{display:grid;grid-template-columns:44px repeat(16,1fr);gap:3px;margin:8px 0}
#grid span{font-size:.75rem;color:var(--mu);align-self:center}
#grid i{aspect-ratio:1/1.6;background:#3a271c;border-radius:4px}#grid i.b{background:#46301f}
#grid i.on{background:var(--ac)}#grid i.cur{outline:2px solid #fff6}
.small{width:100%;padding:14px;border-radius:12px;border:0;background:#3a271c;color:var(--tx);font-size:1rem}
.foot{text-align:center;color:var(--mu);font-size:.8rem}
.astate{text-align:center;font-size:.8rem;margin-top:8px;color:#d98}.astate.running{color:#9c8}

.tabs,.bartabs,.tools{display:flex;gap:6px;margin:8px 0;flex-wrap:wrap}
.tabs button,.bartabs button,.tools button{flex:1;padding:12px 4px;border:0;border-radius:12px;background:#3a271c;color:var(--tx);font-size:.95rem;min-width:0}
.tabs button.on{background:var(--ac);color:#2a160b;font-weight:700}.bartabs button{font-size:.8rem;padding:9px 2px}.bartabs button.on{background:var(--ac2);color:#fff}
.tools select{flex:1.3;min-width:0}
.chk{width:28px;height:28px;accent-color:var(--ac)}.row small{color:var(--mu);font-size:.7rem}
#grid.roll i{aspect-ratio:auto;height:26px}#grid i.acc{background:#ffd08a;box-shadow:0 0 6px #ffb347}
#grid span.ct{color:var(--ac);font-weight:700}#grid span.root{color:#fff}#grid span.out{opacity:.5}
.hint{color:var(--mu);font-size:.75rem;text-align:center;margin:4px 0 0}