:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--accent-off:#1a1c24;--accent-weak:#3a6ea8;--accent-medium:#9fd0e8;--accent-strong:#f0a020}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root{--bg:#0b0c15;--panel:#14161f;--ink:#e8eaf2;--ink-dim:#8b90a3;--ink-faint:#6f7488;--line:#262a38;--brand:#f0a020;--slot-min:24px;--slot-min-comfortable:38px;--slot-size:44px;--slot-note-h:18px;--slot-accent-h:40px;--slot-bar-h:clamp(5px, 9cqi, 9px);--slot-zone-gap:4px;--grid-gap-slot:3px;--grid-gap-group:4px;--grid-gap-beat:12px;--grid-pad-measure:8px;--radius:4px;--grid-measure-line:#7a84a8;--grid-beat-line:#707a9c;--grid-slot-line:#666f8f;--grid-zone-line:#7a84a8;--font-ui:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;--font-mono:"SF Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "DejaVu Sans Mono", "Courier New", monospace;--tint-weak:#3a6ea833;--tint-medium:#9fd0e829;--tint-strong:#f0a02029;--accent-ink-weak:#8fb4e0;--accent-ink-medium:#b7dcee;--accent-ink-strong:#f2b451;--rest-tint-weak:#3a6ea812;--rest-tint-medium:#9fd0e80f;--rest-tint-strong:#f0a02012}*{box-sizing:border-box}body{background:var(--bg);color:var(--ink);font-family:var(--font-ui);margin:0;overflow-x:hidden}.grid{flex-wrap:wrap;align-items:flex-start;gap:12px;padding:12px;display:flex}.measure{background:var(--panel);border:1px solid var(--grid-measure-line);border-radius:var(--radius);padding:var(--grid-pad-measure);align-items:stretch;gap:8px;width:fit-content;max-width:100%;display:flex}.measure.measuring{flex:0 0 100%;width:100%}.measure-meter{min-width:44px;color:var(--brand);border:1px solid var(--line);border-radius:var(--radius);font:600 14px/1 var(--font-mono);cursor:pointer;background:0 0;flex:none}.beats{grid-template-columns:repeat(var(--beat-cols,var(--beat-count,1)), minmax(min-content, 1fr));gap:var(--grid-gap-beat);min-width:0;width:var(--beats-max,auto);flex:auto;display:grid}.beats.measuring,.beats.measuring-preferred{width:auto}.beats.measuring{grid-template-columns:min-content}.beats.measuring-preferred{grid-template-columns:max-content}.beats.measuring-preferred .slot{min-width:var(--slot-size);flex:none}.beat{gap:var(--grid-gap-group);flex:auto;align-items:flex-start;min-width:min-content;display:flex;position:relative}.beat+.beat:before{content:"";left:calc(-.5 * var(--grid-gap-beat) - 1px);background:var(--grid-beat-line);border-radius:1px;width:2px;position:absolute;top:2px;bottom:2px}.group{gap:var(--grid-gap-slot);flex:auto;align-items:flex-start;min-width:min-content;display:flex}.group.feel-triplet{border-bottom:2px dotted var(--ink-dim);padding-bottom:2px}.group.feel-straight{border-bottom:2px solid #0000;padding-bottom:2px}.slot{min-width:var(--slot-min);background:var(--accent-off);border:1px solid var(--grid-slot-line);cursor:pointer;border-radius:3px;flex:auto;padding:0;position:relative;overflow:hidden;container-type:inline-size}.slot-fill{height:var(--slot-bar-h);background:0 0;border-radius:0 2px 2px 0;transition:width 80ms linear;display:block;position:absolute;bottom:0;left:0}.slot.accent-weak .slot-fill{background:var(--accent-weak)}.slot.accent-medium .slot-fill{background:var(--accent-medium)}.slot.accent-strong .slot-fill{background:var(--accent-strong)}.slot-label{min-height:0;padding-bottom:var(--slot-bar-h);font:700 15px/1.3 var(--font-mono);color:var(--ink);text-align:center;pointer-events:none;justify-content:center;align-items:center;font-size:clamp(15px,34cqi,26px);display:flex;position:relative}.slot.has-note{gap:var(--slot-zone-gap);aspect-ratio:auto;background:0 0;border:0;flex-direction:column;height:auto;display:flex;overflow:visible;container-type:inline-size}.slot.has-note .slot-accent{background:var(--accent-off);border:1px solid var(--grid-slot-line);cursor:pointer;border-radius:3px;flex:none;padding:0;position:relative;overflow:hidden}.slot-note{cursor:pointer;background:0 0;border:0;flex:none;justify-content:center;align-items:center;min-height:24px;padding:0;display:flex}.slot-note:hover:not(:disabled) .slot-pitch{background:#232838}.slot-note:disabled{cursor:default}.slot.has-note .slot-pitch{width:100%;position:static}.slot.has-note .slot-label{padding-bottom:0;font-size:clamp(15px,34cqi,26px);font-weight:700;line-height:1.3}@media (pointer:fine){.slot-note{min-height:var(--slot-note-h)}}.slot:not(.has-note) .slot-label{min-height:100cqi}.slot.has-note .slot-accent{height:100cqi}.slot[data-metric="1"] .slot-accent,.slot[data-metric="1"]:not(.has-note){background:var(--rest-tint-weak)}.slot[data-metric="2"] .slot-accent,.slot[data-metric="2"]:not(.has-note){background:var(--rest-tint-medium)}.slot[data-metric="3"] .slot-accent,.slot[data-metric="3"]:not(.has-note){background:var(--rest-tint-strong)}.slot.accent-weak .slot-accent,.slot.accent-weak:not(.has-note){background:var(--tint-weak)}.slot.accent-medium .slot-accent,.slot.accent-medium:not(.has-note){background:var(--tint-medium)}.slot.accent-strong .slot-accent,.slot.accent-strong:not(.has-note){background:var(--tint-strong)}.slot.accent-weak .slot-label{color:var(--accent-ink-weak)}.slot.accent-medium .slot-label{color:var(--accent-ink-medium)}.slot.accent-strong .slot-label{color:var(--accent-ink-strong)}.slot.accent-off .slot-label{color:var(--ink-faint);font-weight:400}@media (width>=1101px){:root{--grid-gap-slot:5px;--grid-gap-group:7px;--grid-gap-beat:22px;--grid-pad-measure:12px}.grid{gap:16px;padding:16px}.slot{min-width:var(--slot-min-comfortable)}}.slot.playing.accent-off{--cursor-fill:#3a3f52;--cursor-ink:var(--ink)}.slot.playing.accent-weak{--cursor-fill:var(--accent-weak);--cursor-ink:#fff}.slot.playing.accent-medium{--cursor-fill:var(--accent-medium);--cursor-ink:#0b0c15}.slot.playing.accent-strong{--cursor-fill:var(--accent-strong);--cursor-ink:#0b0c15}.slot.playing:not(.has-note),.slot.has-note.playing .slot-accent{background:var(--cursor-fill);outline:2px solid var(--cursor-ink);outline-offset:-2px}.slot.playing .slot-label{color:var(--cursor-ink)}.slot.playing .slot-fill{opacity:0}@media (width<=767px){.grid{gap:10px;padding:8px}.measure{flex-wrap:wrap}.slot-label{min-height:calc(44px - var(--slot-bar-h))}.slot.has-note .slot-label{min-height:0}}.controls{border-bottom:1px solid var(--line);background:var(--panel);flex-wrap:wrap;gap:16px;padding:12px;display:flex}.control-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.control{flex-direction:column;gap:2px;display:flex}.control-label{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;font-size:10px}.controls button,.controls select,.controls input{font:500 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:8px 10px}.controls button.primary{background:var(--brand);color:#0b0c15;border-color:var(--brand);font-weight:700}.controls button.on{border-color:var(--brand);color:var(--brand)}.controls button:disabled{opacity:.4;cursor:not-allowed}.presets{flex-wrap:wrap;gap:4px;display:flex}.preset{padding:6px 8px!important;font-size:11px!important}.slider-row{align-items:center;gap:8px;display:flex}.slider-row input[type=range]{flex:1;min-width:120px}.value-entry{text-align:center;cursor:text;width:64px}.playback-settings .control-group{flex-direction:column;flex-basis:100%;align-items:flex-start}.playback-settings .control-group>.control{width:100%}.playback-settings .control-group .slider-row{width:100%;max-width:420px}.counting-note{color:var(--ink-dim);flex-basis:100%;margin:0;font-size:11px}.swing-note{color:var(--ink-dim);align-self:center;margin:0;font-size:11px}.dialog-backdrop{z-index:100;background:#04050ab8;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.dialog{background:var(--panel);border:1px solid var(--line);border-radius:8px;width:100%;max-width:420px;padding:20px}.dialog-message{font:400 14px/1.5 var(--font-ui);color:var(--ink);margin:0 0 16px}.dialog-input{width:100%;font:400 14px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);background:#1c1f2b;margin-bottom:16px;padding:10px}.dialog-actions{flex-wrap:wrap;gap:8px;display:flex}.dialog-button{font:500 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:9px 14px}.dialog-button.primary{background:var(--brand);color:#0b0c15;border-color:var(--brand);font-weight:700}.dialog-link{font:500 14px/1.4 var(--font-ui);color:var(--brand);word-break:break-word;margin-bottom:16px;display:block}.dialog-note{font:400 14px/1.5 var(--font-ui);color:var(--ink-dim);margin:0 0 12px}.slot-pitch{white-space:nowrap;min-height:var(--slot-note-h);border:1px solid var(--grid-zone-line);color:var(--ink);text-align:center;pointer-events:none;background:#171a24;border-radius:3px;flex-direction:row;justify-content:center;align-items:baseline;gap:4px;padding:0 2px;display:flex;position:absolute;top:2px;left:0;right:0;overflow:hidden}.slot.accent-medium .slot-pitch,.slot.accent-strong .slot-pitch{color:#0b0c15}.slot-degree{font:400 10px/1.4 var(--font-mono);color:var(--ink-dim);font-size:clamp(10px,21cqi,16px)}.slot-note-name{font:400 10px/1.4 var(--font-mono);letter-spacing:-.03em;color:var(--ink-faint);font-size:clamp(10px,21cqi,16px)}.pitch-strip{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;padding:10px 12px;display:flex}.pitch-strip[hidden]{display:none}.pitch-strip-label{font:600 11px/1 var(--font-ui);color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em}.accidental-group,.degree-group,.octave-stepper{flex-wrap:wrap;gap:4px;display:flex}.pitch-strip button{min-width:32px;min-height:32px;font:600 13px/1 var(--font-mono);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:0 8px}.pitch-strip button:hover:not(:disabled):not([aria-pressed=true]){background:#262b3a}.pitch-strip button:disabled{color:var(--ink-dim);cursor:default}.pitch-strip .degree{flex-direction:column;justify-content:center;align-items:center;gap:1px;min-width:40px;padding:4px 6px;display:flex}.degree-number{font:600 13px/1 var(--font-mono)}.degree-name{font:500 10px/1 var(--font-mono);color:var(--ink-dim)}.pitch-strip .degree[aria-pressed=true] .degree-name{color:#3d2c05}.pitch-strip .degree.in-scale{border-bottom:3px solid var(--brand)}.pitch-strip .degree:not(.in-scale):not([aria-pressed=true]) .degree-number{color:var(--ink-dim)}.key-picker{font:500 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:8px 10px}.scale-picker{max-width:100%;font:500 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:8px 10px}.pitch-strip button[aria-pressed=true]{color:#0b0c15;background:var(--brand);border-color:var(--brand)}.octave-stepper{align-items:center}.octave-readout{min-width:52px;font:600 12px/1 var(--font-mono);color:var(--ink);text-align:center}.pattern-nav{gap:8px;margin-left:auto;display:flex}.nav-button{font:500 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:8px 12px}.library{padding:12px}.library-search{width:100%;font:400 14px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);background:#1c1f2b;padding:10px}.tag-row{flex-wrap:wrap;gap:6px;margin:10px 0;display:flex}.library-count{color:var(--ink-dim);margin:0 0 8px;font-size:11px}.tag-chip,.tag-filter{font:500 11px/1.4 var(--font-ui);color:var(--ink-dim);border:1px solid var(--ink-dim);cursor:pointer;background:0 0;border-radius:999px;align-items:center;gap:4px;padding:3px 8px;display:inline-flex}.tag-chip.user,.tag-filter.user{background:var(--line);color:var(--ink);border-color:var(--line)}.tag-filter.on{border-color:var(--brand);color:var(--brand)}.tag-remove{cursor:pointer;color:inherit;background:0 0;border:0;padding:0;font-size:13px;line-height:1}.pattern-list{margin:0;padding:0;list-style:none}.pattern-item{border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 0;display:flex}.pattern-item.current .pattern-name{color:var(--brand)}.pattern-name{text-align:left;font:500 14px/1.3 var(--font-ui);color:var(--ink);cursor:pointer;background:0 0;border:0;flex:160px;padding:0}.rating{gap:1px;display:flex}.star{cursor:pointer;color:var(--ink-dim);background:0 0;border:0;padding:0 1px;font-size:14px;line-height:1}.star.on{color:var(--brand)}.pattern-tags{flex-wrap:wrap;flex-basis:100%;gap:4px;display:flex}.shell{height:100dvh;display:flex;overflow:hidden}.sidebar{border-right:1px solid var(--line);background:var(--panel);overscroll-behavior:contain;flex:0 0 300px;width:300px;overflow-y:auto}.main-panel{overscroll-behavior:contain;--content-max:1120px;flex:auto;min-width:0;overflow-y:auto}.shell .main-panel>.main-top-bar,.shell .pane>*{max-width:min(var(--content-max), 100%)}.pane{min-width:0}.main-panel[data-layout=wide]{--workbench-col:clamp(400px, 28%, 640px);grid-template-columns:minmax(0, 1fr) var(--workbench-col);grid-template-rows:auto minmax(0,1fr);display:grid;overflow:hidden}.main-panel[data-layout=wide]>.main-top-bar{grid-column:1/-1;max-width:none;position:static}.main-panel[data-layout=wide]>.pane{overscroll-behavior:contain;min-height:0;overflow-y:auto}.main-panel[data-layout=wide]>.pane-workbench{border-left:1px solid var(--line)}.main-panel[data-layout=wide]>.pane-pattern>*{max-width:100%}.drawer-scrim{display:none}.main-top-bar{z-index:20;background:var(--bg);border-bottom:1px solid var(--line);flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px;display:flex;position:sticky;top:0}.library-toggle{font:600 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:10px 14px;display:block}@media (width>=768px) and (width<=1100px){.sidebar{flex-basis:240px;width:240px}}@media (width>=768px){.shell[data-library=collapsed] .sidebar{display:none}}@media (width<=767px){.sidebar{z-index:40;flex-basis:auto;width:85vw;max-width:320px;transition:transform .18s;position:fixed;top:0;bottom:0;left:0;transform:translate(-100%)}.shell[data-library=open] .sidebar{transform:translate(0)}.shell[data-library=open] .library-toggle{z-index:45;margin:0;position:fixed;top:8px;right:8px}.shell[data-library=open] .main-top-bar{z-index:auto;position:static}.shell[data-library=open] .drawer-scrim{z-index:30;background:#04050a99;display:block;position:fixed;inset:0}}.pattern-header{padding:12px 12px 0}.pattern-title{font:700 20px/1.2 var(--font-ui);color:var(--ink);margin:0}.pattern-meta{color:var(--ink-dim);margin:4px 0 0;font-size:11px}.pattern-header .rating{margin-top:2px}.pattern-header .star{padding:2px 3px;font-size:18px}.pane>details{border-top:1px solid var(--line)}.pane>details>summary{font:600 12px/1 var(--font-ui);text-transform:uppercase;letter-spacing:.06em;color:var(--ink-dim);cursor:pointer;padding:12px}.pane>details[data-accordion=false]>summary{cursor:default;list-style:none}.pane>details[data-accordion=false]>summary::-webkit-details-marker{display:none}.controls,.presets,.tag-row,.recipe-picker,.degree-picker,.octave-picker,.key-picker,.counting-picker{max-width:100%}.pattern-title{width:100%;font:700 20px/1.2 var(--font-ui);color:var(--ink);background:0 0;border:0;border-bottom:1px solid #0000;padding:4px 0}.pattern-title:focus{border-bottom-color:var(--brand);outline:none}.pattern-header .undo{font:500 12px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;margin-top:6px;padding:6px 10px}.pattern-header .undo:disabled{opacity:.4;cursor:not-allowed}.new-pattern{width:100%;font:600 13px/1 var(--font-ui);color:#0b0c15;background:var(--brand);border-radius:var(--radius);cursor:pointer;border:0;margin-bottom:10px;padding:10px}.rating-filter{gap:4px;margin-bottom:8px;display:flex}.rating-option{font:500 11px/1 var(--font-ui);color:var(--ink-dim);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:0 0;padding:5px 8px}.rating-option.on{border-color:var(--brand);color:var(--brand)}.measure-meter.prominent{color:var(--brand);border-color:var(--brand);opacity:1}.measure-meter.dimmed{color:var(--ink-dim);border-color:var(--line);opacity:.55}.grid.read-only .slot,.grid.read-only .measure-meter{cursor:default}.dialog-error{font:500 12px/1.4 var(--font-ui);color:#ff8f6b;margin:0 0 12px}.dialog-actions{max-height:60vh;overflow-y:auto}.tag-add{font:500 11px/1.4 var(--font-ui);color:var(--brand);border:1px dashed var(--brand);cursor:pointer;background:0 0;border-radius:999px;padding:3px 8px}.tag-clear{font:500 11px/1.4 var(--font-ui);color:var(--ink);border:1px solid var(--ink-dim);cursor:pointer;background:0 0;border-radius:999px;padding:3px 8px}.header-tags{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.family-members{border-top:1px solid var(--line);margin-top:18px;padding-top:14px}[data-viewport=mobile] .family-members,.family-members[hidden]{display:none}.family-title{letter-spacing:.04em;text-transform:uppercase;color:var(--ink-dim);margin:0 0 8px;font-size:12px;font-weight:600}.family-list{flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;display:flex}.family-link{color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);font:inherit;cursor:pointer;background:0 0;align-items:baseline;gap:8px;padding:6px 10px;font-size:13px;display:inline-flex}.family-link:hover,.family-link:focus-visible{border-color:var(--brand)}.family-kind{color:var(--ink-dim);font-size:11px}.duplicates-view{max-width:520px}.dialog-title{margin:0 0 6px;font-size:16px}.duplicate-groups{flex-direction:column;gap:12px;max-height:45vh;margin:14px 0;padding:0;list-style:none;display:flex;overflow-y:auto}.duplicate-group{border:1px solid var(--line);border-radius:var(--radius);padding:8px}.duplicate-row{justify-content:space-between;align-items:center;gap:12px;padding:4px 2px;display:flex}.duplicate-name{font-size:14px}.duplicate-note{color:var(--ink-dim);font-size:11px}.duplicate-remove{flex:none}.recipe-strip{flex-direction:column;align-items:flex-start;gap:6px;padding:0 12px 10px;display:flex}.recipe-chips{flex-wrap:wrap;gap:4px;display:flex}.recipe-chip{min-height:32px;font:600 12px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:0 10px}.recipe-chip:hover:not(:disabled){background:#262b3a}.recipe-chip:disabled{color:var(--ink-dim);cursor:default;opacity:.5}.recipe-chip.armed{background:var(--brand);border-color:var(--brand);color:#1a1300;font-weight:700}.brush-hint{font:500 12px/1.4 var(--font-ui);color:var(--ink-dim);margin:0;padding:6px 12px 10px}.brush-hint[hidden]{display:none}.brush-hint[data-brush=subdivision],.brush-hint[data-brush=note]{color:var(--brand)}.grid.recipe-armed .beat{cursor:copy;outline:1px dashed var(--ink-dim);outline-offset:2px}.grid.recipe-armed .beat:hover{outline:2px solid var(--brand)}.paywall-backdrop{z-index:200;background:var(--bg);padding:16px;padding-top:max(16px, env(safe-area-inset-top));padding-bottom:max(16px, env(safe-area-inset-bottom));justify-content:center;align-items:center;display:flex;position:fixed;inset:0;overflow-y:auto}.paywall{background:var(--panel);border:1px solid var(--line);border-radius:8px;flex-direction:column;gap:12px;width:100%;max-width:420px;padding:24px 20px;display:flex}.paywall-title{font:700 22px/1.2 var(--font-ui);color:var(--brand);margin:0}.paywall-lede{font:400 14px/1.5 var(--font-ui);color:var(--ink-dim);margin:0 0 8px}.paywall-product{text-align:left;width:100%;color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;display:flex}.paywall-product.primary{background:var(--brand);color:#0b0c15;border-color:var(--brand)}.paywall-product:disabled{opacity:.5;cursor:not-allowed}.paywall-product-lead{font:700 15px/1.2 var(--font-ui)}.paywall-product-detail{font:400 12px/1.4 var(--font-ui);opacity:.85}.paywall-fineprint{font:400 12px/1.5 var(--font-ui);color:var(--ink-dim);margin:0}.paywall-status{font:500 13px/1.4 var(--font-ui);color:var(--ink);margin:0}.paywall-notice{color:var(--brand)}.paywall-restore{font:500 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:0 0;align-self:flex-start;margin-top:4px;padding:8px 12px}.paywall-restore:disabled{opacity:.5;cursor:not-allowed}.paywall-legal{font:400 12px/1.5 var(--font-ui);color:var(--ink-dim);margin:4px 0 0}.paywall-link{color:var(--ink-dim);text-decoration:underline}.pattern-header .purchases{font:500 12px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;margin:6px 0 0 8px;padding:6px 10px}.purchases-line{font-weight:600}.shell{padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}.chord-strip{flex-wrap:wrap;align-items:center;gap:8px;padding:8px 12px 4px;display:flex}.chord-strip[hidden]{display:none}.chord-strip-label{font:600 11px/1 var(--font-ui);color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em}.chord-list{flex-wrap:wrap;gap:6px;max-width:100%;margin:0;padding:0;list-style:none;display:flex}.chord-chip{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);min-width:56px;color:var(--ink);flex-direction:column;align-items:center;gap:2px;padding:6px 10px;display:flex}.chord-numeral{font:600 13px/1 var(--font-mono)}.chord-name{font:500 12px/1 var(--font-mono);color:var(--ink-dim)}.chord-mark{font:700 10px/1 var(--font-ui);text-transform:uppercase;letter-spacing:.08em;color:var(--ink-dim)}.chord-chip.now{background:var(--brand);border-color:var(--brand);color:#0b0c15}.chord-chip.now .chord-name,.chord-chip.now .chord-mark{color:#3d2c05}.chord-chip.next{border:2px solid var(--brand);padding:5px 9px}.chord-chip.next .chord-mark{color:var(--brand)}.measure-chord{border:1px dashed var(--line);border-radius:var(--radius);font:600 12px/1 var(--font-mono);color:var(--brand);flex:none;align-self:flex-start;padding:6px 8px}.tone-group{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.tone-group-label{font:600 11px/1 var(--font-ui);color:var(--ink-dim);text-transform:uppercase;letter-spacing:.06em;margin-right:2px}.pitch-strip .tone{flex-direction:column;justify-content:center;align-items:center;gap:1px;min-width:40px;padding:4px 6px;display:flex}.pitch-strip .tone[aria-pressed=true] .degree-name{color:#3d2c05}.pitch-strip .tone[data-stand-in]:not([aria-pressed=true]) .degree-number{color:var(--ink-dim)}.harmony{border-bottom:1px solid var(--line);flex-direction:column;gap:8px;padding:10px 12px;display:flex}.harmony[hidden]{display:none}.harmony-head,.arpeggio-row,.chord-change-group{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.progression-picker,.arpeggio-picker,.chord-root,.chord-quality{max-width:100%;font:500 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:8px 10px}.progression-picker optgroup{color:var(--ink-dim);background:#1c1f2b;font-style:normal;font-weight:600}.progression-picker option{color:var(--ink);background:#1c1f2b}.harmony button{min-height:32px;font:600 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:0 10px}.harmony button:disabled{color:var(--ink-dim);cursor:default}.harmony button[aria-pressed=true]{color:#0b0c15;background:var(--brand);border-color:var(--brand)}.chord-editors{flex-direction:column;gap:6px;margin:0;padding:0;list-style:none;display:flex}.chord-editor{flex-wrap:wrap;align-items:center;gap:6px;display:flex}.chord-editor-numeral{min-width:44px;font:600 13px/1 var(--font-mono);color:var(--brand)}.chord-editor-name{min-width:56px;font:600 13px/1 var(--font-mono);color:var(--ink)}.remove-chord{min-width:32px}.harmony-hint,.pitch-strip-note{font:500 12px/1.4 var(--font-ui);color:var(--ink-dim);margin:0}.main-top-bar .play-controls{background:0 0;border:0;flex-wrap:nowrap;align-items:center;gap:8px;padding:0;display:flex}.main-top-bar .transport{padding:10px 16px}.tempo-pinned{align-items:center;gap:4px;display:flex}.tempo-pinned .tempo-entry{width:64px}.tempo-unit{font:600 11px/1 var(--font-ui);color:var(--ink-dim);letter-spacing:.04em}.sound-mode{border:1px solid var(--line);border-radius:var(--radius);margin-top:6px;display:inline-flex;overflow:hidden}.mode-option{font:600 12px/1 var(--font-ui);color:var(--ink-dim);cursor:pointer;background:#1c1f2b;border:0;padding:7px 12px}.mode-option+.mode-option{border-left:1px solid var(--line)}.mode-option[aria-pressed=true]{color:#0b0c15;background:var(--brand)}.mode-option:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}.workbench-group{flex-direction:column;align-items:stretch;gap:12px}.workbench-group[hidden]{display:none}.workbench-group .pitch-strip,.workbench-group .harmony{border-bottom:0;padding:0}.workbench-group .recipe-strip{padding:0}.structure-row{gap:4px}.workbench-tabs{padding:4px 12px 0;display:flex}.workbench-tab{min-height:40px;font:600 13px/1 var(--font-ui);color:var(--ink-dim);border:0;border-bottom:2px solid var(--line);cursor:pointer;background:0 0;flex:1 1 0;padding:0 10px}.workbench-tab[aria-selected=true]{color:var(--brand);border-bottom-color:var(--brand)}.workbench-tab[hidden]{display:none}.workbench-tab:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}.workbench-group[data-tab-active=false]{display:none}.actions .action.danger{color:#f0a0a0;border-color:#7a2a2a;margin-left:auto}.measure{scroll-margin-top:64px}@media (width<=767px){.nav-word{display:none}.nav-button{padding:8px 10px}.main-top-bar{gap:6px}}.pattern-view{flex-direction:column;display:flex}.view-toggle{align-items:center;gap:6px;padding:8px 12px 0;display:flex}.view-button,.print-button{font:600 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:8px 14px}.view-button.on{border-color:var(--brand);color:var(--brand)}.print-button{margin-left:auto}.print-button[hidden],.grid[hidden]{display:none}.score{color:#141414;border-radius:var(--radius);background:#fbfaf6;margin:8px 12px 12px;padding:12px 8px 4px;overflow:hidden}.score[hidden]{display:none}.score-head{padding:0 8px 4px}.score-title{color:#141414;margin:0;font:700 18px/1.2 Georgia,Times New Roman,serif}.score-meta{margin-top:4px;font:500 13px/1.3 Georgia,Times New Roman,serif}.score-sep{opacity:.5;margin:0 8px}.score-swing{font:italic 500 13px/1.3 Georgia,Times New Roman,serif}.score-row{line-height:0}.score-pass-label{color:#555;padding:6px 8px 0;font:italic 500 12px/1.2 Georgia,Times New Roman,serif}.score-line{max-width:100%;display:block}.score-line .staff-line,.score-line .ledger,.score-line .barline{stroke:#141414;stroke-width:1px}.score-line .barline.final,.score-line .notehead,.score-line .rest,.score-line .beam,.score-line .flag,.score-line .clef rect,.score-line .accidental path,.score-line .dot{fill:#141414}.score-line .stem,.score-line .tie,.score-line .accent,.score-line .tuplet-bracket,.score-line .clef,.score-line .accidental path[fill=none],.score-line .rest path[fill=none]{stroke:#141414}.score-line .accidental path[fill=none],.score-line .rest path[fill=none]{fill:none}.score-line text{fill:#141414;font-family:Georgia,Times New Roman,serif}.score-line .meter,.score-line .chord-name{font-weight:700}.score-line .pass-label{fill:#555;font-style:italic}.score-line .count{font-family:var(--font-ui);font-weight:600}.score-line .count.muted{fill:#8a8a8a;font-weight:500}.score-line .item.playing .notehead,.score-line .item.playing .rest,.score-line .item.playing .flag{fill:#d4880c}.score-line .item.playing .stem,.score-line .item.playing .accent{stroke:#d4880c}.score-print{display:none}@media print{@page{margin:12mm}html,body{background:#fff;height:auto;overflow:visible}body>:not(.score-print){display:none!important}.score-print{color:#141414;background:#fff;font-family:Georgia,Times New Roman,serif;display:block}.score-print .score-head{padding:0 0 8px}.score-print .score-title{font-size:20px}.score-print .score-row{break-inside:avoid;page-break-inside:avoid;line-height:0}.score-print .score-pass-label{break-after:avoid;page-break-after:avoid}.score-print .score-line{width:100%;height:auto}}.fill-cycle-row{flex-wrap:wrap;align-items:center;gap:8px;padding:4px 12px 8px;display:flex}.fill-cycle{font:600 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:8px 14px}.fill-cycle.on{border-color:var(--brand);color:var(--brand)}.fill-cycle-repeats{width:64px;font:600 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);background:#1c1f2b;padding:7px 8px}.fill-cycle-unit{font:500 12px/1.4 var(--font-ui);color:var(--ink-dim)}.keep-fill{font:600 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:8px 14px}.keep-fill.on{border-color:var(--brand);color:var(--brand)}.keep-fill:disabled{opacity:.5;cursor:default}.kept-count{font:500 12px/1.4 var(--font-ui);color:var(--ink-dim)}.compose-group[hidden]{display:none}.compose-group>*{padding:4px 12px}.compose-label{font:600 12px/1.4 var(--font-ui);color:var(--ink-dim);text-transform:uppercase;letter-spacing:.04em}.compose-progression{font:500 14px/1.5 var(--font-ui);color:var(--ink);margin:0}.compose-hint,.compose-empty,.compose-empty-palette,.compose-total{font:500 12px/1.5 var(--font-ui);color:var(--ink-dim);margin:4px 0}.palette-row,.compose-actions{flex-wrap:wrap;gap:8px;margin-top:6px;display:flex}.palette-fill,.play-song,.song-save,.song-new,.song-export,.song-load,.song-rename,.song-delete,.entry-up,.entry-down,.entry-remove{font:600 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);cursor:pointer;background:#1c1f2b;padding:8px 12px}.play-song.on,.song-item.current .song-load{border-color:var(--brand);color:var(--brand)}button:disabled.palette-fill,.play-song:disabled,.song-save:disabled,.song-export:disabled,.entry-up:disabled,.entry-down:disabled{opacity:.5;cursor:default}.compose-song-list,.compose-entries{flex-direction:column;gap:6px;margin:6px 0 0;padding:0;list-style:none;display:flex}.compose-entries{list-style:inside decimal}.song-item,.compose-entry{border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;align-items:center;gap:8px;padding:6px 8px;display:flex}.compose-entry.playing{border-color:var(--brand)}.entry-fill{font:600 13px/1.4 var(--font-ui);color:var(--ink);min-width:120px}.entry-repeats{width:56px;font:600 13px/1 var(--font-ui);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);background:#1c1f2b;padding:6px 8px}.entry-passes{font:500 12px/1.4 var(--font-ui);color:var(--ink-dim)}.compose-section-head{align-items:baseline;gap:10px;display:flex}.compose-unsaved{font:500 12px/1.4 var(--font-ui);color:var(--warn,#e0a030)}.score-fill{font:italic 500 13px/1.3 Georgia,Times New Roman,serif}