:root{--ink: #0a0908;--ink-2: #141110;--panel: #191512;--panel-2: #221c17;--line: rgba(216, 162, 74, .18);--line-strong: rgba(216, 162, 74, .38);--brass: #d8a24a;--brass-soft: #e8c48a;--brass-deep: #9c6c22;--ivory: #f6f1e6;--ivory-dim: #ded7c8;--text: #efe7da;--text-dim: #a3968a;--danger: #d4574b;--pkey-w: 34px;--keybed-h: clamp(118px, 20vh, 190px);--radius: 12px;font-family:Helvetica Neue,Hiragino Kaku Gothic ProN,Yu Gothic,Noto Sans JP,sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;height:100%;background:var(--ink);color:var(--text);overscroll-behavior:none;-webkit-tap-highlight-color:transparent}#app{height:100%}.piano-app{display:flex;flex-direction:column;height:100dvh;min-height:100%;background:radial-gradient(120% 80% at 15% -10%,rgba(216,162,74,.14),transparent 60%),radial-gradient(90% 70% at 100% 0%,rgba(120,80,40,.16),transparent 55%),var(--ink)}.topbar{display:flex;align-items:center;gap:.85rem;padding:.55rem 1rem;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#221c17f2,#0c0a09f2);backdrop-filter:blur(6px);flex:none}.brand{display:flex;align-items:center;gap:.6rem;min-width:0}.brand-mark{width:30px;height:30px;border-radius:8px;flex:none;background:linear-gradient(180deg,#f7f2e7 0 58%,#14100d 58% 100%);box-shadow:0 0 0 1px var(--line-strong),0 4px 10px #00000080;position:relative;overflow:hidden}.brand-mark:after{content:"";position:absolute;left:6px;right:6px;top:6px;height:10px;background:repeating-linear-gradient(90deg,#1a1512 0 2px,transparent 2px 6px)}.brand-text{display:flex;flex-direction:column;line-height:1.15;min-width:0;overflow:hidden}.brand-text strong{font-size:.98rem;letter-spacing:.04em}.brand-text small{font-size:.68rem;color:var(--text-dim);white-space:nowrap}.preset-wrap{flex:none}.preset-select{appearance:none;max-width:min(46vw,240px);text-overflow:ellipsis;background:var(--panel-2);color:var(--text);border:1px solid var(--line-strong);border-radius:999px;padding:.4rem 2rem .4rem .9rem;font-size:.85rem;cursor:pointer;background-image:linear-gradient(45deg,transparent 50%,var(--brass) 50%),linear-gradient(135deg,var(--brass) 50%,transparent 50%);background-position:calc(100% - 16px) 52%,calc(100% - 11px) 52%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}.status{flex:1;min-width:0;font-size:.74rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.header-actions{display:flex;gap:.4rem;flex:none}.panic-btn{display:inline-flex;align-items:center;gap:.4rem}.panic-btn svg{width:16px;height:16px;display:block;flex:none}.panic-btn:hover{color:var(--brass-soft)}.main-area{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) 372px}.stage{position:relative;min-height:0;overflow:hidden;border-right:1px solid var(--line)}.string-canvas{display:block;width:100%;height:100%}.stage-overlay{position:absolute;left:0;right:0;bottom:0;padding:.8rem 1rem;display:flex;align-items:center;gap:.9rem;background:linear-gradient(0deg,rgba(8,6,5,.82),transparent);pointer-events:none}.now-playing{flex:1;min-width:0;font-size:.85rem;color:var(--brass-soft);letter-spacing:.03em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.now-playing.flash{animation:fadeUp .45s ease}@keyframes fadeUp{0%{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}.transport-readout{font-variant-numeric:tabular-nums;font-size:.8rem;color:var(--text-dim);flex:none}.meter{width:110px;height:5px;border-radius:999px;background:#ffffff1a;overflow:hidden;flex:none}.meter-fill{width:100%;height:100%;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,#7fbf7f,var(--brass) 70%,var(--danger));transition:transform .08s linear}.panel{display:flex;flex-direction:column;min-height:0;background:linear-gradient(180deg,var(--panel),var(--ink-2))}.tabs{display:flex;border-bottom:1px solid var(--line);flex:none}.tab{flex:1;padding:.7rem .2rem;background:none;border:none;border-bottom:2px solid transparent;color:var(--text-dim);font-size:.82rem;font-family:inherit;cursor:pointer;transition:color .15s,border-color .15s,background .15s}.tab:hover{color:var(--text);background:#d8a24a0f}.tab.active{color:var(--brass);border-bottom-color:var(--brass)}.panel-body{flex:1;min-height:0;overflow-y:auto;padding:.9rem 1rem 2rem;scrollbar-width:thin}.panel-title{font-size:.74rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:1.2rem 0 .6rem}.panel-title:first-child{margin-top:.2rem}.panel-note{font-size:.72rem;line-height:1.6;color:var(--text-dim);margin:.7rem 0 0}.ctl-grid{display:flex;flex-direction:column;gap:.85rem}.ctl{display:flex;flex-direction:column;gap:.32rem}.ctl-head{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}.ctl-label{font-size:.8rem;color:var(--text)}.ctl-value{font-size:.75rem;color:var(--brass-soft);font-variant-numeric:tabular-nums}.ctl-hint{font-size:.68rem;color:var(--text-dim);line-height:1.45}.ctl-range{--fill: 50%;appearance:none;width:100%;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--brass) var(--fill),rgba(255,255,255,.12) var(--fill));outline:none;cursor:pointer}.ctl-range::-webkit-slider-thumb{appearance:none;width:16px;height:16px;border-radius:50%;background:linear-gradient(180deg,#fff6e2,var(--brass));border:1px solid rgba(0,0,0,.4);box-shadow:0 2px 5px #00000080}.ctl-range::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:linear-gradient(180deg,#fff6e2,var(--brass));border:1px solid rgba(0,0,0,.4)}.segmented{display:flex;flex-wrap:wrap;gap:4px;background:#0000004d;border:1px solid var(--line);border-radius:10px;padding:4px}.seg-btn{flex:1 1 auto;min-width:62px;padding:.42rem .5rem;border:none;border-radius:7px;background:transparent;color:var(--text-dim);font-size:.75rem;font-family:inherit;cursor:pointer;transition:background .15s,color .15s}.seg-btn:hover{color:var(--text)}.seg-btn.active{background:linear-gradient(180deg,#d8a24ae6,#9c6c22e6);color:#1a1206;font-weight:600}.btn{border:1px solid var(--line-strong);background:linear-gradient(180deg,var(--panel-2),#15110e);color:var(--text);border-radius:9px;padding:.5rem .9rem;font-size:.8rem;font-family:inherit;cursor:pointer;transition:transform .08s,background .15s,border-color .15s}.btn:hover{border-color:var(--brass)}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.5;cursor:default}.btn.primary{background:linear-gradient(180deg,var(--brass),var(--brass-deep));color:#171004;font-weight:600;border-color:transparent}.btn.danger{background:linear-gradient(180deg,#d4574b,#8e2f27);color:#fff;border-color:transparent}.btn.ghost{background:#ffffff0a}.btn.small{padding:.32rem .6rem;font-size:.72rem}.btn.round{width:34px;padding:.5rem 0;text-align:center}.button-row{display:flex;flex-wrap:wrap;gap:.5rem}.switch-row{position:relative;display:flex;align-items:center;gap:.7rem;cursor:pointer;padding:.5rem 0}.switch-texts{flex:1;display:flex;flex-direction:column;gap:.15rem}.switch-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}.switch-track{width:42px;height:24px;border-radius:999px;background:#ffffff24;position:relative;flex:none;transition:background .18s}.switch-track:after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--ivory-dim);transition:transform .18s,background .18s}.switch-input:checked+.switch-track{background:var(--brass-deep)}.switch-input:checked+.switch-track:after{transform:translate(18px);background:#fff6e2}.preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.5rem}.preset-card{display:flex;flex-direction:column;gap:.22rem;text-align:left;padding:.6rem .7rem;border-radius:10px;border:1px solid var(--line);background:#ffffff08;color:var(--text);font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .08s}.preset-card strong{font-size:.82rem}.preset-card span{font-size:.68rem;color:var(--text-dim);line-height:1.45}.preset-card:hover{border-color:var(--brass)}.preset-card:active{transform:translateY(1px)}.preset-card.active{border-color:var(--brass);background:linear-gradient(180deg,#d8a24a29,#d8a24a0a)}.demo-list{display:flex;flex-direction:column;gap:.5rem}.demo-card{display:flex;align-items:center;gap:.7rem;padding:.65rem .75rem;border:1px solid var(--line);border-radius:10px;background:#ffffff08}.demo-texts{flex:1;display:flex;flex-direction:column;gap:.18rem;min-width:0}.demo-texts strong{font-size:.83rem}.demo-texts span{font-size:.68rem;color:var(--text-dim)}.midi-box{display:flex;flex-direction:column;gap:.5rem;align-items:flex-start}.keyboard-area{flex:none;border-top:1px solid var(--line);background:linear-gradient(180deg,#17120e,#0a0807);padding-bottom:env(safe-area-inset-bottom)}.pedal-bar{display:flex;align-items:center;gap:.45rem;padding:.45rem .8rem;border-bottom:1px solid rgba(216,162,74,.1)}.pedal-bar .spacer{flex:1}.octave-label{font-size:.72rem;color:var(--text-dim);white-space:nowrap;font-variant-numeric:tabular-nums}.btn.pedal{background:linear-gradient(180deg,#2a231c,#14100d);border-color:#d8a24a40;font-size:.74rem;padding:.42rem .7rem}.btn.pedal.wide{min-width:148px}.btn.pedal.active{background:linear-gradient(180deg,var(--brass),var(--brass-deep));color:#171004;font-weight:600;box-shadow:0 0 14px #d8a24a59}.keybed-scroll{overflow-x:auto;overflow-y:hidden;padding:0 8px 10px;scrollbar-width:thin}.keybed{position:relative;height:var(--keybed-h);width:calc(var(--white-count, 52) * var(--pkey-w));margin:0 auto;touch-action:none;padding-top:6px;background:linear-gradient(180deg,#6d1f2b 0 6px,transparent 6px);border-radius:4px}.key-layer{position:absolute;inset:6px 0 0}.black-layer{pointer-events:none}.black-layer .pkey{pointer-events:auto}.pkey{position:absolute;top:0;user-select:none;-webkit-user-select:none}.pkey.white{width:var(--pkey-w);height:100%;border-radius:0 0 5px 5px;background:linear-gradient(180deg,#fffdf7 0%,var(--ivory) 72%,#ded5c2 100%);border-left:1px solid rgba(0,0,0,.32);border-bottom:3px solid #b9ae99;box-shadow:inset -2px 0 3px #00000017;transition:background .05s,transform .05s}.pkey.white.down{background:linear-gradient(180deg,rgba(216,162,74,calc(.22 * var(--hit, .5))),transparent 45%),linear-gradient(180deg,#f3ead6,#e6dcc6 70%,#cdc2ab);border-bottom-width:1px;transform:translateY(2px)}.pkey.black{width:calc(var(--pkey-w) * .64);height:62%;border-radius:0 0 4px 4px;background:linear-gradient(180deg,#3b3530,#14110f 62%,#000);border:1px solid #000;box-shadow:0 3px 5px #0000008c,inset 0 -3px 4px #ffffff14;z-index:2;transition:background .05s,transform .05s,height .05s}.pkey.black.down{background:linear-gradient(180deg,rgba(216,162,74,calc(.4 * var(--hit, .5))),transparent 55%),linear-gradient(180deg,#2a2521,#0d0b0a 70%,#000);transform:translateY(2px);box-shadow:0 1px 3px #0009}.pkey-label{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:.62rem;color:#8d8272;pointer-events:none}.help-modal{position:fixed;inset:0;background:#040302b8;display:flex;align-items:center;justify-content:center;padding:1rem;z-index:50;backdrop-filter:blur(3px)}.help-card{max-width:620px;max-height:82vh;overflow-y:auto;background:linear-gradient(180deg,var(--panel-2),var(--ink-2));border:1px solid var(--line-strong);border-radius:var(--radius);padding:1.4rem 1.5rem;box-shadow:0 24px 60px #0009}.help-card h2{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin:1.1rem 0 .5rem}.help-card h2:first-child{margin-top:0}.help-card ul{margin:0;padding-left:1.1rem}.help-card li,.help-card p{font-size:.8rem;line-height:1.75;color:var(--text)}.help-card li{margin-bottom:.35rem}.help-card .help-free{color:var(--brass-soft);font-weight:600}.help-card .btn{margin-top:1rem}@media (max-width: 1000px){.main-area{grid-template-columns:minmax(0,1fr) 320px}}@media (max-width: 820px){.main-area{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(96px,20vh) minmax(0,1fr)}.stage{border-right:none;border-bottom:1px solid var(--line)}.brand-text small,.status{display:none}:root{--keybed-h: clamp(104px, 17vh, 150px)}}@media (max-width: 560px){.topbar{padding:.45rem .6rem;gap:.5rem}.brand-text,.octave-btn{display:none}.panic-btn{padding:.45rem .55rem}.panic-btn .btn-text{display:none}.btn.pedal{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panel-body{padding:.8rem .75rem 1.6rem}.btn.pedal.wide{min-width:0;flex:1}.pedal-bar{gap:.35rem;padding:.4rem .5rem}.pedal-bar .spacer,.octave-label{display:none}}@media (orientation: landscape) and (max-height: 600px){:root{--keybed-h: clamp(74px, 26vh, 132px)}.main-area{grid-template-columns:minmax(0,1fr) clamp(230px,38vw,380px);grid-template-rows:minmax(0,1fr)}.stage{border-right:1px solid var(--line);border-bottom:none}.topbar{padding:.3rem .7rem}.brand-mark{width:26px;height:26px}.brand-text small,.status{display:none}.tab{padding:.45rem .2rem;font-size:.78rem}.panel-body{padding:.6rem .7rem 1.4rem}.panel-title{margin:.9rem 0 .45rem}.ctl-grid{gap:.7rem}.stage-overlay{padding:.5rem .7rem}.pedal-bar{padding:.3rem .5rem}.keybed-scroll{padding-bottom:6px}}@media (orientation: landscape) and (max-height: 380px){.stage{display:none}.main-area{grid-template-columns:minmax(0,1fr)}:root{--keybed-h: clamp(68px, 24vh, 100px)}}.help-card .help-small{font-size:.72rem;color:var(--text-dim)}.help-card a{color:var(--brass-soft)}.status.alert{position:fixed;top:0;left:0;right:0;z-index:60;display:block;padding:.5rem .75rem;background:#14100cf5;border-bottom:1px solid #e8c98a;color:#e8c98a;font-size:.8rem;font-weight:600;line-height:1.4;text-align:center;white-space:normal;overflow:visible;text-overflow:clip}