.capella-cabinet{--walnut:#6b4226;--walnut-dark:#3e2314;--panel:#19130f;--panel-hi:#241b15;--ink:#eadfc8;--ink-dim:#a39378;--brass:#d0a64d;--lamp:#ffb347;--focus:#fff;box-sizing:border-box;background:radial-gradient(ellipse at 50% 0, color-mix(in oklab, var(--foreground) 7%, var(--background)), var(--background) 70%);flex:1 0 auto;justify-content:center;padding:2rem 1.5rem;display:flex}.capella{box-sizing:border-box;width:min(100%,58rem);min-width:0;height:max-content;color:var(--ink);outline:1px solid var(--walnut-dark);background:linear-gradient(180deg, var(--panel-hi), var(--panel));border-inline:1.3rem solid var(--walnut);border-radius:4px;grid-template-columns:minmax(0,1fr);align-content:start;gap:1rem;margin-block:auto;padding:1rem 1.2rem 1.2rem;font-family:Helvetica Neue,Arial Narrow,Arial,sans-serif;display:grid;position:relative;box-shadow:inset 0 1px #ffffff1a,inset 0 -2px #00000080,inset 1px 0 #0009,inset -1px 0 #0009,0 24px 50px #0000008c}.capella:before,.capella:after{pointer-events:none;content:"";background:repeating-linear-gradient(90deg,#0000002e 0 2px,#0000 2px 7px,#ffffff0f 7px 8px,#0000 8px 13px);width:1.3rem;position:absolute;top:0;bottom:0}.capella:before{left:-1.3rem}.capella:after{right:-1.3rem}.capella-header{flex-wrap:wrap;align-items:center;gap:.75rem 1.5rem;display:flex}.capella-name{letter-spacing:.24em;margin:0;font-size:1.45rem;font-weight:800;line-height:1}.capella-name span{color:var(--brass)}.capella-tagline{color:var(--ink-dim);text-transform:uppercase;letter-spacing:.3em;margin:.3rem 0 0;font-size:.55rem}.capella-registration{color:var(--lamp);letter-spacing:.2em;white-space:pre;text-shadow:0 0 6px #ffb3478c;background:#0c0905;border-radius:3px;padding:.45rem .9rem;font:700 1.05rem/1 ui-monospace,SF Mono,Menlo,monospace;box-shadow:inset 0 2px 5px #000,0 0 0 2px #2a2018}.capella-presets{flex-wrap:wrap;gap:.4rem;margin-left:auto;display:flex}.capella-preset{color:#241b15;text-transform:uppercase;letter-spacing:.14em;cursor:pointer;background:linear-gradient(#f6efde,#bdb097);border:0;border-radius:3px;justify-items:center;gap:.35rem;min-width:3.4rem;padding:.4rem .4rem .35rem;font:700 .55rem/1 Arial Narrow,Arial,sans-serif;display:grid;box-shadow:0 0 0 2px #0b0806,0 3px 4px #0009,inset 0 1px #fff}.capella-preset[aria-pressed=true]{background:linear-gradient(#bdb097,#e2d8c0);translate:0 1px;box-shadow:0 0 0 2px #0b0806,0 1px 2px #0009,inset 0 -1px #fff}.capella-lamp{background:#4a2e10;border-radius:50%;width:.5rem;height:.5rem;box-shadow:inset 0 1px 1px #0000008c}.capella-lamp[data-on]{background:radial-gradient(circle at 40% 35%, #fff4dc, var(--lamp) 55%);box-shadow:0 0 7px 1px #ffb347b3}.capella-row{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1.1rem 1rem;display:flex}.capella-section{border:1px solid #eadfc847;border-radius:3px;gap:.5rem;padding:.95rem .9rem .6rem;display:grid;position:relative}.capella-legend{text-transform:uppercase;letter-spacing:.24em;background:var(--panel);margin:0;padding:0 .35rem;font-size:.55rem;font-weight:700;position:absolute;top:0;left:.7rem;translate:0 -50%}.capella-switches,.capella-knobs{display:contents}.capella-stack{flex-wrap:wrap;gap:1.1rem;display:flex}.capella-group{gap:.75rem;display:flex}.capella-label{text-transform:uppercase;letter-spacing:.16em;font-size:.58rem;font-weight:700}.capella-row>*{min-width:0;max-width:100%}.capella-drawbars{gap:.35rem;padding-top:.9rem;padding-bottom:.3rem;padding-left:.9rem;display:flex;overflow-x:auto}.capella-drawbar{--rod-height:9.5rem;justify-items:center;gap:1.1rem;width:2.7rem;display:inline-grid}.capella-drawbar-control{width:2.7rem;height:var(--rod-height);position:relative}.capella-drawbar-track{background:linear-gradient(90deg,#8d8f94,#d8dadd 50%,#8d8f94);border-radius:2px;width:.28rem;height:100%;margin-inline:auto;position:relative;box-shadow:0 0 0 2px #0b0806,0 1px 0 2px #ffffff1a}.capella-drawbar-mark{pointer-events:none;background:var(--ink-dim);width:.5rem;height:1px;position:absolute;left:0}.capella-drawbar-numeral{font-variant-numeric:tabular-nums;color:var(--ink-dim);font-size:.42rem;line-height:1;position:absolute;top:50%;right:calc(100% + 1px);translate:0 -50%}.capella-drawbar-thumb{background:linear-gradient(180deg, #ffffff59, transparent 40%, #00000040), var(--cap,#efe8d6);border-radius:3px 3px 5px 5px;width:1.5rem;height:1.55rem;position:absolute;box-shadow:0 4px 6px #0009,inset 0 1px #ffffff80,0 0 0 1px #0b0806}.capella-drawbar[data-cap=brown]{--cap:#7a4524}.capella-drawbar[data-cap=white]{--cap:#efe8d6}.capella-drawbar[data-cap=black]{--cap:#26221f}.capella-drawbar-thumb:before{content:"";position:absolute;inset:-.4rem}.capella-drawbar-control[data-dragging] .capella-drawbar-thumb{filter:brightness(1.2)}.capella-selector{gap:.4rem;display:flex}.capella-rocker{min-width:2.7rem;color:var(--ink);text-transform:uppercase;letter-spacing:.14em;cursor:pointer;background:0 0;border:0;justify-items:center;gap:.45rem;padding:0;font:700 .6rem/1 Arial Narrow,Arial,sans-serif;display:grid}.capella-rocker:after{content:"";background:linear-gradient(#f4efe2 0 48%,#a39d8f 52%);border-radius:3px;order:1;width:1.4rem;height:1.6rem;box-shadow:0 0 0 3px #0b0806,0 4px 5px #0009,inset 0 1px #fff}.capella-rocker[aria-pressed=true]:after{background:linear-gradient(#a39d8f 0 52%,#f4efe2 56%);box-shadow:0 0 0 3px #0b0806,0 1px 2px #0009,inset 0 -1px #fff}.capella-rocker .capella-lamp{order:0}.capella-knob{--knob-size:2.9rem;justify-items:center;gap:.9rem;padding-top:.9rem;display:inline-grid;position:relative}.capella-knob-control{width:var(--knob-size);aspect-ratio:1;touch-action:none;cursor:ns-resize;position:relative}.capella-knob-thumb{pointer-events:none;background:radial-gradient(circle at 32% 28%, #ffffff38, transparent 45%), repeating-conic-gradient(from 0deg, #26221f 0 4deg, #131110 4deg 8deg);border-radius:50%;position:absolute;inset:12%;box-shadow:0 5px 7px #0000008c,inset 0 1px #ffffff4d,inset 0 -3px 4px #0006,0 0 0 3px #0a0908}.capella-knob-thumb:after{content:"";background:var(--brass);border-radius:2px;width:3px;height:32%;position:absolute;top:7%;left:50%;translate:-50%}.capella-knob-control[data-dragging] .capella-knob-thumb{filter:brightness(1.15)}.capella-knob-mark{pointer-events:none;position:absolute;inset:0}.capella-knob-tick{background:var(--ink-dim);width:1px;height:5px;position:absolute;top:0;left:50%;translate:-50%}.capella-knob-mark[data-active] .capella-knob-tick{background:var(--brass)}.capella-knob-numeral{font-variant-numeric:tabular-nums;color:var(--ink-dim);rotate:calc(var(--knob-mark-angle) * -1);font-size:.6rem;line-height:1;position:absolute;top:-1.1rem;left:50%;translate:-50%}.capella-rocker:focus-visible,.capella-preset:focus-visible,.capella-piano-key:focus-visible{outline:2px solid var(--focus);outline-offset:2px}.capella-drawbar-thumb:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.capella-knob-thumb:has(:focus-visible){outline:2px solid var(--focus);outline-offset:2px}.capella-piano{background:#0d0b0a;border-radius:4px;width:100%;height:6.5rem;padding-top:4px;display:block;position:relative;box-shadow:0 0 0 3px #3a322b,0 8px 14px #00000080}.capella-piano-key{border:0;position:absolute;top:4px}.capella-piano-key[data-color=white]{background:linear-gradient(#fffdf6,#e6dfcc);border:1px solid #1a1613;border-radius:0 0 3px 3px;height:calc(100% - 4px);box-shadow:inset 0 -5px 4px #00000024}.capella-piano-key[data-color=black]{z-index:1;background:linear-gradient(#2e2a27,#050403);border-radius:0 0 3px 3px;height:60%;box-shadow:0 3px 4px #0009,inset 0 -3px 2px #ffffff1f}.capella-piano-key[data-active]{filter:brightness(.82)sepia(.4)}@media (prefers-reduced-motion:no-preference){.capella-preset,.capella-rocker:after{transition:translate 80ms linear,box-shadow 80ms linear}}@media (width<=639px){.capella-cabinet{padding-inline:.5rem}.capella{border-inline-width:.6rem;padding-inline:.6rem}.capella:before,.capella:after{display:none}.capella-presets{margin-left:0}}