:root{--bg: #101820;--panel: #1a2430;--line: #2a3644;--text: #e8edf2;--sub: #8fa0b0;--sky: #58a6e8;--terracotta: #d07a5a;--amber: #d9a62e;--teal: #3aa981;--violet: #8b7bd8;--red: #e0565e;--radius: 12px}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font-family:Noto Sans JP,Hiragino Sans,Segoe UI,sans-serif;font-size:14px;-webkit-text-size-adjust:100%}#app{max-width:520px;margin:0 auto;padding:0 14px 40px}header.top{display:flex;align-items:center;gap:10px;padding:12px 2px;position:sticky;top:0;background:var(--bg);z-index:5}header.top h1{font-size:16px;margin:0;font-weight:700}header.top .spacer{flex:1}button{font:inherit;cursor:pointer}.btn{background:var(--sky);color:#08131d;border:none;border-radius:8px;padding:9px 16px;font-weight:700}.btn.secondary{background:transparent;color:var(--text);border:1px solid var(--line)}.btn.violet{background:var(--violet);color:#0d0a1a}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.block{display:block;width:100%;padding:14px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:12px}.card.accent{border-color:var(--sky)}.card.paid{border-color:#8b7bd880;background:#8b7bd81a}.banner{background:#d9a62e24;color:var(--amber);border-radius:8px;padding:8px 12px;font-size:12px;margin-bottom:12px}.muted{color:var(--sub);font-size:12px;line-height:1.6}.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.section-label{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:700;color:var(--sub);margin:14px 0 6px}.section-label .spacer{flex:1}h2{font-size:15px;margin:2px 0 8px}h3{font-size:13px;color:var(--sub);margin:14px 0 6px}.chip{background:transparent;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:6px 12px;font-size:12px}.chip[aria-pressed=true]{background:var(--sky);color:#08131d;border-color:var(--sky)}.chip.major:before{content:"☀ ";color:var(--amber)}.chip[aria-pressed=true].major:before{color:#7a5800}.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:700}.badge.a{background:#3aa9812e;color:var(--teal)}.badge.b{background:#d9a62e2e;color:var(--amber)}.badge.c{background:#8fa0b02e;color:var(--sub)}.icon-btn{background:none;border:none;color:var(--sub);padding:3px;line-height:1;border-radius:6px;font-size:15px}.icon-btn.off{color:var(--red)}.solo-btn{width:24px;height:24px;border-radius:6px;font-size:11px;font-weight:700;background:transparent;color:var(--sub);border:1.2px solid var(--line)}.solo-btn[aria-pressed=true]{background:var(--sky);color:#08131d;border-color:var(--sky)}.grid-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.grid{display:inline-block;min-width:100%}.grid-row{display:flex;align-items:center;margin-bottom:3px}.grid-label{width:78px;flex:0 0 78px;font-size:11px;display:flex;align-items:center;gap:2px}.grid-label span{flex:1}.cell{width:26px;height:28px;flex:0 0 26px;margin-right:2px;border:none;border-radius:4px;background:#2a36446b;padding:0;font-size:9px;font-weight:700;color:#08131d}.cell.beat{background:#2a3644bf}.cell.bar-end{margin-right:7px}.cell.on-kick{background:var(--terracotta)}.cell.on-snare{background:var(--sky)}.cell.on-hat{background:var(--teal)}.cell.on-clap{background:var(--amber)}.cell.on-bass{background:var(--violet)}.cell.on-chords{background:var(--sky)}.cell.playhead{outline:2px solid #fff;outline-offset:-2px}.cell.slim{height:20px}.step-head{width:26px;flex:0 0 26px;margin-right:2px;text-align:center;font-size:10px;color:var(--sub)}.step-head.bar-end{margin-right:7px}.part{transition:opacity .15s}.part.silent{opacity:.42}.metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 4px;text-align:center}.metrics b{display:block;font-size:15px}.metrics span{font-size:10.5px;color:var(--sub)}.advice{display:flex;gap:10px;align-items:flex-start}.advice .mark{font-size:16px;line-height:1.3}.advice .title{font-size:13px;font-weight:700}.emotion-card{width:100%;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;color:var(--text)}.emotion-card[aria-pressed=true]{border-color:var(--sky);border-width:2px}.emotion-card .name{font-weight:700}.section-card .num{display:inline-flex;width:24px;height:24px;border-radius:6px;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#58a6e826;color:var(--sky);margin-right:8px}.curve{width:100%;height:150px;display:block}.legend{display:flex;gap:14px;font-size:11px;color:var(--sub);margin-top:6px}.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:4px}