@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&display=swap');
:root{color-scheme:dark;--bg:#090a0b;--text:#eae9e6;--muted:#818184;--gold:#c8a773;--border:#ffffff13}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}button,input,a{-webkit-tap-highlight-color:transparent}button,input{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,#viewport:focus-visible{outline:2px solid var(--gold);outline-offset:5px}button{border:0}button:disabled{opacity:.25;cursor:default}[hidden]{display:none!important}.studio-page{height:100svh;overflow:hidden}.topbar{height:88px;display:flex;align-items:center;justify-content:space-between;padding:0 48px;border-bottom:1px solid var(--border);position:relative;z-index:10;background:#090a0bb3}.wordmark{display:flex;align-items:center;gap:12px;font-weight:550;letter-spacing:-.4px;font-size:16px}.wordmark>span{font:italic 700 30px Georgia,serif;letter-spacing:-4px;color:#d3b382;width:23px}.topbar nav{display:flex;gap:33px;margin-left:-45px;font-size:13px;color:#858587}.topbar nav a{padding:12px 0}.topbar nav a[aria-current=page]{color:#eee}.topbar nav a:hover{color:var(--gold)}.toolbar{display:flex;gap:12px}.icon-button{height:38px;width:38px;border-radius:11px;display:grid;place-items:center;background:transparent;color:#99999d;border:1px solid transparent;font-size:25px}.icon-button:hover,.icon-button[aria-expanded=true]{border-color:#ffffff23;background:#ffffff08;color:#e2c28f}.icon-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}#stage{position:relative;height:calc(100svh - 88px);overflow:hidden}.scene-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 45%,#a78c6120 0%,#39363413 28%,transparent 65%);pointer-events:none}.backdrop-type{position:absolute;width:100%;text-align:center;top:37%;font-size:clamp(80px,14.2vw,225px);font-weight:650;letter-spacing:-.065em;color:#ffffff03;pointer-events:none;user-select:none;line-height:1}#viewport{position:absolute;inset:0;touch-action:none;outline-offset:-8px!important}#viewport canvas{display:block;width:100%;height:100%;touch-action:none;cursor:grab}#viewport canvas.dragging{cursor:grabbing}#viewport canvas.over-key{cursor:pointer}#loading{position:absolute;top:48%;width:100%;text-align:center;color:#999;font-size:13px;pointer-events:none}#loading span{display:block;width:80px;height:1px;background:#b6a181;margin:20px auto;animation:loading 1s alternate infinite}@keyframes loading{to{transform:scaleX(.25);opacity:.3}}.instrument-caption{position:absolute;left:48px;bottom:148px;pointer-events:none}.instrument-caption>span{font-size:10px;letter-spacing:2px;color:#6f7074}.instrument-caption h1{font-size:clamp(45px,5vw,72px);line-height:1.05;font-weight:450;letter-spacing:-3px;margin:15px 0 12px}.instrument-caption h1>span{color:var(--gold)}.instrument-caption p{font-size:10px;letter-spacing:2.2px;color:#9c8665;margin:0}.viewer-footer{position:absolute;bottom:36px;left:48px;right:48px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}.viewer-footer>*{pointer-events:auto}.gesture-hint{font-size:11px;color:#75767a;display:flex;align-items:center;gap:12px;max-width:280px;line-height:1.7}.gesture-hint i{font-style:normal;margin:0 5px;color:#45464a}.mouse-icon{border:1px solid #6a6b6e;border-radius:6px;width:13px;height:19px;position:relative;flex-shrink:0}.mouse-icon:after{content:'';position:absolute;height:4px;width:1px;background:#6a6b6e;top:3px;left:5px}.instrument-picker{display:flex;gap:3px;background:#151617d9;border:1px solid #ffffff12;border-radius:30px;padding:5px;position:absolute;left:50%;transform:translateX(-50%);backdrop-filter:blur(18px)}.instrument-picker button{padding:12px 20px;border-radius:24px;background:transparent;color:#828387;font-size:12px;transition:color .2s,background .2s}.instrument-picker button:hover{color:#eee}.instrument-picker button[aria-pressed=true]{background:#303030;color:#f0e9dd}.instrument-picker #more-toggle{font-size:18px;padding:6px 16px}.view-label{font-size:9px;letter-spacing:1.8px;color:#525358}#more-menu{position:absolute;bottom:106px;left:calc(50% + 30px);width:230px;background:#1a1b1cf5;padding:9px;border:1px solid #ffffff16;border-radius:15px;box-shadow:0 20px 60px #0007;z-index:9;backdrop-filter:blur(24px)}#more-menu button{display:flex;align-items:center;justify-content:space-between;padding:12px 13px;background:transparent;width:100%;font-size:13px;border-radius:8px;color:#bdbdbf}#more-menu button:hover,#more-menu button[aria-pressed=true]{background:#ffffff09;color:#e4c391}#more-menu span{color:#7b7060;font-size:11px}#note-indicator{position:absolute;top:48px;right:50px;display:flex;align-items:baseline;gap:12px;opacity:0;transition:opacity .3s;pointer-events:none}#note-indicator.visible{opacity:1}#note-label{font-size:35px;letter-spacing:-1.3px;color:#ddc498}#note-concert{font-size:11px;color:#727378}#key-tooltip{position:absolute;pointer-events:none;background:#282624e8;border:1px solid #c8a77345;backdrop-filter:blur(8px);padding:8px 12px;border-radius:7px;font-size:12px;color:#eee2cc;transform:translate(16px,-40px);white-space:nowrap;z-index:3}#keyboard-panel{position:fixed;right:48px;top:103px;width:560px;background:#191a1bf5;border:1px solid #ffffff1c;padding:24px;border-radius:19px;box-shadow:0 24px 100px #0009;backdrop-filter:blur(24px);z-index:12;animation:appear .2s ease-out}@keyframes appear{from{opacity:0;transform:translateY(-7px)}to{opacity:1;transform:translateY(0)}}.panel-heading{display:flex;justify-content:space-between;align-items:start}.panel-heading h2{font-size:19px;font-weight:500;letter-spacing:-.5px;margin:0 0 6px}.panel-heading p{font-size:12px;color:#85858b;margin:0}.panel-heading .icon-button{margin:-9px -8px 0 0}.keyboard-controls{display:flex;align-items:center;justify-content:space-between;margin:22px 0 16px;font-size:12px;color:#a9a9ad}.octave-control{display:flex;gap:13px;align-items:center}.octave-control button{width:26px;height:26px;background:#ffffff08;border-radius:50%;font-size:18px;color:#aaa}.volume-control{display:flex;gap:12px;align-items:center;font-size:11px}.volume-control input{width:85px;accent-color:#c8a773;height:3px}#keyboard{display:flex;height:145px;gap:5px;position:relative;isolation:isolate}.piano-key{position:relative;flex:1;min-width:0;background:linear-gradient(#d9d8d5,#b9b8b6);border:1px solid #d5d3d0;border-radius:5px;box-shadow:0 3px 0 #818080;display:flex;flex-direction:column;justify-content:end;align-items:center;gap:8px;padding-bottom:13px;color:#444548;font-size:13px;user-select:none;touch-action:none}.piano-key small{font-size:10px;color:#767679}.piano-key.black{position:absolute;top:0;height:88px;width:7%;background:linear-gradient(#343537,#161719);color:#ddd;border-color:#0d0d0f;border-radius:0 0 4px 4px;z-index:2;box-shadow:0 3px 3px #0007;font-size:10px}.piano-key.black small{font-size:9px;color:#8a8a8e}.piano-key.active{background:linear-gradient(#e0c492,#b18b50);color:#332512;border-color:#c8a773;box-shadow:0 1px 0 #7e6746;transform:translateY(2px)}.piano-key.active small{color:#7c5a2c}.keyboard-footer{display:flex;justify-content:space-between;font-size:10px;color:#696b70;margin-top:17px}.audio-status{position:fixed;bottom:110px;left:50%;transform:translateX(-50%);z-index:15;background:#26211bf0;color:#e2c99e;padding:10px 16px;border:1px solid #6a5338;border-radius:9px;font-size:12px;max-width:85vw;text-align:center}.audio-status:empty{display:none}#viewer-error{position:absolute;top:35%;left:50%;transform:translateX(-50%);text-align:center}#viewer-error button{padding:12px 20px;background:#d8bc8d;color:#171717;border-radius:20px}.no-script{position:fixed;top:30%;left:20%;right:20%;text-align:center;background:#181818;padding:30px}.no-script a{color:var(--gold)}.info-page .topbar{position:sticky;top:0;backdrop-filter:blur(20px)}.info-page .topbar nav{margin:0}.info-main{max-width:1100px;margin:0 auto;padding:80px 40px}.eyebrow{font-size:10px;letter-spacing:2px;color:#a58d69;text-transform:uppercase}.info-main>h1{font-size:clamp(45px,6vw,78px);letter-spacing:-3px;font-weight:450;line-height:1.04;margin:22px 0}.info-lead{color:#96969a;font-size:17px;line-height:1.8;max-width:550px;margin-bottom:70px}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.info-card{border:1px solid #ffffff0e;background:#ffffff03;border-radius:18px;display:grid;grid-template-columns:130px 1fr;gap:25px;align-items:center;padding:30px}.info-card img{width:110px;height:205px;object-fit:contain}.info-card h2{font-size:25px;font-weight:450;letter-spacing:-.7px;margin:10px 0}.info-card p{color:#929297;line-height:1.7;font-size:14px}.info-card a{color:#d1b98e;font-size:13px}.info-card a:hover{text-decoration:underline}.rare-section{margin:75px 0;display:grid;grid-template-columns:1fr 1fr;gap:80px}.rare-section h2,.how-to h2{font-size:30px;font-weight:450;letter-spacing:-1px}.rare-section p,.how-to p,.credits p,.credits li{font-size:15px;color:#929298;line-height:1.8}.rare-row{padding:16px 0;display:flex;justify-content:space-between;border-bottom:1px solid #ffffff12;gap:15px}.rare-row small{color:#9c8461}.how-to{max-width:700px;padding-bottom:55px}.info-footer{border-top:1px solid var(--border);padding:28px 0;display:flex;justify-content:space-between;color:#77787e;font-size:12px}.info-footer a:hover{color:#d3b382}.credits{max-width:800px;padding:70px 30px;margin:auto}.credits h1{font-size:55px;font-weight:450;letter-spacing:-2px}.credits h2{font-weight:450;margin-top:38px}.credits a{color:#ccb184}.credits li{margin-bottom:12px}
@media(min-width:1600px){.instrument-caption{bottom:180px}.viewer-footer{bottom:45px}}
@media(max-width:1100px){.gesture-hint{max-width:160px;font-size:10px}.view-label{max-width:100px;text-align:right;line-height:1.8}.instrument-picker button{padding:12px 16px}.info-card{grid-template-columns:90px 1fr;padding:23px;gap:17px}.info-card img{width:85px;height:180px}}
@media(max-width:700px){.topbar{height:70px;padding:0 22px}.wordmark{font-size:14px;gap:9px}.wordmark>span{font-size:26px}.topbar nav{font-size:12px;gap:20px;margin-left:0}.topbar nav a:first-child{display:none}.toolbar{gap:3px}.icon-button{width:33px;height:35px}#stage{height:calc(100svh - 70px)}.backdrop-type{font-size:21vw;top:41%}.instrument-caption{left:24px;bottom:125px}.instrument-caption>span{font-size:8px;letter-spacing:1.3px}.instrument-caption h1{font-size:43px;letter-spacing:-2px;margin:10px 0 9px}.instrument-caption p{font-size:8px;letter-spacing:1.5px}.viewer-footer{left:18px;right:18px;bottom:26px;display:block}.instrument-picker{position:relative;left:auto;transform:none;justify-content:center;width:max-content;max-width:100%;margin:auto}.instrument-picker button{font-size:11px;padding:11px 16px}.instrument-picker #more-toggle{padding:6px 13px}.gesture-hint{position:absolute;bottom:64px;right:5px;text-align:right;max-width:112px;margin:0;gap:7px;font-size:9px}.gesture-hint i{display:none}.gesture-hint span:last-child{display:flex;flex-direction:column}.view-label{display:none}#more-menu{bottom:88px;left:auto;right:21px}#note-indicator{top:26px;right:25px;flex-direction:column;gap:3px}#note-label{font-size:28px}#note-concert{font-size:9px}#keyboard-panel{right:14px;left:14px;top:82px;width:auto;padding:20px}#keyboard{height:135px}.piano-key.black{height:80px}.panel-heading h2{font-size:18px}.panel-heading p{font-size:11px}.audio-status{bottom:100px}.info-main{padding:48px 22px}.info-lead{font-size:15px;margin-bottom:40px}.info-grid{grid-template-columns:1fr}.info-card{grid-template-columns:100px 1fr;padding:22px;gap:24px}.info-card img{width:95px;height:190px}.rare-section{grid-template-columns:1fr;gap:15px;margin:45px 0}.info-main>h1{font-size:49px}.info-footer{flex-wrap:wrap;gap:20px}.credits h1{font-size:42px}}
@media(max-width:370px){.topbar{padding:0 16px}.wordmark{font-size:12px}.topbar nav{font-size:11px}.instrument-picker button{padding:10px 12px}.instrument-caption h1{font-size:38px}.keyboard-controls{font-size:11px}.volume-control input{width:60px}.info-card{gap:15px}}
.backdrop-type{display:none}.info-card{background:#ffffff03}.back-to-studio{font-size:12px;color:#c8ad83}.gesture-hint span:last-child{line-height:1.8}
@media(max-width:700px){.gesture-hint{max-width:107px}.gesture-hint .mouse-icon{display:none}.info-page .wordmark{font-size:13px}.info-page .topbar nav{display:none}}
.studio-controls{display:flex;gap:2px;background:#151617e8;border:1px solid #ffffff12;border-radius:30px;padding:5px;position:absolute;left:50%;transform:translateX(-50%);backdrop-filter:blur(18px)}.studio-controls button{display:flex;align-items:center;gap:9px;padding:12px 20px;min-width:100px;justify-content:center;border-radius:24px;background:transparent;color:#9a9b9f;font-size:12px;transition:.2s}.studio-controls button:hover{color:#f0e9dd}.studio-controls button[aria-pressed=true]{background:#303030;color:#e3c794}.studio-controls svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}#note-labels{position:absolute;inset:0;pointer-events:none}.model-note{position:absolute;transform:translateY(-50%);pointer-events:auto;background:#1d1c19ec;border:1px solid #ad906650;border-radius:6px;color:#e9cea4;font-size:10px;min-width:31px;padding:6px 7px;box-shadow:0 3px 14px #0004;touch-action:none}.model-note:before{content:'';position:absolute;right:100%;width:38px;top:50%;height:1px;background:#b9955866;pointer-events:none}.model-note.label-left:before{right:auto;left:100%;width:29px}.model-note.active{background:#cbb080;color:#151310}.model-note:hover{border-color:#dbb780;background:#3e3323}.instrument-caption h1{font-size:clamp(50px,5vw,72px)}
@media(max-width:700px){.studio-controls{position:relative;left:auto;transform:none;margin:auto;width:max-content}.studio-controls button{padding:12px 18px;min-width:91px;font-size:11px}.studio-controls svg{width:13px;height:13px}.gesture-hint{max-width:128px}.gesture-hint span:last-child{display:block}.gesture-hint i{display:inline;margin:0 3px}.model-note{font-size:9px;padding:6px;min-width:27px}.instrument-caption h1{font-size:43px}}
@media(max-width:700px){.notes-visible .instrument-caption>span{visibility:hidden}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}