@import"https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;600&display=swap";:root{font-family:DM Sans,sans-serif;font-size:16px;line-height:1.5;color:#242922;background:#edece5;font-synthesis:none}*{box-sizing:border-box}body{margin:0;height:100vh;height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}main{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto}html:has(#visual-view:not([hidden])){overflow:hidden}body:has(#visual-view:not([hidden]))>header,body:has(#visual-view:not([hidden]))>main{display:none}a{color:inherit;text-underline-offset:4px}header{max-width:1500px;margin:auto;padding:16px 6%;width:100%;border-bottom:1px solid #d3d5cb;display:flex;align-items:center;justify-content:space-between;gap:24px}#about{display:grid;place-items:center;width:44px;height:44px;margin:-8px 0;color:#242922;border-radius:50%}#about svg{width:26px;height:26px;fill:currentColor}#about:hover{background:#2429220a}.brand{font-size:1.6875rem;font-weight:600;text-decoration:none}.brand span{color:#5e7251}.hero-content{max-width:1500px;margin:0 auto;width:100%;flex:1;min-height:0;padding:0 6%;display:grid;grid-template-columns:36% 64%;align-items:center}.intro{padding:32px 0;align-self:center}.description{max-width:290px;color:#586150;margin:0 0 28px}h1{font-size:clamp(2.25rem,4.4vw,4rem);line-height:1.15;font-weight:600;letter-spacing:-.025em;margin:0 0 28px}button{font:inherit;cursor:pointer;border:1px solid #c6ccbe;border-radius:5px;transition:background .15s;-webkit-tap-highlight-color:transparent}button:hover:enabled{background:#dfe3d7}button:focus-visible,a:focus-visible{outline:3px solid #2b7bcb;outline-offset:5px}button:disabled{cursor:default;color:#68715f}.sound-toggle{display:grid;place-items:center;width:54px;height:54px;padding:0;border:1.5px solid #111;border-radius:50%;background:transparent;color:#111}.title-row{display:flex;align-items:center;gap:16px;margin-bottom:28px}.title-row h1{margin:0}.title-row .sound-toggle{flex-shrink:0}.sound-toggle:hover:enabled{background:#fff5}.sound-toggle:active:enabled{background:#0000000d}.sound-toggle:disabled{color:#111;opacity:.45}#status{font-size:.875rem;color:#586150;max-width:280px}#status:empty{display:none}.device-area{min-width:0;min-height:0;align-self:stretch;display:grid;grid-template-rows:minmax(0,1fr) auto}#device-anchor{min-height:0}#stage{position:absolute;inset:0;touch-action:none}.hero-content,.instruments{position:relative;pointer-events:none}.intro,.instruments a{pointer-events:auto}#stage canvas{display:block;width:100%;height:100%;cursor:grab}.rotate-hint{text-align:center;font-size:.875rem;color:#586150;margin:0 0 12px}.controls{max-width:1320px;width:88%;margin:auto;border-top:1px solid #cbd0c2;padding:16px 0 20px}.readout{display:flex;align-items:baseline;flex-wrap:wrap;gap:8px 24px}.readout strong{font-weight:600}#detail{color:#586150;font-size:.875rem}.buttons{display:flex;gap:12px;margin-top:12px}.buttons button{flex:1;display:flex;align-items:flex-start;gap:16px;text-align:left;padding:14px;background:#f5f5ef;font-weight:600;border:1px solid #cbd0c2;border-radius:10px;box-shadow:inset 0 1px #fff,0 3px #d3d6cb,0 6px 12px #24292208;transition:background .15s,box-shadow .15s,transform .15s}.buttons button:hover:enabled{background:#fafaf5;transform:translateY(-1px);box-shadow:inset 0 1px #fff,0 4px #d3d6cb,0 8px 16px #2429220d}.buttons button:active:enabled{transform:translateY(2px);box-shadow:inset 0 1px 3px #24292212,0 1px #d3d6cb}.control-icon{position:relative;display:grid;place-items:center;width:32px;height:36px;flex-shrink:0;color:#586150}.control-icon svg{width:32px;height:32px}.side-key:before,.front-key:before{content:"";display:block;border:1px solid #151a1b;border-radius:5px;width:10px;height:25px;background:#414746;box-shadow:inset 1px 0 #ffffff30,2px 2px #24292220}.front-key:before{width:12px;height:32px;border-color:#006296;background:#078ac6;box-shadow:inset 1px 0 #ffffff40,2px 2px #00577f30}.buttons button:disabled .control-icon{opacity:.4}@media(prefers-reduced-motion:reduce){.buttons button{transition:none}}.buttons small{display:block;font-size:.875rem;font-weight:400;color:#586150;margin-top:4px}@media(max-width:750px){header{padding-top:10px;padding-bottom:10px}.hero-content{grid-template-columns:1fr;grid-template-rows:auto minmax(150px,1fr);min-height:300px}.intro{padding:12px 0 0}.description{max-width:360px;margin-bottom:8px}.title-row{margin-bottom:8px}.controls{padding:10px 0 max(12px,env(safe-area-inset-bottom))}.readout{gap:2px 12px}.buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}.buttons button{flex-direction:column;gap:4px;padding:10px 8px;font-size:.8125rem}.buttons small{font-size:.6875rem}}@media(max-width:499px){.buttons{grid-template-columns:minmax(0,1fr)}.buttons button{flex-direction:row;align-items:center;gap:12px;padding:8px 12px;font-size:.875rem}.buttons small{font-size:.75rem;margin-top:1px}}.instruments{max-width:1500px;margin:0 auto;width:100%;flex-shrink:0;padding:12px 6% 0;display:flex;gap:24px;font-size:1rem}.instruments a{color:#586150;text-decoration:none;padding-bottom:6px}.instruments a[aria-current=page]{color:#242922;font-weight:600;border-bottom:2px solid #5e7251}.instruments a:hover{color:#242922}:root.font-fallback{font-family:Arial,sans-serif}.hero{position:relative;isolation:isolate;min-height:0;display:flex;flex-direction:column;overflow:auto}#visual-background{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;z-index:-2;opacity:0;transition:opacity .35s}.hero.has-visual #visual-background{opacity:1}.hero:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:#edece5a8}@media(prefers-reduced-motion:reduce){#visual-background{transition:none}}.rotate-hint{display:flex;align-items:center;justify-content:center;gap:10px}#open-visual{display:grid;place-items:center;width:36px;height:36px;padding:0;border:0;background:transparent;color:inherit;pointer-events:auto}#open-visual:hover{background:#fff5}#visual-view{z-index:100;position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;background:#050707}#visual-view::backdrop{background:#050707}#fullscreen-visual{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}#close-visual{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(20px,env(safe-area-inset-right));display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:#f5f5efdf;color:#111}.fullscreen-controls{position:absolute;bottom:max(20px,env(safe-area-inset-bottom));left:50%;transform:translate(-50%);display:flex;align-items:center;gap:4px;padding:6px;border-radius:14px;background:#f5f5efdf;max-width:calc(100% - 24px)}.fullscreen-controls button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:6px 12px;border:0;border-radius:9px;background:transparent;color:#242922;font-size:13px;white-space:nowrap}.fullscreen-controls .control-icon{width:22px;height:30px}.fullscreen-controls .control-icon svg{width:22px;height:22px}.fullscreen-controls .front-key:before{height:25px;width:9px}.fullscreen-controls small{display:none}.fullscreen-controls #volume-label{display:block;font-size:11px}.fullscreen-controls .sound-toggle{width:44px;height:44px;flex-shrink:0;padding:0}.fullscreen-controls button:hover:enabled{background:#0000000a}#close-visual,#fullscreen-record-slot,.fullscreen-controls{transition:opacity .3s}#visual-view.quiet #close-visual,#visual-view.quiet #fullscreen-record-slot,#visual-view.quiet .fullscreen-controls{opacity:.35}#visual-view #fullscreen-record-slot:hover,#visual-view #fullscreen-record-slot:has(:focus-visible),#visual-view #close-visual:hover,#visual-view .fullscreen-controls:hover,#visual-view #close-visual:focus-visible,#visual-view .fullscreen-controls:focus-within{opacity:1}#fullscreen-status{position:absolute;top:20px;left:20px;max-width:calc(100% - 100px);background:#f5f5efdf;color:#242922;border-radius:6px;padding:8px 12px}#fullscreen-status:empty{display:none}@media(max-width:450px){.fullscreen-controls button{gap:4px;padding:6px;font-size:12px}}@media(prefers-reduced-motion:reduce){#close-visual,#fullscreen-record-slot,.fullscreen-controls{transition:none}}.header-actions{display:flex;align-items:center;gap:10px}#record{display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#747a70;cursor:pointer;flex-shrink:0}#record:hover{background:#2429220a}#record[aria-pressed=true]{color:#ce7067;background:#ce706710}#record:disabled{opacity:.5;cursor:wait}#fullscreen-record-slot{position:absolute;top:max(20px,env(safe-area-inset-top));right:max(76px,calc(env(safe-area-inset-right) + 56px));border-radius:50%;background:#f5f5efdf}@media(max-width:450px){header{gap:10px}.brand{font-size:1.125rem}.header-actions{gap:2px}}#visual-view[hidden]{display:none}.brand .brand-device{color:inherit}.header-link{display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;text-decoration:none;padding:0 6px;white-space:nowrap}.header-link:hover{text-decoration:underline}.about-page{display:block;height:auto;min-height:100dvh;overflow:auto}.about-page main{display:block;max-width:800px;margin:0 auto;padding:64px 32px 72px}.about-page h1{font-size:clamp(2.25rem,5vw,3rem);margin-bottom:8px}.about-credit{margin:0 0 32px;color:#586150}.about-copy{font-size:1.125rem;line-height:1.7}.about-copy p{margin:0 0 24px}.about-install{margin-top:44px;border-top:1px solid #cbd0c2;padding-top:28px}.about-install h2{font-size:1.375rem;font-weight:600;margin:0 0 12px}.about-install p{margin:0 0 20px}.instrument-downloads{list-style:none;padding:0;margin:24px 0 16px}.instrument-downloads li{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid #d3d5cb}.instrument-downloads strong,.instrument-downloads div span{display:block}.instrument-downloads div span,.store-pending,.store-note{font-size:.875rem;color:#586150}.instrument-downloads a,.store-pending{flex-shrink:0}.about-links{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:24px}@media(max-width:600px){.brand .brand-device{display:block;font-size:.75rem;font-weight:400;line-height:1.3}.about-page main{padding:32px 6% 48px}.about-copy{font-size:1rem}.about-page .header-link{font-size:.8125rem}.instrument-downloads li{align-items:flex-start;flex-direction:column;gap:8px}}