:root{--bg: #12100e;--surface: #1d1915;--surface-2: #262019;--line: #3a3128;--text: #ece5da;--muted: #8d8272;--accent: #e8a33d;--accent-soft: #e8a33d33;--hot: #e05a4e;--cool: #7fb4a2;--radius: 12px;--shadow: 0 4px 18px rgba(0, 0, 0, .45)}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow-x:hidden;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:none}.hidden{display:none!important}#app{display:grid;grid-template-rows:minmax(120px,1fr) auto auto auto auto;height:100dvh;max-width:1150px;margin:0 auto;padding:calc(env(safe-area-inset-top) + 6px) calc(env(safe-area-inset-right) + 10px) calc(env(safe-area-inset-bottom) + 6px) calc(env(safe-area-inset-left) + 10px);gap:8px}#stage{position:relative;border-radius:var(--radius);background:radial-gradient(ellipse at 50% 0%,#2b241c 0%,var(--surface) 65%);box-shadow:var(--shadow);overflow:hidden;min-height:0}#stage-canvas{width:100%;height:100%;display:block}#grid{display:flex;flex-direction:column;gap:4px;background:var(--surface);border-radius:var(--radius);padding:8px 12px;box-shadow:var(--shadow)}.grid-row{display:flex;align-items:center;gap:8px}.grid-label{width:44px;flex:none;font-size:10px;font-weight:800;letter-spacing:.06em;color:var(--muted);text-align:right}.grid-cells{display:flex;gap:3px;flex:1;min-width:0}.grid-cell{flex:1;max-width:40px;height:27px;min-width:8px;border-radius:5px;background:var(--surface-2);border:1px solid var(--line);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;color:var(--bg)}.grid-cell.beat-start{margin-left:7px}.grid-cell.on{background:var(--accent);border-color:var(--accent)}.grid-cell.lv2{background:var(--hot);border-color:var(--hot)}.grid-row.bass .grid-cell.on{background:var(--cool);border-color:var(--cool)}.grid-row.keys .grid-cell.on{background:#b98a5a;border-color:#b98a5a}.grid-cell.gen.on{opacity:.85}.grid-row.ro .grid-cell{cursor:default}.grid-row.bass.ro .grid-cell{cursor:pointer}.grid-cell.playhead{outline:2px solid var(--text);outline-offset:-1px}.grid-btn{width:44px;height:44px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-size:18px;cursor:pointer}.grid-btn.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}#transport{display:flex;align-items:center;gap:14px;background:var(--surface);border-radius:var(--radius);padding:8px 14px;box-shadow:var(--shadow)}.play-btn{width:64px;height:64px;border-radius:50%;border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent);font-size:28px;cursor:pointer;flex:none}.play-btn.playing{background:var(--accent);color:var(--bg)}#now-playing{min-width:86px;text-align:center;flex:none}#chord-now{font-size:30px;font-weight:800;color:var(--accent);line-height:1.05}#bar-now{font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.06em}#bpm-wheel{width:96px;height:96px;flex:none;touch-action:none;cursor:grab}.t-selects{display:flex;gap:10px;flex-wrap:wrap;flex:1;min-width:0}.t-selects label{flex:1;min-width:0}.t-selects select{width:100%}.t-selects label,.t-toggles label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--muted);font-weight:600;letter-spacing:.05em}select,input[type=text],#track-name{background:var(--surface-2);color:var(--text);border:1px solid var(--line);border-radius:8px;padding:9px 10px;font-size:15px;min-height:44px}.t-toggles{margin-left:auto;display:flex;align-items:center;gap:14px}.check{flex-direction:row!important;align-items:center;gap:6px!important;font-size:13px!important}.check input{width:20px;height:20px;accent-color:var(--accent)}.intensity{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}.intensity button{background:var(--surface-2);color:var(--muted);border:none;padding:10px 12px;font-size:12px;cursor:pointer;min-width:44px;min-height:44px}.intensity button.active{background:var(--accent);color:var(--bg)}#parts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.part{display:flex;align-items:center;gap:8px;background:var(--surface);border-radius:var(--radius);padding:8px 10px;box-shadow:var(--shadow)}.part-name{font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--muted);flex:none}.pack-sel,.style-sel{flex:1 1 0;width:0;min-width:70px}.part input[type=range]{flex:1;min-width:40px;accent-color:var(--accent)}.mute-btn{width:44px;height:44px;flex:none;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-weight:800;cursor:pointer}.mute-btn.muted{background:var(--hot);color:var(--bg);border-color:var(--hot)}#looper{display:flex;align-items:center;gap:10px;background:var(--surface);border-radius:var(--radius);padding:8px 10px;box-shadow:var(--shadow)}.loop-slots{display:flex;align-items:center;gap:8px;flex:1}.loop-slot{min-width:64px;min-height:44px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--muted);font-weight:700;cursor:pointer}.loop-slot:disabled{opacity:.45;cursor:default}.loop-note{font-size:12px;color:var(--muted)}.track-row{display:flex;gap:8px}#track-name{width:200px}#start-overlay{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:radial-gradient(ellipse at 50% 30%,#2b241c 0%,var(--bg) 70%);z-index:10}#start-overlay h1{font-size:44px;letter-spacing:.02em}#start-overlay .tagline{color:var(--muted);font-size:15px}#start-btn{margin-top:12px;padding:16px 42px;font-size:20px;font-weight:800;letter-spacing:.08em;border-radius:999px;border:2px solid var(--accent);background:var(--accent-soft);color:var(--accent);cursor:pointer}#load-status{color:var(--muted);font-size:13px;min-height:18px}@media(max-width:740px){#app{grid-template-rows:minmax(90px,.6fr) auto auto auto auto;gap:6px}.grid-label{width:34px;font-size:9px}.grid-cells{gap:2px}.grid-cell{height:24px;border-radius:4px}.grid-cell.beat-start{margin-left:4px}#transport{flex-wrap:wrap;gap:8px;padding:8px}.t-toggles{margin-left:0}#parts{grid-template-columns:1fr;gap:6px}#looper{flex-wrap:wrap}#track-name{width:100%}#bpm-wheel{width:72px;height:72px}}