@font-face{font-family:Alegreya;font-style:normal;font-weight:700;font-display:swap;src:url(./alegreya-700-BU43cj6K.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Alegreya;font-style:italic;font-weight:400 700;font-display:swap;src:url(./alegreya-italic-BNGsTFBD.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Alegreya Sans;font-style:normal;font-weight:400;font-display:swap;src:url(./alegreya-sans-400-CUl-7pZ6.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Alegreya Sans;font-style:normal;font-weight:500;font-display:swap;src:url(./alegreya-sans-500-DqiCFOjO.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Alegreya Sans;font-style:normal;font-weight:700;font-display:swap;src:url(./alegreya-sans-700-wtMREkJN.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Ubuntu Mono;font-style:normal;font-weight:400;font-display:swap;src:url(./ubuntu-mono-400-iwCq4I-a.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Ubuntu Mono;font-style:normal;font-weight:700;font-display:swap;src:url(./ubuntu-mono-700-CZ6hngJh.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--color-olo: #00ffcc;--font-title: "Alegreya", Georgia, "Palatino Linotype", Palatino, serif;--font-body: "Alegreya Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--font-mono: "Ubuntu Mono", "SF Mono", "Cascadia Code", Consolas, Menlo, monospace;--r-sm: 6px;--r-md: 10px;--r-lg: 14px;--r-pill: 999px;--gap: 10px;--hit: 36px;--chip: 30px;--thumb: 18px;--field-font: 13px;--ease: cubic-bezier(.16, 1, .3, 1);--fast: .12s;--slow: .22s;--gel-spec: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 0, 0, .18);--gel-gloss: linear-gradient(180deg, rgba(255, 255, 255, .5) 0%, rgba(255, 255, 255, .08) 100%)}@media(pointer:coarse){:root{--hit: 44px;--chip: 40px;--thumb: 22px;--field-font: 16px}}:root,[data-theme=light]{color-scheme:light;--bg: #e9eef3;--bg-gradient: linear-gradient(160deg, #e3ebf4 0%, #f1f5f9 50%, #e6edf5 100%);--canvas-bg: #ffffff;--staff-color: #64748b;--playhead-color: #e11d48;--text: #0f172a;--text-muted: #4b5d75;--emboss: 0 1px 0 rgba(255, 255, 255, .85);--accent: #008269;--accent-strong: #006652;--accent-tint: rgba(0, 196, 158, .13);--focus-ring: 0 0 0 3px rgba(0, 170, 140, .45);--danger: #e11d48;--glass-bg: rgba(255, 255, 255, .74);--glass-solid: rgba(248, 250, 252, .94);--glass-edge: rgba(148, 163, 184, .42);--glass-spec: rgba(255, 255, 255, .95);--glass-shadow: 0 6px 24px -6px rgba(15, 23, 42, .14), 0 1px 3px rgba(15, 23, 42, .05);--glass-blur: blur(16px) saturate(170%);--acrylic-bg: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);--acrylic-hover: linear-gradient(180deg, #ffffff 0%, #e8eef5 100%);--acrylic-border: #cbd5e1;--acrylic-shadow: inset 0 1px 0 #ffffff, 0 1px 2px rgba(15, 23, 42, .08);--well-bg: rgba(226, 232, 240, .55);--card-bg: rgba(255, 255, 255, .5);--well-border: rgba(148, 163, 184, .4);--well-shadow: inset 0 1px 2px rgba(15, 23, 42, .08), 0 1px 0 rgba(255, 255, 255, .8);--gel-bg: linear-gradient(180deg, #17a387 0%, #00826a 50%, #006e58 100%);--gel-hover: linear-gradient(180deg, #1aae90 0%, #008a70 50%, #00755e 100%);--gel-border: #005c4a;--gel-ink: #ffffff;--gel-ink-shadow: 0 -1px 0 rgba(0, 50, 40, .5);--gel-glow: 0 2px 10px rgba(0, 130, 105, .32);--amber-bg: linear-gradient(180deg, #fcd34d 0%, #fbbf24 50%, #f59e0b 100%);--amber-hover: linear-gradient(180deg, #fde68a 0%, #fcd34d 50%, #fbbf24 100%);--amber-border: #b45309;--amber-ink: #3a1d00;--amber-glow: 0 2px 10px rgba(245, 158, 11, .35);--track-bg: linear-gradient(180deg, #cbd5e1 0%, #e2e8f0 100%);--track-shadow: inset 0 1px 2px rgba(15, 23, 42, .2), 0 1px 0 rgba(255, 255, 255, .8);--bead: radial-gradient(circle at 35% 35%, #ffffff 0%, #00ffcc 30%, #009e80 75%, #006652 100%);--bead-border: #00705a;--bead-shadow: 0 2px 6px rgba(0, 158, 128, .4), 0 1px 2px rgba(0, 0, 0, .2);--led-off: radial-gradient(circle at 35% 35%, #ffffff 0%, #cbd5e1 70%, #94a3b8 100%);--led-off-shadow: inset 0 1px 2px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .8);--led-on: radial-gradient(circle at 35% 35%, #ffffff 0%, #00ffcc 35%, #00b894 75%, #00705a 100%);--led-on-glow: 0 0 10px #00ffcc, 0 0 20px rgba(0, 255, 204, .55), inset 0 1px 1px #ffffff;--led-down: radial-gradient(circle at 35% 35%, #ffffff 0%, #f43f5e 30%, #e11d48 80%, #9f1239 100%);--led-down-glow: 0 0 12px #f43f5e, 0 0 22px rgba(225, 29, 72, .6), inset 0 1px 1px #ffffff;--led-mid: radial-gradient(circle at 35% 35%, #ffffff 0%, #fb923c 30%, #f97316 80%, #c2410c 100%);--led-mid-glow: 0 0 11px #fb923c, 0 0 21px rgba(249, 115, 22, .6), inset 0 1px 1px #ffffff}[data-theme=dark]{color-scheme:dark;--bg: #0b1220;--bg-gradient: linear-gradient(160deg, #070b14 0%, #0d1628 50%, #080e1a 100%);--canvas-bg: #0f172a;--staff-color: #64748b;--playhead-color: #f43f5e;--text: #f1f5f9;--text-muted: #94a3b8;--emboss: 0 1px 2px rgba(0, 0, 0, .8);--accent: #00ffcc;--accent-strong: #5fffe0;--accent-tint: rgba(0, 255, 204, .11);--focus-ring: 0 0 0 3px rgba(0, 255, 204, .4);--danger: #f43f5e;--glass-bg: rgba(13, 22, 40, .78);--glass-solid: rgba(13, 22, 40, .95);--glass-edge: rgba(0, 0, 0, .55);--glass-spec: rgba(255, 255, 255, .08);--glass-shadow: 0 8px 28px -6px rgba(0, 0, 0, .6), 0 1px 3px rgba(0, 0, 0, .35);--glass-blur: blur(16px) saturate(180%);--acrylic-bg: linear-gradient(180deg, #1e293b 0%, #162033 100%);--acrylic-hover: linear-gradient(180deg, #26344b 0%, #1b273c 100%);--acrylic-border: rgba(100, 116, 139, .45);--acrylic-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), 0 1px 2px rgba(0, 0, 0, .4);--well-bg: rgba(2, 6, 23, .5);--card-bg: rgba(15, 23, 42, .55);--well-border: rgba(51, 65, 85, .75);--well-shadow: inset 0 1px 3px rgba(0, 0, 0, .45), 0 1px 0 rgba(255, 255, 255, .04);--gel-bg: linear-gradient(180deg, #5dffe0 0%, #00f0c0 50%, #00c9a2 100%);--gel-hover: linear-gradient(180deg, #8affea 0%, #2bffd4 50%, #00dcb2 100%);--gel-border: rgba(0, 255, 204, .7);--gel-ink: #00261e;--gel-ink-shadow: 0 1px 0 rgba(255, 255, 255, .35);--gel-glow: 0 2px 14px rgba(0, 255, 204, .35);--amber-border: rgba(251, 191, 36, .7);--amber-glow: 0 2px 12px rgba(245, 158, 11, .35);--track-bg: linear-gradient(180deg, #090e1a 0%, #172033 100%);--track-shadow: inset 0 1px 3px rgba(0, 0, 0, .6), 0 1px 0 rgba(255, 255, 255, .06);--bead: radial-gradient(circle at 35% 35%, #ffffff 0%, #33ffdb 30%, #00bfa5 75%, #006954 100%);--bead-border: #00ffcc;--bead-shadow: 0 2px 8px rgba(0, 255, 204, .45), 0 1px 2px rgba(0, 0, 0, .6);--led-off: radial-gradient(circle at 35% 35%, #334155 0%, #1e293b 70%, #0f172a 100%);--led-off-shadow: inset 0 1px 2px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .08);--led-on: radial-gradient(circle at 35% 35%, #ffffff 0%, #00ffcc 30%, #00bfa5 75%, #005a4e 100%);--led-on-glow: 0 0 12px #00ffcc, 0 0 22px rgba(0, 255, 204, .65), inset 0 1px 1px #ffffff;--led-down-glow: 0 0 14px #f43f5e, 0 0 24px rgba(244, 63, 94, .7), inset 0 1px 1px #ffffff;--led-mid-glow: 0 0 13px #fb923c, 0 0 23px rgba(251, 146, 60, .7), inset 0 1px 1px #ffffff}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;overflow:hidden;background:var(--bg-gradient);background-color:var(--bg);color:var(--text);font-family:var(--font-body);font-size:14px;line-height:1.4;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}kbd{font-family:var(--font-mono)}html[data-i18n-pending] body{visibility:hidden}button,select,input{font:inherit;color:inherit}.sprite{position:absolute;width:0;height:0;overflow:hidden}.hidden{display:none!important}#app{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;position:relative}.icon{display:block;width:16px;height:16px;flex-shrink:0}.fullscreen-icon{display:block}.music-icon{display:inline-block;flex-shrink:0;fill:currentColor;width:.36em;height:1.15em}.icon-eighth{width:.59em}.icon-sixteenth{width:.61em}.icon-thirty-second{width:.61em;height:1.38em}.icon-dotted{width:.47em}.icon-whole{width:.95em;height:.58em}.icon-rest{width:.4em;height:1.05em}.icon-tie{width:1.2em;height:.75em}.icon-playhead{width:.82em;height:1.05em;color:var(--playhead-color)}.control-panel{position:relative;z-index:20;padding:max(10px,env(safe-area-inset-top)) max(16px,env(safe-area-inset-right)) 10px max(16px,env(safe-area-inset-left));border-bottom:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);user-select:none;-webkit-user-select:none}.control-panel:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#ffffff1a,#fff0),var(--glass-bg);box-shadow:inset 0 1px 0 var(--glass-spec);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur)}.primary-bar{display:grid;grid-template-columns:auto auto minmax(220px,380px) auto 1fr;grid-template-areas:"brand transport tempo beats utils";align-items:center;gap:10px 20px}.brand{grid-area:brand}.playback-controls{grid-area:transport}.tempo-group{grid-area:tempo}.beat-indicator-container{grid-area:beats;justify-self:start}.utility-actions{grid-area:utils;justify-self:end}.brand{display:inline-flex;align-items:center;gap:8px}.brand-mark{width:26px;height:26px;flex:none;color:var(--text)}.brand h1{font-family:var(--font-title);font-size:22px;font-weight:700;letter-spacing:.2px;line-height:1.1;white-space:nowrap;text-shadow:var(--emboss)}.brand-badge{font-size:10px;font-weight:700;letter-spacing:.08em;padding:1px 7px;border-radius:var(--r-pill);background:var(--accent-tint);color:var(--accent-strong);border:1px solid var(--accent)}.playback-controls,.utility-actions{display:flex;align-items:center;gap:8px}.btn,.btn-icon-only,.btn-mute,.btn-pill-action,.btn-close{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:7px;flex-shrink:0;height:var(--hit);min-width:var(--hit);border:1px solid var(--acrylic-border);border-radius:var(--r-md);background:var(--acrylic-bg);box-shadow:var(--acrylic-shadow);color:var(--text);cursor:pointer;text-decoration:none;white-space:nowrap;transition:transform var(--fast) ease,box-shadow var(--fast) ease,border-color var(--fast) ease,color var(--fast) ease}.btn{padding:0 14px;font-size:13px;font-weight:700;letter-spacing:.02em}.btn-icon-only,.btn-mute,.btn-close{padding:0;width:var(--hit)}.btn:active,.btn-icon-only:active,.btn-mute:active,.btn-pill-action:active,.btn-close:active{transform:translateY(1px);box-shadow:inset 0 1px 3px #0000002e}:is(.btn,.btn-icon-only,.btn-mute,.btn-pill-action,.btn-pill-label,.btn-close,.btn-text,.btn-link):focus-visible{outline:none;box-shadow:var(--acrylic-shadow),var(--focus-ring)}@media(hover:hover){:is(.btn-secondary,.btn-icon-only,.btn-mute,.btn-pill-action,.btn-close,.btn-menu):hover{background:var(--acrylic-hover);border-color:var(--accent);color:var(--accent-strong)}}.btn-primary{min-width:118px;background:var(--gel-bg);border-color:var(--gel-border);color:var(--gel-ink);text-shadow:var(--gel-ink-shadow);box-shadow:var(--gel-spec),var(--gel-glow);overflow:hidden}.btn-primary:before{content:"";position:absolute;inset:1px 1px 52%;border-radius:calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 40% 40% / calc(var(--r-md) - 2px) calc(var(--r-md) - 2px) 6px 6px;background:var(--gel-gloss);opacity:.55;pointer-events:none}.btn-primary .icon{filter:drop-shadow(var(--gel-ink-shadow))}.btn-primary .btn-icon{display:inline-flex}.btn-primary .icon-pause,.btn-primary.playing .icon-play{display:none}.btn-primary.playing .icon-pause{display:block}.btn-primary.playing{background:var(--amber-bg);border-color:var(--amber-border);color:var(--amber-ink);text-shadow:0 1px 0 rgba(255,255,255,.35);box-shadow:var(--gel-spec),var(--amber-glow)}.btn-primary:focus-visible{box-shadow:var(--gel-spec),var(--focus-ring)}@media(hover:hover){.btn-primary:hover{background:var(--gel-hover)}.btn-primary.playing:hover{background:var(--amber-hover)}}.btn-drawer-toggle[aria-expanded=true]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-strong);box-shadow:inset 0 1px 2px #0000001f}.btn-level-toggle .lv-plate{--lv-weight: .75;transform-box:fill-box;transform-origin:center;transform:scaleY(var(--lv-weight));transition:transform var(--fast) ease,fill var(--fast) ease}.btn-level-toggle[data-level="1"] .lv-plate{--lv-weight: .5}.btn-level-toggle[data-level="2"] .lv-plate{--lv-weight: .625}.btn-level-toggle[data-level="3"] .lv-plate{--lv-weight: .75}.btn-level-toggle[data-level="4"] .lv-plate{--lv-weight: .875}.btn-level-toggle[data-level="5"] .lv-plate{--lv-weight: 1}.btn-level-toggle:not([data-level="0"]) .lv-plate{fill:var(--accent)}.btn-level-toggle .btn-label{min-width:73px;text-align:left}#btn-theme-toggle .icon{display:none}#btn-theme-toggle[data-mode=auto] .theme-auto,#btn-theme-toggle[data-mode=light] .theme-light,#btn-theme-toggle[data-mode=dark] .theme-dark{display:block}.tempo-group{display:flex;flex-direction:column;gap:3px;min-width:0}.tempo-head{display:flex;align-items:baseline;gap:8px}.tempo-term{font-family:var(--font-title);font-style:italic;font-size:14px;color:var(--accent-strong);line-height:1}.tempo-inputs{display:flex;align-items:center;gap:10px}.tempo-readout{display:inline-flex;align-items:baseline;gap:3px;height:var(--hit);padding:0 8px 0 4px;border-radius:var(--r-md);background:var(--well-bg);border:1px solid var(--well-border);box-shadow:var(--well-shadow);flex-shrink:0}.tempo-readout:focus-within{border-color:var(--accent);box-shadow:var(--well-shadow),var(--focus-ring)}.tempo-readout input[type=number]{width:3ch;height:100%;border:none;background:none;outline:none;text-align:right;font-family:var(--font-mono);font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;appearance:textfield;-moz-appearance:textfield}.tempo-readout input::-webkit-inner-spin-button,.tempo-readout input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.tempo-unit{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;color:var(--text-muted)}.tempo-inputs input[type=range]{flex:1;min-width:80px}input[type=range]{-webkit-appearance:none;appearance:none;height:var(--hit);background:transparent;cursor:pointer;touch-action:pan-y}input[type=range]:focus{outline:none}input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:var(--r-pill);background:var(--track-bg);box-shadow:var(--track-shadow)}input[type=range]::-moz-range-track{height:6px;border-radius:var(--r-pill);background:var(--track-bg);box-shadow:var(--track-shadow)}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:var(--thumb);height:var(--thumb);margin-top:calc((6px - var(--thumb)) / 2);border-radius:50%;background:var(--bead);border:1px solid var(--bead-border);box-shadow:var(--bead-shadow);transition:transform var(--fast) ease}input[type=range]::-moz-range-thumb{width:var(--thumb);height:var(--thumb);border-radius:50%;background:var(--bead);border:1px solid var(--bead-border);box-shadow:var(--bead-shadow)}input[type=range]:active::-webkit-slider-thumb{transform:scale(1.12)}input[type=range]:focus-visible::-webkit-slider-thumb{box-shadow:var(--bead-shadow),var(--focus-ring)}input[type=range]:focus-visible::-moz-range-thumb{box-shadow:var(--bead-shadow),var(--focus-ring)}.beat-indicator-container{position:relative;display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:var(--r-pill);background:var(--well-bg);border:1px solid var(--well-border);box-shadow:var(--well-shadow)}.badge-count-in{position:absolute;bottom:calc(100% + 4px);left:50%;transform:translate(-50%);white-space:nowrap;pointer-events:none;z-index:5;padding:1px 6px;border-radius:4px;background:#e11d48;color:#fff;font-size:9px;font-weight:700;letter-spacing:.08em;line-height:1.2;box-shadow:0 1px 3px #0000004d;animation:pulse .5s infinite alternate}.badge-count-in.hidden{display:none}@keyframes pulse{0%{opacity:.6}to{opacity:1}}.beat-dots{display:flex;align-items:center;gap:8px}.beat-dot{width:13px;height:13px;position:relative;border-radius:50%;background:var(--led-off);box-shadow:var(--led-off-shadow)}.beat-dot:after{content:"";position:absolute;inset:0;z-index:1;border-radius:50%;background:var(--led-on);box-shadow:var(--led-on-glow);opacity:0;will-change:transform,opacity;transition:opacity .08s ease-out,transform .08s ease-out}.beat-dot.downbeat:after{background:var(--led-down);box-shadow:var(--led-down-glow)}.beat-dot.secondary:after{background:var(--led-mid);box-shadow:var(--led-mid-glow)}.beat-dot.active:after{opacity:1;transform:scale(1.28);transition:transform .08s ease-out}.beat-dot.active.downbeat:after{transform:scale(1.42)}.beat-dot.active.secondary:after{transform:scale(1.35)}.beat-dots.grouped{gap:2px}.beat-dots.grouped .beat-dot:not(.sub):not(:first-child){margin-left:4px}.beat-dot.sub{width:5px;height:5px}.drawer-inner{display:grid;grid-template-columns:minmax(220px,.9fr) minmax(300px,1.35fr) minmax(250px,1fr) minmax(250px,1fr);gap:var(--gap);padding-top:10px}.settings-section{display:flex;flex-wrap:wrap;align-content:flex-start;gap:10px 12px;min-width:0;padding:9px 12px 12px;border-radius:var(--r-lg);background:var(--card-bg);border:1px solid var(--well-border);box-shadow:var(--well-shadow)}.section-title{flex-basis:100%;display:flex;align-items:center;gap:8px;font-family:var(--font-title);font-style:italic;font-size:15px;font-weight:700;line-height:1.2;text-shadow:var(--emboss)}.section-title:after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--well-border),transparent)}.control-group{display:flex;flex-direction:column;gap:4px;min-width:0;border:none}.control-group>label,.control-group legend,.group-label,.tempo-head label{padding:0;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-muted)}fieldset.control-group{display:block}fieldset.control-group legend{margin-bottom:4px}.subdivisions-group,.intervals-group,.tuplets-group{flex-basis:100%}.clef-group{flex:1 1 150px}select{-webkit-appearance:none;appearance:none;height:var(--chip);min-width:0;padding:0 28px 0 10px;border:1px solid var(--acrylic-border);border-radius:var(--r-sm);background-image:linear-gradient(45deg,transparent 50%,var(--text-muted) 50%),linear-gradient(135deg,var(--text-muted) 50%,transparent 50%),var(--acrylic-bg);background-position:calc(100% - 15px) 52%,calc(100% - 10px) 52%,0 0;background-size:5px 5px,5px 5px,100% 100%;background-repeat:no-repeat;box-shadow:var(--acrylic-shadow);font-size:var(--field-font);font-weight:500;cursor:pointer;transition:border-color var(--fast) ease,box-shadow var(--fast) ease}select:focus-visible{outline:none;border-color:var(--accent);box-shadow:var(--acrylic-shadow),var(--focus-ring)}@media(hover:hover){select:hover{border-color:var(--accent)}}.ledger-select-row{display:flex;align-items:center;gap:6px}.clef-range-hint{font-family:var(--font-mono);font-size:12px;color:var(--text-muted);white-space:nowrap;padding-left:2px}.checkbox-grid{display:flex;flex-wrap:wrap;gap:6px}.checkbox-item{position:relative;display:inline-flex}.checkbox-item input{position:absolute;width:1px;height:1px;opacity:0;clip-path:inset(50%);pointer-events:none}.checkbox-item span{display:inline-flex;align-items:center;gap:6px;height:var(--chip);padding:0 11px 0 9px;border:1px solid var(--acrylic-border);border-radius:var(--r-pill);background:var(--acrylic-bg);box-shadow:var(--acrylic-shadow);font-size:13px;font-weight:500;white-space:nowrap;cursor:pointer;transition:border-color var(--fast) ease,color var(--fast) ease,box-shadow var(--fast) ease}.checkbox-item span:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--led-off);box-shadow:var(--led-off-shadow);flex-shrink:0}.checkbox-item input:checked+span{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-strong);box-shadow:inset 0 1px 2px #00000014}.checkbox-item input:checked+span:before{background:var(--led-on);box-shadow:0 0 6px var(--color-olo)}.checkbox-item input:focus-visible+span{box-shadow:var(--acrylic-shadow),var(--focus-ring)}@media(hover:hover){.checkbox-item span:hover{border-color:var(--accent)}}.checkbox-item.is-dormant span{opacity:.45;border-style:dashed;box-shadow:none}.melody-hint{margin:8px 0 0;font-size:12px;line-height:1.4;color:var(--text-muted)}.volume-group{flex:1 1 180px}.volume-inputs{display:flex;align-items:center;gap:8px}.volume-inputs input[type=range]{flex:1;min-width:80px}.btn-mute{width:var(--chip);height:var(--chip);min-width:var(--chip);border-radius:var(--r-pill)}.btn-mute .icon-muted,.btn-mute.muted .icon-speaker{display:none}.btn-mute.muted .icon-muted{display:block}.btn-mute.muted{color:var(--danger);border-color:var(--danger)}.tuplets-group{position:relative}.btn-menu{height:var(--chip);padding:0 10px;border-radius:var(--r-pill);font-size:13px;font-weight:500}.btn-menu.has-active{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-strong)}.btn-menu.open{border-color:var(--accent);box-shadow:inset 0 1px 3px #00000024}.menu-arrow{width:12px;height:12px;transition:transform var(--fast) ease}.btn-menu.open .menu-arrow{transform:rotate(180deg)}.badge-count{min-width:18px;height:18px;padding:0 5px;border-radius:var(--r-pill);background:var(--gel-bg);border:1px solid var(--gel-border);color:var(--gel-ink);box-shadow:var(--gel-spec);font-family:var(--font-mono);font-size:11px;font-weight:700;line-height:16px;text-align:center}.tuplets-popover{position:absolute;top:calc(100% + 6px);left:0;z-index:40;width:max-content;max-width:calc(100vw - 32px);border-radius:var(--r-lg);background:var(--glass-solid);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-spec);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);overflow-y:auto;overscroll-behavior:contain;animation:pop var(--slow) var(--ease)}@keyframes pop{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}.tuplets-popover-header,.tuplets-popover-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px 8px 14px}.tuplets-popover-header{border-bottom:1px solid var(--well-border)}.tuplets-popover-title{font-family:var(--font-title);font-style:italic;font-weight:700;font-size:15px}.tuplets-popover-actions{display:flex;align-items:center;gap:4px}.btn-text,.btn-link{background:none;border:none;border-radius:var(--r-sm);color:var(--accent-strong);font-size:12px;font-weight:700;cursor:pointer}.btn-text{height:var(--hit);padding:0 8px}.btn-close{border-color:transparent;background:transparent;box-shadow:none;border-radius:50%}.tuplets-table-wrapper{overflow-x:auto;padding:4px 8px}.tuplets-table{border-collapse:collapse;width:100%;font-size:12px}.tuplets-table th{font-weight:700;color:var(--text-muted);white-space:nowrap}.tuplets-table thead th{padding:6px 10px;font-size:11px;text-transform:uppercase;letter-spacing:.04em}.th-val{text-align:center}.th-val .music-icon{vertical-align:-.2em;margin-left:2px}.tuplets-table .th-row{padding:0 12px 0 6px;text-align:left;color:var(--text);font-weight:500}.tuplets-table td{padding:0;text-align:center}.tuplets-table tbody tr+tr{border-top:1px solid var(--well-border)}.tuplet-cell-label{display:flex;align-items:center;justify-content:center;min-width:52px;height:var(--hit);cursor:pointer}.tuplet-cell-label input{-webkit-appearance:none;appearance:none;display:grid;place-content:center;width:20px;height:20px;border-radius:6px;border:1px solid var(--acrylic-border);background:var(--well-bg);box-shadow:var(--well-shadow);cursor:inherit;transition:border-color var(--fast) ease}.tuplet-cell-label input:before{content:"";width:11px;height:11px;background:var(--gel-ink);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%);transform:scale(0);transition:transform var(--fast) var(--ease)}.tuplet-cell-label input:checked{background:var(--gel-bg);border-color:var(--gel-border);box-shadow:var(--gel-spec)}.tuplet-cell-label input:checked:before{transform:scale(1)}.tuplet-cell-label input:focus-visible{outline:none;box-shadow:var(--focus-ring)}.tuplet-cell-label:has(input:disabled){opacity:.32;cursor:not-allowed}@media(hover:hover){.tuplets-table tbody tr:hover{background:var(--accent-tint)}.tuplet-cell-label:hover input:not(:disabled){border-color:var(--accent)}.btn-text:hover,.btn-link:hover{text-decoration:underline}}.tuplets-popover-footer{border-top:1px solid var(--well-border);font-size:11px;color:var(--text-muted);font-style:italic}.canvas-wrapper{position:relative;flex:1;min-height:0;overflow:hidden;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);background-color:var(--canvas-bg)}#scroller-canvas{position:absolute;top:0;left:env(safe-area-inset-left);display:block}.canvas-wrapper:after{content:"";position:absolute;top:0;right:env(safe-area-inset-right);bottom:0;width:32px;background:linear-gradient(90deg,transparent,var(--canvas-bg));pointer-events:none}.canvas-zoom-pill{position:absolute;right:calc(14px + env(safe-area-inset-right));bottom:calc(14px + env(safe-area-inset-bottom));z-index:2;display:inline-flex;align-items:center;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--glass-bg);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-spec);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);user-select:none;-webkit-user-select:none}.btn-pill-action{width:var(--hit);height:var(--hit);padding:0;border-radius:50%;font-family:var(--font-mono);font-size:18px;font-weight:700;line-height:1}.btn-pill-label{min-width:52px;height:var(--hit);padding:0 6px;border:none;border-radius:var(--r-pill);background:transparent;font-family:var(--font-mono);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color var(--fast) ease,color var(--fast) ease}.btn-pill-label.active{color:var(--accent-strong)}@media(hover:hover){.btn-pill-label:hover{background:var(--accent-tint);color:var(--accent-strong)}}.stage-notice{position:absolute;top:calc(12px + env(safe-area-inset-top));left:14px;right:14px;z-index:2;width:fit-content;max-width:calc(100% - 28px);margin-inline:auto;align-items:center;gap:10px;padding:4px 4px 4px 14px;border-radius:var(--r-lg);background:var(--glass-bg);border:1px solid var(--glass-edge);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-spec);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:var(--text-muted);font-size:13px;line-height:1.3;animation:notice-in var(--slow) var(--ease)}.stage-notice>.icon{flex-shrink:0;color:var(--accent)}.stage-notice strong{display:block;color:var(--text)}.orientation-notice{display:none}@media(orientation:portrait)and (pointer:coarse)and (max-width:600px){.orientation-notice:not([hidden]){display:flex}}.tip-notice:not([hidden]){display:flex;flex-wrap:wrap;max-width:min(640px,calc(100% - 28px))}.tip-body{flex:1 1 220px;padding-block:4px}.tip-actions,.tip-social{display:inline-flex;align-items:center;gap:4px}.tip-actions{margin-left:auto}.tip-notice [hidden]{display:none}.tip-social .icon{width:15px;height:15px}@keyframes notice-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.shortcuts-hint{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 18px;padding:6px max(16px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left));background:var(--glass-bg);border-top:1px solid var(--glass-edge);box-shadow:inset 0 1px 0 var(--glass-spec);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);font-size:12px;color:var(--text-muted)}kbd{display:inline-block;min-width:18px;padding:1px 5px;border:1px solid var(--acrylic-border);border-bottom-width:2px;border-radius:4px;background:var(--acrylic-bg);box-shadow:inset 0 1px 0 var(--glass-spec);color:var(--text);font-size:11px;font-weight:700;text-align:center}.footer-source{display:inline-flex;align-items:center;gap:8px}.footer-source a{color:var(--accent-strong);font-weight:700;text-underline-offset:2px}.footer-source .social-link .icon{width:15px;height:15px}.btn-link{padding:0;text-decoration:underline;text-underline-offset:2px}dialog.about-dialog{width:calc(100% - 32px);max-width:540px;max-height:calc(100dvh - 32px);margin:auto;padding:0;border:1px solid var(--glass-edge);border-radius:var(--r-lg);background:var(--glass-solid);box-shadow:var(--glass-shadow),inset 0 1px 0 var(--glass-spec);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);color:var(--text);animation:pop var(--slow) var(--ease)}dialog.about-dialog::backdrop{background:#02061780;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}.about-dialog-content{display:flex;flex-direction:column;max-height:inherit}.about-dialog-header,.about-dialog-footer{display:flex;align-items:center;gap:10px;padding:12px 14px 12px 22px}.about-dialog-header{justify-content:space-between;border-bottom:1px solid var(--well-border)}.about-dialog-header h2{font-family:var(--font-title);font-size:20px;font-weight:700;text-shadow:var(--emboss)}.about-dialog-body{display:flex;flex-direction:column;gap:16px;padding:18px 22px;overflow-y:auto;font-size:14px;line-height:1.55}.about-tagline{color:var(--text-muted)}.about-meta-grid{display:flex;flex-direction:column;gap:8px;padding:12px 16px;border-radius:var(--r-md);background:var(--well-bg);border:1px solid var(--well-border);box-shadow:var(--well-shadow)}.about-meta-row{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}.meta-label{color:var(--text-muted);font-weight:500}.meta-value{font-weight:500;text-align:right}.badge-license{display:inline-block;padding:1px 7px;border-radius:4px;background:var(--accent-tint);color:var(--accent-strong);border:1px solid var(--accent);font-family:var(--font-mono);font-size:11px;font-weight:700}.link-external{color:var(--accent-strong);text-underline-offset:2px}.about-section{display:flex;flex-direction:column;gap:4px}.about-version{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:4px 12px}.about-version a{font-family:var(--font-mono)}.whats-new-release{display:flex;flex-direction:column;gap:4px}.whats-new-release+.whats-new-release{padding-top:14px;border-top:1px solid var(--well-border)}.whats-new-release h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-family:var(--font-title);font-size:17px;font-weight:700}.whats-new-release time{color:var(--text-muted);font-family:var(--font-body);font-size:13px;font-weight:500}.whats-new-release h4{margin-top:6px;color:var(--accent-strong);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}.whats-new-release ul{display:flex;flex-direction:column;gap:4px;padding-left:18px}.social-links{display:inline-flex;flex-wrap:wrap;justify-content:flex-end;gap:4px 14px}.social-link{display:inline-flex;align-items:center;gap:5px}.social-link .icon{width:14px;height:14px}.donate-link{align-self:flex-start}.about-section h3{font-family:var(--font-title);font-style:italic;font-size:16px;font-weight:700}.about-dialog-footer{flex-wrap:wrap;justify-content:flex-end;padding-right:22px;border-top:1px solid var(--well-border)}.about-dialog-footer .btn{flex-shrink:1;height:auto;min-height:var(--hit);padding-block:6px;line-height:1.2;white-space:normal;text-align:center}dialog.intro-dialog{max-width:600px}.intro-dialog .about-dialog-header h2{display:flex;align-items:center;gap:8px}.intro-mark{width:24px;height:24px;flex-shrink:0}.intro-step{display:flex;flex-direction:column;min-height:0}.intro-step[hidden]{display:none}.intro-question{font-family:var(--font-title);font-style:italic;font-size:17px;font-weight:700}.intro-options{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}.intro-options:focus{outline:none}.intro-option{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:var(--hit);padding:9px 12px 9px 30px;border:1px solid var(--acrylic-border);border-radius:var(--r-md);background:var(--acrylic-bg);box-shadow:var(--acrylic-shadow);color:var(--text);font:inherit;text-align:left;cursor:pointer;transition:border-color var(--fast) ease,color var(--fast) ease,box-shadow var(--fast) ease}.intro-option:before{content:"";position:absolute;left:12px;top:15px;width:8px;height:8px;border-radius:50%;background:var(--led-off);box-shadow:var(--led-off-shadow)}.intro-option-name{font-size:15px;font-weight:700}.intro-option-desc{font-size:12.5px;line-height:1.4;color:var(--text-muted)}.intro-option-preview{display:block;align-self:stretch;width:100%;height:77px;margin-top:6px;object-fit:cover;object-position:left center;-webkit-mask-image:linear-gradient(to right,#000 80%,transparent);mask-image:linear-gradient(to right,#000 80%,transparent);pointer-events:none}.intro-options-clefs .intro-option,.intro-options-meters .intro-option{flex-direction:row;align-items:center;gap:10px}.intro-half-note{margin-top:12px}.intro-option-icon{flex-shrink:0;width:28px;height:46px;pointer-events:none}.intro-options-clefs .intro-option:before,.intro-options-meters .intro-option:before{top:calc(50% - 4px)}.intro-option-text{display:flex;flex-direction:column;gap:2px;min-width:0}.intro-option[aria-checked=true]{background:var(--accent-tint);border-color:var(--accent);box-shadow:inset 0 1px 2px #00000014,0 0 0 1px var(--accent)}.intro-option[aria-checked=true] .intro-option-name{color:var(--accent-strong)}.intro-option[aria-checked=true]:before{background:var(--led-on);box-shadow:0 0 6px var(--color-olo)}.intro-option:focus-visible{outline:none;box-shadow:var(--acrylic-shadow),var(--focus-ring)}.intro-option:active{transform:translateY(1px)}@media(hover:hover){.intro-option:hover{border-color:var(--accent)}}.intro-languages{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:4px}.intro-languages[hidden]{display:none}.intro-languages:focus{outline:none}.intro-language{position:relative;min-height:32px;padding:4px 12px 4px 24px;border:1px solid var(--acrylic-border);border-radius:999px;background:var(--acrylic-bg);box-shadow:var(--acrylic-shadow);color:var(--text);font:inherit;font-size:13.5px;font-weight:500;cursor:pointer;transition:border-color var(--fast) ease,color var(--fast) ease,box-shadow var(--fast) ease}.intro-language:before{content:"";position:absolute;left:10px;top:calc(50% - 3px);width:6px;height:6px;border-radius:50%;background:var(--led-off);box-shadow:var(--led-off-shadow)}.intro-language[aria-checked=true]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent-strong);font-weight:700;box-shadow:inset 0 1px 2px #00000014,0 0 0 1px var(--accent)}.intro-language[aria-checked=true]:before{background:var(--led-on);box-shadow:0 0 6px var(--color-olo)}.intro-language:focus-visible{outline:none;box-shadow:var(--acrylic-shadow),var(--focus-ring)}.intro-language:active{transform:translateY(1px)}@media(hover:hover){.intro-language:hover{border-color:var(--accent)}}.intro-note{font-size:12.5px;font-style:italic;color:var(--text-muted)}.intro-footer{justify-content:space-between}.intro-footer .btn-primary{min-width:118px}.btn-primary:disabled{opacity:.45;cursor:not-allowed;box-shadow:var(--gel-spec)}@media(min-width:601px){.intro-options{grid-template-columns:repeat(2,minmax(0,1fr))}.intro-options-levels .intro-option:last-child:nth-child(odd){grid-column:1 / -1}}@media(min-width:961px){.controls-drawer:not(.open){display:none}}@media(min-width:961px)and (max-width:1150px){.primary-bar{column-gap:12px;grid-template-columns:auto auto minmax(160px,380px) auto 1fr}.beat-indicator-container{padding:0 6px}.btn-drawer-toggle,#btn-reset{width:var(--hit);padding:0}.btn-drawer-toggle .btn-label,#btn-reset .btn-label{display:none}}@media(min-width:1151px)and (max-width:1439px){.primary-bar:not(:lang(en)){column-gap:12px;grid-template-columns:auto auto minmax(160px,380px) auto 1fr}}@media(min-width:961px)and (max-width:1279px){.drawer-inner{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:1279px){.btn-level-toggle{width:var(--hit);padding:0}.btn-level-toggle .btn-label,#btn-theme-toggle{display:none}}@media(max-width:960px){.primary-bar{grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"brand utils utils" "transport tempo beats";gap:10px 14px}.beat-indicator-container{justify-self:end}.controls-drawer{position:absolute;top:100%;left:0;right:0;max-height:calc(100vh - 100%);max-height:calc(100dvh - 100%);overflow-y:auto;overscroll-behavior:contain;padding:0 max(12px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));background:var(--glass-solid);border-bottom:1px solid var(--glass-edge);box-shadow:var(--glass-shadow);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease),visibility 0s linear var(--slow)}.controls-drawer.open{opacity:1;visibility:visible;transform:none;transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease)}.drawer-inner{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}.tuplets-popover{position:static;width:100%;min-width:0;max-width:none;margin-top:8px;background:var(--card-bg);border-color:var(--well-border);box-shadow:var(--well-shadow);backdrop-filter:none;-webkit-backdrop-filter:none}.shortcuts-hint{display:none}}@media(max-width:600px){.primary-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"brand utils" "transport beats" "tempo tempo";gap:10px}.brand h1{font-size:20px}.brand{container:brand / inline-size}.playback-controls{container:transport / inline-size}.brand-mark{width:22px;height:22px}.utility-actions{gap:6px}.btn-drawer-toggle,#btn-reset{width:var(--hit);padding:0}.btn-drawer-toggle .btn-label,#btn-reset .btn-label{display:none}.playback-controls .btn-primary{flex:1 1 auto;min-width:96px}.about-dialog-footer:not(.intro-footer) .btn{flex:1 1 auto}@container brand (max-width: 182px){.brand-badge{display:none}}@container brand (max-width: 117px){.brand h1{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}}@container transport (max-width: 147px){.playback-controls .btn-primary{min-width:var(--hit)}.playback-controls .btn-primary .btn-label{display:none}}.tempo-group{flex-direction:row;align-items:center;gap:10px}.tempo-head{flex-direction:column;align-items:flex-start;gap:2px;min-width:64px}.tempo-inputs{flex:1}.drawer-inner{grid-template-columns:minmax(0,1fr)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition-duration:.01ms!important}}
