@charset "UTF-8";#online-piano-wrapper{font-size:4.4444vw;--zoom: 1;--wkw: calc(46 * 1em / 19 * var(--zoom));--bkw: calc(28 * 1em / 19 * var(--zoom));--wkh: calc(190 * 1em / 19 * var(--zoom));--bkh: calc(120 * 1em / 19 * var(--zoom));--bg: #14161b;--panel: #1c1f27;--accent: #4da3ff;--accent-rgb: 77, 163, 255;--text: #e7ebf2;--muted: #8b93a3;display:flex;flex-direction:column;align-items:center;gap:calc(14 * 1em / 19);width:100%;max-width:calc(1200 * 1em / 19);margin:0 auto;padding:calc(16 * 1em / 19) calc(10 * 1em / 19) calc(24 * 1em / 19);box-sizing:border-box;color:var(--text);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}#online-piano-wrapper,#online-piano-wrapper *{box-sizing:border-box}@media (min-width: 430px){#online-piano-wrapper{font-size:19px}}.op-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:calc(10 * 1em / 19);width:100%}.op-title{margin:0;font-size:calc(22 * 1em / 19);font-weight:700;letter-spacing:.01em}.op-controls{display:flex;align-items:center;flex-wrap:wrap;gap:calc(10 * 1em / 19)}.op-btn{display:inline-flex;align-items:center;justify-content:center;gap:calc(6 * 1em / 19);min-width:calc(40 * 1em / 19);height:calc(40 * 1em / 19);padding:0 calc(12 * 1em / 19);border:1px solid rgba(255,255,255,.12);border-radius:calc(10 * 1em / 19);background:var(--panel);color:var(--text);font-size:calc(14 * 1em / 19);font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,transform .05s}.op-btn:hover{border-color:rgba(var(--accent-rgb),.6)}.op-btn:active{transform:translateY(1px)}.op-btn svg{width:calc(20 * 1em / 19);height:calc(20 * 1em / 19)}.op-octave,.op-zoom{display:inline-flex;align-items:center;gap:calc(4 * 1em / 19)}.op-oct-btn{padding:0}.op-oct-label{min-width:calc(40 * 1em / 19);text-align:center;font-size:calc(14 * 1em / 19);font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.op-toggle.is-on{background:rgba(var(--accent-rgb),.18);border-color:var(--accent);color:var(--accent);box-shadow:0 0 calc(14 * 1em / 19) rgba(var(--accent-rgb),.35)}.op-volume{display:inline-flex;align-items:center;gap:calc(8 * 1em / 19);height:calc(40 * 1em / 19);padding:0 calc(12 * 1em / 19);border:1px solid rgba(255,255,255,.12);border-radius:calc(10 * 1em / 19);background:var(--panel)}.op-vol-icon{width:calc(18 * 1em / 19);height:calc(18 * 1em / 19);color:var(--muted);flex:none}.op-volume input[type=range]{width:calc(96 * 1em / 19);accent-color:var(--accent)}.op-midi{display:inline-flex;align-items:center;gap:calc(6 * 1em / 19);font-size:calc(13 * 1em / 19);font-weight:600;color:var(--accent)}.op-midi-dot{width:calc(8 * 1em / 19);height:calc(8 * 1em / 19);border-radius:50%;background:var(--accent);box-shadow:0 0 calc(8 * 1em / 19) var(--accent)}.op-inst{display:flex;align-items:center;gap:calc(6 * 1em / 19);width:100%;overflow-x:auto;padding-bottom:calc(2 * 1em / 19);scrollbar-width:none;-ms-overflow-style:none}.op-inst::-webkit-scrollbar{display:none}.op-chip{flex:none;height:calc(34 * 1em / 19);padding:0 calc(14 * 1em / 19);border:1px solid rgba(255,255,255,.12);border-radius:calc(999 * 1em / 19);background:var(--panel);color:var(--muted);font-size:calc(13 * 1em / 19);font-weight:600;white-space:nowrap;cursor:pointer;transition:background .15s,border-color .15s,color .15s,box-shadow .15s}.op-chip:hover{border-color:rgba(var(--accent-rgb),.5);color:var(--text)}.op-chip.is-on{background:rgba(var(--accent-rgb),.18);border-color:var(--accent);color:var(--accent);box-shadow:0 0 calc(12 * 1em / 19) rgba(var(--accent-rgb),.3)}.op-stage{position:relative;width:100%}.op-kbd-scroll{width:100%;overflow-x:auto;overflow-y:hidden;border-radius:calc(10 * 1em / 19);background:linear-gradient(180deg,#0e1014,#1a1d24);padding:calc(10 * 1em / 19) 0 calc(12 * 1em / 19);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 calc(3 * 1em / 19) 0 rgba(var(--accent-rgb),.5);scrollbar-width:none;-ms-overflow-style:none}.op-kbd-scroll::-webkit-scrollbar{display:none}.op-kbd{position:relative;height:var(--wkh);margin:0 auto}.op-key{position:absolute;top:0;box-sizing:border-box;cursor:pointer;touch-action:none}.op-key--white{width:var(--wkw);height:var(--wkh);background:linear-gradient(180deg,#fdfdfd,#eef0f3 92%,#d6dae1);border:1px solid #b9bfc9;border-radius:0 0 calc(6 * 1em / 19) calc(6 * 1em / 19);box-shadow:inset 0 calc(-6 * 1em / 19) calc(8 * 1em / 19) #0000001f;z-index:1}.op-key--black{width:var(--bkw);height:var(--bkh);background:linear-gradient(180deg,#2a2d34,#15171c);border:1px solid #000;border-radius:0 0 calc(5 * 1em / 19) calc(5 * 1em / 19);box-shadow:inset 0 calc(-4 * 1em / 19) calc(6 * 1em / 19) #ffffff1f,0 calc(3 * 1em / 19) calc(5 * 1em / 19) #00000080;z-index:2}.op-key--white.is-active{background:linear-gradient(180deg,#d7ecff,#aed4ff);box-shadow:inset 0 0 calc(12 * 1em / 19) rgba(var(--accent-rgb),.55)}.op-key--black.is-active{background:linear-gradient(180deg,#5a7fb5,#2f4a73);box-shadow:inset 0 0 calc(10 * 1em / 19) rgba(var(--accent-rgb),.8)}.op-key-label{position:absolute;bottom:calc(6 * 1em / 19);left:0;right:0;text-align:center;font-size:calc(9 * 1em / 19);font-weight:600;color:#9aa1ad;pointer-events:none}.op-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;background:#0a0c10c7;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:calc(10 * 1em / 19);transition:opacity .25s}.op-overlay.is-hidden{opacity:0;pointer-events:none}.op-overlay-btn{display:inline-flex;align-items:center;gap:calc(10 * 1em / 19);padding:calc(12 * 1em / 19) calc(22 * 1em / 19);border:1px solid rgba(var(--accent-rgb),.5);border-radius:calc(999 * 1em / 19);background:rgba(var(--accent-rgb),.12);color:var(--text);font-size:calc(16 * 1em / 19);font-weight:700;cursor:progress}.op-overlay.is-ready .op-overlay-btn{cursor:pointer;box-shadow:0 0 calc(24 * 1em / 19) rgba(var(--accent-rgb),.4)}.op-overlay.is-ready .op-overlay-btn:hover{background:rgba(var(--accent-rgb),.22)}.op-overlay-icon{display:none;width:calc(20 * 1em / 19);height:calc(20 * 1em / 19);color:var(--accent)}.op-overlay-icon svg{width:100%;height:100%}.op-overlay.is-ready .op-overlay-icon{display:inline-flex}.op-nav{position:relative;width:100%;height:calc(24 * 1em / 19);margin-top:calc(8 * 1em / 19);background:#ffffff12;border:1px solid rgba(255,255,255,.1);border-radius:calc(999 * 1em / 19);touch-action:none;cursor:pointer}.op-nav-thumb{position:absolute;top:0;bottom:0;left:0;pointer-events:none;min-width:calc(44 * 1em / 19);background:linear-gradient(180deg,rgba(var(--accent-rgb),.65),rgba(var(--accent-rgb),.35));border:1px solid rgba(var(--accent-rgb),.7);border-radius:calc(999 * 1em / 19);box-shadow:0 0 calc(10 * 1em / 19) rgba(var(--accent-rgb),.3)}.op-nav:active .op-nav-thumb{background:linear-gradient(180deg,rgba(var(--accent-rgb),.85),rgba(var(--accent-rgb),.5))}.op-pedal{display:flex;align-items:center;justify-content:center;gap:calc(8 * 1em / 19);width:100%;height:calc(50 * 1em / 19);margin-top:calc(8 * 1em / 19);border:1px solid rgba(255,255,255,.12);border-radius:calc(12 * 1em / 19);background:var(--panel);color:var(--muted);font-size:calc(14 * 1em / 19);font-weight:700;letter-spacing:.02em;touch-action:none;cursor:pointer;transition:background .1s,color .1s,border-color .1s,box-shadow .1s}.op-pedal svg{width:calc(20 * 1em / 19);height:calc(20 * 1em / 19)}.op-pedal.is-down{background:rgba(var(--accent-rgb),.2);border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 calc(18 * 1em / 19) rgba(var(--accent-rgb),.4)}.op-hint{margin:0;font-size:calc(12 * 1em / 19);color:var(--muted);text-align:center;line-height:1.5}#online-piano-wrapper.pedal-down .op-kbd-scroll{box-shadow:inset 0 calc(3 * 1em / 19) 0 rgba(var(--accent-rgb),1)}@media (max-width: 640px){.op-hint{display:none}}@media (orientation: portrait) and (pointer: coarse){#online-piano-wrapper{position:fixed;top:0;left:0;width:100vh;width:100dvh;height:100vw;height:100dvw;max-width:none;margin:0;justify-content:center;background:var(--bg);overflow:hidden;z-index:1;transform-origin:top left;transform:rotate(90deg) translateY(-100vw);transform:rotate(90deg) translateY(-100dvw)}}