/* A journey from a single key into a personal musical studio. Route-scoped. */
.keys-landing{--keys-coral:#ef8766;--keys-ivory:#f7f1e8;--keys-ease:cubic-bezier(.23,1,.32,1)}
.keys-landing h1,.keys-landing h2,.keys-landing h3{margin:0;letter-spacing:-.045em;font-weight:650;line-height:1.06}
.keys-landing h2{font-size:clamp(34px,4.2vw,62px)}
.keys-hero{background:var(--keys-ivory);overflow:hidden;position:relative}
.keys-hero-inner{position:relative;min-height:710px;padding-top:32px;padding-bottom:25px}
.keys-breadcrumb{display:flex;gap:13px;align-items:center;font-size:13px;position:relative;z-index:2;color:#575951}
.keys-breadcrumb a{text-decoration:underline;text-underline-offset:4px}
.keys-hero-copy{position:relative;z-index:2;width:58%;padding-top:78px;padding-bottom:110px}
.keys-hero h1{font-size:clamp(58px,6.8vw,104px);max-width:11ch;line-height:1.01;letter-spacing:-.062em}
.keys-hero-copy>p{font-size:18px;line-height:1.65;margin:27px 0 30px;max-width:37ch}
.keys-hero-copy .button{min-height:54px}
.keys-explore{display:flex;gap:18px;align-items:center;width:fit-content;font-size:14px;margin-top:24px}
.keys-explore span{font-size:24px;line-height:1}
.keys-hero-art{position:absolute;right:-6%;top:104px;width:61%;margin:0;z-index:1}
.keys-hero-art::before{content:"";position:absolute;inset:1% 2% 0 0;background:var(--keys-coral);border-radius:50% 50% 12% 50%;transform:rotate(-8deg)}
.keys-hero-art img{position:relative;mix-blend-mode:multiply;border-radius:50% 50% 12% 50%;aspect-ratio:1.5;object-fit:cover}
.keys-hero-art figcaption{position:absolute;right:11%;bottom:-32px;font-size:14px;transform:rotate(-5deg)}
.keys-staff{position:absolute;width:100%;height:260px;bottom:36px;left:0;color:#ba6b51;opacity:.4;pointer-events:none}
.keys-hero-foot{position:absolute;bottom:22px;left:0;right:0;display:flex;justify-content:space-between;font-size:13px;color:#575951;z-index:2}
.keys-play{background:var(--ink);color:var(--paper);padding:55px 0 24px;position:relative}
.keys-play-heading{display:flex;justify-content:space-between;gap:30px;align-items:center;margin-bottom:32px}
.keys-play-heading h2{font-size:30px;letter-spacing:-.035em}
.keys-play-heading p{color:#c0c0b8;font-size:15px;margin:10px 0 0}
.keys-play .sound-control{background:var(--keys-coral);color:var(--ink);border-color:var(--keys-coral);flex-shrink:0;box-shadow:none}
.keys-play-instrument{position:relative}
.keys-play .piano{width:100%;margin:0;max-width:none;border-radius:12px;box-shadow:0 20px 50px #0003;overflow:visible}
.keys-play .key-bed{height:166px;border-radius:12px;overflow:visible}
.keys-play .piano-key{height:166px;border-radius:0 0 7px 7px}
.keys-play .piano-key:first-child{border-top-left-radius:12px}
.keys-play .piano-key:nth-child(8){border-top-right-radius:12px}
.keys-play .piano-key.black{height:99px;border-radius:0 0 6px 6px}
.keys-play .piano-key span{font-size:13px}
.keys-play .piano-key.is-playing:not(.black){background:#f6c3a7}
.keys-play-feedback{display:grid;grid-template-columns:auto 1fr;gap:12px 22px;align-items:center;margin-top:26px;min-height:94px}
.keys-chord{display:flex;gap:7px}
.keys-chord span{display:grid;place-items:center;width:36px;height:36px;border:1px solid #6b6d61;border-radius:50%;font-size:14px;transition:background-color 180ms ease,color 180ms ease,border-color 180ms ease}
.keys-chord span.is-hit{background:var(--keys-coral);border-color:var(--keys-coral);color:var(--ink)}
.keys-play-feedback p{margin:0;font-size:16px}
.keys-play-feedback small{grid-column:2;color:#b5b8ad;font-size:12px}
.keys-chord-replay{grid-column:2;justify-self:start;background:var(--keys-coral);color:var(--ink);font-size:14px;padding:10px 17px;margin-block:3px 6px}
.keys-chord-replay[hidden]{display:none}
@media(hover:hover) and (pointer:fine){.keys-chord-replay:hover{background:#f5a58a;color:var(--ink)}}
.keys-studio{background:var(--ink);color:var(--paper);padding:68px 0 110px;scroll-margin-top:24px}
.keys-studio-head{display:flex;justify-content:space-between;gap:40px;align-items:flex-end;margin-bottom:56px}
.keys-studio-head>p{color:var(--keys-coral);margin:0;font-size:17px}
.keys-studio-head h2{width:59%}
.keys-studio-grid{display:grid;grid-template-columns:.72fr 1.28fr;gap:65px;align-items:start}
.keys-instruments{padding-top:15px}
.keys-instruments button{position:relative;display:grid;grid-template-columns:1fr 24px;width:100%;text-align:left;border-top:1px solid #5c5e52;background:transparent;color:#aeb1a4;padding:24px 5px 27px;transition:color 180ms ease}
.keys-instruments button>span{font-size:clamp(30px,3.1vw,46px);font-weight:600;letter-spacing:-.045em;line-height:1.15}
.keys-instruments button>small{grid-column:1;font-size:14px;margin-top:9px}
.keys-instruments button>svg{grid-column:2;grid-row:1/3;width:22px;height:22px;align-self:center;transition:transform 180ms var(--keys-ease)}
.keys-instruments button[aria-pressed=true]{color:var(--keys-coral)}
.keys-instruments button[aria-pressed=true]>svg{transform:rotate(-35deg)}
.keys-instruments button:last-of-type{border-bottom:1px solid #5c5e52}
.keys-studio-intro{font-size:15px;color:#c0c0b8;line-height:1.7;max-width:36ch;margin-top:32px}
.keys-instrument-panel{margin:0}
.keys-instrument-image{background:var(--keys-ivory);border-radius:130px 18px 18px 18px;overflow:hidden;aspect-ratio:1.5}
.keys-instrument-image img{width:100%;height:100%;object-fit:cover}
.keys-instrument-panel figcaption{padding-top:27px;min-height:178px}
.keys-instrument-panel h3{font-size:28px}
.keys-instrument-panel figcaption>p{color:#c0c0b8;font-size:16px;line-height:1.7;max-width:53ch;margin:14px 0}
.keys-genres{display:flex;gap:9px;flex-wrap:wrap}
.keys-genres span{border:1px solid #67695c;border-radius:30px;padding:5px 13px;font-size:12px;color:#e4e4db}
.keys-instrument-panel .keys-load-status{color:var(--keys-coral);font-size:13px}
.keys-transition{display:flex;height:100px;background:var(--keys-ivory);overflow:hidden}
.keys-transition>span{flex:1;position:relative;border-right:1px solid #d2cec4;border-radius:0 0 5px 5px}
.keys-transition>span.black-edge::after{content:"";position:absolute;top:0;right:-26%;width:52%;height:67px;background:var(--ink);border-radius:0 0 4px 4px;z-index:1;transform-origin:top}
.keys-path{background:var(--keys-ivory);padding:110px 0}
.keys-path-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px;align-items:start}
.keys-path-intro{position:sticky;top:115px}
.keys-path-intro>p:first-child{color:#9a492f;margin:0 0 22px;font-size:16px}
.keys-path-intro>p:not(:first-child){max-width:36ch;color:var(--muted);margin:26px 0;font-size:17px}
.keys-steps article{display:grid;grid-template-columns:46px 1fr;gap:18px;padding:28px 0 40px;border-top:1px solid #c6c4b9}
.keys-steps article>span{font-size:17px;color:#9a492f}
.keys-steps h3{font-size:28px;letter-spacing:-.035em;line-height:1.2}
.keys-steps p{font-size:17px;line-height:1.75;color:var(--muted);margin:19px 0 0}
.keys-school{padding:110px 0;background:var(--paper)}
.keys-school-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:90px;align-items:center}
.keys-school figure{margin:0;position:relative}
.keys-school img{border-radius:14px 90px 14px 14px;aspect-ratio:1.12;object-fit:cover}
.keys-school figcaption{font-size:12px;color:var(--muted);margin-top:15px}
.keys-school h2{font-size:clamp(36px,4vw,56px)}
.keys-school p{font-size:17px;color:var(--muted);line-height:1.75;margin:22px 0}
.keys-school .button{margin-top:12px}
.keys-team{padding:80px 0 95px;background:var(--soft)}
.keys-team .section-head p{max-width:none}
.keys-team .teacher-rail{scroll-snap-type:x proximity}
.keys-questions{padding:100px 0 110px}
.keys-questions-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px}
.keys-questions h2{font-size:clamp(34px,3.4vw,49px)}
.keys-questions details{border-bottom:1px solid var(--line)}
.keys-questions details:first-child{border-top:1px solid var(--line)}
.keys-questions summary{display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none;padding:23px 0;font-size:18px;line-height:1.4}
.keys-questions summary::-webkit-details-marker{display:none}
.keys-questions summary::after{content:"+";color:#9a492f;font-size:25px;flex-shrink:0}
.keys-questions details[open] summary::after{content:"−"}
.keys-questions details p{font-size:16px;line-height:1.75;color:var(--muted);margin:0 0 26px}
.keys-questions .text-link{margin-top:30px}
@media(hover:hover) and (pointer:fine){.keys-instruments button:not([aria-pressed=true]):hover{color:var(--paper)}.keys-instruments button:hover svg{transform:translateX(5px)}.keys-explore:hover span{transform:translateY(3px)}.keys-explore span{transition:transform 180ms var(--keys-ease)}}
@media(prefers-reduced-motion:no-preference){
 .keys-hero-copy h1{animation:keys-title-in 700ms var(--keys-ease) both}
 .keys-hero-art{animation:keys-art-in 950ms var(--keys-ease) both}
 @supports(animation-timeline:view()){
  .keys-hero-art img{animation:keys-art-scroll linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .keys-staff{animation:keys-staff-scroll linear both;animation-timeline:view();animation-range:exit 0% exit 100%}
  .keys-transition>span.black-edge::after{animation:keys-bridge linear both;animation-timeline:view();animation-range:entry 0% entry 100%}
 }
}
@keyframes keys-title-in{from{opacity:.25;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes keys-art-in{from{opacity:0;transform:translateX(40px) rotate(3deg)}to{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes keys-art-scroll{from{transform:translateY(0) rotate(0)}to{transform:translateY(58px) rotate(-4deg)}}
@keyframes keys-staff-scroll{from{transform:translateX(0)}to{transform:translateX(-85px)}}
@keyframes keys-bridge{from{transform:scaleY(.35)}to{transform:scaleY(1)}}
@media(max-width:1100px){.keys-hero-inner{min-height:665px}.keys-hero-art{top:140px;right:-4%;width:60%}.keys-hero-copy{padding-top:68px}.keys-hero h1{font-size:clamp(58px,7.2vw,88px)}.keys-studio-grid{gap:40px}.keys-path-grid,.keys-school-grid{gap:50px}}
@media(max-width:800px){
 .keys-hero-inner{min-height:0;padding-top:24px;padding-bottom:25px}
 .keys-breadcrumb{font-size:11px;gap:9px}
 .keys-hero-copy{width:100%;padding-top:38px;padding-bottom:25px}
 .keys-hero h1{font-size:clamp(50px,9vw,74px);max-width:13ch}
 .keys-hero-copy>p{font-size:16px;line-height:1.65;margin:24px 0}
 .keys-explore{margin-top:20px;font-size:13px}
 .keys-hero-art{position:relative;top:auto;right:auto;width:100%;margin:5px 0 52px}
 .keys-hero-art figcaption{bottom:-28px;font-size:12px}
 .keys-staff{bottom:55px;height:160px;width:120%;left:-10%}
 .keys-hero-foot{position:relative;bottom:auto;gap:14px;left:auto;right:auto;font-size:11px}
 .keys-play{padding-top:36px}
 .keys-play-heading{align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:24px}
 .keys-play-heading h2{font-size:28px}
 .keys-play-heading p{font-size:14px;max-width:36ch}
 .keys-play .sound-control{min-height:48px}
 .keys-play .key-bed,.keys-play .piano-key{height:134px}
 .keys-play .piano-key.black{height:78px;min-width:0}
 .keys-play .piano-key span{font-size:11px}
 .keys-play-feedback{grid-template-columns:1fr;gap:13px;margin-top:20px}
 .keys-play-feedback p{font-size:15px}
 .keys-play-feedback small{grid-column:1;max-width:44ch;font-size:11px}
 .keys-chord-replay{grid-column:1}
 .keys-studio{padding:60px 0 70px}
 .keys-studio-head{display:block;margin-bottom:30px}
 .keys-studio-head>p{font-size:14px;margin-bottom:20px}
 .keys-studio-head h2{width:auto;font-size:clamp(36px,6vw,52px)}
 .keys-studio-grid{grid-template-columns:1fr;gap:30px}
 .keys-instruments{padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
 .keys-instruments button{display:block;padding:17px 0;border-bottom:1px solid #5c5e52}
 .keys-instruments button>span{font-size:clamp(20px,3.9vw,29px)}
 .keys-instruments button>small{display:block;min-height:35px;font-size:11px;line-height:1.5;margin-top:8px}
 .keys-instruments button>svg{display:none}
 .keys-studio-intro{grid-column:1/-1;max-width:48ch;margin:12px 0 0;font-size:14px}
 .keys-instrument-image{border-top-left-radius:75px}
 .keys-instrument-panel figcaption{min-height:180px;padding-top:24px}
 .keys-instrument-panel figcaption>p{font-size:15px}
 .keys-path{padding:65px 0}
 .keys-transition{height:65px}.keys-transition>span.black-edge::after{height:44px}
 .keys-path-grid{grid-template-columns:1fr;gap:35px}
 .keys-path-intro{position:static}
 .keys-path-intro>p:not(:first-child){font-size:16px;max-width:44ch;margin:23px 0}
 .keys-steps article{grid-template-columns:30px 1fr;gap:14px;padding:24px 0 30px}
 .keys-steps h3{font-size:25px}
 .keys-steps p{font-size:16px;margin-top:15px}
 .keys-school{padding:65px 0}
 .keys-school-grid{grid-template-columns:1fr;gap:35px}
 .keys-school img{aspect-ratio:1.4;border-top-right-radius:65px}
 .keys-school p{font-size:16px}
 .keys-team{padding:60px 0}
 .keys-team h2{font-size:clamp(33px,6vw,48px)}
 .keys-questions{padding:65px 0}
 .keys-questions-grid{grid-template-columns:1fr;gap:30px}
 .keys-questions summary{font-size:17px}
}