:root{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light dark;--page:var(--lightningcss-light,#ece6da)var(--lightningcss-dark,#1b1916);--card:var(--lightningcss-light,#f6f2ea)var(--lightningcss-dark,#262320);--ink:var(--lightningcss-light,#2a2622)var(--lightningcss-dark,#ece4d6);--muted:var(--lightningcss-light,#5e574e)var(--lightningcss-dark,#a89e90);--faint:#8a8174;--line:var(--lightningcss-light,#cfc6b6)var(--lightningcss-dark,#3d3832);--card-border:var(--lightningcss-light,#2a2622)var(--lightningcss-dark,#6b6359);--shadow:var(--lightningcss-light,#2a2622)var(--lightningcss-dark,#0b0a09);--accent:var(--lightningcss-light,#d9694a)var(--lightningcss-dark,#e8805f);--on-accent:var(--lightningcss-light,#1f1b18)var(--lightningcss-dark,#1b1916);--accent-text:var(--lightningcss-light,#b8502f)var(--lightningcss-dark,#ee8f6f);--cool:var(--lightningcss-light,#4f6f8f)var(--lightningcss-dark,#86a3c2);--on-cool:var(--lightningcss-light,#fff)var(--lightningcss-dark,#1b1916);--cool-text:var(--lightningcss-light,#4f6f8f)var(--lightningcss-dark,#93b0cf);--key-border:var(--lightningcss-light,#2a2622)var(--lightningcss-dark,#0f0e0c);--white-key:var(--lightningcss-light,#f6f2ea)var(--lightningcss-dark,#e6ddcd);--white-key-text:var(--lightningcss-light,#8a8174)var(--lightningcss-dark,#7a7166);--black-key:var(--lightningcss-light,#2a2622)var(--lightningcss-dark,#0f0e0c);--black-key-text:var(--lightningcss-light,#bdb4a6)var(--lightningcss-dark,#8a8174);--string:var(--lightningcss-light,#8a8174)var(--lightningcss-dark,#6b6359);--lcd:var(--lightningcss-light,#2a2622)var(--lightningcss-dark,#0f0e0c);--lcd-border:var(--lightningcss-light,#2a2622)var(--lightningcss-dark,#3d3832);--lcd-label:var(--lightningcss-light,#a39a8c)var(--lightningcss-dark,#7f776b);--lcd-text:#ee8a68;--font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;--font-head:var(--font-body);--font-mono:"DM Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;--border:1.5px;--radius-sm:8px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;--shadow-raised:4px 4px 0 var(--shadow);--shadow-control:2px 2px 0 var(--shadow);--content-max:1360px;--gutter:20px;--page-pad-top:24px;--page-pad-bottom:40px;--stack-gap:20px;--panel-gap:16px;--panel-pad:16px;--control-h:46px;--slider-h:32px;--segment-h:40px;--segment-sm-h:32px;--theme-transition:background-color .25s, color .25s, border-color .25s}@media (prefers-color-scheme:dark){:root{--lightningcss-light: ;--lightningcss-dark:initial}}:root[data-theme=light]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}:root[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}@media (width>=720px){:root{--gutter:40px;--page-pad-top:44px;--page-pad-bottom:52px;--stack-gap:24px;--panel-gap:20px;--panel-pad:18px 20px}}@media (width>=720px) and (pointer:fine){:root{--slider-h:22px;--segment-h:32px;--segment-sm-h:24px}}@font-face{font-family:Inter;font-style:normal;font-weight:400 800;font-display:swap;src:url(/assets/inter-latin-wght-normal-C2S99t-D.woff2)format("woff2")}@font-face{font-family:DM Mono;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/dm-mono-latin-400-normal-Du9W-GAy.woff2)format("woff2")}@font-face{font-family:DM Mono;font-style:normal;font-weight:500;font-display:swap;src:url(/assets/dm-mono-latin-500-normal-CLN5ozUA.woff2)format("woff2")}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%}body{background:var(--page);min-height:100dvh;color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;transition:var(--theme-transition);flex-direction:column;font-size:16px;line-height:1.5;display:flex}h1,h2,h3{font-family:var(--font-head);text-wrap:balance;font-weight:700;line-height:1.05}p{text-wrap:pretty}a{color:inherit;text-decoration:none}ul,ol{list-style:none}button,input,select{font:inherit;color:inherit}button{cursor:pointer;background:0 0;border:none}button:disabled{cursor:default}svg{display:block}[hidden]{display:none!important}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;position:absolute;overflow:hidden}@media (width<=719.98px){.only-wide{display:none!important}}@media (width>=720px){.only-compact{display:none!important}}@media (prefers-reduced-motion:reduce){*,:before,:after{transition-duration:0s!important;animation-duration:0s!important}}.container{width:100%;max-width:var(--content-max);padding-inline:var(--gutter);margin-inline:auto}.site-header{border-bottom:2px solid var(--ink);transition:var(--theme-transition)}.site-header__inner{grid-template-columns:auto 1fr auto;grid-template-areas:"brand nav actions";align-items:center;gap:10px;padding-block:22px;display:grid}.brand{font-family:var(--font-head);letter-spacing:-.04em;grid-area:brand;font-size:28px;font-weight:800;line-height:1}.brand__m{color:var(--accent)}.site-header__actions{grid-area:actions;align-items:center;gap:8px;display:flex}.site-nav{grid-area:nav;justify-self:end}.site-nav__list{gap:8px;display:flex}.site-nav__link{border:var(--border) solid var(--ink);border-radius:var(--radius-pill);white-space:nowrap;transition:var(--theme-transition);align-items:center;padding:8px 16px;font-size:14px;font-weight:500;display:flex}.site-nav__link:hover{background:color-mix(in srgb, var(--ink) 8%, transparent)}.site-nav__link[aria-current=page]{background:var(--ink);color:var(--card)}.site-nav__dot,.site-nav__num{display:none}.theme-toggle,.menu-toggle{border:var(--border) solid var(--ink);border-radius:var(--radius-pill);transition:var(--theme-transition);align-items:center;display:flex}.theme-toggle{height:38px;font-family:var(--font-mono);gap:8px;padding:0 14px;font-size:13px;font-weight:500}.theme-toggle__icon{font-size:16px;line-height:1}.menu-toggle{gap:10px;height:44px;padding:0 16px;font-size:14px;font-weight:600;display:none}.menu-toggle__icon{flex-direction:column;gap:4px;display:flex}.menu-toggle__icon span{background:currentColor;border-radius:2px;width:16px;height:2px;transition:transform .15s}.menu-toggle[aria-expanded=true]{background:var(--ink);color:var(--card)}.menu-toggle[aria-expanded=true] .menu-toggle__icon span:first-child{transform:translateY(3px)rotate(45deg)}.menu-toggle[aria-expanded=true] .menu-toggle__icon span:last-child{transform:translateY(-3px)rotate(-45deg)}@media (width<=959.98px){.site-header__inner{grid-template-columns:1fr auto;grid-template-areas:"brand actions""nav nav";gap:0 12px;padding-block:14px}.brand{font-size:24px}.menu-toggle{display:flex}.theme-toggle{justify-content:center;width:44px;height:44px;padding:0}.theme-toggle__icon{font-size:18px}.theme-toggle__label{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}.site-nav{justify-self:stretch;padding:14px 0 4px;display:none}.site-header[data-menu-open] .site-nav{display:block}.site-nav__list{flex-direction:column;gap:0}.site-nav__link{border:none;border-top:var(--border) solid var(--line);min-height:56px;font-family:var(--font-head);letter-spacing:-.02em;border-radius:0;justify-content:space-between;gap:12px;padding:0 4px;font-size:22px}.site-nav__link:hover,.site-nav__link[aria-current=page]{color:var(--ink);background:0 0}.site-nav__link[aria-current=page]{font-weight:700}.site-nav__dot{border-radius:50%;width:10px;height:10px;display:block}.site-nav__link[aria-current=page] .site-nav__dot{background:var(--accent)}.site-nav__label{flex:1}.site-nav__num{font-family:var(--font-mono);letter-spacing:0;color:var(--faint);font-size:12px;font-weight:500;display:block}}.site-main{flex:1}.page__inner{gap:var(--stack-gap);padding-top:var(--page-pad-top);padding-bottom:var(--page-pad-bottom);flex-direction:column;display:flex}.page-head{flex-direction:column;gap:20px;display:flex}.page-head__text{flex-direction:column;gap:10px;display:flex}.page-title{letter-spacing:-.035em;font-size:clamp(36px,28px + 2.03vw,54px);line-height:1.02}.page-lead{max-width:540px;color:var(--muted);font-size:clamp(15px,14.1px + .225vw,17px)}@media (width>=720px){.page-head{flex-direction:row;justify-content:space-between;align-items:flex-end}.page-head .lcd{min-width:300px}}.site-footer{border-top:var(--border) solid var(--line);font-family:var(--font-mono);color:var(--faint);font-size:12px;font-weight:500}.site-footer__inner{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;padding-block:18px 28px;display:flex}.site-footer a{color:var(--muted)}.site-footer a:hover{color:var(--ink)}@media (width>=720px){.site-footer__inner{padding-block:20px}}.panel{min-width:0;padding:var(--panel-pad);background:var(--card);border:var(--border) solid var(--card-border);border-radius:var(--radius-lg);transition:var(--theme-transition);flex-direction:column;gap:14px;display:flex}.panel--raised{box-shadow:var(--shadow-raised)}.panel__head{justify-content:space-between;align-items:baseline;gap:12px;display:flex}.panel__head--ruled{border-bottom:var(--border) solid var(--card-border);align-items:center;padding-bottom:10px}.panel__title{letter-spacing:-.02em;font-size:20px}.panel__head--ruled .panel__title{font-size:18px}.meta{font-family:var(--font-mono);color:var(--faint);font-size:12px;font-weight:500}.placeholder{color:var(--faint);font-size:14px}.stack{flex-direction:column;gap:14px;display:flex}.lcd{background:var(--lcd);border:var(--border) solid var(--lcd-border);font-family:var(--font-mono);border-radius:12px;flex-direction:column;gap:2px;padding:12px 20px;font-weight:500;display:flex}.lcd__label{letter-spacing:.12em;text-transform:uppercase;color:var(--lcd-label);align-items:center;gap:8px;font-size:11px;display:flex}.lcd__led{background:var(--lcd-label);border-radius:50%;width:7px;height:7px}.lcd__led[data-on]{background:var(--lcd-text)}.lcd__value{color:var(--lcd-text);font-size:clamp(20px,18.2px + .45vw,24px)}.lcd-well{background:var(--lcd);border:var(--border) solid var(--lcd-border);border-radius:var(--radius-md)}.btn{height:var(--control-h);border-radius:var(--radius-md);white-space:nowrap;transition:var(--theme-transition);justify-content:center;align-items:center;gap:10px;padding:0 18px;font-size:15px;font-weight:600;display:inline-flex}.btn--ink{background:var(--ink);color:var(--card)}.btn--outline{border:var(--border) solid var(--ink)}.btn--outline:hover{background:color-mix(in srgb, var(--ink) 8%, transparent)}.btn--play{border:var(--border) solid var(--ink);border-radius:var(--radius-pill);background:var(--accent);height:54px;color:var(--on-accent);box-shadow:3px 3px 0 var(--shadow);font-size:16px;font-weight:700}.btn--play[aria-pressed=true]{background:var(--ink);color:var(--card)}.btn--play:active{box-shadow:2px 2px 0 var(--shadow);transform:translate(1px,1px)}@media (width>=720px){.btn--play{width:120px;height:var(--control-h)}}.field{flex-direction:column;gap:6px;min-width:0;display:flex}.field--inline{flex-direction:row;justify-content:space-between;align-items:center;gap:10px}.field__label{font-family:var(--font-mono);color:var(--muted);font-size:12px;font-weight:500}.select{display:block;position:relative}.select:after{content:"↓";pointer-events:none;position:absolute;top:50%;right:14px;transform:translateY(-50%)}.select select{appearance:none;width:100%;height:var(--control-h);background:var(--card);border:var(--border) solid var(--card-border);border-radius:var(--radius-md);cursor:pointer;transition:var(--theme-transition);padding:0 34px 0 14px;font-size:16px;font-weight:600}.panel .select select{background:var(--page)}.select--sm:after{font-size:13px;right:12px}.select--sm select{border-radius:var(--radius-sm);height:38px;font-family:var(--font-mono);padding:0 30px 0 12px;font-size:14px;font-weight:500}.select--pill:after{font-family:var(--font-mono);font-size:13px;right:10px}.select--pill select,.panel .select--pill select{border-radius:var(--radius-pill);height:auto;font-family:var(--font-mono);background:0 0;padding:3px 26px 3px 10px;font-size:13px;font-weight:500}.slider{--slider-fill:var(--accent);flex-direction:column;gap:6px;min-width:0;display:flex}.slider--ink{--slider-fill:var(--ink)}.slider--cool{--slider-fill:var(--cool)}.slider__head{font-family:var(--font-mono);justify-content:space-between;gap:8px;font-size:12px;font-weight:500;display:flex}.slider__label{color:var(--muted)}.slider__value{font-variant-numeric:tabular-nums}.slider__input{--pct:50%;appearance:none;width:100%;height:var(--slider-h);cursor:pointer;background:0 0}.slider__input::-webkit-slider-runnable-track{border:var(--border) solid var(--card-border);border-radius:var(--radius-pill);background:linear-gradient(to right, var(--slider-fill) var(--pct), var(--page) var(--pct));height:8px}.slider__input::-moz-range-track{border:var(--border) solid var(--card-border);border-radius:var(--radius-pill);background:linear-gradient(to right, var(--slider-fill) var(--pct), var(--page) var(--pct));height:8px}.slider__input::-webkit-slider-thumb{appearance:none;border:var(--border) solid var(--ink);background:var(--card);width:18px;height:18px;box-shadow:var(--shadow-control);border-radius:50%;margin-top:-6.5px}.slider__input::-moz-range-thumb{border:var(--border) solid var(--ink);background:var(--card);width:18px;height:18px;box-shadow:var(--shadow-control);border-radius:50%}.switch{border:var(--border) solid var(--ink);border-radius:var(--radius-pill);background:var(--page);width:46px;height:26px;transition:var(--theme-transition);flex:none;position:relative}.switch__knob{background:var(--faint);border-radius:50%;width:17px;height:17px;transition:left .15s,background-color .15s;position:absolute;top:3px;left:3px}.switch[aria-checked=true]{background:var(--ink)}.switch[aria-checked=true] .switch__knob{background:var(--accent);left:23px}.switch--sm{width:40px;height:22px}.switch--sm .switch__knob{width:14px;height:14px;top:2.5px;left:2.5px}.switch--sm[aria-checked=true] .switch__knob{left:20.5px}.segmented{border:var(--border) solid var(--card-border);border-radius:var(--radius-sm);grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;display:grid;overflow:hidden}.segmented__option{height:var(--segment-h);border-right:1px solid var(--line);font-family:var(--font-mono);transition:var(--theme-transition);padding:0 7px;font-size:12px;font-weight:500}.segmented__option:last-child{border-right:none}.segmented__option[aria-pressed=true]{background:var(--ink);color:var(--card)}.segmented--sm{border-radius:7px;display:flex}.segmented--sm .segmented__option{height:var(--segment-sm-h);font-size:10px}.chip-list{flex-wrap:wrap;gap:6px;display:flex}.chip{border:var(--border) solid var(--card-border);border-radius:var(--radius-pill);background:var(--card);min-height:32px;transition:var(--theme-transition);padding:6px 12px;font-size:14px;font-weight:500}.chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:var(--card)}@media (width<=719.98px){.chip{min-height:40px}}.legend{font-family:var(--font-mono);flex-wrap:wrap;gap:18px;font-size:13px;font-weight:500;display:flex}.legend__item{align-items:center;gap:7px;display:flex}.swatch{border:var(--border) solid var(--key-border);border-radius:50%;width:11px;height:11px}.swatch--accent{background:var(--accent)}.swatch--cool{background:var(--cool)}.notice{border:var(--border) dashed var(--card-border);border-radius:var(--radius-md);color:var(--muted);padding:12px 16px;font-size:14px}.keyboard{--keyboard-h:196px;height:var(--keyboard-h);border:var(--border) solid var(--key-border);border-radius:var(--radius-md);-webkit-user-select:none;user-select:none;display:flex;position:relative;overflow:hidden}.keyboard--playable{touch-action:none}.keyboard__key{font-family:var(--font-mono);-webkit-tap-highlight-color:transparent;flex-direction:column;justify-content:flex-end;align-items:center;font-weight:500;transition:background-color 60ms,color 60ms;display:flex}.keyboard__key--white{background:var(--white-key);color:var(--white-key-text);border-right:var(--border) solid var(--key-border);flex:1;gap:8px;padding-bottom:10px;font-size:11px}.keyboard__key--white[data-last]{border-right:none}.keyboard__key--black{z-index:2;top:-2px;left:calc(100% * var(--pos) / var(--whites));width:calc(100% / var(--whites) * .62);background:var(--black-key);height:60%;color:var(--black-key-text);border:var(--border) solid var(--key-border);border-radius:0 0 7px 7px;gap:6px;padding-bottom:6px;font-size:9px;position:absolute;transform:translate(-50%)}.keyboard__key[data-state=selected],.keyboard__key[data-state=active]{background:var(--accent);color:var(--on-accent)}.keyboard__key[data-state=preview]{background:var(--cool);color:var(--on-cool)}.keyboard__cap{border:var(--border) solid currentColor;border-radius:7px;justify-content:center;align-items:center;width:30px;height:30px;font-size:13px;display:flex}.keyboard__key--black .keyboard__cap{border-radius:6px;width:24px;height:24px;font-size:11px}@media (width<=719.98px){.keyboard__cap{display:none}}.fretboard{grid-template-rows:repeat(6,31px) auto;grid-template-columns:22px repeat(13,minmax(0,1fr));display:grid}.fretboard__string-label{grid-row:var(--h-row);font-family:var(--font-mono);grid-column:1;align-items:center;font-size:12px;font-weight:500;display:flex}.fretboard__fret-num{grid-row:7;grid-column:var(--h-col);text-align:center;font-family:var(--font-mono);color:var(--faint);margin-top:6px;font-size:11px;font-weight:500}.fretboard__fret-num[data-marker]{color:var(--accent-text)}.fretboard__cell{grid-row:var(--h-row);grid-column:var(--h-col);border-left:var(--border) solid var(--line);-webkit-tap-highlight-color:transparent;justify-content:center;align-items:center;display:flex;position:relative}.fretboard__cell[data-fret="0"]{border-left:none}.fretboard__cell[data-fret="1"]{border-left:4px solid var(--ink)}.fretboard__cell:before{content:"";height:var(--gauge);background:var(--string);position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}.fretboard__dot{border:var(--border) solid transparent;width:24px;height:24px;font-family:var(--font-mono);color:#0000;border-radius:50%;justify-content:center;align-items:center;font-size:9px;font-weight:500;transition:background-color .1s,color .1s;display:flex;position:relative}@media (hover:hover){.fretboard__cell:hover .fretboard__dot{background:var(--card);border-color:var(--line);color:var(--muted)}}.fretboard__cell[data-state] .fretboard__dot{border-color:var(--key-border)}.fretboard__cell[data-state=selected] .fretboard__dot{background:var(--accent);color:var(--on-accent)}.fretboard__cell[data-state=preview] .fretboard__dot{background:var(--cool);color:var(--on-cool)}@media (width<=719.98px){.fretboard{grid-template-rows:auto repeat(13,44px);grid-template-columns:30px repeat(6,minmax(0,1fr))}.fretboard__string-label{grid-row:1;grid-column:var(--v-col);justify-content:center;padding-bottom:6px}.fretboard__fret-num{grid-row:var(--v-row);border-bottom:var(--border) solid var(--line);grid-column:1;align-items:center;margin-top:0;display:flex}.fretboard__fret-num[data-fret="0"]{border-bottom:4px solid var(--ink)}.fretboard__cell,.fretboard__cell[data-fret="1"]{grid-row:var(--v-row);grid-column:var(--v-col);border-left:none;border-bottom:var(--border) solid var(--line)}.fretboard__cell[data-fret="0"]{border-bottom:4px solid var(--ink)}.fretboard__cell:before{width:var(--gauge);height:auto;inset:0 auto 0 50%;transform:translate(-50%)}.fretboard__dot{width:30px;height:30px;font-size:10px}}.home{--page-pad-top:28px;--page-pad-bottom:40px;--stack-gap:26px}@media (width>=720px){.home{--page-pad-top:64px;--page-pad-bottom:72px;--stack-gap:44px}}.home__intro{flex-direction:column;gap:14px;max-width:760px;display:flex}.home__title{letter-spacing:-.04em;font-size:clamp(40px,26px + 3.6vw,72px);line-height:1}.home__lead{max-width:none;font-size:clamp(16px,14.7px + .34vw,19px)}.tool-grid{grid-template-columns:minmax(0,1fr);gap:18px;display:grid}@media (width>=720px){.tool-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px}}.tool-card{transition:var(--theme-transition), transform .12s, box-shadow .12s;gap:18px;padding:18px}@media (width>=720px){.tool-card{padding:22px}}.tool-card:hover{box-shadow:6px 6px 0 var(--shadow);transform:translate(-2px,-2px)}.tool-card__meta{justify-content:space-between;display:flex}.tool-card__preview{justify-content:center;align-items:center;height:96px;padding:14px;display:flex}@media (width>=720px){.tool-card__preview{height:120px}}.tool-card__text{flex-direction:column;gap:8px;display:flex}.tool-card__title{letter-spacing:-.03em;font-size:24px}.tool-card__desc{color:var(--muted);font-size:15px}.mini-keys{gap:4px;width:100%;height:100%;display:flex}.mini-keys span{background:var(--white-key);border-radius:0 0 5px 5px;flex:1}.mini-keys [data-state=selected]{background:var(--accent)}.mini-keys [data-state=preview]{background:var(--cool)}.mini-drone{width:100%;font-family:var(--font-mono);flex-direction:column;gap:6px;font-weight:500;display:flex}.mini-drone__label{letter-spacing:.12em;color:var(--lcd-label);font-size:10px}.mini-drone__notes{color:var(--lcd-text);font-size:22px}.mini-caps{gap:6px;display:flex}.mini-caps span{border:var(--border) solid var(--lcd-label);width:36px;height:36px;font-family:var(--font-mono);color:var(--lcd-text);border-radius:7px;justify-content:center;align-items:center;font-size:13px;font-weight:500;display:flex}.mini-caps [data-state=active]{background:var(--accent);color:var(--on-accent)}.in-key{--panel-gap:18px}@media (width>=720px){.in-key{--stack-gap:28px;--panel-gap:24px}}.in-key__controls{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:12px;display:grid}.in-key__controls .btn,.in-key__controls .legend{grid-column:1/-1}@media (width>=720px){.in-key__controls{flex-wrap:wrap;display:flex}.in-key__root{width:150px}.in-key__scale{width:220px}.in-key__controls .legend{margin-left:auto;padding-bottom:12px}}.in-key__instruments{gap:var(--panel-gap);grid-template-columns:minmax(0,1fr);display:grid}@media (width>=1100px){.in-key__instruments{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}.in-key__instruments .keyboard{--keyboard-h:170px}@media (width>=720px){.in-key__instruments .keyboard{--keyboard-h:196px}}.in-key__guitar{gap:10px}.in-key__info{gap:var(--panel-gap);grid-template-columns:minmax(0,1fr);display:grid}@media (width>=720px){.in-key__info{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}.in-key__info .panel{padding:18px 20px}.degrees{flex-wrap:wrap;gap:6px;display:flex}.degree{flex-direction:column;align-items:center;gap:4px;display:flex}.degree__note{border:var(--border) solid var(--card-border);border-radius:50%;justify-content:center;align-items:center;width:38px;height:38px;font-size:14px;font-weight:600;display:flex}.degree--root .degree__note{background:var(--accent);border-color:var(--key-border);color:var(--on-accent)}.degree__label{font-family:var(--font-mono);color:var(--faint);font-size:10px;font-weight:500}.note-line{font-family:var(--font-mono);color:var(--muted);flex-wrap:wrap;gap:8px;font-size:13px;font-weight:500;display:flex}[data-state=selected].tone-text{color:var(--accent-text)}[data-state=preview].tone-text{color:var(--cool-text)}.transpose{flex-direction:column;gap:8px;display:flex}.transpose__row{font-family:var(--font-mono);grid-template-columns:1fr 56px 56px;padding:3px 0;font-size:14px;font-weight:500;display:grid}.transpose__down,.transpose__up{text-align:right;font-variant-numeric:tabular-nums}.transpose__down{color:var(--faint)}.drone__transport{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end;gap:14px;display:grid}.drone__transport .btn--play,.drone__transport .btn--outline{grid-column:1/-1}@media (width>=720px){.drone__transport{grid-template-columns:auto 140px 220px auto;justify-content:start}.drone__transport .btn--play,.drone__transport .btn--outline{grid-column:auto}}.drone__fx{gap:var(--panel-gap);grid-template-columns:minmax(0,1fr);display:grid}@media (width>=720px){.drone__fx{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}.fx__params{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;transition:opacity .15s;display:grid}[data-off]>.fx__params{opacity:.45}.drone__oscs{align-items:start;gap:var(--panel-gap);grid-template-columns:minmax(0,1fr);display:grid}@media (width>=720px){.drone__oscs{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width>=1100px){.drone__oscs{grid-template-columns:repeat(4,minmax(0,1fr))}}.osc{gap:0;padding:0;overflow:hidden}.osc[data-off]{box-shadow:none}.osc__head{align-items:center;gap:12px;padding:14px 16px;display:flex}.osc[data-open] .osc__head{border-bottom:var(--border) solid var(--card-border)}.osc__toggle{text-align:left;flex:1;align-items:center;gap:12px;min-width:0;display:flex}.osc__id{flex-direction:column;gap:2px;display:flex}.osc__eyebrow{font-family:var(--font-mono);letter-spacing:.1em;color:var(--faint);font-size:11px;font-weight:500}.osc__note{font-family:var(--font-head);letter-spacing:-.03em;font-size:30px;font-weight:700;line-height:1}.osc[data-off] .osc__note{color:var(--faint)}.osc__summary{font-family:var(--font-mono);color:var(--muted);white-space:nowrap;margin-left:auto;font-size:12px;font-weight:500}.osc__chev{border:var(--border) solid var(--card-border);width:28px;height:28px;font-family:var(--font-mono);border-radius:50%;flex:none;justify-content:center;align-items:center;font-size:15px;font-weight:500;display:flex}.osc__chev:before{content:"+"}.osc[data-open] .osc__chev:before{content:"−"}.osc__body{flex-direction:column;gap:16px;padding:16px;transition:opacity .15s;display:none}.osc[data-open] .osc__body{display:flex}.osc[data-off] .osc__body{opacity:.55}@media (width>=720px){.osc__body{display:flex}.osc .osc__head{border-bottom:var(--border) solid var(--card-border)}.osc__chev{display:none}}.osc .field--inline .select{width:110px}.osc__voice{flex-direction:column;gap:10px;display:flex}.param-group{border-top:var(--border) dashed var(--card-border);flex-direction:column;gap:12px;padding-top:14px;display:flex}.param-group__head{justify-content:space-between;align-items:center;gap:10px;display:flex}.param-group__title{letter-spacing:-.01em;font-size:15px}.param-group__params{flex-direction:column;gap:12px;transition:opacity .15s;display:flex}.param-group[data-off] .param-group__params{opacity:.4}.key-synth .keyboard{--keyboard-h:200px}@media (width>=720px){.key-synth .keyboard{--keyboard-h:230px}}.key-synth .keyboard__key--white{padding-bottom:12px}.key-synth .keyboard__key--black{height:58%;padding-bottom:8px}.key-synth__controls{align-items:stretch;gap:var(--panel-gap);grid-template-columns:minmax(0,1fr);display:grid}@media (width>=960px){.key-synth__controls{grid-template-columns:minmax(0,1fr) minmax(0,1.6fr)}}.key-synth__col{gap:var(--panel-gap);flex-direction:column;display:flex}.key-synth__col .panel:last-child{flex:1}.key-synth .segmented__option{height:44px}@media (width>=720px) and (pointer:fine){.key-synth .segmented__option{height:36px}}.envelope{flex-direction:column;gap:6px;height:130px;padding:14px 14px 10px;display:flex}@media (width>=720px){.envelope{height:150px}}.envelope__graph{flex:1;width:100%;min-height:0;overflow:visible}.envelope__fill{fill:var(--lcd-text);fill-opacity:.14}.envelope__line{fill:none;stroke:var(--lcd-text);stroke-width:2px;stroke-linejoin:round;vector-effect:non-scaling-stroke}.envelope__labels{font-family:var(--font-mono);color:var(--lcd-label);font-size:10px;font-weight:500;display:grid}.envelope-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 22px;display:grid}@media (width>=960px){.envelope-controls{grid-template-columns:repeat(4,minmax(0,1fr))}}