body{color:#f5f5f5;background:#14141c;margin:0;padding:2rem;font-family:system-ui,sans-serif;line-height:1.6}main{max-width:40rem;margin:0 auto}a{color:#8ec4ff}.start-overlay{color:#14141c;cursor:pointer;background:#ffcf5c;border:none;border-radius:.75rem;width:100%;margin-top:1.5rem;padding:3rem 1rem;font-size:1.5rem;font-weight:600;display:block}.hint{opacity:.8;font-size:.95rem}.row{flex-wrap:wrap;align-items:center;gap:1rem;margin:1.5rem 0;display:flex}.dice{cursor:pointer;color:inherit;background:0 0;border:2px solid #444;border-radius:.5rem;padding:.25rem .75rem;font-size:2.5rem}.session-panel{background:#191922;border:1px solid #2c2c3a;border-radius:.75rem;margin:1.5rem 0;padding:.9rem 1rem 1.1rem}.session-panel-title{letter-spacing:.14em;text-transform:uppercase;color:#ffcf5c;margin:0 0 .75rem;font-size:.75rem;font-weight:700}#loop-pedal{flex-direction:column;gap:.5rem;display:flex}.loop-track-row{border-left:3px solid var(--track-color,#8ec4ff);background:#14141c;border-radius:.5rem;align-items:stretch;gap:.6rem;padding:.35rem;display:flex}.loop-track-header{flex:none;align-items:center;gap:.5rem;min-width:8.5rem;display:flex}.loop-track-swatch{background:var(--track-color,#8ec4ff);border-radius:.15rem;flex:none;width:.55rem;height:1.6rem}.loop-track-meta{flex-direction:column;line-height:1.25;display:flex}.loop-track-name{letter-spacing:.05em;text-transform:uppercase;font-size:.78rem;font-weight:700}.loop-track-status{opacity:.65;font-size:.72rem}.loop-track{color:#d8d8e0;cursor:pointer;background:#22222e;border:2px solid #4a4a5a;border-radius:50%;flex:none;justify-content:center;align-items:center;width:2.1rem;height:2.1rem;margin-left:auto;font-size:.9rem;line-height:1;display:flex}.loop-track[data-state=recording]{color:#14141c;background:#ff6b6b;border-color:#ff6b6b;animation:1s ease-in-out infinite loop-pulse}.loop-track[data-state=playing]{border-color:var(--track-color,#6bffb0);background:var(--track-color,#6bffb0);color:#14141c}@keyframes loop-pulse{0%,to{box-shadow:0 0 #ff6b6b8c}50%{box-shadow:0 0 0 .4rem #ff6b6b00}}.loop-viz{flex:12rem;align-items:center;min-width:8rem;display:flex}.loop-viz-track{background:#1e1e29;border:1px solid #2c2c3a;border-radius:.35rem;gap:1px;width:100%;height:2.1rem;padding:3px;display:flex;position:relative}.loop-viz[data-state=recording] .loop-viz-track{background:#392731;border-color:#ff6b6b80}.loop-viz[data-state=playing] .loop-viz-track{background:color-mix(in srgb, var(--track-color,#6bffb0) 14%, #1e1e29);border-color:color-mix(in srgb, var(--track-color,#6bffb0) 45%, #2c2c3a)}.loop-viz-cell{background:#ffffff0d;border-radius:2px;flex:1 1 0}.loop-viz-cell.bar-end{margin-right:3px}.loop-viz-cell.note{background:#6b8bff}.loop-viz[data-state=recording] .loop-viz-cell.note{background:#ff6b6b}.loop-viz[data-state=playing] .loop-viz-cell.note{background:var(--track-color,#6bffb0);box-shadow:0 0 .35rem color-mix(in srgb, var(--track-color,#6bffb0) 70%, transparent)}.loop-viz-playhead{visibility:hidden;pointer-events:none;background:#ffcf5c;width:2px;transition:left 50ms linear;position:absolute;top:-1px;bottom:-1px}.loop-viz-playhead:before{content:"";border-top:5px solid #ffcf5c;border-left:4px solid #0000;border-right:4px solid #0000;position:absolute;top:-4px;left:50%;transform:translate(-50%)}#piano{flex-wrap:wrap;gap:.4rem;display:flex}.piano-key{color:#14141c;cursor:pointer;touch-action:none;background:#f5f5f5;border:none;border-radius:.4rem;width:3rem;height:6rem;font-size:1.1rem;font-weight:700}.piano-key.active{background:#ffcf5c;transform:translateY(2px)}