:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}body{color:#f2e2c8;background:radial-gradient(circle at 50% 30%,#2a1b0f,#0b0603 75%);flex-direction:column;min-height:100vh;margin:0;font-family:system-ui,sans-serif;display:flex;overflow:hidden}header{padding:.5rem 1rem}nav a{color:#d9a65c;font-size:.85rem;text-decoration:none}main{flex:1;justify-content:center;align-items:center;padding:1rem;display:flex}.visually-hidden{clip:rect(0 0 0 0);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}#instrument{border-radius:1rem;outline:none;align-items:stretch;gap:clamp(1rem,3vw,2.5rem);padding:1rem;display:flex}#instrument:focus-visible{box-shadow:0 0 0 3px #e8b96a}#bellows{--pressure:0;cursor:ns-resize;touch-action:none;width:clamp(4rem,10vw,6rem);box-shadow:0 0 calc(1rem + 3rem * var(--pressure)) calc(.2rem + .8rem * var(--pressure)) rgba(232, 185, 106, calc(.15 + .55 * var(--pressure))), inset 0 0 1.5rem #0009;background:linear-gradient(#3d2412,#1c0f06);border-radius:.75rem;justify-content:center;align-items:center;display:flex;position:relative}#bellows.idle:after{content:"";border-radius:inherit;pointer-events:none;animation:2.4s ease-in-out infinite breathe;position:absolute;inset:-.6rem;box-shadow:0 0 2rem .4rem #e8b96a73}@keyframes breathe{0%,to{opacity:.25}50%{opacity:.85}}@media (prefers-reduced-motion:reduce){#bellows.idle:after{opacity:.5;animation:none}}.pleats{flex-direction:column;justify-content:space-between;width:70%;height:80%;display:flex}.pleat{transform-origin:50%;background:linear-gradient(90deg,#7a4a22,#b97a3c 50%,#7a4a22);border-radius:2px;flex:1;margin:2px 0;transition:transform .12s ease-out}#keysWrap{scrollbar-width:thin;max-width:min(90vw,64rem);overflow:auto hidden}#keys{height:clamp(9rem,30vh,14rem);position:relative}.key{border:1px solid #00000080;border-radius:0 0 .35rem .35rem;transition:transform 50ms ease-out,filter 50ms ease-out;position:absolute;top:0}.key.white{z-index:1;background:linear-gradient(#fbf3e2,#e9dcc0);height:100%}.key.white.active{background:linear-gradient(#e8b96a,#c9924a);transform:translateY(2px)}.key.black{z-index:2;background:linear-gradient(#241408,#0c0704);height:62%}.key.black.active{filter:brightness(1.4);background:linear-gradient(#4a2c12,#241408);transform:translateY(2px)}