@font-face{font-family:Syne;src:url('../../fonts/syne-normal-800.woff2') format('woff2');font-weight:800;font-display:swap}@font-face{font-family:Geist;src:url('../../fonts/geist-normal-400.woff2') format('woff2');font-weight:400;font-display:swap}@font-face{font-family:Geist;src:url('../../fonts/geist-normal-600.woff2') format('woff2');font-weight:600;font-display:swap}@font-face{font-family:Mono;src:url('../../fonts/mono-normal-400.woff2') format('woff2');font-display:swap}
:root{--sky:#BBD8EF;--ink:#17234F;--blue:#2446EB;--coral:#FA8F99;--yellow:#F5CD68;--paper:#FFFDF8;--rule:#17234F30;--pad:clamp(18px,4vw,65px);color:var(--ink);font:14px/1.5 Geist,Arial,sans-serif;color-scheme:light;background:var(--sky)}*{box-sizing:border-box}body{margin:0}button,input,a{font:inherit;color:inherit}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{cursor:pointer;border:0;background:none}button:disabled{cursor:default;opacity:.35}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--blue);outline-offset:4px}a{text-decoration:none}img,svg{display:block;max-width:100%}[hidden]{display:none!important}.defs{width:0;height:0;position:absolute;overflow:hidden}.icon{width:22px;height:22px;stroke:currentColor;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.skip{position:fixed;left:15px;top:10px;padding:10px 20px;background:var(--ink);color:white;z-index:50;transform:translateY(-150%)}.skip:focus{transform:none}.page{max-width:1640px;margin:auto;padding:0 var(--pad)}.topbar{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:86px;border-bottom:1px solid var(--rule)}.topbar>a:first-child{display:flex;gap:18px;align-items:center}.clnt{font:900 28px/.9 Arial;letter-spacing:-1.8px}.topbar>a:first-child>span:last-child{font:9px Mono,monospace;letter-spacing:1.7px}.topbar-project{font:800 17px Syne,sans-serif;letter-spacing:-1px}.topbar>a:last-child{display:flex;align-items:center;gap:8px;font-size:11px}.topbar .icon{width:15px;height:15px}.intro{display:grid;grid-template-columns:1.35fr 1fr;align-items:end;gap:45px;padding:48px 0 35px}.kicker{font:10px/1.5 Mono,monospace;letter-spacing:1.2px;margin:0 0 16px}.intro h1{font:800 clamp(42px,5.3vw,78px)/.99 Syne,Arial,sans-serif;letter-spacing:-.065em;margin:0}.intro h1>span{color:var(--blue)}.intro-note{padding-bottom:6px}.intro-note>p{font-size:clamp(13px,1.4vw,19px);line-height:1.5;margin:0}.intro-note>span{display:block;font:9px Mono,monospace;letter-spacing:.4px;margin-top:20px;color:#36456e}.transport{display:flex;align-items:center;gap:25px;padding:15px 0 30px}.play-button{background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;gap:12px;min-height:58px;padding:14px 26px;border-radius:40px;font-weight:600;font-size:15px;white-space:nowrap;min-width:166px}.play-button:hover{background:#1834c9}.play-button:focus-visible{outline-color:var(--ink)}.play-readout{display:flex;align-items:flex-start;flex-direction:column;gap:6px;min-width:155px}.play-readout>span{font-size:11px}.play-readout>output{font:11px Mono,monospace;color:#46567b}.tempo-label,.volume-label{display:flex;flex-direction:column;gap:8px;flex:1;max-width:230px;min-width:110px}.tempo-label>span,.volume-label>span{font:9px Mono,monospace;letter-spacing:.7px;display:flex;align-items:baseline;gap:7px}.tempo-label output{font:600 20px Geist,sans-serif;letter-spacing:-1px}.tempo-label small{font-size:8px}.volume-label output{font-size:10px;margin-left:auto}input[type=range]{width:100%;min-height:24px;margin:0;accent-color:var(--blue);cursor:pointer}.volume-label{max-width:150px;margin-left:auto}.workbench{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.16fr);gap:30px;align-items:start}.panel-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:18px}.panel-heading h2{font-size:18px;font-weight:600;letter-spacing:-.03em;margin:0}.panel-heading>span{font:8px Mono,monospace;letter-spacing:.9px;color:#46567b}.print-surface{padding:10px;background:var(--paper);box-shadow:0 20px 50px #17234f18;border-radius:3px;overflow:hidden}.print-surface>svg{width:100%;height:auto;aspect-ratio:4/5}.palette-row{display:flex;gap:15px;flex-wrap:wrap;padding:22px 0 15px}.palette-row>button{display:flex;align-items:center;gap:7px;font-size:10px;min-height:36px;padding:3px 0;border-bottom:2px solid transparent}.palette-row>button[aria-pressed=true]{border-color:var(--ink);font-weight:600}.swatch{display:block;height:17px;width:17px;border-radius:50%;border:1px solid #17234f3d;background:var(--blue)}.swatch.rose{background:#e85950}.swatch.mint{background:#174c46}.loop-name{display:flex;align-items:center;gap:18px;padding:5px 0 18px}.loop-name>span{font:8px Mono,monospace;letter-spacing:.7px;white-space:nowrap}.loop-name>input{border:0;border-bottom:1px solid #17234f65;border-radius:0;padding:10px 0;min-width:0;width:100%;background:none;font-size:14px;outline-offset:2px}.action-button{width:100%;min-height:48px;border:1px solid #17234f88;border-radius:5px;display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 18px;background:var(--paper);font-size:12px;font-weight:600;text-align:center}.action-button:hover{background:#fff;border-color:var(--ink)}.action-button .icon{width:18px;height:18px}.action-button>span{font:8px Mono,monospace;letter-spacing:1px;margin-left:auto}.print-panel>.action-button{justify-content:flex-start;background:transparent}.score-panel{background:var(--paper);padding:25px;border-radius:16px;box-shadow:0 12px 40px #17234f08;scroll-margin-top:20px}.score-panel .panel-heading>span{font-size:7px}.presets{padding:5px 0 15px;border-bottom:1px solid var(--rule)}.presets>p{font-size:11px;margin:0 0 12px;color:#506080}.presets>div{display:flex;flex-wrap:wrap;gap:7px}.presets button{padding:9px 13px;border-radius:30px;border:1px solid #17234f4d;font-size:10px;min-height:37px}.presets button:hover{border-color:var(--blue)}.presets button[aria-pressed=true]{color:white;background:var(--ink);border-color:var(--ink)}.score-hint{font-size:11px;color:#506080;line-height:1.7;margin:17px 0 19px}.half-tabs{display:none}.step-numbers{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px;font:7px Mono,monospace;color:#61708d;text-align:center;padding:0 0 10px}fieldset.lane{margin:0;padding:0 0 16px;border:0;min-width:0}.lane legend{font-size:12px;font-weight:600;padding:0 0 9px;width:100%;display:flex;gap:10px;align-items:baseline}.lane legend span{font-size:9px;font-weight:400;color:#65718b;margin-left:auto}.step-row{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:4px}.step{position:relative;min-width:0;aspect-ratio:.82;max-height:44px;min-height:30px;padding:0;border-radius:5px;background:#e8eaf0;border:1px solid transparent;display:grid;place-items:center;transition:background .08s,border-color .08s}.step[data-step="0"],.step[data-step="4"],.step[data-step="8"],.step[data-step="12"]{background:#d9deeb}.step:hover{border-color:#2446eb80}.step[aria-pressed=true]{background:var(--blue);color:#fff}.lane[data-track="1"] .step[aria-pressed=true]{background:#e77b88}.lane[data-track="2"] .step[aria-pressed=true],.lane[data-track="3"] .step[aria-pressed=true]{background:var(--ink)}.lane[data-track="4"] .step[aria-pressed=true]{background:var(--yellow);color:var(--ink)}.step>i{display:block;width:5px;height:5px;border-radius:50%;background:currentColor;opacity:0}.step[aria-pressed=true]>i{opacity:1}.step.is-current:after{content:'';position:absolute;inset:-4px;border:2px solid var(--ink);border-radius:7px;pointer-events:none}.score-tools{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:13px 0;border-top:1px solid var(--rule);margin-top:5px}.score-tools>button{display:flex;gap:6px;align-items:center;min-height:36px;font-size:10px;padding:6px 9px;background:#eef1f5;border-radius:4px}.score-tools button .icon{width:14px;height:14px}.score-tools button:hover:not(:disabled){background:#dde4ef}.score-tools>span{margin-left:auto;font:8px Mono,monospace;color:#506080}.keyboard-note{font-size:9px;color:#6c7690;line-height:1.7;margin:5px 0 0}.takeaway{margin-top:25px;padding-top:25px;border-top:1px solid var(--rule)}.takeaway .kicker{font-size:8px;letter-spacing:1px;margin-bottom:13px;color:#53658c}.takeaway h3{font:600 25px/1.1 Geist,sans-serif;letter-spacing:-.04em;margin:0 0 22px}.takeaway>.action-button{background:var(--ink);color:#fff;border-color:var(--ink)}.takeaway>.action-button:hover{background:var(--blue);border-color:var(--blue)}.export-status{font-size:10px;line-height:1.7;color:#65718b;margin:11px 0 0;min-height:16px}.share-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:45px;border-bottom:1px solid var(--rule);padding:10px 0;margin-top:16px;font-size:11px}.share-button .icon{width:15px;height:15px}#share-fallback{margin-top:15px}#share-fallback label{font-size:10px;display:block;margin-bottom:8px}#share-url{width:100%;font-size:11px;padding:10px;border:1px solid var(--rule);background:white}.about-instrument{display:grid;grid-template-columns:1fr 1fr;gap:80px;border-top:1px solid var(--rule);margin-top:75px;padding:50px 0}.about-instrument>div:first-child{max-width:490px}.about-instrument h2{font:800 clamp(31px,4vw,53px)/1.03 Syne,sans-serif;letter-spacing:-.05em;margin:0 0 25px}.about-instrument p:not(.kicker){font-size:13px;color:#3d5075;line-height:1.85;max-width:430px}.about-instrument h3{font-size:23px;letter-spacing:-.04em;font-weight:600;margin:0 0 23px}.shape-key{padding:0;margin:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:24px}.shape-key li{display:flex;align-items:center;gap:15px;min-height:45px}.shape-key li>i{display:block;width:30px;height:30px;flex-shrink:0}.shape-key span{font-size:10px;color:#46567b}.shape-key strong{display:block;color:var(--ink);font-size:12px;font-weight:600;margin-bottom:6px}.key-arch{background:var(--blue);border-radius:20px 20px 0 0}.key-circle{background:var(--coral);border:9px solid var(--coral);border-radius:50%;box-shadow:inset 0 0 0 10px var(--sky)}.key-hat{background:repeating-linear-gradient(30deg,transparent 0 6px,var(--ink) 6px 9px,transparent 9px 15px)}.shape-key li>i.key-bass{height:35px;width:14px;border-radius:10px;background:var(--ink);transform:rotate(-15deg);margin:0 8px}.key-ring{border:5px solid var(--yellow);border-radius:50%}footer{padding:32px 0 40px;border-top:1px solid var(--rule);display:flex;align-items:start;justify-content:space-between;gap:35px}footer strong{font:800 17px Syne,sans-serif;letter-spacing:-.7px}footer p{font-size:9px;line-height:1.9;color:#46567b;margin:12px 0 0}footer>p{margin-top:0}footer>a{display:flex;gap:8px;align-items:center;font-size:10px;white-space:nowrap;min-height:35px}footer .icon{height:14px;width:14px}.no-script{padding:40px}.no-script a{text-decoration:underline}
@media(min-width:1450px){.score-panel{padding:30px}.workbench{gap:40px}.step{max-height:46px}.lane legend{padding-bottom:12px}fieldset.lane{padding-bottom:20px}.score-hint{margin:20px 0 22px}.takeaway{margin-top:30px;padding-top:30px}}
@media(max-width:1100px){.workbench{gap:22px;grid-template-columns:minmax(0,.85fr) minmax(0,1.2fr)}.score-panel{padding:20px}.panel-heading>span{font-size:7px}.step-row,.step-numbers{gap:3px}.step{border-radius:4px;min-height:28px}.presets button{font-size:9px;padding:8px 10px}.transport{gap:18px}.play-readout{min-width:135px}.intro{gap:30px}.score-tools{gap:7px}.score-tools>button{font-size:9px;padding:6px}.keyboard-note{font-size:8px}.takeaway h3{font-size:22px}.palette-row{gap:10px}.palette-row>button{font-size:9px}.loop-name{gap:12px}.loop-name>span{font-size:7px}.loop-name>input{font-size:12px}.about-instrument{gap:45px}.shape-key{gap:20px 15px}.shape-key li{gap:10px}}
@media(max-width:900px){.workbench{grid-template-columns:1fr 1.18fr;gap:20px}.score-panel{padding:17px}.step{min-height:25px}.presets>div{gap:5px}.presets button{padding:8px 9px;font-size:8px}.panel-heading{display:block}.panel-heading>span{display:block;margin-top:7px}.play-button{min-width:140px;padding:12px 20px;font-size:13px}.play-readout{min-width:120px}.play-readout>span{font-size:10px}.transport{gap:17px}.volume-label{max-width:120px}.score-tools>span{width:100%;margin:0}.topbar{min-height:75px}.topbar>a:first-child{gap:12px}.topbar-project{font-size:15px}.intro h1{font-size:clamp(40px,5.7vw,65px)}}
@media(max-width:760px){:root{--pad:22px}.topbar{gap:15px;min-height:70px}.topbar>a:first-child>span:last-child{font-size:7px;letter-spacing:1px}.clnt{font-size:25px}.topbar-project{display:none}.topbar>a:last-child{font-size:10px;gap:6px}.intro{grid-template-columns:1fr;gap:23px;padding:32px 0 23px}.intro .kicker{font-size:8px;letter-spacing:1px}.intro h1{font-size:clamp(40px,8.4vw,66px);letter-spacing:-.06em}.intro-note>p{font-size:13px}.intro-note>span{font-size:8px;margin-top:12px}.transport{display:grid;grid-template-columns:auto 1fr;gap:17px 20px;padding-bottom:27px}.play-button{min-height:52px;padding:12px 22px;font-size:14px;min-width:155px}.play-readout{min-width:0}.play-readout>span{font-size:10px}.play-readout>output{font-size:10px}.tempo-label,.volume-label{max-width:none;min-width:0;margin:0}.tempo-label>span,.volume-label>span{font-size:8px}.tempo-label output{font-size:17px}.volume-label output{font-size:9px}.volume-label>span{min-height:25px;align-items:center}.workbench{grid-template-columns:1fr;gap:35px}.print-panel{max-width:560px;width:100%;margin:auto}.print-surface{padding:8px;max-width:480px;margin:auto}.panel-heading{display:flex}.panel-heading h2{font-size:18px}.panel-heading>span{margin:0;font-size:7px}.palette-row{justify-content:center;gap:22px;padding-top:17px}.palette-row>button{font-size:10px;min-height:39px}.loop-name{padding:2px 0 17px;gap:20px}.loop-name>span{font-size:8px}.loop-name>input{font-size:13px}.print-panel>.action-button{min-height:48px;font-size:12px}.score-panel{padding:25px;border-radius:13px}.score-panel .panel-heading>span{font-size:7px}.presets button{min-height:40px;font-size:10px;padding:9px 13px}.presets>div{gap:7px}.presets>p{font-size:11px}.score-hint{font-size:11px}.step{min-height:37px;max-height:45px}.lane legend{font-size:13px;padding-bottom:10px}.lane legend span{font-size:9px}.step-numbers{font-size:8px;padding-bottom:12px}.step-row,.step-numbers{gap:4px}fieldset.lane{padding-bottom:19px}.score-tools>button{font-size:10px;padding:8px 10px;min-height:40px}.score-tools>span{width:auto;margin-left:auto;font-size:9px}.keyboard-note{font-size:9px}.takeaway h3{font-size:26px}.takeaway .kicker{font-size:8px}.action-button{min-height:48px;font-size:12px}.export-status{font-size:10px}.share-button{font-size:12px;min-height:48px}.about-instrument{grid-template-columns:1fr;gap:35px;margin-top:45px;padding:35px 0}.about-instrument h2{font-size:38px}.about-instrument .kicker{font-size:8px}.about-instrument p:not(.kicker){font-size:12px}.about-instrument h3{font-size:23px}.shape-key{gap:22px}.shape-key li{gap:14px}.shape-key span{font-size:10px}.shape-key strong{font-size:12px}footer{flex-wrap:wrap;gap:20px;padding:25px 0 35px}footer>div{width:100%}footer p{font-size:9px}footer>p{flex:1;min-width:180px}footer>a{font-size:10px}}
@media(max-width:600px){:root{--pad:18px}.score-panel{padding:20px}.half-tabs{display:flex;gap:7px;margin:18px 0 16px}.half-tabs>button{flex:1;min-height:40px;font-size:10px;border:1px solid var(--rule);border-radius:4px}.half-tabs>button[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}.step-row,.step-numbers{grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}#lanes[data-half="0"] .step:nth-child(n+9),#lanes[data-half="1"] .step:nth-child(-n+8),.step-numbers[data-half="0"]>span:nth-child(n+9),.step-numbers[data-half="1"]>span:nth-child(-n+8){display:none}.step{aspect-ratio:.84;min-height:44px;max-height:50px}.score-tools{gap:8px}.score-tools>button{font-size:10px}.score-tools>span{font-size:8px}.presets>div{gap:6px}.presets button{font-size:9px;padding:9px 10px}.score-hint{font-size:11px}.lane legend{font-size:13px}.lane legend span{font-size:10px}.print-surface{max-width:380px}.intro h1{font-size:clamp(40px,10.3vw,57px)}.intro-note{max-width:330px}.print-panel .panel-heading>span{font-size:6px}.palette-row{gap:18px}.takeaway h3{font-size:25px}.about-instrument h2{font-size:34px}.shape-key{gap:22px 15px}.shape-key li{gap:11px}.shape-key span{font-size:9px}.shape-key strong{font-size:12px}}
@media(max-width:360px){:root{--pad:15px}.topbar>a:first-child{gap:10px}.topbar>a:first-child>span:last-child{font-size:6px}.topbar>a:last-child{font-size:9px}.intro h1{font-size:38px}.intro .kicker{font-size:7px}.intro-note>p{font-size:12px}.play-button{min-width:137px;font-size:12px;padding:12px 18px}.transport{gap:17px}.play-readout>span{font-size:9px}.score-panel{padding:17px}.presets button{font-size:8px;padding:9px}.score-panel .panel-heading>span{font-size:6px}.palette-row{gap:14px}.palette-row>button{font-size:9px}.loop-name{gap:13px}.loop-name>span{font-size:7px}.step-row,.step-numbers{gap:3px}.step{min-height:42px;border-radius:4px}.score-tools>span{width:100%;margin-left:0}.takeaway h3{font-size:23px}.action-button{font-size:11px}.about-instrument h2{font-size:31px}.shape-key li>i{transform:scale(.85)}.shape-key span{font-size:8px}.shape-key strong{font-size:11px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}

.intro h1{font-size:clamp(42px,4.6vw,66px)}#wav-preview{width:100%;height:42px;margin-top:16px}
@media(max-width:760px){.intro h1{font-size:clamp(34px,7.7vw,57px)}}
@media(max-width:600px){.intro h1{font-size:clamp(30px,8.4vw,43px)}}
@media(max-width:360px){.intro h1{font-size:30px}}

.score-jump{display:none}@media(max-width:760px){.score-jump{grid-column:1/-1;display:block;text-align:right;font-size:11px;text-decoration:underline;text-underline-offset:4px;padding:4px 0 0}.transport{row-gap:13px}}