@font-face{font-family:Space Grotesk;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/space-grotesk-latin-400-normal-CJ-V5oYT.woff2) format("woff2"),url(/assets/space-grotesk-latin-400-normal-BnQMeOim.woff) format("woff")}@font-face{font-family:Space Grotesk;font-style:normal;font-display:swap;font-weight:500;src:url(/assets/space-grotesk-latin-500-normal-lFbtlQH6.woff2) format("woff2"),url(/assets/space-grotesk-latin-500-normal-CNSSEhBt.woff) format("woff")}@font-face{font-family:Space Grotesk;font-style:normal;font-display:swap;font-weight:600;src:url(/assets/space-grotesk-latin-600-normal-DjKNqYRj.woff2) format("woff2"),url(/assets/space-grotesk-latin-600-normal-BflQw4A9.woff) format("woff")}@font-face{font-family:IBM Plex Mono;font-style:normal;font-display:swap;font-weight:400;src:url(/assets/ibm-plex-mono-latin-400-normal-DMJ8VG8y.woff2) format("woff2"),url(/assets/ibm-plex-mono-latin-400-normal-CvHOgSBP.woff) format("woff")}@font-face{font-family:"Instrument Serif";font-style:normal;font-display:swap;font-weight:400;src:url(/assets/instrument-serif-latin-400-normal-DnYpCC2O.woff2) format("woff2"),url(/assets/instrument-serif-latin-400-normal-BVbkICAY.woff) format("woff")}@font-face{font-family:"Instrument Serif";font-style:italic;font-display:swap;font-weight:400;src:url(/assets/instrument-serif-latin-400-italic-DKMiL14s.woff2) format("woff2"),url(/assets/instrument-serif-latin-400-italic-u__WvvIK.woff) format("woff")}@layer reset,base,parts,responsive;@layer reset{*,*:before,*:after{box-sizing:border-box}body,h1,h2,p{margin:0}button,input,select{font:inherit}button{cursor:pointer;color:inherit}button,a,input{-webkit-tap-highlight-color:transparent}button{border:0;background:none}svg{display:block}[hidden]{display:none!important}button:disabled{cursor:default;opacity:.4}}@layer base{:root{color-scheme:light;--paper:#f0eee7;--ink:#253334;--muted:#78807b;--line:#293f3325;--accent:#c95838;--sans:"Space Grotesk",sans-serif;--serif:"Instrument Serif",serif;--mono:"IBM Plex Mono",monospace;--note-0:#c95838;--note-1:#c57642;--note-2:#b29b54;--note-3:#7c9772;--note-4:#5c9495;--note-5:#7c8cb3;--note-6:#a58aa9;--note-7:#bd8093}html{background:var(--paper);scroll-behavior:smooth}body{font-family:var(--sans);color:var(--ink);font-size:14px;font-weight:400;background:radial-gradient(ellipse at 70% 22%,#fbfaf6,transparent 50%),var(--paper)}body:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:20;opacity:.025;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}::selection{background:#cf59332b}a{color:inherit}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.shell{max-width:1440px;margin:auto;padding:0 64px}.icon{width:19px;height:19px;flex-shrink:0}.emblem{width:39px;height:39px}.eyebrow,.small-label{font-family:var(--mono);font-size:9px;letter-spacing:.08em;font-weight:400;line-height:1.6}.small-label{color:var(--muted)}.skip{position:fixed;top:18px;left:20px;opacity:0;pointer-events:none;z-index:50;background:var(--ink);color:var(--paper);padding:12px 20px}.skip:focus{opacity:1;pointer-events:auto}kbd{font:9px var(--mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:3px;display:inline-flex;align-items:center;justify-content:center;width:22px;height:23px;color:var(--muted);background:#f9f8f144}h2{font-weight:400;letter-spacing:-.05em;font-size:28px;line-height:1.2}}@layer parts{header{height:95px;display:flex;align-items:center;border-bottom:1px solid var(--line);gap:38px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:28px;letter-spacing:-1.5px;font-weight:500}.brand .emblem{color:var(--accent)}.edition{font:8px var(--mono);letter-spacing:.04em;color:var(--muted);padding-top:4px}.edition span{margin:0 10px;color:#b2b6ac}.header-controls{margin-left:auto;display:flex;align-items:center;gap:8px}.audio-status{display:flex;align-items:center;gap:7px;font:8px var(--mono);letter-spacing:.03em;margin-right:13px;color:var(--muted)}.audio-status i{display:block;width:5px;height:5px;border-radius:50%;background:#9a9e91}.audio-status.playing i{background:var(--accent);box-shadow:0 0 0 3px #c9583815}.icon-button{width:33px;height:33px;display:grid;place-items:center;border-radius:50%;transition:background .2s,color .2s;color:var(--muted)}.icon-button .icon{width:17px;height:17px}.icon-button:hover{background:#263d3109;color:var(--ink)}.hero{height:654px;position:relative;display:grid;grid-template-columns:360px minmax(0,1fr);column-gap:24px;padding-top:61px}.intro{position:relative;z-index:2}.intro>.eyebrow{display:flex;align-items:center;gap:10px;font-size:8px;letter-spacing:.05em;color:#66766e}.intro>.eyebrow i{display:block;width:6px;height:6px;background:var(--accent);border-radius:50%}h1{font-size:94px;font-weight:400;letter-spacing:-.08em;line-height:.95;margin-top:34px}h1 em{font-family:var(--serif);font-size:100px;letter-spacing:-.045em;font-weight:400;color:var(--accent);white-space:nowrap}.intro>p{font-size:12px;line-height:1.85;color:#7b827b;margin-top:26px}.start-button{display:flex;align-items:center;gap:15px;border-radius:3px;background:var(--ink);color:var(--paper);padding:14px 21px;margin-top:27px;font-size:12px;transition:background .2s,transform .2s}.start-button:hover{background:#3b4e4a;transform:translateY(-1px)}.start-button .icon{width:15px;height:15px;fill:currentColor;stroke-width:1}.sound-note{display:block;font:8px var(--mono);color:var(--muted);margin-top:11px;letter-spacing:-.03em}.now-playing{margin-top:43px;max-width:240px}.now-playing>.small-label{font-size:7px;letter-spacing:.1em}.now-playing>div{display:flex;align-items:baseline;justify-content:space-between;margin-top:9px}.now-playing #preset-name{font-family:var(--serif);font-size:32px;letter-spacing:-.02em}#preset-number{font:8px var(--mono);color:var(--muted)}.now-playing p{font-size:10px;color:var(--muted);margin-top:4px}.form-stage{position:relative;grid-column:2;grid-row:1;min-width:0;height:580px;margin-top:-25px}.stage-top,.stage-bottom{position:absolute;left:26px;right:0;display:flex;justify-content:space-between;align-items:center;font:7px var(--mono);letter-spacing:.07em;color:var(--muted);z-index:2}.stage-top{top:0}.stage-bottom{bottom:18px;gap:10px}.stage-bottom>span:first-child{display:flex;gap:7px;align-items:center}.stage-bottom i{width:4px;height:4px;display:block;background:var(--accent);border-radius:50%}#motion{font:7px var(--mono);letter-spacing:.04em;display:flex;align-items:center;gap:6px;padding:8px 0 8px 10px;color:var(--muted)}#motion i{width:4px;height:4px;background:var(--accent);border-radius:50%}#motion[aria-pressed=false] i{background:#9a9e91}#form{position:absolute;inset:0 -4% -1% -7%;touch-action:pan-y}#form canvas{display:block;width:100%;height:100%}.form-origin{position:absolute;left:50%;top:50%;font:11px var(--mono);color:#7e8e8230;pointer-events:none}.form-coordinate{position:absolute;right:0;top:50%;writing-mode:vertical-rl;font:8px var(--mono);letter-spacing:.2em;color:#a0a79c;pointer-events:none}.form-fallback{position:absolute;inset:12% 15%;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--accent)}.form-fallback svg{width:70%;height:70%}.form-fallback p{font-size:12px;text-align:center;line-height:1.8;color:var(--muted)}.preset-picker{position:absolute;left:0;bottom:27px;display:flex;gap:12px;z-index:3}.preset{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:3px;padding:6px 13px 6px 6px;min-width:123px;height:56px;color:#8d938a;transition:border-color .25s,background .25s}.preset>svg{width:41px;height:41px}.preset>span{display:flex;flex-direction:column;gap:4px;text-align:left}.preset small{font:7px var(--mono)}.preset strong{font-weight:400;font-size:12px}.preset>i{width:4px;height:4px;border-radius:50%;margin-left:7px;align-self:flex-start;margin-top:8px}.preset:hover{border-color:#64756b88}.preset.selected{color:var(--ink);border-color:#64756b80;background:#fffaf344}.preset.selected>svg{color:var(--accent)}.preset.selected>i{background:var(--accent)}.instrument{border-top:1px solid var(--line);position:relative;padding-top:32px;scroll-margin-top:20px}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:26px}.section-title{display:flex;align-items:center;gap:20px}.section-number{font:9px var(--mono);color:var(--accent);padding-top:4px}.keyboard-hint{display:flex;align-items:center;gap:7px;font:7px var(--mono);letter-spacing:.04em;color:var(--muted)}.keyboard-hint kbd{width:18px;height:18px;font-size:8px}.keyboard-hint kbd:first-of-type{margin-left:7px}.keyboard{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:10px}.note-key{height:143px;min-width:0;border:1px solid #4a5d462e;background:#f9f8f14d;border-radius:4px;position:relative;text-align:left;padding:15px 15px 13px;display:flex;flex-direction:column;transition:background .12s,transform .12s,border-color .12s;overflow:hidden}.key-frequency{font:8px var(--mono);color:var(--muted);position:relative;z-index:1}.key-frequency small{font-size:6px;margin-left:4px}.note-symbol{font-size:35px;letter-spacing:-.06em;line-height:1;margin-top:17px;position:relative;z-index:1}.note-symbol small{font:11px var(--mono);color:var(--muted);letter-spacing:0;margin-left:4px}.key-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:auto;position:relative;z-index:1}.key-bottom>i{height:5px;width:5px;background:var(--note-color);border-radius:50%}.key-bottom kbd{width:20px;height:20px;font-size:8px;border-color:#a9b1a73b}.key-glow{position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--note-color);opacity:.65;transition:height .25s,opacity .25s}.note-key:hover{border-color:var(--note-color);transform:translateY(-3px)}.note-key.sounding{transform:translateY(2px);border-color:var(--note-color);background:#fffdf5}.note-key.sounding .key-glow{height:100%;opacity:.16}.note-key.sounding .note-symbol{color:var(--note-color)}.waveform{position:absolute;top:-18px;left:calc(50% - 175px);width:350px;height:34px;opacity:.55;pointer-events:none;background:var(--paper)}.instrument-settings{display:flex;align-items:center;gap:25px;padding:22px 0 25px;border-bottom:1px solid var(--line)}.instrument-settings label{display:flex;align-items:center;gap:12px}.instrument-settings label>span{font:7px var(--mono);letter-spacing:.05em;white-space:nowrap;color:var(--muted)}select{border:0;color:var(--ink);background:transparent;font-size:11px;max-width:140px;padding:5px 18px 5px 3px;cursor:pointer}select:focus-visible{outline-offset:1px}.volume-setting{margin-left:auto}.motion-setting{border-left:1px solid var(--line);padding-left:23px}.instrument-settings input[type=range]{width:90px}.instrument-settings output{font:7px var(--mono);color:var(--muted);width:25px}input[type=range]{appearance:none;-webkit-appearance:none;background:transparent;cursor:pointer;height:20px;margin:0}input[type=range]::-webkit-slider-runnable-track{height:1px;background:#a4ad9f}input[type=range]::-moz-range-track{height:1px;background:#a4ad9f}input[type=range]::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;border-radius:50%;width:9px;height:9px;background:var(--ink);border:2px solid var(--paper);box-shadow:0 0 0 1px #9ba593;margin-top:-4px}input[type=range]::-moz-range-thumb{border-radius:50%;width:6px;height:6px;background:var(--ink);border:2px solid var(--paper);box-shadow:0 0 0 1px #9ba593}.composer{padding:33px 0 22px;border-bottom:1px solid var(--line)}.pattern-actions{display:flex;gap:25px;align-items:center}.text-button{display:inline-flex;align-items:center;gap:7px;font-size:10px;padding:6px 0;color:var(--muted)}.text-button:hover{color:var(--accent)}.text-button .icon{width:14px;height:14px}.sequencer-layout{display:grid;grid-template-columns:160px minmax(0,1fr);gap:30px}.transport{display:flex;flex-direction:column;align-items:flex-start;padding-top:22px}.transport-button{width:38px;height:38px;border:1px solid #576b5d66;border-radius:50%;display:grid;place-items:center;transition:background .2s}.transport-button:hover{background:#5c796315}.transport-button .icon{width:16px;height:16px;fill:currentColor}#step-count{font:24px var(--mono);letter-spacing:-.07em;margin-top:15px}#step-count>span{font-size:11px;color:#a0a89d}#transport-state{font-size:6px;letter-spacing:.03em;margin-top:9px}.tempo{display:flex;align-items:center;gap:16px;margin-top:22px}.tempo>span:first-child{font:7px var(--mono);color:var(--muted)}.tempo>span:last-child{display:flex;align-items:center;gap:4px}#tempo{font:16px var(--mono);width:49px;background:none;border:0;border-bottom:1px solid var(--line);padding:2px 0;color:var(--ink);appearance:textfield}#tempo::-webkit-inner-spin-button{appearance:none}.tempo small{font:7px var(--mono);color:var(--muted)}.loop-duration{font:6px var(--mono);letter-spacing:.02em;color:#8e978b;margin-top:12px}.score{display:grid;grid-template-columns:25px minmax(0,1fr);gap:12px}.note-labels{display:grid;grid-template-rows:repeat(8,1fr);gap:6px;padding-top:26px;text-align:right;font:8px var(--mono);color:var(--muted)}.note-labels>span{display:flex;align-items:center;justify-content:flex-end}.grid-scroll{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#9da897 transparent;padding-bottom:2px}.step-numbers{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));gap:6px;min-width:520px;margin-bottom:12px;font:7px var(--mono);color:#9ba393;text-align:center;height:14px;align-items:center}.step-numbers .current{color:var(--accent)}.note-grid{display:grid;grid-template-columns:repeat(16,minmax(0,1fr));grid-template-rows:repeat(8,24px);gap:6px;min-width:520px}.grid-cell{padding:0;display:grid;place-items:center;background:#d9ded15c;border-radius:2px;position:relative;transition:background .12s,box-shadow .12s}.grid-cell:hover{background:#c3ceba9c}.grid-cell.bar-start{background:#d9ded1b0}.grid-cell i{height:3px;width:3px;background:#7987771a;border-radius:50%}.grid-cell.on{background:color-mix(in srgb,var(--note-color) 72%,var(--paper))}.grid-cell.on i{background:#fff6e199;width:4px;height:4px}.grid-cell.current{box-shadow:inset 0 0 0 1px #6b7e6c70;background:#c9d1c599}.grid-cell.current.on{background:var(--note-color);box-shadow:0 0 0 1px var(--note-color)}.composer-caption{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:22px;padding-left:227px;color:var(--muted);font-size:9px;line-height:1.6}.composer-caption>span:last-child{font:6px var(--mono);letter-spacing:.03em;white-space:nowrap}.keep-section{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:35px 0;border-bottom:1px solid var(--line)}.keep-title{display:flex;gap:20px;align-items:baseline}.keep-title h2{font-size:25px}.keep-title p{font-size:10px;color:var(--muted);margin-top:8px}.export-actions{display:flex;gap:12px}.export-button{border:1px solid var(--line);border-radius:3px;padding:12px 15px;display:flex;align-items:center;gap:13px;min-width:185px;text-align:left;transition:border-color .2s,background .2s}.export-button:hover{border-color:#56675088;background:#fff9}.export-button>span{display:flex;flex-direction:column;gap:5px;font-size:11px}.export-button small{font:6px var(--mono);letter-spacing:.04em;color:var(--muted)}.export-button>.icon:first-child{width:17px;height:17px;color:var(--accent)}.export-button>.icon:last-child{width:12px;height:12px;color:var(--muted);margin-left:auto}.export-button.busy{opacity:.5}.closing{display:flex;flex-direction:column;align-items:center;text-align:center;padding:48px 0 31px;color:#7e877a;gap:3px;font-size:13px;letter-spacing:-.01em}.closing em{font:italic 30px var(--serif);color:#4e6258}.closing .emblem{width:25px;height:25px;color:var(--accent);margin-top:21px}footer{border-top:1px solid var(--line);padding:21px 0 28px;display:flex;align-items:center;gap:20px;font:6px var(--mono);letter-spacing:.06em;color:var(--muted)}footer .text-button{font:8px var(--sans);margin-left:auto}footer .text-button .icon{width:12px;height:12px}footer>span:last-child{margin-left:24px}dialog{color:var(--ink);background:var(--paper);border:1px solid #8d9a7e5c;max-height:80vh;max-width:calc(100% - 32px);width:540px;padding:30px;border-radius:5px;box-shadow:0 25px 100px #18251833}dialog::backdrop{background:#1a2a2866;-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}.dialog-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.dialog-header .eyebrow{font-size:8px;color:var(--muted)}dialog h2{font-size:39px;line-height:1.06;margin-bottom:23px}dialog h2 em{font-family:var(--serif);font-size:48px;color:var(--accent);letter-spacing:-.02em;font-weight:400}dialog p,dialog dd{font-size:12px;line-height:1.8;color:#758073}dialog dt{font-size:12px;font-weight:500;margin-top:20px}dialog dd{margin:5px 0 0}.about-foot{border-top:1px solid var(--line);padding-top:20px;margin-top:24px}.toast{position:fixed;bottom:26px;left:50%;transform:translate(-50%,10px);background:var(--ink);color:var(--paper);font-size:11px;padding:13px 19px;border-radius:4px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:40;max-width:calc(100% - 30px);width:max-content;box-shadow:0 5px 30px #152c2819}.toast.visible{opacity:1;transform:translate(-50%)}}@layer responsive{@media(min-width:1440px){.form-stage{height:600px}.hero{height:674px}}@media(max-width:1150px){.shell{padding:0 40px}.hero{grid-template-columns:320px minmax(0,1fr);height:624px;padding-top:51px}.form-stage{height:550px}h1{font-size:81px}h1 em{font-size:87px}.intro>.eyebrow{font-size:7px}.preset{min-width:112px;padding-right:9px}.preset-picker{gap:8px}.instrument-settings{gap:18px}.instrument-settings label{gap:8px}.instrument-settings label>span{font-size:6px}.instrument-settings input[type=range]{width:70px}.motion-setting{padding-left:16px}.note-key{padding:13px}.composer-caption{padding-left:180px}.sequencer-layout{grid-template-columns:125px minmax(0,1fr);gap:18px}.keep-title p{max-width:180px;line-height:1.6}.export-button{min-width:165px;padding:12px}.stage-bottom{font-size:6px}.edition{font-size:7px}}@media(max-width:900px){.shell{padding:0 28px}header{height:83px}.edition{display:none}.hero{grid-template-columns:270px minmax(0,1fr);column-gap:10px;height:598px}h1{font-size:74px}h1 em{font-size:77px}.intro>p{font-size:11px}.form-stage{height:470px;margin-top:15px}#form{inset:0 -5% 0 -13%}.stage-top,.stage-bottom{left:0}.stage-top{font-size:6px}.stage-bottom{bottom:-1px;flex-direction:column;align-items:flex-end;gap:8px}.preset-picker{bottom:24px}.preset{height:51px;min-width:108px}.preset>svg{width:35px;height:35px}.now-playing{margin-top:28px}.now-playing #preset-name{font-size:29px}.keyboard{gap:7px}.note-key{height:129px;padding:12px 10px}.note-symbol{font-size:30px}.key-frequency{font-size:6px}.key-frequency small{font-size:5px;margin-left:2px}.note-symbol small{font-size:9px}.key-bottom kbd{width:17px;height:18px;font-size:7px}.instrument-settings{display:grid;grid-template-columns:1fr 1fr;gap:13px 20px}.instrument-settings label{justify-content:space-between}.instrument-settings label>span{font-size:7px}.volume-setting{margin-left:0}.motion-setting{padding-left:0;border:0}.instrument-settings input[type=range]{width:90px}.instrument-settings output{width:20px}.volume-setting input{margin-left:auto}.section-title{gap:16px}h2{font-size:25px}.keyboard-hint{font-size:6px;gap:4px}.sequencer-layout{grid-template-columns:95px minmax(0,1fr);gap:15px}.tempo{gap:9px}.tempo>span:first-child{font-size:6px}.loop-duration{font-size:5px}.composer-caption{padding-left:147px;align-items:flex-start;flex-direction:column;gap:7px}.keep-section{align-items:flex-start;gap:22px;flex-direction:column}.keep-title p{max-width:none}.export-actions{margin-left:25px}.export-button{min-width:180px}.header-controls{gap:5px}.audio-status{font-size:7px;margin-right:7px}footer>span:last-child{display:none}}@media(max-width:650px){.shell{padding:0 22px}header{height:75px;gap:10px}.brand{font-size:24px;gap:7px}.brand .emblem{width:32px;height:32px}.header-controls{gap:2px}.header-controls .icon-button{width:29px;height:29px}.header-controls .icon-button .icon{width:15px;height:15px}.audio-status{font-size:6px;max-width:100px;line-height:1.6;gap:5px;margin-right:2px}.audio-status i{width:4px;height:4px;flex-shrink:0}.hero{display:flex;flex-direction:column;height:auto;padding-top:35px;gap:0}.intro>.eyebrow{font-size:7px}h1{font-size:clamp(68px,16vw,88px);margin-top:27px;line-height:.96}h1 em{font-size:clamp(72px,17vw,95px)}.intro>p{font-size:11px;line-height:1.8;margin-top:23px}.start-button{margin-top:22px;font-size:11px;padding:13px 17px;gap:11px}.sound-note{font-size:7px;margin-top:10px}.now-playing{display:none}.form-stage{height:min(103vw,500px);margin-top:39px;margin-bottom:12px;min-height:315px;width:100%}#form{inset:0 -5% -2%}.stage-top{top:0;font-size:6px;left:0;right:0}.stage-bottom{bottom:0;left:0;right:0;flex-direction:row;align-items:center;gap:8px;font-size:5px;letter-spacing:.02em}#motion{font-size:6px;padding:8px 0}.form-coordinate{font-size:6px;right:0}.preset-picker{position:static;margin-top:12px;margin-bottom:29px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.preset{min-width:0;width:100%;padding:5px 8px 5px 3px;height:54px;gap:4px}.preset>svg{width:35px;height:35px;flex-shrink:0}.preset>i{margin-left:auto;margin-top:6px;width:3px;height:3px;flex-shrink:0}.preset strong{font-size:11px}.preset small{font-size:6px}.preset>span{gap:4px}.instrument{padding-top:27px}.section-heading{margin-bottom:22px;gap:12px;align-items:flex-end}.section-title{gap:12px}.section-title h2{font-size:24px}.section-number{font-size:8px}.keyboard-hint{font-size:0;gap:4px;padding-bottom:4px}.keyboard-hint kbd{font-size:7px;width:16px;height:17px}.keyboard-hint kbd:first-of-type{margin-left:0}.keyboard{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.note-key{height:123px;padding:12px}.note-symbol{font-size:30px;margin-top:15px}.key-frequency{font-size:7px}.key-frequency small{font-size:5px}.key-bottom kbd{width:17px;height:17px}.waveform{width:170px;left:calc(50% - 85px);height:24px;top:-12px}.instrument-settings{gap:18px 17px;padding:20px 0 23px}.instrument-settings label{gap:7px;flex-wrap:wrap}.instrument-settings label>span{font-size:6px}.instrument-settings select{font-size:10px;max-width:100px;padding-right:9px}.instrument-settings input[type=range]{width:65px}.instrument-settings output{font-size:6px;width:21px}.volume-setting input{margin-left:0}.motion-setting{justify-content:space-between}.composer{padding-top:26px}.composer>.section-heading{align-items:flex-start;flex-direction:column;gap:14px}.pattern-actions{padding-left:24px;gap:23px}.pattern-actions .text-button{font-size:9px;padding:5px 0}.sequencer-layout{display:flex;flex-direction:column;gap:20px}.transport{padding:0;display:grid;grid-template-columns:35px 1fr auto;align-items:center;column-gap:15px;row-gap:5px}.transport-button{grid-column:1;grid-row:1/3;width:34px;height:34px}#step-count{grid-column:2;grid-row:1;margin:0;font-size:22px}#transport-state{grid-column:2;grid-row:2;margin-top:0;font-size:5px}.tempo{grid-column:3;grid-row:1;gap:9px;margin:0}.tempo>span:first-child{font-size:6px}#tempo{width:39px;font-size:15px}.tempo small{font-size:6px}.loop-duration{grid-column:3;grid-row:2;margin:0;font-size:5px;text-align:right}.score{grid-template-columns:20px minmax(0,1fr);gap:8px}.note-grid{min-width:550px;grid-template-rows:repeat(8,27px);gap:6px}.step-numbers{min-width:550px;font-size:7px}.note-labels{font-size:7px}.grid-scroll{padding-bottom:9px}.composer-caption{padding-left:28px;margin-top:13px;gap:8px;font-size:9px}.composer-caption>span:last-child{font-size:5px}.keep-section{padding:27px 0;gap:20px}.keep-title{gap:14px}.keep-title h2{font-size:24px}.keep-title p{font-size:9px;line-height:1.5;margin-top:6px}.export-actions{margin-left:0;width:100%;gap:8px}.export-button{min-width:0;flex:1;padding:12px 10px;gap:8px}.export-button>span{font-size:10px;gap:5px}.export-button small{font-size:5px;letter-spacing:0}.export-button>.icon:first-child{width:14px;height:14px}.export-button>.icon:last-child{width:10px;height:10px}.closing{padding:33px 0 26px;font-size:11px;gap:5px}.closing em{font-size:27px}.closing .emblem{margin-top:16px;width:22px;height:22px}footer{gap:13px;align-items:flex-start;flex-direction:column;padding:20px 0;font-size:5px}footer .text-button{margin-left:0;font-size:8px}.toast{font-size:10px;line-height:1.6}dialog{padding:24px;max-height:85vh}dialog h2{font-size:34px}dialog h2 em{font-size:39px}}@media(max-width:350px){.shell{padding:0 17px}.brand{font-size:22px}.audio-status{max-width:70px;font-size:5px}.header-controls .icon-button{width:25px}.intro>.eyebrow{font-size:6px}h1{font-size:64px}h1 em{font-size:67px}.note-key{padding:10px;height:115px}.instrument-settings{gap:17px 12px}.instrument-settings label>span{font-size:5px}.instrument-settings input[type=range]{width:55px}.instrument-settings select{font-size:9px;max-width:87px}.preset{padding-right:6px;gap:1px}.preset>svg{width:30px;height:30px}.preset strong{font-size:10px}.export-button>.icon:first-child{display:none}.export-button small{font-size:5px}.section-title h2{font-size:22px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition-duration:.001ms!important;animation-duration:.001ms!important}.note-key:hover{transform:none}}}