@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/e1aab0933260df4d-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/b7387a63dd068245-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:400;font-display:swap;src:url(/_next/static/media/36966cca54120369-s.p.woff2) format("woff2");unicode-range:u+00??,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:Space Grotesk;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/e1aab0933260df4d-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/b7387a63dd068245-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:500;font-display:swap;src:url(/_next/static/media/36966cca54120369-s.p.woff2) format("woff2");unicode-range:u+00??,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:Space Grotesk;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/e1aab0933260df4d-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/b7387a63dd068245-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:600;font-display:swap;src:url(/_next/static/media/36966cca54120369-s.p.woff2) format("woff2");unicode-range:u+00??,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:Space Grotesk;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/e1aab0933260df4d-s.woff2) format("woff2");unicode-range:u+0102-0103,u+0110-0111,u+0128-0129,u+0168-0169,u+01a0-01a1,u+01af-01b0,u+0300-0301,u+0303-0304,u+0308-0309,u+0323,u+0329,u+1ea0-1ef9,u+20ab}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/b7387a63dd068245-s.woff2) format("woff2");unicode-range:u+0100-02ba,u+02bd-02c5,u+02c7-02cc,u+02ce-02d7,u+02dd-02ff,u+0304,u+0308,u+0329,u+1d00-1dbf,u+1e00-1e9f,u+1ef2-1eff,u+2020,u+20a0-20ab,u+20ad-20c0,u+2113,u+2c60-2c7f,u+a720-a7ff}@font-face{font-family:Space Grotesk;font-style:normal;font-weight:700;font-display:swap;src:url(/_next/static/media/36966cca54120369-s.p.woff2) format("woff2");unicode-range:u+00??,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:Space Grotesk Fallback;src:local("Arial");ascent-override:89.71%;descent-override:26.62%;line-gap-override:0.00%;size-adjust:109.69%}.__className_49a339{font-family:Space Grotesk,Space Grotesk Fallback;font-style:normal}.__variable_49a339{--font-grotesk:"Space Grotesk","Space Grotesk Fallback"}.ms-metronome-root{min-height:100vh;background:radial-gradient(1200px 800px at 50% -10%,#1b2447 0,#0a0d1c 55%,#05060d 100%);color:#e5e7eb;font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;--r-sm:0.0625rem;--r:0.125rem;--r-md:0.1875rem;--r-lg:0.25rem;--r-xl:0.375rem;--r-2xl:0.5rem;--r-btn:0.325rem;--r-field:0.275rem;--r-kbd:0.2rem}.ms-metronome-root:before{content:"";position:fixed;inset:0;background-image:radial-gradient(1px 1px at 20% 30%,rgba(255,255,255,.25),transparent 50%),radial-gradient(1px 1px at 70% 80%,rgba(255,255,255,.18),transparent 50%),radial-gradient(1px 1px at 40% 90%,rgba(255,255,255,.15),transparent 50%),radial-gradient(1px 1px at 85% 15%,rgba(255,255,255,.22),transparent 50%);pointer-events:none;z-index:0}.glass{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.glow-blue{box-shadow:0 0 24px rgba(96,165,250,.45),0 0 60px rgba(59,130,246,.25)}.glow-emerald{box-shadow:0 0 24px rgba(52,211,153,.45),0 0 60px rgba(16,185,129,.25)}.glow-rose{box-shadow:0 0 24px rgba(244,114,182,.45),0 0 60px rgba(225,29,72,.25)}.tabular{font-variant-numeric:tabular-nums}.ms-metronome-root input[type=number]::-webkit-inner-spin-button,.ms-metronome-root input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.ms-metronome-root input[type=number]{-moz-appearance:textfield}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .9rem;border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:#e5e7eb;font-weight:500;transition:transform .12s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none}.btn:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}.btn:active{transform:translateY(1px)}.btn-primary{background:linear-gradient(180deg,#4f46e5,#4338ca);border-color:rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(79,70,229,.35)}.btn-primary:hover{background:linear-gradient(180deg,#5b54f0,#4640d6)}.btn-danger{background:linear-gradient(180deg,#e11d48,#be123c);border-color:rgba(255,255,255,.12);box-shadow:0 6px 16px rgba(225,29,72,.35)}.btn-danger:hover{background:linear-gradient(180deg,#f1294f,#c81545)}.seg-bank{display:flex}.seg-bank>.seg-item{flex:1 1 0;border-radius:0}.seg-bank>.seg-item:not(:first-child){margin-left:-1px}.seg-bank>.seg-item:first-child{border-top-left-radius:var(--r-btn);border-bottom-left-radius:var(--r-btn)}.seg-bank>.seg-item:last-child{border-top-right-radius:var(--r-btn);border-bottom-right-radius:var(--r-btn)}.seg-bank>.seg-item.btn-primary,.seg-bank>.seg-item:hover{position:relative;z-index:1}[data-theme=aero] .seg-bank{gap:.5rem}[data-theme=aero] .seg-bank>.seg-item{border-radius:var(--r-btn);margin-left:0}.field{background:rgba(0,0,0,.25);border:1px solid rgba(255,255,255,.08);border-radius:var(--r-field);padding:.4rem .65rem;color:#e5e7eb;font-variant-numeric:tabular-nums;width:100%;outline:none;transition:border-color .12s ease,box-shadow .12s ease}.field:focus{border-color:rgba(99,102,241,.6);box-shadow:0 0 0 3px rgba(99,102,241,.2)}.kbd{display:inline-block;padding:.1rem .45rem;border-radius:var(--r-kbd);background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-family:ui-monospace,monospace;font-size:.75rem;color:#cbd5e1}.track-grid{background-image:linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 0);background-size:40px 100%}@keyframes ringPulse{0%{transform:scale(1);opacity:.85}to{transform:scale(2.6);opacity:0}}.ring-pulse{animation:ringPulse .7s cubic-bezier(0,0,.2,1) forwards}@keyframes rise{0%{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}.rise{animation:rise .28s ease-out both}@keyframes scaleIn{0%{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}.scale-in{animation:scaleIn .18s ease-out both}[data-theme=flat] .ms-metronome-root{background:linear-gradient(180deg,#2a3142,#1c2230)}[data-theme=flat] .ms-metronome-root:before{display:none}[data-theme=flat] .glass{background:rgba(44,53,73,.85);border:1px solid rgba(255,255,255,.06);backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}[data-theme=flat] .btn{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1)}[data-theme=flat] .btn:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}[data-theme=flat] .btn-primary{background:#5b54f0;box-shadow:none;border-color:transparent}[data-theme=flat] .btn-primary:hover{background:#6963f5}[data-theme=flat] .btn-danger{background:#e11d48;box-shadow:none;border-color:transparent}[data-theme=flat] .btn-danger:hover{background:#f1294f}[data-theme=flat] .field{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.08)}[data-theme=flat] .glow-blue,[data-theme=flat] .glow-emerald,[data-theme=flat] .glow-rose{box-shadow:none}[data-theme=aero] .ms-metronome-root{background:radial-gradient(ellipse 50% 35% at 50% -15%,rgba(255,255,255,.55) 0,rgba(255,255,255,0) 70%),radial-gradient(ellipse 60% 40% at 80% 85%,rgba(167,243,208,.4) 0,rgba(167,243,208,0) 70%),radial-gradient(ellipse 60% 40% at 20% 75%,rgba(196,181,253,.35) 0,rgba(196,181,253,0) 70%),linear-gradient(180deg,#5fa4d6,#347fc1 40%,#1c6cae 75%,#0a4f8e);color:#f0f9ff;--r-sm:0.125rem;--r:0.25rem;--r-md:0.375rem;--r-lg:0.5rem;--r-xl:0.75rem;--r-2xl:1rem;--r-btn:0.65rem;--r-field:0.55rem;--r-kbd:0.4rem}[data-theme=aero] .ms-metronome-root:before{background-image:radial-gradient(80px 60px at 15% 20%,rgba(255,255,255,.35),transparent 70%),radial-gradient(120px 80px at 70% 15%,rgba(255,255,255,.25),transparent 70%),radial-gradient(100px 70px at 90% 75%,rgba(255,255,255,.3),transparent 70%),radial-gradient(60px 40px at 35% 85%,rgba(255,255,255,.25),transparent 70%)}[data-theme=aero] .glass{background:linear-gradient(180deg,rgba(70,130,195,.78),rgba(35,85,155,.85) 50%,rgba(20,60,120,.9));border:1px solid rgba(255,255,255,.55);backdrop-filter:blur(14px) saturate(180%);-webkit-backdrop-filter:blur(14px) saturate(180%);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.12),inset 0 -10px 24px rgba(10,45,95,.35),0 10px 30px rgba(8,50,100,.45),0 2px 6px rgba(8,50,100,.3);position:relative;overflow:hidden}[data-theme=aero] .glass:before{content:"";position:absolute;inset:1px 1px auto 1px;height:22%;background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.18) 50%,rgba(255,255,255,0));border-radius:inherit;pointer-events:none}[data-theme=aero] .btn{background:linear-gradient(180deg,rgba(255,255,255,.75),rgba(255,255,255,.3) 45%,rgba(255,255,255,.1) 55%,rgba(120,175,220,.55)),rgba(180,220,250,.55);border:1px solid rgba(255,255,255,.85);color:#0a3a6b;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(0,0,0,.08),0 4px 10px rgba(14,90,159,.35);font-weight:600;text-shadow:0 1px 0 rgba(255,255,255,.55)}[data-theme=aero] .btn:hover{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.4) 45%,rgba(255,255,255,.15) 55%,rgba(120,175,220,.65)),rgba(190,225,252,.7);border-color:rgba(255,255,255,.95)}[data-theme=aero] .btn:active{box-shadow:inset 0 2px 4px rgba(0,0,0,.15),inset 0 -1px 0 rgba(255,255,255,.4);transform:translateY(1px)}[data-theme=aero] .btn-primary{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.2) 45%,rgba(60,100,220,.5) 55%,rgba(40,60,180,.85)),#2840b3;color:#ffffff;border-color:rgba(255,255,255,.8);text-shadow:0 1px 1px rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.2),0 8px 20px rgba(40,70,200,.55),0 2px 4px rgba(40,70,200,.35)}[data-theme=aero] .btn-primary:hover{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.3) 45%,rgba(80,120,240,.55) 55%,rgba(50,80,200,.9)),#3650c8}[data-theme=aero] .btn-danger{background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,.2) 45%,rgba(225,50,90,.55) 55%,rgba(170,20,50,.9)),#be123c;color:#fff;border-color:rgba(255,255,255,.8);text-shadow:0 1px 1px rgba(0,0,0,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -2px 4px rgba(0,0,0,.25),0 8px 20px rgba(190,18,60,.55)}[data-theme=aero] .field{background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(255,255,255,.1) 30%,rgba(255,255,255,.3)),rgba(255,255,255,.55);color:#0a3a6b;border:1px solid rgba(255,255,255,.85);box-shadow:inset 0 1px 2px rgba(0,0,0,.1),inset 0 -1px 0 rgba(255,255,255,.6)}[data-theme=aero] .field:focus{border-color:rgba(99,102,241,.75);box-shadow:inset 0 1px 2px rgba(0,0,0,.1),0 0 0 3px rgba(99,102,241,.3)}[data-theme=aero] .kbd{background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(255,255,255,.4) 50%,rgba(180,215,245,.65));border:1px solid rgba(255,255,255,.9);color:#0a3a6b;text-shadow:0 1px 0 rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 2px rgba(14,90,159,.35)}[data-theme=aero] .glow-blue{box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(255,255,255,.15),0 0 28px rgba(96,165,250,.65),0 10px 30px rgba(14,90,159,.4)}[data-theme=aero] .ms-metronome-root header>div:first-child>div:first-child{background:linear-gradient(180deg,#cbe7ff,#6aa9e8 50%,#2a6ab0);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -2px 4px rgba(0,0,0,.3),0 8px 20px rgba(14,90,159,.45)}[data-theme=aero] .track-grid{background-image:linear-gradient(90deg,rgba(255,255,255,.12) 1px,transparent 0)}[data-theme=aero] .ms-metronome-root header h1{color:#ffffff;text-shadow:0 1px 0 rgba(255,255,255,.35),0 2px 6px rgba(8,50,100,.55)}[data-theme=aero] .ms-metronome-root header .text-slate-400,[data-theme=aero] .ms-metronome-root header .text-slate-500,[data-theme=aero] .ms-metronome-root header p{color:rgba(255,255,255,.92);text-shadow:0 1px 2px rgba(8,50,100,.5)}[data-theme=aero] .ms-metronome-root footer,[data-theme=aero] .ms-metronome-root footer.text-slate-500{color:rgba(255,255,255,.85);text-shadow:0 1px 2px rgba(8,50,100,.45)}[data-theme=aero] .glass .text-slate-400,[data-theme=aero] .glass label.text-slate-400{color:rgba(225,240,255,.95)}[data-theme=aero] .glass .text-slate-500{color:rgba(205,225,245,.85)}[data-theme=aero] .glass .text-slate-300{color:rgba(240,248,255,.95)}[data-theme=aero] .glass .text-slate-100,[data-theme=aero] .glass .text-slate-200{text-shadow:0 1px 0 rgba(10,45,95,.35)}.ms-metronome-root :focus-visible{outline:2px solid rgba(129,140,248,.9);outline-offset:2px}@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");.applet-microtones-root,.applet-microtones-root *,.applet-microtones-root :after,.applet-microtones-root :before{box-sizing:border-box}.applet-microtones-root{--bg:#0e0e10;--surface:#18181c;--surface2:#1e1e24;--border:#2a2a36;--text:#e8e8ec;--text-dim:#8e8e9c;--accent:#d4405a;--radius:8px;--panel-w:288px;--header-h:48px;position:fixed;inset:0;background:var(--bg);color:var(--text);font-family:Inter,SF Pro Text,system-ui,sans-serif;font-size:13px;line-height:1.5;overflow:hidden}.app{display:flex;flex-direction:column;height:100vh}.app-header{height:var(--header-h);display:flex;align-items:center;justify-content:space-between;padding:0 16px 0 128px;background:var(--surface);border-bottom:1px solid var(--border);flex-shrink:0}.header-left{display:flex;align-items:baseline;gap:12px}.app-title{font-size:17px;font-weight:600;letter-spacing:-.02em}.app-subtitle{font-size:11px;color:var(--text-dim);letter-spacing:.04em}.header-actions{display:flex;align-self:stretch;height:100%;border-left:1px solid var(--border)}.header-btn{height:100%;display:inline-flex;align-items:center;padding:0 14px;background:transparent;border:none;border-right:1px solid var(--border);box-shadow:inset 0 -2px 0 transparent;color:var(--text-dim);font-size:11px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .12s,color .12s,box-shadow .12s;font-family:inherit}.header-btn:hover{color:var(--text);background:rgba(255,255,255,.06)}.header-btn:active{background:rgba(255,255,255,.1)}.header-btn.active{color:var(--text);background:rgba(255,255,255,.05);box-shadow:inset 0 -2px 0 rgba(255,255,255,.55)}.app-body{display:flex;flex:1;overflow:hidden}.main-col{min-width:0}.grid-area,.main-col{flex:1;display:flex;flex-direction:column;overflow:hidden;position:relative}.grid-area{padding:10px}.grid-area,.hex-grid-container{align-items:center;justify-content:center}.hex-grid-container{display:flex}.hex-grid-container,.hex-svg{width:100%;height:100%}.grid-hint{font-size:10px;color:var(--text-dim);opacity:.45;letter-spacing:.05em;margin-top:2px}@keyframes kbdZonePulse{0%,to{opacity:1}50%{opacity:.18}}.kbd-zone-flash{animation:kbdZonePulse .6s ease-in-out 3}.kbd-hint{position:absolute;top:12px;left:50%;display:flex;align-items:center;gap:6px;padding:5px 12px;font-size:11px;letter-spacing:.04em;color:rgba(210,226,255,.92);background:rgba(18,26,40,.82);border:1px solid rgba(180,212,255,.38);border-radius:999px;backdrop-filter:blur(4px);white-space:nowrap;pointer-events:none;z-index:5;animation:kbdHintLife 4.6s ease-in-out forwards}.kbd-hint-icon{font-size:13px;opacity:.95}@keyframes kbdHintLife{0%{opacity:0;transform:translate(-50%,-5px)}8%{opacity:1;transform:translate(-50%)}82%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-5px)}}.seq-modal-overlay{position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.55);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.seq-modal{width:min(340px,calc(100vw - 32px));background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:0 12px 40px rgba(0,0,0,.5)}.seq-modal-title{font-size:14px;font-weight:600;color:var(--text);margin-bottom:8px}.seq-modal-body{font-size:12px;line-height:1.5;color:var(--text-dim);margin-bottom:16px}.seq-modal-actions{display:flex;flex-direction:column;gap:8px}.seq-modal-btn{padding:8px 12px;font-size:12px;border-radius:5px;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;transition:background .12s,border-color .12s}.seq-modal-btn:hover{background:rgba(255,255,255,.06)}.seq-modal-btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.seq-modal-btn.primary:hover{filter:brightness(1.08);background:var(--accent)}.seq-modal-btn.ghost{background:transparent;color:var(--text-dim)}.seq-modal-btn.ghost:hover{color:var(--text);background:rgba(255,255,255,.04)}.overlay-panel{position:absolute;bottom:10px;z-index:10;background:rgba(12,12,15,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.09);border-radius:10px;display:flex;flex-direction:column;overflow:hidden;max-height:calc(100% - 20px);box-shadow:0 8px 32px rgba(0,0,0,.5)}.synth-panel{left:10px;width:292px}.scale-panel{left:312px;width:388px}.overlay-header{display:flex;align-items:center;gap:8px;padding:0 12px;height:36px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.07);cursor:move;-webkit-user-select:none;-moz-user-select:none;user-select:none}.overlay-title{font-weight:700;letter-spacing:.09em;text-transform:uppercase}.overlay-hint,.overlay-title{font-size:10px;color:var(--text-dim)}.overlay-hint{opacity:.5;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.scale-offgrid{color:#d6a64a}.header-wave-icon,.overlay-close{color:var(--text-dim);flex-shrink:0}.overlay-close{background:none;border:none;cursor:pointer;font-size:11px;padding:3px 5px;border-radius:3px;line-height:1;margin-left:auto;transition:color .12s,background .12s;font-family:inherit}.overlay-close:hover{color:var(--text);background:rgba(255,255,255,.08)}.overlay-body{padding:10px 12px 12px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}.overlay-body::-webkit-scrollbar{width:3px}.overlay-body::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.btn-bank{display:flex;gap:0}.btn-bank>button{border-radius:0;margin-left:-1px;position:relative}.btn-bank>button:first-child{margin-left:0;border-top-left-radius:4px;border-bottom-left-radius:4px}.btn-bank>button:last-child{border-top-right-radius:4px;border-bottom-right-radius:4px}.btn-bank>button.active,.btn-bank>button:focus-visible,.btn-bank>button:hover{z-index:1}.rect-slider{flex:1;height:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:3px;cursor:pointer;position:relative;overflow:hidden;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:none}.rect-fill{height:100%;background:rgba(255,255,255,.28);border-radius:3px;pointer-events:none}.rect-slider.vertical{flex:none;width:100%;height:64px;border-radius:0}.rect-slider.vertical .rect-fill{position:absolute;left:0;bottom:0;width:100%;height:0;border-radius:0}.wave-btn,.wave-grid{display:flex}.wave-btn{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:5px;padding:7px 6px;cursor:pointer;color:var(--text-dim);align-items:center;justify-content:center;transition:background .12s,border-color .12s,color .12s}.wave-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}.wave-btn.active{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);color:var(--text)}.crt-display{background:#080810;border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:6px 6px 0;display:flex;flex-direction:column;gap:4px}.crt-labels{display:flex;justify-content:space-around;padding:2px 0 4px;font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.3)}.filt-labels span{flex:1;text-align:center}.param-rows{display:flex;flex-direction:column;gap:4px}.param-row{display:flex;align-items:center;gap:8px}.param-label{min-width:38px;letter-spacing:.04em}.param-label,.param-value{font-size:10px;color:var(--text-dim)}.param-value{min-width:36px;text-align:right;font-family:monospace;font-variant-numeric:tabular-nums}.synth-output-row{flex-direction:row;gap:12px}.hold-toggle,.synth-output-row{display:flex;align-items:center}.hold-toggle{gap:6px;cursor:pointer;flex-shrink:0;font-size:11px;color:var(--text-dim)}.scale-tabs{display:flex;gap:2px;background:var(--surface2);border-radius:6px;padding:2px}.scale-tab{flex:1;background:transparent;border:none;border-radius:3px;padding:5px 8px;font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;cursor:pointer;color:var(--text-dim);transition:background .12s,color .12s;font-family:inherit}.scale-tab:hover{color:var(--text)}.scale-tab.active{background:rgba(255,255,255,.09);color:var(--text)}.scale-body{display:flex;gap:8px;min-height:0}.pattern-list{display:flex;flex-direction:column;gap:2px;width:140px;flex-shrink:0;overflow-y:auto;max-height:200px}.pattern-list::-webkit-scrollbar{width:3px}.pattern-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.pattern-btn{background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 8px;cursor:pointer;text-align:left;color:var(--text-dim);display:flex;align-items:baseline;justify-content:space-between;gap:4px;transition:background .1s,color .1s;font-size:12px;font-family:inherit}.pattern-btn:hover{background:rgba(255,255,255,.05);color:var(--text)}.pattern-btn.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:var(--text)}.pattern-name{font-weight:500}.pattern-count{font-size:10px;opacity:.5;font-variant-numeric:tabular-nums}.pattern-detail{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.detail-empty{font-size:11px;color:var(--text-dim);opacity:.5;padding:8px 0;line-height:1.6}.detail-header{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}.detail-name{font-size:13px;font-weight:600}.detail-desc{font-size:10px;color:var(--text-dim);margin-top:1px}.detail-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.all-instances-label{gap:5px;color:var(--text-dim);-webkit-user-select:none;-moz-user-select:none;user-select:none}.all-instances-label,.play-btn{display:flex;align-items:center;font-size:10px;cursor:pointer}.play-btn{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:50%;width:28px;height:28px;color:var(--text);justify-content:center;flex-shrink:0;transition:background .12s;font-family:inherit}.play-btn:hover{background:rgba(255,255,255,.14)}.play-btn.playing{background:rgba(212,64,90,.2);border-color:rgba(212,64,90,.5)}.interval-table{display:flex;flex-direction:column;gap:2px;overflow-y:auto;max-height:130px}.interval-table::-webkit-scrollbar{width:2px}.interval-table::-webkit-scrollbar-thumb{background:var(--border)}.interval-row{display:grid;grid-template-columns:36px 28px 44px auto;gap:4px;align-items:center;font-size:10px;font-variant-numeric:tabular-nums}.int-name{color:var(--text-dim);font-weight:600}.int-step{color:var(--text)}.int-cents,.int-step{font-family:monospace}.int-cents{color:var(--text-dim)}.int-dev{font-family:monospace;font-size:9px}.dev-good{color:#3aaa6e}.dev-ok{color:#c49a20}.dev-poor{color:#d4405a}.detail-quality{font-size:10px;color:var(--text-dim);padding-top:4px;border-top:1px solid var(--border)}.detail-quality strong{color:var(--text)}.scale-color-row{display:flex;align-items:center;gap:10px;padding-top:6px}.control-panel{width:var(--panel-w);flex-shrink:0;background:var(--surface);border-left:1px solid var(--border);overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px}.control-panel::-webkit-scrollbar{width:3px}.control-panel::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.panel-section{background:var(--surface2);border-radius:var(--radius);padding:9px 11px;display:flex;flex-direction:column;gap:7px}.section-label{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim)}.edo-grid{display:flex;flex-direction:column;gap:3px}.edo-btn{background:transparent;border:1px solid transparent;border-radius:4px;padding:5px 8px;cursor:pointer;text-align:left;color:var(--text);transition:background .1s;display:flex;align-items:baseline;gap:7px;font-family:inherit}.edo-btn:hover{background:rgba(255,255,255,.04)}.edo-btn.active{background:rgba(255,255,255,.07);border-color:currentColor}.edo-name{font-weight:600;font-size:12px}.edo-desc{font-size:10px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.custom-edo-row{margin-top:4px}.custom-edo-input{width:100%;box-sizing:border-box;background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:4px;color:var(--text-dim);font-family:inherit;font-size:11px;padding:4px 7px;outline:none;-webkit-appearance:textfield;appearance:textfield;-moz-appearance:textfield}.custom-edo-input::-webkit-inner-spin-button,.custom-edo-input::-webkit-outer-spin-button{-webkit-appearance:none}.custom-edo-input:focus{border-color:rgba(255,255,255,.3);color:var(--text)}.custom-edo-input::-moz-placeholder{color:rgba(255,255,255,.2);font-size:10px}.custom-edo-input::placeholder{color:rgba(255,255,255,.2);font-size:10px}.shape-row{display:flex}.shape-submodes{margin-top:4px}.shape-submodes .shape-btn{font-size:9px;padding:4px;background:transparent}.shape-btn{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:4px;padding:6px 4px;color:var(--text-dim);font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:background .1s,color .1s,border-color .1s}.shape-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}.shape-btn.active{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:var(--text)}.layout-legend{font-size:9px;line-height:1.45;color:var(--text-dim);margin:2px 0 6px}.layout-legend b{font-weight:700;color:var(--text);font-variant-numeric:tabular-nums}.layout-list{gap:3px}.layout-btn,.layout-list{display:flex;flex-direction:column}.layout-btn{background:transparent;border:1px solid transparent;border-radius:4px;padding:5px 8px;cursor:pointer;text-align:left;color:var(--text);transition:background .1s;gap:1px;font-family:inherit}.layout-btn:hover{background:rgba(255,255,255,.04)}.layout-btn.active{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.18)}.layout-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px}.layout-name{font-weight:600;font-size:12px}.layout-desc{font-size:10px;color:var(--text-dim);font-variant-numeric:tabular-nums}.layout-axis{display:inline-flex;align-items:center}.layout-axis-sep{color:rgba(255,255,255,.28)}.layout-axis-arrow{display:inline-block;font-size:11px;line-height:1;margin-right:3px;color:var(--text);transition:transform .18s ease}.layout-accuracy{font-size:9px;font-variant-numeric:tabular-nums;letter-spacing:.02em;flex-shrink:0;color:var(--text-dim)}.layout-accuracy.loose{color:#d6a64a}.layout-rotate{display:flex;align-items:center;gap:6px;margin-top:6px}.layout-rotate-label{font-size:10px;color:var(--text-dim);letter-spacing:.04em;margin-right:auto}.layout-rotate-btn{background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text-dim);font-size:13px;line-height:1;padding:3px 8px;cursor:pointer;font-family:inherit;transition:background .1s,color .1s,border-color .1s}.layout-rotate-btn:hover{background:rgba(255,255,255,.07);color:var(--text);border-color:rgba(255,255,255,.22)}.layout-rotate-deg{font-size:11px;color:var(--text);font-variant-numeric:tabular-nums;min-width:34px;text-align:center}.root-note-row{display:flex}.root-note-btn{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:2px;padding:4px 0;text-align:center;font-family:Inter,monospace;font-size:9px;font-weight:600;color:var(--text-dim);cursor:pointer;transition:background .1s,color .1s,border-color .1s}.root-note-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}.root-note-btn.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:var(--text)}.root-freq-readout{font-size:10px;color:var(--text-dim);font-family:monospace;text-align:right;opacity:.7;margin-top:1px}.slider-row{display:flex;align-items:center;gap:8px}.slider{flex:1;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:3px;background:var(--border);border-radius:2px;outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;background:var(--text);cursor:pointer}.slider-val{font-size:10px;color:var(--text-dim);min-width:20px;text-align:right;font-variant-numeric:tabular-nums}.toggle-grid{display:flex;flex-direction:column;gap:5px}.toggle-row{display:flex;align-items:center;justify-content:space-between;cursor:pointer}.toggle-label{font-size:12px}.toggle-btn{position:relative;width:30px;height:17px;border-radius:8px;border:none;cursor:pointer;transition:background .18s;background:var(--border);padding:0;flex-shrink:0}.toggle-btn.on{background:var(--accent)}.toggle-thumb{position:absolute;top:2px;left:2px;width:13px;height:13px;border-radius:50%;background:#fff;transition:transform .18s;pointer-events:none}.toggle-btn.on .toggle-thumb{transform:translateX(13px)}.toggle-row.disabled{opacity:.32;cursor:default}.toggle-row.disabled .toggle-btn{cursor:default}.info-text{font-size:11px;color:var(--text-dim);line-height:1.6}.info-text.small{font-size:10px}.edo-info{gap:4px}.palette-grid{display:flex;flex-direction:column;gap:3px}.palette-btn{background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 6px;cursor:pointer;text-align:left;color:var(--text);display:flex;align-items:center;gap:7px;transition:background .1s;font-family:inherit}.palette-btn:hover{background:rgba(255,255,255,.04)}.palette-btn.active{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2)}.palette-name{font-size:11px;font-weight:500;min-width:62px;flex-shrink:0}.palette-swatch{display:flex;flex:1;gap:1px;border-radius:3px;overflow:hidden}.palette-chip{flex:1;height:12px}.palette-disclosure{display:flex;align-items:center;gap:6px;background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 6px;margin-top:4px;width:100%;color:var(--text-dim);font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background .1s,color .1s}.palette-disclosure:hover{background:rgba(255,255,255,.04);color:var(--text)}.palette-disclosure-arrow{width:10px;text-align:center;font-size:9px;opacity:.7}.palette-disclosure-count{margin-left:auto;font-size:9px;opacity:.55;font-variant-numeric:tabular-nums}.palette-grid-alt{margin-top:3px}.scale-color-btn.on{background:#c89018!important}.presets-panel{right:340px;width:304px}.preset-save-row{display:flex;gap:6px;align-items:center}.preset-name-input{flex:1}.preset-actions-row{display:flex;flex-wrap:wrap;gap:4px}.preset-action{padding:3px 8px;font-size:10px}.preset-import{display:flex;flex-direction:column;gap:4px}.preset-import-textarea{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:monospace;font-size:10px;padding:6px;outline:none;resize:vertical;min-height:70px}.preset-import-textarea:focus{border-color:rgba(255,255,255,.3)}.preset-import-actions{display:flex;gap:4px;justify-content:flex-end}.preset-status{font-size:10px;padding:4px 8px;border-radius:4px;font-weight:600;letter-spacing:.04em}.preset-status-ok{background:rgba(58,170,110,.12);color:#6dcc96}.preset-status-err{background:rgba(212,64,90,.14);color:#e87b90}.preset-list-header{padding-top:4px;border-top:1px solid var(--border)}.preset-empty{font-size:10px;color:var(--text-dim);opacity:.6;padding:4px 0;line-height:1.5}.preset-list{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow-y:auto}.preset-list::-webkit-scrollbar{width:3px}.preset-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.preset-row{display:flex;align-items:stretch;gap:2px}.preset-load-btn{flex:1;background:transparent;border:1px solid transparent;border-radius:4px;padding:4px 8px;cursor:pointer;text-align:left;color:var(--text);display:flex;flex-direction:column;gap:1px;font-family:inherit;transition:background .1s,border-color .1s}.preset-load-btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}.preset-name{font-weight:600;font-size:12px}.preset-meta{font-size:9px;color:var(--text-dim)}.preset-icon-btn{background:transparent;border:1px solid transparent;border-radius:3px;width:24px;color:var(--text-dim);cursor:pointer;font-size:11px;font-family:inherit;transition:background .1s,color .1s}.preset-icon-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}.preset-delete:hover{background:rgba(212,64,90,.18);color:#e87b90}.ratios-panel{right:10px;width:320px}.ratio-tabs{display:flex;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.07)}.ratio-tab{flex:1;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;padding:6px 0;margin-bottom:-1px;cursor:pointer;transition:color .1s}.ratio-tab:hover{color:var(--text)}.ratio-tab.active{color:var(--text);border-bottom-color:rgba(255,255,255,.38)}.prime-bars-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}.section-mini-label{font-size:9px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-dim);opacity:.55}.ratio-norm-btns{display:flex}.ratio-norm-btn{background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:2px;color:var(--text-dim);font-family:inherit;font-size:9px;font-weight:700;letter-spacing:.04em;padding:2px 6px;cursor:pointer;transition:background .1s,color .1s,border-color .1s}.ratio-norm-btn:hover{background:rgba(255,255,255,.05);color:var(--text)}.ratio-norm-btn.active{background:rgba(255,255,255,.1);color:var(--text);border-color:rgba(255,255,255,.25)}.ratio-graph-container{display:flex;flex-direction:column;gap:10px}.ratio-graph-svg{width:100%;display:block;cursor:crosshair;overflow:visible}.ratio-graph-legend{display:flex;flex-direction:column;gap:3px;padding:0 2px}.ratio-graph-legend-row{display:flex;align-items:center;gap:6px;font-size:10px}.ratio-legend-swatch{width:8px;height:8px;border-radius:50%;flex-shrink:0}.ratio-legend-prime{flex:1;font-weight:600;font-size:10px}.ratio-legend-val{font-family:monospace;font-size:10px;color:var(--text-dim);min-width:36px;text-align:right;font-variant-numeric:tabular-nums}.ratio-graph-edo-label{font-size:9px;color:var(--text-dim);opacity:.45;margin-top:2px;text-align:center;letter-spacing:.04em}.ratio-graph-hint{opacity:.65;font-size:8.5px}.ratio-graph-toolbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:2px}.ratio-graph-zoom-btns{display:flex}.ratio-graph-zoom-btns .ratio-norm-btn{min-width:20px;text-align:center;font-size:11px;padding:1px 5px}.ratio-graph-svg{-moz-user-select:none;user-select:none;-webkit-user-select:none}.ratio-find-container{display:flex;flex-direction:column;gap:10px}.find-section{display:flex;flex-direction:column;gap:5px}.find-ratio-pills{display:flex;flex-wrap:wrap;gap:3px}.find-custom-pills{margin-top:2px}.find-pill{background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:8px;color:var(--text-dim);font-family:monospace;font-size:10px;font-weight:600;letter-spacing:.02em;padding:2px 7px;cursor:pointer;transition:background .1s,color .1s,border-color .1s}.find-pill.active,.find-pill:hover{background:rgba(255,255,255,.05);color:var(--text)}.find-pill-custom{border-style:dashed}.find-pill-x{opacity:.6;margin-left:3px;font-size:8px}.find-custom-row{margin-top:2px}.find-row{display:flex;align-items:center;gap:8px}.find-row-label{font-size:10px;color:var(--text-dim);min-width:56px;letter-spacing:.04em}.find-row-val{font-size:10px;color:var(--text);min-width:48px;text-align:right;font-family:monospace;font-variant-numeric:tabular-nums}.find-results{display:flex;flex-direction:column;gap:2px;max-height:240px;overflow-y:auto;padding-right:2px}.find-results::-webkit-scrollbar{width:3px}.find-results::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.find-results-header{padding:4px 0 2px;border-top:1px solid var(--border)}.find-empty{font-size:10px;color:var(--text-dim);opacity:.6;line-height:1.5;padding:4px 0}.find-result-row{display:grid;grid-template-columns:38px auto auto 1fr;align-items:center;gap:8px;padding:4px 6px;background:transparent;border:1px solid transparent;border-radius:4px;cursor:pointer;text-align:left;font-family:inherit;color:var(--text);transition:background .1s,border-color .1s}.find-result-row:hover:not(:disabled){background:rgba(255,255,255,.05)}.find-result-row:disabled{cursor:default}.find-result-row.is-current{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.18)}.find-result-edo{font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}.find-result-stat{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:1.1}.find-result-stat-label{font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);opacity:.6}.find-result-stat-val{font-family:monospace;font-size:10px;font-variant-numeric:tabular-nums}.find-result-bars{display:flex;gap:2px;align-items:center;justify-self:end;width:100%;max-width:88px}.find-result-bar{flex:1;display:flex;align-items:center}.find-result-bar-track{flex:1;height:4px;background:rgba(255,255,255,.06);border-radius:2px;overflow:hidden}.find-result-bar-fill{display:block;height:100%;border-radius:2px;opacity:.8}.prime-bars{display:flex;flex-direction:column;gap:4px}.prime-bar-row{display:flex;align-items:center;gap:7px;padding:3px 5px;border-radius:4px;cursor:pointer;border:1px solid transparent;transition:background .1s,border-color .1s}.prime-bar-row:hover{background:rgba(255,255,255,.04)}.prime-bar-row.active{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.12)}.prime-label{font-size:10px;font-weight:700;letter-spacing:.04em;min-width:14px;text-align:right}.prime-bar-track{flex:1;height:5px;background:rgba(255,255,255,.07);border-radius:3px;overflow:hidden}.prime-bar-fill{height:100%;border-radius:3px;transition:width .3s ease;opacity:.75}.prime-err{font-size:9px;color:var(--text-dim);font-variant-numeric:tabular-nums;min-width:34px;text-align:right;font-family:monospace}.ratio-list{display:flex;flex-direction:column;gap:1px}.ratio-row{display:grid;grid-template-columns:52px 1fr 64px 46px;gap:4px;align-items:center;padding:2px 4px;border-radius:3px;font-size:10px;font-variant-numeric:tabular-nums}.ratio-row:not(.ratio-header){cursor:pointer}.ratio-row:not(.ratio-header):hover{background:rgba(255,255,255,.04)}.ratio-row.ratio-playing{background:rgba(232,192,56,.1)}.ratio-row.ratio-playing .ratio-frac{opacity:1}.ratio-play-bar{display:flex;align-items:center;gap:8px;padding:4px 0 6px;border-bottom:1px solid var(--border)}.ratio-mode-btns{display:flex}.ratio-mode-btn{background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:3px;color:var(--text-dim);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 8px;cursor:pointer;transition:background .1s,color .1s,border-color .1s}.ratio-mode-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}.ratio-mode-btn.active{background:rgba(255,255,255,.1);color:var(--text);border-color:rgba(255,255,255,.28)}.ratio-chord-label{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--text-dim);cursor:pointer;margin-left:auto}.ratio-header{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);opacity:.6;margin-bottom:2px}.ratio-frac{font-family:monospace;font-weight:600;font-size:11px}.ratio-name-cell{color:var(--text-dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ratio-step-cell{color:var(--text-dim)}.ratio-err-cell,.ratio-step-cell{font-family:monospace;text-align:right}.ratio-err-cell{font-size:10px}.midi-row{margin-top:2px}.midi-select{flex:1;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text);font-size:11px;padding:3px 6px;font-family:inherit;cursor:pointer;outline:none}.midi-select:focus{border-color:rgba(255,255,255,.3)}.midi-no-device{font-size:10px;color:var(--text-dim);opacity:.5;font-style:italic}@media (max-width:768px){.applet-microtones-root{--panel-w:240px}.scale-panel{top:auto;bottom:220px}.scale-panel,.synth-panel{left:10px;width:calc(100% - 20px)}}@media (max-width:700px){.control-panel{position:absolute;left:0;right:0;bottom:0;top:auto;width:100%;max-height:50%;z-index:20;border-left:none;border-top:1px solid var(--border);border-radius:12px 12px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.45)}.scale-panel,.synth-panel{left:6px;right:6px;width:auto}.overlay-panel{max-height:60%}.app-header{padding-left:96px;gap:6px}.header-actions{overflow-x:auto;-webkit-overflow-scrolling:touch}}.seq-loading{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:12px;letter-spacing:.06em}.seq-root{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:10px 14px;gap:10px;min-width:0}.seq-transport{gap:12px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:8px 12px}.seq-play-btn,.seq-transport{display:flex;align-items:center;flex-shrink:0}.seq-play-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:var(--text);font-size:12px;cursor:pointer;justify-content:center;transition:background .12s,border-color .12s;font-family:inherit}.seq-play-btn:hover{background:rgba(255,255,255,.12)}.seq-play-btn.playing{background:rgba(212,64,90,.22);border-color:rgba(212,64,90,.6);color:#e87b90}.seq-param-group{display:flex;align-items:center;gap:5px}.seq-transport-label{font-size:9px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--text-dim)}.seq-drag-number{min-width:46px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:monospace;font-size:13px;font-variant-numeric:tabular-nums;padding:3px 6px;text-align:center;cursor:ew-resize;-webkit-user-select:none;-moz-user-select:none;user-select:none;display:flex;align-items:center;justify-content:center;height:26px}.seq-drag-number:hover{border-color:rgba(255,255,255,.28)}.seq-bpm-input,.seq-steps-input{width:46px;background:var(--surface2);border:1px solid var(--border);border-radius:4px;color:var(--text);font-family:monospace;font-size:13px;font-variant-numeric:tabular-nums;padding:3px 6px;text-align:center;outline:none;-moz-appearance:textfield;-webkit-appearance:textfield;appearance:textfield;height:26px}.seq-bpm-input::-webkit-inner-spin-button,.seq-bpm-input::-webkit-outer-spin-button,.seq-steps-input::-webkit-inner-spin-button,.seq-steps-input::-webkit-outer-spin-button{-webkit-appearance:none}.seq-bpm-input:focus,.seq-steps-input:focus{border-color:rgba(255,255,255,.3)}.seq-step-presets{display:flex}.seq-step-preset-btn{background:transparent;border:1px solid rgba(255,255,255,.1);border-radius:3px;color:var(--text-dim);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.03em;padding:3px 7px;cursor:pointer;transition:background .1s,color .1s,border-color .1s}.seq-step-preset-btn:hover{background:rgba(255,255,255,.06);color:var(--text)}.seq-step-preset-btn.active{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.28);color:var(--text)}.seq-action-btn{background:transparent;border:1px solid rgba(255,255,255,.12);border-radius:3px;color:var(--text-dim);font-family:inherit;font-size:10px;font-weight:700;letter-spacing:.05em;padding:3px 9px;cursor:pointer;height:26px;display:flex;align-items:center;transition:background .1s,color .1s,border-color .1s}.seq-action-btn:hover{background:rgba(255,255,255,.07);color:var(--text);border-color:rgba(255,255,255,.25)}.seq-midi-btn{border-color:rgba(74,127,212,.35);color:#6aa0d8}.seq-midi-btn:hover{background:rgba(74,127,212,.12);border-color:rgba(74,127,212,.6);color:#90bde8}.seq-transport-spacer{flex:1}.seq-transport-hint{font-size:9px;color:var(--text-dim);opacity:.4;letter-spacing:.04em}.seq-tracks{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:3px}.seq-tracks::-webkit-scrollbar{width:3px}.seq-tracks::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.seq-track-block{display:flex;flex-direction:column}.seq-track-row{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;min-height:44px}.seq-track-header{width:140px;flex-shrink:0;border-left:3px solid transparent;border-right:1px solid var(--border);padding:5px 7px;display:flex;flex-direction:column;gap:4px}.seq-track-top-row{display:flex;align-items:center;gap:4px}.seq-track-label{font-size:11px;flex:1}.seq-track-btn,.seq-track-label{font-weight:700;letter-spacing:.04em}.seq-track-btn{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:2px;color:var(--text-dim);font-family:inherit;font-size:9px;padding:2px 5px;cursor:pointer;transition:background .1s,color .1s;line-height:1}.seq-track-btn:hover{background:rgba(255,255,255,.09);color:var(--text)}.seq-track-btn.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.28);color:var(--text)}.seq-track-btn.muted{background:rgba(212,64,90,.18);border-color:rgba(212,64,90,.4);color:#e87b90}.seq-track-btn.soloed{background:rgba(232,192,56,.18);border-color:rgba(232,192,56,.45);color:#e8c038}.seq-track-synth{display:inline-flex;align-items:center;justify-content:center;padding:2px 4px}.seq-track-synth svg{display:block}.seq-track-remove{color:var(--text-dim)}.seq-track-remove:hover{background:rgba(212,64,90,.2)!important;color:#e87b90!important}.seq-track-edo-row,.seq-track-vol-row{display:flex;align-items:center}.seq-track-edo-row{gap:4px}.seq-edo-toggle{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:2px;color:var(--text-dim);font-family:monospace;font-size:9px;font-weight:700;padding:1px 5px;cursor:pointer;transition:background .1s,color .1s,border-color .1s;line-height:1.4}.seq-edo-toggle.active{border-color:rgba(255,255,255,.22)}.seq-edo-toggle.active,.seq-edo-toggle:hover{color:var(--text);background:rgba(255,255,255,.08)}.seq-edo-select{background:var(--surface2);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:inherit;font-size:9px;padding:1px 3px;outline:none;cursor:pointer;max-width:70px}.piano-roll-outer{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}.pr-header{display:flex;flex-shrink:0;background:#0c0c0f;border-bottom:1px solid rgba(255,255,255,.07)}.pr-header-spacer{width:26px;flex-shrink:0;border-right:1px solid rgba(255,255,255,.07)}.pr-header-steps{flex:1;display:flex}.pr-step-num{flex:none;height:11px;font-size:6px;font-family:monospace;color:rgba(255,255,255,.22);display:flex;align-items:center;padding-left:2px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;border-right:1px solid rgba(255,255,255,.04)}.pr-step-num.current{background:rgba(255,255,255,.13);color:var(--text)}.piano-roll{flex:1;overflow-x:hidden;overflow-y:auto;background:#08080c;cursor:crosshair;min-width:0;max-height:283px}.piano-roll::-webkit-scrollbar{width:3px}.piano-roll::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.pr-fs-overlay{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;background:var(--bg,#08080c)}.pr-fs-bar{flex-shrink:0;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 12px;background:var(--surface);border-bottom:1px solid var(--border)}.pr-fs-title{font-size:12px;font-weight:600;letter-spacing:.02em}.pr-fs-close{background:var(--surface2);border:1px solid var(--border);border-radius:5px;color:var(--text);font-family:inherit;font-size:11px;padding:5px 11px;cursor:pointer;transition:background .12s,border-color .12s}.pr-fs-close:hover{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.25)}.piano-roll-outer--fs{flex:1;min-height:0}.piano-roll-outer--fs .piano-roll{max-height:none;overflow-x:auto}.piano-roll-outer--fs .piano-roll::-webkit-scrollbar{height:5px}.pr-inner{position:relative;background:#08080c;background-image:linear-gradient(to right,transparent calc(100% - 1px),rgba(255,255,255,.055) calc(100% - 1px)),repeating-linear-gradient(to bottom,rgba(255,255,255,.07) 0,rgba(255,255,255,.035) calc(var(--cell-h, 7px)),transparent calc(var(--cell-h, 7px)),transparent calc(var(--oct-h, 217px) - 1px),rgba(255,255,255,.07) calc(var(--oct-h, 217px) - 1px),rgba(255,255,255,.07) var(--oct-h,217px)),repeating-linear-gradient(to bottom,transparent 0,transparent var(--fifth-y,0),rgba(255,255,255,.03) var(--fifth-y,0),rgba(255,255,255,.03) calc(var(--fifth-y, 0px) + var(--cell-h, 7px)),transparent calc(var(--fifth-y, 0px) + var(--cell-h, 7px)),transparent var(--oct-h,217px));background-size:calc((100% - 26px) / var(--steps, 16)) 100%,auto auto,auto auto;background-position:26px 0,0 0,0 0;background-repeat:repeat-x,repeat,repeat}.pr-oct-label{position:absolute;left:0;width:26px;height:7px;font-size:6px;font-weight:700;letter-spacing:.03em;color:rgba(255,255,255,.3);font-family:monospace;display:flex;align-items:center;justify-content:flex-end;padding-right:4px;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:2}.pr-inner:before{content:"";left:26px;width:1px;background:rgba(255,255,255,.07);z-index:3}.pr-beat-col,.pr-inner:before{position:absolute;top:0;bottom:0;pointer-events:none}.pr-beat-col{background:rgba(255,255,255,.012)}.pr-click-row{position:absolute;left:26px;right:0;cursor:crosshair;z-index:4;border-bottom:1px solid rgba(255,255,255,.038);box-sizing:border-box}.pr-click-row:hover{background:rgba(255,255,255,.06)}.pr-note{border-radius:2px;opacity:.82;z-index:5}.pr-cursor-line,.pr-note{position:absolute;pointer-events:none}.pr-cursor-line{top:0;bottom:0;background:rgba(255,255,255,.13);z-index:6}.pr-collapsed{flex:1;display:flex;align-items:stretch;background:#08080c;cursor:pointer;min-width:0;overflow:hidden;height:32px}.pr-col-step{flex-shrink:0;border-right:1px solid rgba(255,255,255,.03);background:transparent;transition:background .05s}.pr-col-step.beat-b{background:rgba(255,255,255,.015)}.pr-col-step.active{background:color-mix(in srgb,var(--track-color,var(--accent)) 55%,transparent)}.pr-col-step.current{background:rgba(255,255,255,.12)}.pr-col-step.active.current{background:color-mix(in srgb,var(--track-color,var(--accent)) 75%,white 25%)}.seq-step{flex-shrink:0;height:22px;border-radius:3px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03);cursor:pointer;position:relative;transition:background .08s,border-color .08s;padding:0}.seq-step.beat-b{background:rgba(255,255,255,.015)}.seq-step:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18)}.seq-drum-step.active{background:rgba(200,200,210,.25);border-color:rgba(200,200,210,.6)}.seq-drum-step.current:after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.14);border-radius:3px;pointer-events:none}.seq-synth-drawer{background:var(--surface2);border:1px solid var(--border);border-top:none;border-radius:0 0 6px 6px;padding:8px 10px;margin-bottom:2px}.seq-inline-synth{display:flex;flex-direction:column;gap:7px;width:-moz-fit-content;width:fit-content}.seq-synth-wave{display:flex;align-items:center;gap:7px}.seq-synth-label{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim)}.seq-fader-bank{display:flex;width:-moz-fit-content;width:fit-content;background:var(--surface);border:1px solid var(--border);border-radius:4px;padding:8px 8px 6px}.seq-fader{display:flex;flex-direction:column;align-items:center;gap:4px;width:28px}.seq-fader+.seq-fader .rect-slider.vertical{margin-left:-1px}.seq-fader-label{font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-dim)}.seq-fader-val{font-size:8px;color:var(--text-dim);font-family:monospace;font-variant-numeric:tabular-nums;width:100%;text-align:center}.seq-wave-btns{display:flex}.seq-wave-btn{background:var(--surface);border:1px solid var(--border);border-radius:3px;color:var(--text-dim);font-family:monospace;font-size:9px;font-weight:700;padding:3px 7px;cursor:pointer;transition:background .1s,color .1s,border-color .1s}.seq-wave-btn:hover{background:rgba(255,255,255,.07);color:var(--text)}.seq-wave-btn.active{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.3);color:var(--text)}.seq-add-track-btn{background:transparent;border:1px dashed rgba(255,255,255,.12);border-radius:5px;color:var(--text-dim);font-family:inherit;font-size:10px;font-weight:600;letter-spacing:.04em;padding:7px 14px;cursor:pointer;transition:background .1s,color .1s,border-color .1s;align-self:flex-start}.seq-add-track-btn:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.22);color:var(--text)}.seq-drum-block{display:flex;align-items:stretch;background:var(--surface);border:1px solid var(--border);border-radius:6px;overflow:hidden;margin-top:4px}.seq-drum-header-col{width:140px;flex-shrink:0;border-left:3px solid rgba(255,255,255,.15);border-right:1px solid var(--border);padding:5px 7px;display:flex;flex-direction:column;gap:4px}.seq-drum-top-row{gap:4px}.seq-drum-top-row,.seq-drum-vol-row{display:flex;align-items:center}.seq-drum-rows{flex:1;display:flex;flex-direction:column;justify-content:center;padding:4px 0;gap:2px;min-width:0;overflow:hidden}.seq-drum-row{display:flex;align-items:center;gap:1px}.seq-drum-voice-names{flex:1;display:flex;flex-direction:column;gap:2px;padding:4px 0;justify-content:center}.seq-drum-voice-name{font-size:8px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-dim);height:22px;display:flex;align-items:center;justify-content:flex-end}.applet-microtones-root :is(button,input,select,textarea,[tabindex]):focus-visible{outline:2px solid var(--accent);outline-offset:1px}.pitch-root{background:var(--ink);color:var(--text);font-family:var(--font-sans),ui-sans-serif,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased}.pitch-root input[type=number]::-webkit-inner-spin-button,.pitch-root input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.pitch-root input[type=number]{-moz-appearance:textfield}.pitch-field{background:var(--ink-3);border:1px solid var(--rule);border-radius:0;padding:.4rem .6rem;color:var(--text);font-family:var(--font-mono),ui-monospace,monospace;font-variant-numeric:tabular-nums;outline:none;transition:border-color .12s ease,box-shadow .12s ease}.pitch-field:focus{border-color:var(--signal);box-shadow:0 0 0 2px color-mix(in srgb,var(--signal) 25%,transparent)}.pitch-btn{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.4rem;min-width:8rem;border:1px solid var(--rule);background:var(--ink-3);color:var(--text);font-weight:500;cursor:pointer;transition:border-color .14s ease,background .14s ease,transform 80ms ease}.pitch-btn:hover{border-color:var(--signal);background:color-mix(in srgb,var(--signal) 12%,var(--ink-3))}.pitch-btn:active{transform:translateY(1px)}.pitch-btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:.7rem 1.5rem;border:1px solid var(--signal);background:color-mix(in srgb,var(--signal) 18%,var(--ink));color:var(--signal);font-weight:600;letter-spacing:.01em;cursor:pointer;transition:background .14s ease,transform 80ms ease}.pitch-btn-primary:hover{background:color-mix(in srgb,var(--signal) 28%,var(--ink))}.pitch-btn-primary:active{transform:translateY(1px)}.pitch-kbd{display:inline-block;padding:.05rem .4rem;border:1px solid var(--rule);border-radius:.25rem;background:var(--ink-3);font-family:var(--font-mono),ui-monospace,monospace;font-size:.7rem;color:var(--text-dim)}@keyframes pitchToneActive{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--signal) 45%,transparent)}to{box-shadow:0 0 0 12px color-mix(in srgb,var(--signal) 0%,transparent)}}.pitch-tone-active{animation:pitchToneActive .7s ease-out infinite}@keyframes pitchFeedback{0%{transform:translateY(4px);opacity:0}to{transform:translateY(0);opacity:1}}.pitch-feedback{animation:pitchFeedback .16s ease-out both}