.skin-stage{--stage-bg:radial-gradient(120% 90% at 50% 0%,#2a3142 0%,#151922 60%,#0d1016 100%);--stage-ink:#e5e7eb;--fallboard-bg:linear-gradient(180deg,#1a1a1a,#050505);--fallboard-ink:#d4d4d8;--fallboard-font:inherit;--fallboard-shadow:none;--fallboard-spacing:0.35em;--stage-control-bg:rgb(255 255 255/12%);--stage-control-hover:rgb(255 255 255/20%);--stage-control-border:rgb(255 255 255/22%);--stage-chip-bg:rgb(0 0 0/35%);position:relative;isolation:isolate;overflow:hidden;border-radius:1rem;background:var(--stage-bg);color:var(--stage-ink);padding:.85rem .85rem 1rem;transition:background .4s ease}.skin-stage-header{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.7rem}.skin-stage-chip{display:inline-flex;align-items:center;gap:.3rem;border-radius:999px;background:var(--stage-chip-bg);padding:.2rem .6rem;font-size:.68rem;font-weight:700;letter-spacing:.02em;color:#fff;backdrop-filter:blur(6px)}.skin-stage-actions{display:flex;flex-wrap:wrap;gap:.4rem}.skin-stage-button{display:inline-flex;min-height:2rem;align-items:center;gap:.35rem;border:1px solid var(--stage-control-border);border-radius:999px;background:var(--stage-control-bg);padding:.25rem .8rem;font-size:.75rem;font-weight:700;color:#fff;backdrop-filter:blur(6px);transition:background .15s ease,transform .15s ease}.skin-stage-button:hover{background:var(--stage-control-hover)}.skin-stage-button:active{transform:scale(.97)}.skin-stage-button:focus-visible{outline:2px solid #fff;outline-offset:2px}.skin-instrument{position:relative;z-index:2;overflow:hidden;border-radius:.6rem .6rem .5rem .5rem;box-shadow:0 18px 40px -18px rgb(0 0 0/80%),inset 0 2px 0 rgb(255 255 255/6%)}.skin-fallboard{position:relative;display:grid;height:1.9rem;place-items:center;overflow:hidden;background:var(--fallboard-bg);box-shadow:inset 0 -3px 6px rgb(0 0 0/45%),inset 0 1px 0 rgb(255 255 255/10%)}.skin-fallboard-name{font-family:var(--fallboard-font);font-size:.7rem;font-weight:700;letter-spacing:var(--fallboard-spacing);text-transform:uppercase;color:var(--fallboard-ink);text-shadow:var(--fallboard-shadow);white-space:nowrap}.skin-keybed{position:relative}.skin-keybed:after{inset:0 0 auto;z-index:15;height:8px;background:linear-gradient(180deg,rgb(0 0 0/45%),transparent);content:""}.skin-keybed:after,.skin-sheen{position:absolute;pointer-events:none}.skin-sheen{inset:0;z-index:16;overflow:hidden;mix-blend-mode:overlay}.skin-sheen:before{position:absolute;inset:-10% auto -10% 0;width:35%;background:linear-gradient(100deg,transparent,rgb(255 255 255/75%) 50%,transparent);content:"";transform:translateX(-120%) skewX(-12deg);animation:skin-sheen-sweep 4.6s ease-in-out .6s infinite}@keyframes skin-sheen-sweep{0%{transform:translateX(-120%) skewX(-12deg)}45%,to{transform:translateX(380%) skewX(-12deg)}}.skin-stage-footer{position:relative;z-index:3;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem 1rem;margin-top:.7rem;font-size:.72rem;color:color-mix(in srgb,var(--stage-ink) 78%,transparent)}.skin-stage-footer kbd{border:solid color-mix(in srgb,var(--stage-ink) 35%,transparent);border-width:1px 1px 2px;border-radius:4px;padding:0 .3rem;font-family:ui-monospace,Menlo,monospace;font-size:.65rem;color:var(--stage-ink)}.skin-scenery{position:absolute;inset:0;z-index:0;pointer-events:none}:is([data-stage-skin=sakura],[data-stage-skin=candy],[data-stage-skin=glacier]){--stage-control-bg:color-mix(in srgb,var(--stage-ink) 78%,transparent);--stage-control-hover:var(--stage-ink);--stage-control-border:transparent;--stage-chip-bg:color-mix(in srgb,var(--stage-ink) 78%,transparent)}[data-stage-skin=midnight]{--stage-bg:radial-gradient(90% 80% at 80% 0%,#33363e 0%,transparent 60%),linear-gradient(180deg,#1b1d23,#0f1014);--fallboard-bg:linear-gradient(180deg,#23262d,#141519);--fallboard-ink:#ebe7dc;--fallboard-shadow:0 0 10px rgb(235 231 220/35%)}[data-stage-skin=concert]{--stage-bg:radial-gradient(60% 90% at 50% -10%,rgb(255 236 180/40%),transparent 65%),linear-gradient(180deg,#4a0d17,#1e0408 70%,#120205);--fallboard-bg:linear-gradient(180deg,#161616,#000);--fallboard-ink:#e9c97a;--fallboard-font:Georgia,"Times New Roman",serif;--fallboard-shadow:0 1px 0 rgb(0 0 0/80%)}[data-stage-skin=vintage]{--stage-bg:radial-gradient(70% 80% at 50% 0%,rgb(255 210 150/25%),transparent 70%),repeating-linear-gradient(92deg,#3c2214 0 7px,#45281a 7px 15px,#382012 15px 19px);--fallboard-bg:repeating-linear-gradient(178deg,#5a2f1b 0 3px,#4b2615 3px 6px),#4b2615;--fallboard-ink:#f3dfb7;--fallboard-font:Georgia,"Times New Roman",serif;--fallboard-shadow:0 1px 0 rgb(0 0 0/60%)}[data-stage-skin=sakura]{--stage-bg:radial-gradient(80% 90% at 15% 0%,#ffd6e4 0%,transparent 60%),linear-gradient(180deg,#ffeef4,#f7c5d6);--stage-ink:#6b2440;--fallboard-bg:linear-gradient(180deg,#6e3550,#46203a);--fallboard-ink:#ffd6e3}[data-stage-skin=candy]{--stage-bg:repeating-linear-gradient(135deg,#ffe0f1 0 18px,#fff4fb 18px 36px);--stage-ink:#6b3f7a;--fallboard-bg:linear-gradient(180deg,#7a4a33,#5a321f);--fallboard-ink:#ffe9d6;--fallboard-shadow:0 1px 0 #2f170c}[data-stage-skin=ocean]{--stage-bg:radial-gradient(70% 60% at 30% 0%,rgb(110 231 249/40%),transparent 70%),linear-gradient(180deg,#0b4a6e,#062a48 55%,#02101f);--fallboard-bg:linear-gradient(180deg,#0c3357,#051a33);--fallboard-ink:#a7fff0;--fallboard-shadow:0 0 10px rgb(94 234 212/70%)}[data-stage-skin=glacier]{--stage-bg:radial-gradient(80% 90% at 70% 0%,#ffffff 0%,transparent 60%),linear-gradient(180deg,#d7ecfa,#9ccbe9);--stage-ink:#18405f;--fallboard-bg:linear-gradient(180deg,#2a5b82,#12354f);--fallboard-ink:#e6f5ff;--fallboard-shadow:0 0 8px rgb(190 230 255/80%)}[data-stage-skin=neon]{--stage-bg:repeating-linear-gradient(90deg,rgb(255 79 216/18%) 0 1px,transparent 1px 34px),radial-gradient(70% 70% at 50% 30%,#3b0a59 0%,#12021f 70%);--fallboard-bg:linear-gradient(180deg,#12031f,#05010c);--fallboard-ink:#ffd6f7;--fallboard-shadow:0 0 4px #ff4fd8,0 0 12px #ff4fd8}[data-stage-skin=arcade]{--stage-bg:repeating-linear-gradient(0deg,rgb(255 255 255/4%) 0 2px,transparent 2px 4px),linear-gradient(180deg,#1b1240,#0b0720);--fallboard-bg:#15121f;--fallboard-ink:#9a8cff;--fallboard-font:ui-monospace,Menlo,monospace;--fallboard-shadow:2px 2px 0 #3b2a8f;--fallboard-spacing:0.2em}[data-stage-skin=arcade] .skin-instrument{border-radius:0}[data-stage-skin=aurora]{--stage-bg:radial-gradient(60% 70% at 20% 10%,rgb(103 232 249/45%),transparent 70%),radial-gradient(60% 70% at 85% 0%,rgb(232 121 249/40%),transparent 70%),linear-gradient(180deg,#0d1230,#03040f);--fallboard-bg:linear-gradient(180deg,#121a40,#070a1f);--fallboard-ink:#fff;--fallboard-shadow:0 0 10px rgb(129 140 248/90%)}[data-stage-skin=magma]{--stage-bg:radial-gradient(90% 60% at 50% 110%,rgb(255 90 20/55%),transparent 70%),linear-gradient(180deg,#1a1212,#0a0606);--fallboard-bg:linear-gradient(180deg,#1c1414,#050303);--fallboard-ink:#ffb07a;--fallboard-shadow:0 0 8px rgb(255 90 20/90%)}[data-stage-skin=galaxy]{--stage-bg:radial-gradient(1.2px 1.2px at 12% 22%,#fff 99%,transparent),radial-gradient(1px 1px at 28% 70%,#fff 99%,transparent),radial-gradient(1.4px 1.4px at 46% 14%,#e9d5ff 99%,transparent),radial-gradient(1px 1px at 63% 48%,#fff 99%,transparent),radial-gradient(1.3px 1.3px at 81% 26%,#bfdbfe 99%,transparent),radial-gradient(1px 1px at 92% 78%,#fff 99%,transparent),radial-gradient(60% 70% at 70% 20%,rgb(168 85 247/45%),transparent 70%),radial-gradient(50% 60% at 15% 90%,rgb(59 130 246/35%),transparent 70%),#07041a;--fallboard-bg:linear-gradient(180deg,#120b30,#05031a);--fallboard-ink:#e9e3ff;--fallboard-shadow:0 0 10px rgb(196 181 253/90%)}[data-stage-skin=gold]{--stage-bg:radial-gradient(70% 90% at 50% -10%,rgb(255 230 140/35%),transparent 65%),linear-gradient(180deg,#1a1408,#070502);--fallboard-bg:linear-gradient(180deg,#111,#000);--fallboard-ink:#f3cf62;--fallboard-font:Georgia,"Times New Roman",serif;--fallboard-shadow:0 0 8px rgb(243 207 98/55%)}.skin-swatch{position:relative;height:4.75rem;overflow:hidden;border-radius:.55rem;background:var(--stage-bg,linear-gradient(180deg,#2a3142,#0d1016));padding-top:.45rem}.skin-swatch-keys{position:relative;height:100%}.skin-swatch .piano-key{cursor:inherit}.skin-swatch .piano-key:after{display:none}@media (prefers-reduced-motion:reduce){.skin-stage{transition:none}.skin-sheen:before{animation:none;display:none}}