#piano-stage{color:#f8f6f2;background:#101012;width:100%;min-height:100dvh}#piano-stage button,#piano-stage a,#piano-stage input{touch-action:manipulation}.piano-room-shell{background:#101012;grid-template-rows:minmax(300px,1fr) 88px 280px 34px;min-height:calc(100dvh - 60px);display:grid;overflow:hidden}.piano-atmosphere{background:#151518;border-bottom:1px solid #303034;min-height:300px;position:relative;overflow:hidden}#piano-visual{width:100%;height:100%;position:absolute;inset:0}.staff-labels{color:#5e5d62;flex-direction:column;justify-content:space-between;font:7px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;display:flex;position:absolute;top:25px;bottom:25px;right:24px}.piano-heading{z-index:2;position:absolute;top:38px;left:34px}.room-kicker,.control-label,.piano-performance,.begin-piano,.keyboard-register,.piano-key{letter-spacing:0;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace}.room-kicker{color:#52c896;margin:0 0 12px;font-size:8px;font-weight:800}.piano-heading h1{color:#fffefa;margin:0;font-family:Georgia,Times New Roman,serif;font-size:72px;font-weight:400;line-height:.9}.piano-heading>p:last-child{color:#9b999e;margin:14px 0 0;font-size:15px}.begin-piano{z-index:3;color:#fffefa;text-align:left;cursor:pointer;background:#101012e0;border:1px solid #55545a;border-radius:3px;align-items:center;gap:14px;min-width:210px;min-height:58px;padding:9px 16px 9px 10px;display:flex;position:absolute;top:42px;right:68px}.begin-piano>span:first-child{color:#171719;background:#f4f1e9;border-bottom:4px solid #52c896;place-items:end center;width:38px;height:40px;padding-bottom:5px;font-size:8px;display:grid}.begin-piano small,.piano-performance small{color:#858389;margin-bottom:5px;font-size:7px;font-weight:800;display:block}.begin-piano:hover{border-color:#52c896}[data-state=active] .begin-piano{opacity:.58}.piano-performance{z-index:2;grid-template-columns:minmax(210px,.7fr) minmax(180px,1fr) auto;align-items:end;gap:26px;display:grid;position:absolute;bottom:28px;left:34px;right:70px}.performance-identity>span{color:#6f6e73;margin-bottom:8px;font-size:7px;display:block}.performance-identity>strong{color:#fffefa;font-family:Georgia,Times New Roman,serif;font-size:22px;font-weight:400;display:block}.performance-identity p{color:#858389;align-items:center;gap:8px;margin:8px 0 0;font-size:8px;display:flex}.performance-identity p b{color:#ff725e}.performance-identity p i{background:#4c4b50;width:18px;height:1px}.piano-progress{background:#303034;height:5px;margin-bottom:18px;overflow:hidden}.piano-progress i{transform-origin:0;background:#52c896;width:100%;height:100%;display:block;transform:scaleX(0)}.piano-performance>button{color:#171719;text-align:left;cursor:pointer;background:#f2bf4b;border:0;border-radius:3px;align-items:center;gap:13px;min-width:200px;min-height:56px;padding:10px 16px;display:flex}.piano-play-icon{border-top:7px solid #0000;border-bottom:7px solid #0000;border-left:11px solid #171719;width:0;height:0;margin-left:3px}.piano-performance>button[aria-pressed=true] .piano-play-icon{border:0;border-left:3px solid #171719;border-right:3px solid #171719;width:10px;height:14px;margin-left:0}.piano-console{background:#202024;border-bottom:1px solid #353439;grid-template-columns:minmax(310px,1.5fr) minmax(180px,.8fr) minmax(150px,.65fr) minmax(180px,.8fr);min-width:0;display:grid}.piano-console>div,.piano-console>label{border-right:1px solid #353439;align-content:center;min-width:0;padding:12px 24px;display:grid}.control-label{color:#7b797f;margin-bottom:9px;font-size:7px;font-weight:800;display:block}.timbre-switch{grid-template-columns:repeat(3,minmax(0,1fr));display:grid}.timbre-switch button{color:#aaa8ae;cursor:pointer;background:0 0;border:1px solid #49484e;border-right:0;justify-content:center;align-items:center;gap:7px;min-height:29px;font-size:10px;display:flex}.timbre-switch button:last-child{border-right:1px solid #49484e}.timbre-switch button[aria-pressed=true]{color:#171719;background:#f7f4ec}.timbre-switch i{background:#ff725e;border-radius:50%;width:5px;height:5px}.timbre-switch button:nth-child(2) i{background:#5aa7ff}.timbre-switch button:nth-child(3) i{background:#a787ff}.octave-control>div,.sustain-control>button{grid-template-columns:30px 1fr 30px;align-items:center;display:grid}.octave-control button{color:#f8f6f2;cursor:pointer;background:0 0;border:1px solid #49484e;width:30px;height:29px;padding:0;font-size:17px}.octave-control output{color:#c4c1c8;border-top:1px solid #49484e;border-bottom:1px solid #49484e;place-items:center;height:29px;font:9px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;display:grid}.sustain-control>button{color:#aaa8ae;cursor:pointer;background:0 0;border:0;grid-template-columns:28px auto;justify-content:start;gap:9px;min-height:29px;padding:0;font-size:10px}.sustain-control button i{border:1px solid #5b5a60;border-radius:7px;width:28px;height:14px;position:relative}.sustain-control button i:after{content:"";background:#858389;border-radius:50%;width:8px;height:8px;position:absolute;top:2px;left:2px}.sustain-control button[aria-checked=true]{color:#fffefa}.sustain-control button[aria-checked=true] i{border-color:#52c896}.sustain-control button[aria-checked=true] i:after{background:#52c896;left:16px}.volume-control input{accent-color:#ff725e;cursor:pointer;width:100%;height:3px;margin:7px 0}.keyboard-bench{background:#e3dfd6;border-bottom:1px solid #d0ccc4;min-width:0;overflow:hidden}.keyboard-register{color:#6e6b66;border-bottom:1px solid #b8b4ac;grid-template-columns:42px minmax(180px,1fr) 42px;align-items:center;height:32px;padding:0 16px;font-size:7px;font-weight:700;display:grid}.keyboard-register span:last-child{justify-self:end}.keyboard-navigator{grid-template-columns:auto minmax(120px,320px);justify-content:center;align-items:center;gap:14px;min-width:0;display:grid}.keyboard-navigator span{color:#4f4d49;font-size:7px}.keyboard-navigator input{accent-color:#52c896;cursor:ew-resize;width:100%;height:3px;margin:0}.piano-keyboard-scroll{overscroll-behavior-x:contain;scrollbar-color:#6d6962 #d1cdc4;scrollbar-width:thin;touch-action:pan-x;width:100%;height:248px;overflow:auto hidden}.piano-keyboard-scroll:focus-visible{outline-offset:-3px;outline:3px solid #5aa7ff}.piano-keyboard{-webkit-user-select:none;user-select:none;touch-action:none;width:2704px;height:100%;position:relative;overflow:hidden}.white-keys{grid-template-columns:repeat(var(--white-count), minmax(0, 1fr));width:100%;height:100%;display:grid}.black-keys{pointer-events:none;position:absolute;inset:0}.piano-key{appearance:none;cursor:pointer;border-radius:0 0 3px 3px;transition:background-color 80ms,transform 80ms;position:relative}.piano-key.white{color:#66635f;background:#f7f4ec;border:0;border-right:1px solid #aaa69f;min-width:0}.piano-key.white:first-child{border-left:1px solid #aaa69f}.piano-key.black{top:0;left:calc((var(--white-before) / var(--white-count)) * 100% - (100% / var(--white-count) * .31));z-index:2;width:calc(100% / var(--white-count) * .62);color:#aaa8ae;pointer-events:auto;background:#151518;border:1px solid #050506;border-top:0;height:61%;position:absolute;box-shadow:0 7px #080809}.piano-key-label{pointer-events:none;justify-items:center;gap:7px;font-size:7px;display:grid;position:absolute;bottom:11px;left:0;right:0}.piano-key-label kbd{color:#8d8982;border:1px solid #c8c4bc;border-radius:2px;place-items:center;width:18px;height:18px;font:7px ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;display:grid}.black .piano-key-label{color:#77767b;gap:5px;bottom:9px}.black .piano-key-label kbd{color:#77767b;border-color:#3a393e;width:16px;height:16px}.piano-key.is-active{background:var(--key-colour);transform:translateY(3px)}.piano-key.black.is-active{color:#171719;box-shadow:0 3px #080809}.piano-status-bar{border-top:0}[data-state=active] .piano-status-bar p:first-child{color:#52c896}@media (width<=900px){.piano-heading h1{font-size:58px}.piano-console{grid-template-columns:1.3fr .8fr .65fr .8fr}.piano-console>div,.piano-console>label{padding-left:13px;padding-right:13px}}@media (width<=700px){.piano-room-shell{grid-template-rows:auto 166px 255px 32px;align-content:stretch;height:calc(100dvh - 54px);min-height:calc(100dvh - 54px);overflow:visible}.piano-atmosphere{min-height:275px}.staff-labels{right:10px}.piano-heading{top:27px;left:14px}.room-kicker{margin-bottom:9px;font-size:6px}.piano-heading h1{font-size:43px}.piano-heading>p:last-child{margin-top:9px;font-size:12px}.begin-piano{min-width:0;min-height:43px;padding:6px 8px;top:27px;right:14px}.begin-piano>span:first-child{width:29px;height:30px}.begin-piano>span:last-child{display:none}.piano-performance{grid-template-columns:1fr 112px;gap:12px;bottom:16px;left:14px;right:14px}.performance-identity>strong{font-size:17px}.performance-identity p{margin-top:6px}.piano-progress{grid-area:2/1/auto/-1;margin:0}.piano-performance>button{grid-area:1/2;min-width:0;min-height:48px;padding:8px 10px}.piano-performance>button small{display:none}.piano-performance>button b{font-size:9px}.piano-console{grid-template-rows:83px 83px;grid-template-columns:1.35fr 1fr}.piano-console>div,.piano-console>label{border-bottom:1px solid #353439;padding:10px 12px}.piano-console>:nth-child(2n){border-right:0}.control-label{margin-bottom:7px}.timbre-switch button{gap:4px;font-size:8px}.timbre-switch i{display:none}.keyboard-register{grid-template-columns:28px minmax(0,1fr) 28px;height:32px;padding:0 10px}.keyboard-navigator{grid-template-columns:auto minmax(70px,1fr);gap:8px}.keyboard-navigator span{font-size:6px}.piano-keyboard-scroll{height:223px}.piano-keyboard{width:2548px}.piano-key-label{bottom:10px}.piano-key-label kbd{width:20px;height:20px}}@media (width<=360px){.piano-heading h1{font-size:38px}.view-switch a{padding-left:6px;padding-right:6px}}@media (prefers-reduced-motion:reduce){.piano-key{transition:none}}