@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@400;500;600&display=swap";:root{font-family:DM Sans,sans-serif;color:#eee8dd;background:#131311;font-synthesis:none;font-optical-sizing:auto}*{box-sizing:border-box}html,body,#root{margin:0;width:100%;height:100%;min-width:320px;overflow:hidden}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:2px solid #70b8ff;outline-offset:3px}.lab-shell{height:100svh;min-height:590px;max-height:100svh;overflow:hidden;display:grid;grid-template-rows:100px minmax(0,1fr) 188px 22px;background:#131311;position:relative}.lab-header{position:relative;z-index:5;display:grid;grid-template-columns:minmax(370px,1fr) auto minmax(340px,1fr);align-items:center;padding:13px 2.4%;gap:24px;background:linear-gradient(180deg,#171715 0% 80%,#17171500)}.lab-title h1{font:500 clamp(30px,3.1vw,46px)/1.04 "Playfair Display",Georgia,serif;letter-spacing:-.045em;margin:0;color:#f4eee3;white-space:nowrap}.lab-title h1 em{font-weight:400;color:#d7b58a}.lab-title p{font:400 15px/1.3 Playfair Display,Georgia,serif;color:#d2c8b8;margin:7px 0 0}.view-tabs{display:flex;gap:2px;border:1px solid #5f5a51;background:#201f1d;border-radius:40px;padding:3px}.view-tabs button{padding:9px 20px;min-width:82px;border:0;border-radius:30px;background:transparent;color:#d7d1c6;font-family:Playfair Display,Georgia,serif;font-size:14px}.view-tabs button:hover{background:#302e2b}.view-tabs button.active{background:#eee9df;color:#282722;font-weight:600}.header-right{display:flex;justify-content:flex-end;align-items:center;gap:20px}.header-right p{font-size:12px;line-height:1.55;color:#d0cbc2;margin:0;max-width:300px}.about-button{white-space:nowrap;display:flex;gap:8px;align-items:center;color:#e2ddd4;background:transparent;border:0;font-size:11px;padding:9px}.about-button span{font-size:18px}.sound-button{width:31px;height:31px;border:1px solid #716c61;border-radius:50%;color:#f0e9de;background:#292825}.sound-button:hover{background:#eee9df;color:#222}.about-popover{position:absolute;right:5%;top:76px;width:290px;background:#272622;border:1px solid #6c6253;padding:19px 20px;box-shadow:0 15px 44px #0009;z-index:10}.about-popover>button{position:absolute;top:7px;right:9px;border:0;background:none;color:#eee;font-size:20px}.about-popover strong{font:500 17px Playfair Display,Georgia,serif}.about-popover p{font-size:12px;line-height:1.55;color:#c8c1b5;margin:9px 0 0}.instrument-stage{position:relative;overflow:hidden;margin:0 18px;background:radial-gradient(ellipse at 53% 55%,#645444,#42382e 39%,#292621 73%,#1c1b19);border:1px solid #3b3933;isolation:isolate}.instrument-stage:after{content:"";position:absolute;inset:auto 0 0;height:22%;pointer-events:none;background:linear-gradient(0deg,#11110f77,transparent);z-index:1}.instrument-stage canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important;z-index:0}.stage-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 52% 46%,transparent 42%,#100f0e99 100%);pointer-events:none;z-index:1}.stage-label,.stage-help{position:absolute;z-index:3;color:#bfb5a7;font-weight:700;letter-spacing:.16em;font-size:9px}.stage-label{top:20px;left:25px}.status-light{display:inline-block;width:7px;height:7px;background:#57a9fa;box-shadow:0 0 10px #58aaff;border-radius:50%;margin-right:7px}.stage-help{right:25px;bottom:17px;color:#938a7d}.stage-help i{display:inline-block;width:3px;height:3px;background:#817a70;border-radius:50%;margin:0 10px 2px}.part-callouts{position:absolute;z-index:3;left:2%;top:18%;width:210px;display:flex;flex-direction:column;gap:24px}.callout{display:flex;gap:11px;align-items:flex-start;background:#171716d9;border:1px solid #635a4d;border-radius:7px;padding:10px 12px;box-shadow:0 7px 22px #0005;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}.callout>span{font-size:9px;color:#75b8f4;font-weight:700;letter-spacing:.1em;padding-top:2px}.callout strong{display:block;font:500 15px Playfair Display,Georgia,serif;color:#f0e8db}.callout small{display:block;font-size:10px;line-height:1.4;color:#c1baae;margin-top:3px}.instrument-dock{display:grid;grid-template-columns:minmax(230px,.85fr) minmax(350px,1.5fr) minmax(320px,1.12fr) minmax(235px,.9fr);background:#181817;border-top:1px solid #393833;padding:15px 2.3% 10px;min-height:0}.dock-section{padding:0 21px;border-right:1px solid #373631;min-width:0}.dock-section:first-child{padding-left:0}.dock-section:last-child{border-right:0;padding-right:0}.dock-section-title{height:23px;display:flex;align-items:center;gap:13px;color:#e8e1d5}.dock-section-title>strong{font:500 15px Playfair Display,Georgia,serif}.dock-section-title>span{margin-left:auto;font-size:9px;color:#777269;letter-spacing:.12em}.bellows-content{display:flex;gap:15px;align-items:center;height:127px}.bellows-drawing{width:74px;height:84px;flex:none;border:2px solid #77756f;border-right-width:4px;transform:perspective(130px) rotateY(-10deg);position:relative;background:linear-gradient(90deg,#333431,#1c1d1c)}.bellows-drawing:before,.bellows-drawing:after{content:"";position:absolute;left:-7px;right:-7px;height:5px;background:#686761;border:1px solid #9d9b93}.bellows-drawing:before{top:-4px}.bellows-drawing:after{bottom:-4px}.bellows-drawing span{position:absolute;top:0;bottom:0;width:2px;background:#7f7d75;transform:skewY(-18deg)}.bellows-drawing span:nth-child(1){left:10%}.bellows-drawing span:nth-child(2){left:23%}.bellows-drawing span:nth-child(3){left:36%}.bellows-drawing span:nth-child(4){left:49%}.bellows-drawing span:nth-child(5){left:62%}.bellows-drawing span:nth-child(6){left:75%}.bellows-drawing span:nth-child(7){left:88%}.bellows-actions{flex:1;min-width:0}.pump-control{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:34px;padding:5px 8px;border:1px solid #66645c;border-radius:4px;background:#292a28;color:#eee8db;font-size:11px;font-weight:600}.pump-control:hover{background:#3a3c39}.pump-control span:first-child,.pump-control span:last-child{font-size:14px;color:#91b8d8}.bellows-actions>small{display:block;text-align:center;font-size:9px;color:#8e897f;margin-top:4px}.air-meter{margin-top:12px}.air-meter>div:first-child{display:flex;justify-content:space-between;font-size:9px;color:#bab4aa;letter-spacing:.09em}.air-meter b{color:#91caff}.air-track{height:7px;margin-top:6px;border:1px solid #44433e;background:#242421;border-radius:5px;overflow:hidden}.air-track i{display:block;height:100%;background:linear-gradient(90deg,#2585d6,#62bcff);transition:width .12s linear}.notation-switch{display:flex;border:1px solid #57544d;border-radius:20px;overflow:hidden;margin-left:auto}.notation-switch button{border:0;background:transparent;color:#aaa49a;font-size:9px;padding:5px 9px;white-space:nowrap}.notation-switch button.selected{background:#e8e2d8;color:#252420;border-radius:20px}.keyboard-panel .dock-section-title>span{margin-left:auto;white-space:nowrap}.keyboard-scroll{overflow:hidden;margin-top:12px}.lab-keyboard{height:71px;min-width:0;position:relative;border:1px solid #746553;border-radius:3px 3px 0 0;background:#392d22;overflow:hidden;touch-action:pan-x}.lab-key{position:absolute;top:0;height:100%;padding:0;border-radius:0 0 3px 3px;display:flex;align-items:flex-end;justify-content:center}.lab-key.white{background:linear-gradient(180deg,#f5efe5,#e5dccd);border:1px solid #a99d8b;border-bottom:4px solid #aaa092;color:#7a7061;z-index:1}.lab-key.white span{font:500 10px Playfair Display,Georgia,serif;padding-bottom:5px}.lab-key.white.pressed{background:#b5d9fa;border-bottom-width:1px;transform:translateY(3px)}.lab-key.black{height:62%;background:linear-gradient(180deg,#242423,#111211);border:1px solid #080908;border-bottom:3px solid #090a09;color:#ddd;z-index:2}.lab-key.black.pressed{background:#247bc0}.key-hint{text-align:center;color:#79766f;font-size:8px;letter-spacing:.12em;margin-top:7px;white-space:nowrap}.feature-grid{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;column-gap:13px;row-gap:3px;margin-top:12px}.feature-toggle{display:flex;align-items:center;gap:9px;height:25px;border:0;padding:0;background:transparent;color:#d3cec4;text-align:left;font-size:11px;white-space:nowrap}.feature-toggle:hover{color:#fff}.switch{width:27px;height:15px;border-radius:10px;background:#4a4944;display:inline-block;position:relative;flex:none;transition:background .15s}.switch:after{content:"";position:absolute;width:11px;height:11px;left:2px;top:2px;border-radius:50%;background:#d2d0ca;transition:transform .15s}.switch.on{background:#278cdc}.switch.on:after{transform:translate(12px);background:#fff}.scale-panel .dock-section-title{justify-content:space-between}.scale-info{border:0;color:#aca69c;background:transparent;padding:3px}.scale-points{display:flex;justify-content:space-between;align-items:flex-start;position:relative;margin-top:30px}.scale-points:before{content:"";position:absolute;top:3px;height:2px;background:#58564f;left:7%;right:7%}.scale-points button{position:relative;display:flex;align-items:center;flex-direction:column;gap:9px;border:0;background:none;color:#b8b2a8;font-size:10px;padding:0;z-index:1}.scale-points i{width:7px;height:7px;background:#55534c;border-radius:50%;box-shadow:0 0 0 2px #181817}.scale-points button.current{color:#f1eade}.scale-points button.current i{background:#369df0;width:11px;height:11px;transform:translateY(-2px);box-shadow:0 0 0 2px #181817,0 0 13px #369df0}.scale-summary{text-align:center;font-size:9px;color:#8ebce5;letter-spacing:.12em;margin-top:11px}.instrument-note{text-align:center;font-size:8px;color:#716e67;letter-spacing:.08em;padding-top:4px}.mode-assembled .part-callouts{display:none}@media(max-width:1100px){.lab-shell{grid-template-rows:86px minmax(0,1fr) 182px 20px}.lab-header{grid-template-columns:minmax(270px,1fr) auto minmax(200px,.8fr);gap:12px;padding-inline:1.7%}.lab-title h1{font-size:34px}.lab-title p{font-size:13px}.header-right p{display:none}.about-button{font-size:0}.instrument-dock{grid-template-columns:minmax(190px,.8fr) minmax(300px,1.25fr) minmax(270px,1.05fr) minmax(190px,.8fr);padding-inline:1.4%}.dock-section{padding-inline:13px}.part-callouts{width:175px;left:1.5%;gap:12px}.callout{padding:8px}.callout small{font-size:9px}}@media(max-width:760px){.lab-shell{grid-template-rows:88px minmax(180px,1fr) 315px 18px;min-height:560px}.lab-header{grid-template-columns:1fr auto;grid-template-rows:1fr 28px;padding:10px 13px 3px;gap:0 8px}.lab-title h1{font-size:28px}.lab-title p{font-size:11px;margin-top:3px}.view-tabs{grid-column:1/3;grid-row:2;justify-self:center;padding:2px}.view-tabs button{padding:5px 18px;min-width:78px;font-size:12px}.header-right{grid-column:2;grid-row:1;gap:4px}.about-button{font-size:0;padding:5px}.about-button span{font-size:18px}.sound-button{width:28px;height:28px}.instrument-stage{margin:0 7px}.stage-label{top:10px;left:11px;font-size:8px}.stage-help{right:9px;bottom:8px;font-size:7px}.part-callouts{inset:auto 8px 14px;width:auto;flex-direction:row;gap:4px;pointer-events:none}.callout{flex:1;display:block;padding:5px 6px;min-width:0}.callout>span{display:none}.callout strong{font-size:10px}.callout small{font-size:8px;line-height:1.15}.instrument-dock{grid-template-columns:1fr 1fr;grid-template-rows:83px 117px 99px;padding:8px 11px 4px;overflow:hidden}.dock-section{padding:0 8px;border-right:1px solid #373631;border-bottom:1px solid #373631}.dock-section:first-child{padding-left:2px}.dock-section:last-child{padding-right:2px}.bellows-panel{grid-column:1;grid-row:1}.bellows-content{height:58px;gap:8px}.bellows-drawing{width:38px;height:47px;border-width:1px 3px 1px 1px}.bellows-drawing:before,.bellows-drawing:after{height:3px}.bellows-drawing span{width:1px}.pump-control{min-height:26px;font-size:10px;padding:3px 5px}.bellows-actions>small{display:none}.air-meter{margin-top:5px}.air-meter>div:first-child{font-size:7px}.air-track{height:5px;margin-top:3px}.dock-section-title{height:19px;gap:6px}.dock-section-title>strong{font-size:12px}.dock-section-title>span{font-size:8px}.scale-panel{grid-column:2;grid-row:1;border-right:0}.scale-points{margin-top:15px}.scale-points button{gap:5px;font-size:8px}.scale-points i{width:6px;height:6px}.scale-points button.current i{width:9px;height:9px}.scale-summary{display:none}.keyboard-panel{grid-column:1/3;grid-row:2;border-right:0;padding-top:4px}.keyboard-panel .dock-section-title>span{font-size:8px}.notation-switch button{font-size:8px;padding:4px 7px}.keyboard-scroll{overflow-x:auto;overflow-y:hidden;margin-top:5px;scrollbar-color:#655b4f #272622;scrollbar-width:thin}.lab-keyboard{height:73px;width:620px;max-width:none}.lab-key.white span{font-size:10px}.key-hint{font-size:7px;margin-top:4px}.features-panel{grid-column:1/3;grid-row:3;border-right:0;border-bottom:0;padding-top:5px}.feature-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,22px);gap:0 6px;margin-top:3px}.feature-toggle{height:22px;font-size:9px;gap:5px}.switch{width:23px;height:13px}.switch:after{width:9px;height:9px}.switch.on:after{transform:translate(10px)}.instrument-note{font-size:7px;padding-top:2px}.about-popover{top:45px;right:10px;width:260px}}@media(max-width:390px){.lab-shell{grid-template-rows:82px minmax(160px,1fr) 305px 16px}.lab-title h1{font-size:25px}.lab-title p{font-size:10px}.instrument-dock{grid-template-rows:79px 112px 98px;padding-inline:7px}.dock-section{padding-inline:5px}.dock-section-title>strong{font-size:11px}.feature-toggle{font-size:8px;gap:4px}.switch{width:20px}.switch.on:after{transform:translate(7px)}.pump-control{font-size:9px}.bellows-drawing{width:32px}.lab-keyboard{width:580px}.callout small{display:none}}@media(max-height:680px)and (min-width:761px){.lab-shell{grid-template-rows:79px minmax(0,1fr) 162px 18px}.lab-header{padding-block:7px}.lab-title h1{font-size:32px}.instrument-dock{padding-top:8px}.bellows-content{height:113px}.lab-keyboard{height:62px}.feature-grid{row-gap:0}.part-callouts{top:13%;gap:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}.reset-lab{width:31px;height:31px;border:1px solid #655f54;border-radius:50%;background:transparent;color:#e0d7c8;font-size:18px;line-height:1}.reset-lab:hover{background:#302f2b}@media(max-width:760px){.part-callouts{display:none}.sound-button,.reset-lab{width:28px;height:28px}}.keyboard-panel .dock-section-title{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:10px}.keyboard-panel .notation-switch{margin-left:0;justify-self:start}.keyboard-panel .dock-section-title>span{justify-self:end;min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;text-align:right;font-variant-numeric:tabular-nums}.auto-bellows{display:flex;align-items:center;justify-content:center;gap:4px;font-size:10px;color:#cbc4b7;margin-top:4px;white-space:nowrap}.auto-bellows input{accent-color:#369df0;margin:0;width:12px;height:12px}@media(max-width:760px){.auto-bellows{font-size:8px;margin-top:2px}.bellows-content{height:62px}.air-meter{margin-top:3px}.keyboard-panel .dock-section-title{gap:7px}}.lab-shell{grid-template-rows:76px minmax(0,1fr) 190px 16px;min-height:0}.lab-header{grid-template-columns:minmax(300px,1fr) auto auto;padding-top:8px;padding-bottom:8px}.header-right p{display:none}.instrument-dock{display:block;padding:12px 2% 7px}.instrument-dock .keyboard-panel{padding:0;border:0;height:100%}.instrument-dock .dock-section-title{height:26px}.instrument-dock .dock-section-title>strong{font-size:18px}.instrument-dock .notation-switch button{font-size:11px;padding:5px 13px}.keyboard-scroll{overflow-x:auto;overflow-y:hidden;margin-top:8px;scrollbar-color:#655b4f #272622;scrollbar-width:thin}.lab-keyboard{width:100%;min-width:900px;height:121px}.lab-key.white{flex-direction:column;justify-content:flex-end;gap:1px}.lab-key .key-note{font:500 12px Playfair Display,Georgia,serif;line-height:1;padding:0}.lab-key .key-shortcut{font:700 13px DM Sans,sans-serif;line-height:1;letter-spacing:0;color:#31678f;margin-bottom:8px}.lab-key.black .key-note:empty{display:none}.lab-key.black .key-shortcut{color:#e6ecf1;font-size:12px;margin-bottom:8px}.lab-key:not(:has(.key-shortcut:not(:empty))) .key-shortcut{display:none}.key-hint{font-size:9px;margin-top:4px;letter-spacing:.04em}.stage-controls{position:absolute;z-index:4;right:18px;top:18px;width:246px;max-height:calc(100% - 56px);overflow-y:auto;display:flex;flex-direction:column;gap:7px;scrollbar-width:thin;scrollbar-color:#6b6154 transparent}.setting-card{border:1px solid #645a4d;border-radius:5px;background:#191918e6;color:#eee8dd;box-shadow:0 8px 24px #0006;-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}.setting-card summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;padding:10px 12px;cursor:pointer;font:500 14px Playfair Display,Georgia,serif}.setting-card summary::-webkit-details-marker{display:none}.setting-card summary:before{content:"＋";color:#84bce9;font:600 14px DM Sans,sans-serif;margin-right:3px}.setting-card[open] summary:before{content:"−"}.setting-card summary>span{font:700 9px DM Sans,sans-serif;letter-spacing:.08em;color:#8ec6ef;margin-left:auto;white-space:nowrap}.setting-card .dock-section{border:0;padding:2px 13px 14px}.setting-card .dock-section-title{display:none}.setting-card .bellows-content{height:auto;min-height:98px;gap:10px}.setting-card .bellows-drawing{width:56px;height:66px}.setting-card .feature-grid{grid-template-columns:1fr 1fr;gap:2px 5px;margin-top:3px}.setting-card .feature-toggle{font-size:10px}.setting-card .scale-points{margin-top:15px}.setting-card .scale-summary{margin-top:8px}.setting-card .part-callouts{position:static;width:auto;display:flex;flex-direction:column;gap:0;padding:0 9px 9px}.setting-card .callout{border:0;border-top:1px solid #4a4338;box-shadow:none;background:none;border-radius:0;padding:8px 4px}.setting-card .callout strong{font-size:13px}.setting-card .callout small{font-size:10px}@media(max-width:760px){.lab-shell{grid-template-rows:87px minmax(0,1fr) 151px 14px;min-height:0}.lab-header{grid-template-columns:1fr auto;grid-template-rows:1fr 28px;padding:9px 12px 3px}.instrument-dock{display:block;padding:6px 9px 2px}.instrument-dock .keyboard-panel{grid-column:auto;grid-row:auto;padding:0}.instrument-dock .dock-section-title{height:23px}.instrument-dock .dock-section-title>strong{font-size:13px}.instrument-dock .notation-switch button{font-size:9px;padding:4px 8px}.lab-keyboard{width:760px;min-width:760px;height:97px}.lab-key .key-note{font-size:10px}.lab-key .key-shortcut{font-size:11px;margin-bottom:4px}.lab-key.black .key-shortcut{font-size:10px;margin-bottom:5px}.key-hint{display:none}.stage-controls{right:7px;top:35px;width:155px;max-height:calc(100% - 65px);gap:4px}.setting-card summary{font-size:11px;padding:7px 8px}.setting-card summary>span{font-size:7px}.setting-card .dock-section{padding:0 7px 8px}.setting-card .bellows-drawing{display:none}.setting-card .bellows-content{min-height:76px}.setting-card .feature-grid{grid-template-columns:1fr 1fr;gap:0}.setting-card .feature-toggle{font-size:9px;gap:3px}.setting-card .part-callouts{display:flex}.setting-card .callout small{font-size:9px}}@media(max-width:760px){.stage-controls{width:min(245px,calc(100% - 14px))}.setting-card{width:155px;align-self:flex-end}.setting-card[open]{width:100%}.setting-card[open] .feature-grid{grid-template-columns:1fr 1fr;gap:3px 8px}.setting-card[open] .feature-toggle{font-size:10px}}@media(min-width:761px)and (max-width:900px){.lab-shell{grid-template-rows:100px minmax(0,1fr) 180px 16px}.lab-header{grid-template-columns:1fr auto;grid-template-rows:1fr 32px;padding:8px 18px 4px;gap:0 9px}.lab-title h1{font-size:32px}.view-tabs{grid-column:1/3;grid-row:2;justify-self:center}.view-tabs button{padding:5px 18px}.header-right{grid-column:2;grid-row:1;gap:8px}.about-button{font-size:0;padding:4px}.about-button span{font-size:18px}.stage-controls{width:195px;right:9px;top:16px}.setting-card summary{font-size:12px;padding:8px 9px}.setting-card summary>span{font-size:8px}.setting-card .feature-grid{gap:2px}.setting-card .feature-toggle{font-size:9px;gap:4px}}@media(max-width:390px){.lab-title h1{font-size:22px}.about-button{display:none}}.lab-shell{grid-template-columns:minmax(0,1fr)}.instrument-stage,.instrument-dock{min-width:0}@media(min-width:901px){.lab-shell{grid-template-rows:74px minmax(0,1fr) 218px 12px}.instrument-dock{padding-top:10px}.lab-keyboard{height:151px}}@media(min-width:761px)and (max-width:900px){.lab-shell{grid-template-rows:94px minmax(0,1fr) 202px 12px}.lab-keyboard{height:136px}}.sound-button{width:auto;min-width:91px;height:34px;display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 10px;border-radius:18px;font-size:14px;font-weight:700;white-space:nowrap}.sound-button.sound-on{background:#173b2b;border-color:#77ca9b;color:#c8f9d9;box-shadow:0 0 0 1px #34694b inset}.sound-button.sound-off{background:#3a2823;border-color:#c7836f;color:#ffcec0}.sound-button .sound-state{font-size:10px;letter-spacing:.02em}@media(max-width:760px){.sound-button{min-width:34px;width:34px;height:30px;padding:0}.sound-button .sound-state{display:none}}