@import "https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Space+Grotesk:wght@400;500;600;700&display=swap";:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;color:var(--text);background:var(--background);font-synthesis:none;--background:#201a26;--text:#f6edf0;--accent:#ffb18d;--brand:#ff684a;--brand-hover:#ff866b;--on-brand:#231d2b;--wave:#ff866b;--line:#514357;--control-line:#8e7b93;--muted:#bbaebc;--paper:#292231;--surface:#322a3b;--inset:#1b1621;--selection:#51362e;--selection-hover:#654135;font-family:DM Sans,Helvetica Neue,sans-serif;font-weight:400}*{box-sizing:border-box}body{margin:0}button,input,textarea{font:inherit;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button:disabled{opacity:.45;cursor:wait}button{transition:background .16s,color .16s,transform .16s}button:active:not(:disabled){transform:translateY(1px)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--accent);outline-offset:4px}button{border:0}button:disabled{pointer-events:none}[hidden]{display:none!important}a{color:inherit}input[type=range]{width:100%;height:18px;accent-color:var(--accent);cursor:pointer;margin:0}input[type=checkbox]{accent-color:var(--accent);width:14px;height:14px;margin:0}button:hover{color:var(--accent)}.masthead{border-bottom:1px solid var(--line);align-items:center;gap:30px;max-width:1440px;margin:auto;padding:20px 4.5%;display:flex}.wordmark{letter-spacing:-2px;flex-shrink:0;align-items:center;gap:10px;font-family:Space Grotesk,sans-serif;font-size:33px;font-weight:800;line-height:1;text-decoration:none;display:inline-flex}.brand-logo{object-fit:contain;width:48px;height:48px;display:block}main{max-width:1440px;margin:auto;padding:0 4.5%}.intro{justify-content:space-between;align-items:flex-end;gap:24px;padding:35px 0 28px;display:flex}.eyebrow{letter-spacing:1.7px;color:var(--muted);margin:0 0 13px;font-size:10px;font-weight:650}h1,h2{font-family:Space Grotesk,Helvetica Neue,sans-serif}h1{letter-spacing:-1.8px;margin:0;font-size:clamp(30px,3.3vw,46px);font-weight:500;line-height:1.12}h1 span{color:var(--brand)}.intro>p{color:var(--muted);margin:0 1px 3px 0;font-size:13px;line-height:1.7}.instrument{border:1px solid var(--line);background:var(--paper);border-radius:10px;grid-template-columns:325px minmax(0,1fr);display:grid;overflow:hidden}.library-guide{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,4vw,64px);max-width:1440px;margin:0 auto;padding:28px 4.5% 56px;display:grid}.library-guide h2{letter-spacing:-.8px;margin:0 0 16px;font-size:clamp(24px,2.5vw,32px);font-weight:500}.library-guide p:not(.eyebrow){color:var(--muted);font-size:13px;line-height:1.8}.library-links{flex-wrap:wrap;gap:12px 24px;margin-top:22px;font-size:13px;display:flex}.library-links a{color:var(--accent);text-underline-offset:4px}.library-example{border-top:1px solid var(--line);min-width:0;padding-top:20px}.library-example pre{color:var(--accent);padding:12px 0;font-size:12px;line-height:1.9;overflow-x:auto}.library-example pre:focus-visible{outline:2px solid var(--accent);outline-offset:4px}@media (width<=760px){.library-guide{grid-template-columns:1fr}}.workspace{grid-area:1/2;min-width:0;padding:24px 28px 30px}.controls{border-right:1px solid var(--line);background:var(--surface);grid-area:1/1;padding:28px 24px}.toolbar{justify-content:space-between;align-items:center;gap:10px;display:flex}.mode-switch{border-bottom:1px solid var(--line);background:0 0;gap:12px;padding:0;display:flex}.mode-switch button{background:0 0;border-bottom:2px solid #0000;border-radius:0;padding:10px 2px 13px;font-size:12px}.mode-switch button[aria-pressed=true]{border-bottom-color:var(--accent);color:var(--accent)}.quiet{white-space:nowrap;background:0 0;padding:7px 0;font-size:12px}.scope{background:var(--inset);border-radius:3px;height:220px;margin-top:32px;position:relative;overflow:hidden}.scope-top,.scope-bottom{z-index:1;color:var(--muted);justify-content:space-between;align-items:center;font-size:10px;display:flex;position:absolute;left:18px;right:18px}.scope-top{top:17px}.scope-top>span:first-child{text-transform:capitalize;color:var(--text);font-size:13px;font-weight:550}.scope-bottom{letter-spacing:.5px;bottom:14px}canvas{width:calc(100% - 36px);height:139px;position:absolute;top:42px;left:18px}.playhead{border-left:1px solid var(--accent);pointer-events:none;will-change:transform;position:absolute;top:42px;bottom:39px;left:18px}.transport{align-items:center;gap:18px;padding:20px 0 30px;display:flex}.primary{background:var(--brand);color:var(--on-brand);border-radius:4px;justify-content:center;align-items:center;gap:12px;min-width:158px;padding:13px 16px;font-size:12px;font-weight:600;display:flex}.primary:hover{background:var(--brand-hover);color:var(--on-brand)}.primary kbd{border:1px solid #231d2b66;border-radius:2px;padding:2px 4px;font-family:inherit;font-size:9px}.toggle{white-space:nowrap;color:var(--muted);align-items:center;gap:6px;font-size:11px;display:flex}.monitor{color:var(--muted);gap:4px;width:95px;margin-left:auto;font-size:10px;display:grid}.monitor input{height:12px;accent-color:var(--accent)}.download{white-space:nowrap;background:0 0;padding:10px 0 10px 4px;font-size:12px}.download span{margin-left:9px}.section-heading{letter-spacing:1.1px;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px;font-size:10px;font-weight:550;display:flex}.section-heading>span+span{letter-spacing:0;color:var(--muted);font-size:10px;font-weight:400}.section-heading .toggle{letter-spacing:0;font-size:10px;font-weight:400}.families{flex-wrap:wrap;gap:7px 5px;display:flex}.families button{text-transform:capitalize;border:1px solid var(--line);background:0 0;border-radius:4px;padding:8px 10px;font-size:11px}.families button:hover{border-color:var(--accent)}.families button[aria-pressed=true]{background:var(--selection);border-color:var(--brand);color:var(--accent)}.family-description{color:var(--muted);min-height:35px;margin:14px 0 21px;font-size:11px;line-height:1.6}.shape-heading{border-top:1px solid var(--line);margin-bottom:22px;padding-top:23px}.shape-heading>span+span{font-size:9px}.slider-label{justify-content:space-between;margin:18px 0 9px;font-size:12px;display:flex}.slider-label output{color:var(--muted);font-variant-numeric:tabular-nums;font-size:11px}.range-captions{color:var(--muted);justify-content:space-between;margin:3px 0 21px;font-size:9px;display:flex}.seed-row{border-top:1px solid var(--line);justify-content:space-between;align-items:center;padding-top:17px;display:flex}.seed-row label{align-items:center;gap:12px;font-size:11px;display:flex}.seed-row input{border:1px solid var(--control-line);background:0 0;border-radius:3px;width:96px;padding:5px 6px;font-size:11px}.keyboard{gap:4px;height:164px;display:flex;position:relative}.key{border-radius:0 0 5px 5px;flex-direction:column;justify-content:flex-end;align-items:center;gap:10px;padding:0 0 13px;transition:background .1s,transform .1s;display:flex;position:relative}.key span{font-size:12px}.key kbd{color:#e4d2df;font-family:inherit;font-size:9px}.key.white{border:1px solid var(--control-line);box-shadow:0 3px 0 var(--background);background:#54465f;flex:1}.key.black{z-index:2;left:calc(var(--position) * 12.5% - 3.75%);width:7.5%;height:100px;color:var(--text);border:1px solid var(--control-line);background:#17121c;position:absolute;box-shadow:0 3px #120e17}.key.black kbd{color:var(--muted)}.key.black span{font-size:10px}.key:hover,.key.white.pressed,.key.white:active{background:var(--accent);color:var(--on-brand)}.key.black:hover,.key.black.pressed,.key.black:active{background:var(--brand);color:var(--on-brand)}.key:is(:hover,.pressed,:active) kbd{color:inherit}.key.pressed,.key:active{box-shadow:none;transform:translateY(3px)}.keyboard-footer{color:var(--muted);letter-spacing:.5px;justify-content:space-between;gap:15px;margin-top:15px;font-size:9px;display:flex}.keyboard-footer>span:nth-child(2){color:var(--accent)}.presets{grid-template-columns:200px 1fr;gap:35px;padding:34px 0;display:grid}.presets .eyebrow{font-size:9px}h2{letter-spacing:-.8px;margin:0;font-size:25px;font-weight:500;line-height:1.25}.demo-intro{color:var(--muted);margin:13px 0 0;font-size:12px}.preset-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px;display:grid}.demo{border-top:1px solid var(--line);min-width:0;padding-top:12px}.demo-navigation{grid-column:span 2}.demo-heading{justify-content:space-between;align-items:center;gap:8px;min-height:30px;margin-bottom:15px;display:flex}.demo-heading h3{margin:0;font-size:12px;font-weight:500}.demo-tooltip-wrap{display:inline-flex;position:relative}.demo-tooltip-input{width:100%}.demo-edit{z-index:3;visibility:hidden;opacity:0;background:var(--inset);border:1px solid var(--control-line);color:var(--text);white-space:nowrap;border-radius:5px;padding:10px 12px;font-size:11px;transition:opacity .12s ease-out,background .12s ease-out;position:absolute;bottom:calc(100% + 8px);left:0}.demo-edit:after{content:"";height:10px;position:absolute;top:100%;left:-1px;right:-1px}.demo-tooltip-wrap:not(.tooltip-dismissed):is(:hover,:focus-within)>.demo-edit{visibility:visible;opacity:1}.demo-edit:hover{background:var(--selection)}.demo-edit[aria-pressed=true]{color:var(--accent)}.demo-control{align-items:center;min-height:44px;display:flex}.demo-button{--demo-background:#f6edf0;--demo-hover:#e7d6df;--demo-foreground:var(--on-brand);min-width:108px;height:44px;color:var(--demo-foreground);background:var(--demo-background);border:1px solid #0000;border-radius:5px;justify-content:center;align-items:center;padding:0 18px;font-size:12px;font-weight:600;display:inline-flex}.demo-button[data-demo=confirmation]{--demo-background:#f3ca52;--demo-hover:#ffda70;--demo-foreground:#30270d}.demo-button[data-demo=error]{--demo-background:#bd3645;--demo-hover:#a82c3a;--demo-foreground:#fff5f5}.demo-button[data-demo=success]{--demo-background:#23764d;--demo-hover:#1c6540;--demo-foreground:#f0fff6}.demo-button[data-demo=notification]{--demo-background:var(--brand);--demo-hover:var(--brand-hover);--demo-foreground:var(--on-brand)}.demo-button:hover{background:var(--demo-hover);color:var(--demo-foreground)}.demo-button.is-confirmed{color:#83e3af;background:#203c30;border-color:#44785c}.demo-button svg,.demo-toast svg{flex-shrink:0;width:20px;height:20px}.demo-nav-buttons{gap:8px;display:flex}.demo-nav-buttons .demo-button{min-width:44px;padding:0}.demo-input{border:1px solid var(--control-line);background:var(--inset);border-radius:5px;width:100%;min-width:0;height:44px;padding:0 12px;font-size:16px}.demo-input::placeholder{color:var(--muted);font-size:12px}.sr-only{clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.demo-toasts{z-index:10;bottom:max(24px, env(safe-area-inset-bottom));right:max(24px, env(safe-area-inset-right));pointer-events:none;gap:10px;width:min(360px,100vw - 32px);display:grid;position:fixed}.demo-toast{pointer-events:auto;border:1px solid;border-radius:7px;align-items:center;gap:12px;min-height:64px;padding:10px 10px 10px 16px;font-size:13px;animation:.18s ease-out toast-in;display:flex}.demo-toast-error{color:#fff0ed;background:#8e3038;border-color:#b95159}.demo-toast-success{color:#effff4;background:#246343;border-color:#438860}.demo-toast-notification{color:var(--on-brand);background:#f6edf0;border-color:#e7d6df}.toast-symbol{display:flex}.demo-toast button{width:44px;height:44px;color:inherit;background:0 0;border-radius:4px;flex-shrink:0;margin-left:auto;padding:12px}.demo-toast button:hover{color:inherit;background:#00000015}.demo-toast button:focus-visible{outline-offset:0;outline-color:currentColor}@keyframes toast-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}footer{border-top:1px solid var(--line);color:var(--muted);justify-content:space-between;align-items:center;gap:20px;padding:18px 0 25px;font-size:10px;display:flex}.footer-dot{background:var(--brand);border-radius:50%;width:6px;height:6px;margin-right:8px;display:inline-block}.sequence-input{border:1px solid var(--control-line);background:var(--inset);letter-spacing:1px;border-radius:3px;width:100%;padding:13px;font-size:16px}.sequence-tools{align-items:flex-start;gap:14px;margin-top:12px;display:flex}.steps{flex-wrap:wrap;flex:1;gap:5px;display:flex}.steps button{background:var(--selection);border-radius:3px;min-width:32px;padding:8px;font-size:11px}.steps button:hover{background:var(--selection-hover);color:var(--text)}.tempo-row{align-items:center;gap:16px;margin-top:20px;font-size:11px;display:flex}.tempo-row label{white-space:nowrap;gap:12px;display:flex}.tempo-row output{color:var(--muted)}.tempo-row input{max-width:180px}.tempo-row>span{color:var(--muted)}.hint{color:var(--muted);margin:12px 0 24px;font-size:11px;line-height:1.6}#sequence-panel{margin-bottom:25px}#recipe-json{resize:vertical;background:var(--inset);border:1px solid var(--control-line);tab-size:2;border-radius:3px;width:100%;min-height:245px;padding:15px;font-family:ui-monospace,monospace;font-size:12px;line-height:1.6}.error{color:#ffb6a9;background:#422c30;border-radius:3px;margin:0 0 20px;padding:12px 14px;font-size:12px}@media (width>=1440px){.intro{padding-top:40px}.scope{height:240px}canvas{height:159px}.keyboard{height:180px}.key.black{height:110px}}@media (width<=1100px){.instrument{grid-template-columns:280px minmax(0,1fr)}.controls{padding:24px 18px}.workspace{padding:24px 20px}.transport{gap:12px}.primary{min-width:120px;padding:13px}.primary kbd{display:none}.monitor{width:75px}.presets{grid-template-columns:180px 1fr;gap:25px}.preset-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 16px}.keyboard-footer>span:last-child{display:none}}@media (width<=800px){.masthead{padding:22px 5%}main{padding:0 5%}.intro{padding:35px 0 28px}.intro>p{display:none}h1{letter-spacing:-1.5px}.instrument{grid-template-columns:1fr}.workspace{grid-area:1/1;padding:20px 18px 28px}.controls{border-right:0;border-top:1px solid var(--line);grid-area:2/1;padding:26px 18px}.families{gap:8px}.families button{padding:9px 13px}.family-description{min-height:0;margin-bottom:22px}.scope{height:205px;margin-top:24px}canvas{height:124px}.keyboard{height:155px}.key.black{height:95px}.shape-heading{margin-top:22px}.presets{grid-template-columns:1fr;gap:23px}.presets h2 br{display:none}.presets h2{font-size:24px}.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}.monitor{width:95px;margin-left:auto}footer{align-items:flex-start}.primary kbd{display:inline}.primary{min-width:150px}}@media (width<=480px){.mode-switch button{padding:9px 0}.scope-bottom{font-size:8px}.transport{flex-wrap:wrap;gap:10px;padding-bottom:26px}.monitor{width:72px}.download{margin-left:auto}.primary{min-width:125px}.key span{font-size:10px}.key.black span{font-size:8px}.key kbd{display:none}.keyboard{height:135px}.key.black{height:80px}.keyboard-footer{font-size:8px}.section-heading>span+span{font-size:9px}.preset-list{grid-template-columns:repeat(2,minmax(0,1fr))}footer{flex-direction:column;gap:8px}.sequence-tools,.tempo-row{gap:10px}.tempo-row input{min-width:60px}.tempo-row>span{white-space:nowrap}.intro .eyebrow{font-size:9px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}.playhead{display:none}}