*{box-sizing:border-box;margin:0;padding:0}[hidden]{display:none!important}html,body{min-height:100%}body{-webkit-overflow-scrolling:touch}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,system-ui,sans-serif;background:linear-gradient(180deg,#f6efd7,#eadcb6);color:#3a2810;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent}.bellows,.keyboard,.key,.front-panel{touch-action:none}.seo-content,.modal{user-select:text;-webkit-user-select:text}button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}.start-hint{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:90;pointer-events:none;transition:opacity .35s ease,transform .35s ease}.start-hint.hidden{opacity:0;transform:translate(-50%,-52%) scale(.95)}.start-hint-inner{display:flex;align-items:center;gap:10px;padding:16px 28px;background:#1a1008e0;color:#f5d98a;border:1px solid rgba(245,217,138,.3);border-radius:999px;font-size:.95rem;font-weight:600;letter-spacing:.02em;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 8px 30px #00000080,0 0 60px #f5d98a1f;animation:hintPulse 2s ease-in-out infinite}.start-hint-dot{width:8px;height:8px;border-radius:50%;background:#f5d98a;box-shadow:0 0 10px #f5d98a}@keyframes hintPulse{50%{transform:translateY(-3px)}}.loading-bar-top{position:fixed;top:0;left:0;right:0;height:3px;background:#f5d98a1a;z-index:95}.loading-fill-top{height:100%;width:0;background:linear-gradient(90deg,#d4a24a,#f5d98a,#d4a24a);transition:width .25s ease;box-shadow:0 0 8px #f5d98a80}.start-btn{padding:.9rem 2rem;font-size:1rem;font-weight:600;border-radius:999px;background:linear-gradient(180deg,#d4a24a,#8f5a1a);color:#1a0a00;box-shadow:0 6px 20px #b4782859,inset 0 1px #ffe6b499;transition:transform .1s}.start-btn:active{transform:scale(.96)}.loading{margin-top:1.5rem;width:240px;margin-left:auto;margin-right:auto}.loading-bar{height:4px;background:#f5d98a26;border-radius:2px;overflow:hidden}.loading-fill{height:100%;width:0;background:linear-gradient(90deg,#d4a24a,#f5d98a);transition:width .25s ease}.loading-text{margin-top:.6rem;font-size:.8rem;opacity:.6}.rotate-hint{position:fixed;inset:0;display:none;align-items:center;justify-content:center;background:#000;z-index:90;text-align:center}.rotate-icon{font-size:4rem;margin-bottom:1rem;animation:rotate 2s ease-in-out infinite}@keyframes rotate{50%{transform:rotate(90deg)}}@media (orientation: portrait) and (max-width: 900px){.rotate-hint{display:flex}.harmonium{display:none}}.harmonium{position:relative;height:100vh;height:100dvh;width:100%;display:flex;flex-direction:column;padding:2vh 3vw;gap:1.5vh;z-index:1;background:radial-gradient(ellipse at top,#2a1a0a,#120806 60%,#0a0503);color:#f0e6d2}.bellows-area{flex:0 0 auto;display:flex;justify-content:center;padding:56px 4% 0}.bellows{width:100%;max-width:1000px;height:clamp(70px,11vh,110px);position:relative;background:linear-gradient(180deg,#5a2a10,#3a1808);border-radius:14px 14px 6px 6px;box-shadow:0 10px 30px #0009,inset 0 2px #ffc87826,inset 0 -3px 10px #00000080;cursor:grab;overflow:hidden;transition:transform .15s ease-out;touch-action:none}.bellows.dragging{cursor:grabbing}.bellows-pleats{position:absolute;inset:8px 60px;display:flex;gap:2px;align-items:stretch}.bellows-pleats span{flex:1;background:linear-gradient(180deg,#6a3418,#3a1808 40%,#4a2010,#3a1808 60%,#6a3418);border-radius:2px;box-shadow:inset 1px 0 #ffb46426,inset -1px 0 #0006;transition:flex-grow .2s}.bellows-handle{position:absolute;top:50%;left:10px;transform:translateY(-50%);width:42px;height:70%;background:linear-gradient(180deg,#d4a24a,#8f5a1a);border-radius:8px;box-shadow:0 3px 8px #00000080,inset 0 1px #ffe6b499;display:flex;align-items:center;justify-content:center;transition:left .05s linear}.bellows-label{writing-mode:vertical-rl;font-size:9px;font-weight:700;color:#3a1808;letter-spacing:1px}.front-panel{flex:0 0 auto;background:linear-gradient(180deg,#6b3a1c,#4a240f);background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 2px,transparent 2px 6px),linear-gradient(180deg,#6b3a1c,#4a240f);border-radius:8px;padding:12px 20px;box-shadow:0 6px 20px #00000080,inset 0 2px #ffc87833,inset 0 -2px 6px #0006;display:flex;align-items:center;gap:24px;flex-wrap:wrap}.brand{font-size:clamp(12px,1.4vw,16px);font-weight:700;letter-spacing:.25em;color:#f5d98a;text-shadow:0 1px 0 rgba(0,0,0,.6);padding-right:16px;border-right:1px solid rgba(0,0,0,.3);box-shadow:1px 0 #ffc8781a}.controls{display:flex;gap:18px;flex-wrap:wrap;flex:1}.control{display:flex;flex-direction:column;align-items:flex-start;gap:4px}.control label{font-size:10px;font-weight:600;letter-spacing:.15em;color:#d4a24a;text-transform:uppercase}.knob-row{display:flex;gap:4px;align-items:center}.knob-btn{min-width:28px;height:28px;padding:0 8px;background:linear-gradient(180deg,#2a1408,#1a0a04);color:#f5d98a;border-radius:4px;border:1px solid rgba(0,0,0,.6);box-shadow:0 2px 4px #00000080,inset 0 1px #ffc87826;font-size:12px;font-weight:700;transition:transform .05s}.knob-btn[aria-pressed=true]{background:linear-gradient(180deg,#8a4a1a,#5a2a10);color:#fff5e0}.knob-btn:active{transform:translateY(1px)}.val{min-width:24px;text-align:center;font-family:SF Mono,Menlo,monospace;font-size:13px;font-weight:600;color:#f5d98a}.select{background:#1a0a04;color:#f5d98a;border:1px solid rgba(0,0,0,.6);border-radius:4px;padding:4px 6px;font-size:12px}.keyboard-wrap{flex:1 1 auto;min-height:0;display:flex;justify-content:center;padding:0 2%}.keyboard{position:relative;width:100%;max-width:1100px;height:100%;min-height:110px;max-height:240px;background:linear-gradient(180deg,#2a1408,#1a0a04);border-radius:6px;padding:10px 10px 14px;box-shadow:inset 0 2px 8px #000c,0 8px 20px #00000080;display:flex;gap:2px;justify-content:center}.key{position:relative;flex:1;border-radius:0 0 5px 5px;transition:transform .05s,background .1s,box-shadow .05s;cursor:pointer;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;padding-bottom:8px;font-size:10px;font-weight:600;user-select:none}.key.white{background:linear-gradient(180deg,#fdf8ee,#e8dcc0);color:#5a2a10;box-shadow:inset 0 -4px #c8b890,inset 0 0 0 1px #0003,0 2px #0000004d}.key.white.active{background:linear-gradient(180deg,#e8dcc0,#d4c4a0);box-shadow:inset 0 -2px #b8a880,inset 0 1px 3px #0003;transform:translateY(2px)}.key.black{position:absolute;top:10px;width:calc((100% - 20px) / 14 * .6);height:62%;background:linear-gradient(180deg,#2a1408,#0a0402);color:#d4a24a;border-radius:0 0 4px 4px;box-shadow:inset 0 -6px #000,inset 0 0 0 1px #000c,0 4px 6px #0009;z-index:2}.key.black.active{background:linear-gradient(180deg,#0a0402,#000);box-shadow:inset 0 -2px #000,inset 0 2px 4px #000000e6;transform:translateY(2px)}.key .label{font-size:9px;opacity:.7}.key .label-alt{font-size:9px;opacity:.45;margin-bottom:2px}.key.black .label,.key.black .label-alt{color:#d4a24a}.foot{flex:0 0 auto;height:10px;background:linear-gradient(180deg,#2a1408,#0a0402);border-radius:0 0 10px 10px;box-shadow:0 4px 10px #000000b3;margin:0 6%}.footer-links{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px;opacity:.5;display:flex;gap:8px;justify-content:center;pointer-events:none;z-index:10}.footer-links a{color:inherit;pointer-events:auto;text-decoration:none}.footer-links a:hover{opacity:.8}.sep{opacity:.4}.midi-pill{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:linear-gradient(180deg,#f5d98a1f,#b4782824);border:1px solid rgba(245,217,138,.25);color:#f0d58a;font-size:12px;font-weight:600;letter-spacing:.03em;white-space:nowrap;flex-shrink:0;transition:all .2s ease;cursor:pointer;font-family:inherit}.midi-pill:hover{background:linear-gradient(180deg,#f5d98a2e,#b4782833);border-color:#f5d98a66}.midi-pill svg{flex-shrink:0}.midi-pill[data-state=connected]{background:linear-gradient(180deg,#7acc7a33,#3c8c3c38);border-color:#7acc7a80;color:#9be89b;box-shadow:0 0 14px #7acc7a59;animation:midi-pulse 2.2s ease-in-out infinite}.midi-pill[data-state=waiting]{opacity:.85}.midi-pill[data-state=unsupported],.midi-pill[data-state=denied]{opacity:.5}@keyframes midi-pulse{0%,to{box-shadow:0 0 14px #7acc7a59}50%{box-shadow:0 0 22px #7acc7a8c}}.sustain-dot{padding:1px 6px;border-radius:8px;background:#f5d98a26;color:#f5d98a;font-weight:700;letter-spacing:.1em}.topbar{position:absolute;top:12px;right:12px;display:flex;gap:6px;z-index:20}.feature-strip{flex:0 0 auto;display:flex;gap:6px;overflow-x:auto;overflow-y:hidden;padding-right:640px;scrollbar-width:none;margin-bottom:2px}.feature-strip::-webkit-scrollbar{display:none}.feat-pill{flex-shrink:0;padding:5px 11px;font-size:11px;font-weight:600;color:#f5d98a;background:#f5d98a14;border:1px solid rgba(245,217,138,.18);border-radius:999px;white-space:nowrap;letter-spacing:.01em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}@media (max-width: 900px){.feature-strip{padding-right:480px}}@media (max-width: 700px){.feature-strip{padding-right:380px}.feat-pill{font-size:10px;padding:4px 9px}}@media (max-height: 500px){.feature-strip{display:none}}.icon-btn{width:36px;height:36px;border-radius:999px;background:#ffe6b414;color:#f5d98a;font-size:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid rgba(255,230,180,.15);transition:background .15s,transform .05s;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 10px}.icon-btn:hover{background:#ffe6b426}.icon-btn:active{transform:scale(.95)}.icon-btn#record-btn{width:auto;padding:0 12px;font-size:11px;font-weight:700;letter-spacing:.1em}.rec-dot{width:8px;height:8px;border-radius:50%;background:#c33;box-shadow:0 0 8px #c339}.icon-btn#record-btn.recording .rec-dot{animation:pulse 1s ease-in-out infinite}.icon-btn#record-btn.recording{background:#c333;color:#f99;border-color:#c336}@keyframes pulse{50%{opacity:.3;transform:scale(.7)}}body.keymap-open .harmonium{padding-right:calc(3vw + 340px);transition:padding .2s ease}@media (max-width: 700px){body.keymap-open .harmonium{padding-right:3vw}}.keymap-panel{position:fixed;top:60px;right:12px;bottom:20px;width:320px;max-width:90vw;background:#1a1008f2;border:1px solid rgba(245,217,138,.22);border-radius:12px;padding:18px 20px;overflow-y:auto;z-index:50;color:#e0d4bd;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 14px 40px #00000080;animation:slideIn .25s ease}@keyframes slideIn{0%{transform:translate(20px);opacity:0}to{transform:translate(0);opacity:1}}.keymap-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}.keymap-head h3{font-size:1rem;color:#f5d98a;font-weight:700;letter-spacing:.02em}.keymap-close{width:28px;height:28px;padding:0;font-size:12px;background:#f5d98a14;border-color:#f5d98a26}.keymap-section{margin-bottom:16px}.keymap-label{font-size:.7rem;font-weight:700;letter-spacing:.15em;color:#d4a24a;text-transform:uppercase;margin-bottom:8px}.keymap-row{display:flex;gap:3px;flex-wrap:wrap}.keymap-row kbd{display:inline-block;min-width:20px;padding:3px 6px;background:#f5d98a1a;border:1px solid rgba(245,217,138,.25);border-bottom-width:2px;border-radius:3px;font-family:SF Mono,Menlo,monospace;font-size:.72rem;color:#f5d98a;text-align:center}.keymap-grid{display:grid;grid-template-columns:auto 1fr;gap:8px 12px;font-size:.82rem;align-items:center}.keymap-grid kbd{display:inline-block;padding:2px 6px;background:#f5d98a1a;border:1px solid rgba(245,217,138,.25);border-bottom-width:2px;border-radius:3px;font-family:SF Mono,Menlo,monospace;font-size:.72rem;color:#f5d98a;margin-right:2px}.keymap-tips ul{list-style:none;padding:0;font-size:.82rem;line-height:1.5}.keymap-tips li{padding-left:14px;position:relative;margin-bottom:5px;color:#c8baa0}.keymap-tips li:before{content:"•";position:absolute;left:0;color:#d4a24a}.keymap-link{display:block;margin-top:10px;padding:10px 12px;background:linear-gradient(180deg,#d4a24a,#8f5a1a);color:#1a0a00;text-align:center;font-weight:700;font-size:.88rem;border-radius:8px;text-decoration:none}.icon-btn.active{background:#f5d98a40;border-color:#f5d98a80;color:#fff5e0}@media (max-width: 700px){.keymap-panel{width:90vw;top:70px}}.login-btn{width:auto;padding:0 14px;font-size:12px;font-weight:600;white-space:nowrap;flex-shrink:0}.login-btn svg{margin-right:4px;flex-shrink:0}.login-btn span{white-space:nowrap}.user-menu{position:relative}.user-avatar{width:36px;height:36px;overflow:hidden;padding:0}.user-avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}.user-avatar #user-avatar-fallback{font-weight:700;font-size:14px;color:#f5d98a}.user-dropdown{position:absolute;top:44px;right:0;min-width:220px;background:#1a1008fa;border:1px solid rgba(245,217,138,.2);border-radius:10px;padding:6px;box-shadow:0 10px 30px #00000080;backdrop-filter:blur(10px)}.user-info{padding:10px 12px 12px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid rgba(245,217,138,.1);margin-bottom:4px}.user-info #user-name{font-weight:600;font-size:.9rem;color:#f5d98a}.user-info #user-email{font-size:.75rem;opacity:.7;color:#c8baa0}.user-item{display:block;width:100%;padding:9px 12px;text-align:left;background:transparent;border-radius:6px;color:#f5d98a;font-size:.88rem;transition:background .1s}.user-item:hover{background:#f5d98a1a}.recordings-list{max-height:60vh;overflow-y:auto;display:flex;flex-direction:column;gap:8px;margin-bottom:10px}.recording-row{display:flex;align-items:center;gap:10px;padding:10px 12px;background:#f5d98a0a;border:1px solid rgba(245,217,138,.12);border-radius:8px}.recording-row .rec-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.88rem;color:#f0e6d2}.recording-row audio{height:32px;flex-shrink:0}.recording-row button.rec-del{background:#cc333326;color:#f99;border-radius:6px;padding:4px 10px;font-size:.8rem;border:1px solid rgba(204,51,51,.3)}.recording-empty{padding:30px;text-align:center;color:#c8baa0;font-size:.9rem}.share-cloud-note{margin-top:12px;font-size:.85rem;color:#e0d4bd;word-break:break-all;line-height:1.5}.share-cloud-note a{color:#f5d98a;text-decoration:underline}.share-cloud-note strong{color:#f5d98a}.ad-slot{position:fixed;bottom:20px;left:50%;transform:translate(-50%);min-height:0;pointer-events:auto;z-index:5}.modal{position:fixed;inset:0;background:#000000bf;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;animation:fade .2s ease}@keyframes fade{0%{opacity:0}to{opacity:1}}.modal-inner{background:linear-gradient(180deg,#2a1408,#1a0a04);border:1px solid rgba(245,217,138,.2);border-radius:12px;padding:28px;max-width:520px;width:100%;max-height:85vh;overflow-y:auto;box-shadow:0 20px 60px #0009;color:#f0e6d2}.modal-inner h2{color:#f5d98a;margin-bottom:16px;font-size:1.4rem}.modal-inner p{color:#e0d4bd;line-height:1.55;margin-bottom:12px;font-size:.92rem}.tut-grid{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}.tut-row{display:flex;align-items:center;gap:6px;font-size:.85rem;flex-wrap:wrap}.tut-row span{margin-left:8px;color:#e0d4bd}.tut-row kbd{display:inline-block;min-width:22px;padding:3px 7px;background:#f5d98a1a;border:1px solid rgba(245,217,138,.25);border-bottom-width:2px;border-radius:4px;font-family:SF Mono,Menlo,monospace;font-size:.75rem;color:#f5d98a;text-align:center}.tut-note{font-size:.85rem;color:#c8baa0;margin:16px 0}.about-list{list-style:none;margin:12px 0;font-size:.88rem;line-height:1.65;color:#e0d4bd}.about-list li{padding:8px 0;border-bottom:1px solid rgba(245,217,138,.1);color:#e0d4bd}.about-list li strong{color:#f5d98a}.about-list a{color:#d4a24a}.about-kbd{font-size:.88rem;margin-top:14px;color:#c8baa0}.about-kbd a{color:#d4a24a}.toast-top{position:fixed;top:0;left:50%;transform:translate(-50%,-110%);background:#1a1008f2;color:#f5d98a;padding:14px 24px;border-radius:0 0 14px 14px;font-size:.92rem;font-weight:600;letter-spacing:.02em;z-index:100;box-shadow:0 10px 40px #00000059,0 2px #f5d98a26 inset;display:flex;align-items:center;gap:10px;min-width:240px;max-width:90vw;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(245,217,138,.2);border-top:none;transition:transform .38s cubic-bezier(.2,.9,.3,1.25),opacity .25s ease;opacity:0;pointer-events:none}.toast-top.show{transform:translate(-50%);opacity:1;pointer-events:auto}.toast-top[data-variant=rec]{color:#f99;border-color:#cc333380;background:#3c0c0cf2}.toast-top[data-variant=rec] .toast-icon{color:#f44;animation:pulse 1.1s ease-in-out infinite}.toast-top[data-variant=success]{color:#c0f0c0;border-color:#7acc7a80;background:#0e2c16f2}.toast-top[data-variant=success] .toast-icon{color:#7acc7a}.toast-top .toast-icon{width:10px;height:10px;border-radius:50%;background:currentColor;flex:0 0 auto}.key.out-of-scale.white{filter:brightness(.72) saturate(.6)}.key.out-of-scale.black{filter:brightness(.5)}.sa-marker{position:absolute;top:6px;left:50%;transform:translate(-50%);color:#c32;font-size:10px;pointer-events:none}.key.white.sa{background:linear-gradient(180deg,#ffeec2,#f4d68c)}.key.white.pa{background:linear-gradient(180deg,#fff2d8,#ead9a8)}.key.black.sa,.key.black.pa{box-shadow:inset 0 -6px #000,inset 0 0 0 1px #c32,0 4px 6px #0009}.key.midi-active{outline:2px solid #7acc7a;outline-offset:-2px;box-shadow:0 0 18px #7acc7a80!important}.key.preset-active{outline:2px solid #d4a24a;outline-offset:-2px;box-shadow:0 0 18px #d4a24a99!important}.slider{-webkit-appearance:none;appearance:none;width:80px;height:6px;border-radius:3px;background:linear-gradient(90deg,#8f5a1a,#f5d98a26);outline:none}.slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,#f5d98a,#8f5a1a);cursor:pointer;box-shadow:0 2px 4px #00000080}.slider::-moz-range-thumb{width:16px;height:16px;border-radius:50%;border:none;background:linear-gradient(180deg,#f5d98a,#8f5a1a);cursor:pointer}.select-wide{min-width:120px}#song-sel{max-width:180px}.share-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.share-row a.knob-btn{display:inline-flex;align-items:center;height:36px;padding:0 14px;text-decoration:none;background:#f5d98a1a;border:1px solid rgba(245,217,138,.25);color:#f5d98a}.toast{position:fixed;bottom:60px;left:50%;transform:translate(-50%);background:#7acc7aeb;color:#0a2a0a;padding:8px 18px;border-radius:999px;font-size:.85rem;font-weight:600;z-index:60;box-shadow:0 4px 16px #7acc7a59;animation:toastIn .2s ease}@keyframes toastIn{0%{transform:translate(-50%,10px);opacity:0}to{transform:translate(-50%);opacity:1}}html,body{height:auto;min-height:100%;overflow-y:auto;overflow-x:hidden}.seo-content{position:relative;padding:60px 24px 100px;max-width:760px;margin:0 auto;color:#3a2810;font-size:1.02rem;line-height:1.7}.seo-content section{margin-bottom:40px}.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin-top:26px}.feature-card{padding:18px 20px;background:#8a4a1a0d;border:1px solid rgba(138,74,26,.15);border-radius:10px}.feature-card .feature-icon{font-size:1.6rem;margin-bottom:6px}.feature-card h3{font-size:.98rem;color:#5a2a10;margin-bottom:6px;font-weight:700}.feature-card p{font-size:.85rem;line-height:1.55;color:#4a3520;margin:0}body.theme-dark .feature-card{background:#f5d98a0a;border-color:#f5d98a1f}body.theme-dark .feature-card h3{color:#f5d98a}body.theme-dark .feature-card p{color:#c8baa0}.seo-content h1,.seo-content h2{color:#5a2a10;font-size:1.55rem;margin-bottom:14px;letter-spacing:.01em}.seo-content h1{font-size:1.9rem}.seo-content p,.seo-content li{color:#4a3520}.seo-content p{margin-bottom:12px}.seo-content ul,.seo-content ol{padding-left:22px;margin-bottom:12px}.seo-content li{margin-bottom:6px}.seo-content kbd{display:inline-block;padding:2px 7px;background:#8a4a1a14;border:1px solid rgba(138,74,26,.25);border-bottom-width:2px;border-radius:3px;font-family:SF Mono,Menlo,monospace;font-size:.8rem;color:#5a2a10}.seo-faq details{padding:12px 16px;background:#8a4a1a0a;border:1px solid rgba(138,74,26,.15);border-radius:6px;margin-bottom:8px}.seo-faq summary{cursor:pointer;font-weight:600;color:#5a2a10;font-size:.95rem}.seo-faq details[open] summary{margin-bottom:10px}.seo-content a{color:#8a4a1a;text-decoration:underline}.seo-content a:hover{color:#5a2a10}.page-credit{text-align:center;padding:24px 20px 40px;font-size:.8rem;color:#5a2a108c;border-top:1px solid rgba(138,74,26,.12);margin-top:40px}.site-footer{text-align:center;padding:28px 20px 44px;font-size:.85rem;color:#5a2a1099;border-top:1px solid rgba(138,74,26,.1)}.site-footer a{color:#5a2a10bf;text-decoration:none;margin:0 6px}.site-footer a:hover{color:#5a2a10;text-decoration:underline}.harmonium{background:radial-gradient(ellipse at top,#b87a36,#7a4a1e 55%,#4a280e)}.front-panel{background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 2px,transparent 2px 6px),linear-gradient(180deg,#a8661c,#6e3a12)}.keyboard{background:linear-gradient(180deg,#5a3a1a,#3a1f0a)}.bellows{background:linear-gradient(180deg,#8a4a1a,#5a2a10)}body.theme-dark{background:linear-gradient(180deg,#1a1008,#0a0503);color:#f0e6d2}body.theme-dark .harmonium{background:radial-gradient(ellipse at top,#2a1a0a,#120806 60%,#0a0503)}body.theme-dark .front-panel{background-image:repeating-linear-gradient(90deg,rgba(0,0,0,.03) 0 2px,transparent 2px 6px),linear-gradient(180deg,#6b3a1c,#4a240f)}body.theme-dark .keyboard{background:linear-gradient(180deg,#2a1408,#1a0a04)}body.theme-dark .bellows{background:linear-gradient(180deg,#5a2a10,#3a1808)}body.theme-dark .seo-content{color:#e0d4bd}body.theme-dark .seo-content h1,body.theme-dark .seo-content h2{color:#f5d98a}body.theme-dark .seo-content p,body.theme-dark .seo-content li{color:#c8baa0}body.theme-dark .seo-content a{color:#d4a24a}body.theme-dark .seo-content kbd{background:#f5d98a1f;border-color:#f5d98a40;color:#f5d98a}body.theme-dark .seo-faq details{background:#f5d98a0a;border-color:#f5d98a1a}body.theme-dark .seo-faq summary{color:#f5d98a}body.theme-dark .page-credit{color:#f5d98a66;border-top-color:#f5d98a1a}@media (max-height: 500px){.harmonium{padding:1vh 2vw;gap:1vh}.bellows{height:60px}.front-panel{padding:6px 12px;gap:12px}.brand{display:none}.key.white{padding-bottom:4px}}@media (max-width: 700px){.brand{display:none}.controls{gap:10px}.control label{font-size:9px}}