:root{--paper:#fbf8f9;--ink:#2e252b;--sage:#7b3047;--sage-dark:#602236;--pale:#f0e5e9;--muted:#6e6068;--line:#e1d4da;--white:#fff;--panel:#f4edef}
:root[data-theme=blue]{--paper:#f6f8fc;--ink:#202f49;--sage:#305992;--sage-dark:#234372;--pale:#e6edf8;--muted:#5c6b82;--line:#d5dfef;--panel:#edf2fa}
:root[data-theme=plum]{--paper:#faf7fd;--ink:#34263f;--sage:#775489;--sage-dark:#5e3c6f;--pale:#eee5f4;--muted:#71627a;--line:#dfd3e7;--panel:#f3edf7}
:root[data-theme=graphite]{--paper:#20232b;--ink:#f0eef3;--sage:#a6acc0;--sage-dark:#c8cde0;--pale:#30343f;--muted:#bcc0cc;--line:#454b5b;--panel:#292d37}
[data-theme=graphite]{color-scheme:dark}
[data-theme=graphite] .button-primary{color:#20232b}
[data-theme=graphite] .piano-fallboard{color:#cbd1df;border-bottom-color:#515866}
[data-theme=graphite] .piano-fallboard:before,[data-theme=graphite] .piano-fallboard:after{background:linear-gradient(90deg,transparent,#cbd1df38)}
[data-theme=graphite] .piano-key.next:after{background:#697a9e;box-shadow:0 0 0 5px #697a9e26}
.skip-link{background:var(--paper);color:var(--ink)}
button:focus-visible,a:focus-visible,summary:focus-visible{outline-color:var(--sage)}
.piano-studio progress::-webkit-progress-bar{background:var(--line)}
.booking-field input::placeholder,.booking-field textarea::placeholder{color:var(--muted);opacity:1}
.hero-image>img{object-position:50% 100%;transform:scale(1.35);transform-origin:center bottom;filter:grayscale(1) contrast(1.05)}
.hero-image:before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(#000b,transparent 38%)}
.about-section{background:var(--panel)}.mode-switch{background:var(--line)}.mode{color:var(--muted)}.about-principles span,.watch-link>.play-circle{border-color:var(--line);color:var(--muted)}.text-link{border-color:var(--sage)}.piano-wordmark{color:var(--sage)}.reset-button{color:var(--sage)}.signature{stroke:var(--sage)}.contact-art>span{color:#f7eef2}.contact-handle{color:#f8edf2}.button-primary{color:#fff}.button-light{color:#2e252b}.reference-link{font-size:11px;color:var(--muted)}.reference-link:hover{color:var(--sage)}
.piano-section{grid-template-columns:.8fr 2fr;gap:28px;padding:38px 35px}.piano-stage{perspective:1000px;padding:7px 5px 30px;isolation:isolate}.piano-cabinet{position:relative;transform-style:preserve-3d;transform:rotateX(20deg);transform-origin:center bottom;background:linear-gradient(100deg,#202125,#07080a 30%,#28292d 75%,#0c0d10);border-radius:10px 10px 5px 5px;padding:10px 13px 19px;border:1px solid #37383b;box-shadow:0 14px 0 #090a0c,0 16px 0 #34353a,0 25px 24px #0004}.piano-cabinet:before{content:'';position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,#fff6,transparent);pointer-events:none}.piano-fallboard{height:45px;display:flex;align-items:center;justify-content:center;margin:0 0 5px;border-bottom:1px solid #786146;box-shadow:0 1px 0 #000;color:#c4ae83;font-family:var(--serif);font-size:20px;letter-spacing:1px;position:relative}.piano-fallboard:before,.piano-fallboard:after{content:'';position:absolute;top:16px;width:24%;height:1px;background:linear-gradient(90deg,transparent,#c4ae8338)}.piano-fallboard:before{left:4%}.piano-fallboard:after{right:4%;transform:rotate(180deg)}
.keyboard{isolation:auto;transform-style:preserve-3d;height:165px;border:0;border-top:7px solid #0c0d0e;background:#161719;padding:0 2px 2px;box-shadow:inset 0 7px 10px #0008;border-radius:1px;overflow:visible;touch-action:none}.piano-key{transform:translateZ(9px);transform-style:preserve-3d;transform-origin:center top;transition:transform 85ms cubic-bezier(.2,.6,.3,1),background 85ms,box-shadow 85ms;backface-visibility:hidden;background:linear-gradient(90deg,#e0dfdb,#fffffc 15%,#f5f5ef 85%,#d5d4cd);box-shadow:inset 0 7px 13px #0002,inset 0 -2px 1px #fff,0 5px 3px #0006;border:1px solid #b9b8b0;border-top:0;color:#6e6c66;border-radius:0 0 3px 3px;padding-bottom:13px;font-size:9px;touch-action:none}.piano-key:before{content:'';position:absolute;inset:auto -1px -10px;height:10px;transform:rotateX(-90deg);transform-origin:center top;background:linear-gradient(#d7d5cb,#efeee6 35%,#a9a69a);border:1px solid #a9a69a;border-radius:0 0 2px 2px;pointer-events:none}.piano-key.black{height:61%;transform:translateZ(26px);border:1px solid #0b0c0e;border-top:0;background:linear-gradient(90deg,#1a1b1e,#434449 13%,#232428 25%,#08090c 90%);box-shadow:inset 0 2px 2px #ffffff24,inset 0 -4px 0 #040507,3px 8px 4px #0008;padding-bottom:6px}.piano-key.black:before{inset:auto -1px -19px;height:19px;background:linear-gradient(#393a3d,#07080b);border-color:#030406}.piano-key.active{transform:translateZ(0px) rotateX(-3deg);background:linear-gradient(90deg,#d5d2ca,#e9e6dc 30%,#f6f2e7 80%,#c6c2b8);box-shadow:inset 0 7px 16px #0003,inset 0 -1px 1px #fff,0 1px 2px #0007}.piano-key.black.active{transform:translateZ(15px) rotateX(-3deg);background:linear-gradient(90deg,#101114,#292a2e 15%,#050609);box-shadow:inset 0 -1px 0 #030405,1px 3px 2px #0008}.piano-key.next:after{background:var(--sage);box-shadow:0 0 0 5px color-mix(in srgb,var(--sage) 15%,transparent);bottom:34px}.piano-key:focus-visible{outline-offset:0;outline:2px solid var(--sage)}.piano-bottom{padding-top:0}.piano-wordmark{display:none}.piano-toolbar{margin-bottom:3px}.sound-caption{margin-top:20px}
.booking-section{background:var(--pale);padding:55px 48px;display:grid;grid-template-columns:.85fr 1.2fr;gap:65px;align-items:start;border-radius:8px}.booking-intro h2{font-size:65px;line-height:1;margin:22px 0}.booking-intro p{font-size:12px;max-width:290px}.booking-form{background:var(--paper);padding:30px;border:1px solid var(--line);border-radius:7px;display:grid;grid-template-columns:1fr 1fr;gap:17px 15px}.booking-field{display:flex;flex-direction:column;gap:7px;font-size:11px;font-weight:500}.booking-field input,.booking-field textarea{font:inherit;font-weight:400;font-size:13px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:4px;padding:12px;min-width:0;width:100%;outline-offset:3px}.booking-field textarea{resize:vertical;min-height:75px}.booking-wide{grid-column:1/-1}.booking-timezone{font-size:10px;color:var(--muted)}.booking-consent{display:flex;align-items:flex-start;gap:9px;cursor:pointer;font-size:10px;color:var(--muted);line-height:1.6}.booking-consent input{margin-top:4px;accent-color:var(--sage);flex-shrink:0}.booking-form .button{width:100%;margin-top:2px}.booking-form .button:disabled{opacity:.65;transform:none;cursor:wait}.booking-status{min-height:17px;font-size:11px;color:var(--sage);line-height:1.6}.booking-help{font-size:10px;color:var(--muted)}.booking-confirmation{padding:35px;background:var(--paper);border:1px solid var(--line);border-radius:7px}.booking-confirmation h3{font-family:var(--serif);font-size:42px;margin-bottom:18px;line-height:1.1}.booking-confirmation p{font-size:13px;margin-top:14px}.booking-confirmation .booking-reference{font-size:10px}.booking-form[hidden],.booking-confirmation[hidden]{display:none}.booking-photo-line{margin-top:26px;display:flex;align-items:center;gap:12px;font-size:11px;color:var(--muted)}.booking-photo-line img{width:44px;height:44px;object-fit:cover;border-radius:50%}.booking-intro .contact-caption{color:var(--sage)}.booking-intro .online-dot{background:var(--sage)}
@media(max-width:1000px){.piano-section{grid-template-columns:1fr 1.8fr;padding:30px 25px;gap:20px}.piano-cabinet{padding:8px 9px 15px}.keyboard{height:150px}.piano-fallboard{height:37px}.booking-section{gap:35px;padding:40px 30px}.booking-intro h2{font-size:54px}.booking-form{padding:24px}}
@media(max-width:820px){.piano-section{grid-template-columns:1fr;gap:22px}.piano-stage{padding-bottom:28px}.piano-intro h2{font-size:40px}.booking-section{grid-template-columns:1fr;gap:26px}.booking-intro h2{font-size:57px}.booking-intro p{max-width:450px}.booking-photo-line{margin-top:18px}}
@media(max-width:600px){.piano-section{padding:25px 16px;gap:18px}.piano-stage{padding:4px 2px 28px;perspective:750px}.piano-cabinet{padding:7px 8px 15px;transform:rotateX(22deg);border-radius:8px 8px 4px 4px;box-shadow:0 10px 0 #090a0c,0 12px 0 #34353a,0 21px 20px #0004}.piano-fallboard{height:33px;font-size:18px;margin-bottom:3px}.keyboard{height:142px;border:0;border-top:5px solid #111;padding:0 1px 1px}.piano-key{font-size:9px}.piano-key.black{font-size:0}.piano-key:before{bottom:-8px;height:8px}.piano-key.black:before{bottom:-15px;height:15px}.piano-bottom p{font-size:9px}.piano-toolbar{margin-bottom:2px}.piano-intro h2{font-size:38px}.booking-section{padding:30px 20px}.booking-intro h2{font-size:53px}.booking-form{padding:22px 17px;gap:16px 12px}.booking-field{font-size:12px}.booking-field input,.booking-field textarea{font-size:16px;padding:12px 10px}.booking-timezone{font-size:10px}.booking-consent{font-size:11px}.booking-status{font-size:12px}.booking-confirmation{padding:26px 20px}.booking-confirmation h3{font-size:38px}}

/* Readability: body copy was 11-12px and labels 9-10px, too small to read comfortably */
.hero-description{font-size:16px;line-height:1.75}
.piano-intro p{font-size:14px}
.section-heading>p,.lesson-card p,.about-copy p,.format-note p,.lesson-steps p,.faq>div>p,.faq-list details p,.booking-intro p{font-size:15px;line-height:1.75}
.about-copy .about-lead{font-size:17px}
.faq-list summary{font-size:15px}
.music-note>div{font-size:14px}
.section-heading>p{max-width:420px}.about-copy p{max-width:520px}.format-note p{max-width:340px}.booking-intro p{max-width:360px}.lesson-card p{min-height:0}
.navigation,.small-caption,.hero-play,.text-link,.watch-link,.hero-teacher strong,.booking-photo-line,.booking-field,.booking-status{font-size:13px}
.header-cta,.hero-meta,.lesson-tag,.contact-caption,.sound-caption,.mode,.sound-toggle,.piano-bottom p,.reset-button,.about-principles span,.watch-link small,.hero-teacher div>span,.booking-timezone,.booking-consent,.booking-help,.booking-confirmation .booking-reference,.reference-link{font-size:12px}
.piano-intro .small-caption{font-size:12px}
.booking-field input,.booking-field textarea{font-size:15px}
@media(max-width:600px){.hero-description{font-size:15px}.section-heading>p,.lesson-card p,.about-copy p,.format-note p,.lesson-steps p,.faq-list details p,.booking-intro p{font-size:15px}.booking-field input,.booking-field textarea{font-size:16px}}
.lesson-card .text-link,.hero .button-primary,.button-light{font-size:13px}
.footer p,.footer>a:not(.brand),.footer>span,.hero-image figcaption,.image-top>span:first-child{font-size:12px}
@media(max-width:600px){.mode,.sound-toggle{font-size:11px}.hero-play{font-size:12px}}
.booking-calendar{margin-top:18px;font-size:13px;padding:13px 18px;gap:16px}

/* Piano keys: flat inside the tilted cabinet. Real 3D keys z-fought with the keyboard plane
   (a pressed key turned dark) and their side faces overlapped neighbours on small screens */
.keyboard{transform-style:flat}
.piano-key,.piano-key.black{transform:none;transform-style:flat;backface-visibility:visible;transition:transform 90ms cubic-bezier(.2,.7,.3,1),background 90ms,box-shadow 90ms}
.piano-key:before{inset:auto -1px -10px;height:10px;transform:none;transition:height 90ms cubic-bezier(.2,.7,.3,1),bottom 90ms cubic-bezier(.2,.7,.3,1)}
.piano-key.black:before{inset:auto -1px -14px;height:14px}
.piano-key.active{transform:translateY(3px)}
.piano-key.active:before{bottom:-6px;height:6px}
.piano-key.black.active{transform:translateY(3px)}
.piano-key.black.active:before{bottom:-9px;height:9px}
.piano-key,.mode,.sound-toggle,.reset-button{-webkit-tap-highlight-color:transparent}
@media(max-width:600px){.piano-key:before{bottom:-8px;height:8px}.piano-key.black:before{bottom:-11px;height:11px}.piano-key.active{transform:translateY(2px)}.piano-key.active:before{bottom:-5px;height:5px}.piano-key.black.active:before{bottom:-7px;height:7px}}
@media(prefers-reduced-motion:reduce){.piano-key,.piano-key:before{transition:none}}
/* Touch screens: small controls get a finger-sized hit area */
@media(pointer:coarse){.mode,.sound-toggle,.reset-button{min-height:40px}.hero-play,.footer>a:not(.brand),.text-link{min-height:40px;display:inline-flex;align-items:center}.booking-consent input{width:20px;height:20px;margin-top:0}}