.piano-study-page{background:#090c0e;color:#e8e7e0}piano-study{--study-ink: #e8e7e0;--study-muted: #959b9c;--study-accent: #e4b06b;display:flex;flex-direction:column;min-height:100svh;overflow:hidden;background:radial-gradient(ellipse at 66% 37%,#141b20 0,#0c1115,#090c0e 72%)}piano-study *,piano-study *:before,piano-study *:after{box-sizing:border-box}piano-study [hidden]{display:none!important}piano-study button,piano-study a{-webkit-tap-highlight-color:transparent}piano-study button{color:inherit;cursor:pointer}piano-study button:focus-visible,piano-study a:focus-visible{outline:1px solid var(--study-accent);outline-offset:7px}.study-header{display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;min-height:105px;padding:26px 4.5vw;border-bottom:1px solid #e8e7e011;position:relative;z-index:2}.study-identity{display:flex;flex-direction:column;width:fit-content;font-family:var(--font-display);font-size:20px;line-height:1.15;text-decoration:none;text-transform:uppercase;letter-spacing:.025em}.study-identity span{margin-top:8px;font-family:var(--font-body);font-size:10px;letter-spacing:.24em;color:var(--study-muted)}.study-back{justify-self:center;display:flex;align-items:center;gap:13px;color:var(--study-muted);text-decoration:none;font-size:12px}.study-back span{color:var(--study-ink);font-size:18px}.study-edition{justify-self:end;display:flex;align-items:center;gap:10px;font-size:12px;text-transform:uppercase;letter-spacing:.14em}.edition-dot{width:5px;height:5px;border-radius:50%;background:var(--study-accent)}.edition-index{margin-left:12px;color:#737c80}.study-main{position:relative;flex:1;width:100%;max-width:none;min-height:430px;height:calc(100svh - 225px);margin:0;padding:0}.study-stage{position:absolute;inset:25px 3vw 8px}.stage-topline{position:absolute;z-index:1;left:20px;right:20px;top:12px;display:flex;justify-content:space-between;font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:#858e93;pointer-events:none}.piano-canvas{display:block;width:100%;height:100%;opacity:0;transition:opacity .9s ease;touch-action:pan-y}piano-study.is-ready .piano-canvas{opacity:1}.stage-corner{position:absolute;width:8px;height:8px;pointer-events:none;opacity:.35}.corner-tl{top:0;left:0;border-top:1px solid #aab2b4;border-left:1px solid #aab2b4}.corner-tr{top:0;right:0;border-top:1px solid #aab2b4;border-right:1px solid #aab2b4}.corner-bl{bottom:0;left:0;border-bottom:1px solid #aab2b4;border-left:1px solid #aab2b4}.corner-br{bottom:0;right:0;border-bottom:1px solid #aab2b4;border-right:1px solid #aab2b4}.stage-coordinate{position:absolute;bottom:19px;left:57%;display:flex;align-items:center;gap:12px;font-size:10px;text-transform:uppercase;letter-spacing:.13em;color:#68747b;pointer-events:none}.coordinate-cross{font-size:24px;color:#a2a9a9;font-weight:300}.study-caption{position:absolute;z-index:2;left:4.5vw;bottom:50px;width:min(340px,30%);pointer-events:none}.study-eyebrow{font-size:10px;color:#a8adae;letter-spacing:.18em;text-transform:uppercase;margin:0 0 18px}.study-caption h1{font-size:clamp(64px,7.6vw,118px);font-weight:400;letter-spacing:-.035em;line-height:1;margin:0 0 29px -3px;text-transform:none;color:var(--study-ink)}.title-period{color:var(--study-accent)}.view-description{min-height:110px;max-width:290px}.view-description h2{margin:0 0 11px;font-family:var(--font-body);font-size:18px;font-weight:400;line-height:1.35;color:var(--study-ink)}.view-description p{margin:0;font-size:14px;line-height:1.7;color:var(--study-muted)}.trace-status{display:block;height:16px;margin-top:9px;font-size:10px;color:var(--study-muted);letter-spacing:.03em}.study-hotspots{position:absolute;inset:0;pointer-events:none}.study-hotspot{position:absolute;top:0;left:0;z-index:3;display:flex;align-items:center;min-height:44px;padding:0;border:0;background:transparent;font-size:11px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .35s}.is-ready .study-hotspot{opacity:1;pointer-events:auto}.study-hotspot[hidden],.is-ready .study-hotspot[hidden]{display:none}.hotspot-target{display:grid;place-items:center;width:27px;height:27px;border:1px solid #9da5a86b;border-radius:50%;background:#0a1015d9;color:#d6d9d6;font-size:17px;line-height:1;transition:transform .25s,border-color .25s}.study-hotspot:hover .hotspot-target{transform:rotate(90deg);border-color:var(--study-ink)}.hotspot-label{padding:7px 10px;background:#0b1014df;color:#bdc3c2;letter-spacing:.025em}.study-hotspot .hotspot-target{border-color:#e4b06b9c;color:var(--study-accent)}.study-hotspot .hotspot-label{color:var(--study-accent)}.study-detail{position:absolute;right:4.5vw;bottom:50px;display:flex;gap:14px;align-items:center;color:#90999d;font-size:11px;line-height:1.7;letter-spacing:.02em}.detail-rule{width:28px;height:1px;background:#e4b06b80}.study-footer{position:relative;padding:0 4.5vw 23px}.study-views{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid #e8e7e02a}.study-views button{display:flex;align-items:center;gap:16px;position:relative;min-height:77px;padding:15px 15px 15px 0;background:transparent;border:0;border-radius:0;text-align:left;font-size:14px;color:#929b9f}.study-views button:before{content:"";position:absolute;left:0;right:25px;top:-1px;height:1px;background:var(--study-ink);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.22,1,.36,1)}.study-views button[aria-pressed=true]{color:var(--study-ink)}.study-views button[aria-pressed=true]:before{transform:scaleX(1)}.view-number{font-size:10px;color:#637078;font-variant-numeric:tabular-nums}.study-views button[aria-pressed=true] .view-number{color:var(--study-accent)}.view-active-mark{margin-left:auto;margin-right:25px;width:4px;height:4px;background:var(--study-ink);border-radius:50%;opacity:0;transition:opacity .25s}.study-views button[aria-pressed=true] .view-active-mark{opacity:1}.study-footnotes{display:flex;justify-content:space-between;gap:15px;color:#738088;font-size:10px;letter-spacing:.035em}.study-footnotes>span:first-child{display:flex;align-items:center;gap:9px;color:#b5b3ab}.speaker-swatch{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--study-accent)}.study-nojs{max-width:600px;padding:20px}.solenoid-toggle{position:absolute;z-index:3;left:0;top:0;transform:translate(-50%);white-space:nowrap;display:flex;align-items:center;gap:14px;pointer-events:auto;min-height:44px;padding:6px 12px;margin:0;border:0;border-radius:0;background:#0c1115dc;font-size:12px;color:#b6bdbc;text-align:left}.solenoid-toggle>span:last-child{color:var(--study-accent);font-size:18px}.solenoid-toggle[aria-pressed=true]{color:var(--study-accent)}piano-study[data-view=keys] .study-caption,piano-study[data-view=pedals] .study-caption,piano-study[data-view=sound] .study-caption{bottom:27px;width:min(355px,31%)}piano-study[data-view=keys] .study-caption h1,piano-study[data-view=pedals] .study-caption h1,piano-study[data-view=sound] .study-caption h1{font-size:clamp(60px,5.8vw,80px);margin-bottom:19px}piano-study[data-view=keys] .study-eyebrow,piano-study[data-view=pedals] .study-eyebrow,piano-study[data-view=sound] .study-eyebrow{margin-bottom:12px}piano-study[data-view=keys] .view-description,piano-study[data-view=pedals] .view-description,piano-study[data-view=sound] .view-description{min-height:0;max-width:325px}piano-study[data-view=keys] .view-description p,piano-study[data-view=pedals] .view-description p,piano-study[data-view=sound] .view-description p{font-size:13px}.trace-status{height:auto;min-height:16px;max-width:310px}.pedal-selector{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:17px 0 0;pointer-events:auto}.pedal-selector button{min-height:52px;padding:8px 0;border:0;border-top:1px solid #e4b06b2f;border-radius:0;background:transparent;font-size:13px;text-align:left;color:#899397}.pedal-selector button>span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.13em;margin-bottom:4px;color:#8a9294}.pedal-selector button[aria-pressed=true]{color:var(--study-accent);border-color:var(--study-accent)}.pedal-selector button:hover{color:var(--study-accent)}.pedal-hotspots{position:absolute;inset:0;pointer-events:none}.pedal-hotspots button{position:absolute;left:0;top:0;min-height:40px;width:86px;pointer-events:auto;padding:8px 4px;border:0;border-top:1px solid #e4b06b40;background:#0c1115dc;font-size:11px;text-align:center;color:#a79071}.pedal-hotspots button[aria-pressed=true]{color:var(--study-accent);border-color:var(--study-accent)}.solenoid-callout{position:absolute;padding:7px 10px;border-left:1px solid #e4b06b80;color:var(--study-accent);background:#0c1115e0;font-size:12px;pointer-events:none}.solenoid-callout span{display:block;color:#9ea4a2;font-size:10px}piano-study[data-view=pedals] .stage-coordinate{display:none}.pedal-response{position:absolute;z-index:1;width:40%;right:8%;top:55px;pointer-events:none}.pedal-response-heading{display:flex;justify-content:space-between;align-items:center;color:#a4adad;font-size:11px}.pedal-response-heading>span:last-child{color:var(--study-accent);font-size:22px}.pedal-response svg{display:block;width:100%;max-height:105px;overflow:visible}.response-baseline{stroke:#6e7b80;stroke-width:.7;opacity:.3}.response-reference{stroke:#c4cbca;opacity:.35;stroke-dasharray:3 5;stroke-width:1;fill:none}.response-wave{fill:none;stroke:var(--study-accent);stroke-width:1.5}.response-playhead{stroke:var(--study-accent);stroke-width:1;opacity:0}.pedal-response p{font-size:11px;color:#909c9e;margin:2px 0 0}@media (min-width: 1600px){.study-caption{bottom:80px}.view-description{max-width:310px}.view-description p{font-size:15px}}@media (max-width: 1000px) and (min-width: 701px){.study-caption{width:29%;bottom:35px}.study-caption h1{font-size:70px}.study-eyebrow{max-width:180px}.view-description p{font-size:13px}.study-detail{display:none}.study-views button{gap:10px;font-size:13px}}@media (max-width: 700px){.study-header{min-height:85px;padding:20px 6vw;grid-template-columns:1fr auto}.study-identity{font-size:17px}.study-identity span{font-size:9px;margin-top:6px}.study-back{position:absolute;right:6vw;top:91px;z-index:5;font-size:10px;gap:8px}.study-edition{font-size:10px;gap:7px;letter-spacing:.09em}.edition-index{margin-left:3px}.study-main{display:flex;flex-direction:column;min-height:0;height:auto}.study-stage{position:relative;inset:auto;margin:45px 4vw 0;height:clamp(300px,52svh,490px)}.stage-topline{left:12px;right:12px;top:12px;font-size:8px;letter-spacing:.1em}.stage-coordinate{left:15px;bottom:5px;font-size:8px;gap:8px}.coordinate-cross{font-size:19px}.study-caption{position:relative;left:auto;bottom:auto;width:100%;padding:24px 6vw 18px}.study-eyebrow{font-size:9px;margin-bottom:12px}.study-caption h1{font-size:clamp(62px,16vw,88px);margin-bottom:20px}.view-description{min-height:96px;max-width:430px}.view-description h2{font-size:17px;margin-bottom:7px}.view-description p{font-size:13px}.trace-status{margin-top:5px}.study-detail{display:none}.study-footer{padding:0 6vw 22px}.study-views{grid-template-columns:1fr 1fr;column-gap:22px}.study-views button{min-height:62px;font-size:12px;gap:10px;border-bottom:1px solid #e8e7e012}.study-views button:before{right:0}.view-active-mark{margin-right:0}.study-footnotes{padding-top:20px;flex-wrap:wrap;font-size:9px;gap:8px}.study-hotspot{font-size:10px}.hotspot-label{padding:5px 7px}.hotspot-target{width:24px;height:24px;font-size:15px}piano-study[data-view=keys] .study-caption,piano-study[data-view=pedals] .study-caption,piano-study[data-view=sound] .study-caption{bottom:auto;width:100%}piano-study[data-view=keys] .study-caption h1,piano-study[data-view=pedals] .study-caption h1,piano-study[data-view=sound] .study-caption h1{font-size:clamp(62px,16vw,88px)}.pedal-response{width:auto;left:20px;right:20px;top:45px}.pedal-response svg{max-height:75px}.pedal-response p,.pedal-hotspots button,.solenoid-callout{font-size:10px}.solenoid-callout span{font-size:9px}}@media (prefers-reduced-motion: reduce){.piano-canvas,.study-hotspot,.hotspot-target,.study-views button:before{transition:none}}
