*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f0e6;color:#25251e;font-family:Arial,sans-serif}header,main,footer{width:min(92%,1400px);margin:auto}header,footer,.meta{display:flex;align-items:center;justify-content:space-between}header{padding:25px 0;border-bottom:1px solid}.brand{font:bold 27px Georgia;letter-spacing:-1.8px}.brand i{color:#a84729}a{color:inherit}nav a{font-size:14px;margin-left:22px;text-decoration:none}section{padding:68px 0}.hero{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:5%}.tag,.meta,footer{font:11px monospace;letter-spacing:1.5px;text-transform:uppercase}h1,h2,h3{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(62px,7.7vw,128px);line-height:.92;letter-spacing:-.065em;margin:30px 0}h1 i{color:#994025}p{line-height:1.6;max-width:430px}.cta{display:inline-block;background:#25251e;color:white;padding:15px 23px;border-radius:30px;text-decoration:none;margin:12px 0}.poster{background:#ad492e;color:#fff2d7;position:relative;overflow:hidden;aspect-ratio:1.12;display:flex;align-items:center;justify-content:center}.poster svg{width:100%;height:100%}.meta{position:absolute;inset:18px 20px auto}.caption{position:absolute;bottom:17px;left:20px;font:italic 16px Georgia}.lesson{border-top:1px solid;display:grid;grid-template-columns:1fr 1.1fr;gap:6%}h2{font-size:clamp(40px,5vw,70px);line-height:1;letter-spacing:-.055em;margin:20px 0}details{border-bottom:1px solid #afa99a;padding:20px 0}summary{cursor:pointer;font:25px Georgia}details p{margin-bottom:0}.play{background:#dddcc6;padding:40px;border-radius:3px} .keys{position:relative;display:flex;width:100%;height:clamp(210px,24vw,300px);margin:25px auto 0;border:5px solid #16151a;border-radius:6px;box-shadow:0 8px 20px #12101488}
.keys button{display:flex;align-items:flex-end;justify-content:center;flex:1;min-width:0;background:linear-gradient(#c9bea9,#fff3dd 70%);color:#352b28;border:1px solid #5d5148;border-radius:0 0 4px 4px;padding:0 0 15px;font:16px Georgia;cursor:pointer;touch-action:manipulation}
.keys .accidental{position:absolute;left:var(--position);transform:translateX(-50%);top:0;width:8.3%;height:62%;background:linear-gradient(90deg,#17151a,#3e3940 78%,#201d23);color:#f7dfba;border-color:#131217;border-bottom:6px solid #111015;box-shadow:2px 4px 4px #211c2355;font:13px Arial;z-index:1}
.keys button:active,.keys button.on{background:#e9ad73}.keys .accidental.on,.keys .accidental:active{background:#805735}.keys button:focus-visible{outline-offset:-4px}
footer{padding:30px 0;margin-top:50px;border-top:1px solid}@media(max-width:700px){.hero,.lesson{grid-template-columns:1fr;gap:30px}section{padding:38px 0}nav a{margin-left:12px}.play{padding:24px}.poster{aspect-ratio:1.35}}

:root{color-scheme:dark}body{background:radial-gradient(ellipse at 72% 15%,#29232a 0,transparent 42%),#11151b;color:#f3e9d1}header,footer,.lesson,details{border-color:#55504b}header{padding:22px 0}.brand{font-style:italic;font-size:32px}.brand i,h1 i{color:#edab73}.tag,.meta{color:#e8b887}.hero{padding:52px 0 60px}.hero p,details p,.play p,#contact p{color:#d0c9be}.cta{background:#ebba82;color:#20191b;font-weight:600}.cta:hover{background:#ffdbac}a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid #e990a9;outline-offset:3px}.poster{background:#562935;aspect-ratio:1.19;border:1px solid #976c5a}.poster svg{position:absolute;inset:0}.poster .meta,.caption{z-index:1;color:#ffdfad}.caption{letter-spacing:.07em}.lesson{padding-top:52px}.lesson summary{color:#f2d4a8}.play{background:radial-gradient(ellipse at right top,#49323a,transparent 65%),#23242b;border:1px solid #70524a}.keys button{color:#322927}.keys{border-color:#151419}.keys button:after{background:#201e24}.keys button.on{background:#edab73}#contact{border-bottom:1px solid #57504c}footer{border:0;margin:0 auto}.hero h1{font-size:clamp(68px,7.6vw,123px)}@media(max-width:700px){.hero{padding:34px 0}.poster{aspect-ratio:1.28}}

.game-intro{padding:48px 0 28px}.game-intro h1{margin:18px 0;font-size:clamp(56px,8vw,104px)}.game-intro p{max-width:570px}.game .cta{border:0;cursor:pointer;font-size:16px}.game .cta:disabled{opacity:.55}.game #status{min-height:1.6em;color:#ffe0b6}.game h2{font-size:clamp(30px,4vw,50px)}.game{margin-bottom:40px}
@media(max-width:560px){header{flex-wrap:wrap;gap:14px}nav{display:flex;flex-wrap:wrap;gap:16px}nav a{margin:0}}

nav a[aria-current]{color:#edba89;text-decoration:underline;text-underline-offset:6px}.intro{max-width:900px}.intro h1{font-size:clamp(52px,7vw,98px)}.intro p{max-width:550px}.booking{min-height:60vh}.address{color:#edba89;overflow-wrap:anywhere}footer{margin-top:40px}