@font-face{font-family:Georgia-fallback;src:local(Georgia)}:root{--stage-bg-0:#14100d;--stage-bg-1:#241a15;--body-wine-0:#5a1420;--body-wine-1:#3a0d16;--body-wine-2:#7a2230;--brass-0:#d9b56a;--brass-1:#8a6a2e;--ivory-0:#f6efdd;--ivory-1:#ddd0ab;--ebony-0:#2a2622;--ebony-1:#100e0c;--ink:#f1e9d8;--ink-dim:#b8a98e;--ok:#8fd19e;--warn:#d98f7c}*{box-sizing:border-box}body{min-height:100vh;color:var(--ink);background:radial-gradient(ellipse 60% 45% at 50% 38%, #d9b56a1f, transparent 70%), radial-gradient(ellipse 120% 80% at 50% 0%, var(--stage-bg-1), var(--stage-bg-0) 70%);place-items:center;margin:0;padding:3rem clamp(.5rem,3vw,1.5rem);font-family:Georgia,Georgia-fallback,Iowan Old Style,serif;display:grid}.stage{flex-direction:column;align-items:center;gap:1.75rem;width:100%;max-width:720px;display:flex}.masthead{text-align:center}.masthead h1{letter-spacing:.06em;color:var(--ink);text-shadow:0 1px #0006;margin:0;font-size:1.6rem;font-weight:400}.tagline{color:var(--ink-dim);letter-spacing:.02em;margin:.35rem 0 0;font-size:.8rem;font-style:italic}.accordion{filter:drop-shadow(0 18px 30px #0000008c);background:radial-gradient(140% 90% at 50% 0%, var(--body-wine-2), var(--body-wine-0) 55%, var(--body-wine-1) 100%);border:2px solid var(--brass-1);border-radius:18px;flex-direction:column;align-items:stretch;gap:0;width:clamp(300px,94vw,560px);max-width:100%;display:flex;overflow-x:auto;box-shadow:inset 0 0 0 3px #d9b56a40,inset 0 2px 6px #ffffff14,inset 0 -8px 16px #00000059}.bellows-crown{flex-shrink:0;height:clamp(18px,4vw,28px);position:relative}.bellows-crown .grille{border:2px solid var(--brass-0);background:repeating-radial-gradient(circle,#d9b56a80 0 1.5px,#0000 1.5px 6px),radial-gradient(circle,#00000080,#0003 70%);border-radius:50%;width:clamp(20px,5vw,30px);height:clamp(20px,5vw,30px);position:absolute;top:4px;left:12px}.bellows-crown .strap{background:linear-gradient(180deg, var(--ebony-0), var(--ebony-1));border:1px solid var(--brass-1);border-radius:3px;width:34px;height:14px;position:absolute;top:0;right:12px}.bellows-crown .strap-right{width:26px;left:50%;right:auto;transform:translate(-50%)}.bellows{--bellows-extent:200px;--bellows-pressure:0;height:min(var(--bellows-extent), 58vh);min-height:clamp(120px,32vw,190px);max-height:480px;box-shadow:inset 0 0 calc(10px + 24px * var(--bellows-pressure)) rgba(255, 208, 120, calc(.1 + .35 * var(--bellows-pressure)));cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;flex-direction:column;flex-shrink:0;gap:3px;padding:6px clamp(14px,4vw,26px);transition:height 90ms linear;animation:.14s ease-in-out infinite alternate bellows-tremor;display:flex}.bellows.grabbing{cursor:grabbing}@keyframes bellows-tremor{0%{transform:translateX(calc(-1.5px * var(--bellows-pressure)))}to{transform:translateX(calc(1.5px * var(--bellows-pressure)))}}.bellows .fold{border-left:2px solid var(--brass-1);border-right:2px solid var(--brass-1);clip-path:polygon(0% 18%,100% 0%,100% 82%,0% 100%);box-shadow:0 0 calc(4px + 14px * var(--bellows-pressure)) rgba(255, 208, 120, calc(.15 + .5 * var(--bellows-pressure)));background:linear-gradient(190deg,#b5883f 0%,#7a5726 18%,#4a3316 50%,#7a5726 82%,#b5883f 100%) 0 0/100% 220%;flex:1}.accordion[data-direction=push] .bellows .fold{filter:brightness(calc(1 + .14 * var(--bellows-pressure)))}.accordion[data-direction=pull] .bellows .fold{filter:brightness(calc(1 - .1 * var(--bellows-pressure))) saturate(calc(1 + .25 * var(--bellows-pressure)))}.manual{border-top:2px solid var(--brass-1);background:linear-gradient(#00000038,#0000000d);flex-shrink:0;padding:clamp(8px,2.5vw,14px) clamp(10px,3vw,20px) clamp(10px,3vw,16px)}.keyboard{width:100%;position:relative}.key-row{width:100%;display:flex}.white-row{gap:1.5px;position:relative}.black-row{height:0;position:relative}.key{cursor:pointer;-webkit-user-select:none;user-select:none;letter-spacing:.02em;border:none;border-radius:0 0 4px 4px;justify-content:center;align-items:flex-end;padding-bottom:4px;font-family:inherit;font-size:.6rem;transition:transform 60ms,box-shadow 60ms,background 60ms;display:flex}.key.white{color:#6b5a3a;background:linear-gradient(180deg, var(--ivory-0), var(--ivory-1));border:1px solid #a8996f;flex:1;height:clamp(58px,15vw,96px);box-shadow:0 4px #a8996f,0 6px 8px #00000059}.key.white.active,.key.white:active{color:#7a4a12;box-shadow:0 1px 0 #a8996f, 0 0 0 2px var(--brass-0), 0 0 14px 2px #e9b252b3;background:linear-gradient(#f3d9a0,#e9c67a);transform:translateY(3px)}.key.black{left:var(--offset);width:4.4%;height:clamp(36px,9vw,58px);color:var(--brass-0);background:linear-gradient(180deg, var(--ebony-0), var(--ebony-1));z-index:2;border:1px solid #000;font-size:.52rem;position:absolute;box-shadow:0 4px #000,0 6px 10px #00000080}.key.black.active,.key.black:active{color:#2a1c04;box-shadow:0 1px 0 #000, 0 0 0 2px var(--brass-0), 0 0 14px 3px #e9b252d9;background:linear-gradient(#e9c67a,#c9a227);transform:translateY(3px)}.mode-status{letter-spacing:.03em;margin:0;font-size:.75rem}.mode-status[data-state=connected]{color:var(--ok)}.mode-status[data-state=disconnected],.mode-status[data-state=connecting]{color:var(--warn)}.telemetry{color:#f1e9d859;letter-spacing:.02em;gap:1.2rem;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:.68rem;display:flex}