:root{--bg:#121317;--surface:#1c1e25;--surface-raised:#262933;--text:#f2f3f7;--text-muted:#9a9fb0;--cell-light:#2c303b;--cell-dark:#22252e;--accent:#fff;--danger:#ff5a5f;--gutter:16px;--tap-min:40px;--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;-webkit-font-smoothing:antialiased;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.4}*{box-sizing:border-box}html,body{background:var(--bg);min-height:100%;color:var(--text);margin:0}button{font:inherit;color:inherit;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}.app{max-width:900px;padding:max(12px, env(safe-area-inset-top)) max(var(--gutter), env(safe-area-inset-right)) 32px max(var(--gutter), env(safe-area-inset-left));flex-direction:column;gap:16px;margin:0 auto;display:flex}.app-header{justify-content:space-between;align-items:center;gap:12px;display:flex}.app-header h1{letter-spacing:.01em;margin:0;font-size:1.125rem;font-weight:600}.header-actions{flex-wrap:wrap;justify-content:flex-end;gap:8px;display:flex}.export-status{text-align:right;color:var(--text-muted);flex-basis:100%;margin:0;font-size:.875rem}.export-status.is-error{color:var(--danger)}.export-status[data-empty]{display:none}.settings-panel{background:var(--surface);border-radius:12px;flex-direction:column;gap:12px;padding:12px;display:flex}.settings-panel h2{margin:0;font-size:1rem;font-weight:600}.settings-panel .hint+h2{margin-top:8px}.tempo-slider{width:100%;min-height:44px;accent-color:var(--accent);margin:0}.tempo-slider:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.stepper{align-items:center;gap:8px;display:flex}.stepper-label{flex:1}.stepper-value{text-align:center;font-variant-numeric:tabular-nums;min-width:2.5ch}.button-row{flex-wrap:wrap;gap:8px;display:flex}.template-palette{flex-direction:column;gap:8px;display:flex}.template-list{scrollbar-width:thin;gap:4px;margin:0;padding:4px 0;list-style:none;display:flex;overflow-x:auto}.template-list li{min-width:var(--tap-min);flex:1 1 0;max-width:56px}.template-button{aspect-ratio:1;background:var(--surface);border:2px solid #0000;border-radius:10px;place-items:center;width:100%;padding:6px;display:grid}.template-button.is-selected{border-color:var(--accent);background:var(--surface-raised)}.template-preview{gap:1px;width:100%;height:100%;display:grid}.preview-cell{background:var(--cell-dark);border-radius:1px}.preview-cell.is-filled{background:var(--text)}.hint{color:var(--text-muted);margin:0;font-size:.875rem}.empty-state{border:1px dashed var(--surface-raised);border-radius:12px;flex-direction:column;gap:8px;padding:12px;display:flex}.grid-editor{flex-direction:column;gap:8px;width:100%;display:flex}.grid-toolbar{justify-content:flex-end;display:flex}.grid-scroll{scrollbar-width:thin;width:100%;overflow-x:auto;container-type:inline-size}.grid-editor.is-zoomed .grid-scroll{max-height:70vh;overflow:auto}.grid-editor.is-zoomed .grid{--cell:max(44px, min(calc((100cqw - 2px) / var(--cols)), 60px))}.grid{--cell:clamp(24px, calc((100cqw - 2px) / var(--cols)), 60px);grid-template-columns:repeat(var(--cols), var(--cell));grid-auto-rows:var(--cell);border:1px solid var(--surface-raised);-webkit-user-select:none;user-select:none;border-radius:6px;gap:0;width:max-content;margin:0 auto;display:grid;overflow:hidden}.grid-cell{width:var(--cell);height:var(--cell);min-width:var(--cell);min-height:var(--cell);background:var(--cell-light);border:0;border-radius:0;padding:0;transition:background-color 80ms linear}.grid-cell.is-dark{background:var(--cell-dark)}.grid-cell.is-selected{box-shadow:inset 0 0 0 3px var(--accent)}.grid-cell.is-grab{touch-action:none;cursor:grab}.grid.is-dragging .grid-cell{transition:none}.grid.is-dragging .grid-cell.is-grab{cursor:grabbing}.grid-cell:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}.preview{flex-direction:column;align-items:center;gap:8px;width:100%;display:flex}.preview-canvas{aspect-ratio:9/16;border-radius:6px;width:100%;height:auto;display:block}@media (width>=700px){.preview-canvas,.beat-progress{max-width:39.375vh}.preview-canvas{max-height:70vh}}.beat-indicator{font-variant-numeric:tabular-nums;color:var(--text-muted);margin:0}.beat-progress{width:100%}.beat-progress .beat-cell{border-radius:3px;min-height:6px}.beat-progress .beat-cell.is-past{background:var(--text-muted)}.beat-progress .beat-cell.is-current{background:var(--accent);box-shadow:none}.selection-toolbar{padding:12px 12px calc(12px + env(safe-area-inset-bottom));background:var(--surface);border-radius:12px;flex-direction:column;gap:12px;display:flex;position:sticky;bottom:0;box-shadow:0 -4px 24px #0006}.toolbar-row{justify-content:space-between;align-items:center;gap:16px;display:flex}.shape-panel{border-top:1px solid var(--surface-raised);flex-direction:column;gap:8px;padding-top:12px;display:flex}.color-picker{align-items:center;gap:8px;display:flex}.color-input{cursor:pointer;background:0 0;border:0;border-radius:8px;width:56px;height:44px;padding:0}.color-input::-webkit-color-swatch-wrapper{padding:0}.color-input::-webkit-color-swatch{border:0;border-radius:8px}.color-input::-moz-color-swatch{border:0;border-radius:8px}.color-input:focus-visible,.swatch:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.swatch-list{grid-template-columns:repeat(auto-fill, minmax(var(--tap-min), 1fr));gap:6px;margin:0;padding:0;list-style:none;display:grid}.swatch{width:100%;min-height:var(--tap-min);border:2px solid #0000;border-radius:8px}.swatch.is-active{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--bg)}.beat-strip{grid-template-columns:repeat(8,1fr);gap:3px;margin:0;padding:0;list-style:none;display:grid}.beat-cell{background:var(--cell-dark);min-height:28px;color:var(--text-muted);font:inherit;font-variant-numeric:tabular-nums;border:0;border-radius:4px;place-items:center;padding:0;font-size:.75rem;display:grid}#rhythm-controls .beat-cell{min-height:var(--tap-min);cursor:pointer}.beat-cell.is-active{background:var(--accent);color:var(--bg)}.beat-cell.is-current{box-shadow:inset 0 0 0 2px var(--danger)}.arrow-pad{grid-template-areas:".up.""left.right"".down.";gap:4px;display:grid}.arrow.up{grid-area:up}.arrow.down{grid-area:down}.arrow.left{grid-area:left}.arrow.right{grid-area:right}.toolbar-actions{flex-direction:column;gap:8px;display:flex}.tool-button{background:var(--surface-raised);border:0;border-radius:8px;min-width:44px;min-height:44px;padding:0 14px;font-size:1rem;font-weight:500}.tool-button.arrow{padding:0;font-size:1.25rem}.tool-button.danger{color:#fff;background:#d6303a}.tool-button.is-active{background:var(--accent);color:var(--bg)}.tool-button:active:not(:disabled){filter:brightness(1.2)}.tool-button:disabled{opacity:.4;cursor:default}