.harmonium-page{padding:calc(var(--header-height, 70px) + var(--space-xl)) 0 var(--space-3xl);min-height:85vh;display:flex;flex-direction:column;justify-content:center;align-items:center;position:relative;overflow:hidden}.harmonium-hero-header{text-align:center;margin-bottom:var(--space-xl);max-width:720px}.harmonium-badge{display:inline-flex;align-items:center;gap:.4rem;padding:.35rem .9rem;border-radius:999px;background:var(--color-gold-faint);border:1px solid var(--color-border-gold);color:var(--color-gold-deep);font-size:.82rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;margin-bottom:var(--space-sm)}:root[data-theme=dark] .harmonium-badge{color:var(--color-gold)}.harmonium-hero-header h1{font-family:var(--font-display-en);font-size:clamp(2rem,4vw,3rem);color:var(--color-ink);margin-bottom:var(--space-xs);line-height:1.15}.harmonium-hero-header p{color:var(--color-ink-soft);font-size:.95rem;line-height:1.5}.harmonium-back-btn{display:inline-flex;align-items:center;gap:.5rem;color:var(--color-ink-soft);text-decoration:none;font-size:.9rem;font-weight:500;margin-bottom:var(--space-md);transition:color var(--transition-fast)}.harmonium-back-btn:hover{color:var(--color-gold-deep)}:root[data-theme=dark] .harmonium-back-btn:hover{color:var(--color-gold)}.harmonium-instrument{width:100%;max-width:1060px;background:linear-gradient(145deg,#3d2314,#26140b,#1a0d07);border:4px solid #5a341e;border-radius:14px;box-shadow:0 15px 45px #00000073,inset 0 1px 1px #ffffff26,inset 0 -2px 5px #000000b3;padding:18px 20px 24px;position:relative;-moz-user-select:none;user-select:none;-webkit-user-select:none;touch-action:manipulation}:root[data-theme=dark] .harmonium-instrument{box-shadow:0 18px 50px #000000bf,0 0 35px #c9a84c14,inset 0 1px 1px #ffffff1f}.harmonium-top-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-md);padding:10px 16px;background:linear-gradient(180deg,#1c0e07,#2d180d);border:1px solid #6b4025;border-radius:8px;margin-bottom:16px;box-shadow:inset 0 2px 4px #0009;flex-wrap:wrap}.harmonium-brand-plate{display:flex;align-items:center;gap:8px}.harmonium-brand-title{font-family:var(--font-display-en);font-size:1.1rem;letter-spacing:.12em;color:#e5c378;text-transform:uppercase;text-shadow:0 1px 2px rgba(0,0,0,.8);font-weight:700}.harmonium-controls{display:flex;align-items:center;gap:var(--space-lg);flex-wrap:wrap}.harmonium-octave-control{display:flex;align-items:center;gap:8px;background:#0006;padding:4px 10px;border-radius:6px;border:1px solid #4a2d1a}.harmonium-control-label{color:#c9b09a;font-size:.78rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.harmonium-octave-btn{background:linear-gradient(180deg,#4d2b17,#30190c);border:1px solid #85532d;color:#f5dfb8;width:32px;height:30px;border-radius:4px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;cursor:pointer;transition:all var(--transition-fast);box-shadow:0 2px 4px #0006}.harmonium-octave-btn:hover:not(:disabled){background:linear-gradient(180deg,#663b21,#422412);border-color:#c9a84c;color:#fff;transform:translateY(-1px)}.harmonium-octave-btn:active:not(:disabled){transform:translateY(1px);box-shadow:inset 0 2px 3px #0009}.harmonium-octave-btn:disabled{opacity:.4;cursor:not-allowed;border-color:#3d2314}.harmonium-octave-display{color:#f1d7a3;font-weight:600;font-size:.85rem;min-width:65px;text-align:center;font-family:monospace}.harmonium-volume-control{display:flex;align-items:center;gap:8px;background:#0006;padding:4px 10px;border-radius:6px;border:1px solid #4a2d1a}.harmonium-volume-slider{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:90px;height:6px;border-radius:3px;background:#2a160c;outline:none;border:1px solid #5a341e}.harmonium-volume-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,#d4b96a,#9c7a2e);cursor:pointer;border:1px solid #fff2cc;box-shadow:0 1px 3px #00000080}.harmonium-volume-slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,#d4b96a,#9c7a2e);cursor:pointer;border:1px solid #fff2cc;box-shadow:0 1px 3px #00000080}.harmonium-keyboard-wrapper{width:100%;overflow-x:auto;overflow-y:hidden;padding:6px 4px 10px;border-radius:8px;background:#150a05;box-shadow:inset 0 3px 8px #000000d9;-webkit-overflow-scrolling:touch}.harmonium-keyboard-wrapper::-webkit-scrollbar{height:6px}.harmonium-keyboard-wrapper::-webkit-scrollbar-track{background:#1e0e07;border-radius:3px}.harmonium-keyboard-wrapper::-webkit-scrollbar-thumb{background:#5a341e;border-radius:3px}.harmonium-keyboard{display:flex;position:relative;height:220px;width:-moz-fit-content;width:fit-content;margin:0 auto;padding:0 4px}.harmonium-key-white{width:54px;height:210px;background:linear-gradient(180deg,#fbf8f0,#f4eee1 70%,#e6dac6);border:1px solid #c7bba8;border-bottom:5px solid #a89880;border-radius:0 0 5px 5px;margin:0 1px;position:relative;z-index:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:12px;cursor:pointer;box-shadow:inset 0 1px #fffc,1px 2px 4px #00000040;transition:transform 60ms ease,background 60ms ease,border-bottom 60ms ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.harmonium-key-white:hover{background:linear-gradient(180deg,#fff,#f7f3e8 70%,#ece1d1)}.harmonium-key-white.active,.harmonium-key-white:active{background:linear-gradient(180deg,#ede2cb,#dfd1b8 70%,#cfbf9e);border-bottom-width:2px;transform:translateY(3px);box-shadow:inset 0 3px 6px #0003,0 1px 2px #0003}.harmonium-key-black{width:34px;height:135px;background:linear-gradient(180deg,#2b2b2b,#151515 80%,#080808);border:1px solid #111;border-bottom:4px solid #000;border-radius:0 0 4px 4px;position:absolute;z-index:2;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:10px;cursor:pointer;box-shadow:inset 0 1px 1px #ffffff40,2px 3px 6px #00000080;transition:transform 60ms ease,background 60ms ease,border-bottom 60ms ease;-webkit-user-select:none;-moz-user-select:none;user-select:none}.harmonium-key-black:hover{background:linear-gradient(180deg,#3a3a3a,#202020 80%,#101010)}.harmonium-key-black.active,.harmonium-key-black:active{background:linear-gradient(180deg,#181818,#0d0d0d 80%,#000);border-bottom-width:2px;transform:translateY(2px);box-shadow:inset 0 2px 4px #ffffff1a,1px 1px 3px #0009}.harmonium-key-label{font-family:var(--font-body-en);font-size:.78rem;font-weight:700;color:#4a3e30;pointer-events:none;line-height:1.1}.harmonium-key-shortcut{font-size:.68rem;font-weight:600;color:#8c7860;background:#0000000f;padding:2px 5px;border-radius:3px;margin-top:4px;pointer-events:none;border:1px solid rgba(0,0,0,.08)}.harmonium-key-black .harmonium-key-label{color:#e5c378;font-size:.72rem}.harmonium-key-black .harmonium-key-shortcut{color:#f1d7a3;background:#ffffff1f;border:1px solid rgba(255,255,255,.15);font-size:.62rem;padding:1px 4px}.harmonium-helper-note{margin-top:var(--space-md);text-align:center;font-size:.85rem;color:var(--color-ink-faint);display:flex;align-items:center;justify-content:center;gap:.5rem}@media(max-width:768px){.harmonium-page{padding-top:calc(var(--header-height, 70px) + var(--space-md))}.harmonium-instrument{padding:12px 10px 18px}.harmonium-top-bar{justify-content:center;gap:var(--space-sm)}.harmonium-key-white{width:44px;height:180px;padding-bottom:8px}.harmonium-key-black{width:28px;height:115px;padding-bottom:6px}.harmonium-keyboard{height:190px}.harmonium-key-label{font-size:.7rem}.harmonium-key-shortcut{font-size:.6rem;padding:1px 3px}}.harmonium-key-white[data-astro-cid-wg3w7bxz]{width:36px;height:180px;background:linear-gradient(to bottom,#fff,#faf6ee 85%,#ebe3d0);border:1px solid #B0A288;border-radius:0 0 5px 5px;box-shadow:inset 0 1px #fff,0 3px 6px #0000004d;position:relative;z-index:1;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;font-size:.65rem;font-weight:700;color:#5a5040;transition:transform .05s,background .05s}@media(min-width:640px){.harmonium-key-white[data-astro-cid-wg3w7bxz]{width:44px;height:200px}}.harmonium-key-white[data-astro-cid-wg3w7bxz].is-pressed{background:linear-gradient(to bottom,#e8d9ae,#d4b96a);box-shadow:inset 0 2px 5px #0006;transform:translateY(3px)}.harmonium-key-black[data-astro-cid-wg3w7bxz]{width:24px;height:110px;background:linear-gradient(to bottom,#3a352f,#1a1712);border:1px solid #111;border-radius:0 0 4px 4px;position:absolute;z-index:2;cursor:pointer;box-shadow:0 4px 8px #00000080;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:6px;font-size:.6rem;font-weight:700;color:#e8d9ae;transition:transform .05s,background .05s}@media(min-width:640px){.harmonium-key-black[data-astro-cid-wg3w7bxz]{width:28px;height:125px}}.harmonium-key-black[data-astro-cid-wg3w7bxz].is-pressed{background:linear-gradient(to bottom,#754e24,#c9a84c);box-shadow:inset 0 2px 4px #0009;transform:translateY(2px)}