/* Big Piano Quiz, presentation page.
   A concert-hall-at-night rendition of the app's daylight identity: same type
   family (Fraunces, Inter, IBM Plex Mono, Noto Music), same gold and bronze,
   set against warm near-black. All artwork is hand-built SVG and CSS. */

/* ============ Tokens ============ */
:root{
  --night:#16110B;
  --night-2:#1C1610;
  --panel:#211A12;
  --line:rgba(243,237,228,.10);
  --line-strong:rgba(243,237,228,.20);
  --cream:#F4EEE3;
  --cream-dim:#C9BDAB;
  --faint:#93876F;
  --gold:#D9A62E;
  --gold-2:#F0C868;
  --gold-deep:#8A6216;
  --bronze:#7A4A21;
  --jade:#7FC7A4;
  --ember:#E08A72;
  --serif:'Fraunces', Georgia, 'Times New Roman', serif;
  --sans:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --music:'Noto Music', serif;
  --wrap:1140px;
  --glow:0 0 26px rgba(217,166,46,.35);
}

*{box-sizing:border-box;}
html{scroll-padding-top:96px;}
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
html,body{margin:0;}
body{
  font-family:var(--sans);
  background:var(--night);
  color:var(--cream);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:rgba(217,166,46,.38); color:#FFF8EA;}
a{color:inherit;}
:focus-visible{outline:2px solid var(--gold-2); outline-offset:3px; border-radius:4px;}
img,svg{max-width:100%;}

/* Film-grain wash over the whole stage, under the content. */
body::before{
  content:''; position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}
main,header,footer{position:relative; z-index:1;}

/* ============ Type helpers ============ */
.eyebrow{
  font:500 .76rem var(--mono); letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold); margin:0 0 18px;
}
h1,h2,h3{font-family:var(--serif); font-optical-sizing:auto; margin:0;}
h1{
  font-size:clamp(2.7rem, 6.4vw, 5rem); font-weight:600; line-height:1.03;
  letter-spacing:-.016em; margin-bottom:26px;
}
h2{
  font-size:clamp(1.95rem, 3.8vw, 3rem); font-weight:600; line-height:1.1;
  letter-spacing:-.012em; margin-bottom:20px;
}
h3{font-size:1.16rem; font-weight:600; letter-spacing:-.004em; margin-bottom:8px;}
.ink-gold{
  background:linear-gradient(115deg, #F6DE9E 8%, var(--gold) 46%, #A9740F 92%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.ink-gold em{font-style:italic;}
.lede{
  font-size:clamp(1.02rem, 1.5vw, 1.16rem); color:var(--cream-dim);
  max-width:640px; margin:0 0 30px;
}
.body{color:var(--cream-dim); margin:0 0 16px; max-width:520px;}
.body.dim{color:var(--faint);}
.text-link{
  color:var(--gold-2); text-decoration:none; font-weight:600; font-size:.98rem;
  border-bottom:1px solid rgba(240,200,104,.35); padding-bottom:2px;
}
.text-link:hover{border-bottom-color:var(--gold-2);}
.text-link::after{content:' \2192';}
.text-btn{
  appearance:none; background:none; border:0; cursor:pointer; padding:0;
  font:500 .88rem var(--mono); color:var(--faint); letter-spacing:.02em;
}
.text-btn:hover{color:var(--cream-dim);}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  border-radius:999px; text-decoration:none; font:600 1rem var(--sans);
  padding:14px 28px; transition:transform .22s ease, box-shadow .22s ease,
  border-color .22s ease, color .22s ease, filter .22s ease;
}
.btn.gold{
  background:linear-gradient(180deg, #F3CF7B, var(--gold));
  color:#251A05;
  box-shadow:0 12px 32px -12px rgba(217,166,46,.65), inset 0 1px 0 rgba(255,255,255,.45);
}
.btn.gold:hover{transform:translateY(-2px); filter:brightness(1.06);
  box-shadow:0 18px 40px -12px rgba(217,166,46,.8), inset 0 1px 0 rgba(255,255,255,.45);}
.btn.ghost{border:1px solid var(--line-strong); color:var(--cream);}
.btn.ghost:hover{border-color:var(--gold-2); color:var(--gold-2); transform:translateY(-2px);}
.btn.small{padding:9px 18px; font-size:.88rem;}
.btn.big{padding:18px 38px; font-size:1.12rem;}

/* ============ Progress hairline & top bar ============ */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:60;
  background:linear-gradient(90deg, var(--gold-2), var(--gold));
  transform-origin:0 50%; transform:scaleX(0);
}
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(22,17,11,.78);
  -webkit-backdrop-filter:blur(14px) saturate(1.15); backdrop-filter:blur(14px) saturate(1.15);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--wrap); margin:0 auto; padding:14px 24px;
  display:flex; align-items:center; gap:26px;
}
.wordmark{
  font-family:var(--serif); font-weight:700; font-size:1.18rem; letter-spacing:-.01em;
  text-decoration:none;
}
.wordmark em{font-style:italic; color:var(--gold-2);}
.topnav{
  display:flex; gap:22px; margin-left:auto; overflow-x:auto; max-width:100%;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.topnav::-webkit-scrollbar{display:none;}
.topnav a{
  text-decoration:none; font:500 .9rem var(--sans); color:var(--cream-dim);
  transition:color .2s ease; white-space:nowrap; padding:2px 0;
}
.topnav a:hover{color:var(--gold-2);}
@media (max-width:640px){ .topnav{gap:16px;} .topnav a{font-size:.84rem;} }

/* ============ Hero ============ */
.hero{
  /* Cap the height so a tall monitor stops stretching the hero: past ~920px the
     stage settles onto the floor and the next section peeks in, instead of the
     copy floating in a taller and taller centered void. */
  position:relative; min-height:min(100svh, 920px); display:flex; flex-direction:column;
  overflow:hidden;
}
.hero-light{
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(58% 44% at 24% 8%, rgba(217,166,46,.16), transparent 68%),
    radial-gradient(42% 34% at 82% 16%, rgba(122,74,33,.14), transparent 70%),
    radial-gradient(70% 46% at 50% 108%, rgba(240,200,104,.10), transparent 62%);
}
.hero-clef{
  position:absolute; top:2%; right:-6vw; pointer-events:none; user-select:none;
  font-family:var(--music); font-size:clamp(320px, 44vw, 620px); line-height:.9;
  color:rgba(217,166,46,.055);
}
.hero-notes{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.hero-notes span{
  position:absolute; bottom:-60px; font-family:var(--music);
  color:rgba(240,200,104,.4); opacity:0;
  animation:rise var(--dur,16s) linear var(--delay,0s) infinite;
}
@keyframes rise{
  0%{transform:translateY(0) translateX(0) rotate(0deg); opacity:0;}
  8%{opacity:var(--op,.4);}
  78%{opacity:var(--op,.4);}
  100%{transform:translateY(-105vh) translateX(var(--dx,30px)) rotate(var(--rot,18deg)); opacity:0;}
}
.hero-copy{
  flex:1; display:flex; flex-direction:column; justify-content:center;
  max-width:var(--wrap); width:100%; margin:0 auto;
  padding:calc(72px + 1vh) 24px 32px;
}
.cta-row{display:flex; flex-wrap:wrap; gap:14px; align-items:center;}
.cta-row.center{justify-content:center;}

/* The stage piano: a perspective keyboard rising out of the dark. */
.hero-stage{position:relative; padding-top:6px;}
.live-hint{
  margin:0 auto 14px; width:max-content; max-width:90%;
  font:500 .78rem var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--faint); display:flex; align-items:center; gap:10px;
}
.pulse-dot{
  width:7px; height:7px; border-radius:50%; background:var(--gold-2);
  box-shadow:0 0 0 0 rgba(240,200,104,.55); animation:pulse 2.2s ease-out infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(240,200,104,.55);}
  70%{box-shadow:0 0 0 12px rgba(240,200,104,0);}
  100%{box-shadow:0 0 0 0 rgba(240,200,104,0);}
}
.stage-piano-wrap{
  position:relative; height:clamp(170px, 25vh, 250px); overflow:hidden;
  perspective:1050px; perspective-origin:50% -36%;
}
.stage-piano{
  position:absolute; left:50%; bottom:-4px; width:min(1220px, 104vw);
  height:calc(100% + 40px);
  transform:translateX(-50%) rotateX(44deg);
  transform-origin:50% 0%;
  display:flex; gap:0; padding:0 2px;
}
.stage-piano-wrap::before{
  content:''; position:absolute; inset:0; z-index:4; pointer-events:none;
  background:linear-gradient(90deg, var(--night) 0%, transparent 10% 90%, var(--night) 100%);
}
.stage-piano-wrap::after{
  content:''; position:absolute; inset:0 0 auto 0; height:44%; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, var(--night) 4%, rgba(22,17,11,0) 100%);
}
.hero-stage::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:11px; z-index:5;
  pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(240,200,104,.65) 18% 82%, transparent);
  filter:blur(7px);
}
.nb{white-space:nowrap;}

/* ============ Piano keys (shared by the stage and the demo) ============ */
.piano{display:flex; width:100%; height:100%; position:relative; touch-action:none;}
.wkey{
  position:relative; flex:1 0 0; margin:0 1px; cursor:pointer; border:0; padding:0;
  background:linear-gradient(180deg, #A2977F 0%, #DDD4C0 40%, #F5EFE2 100%);
  border-radius:0 0 5px 5px;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25), inset 1px 0 0 rgba(255,255,255,.25);
}
.wkey::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:7px;
  border-radius:0 0 5px 5px;
  background:linear-gradient(180deg, rgba(84,72,52,.0), rgba(46,38,24,.38));
}
.wkey.down{
  background:linear-gradient(180deg, #B49B60 0%, #E8CE93 46%, #F7E7BC 100%);
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.25), 0 0 22px rgba(240,200,104,.5);
  /* top, not transform: a transform here would make the pressed white key a
     stacking context, trapping its child black key so the next white key paints
     over it (the black key clipped on press). top:2px presses it the same
     without a new context, so the black key keeps sitting above every key. */
  top:2px;
}
/* The black key is a child of the white key, so the parent's 2px press would
   drag it down too. A black key sits between two white keys and belongs to
   neither press, so cancel the shift and keep it visually anchored. */
.wkey.down > .bkey{ top:-2px; }
.klabel{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font:500 .62rem var(--mono); color:#8A7F68; pointer-events:none; user-select:none;
}
.bkey{
  position:absolute; top:0; right:-31%; width:62%; height:60%; z-index:3;
  cursor:pointer; border:0; padding:0;
  background:linear-gradient(180deg, #060504 0%, #191410 55%, #40382A 100%);
  border-radius:0 0 4px 4px;
  box-shadow:0 5px 9px rgba(0,0,0,.55), inset 0 -2px 0 rgba(255,244,214,.14);
}
.bkey.down{
  background:linear-gradient(180deg, #241B08 0%, #5C4715 60%, #93741F 100%);
  box-shadow:0 2px 5px rgba(0,0,0,.5), 0 0 20px rgba(240,200,104,.45);
  transform:translateY(2px);
}

/* ============ Stats band ============ */
.stats{
  background:linear-gradient(180deg, var(--night-2), var(--night));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.stats-row{
  max-width:var(--wrap); margin:0 auto; padding:34px 24px;
  display:flex; flex-wrap:wrap; justify-content:center; gap:18px 0;
}
.stat{
  flex:1 1 190px; min-width:170px; text-align:center; padding:6px 22px; margin:0;
}
.stat + .stat{border-left:1px solid var(--line);}
.stat dt{
  font-family:var(--serif); font-weight:600; font-size:clamp(2rem, 3.4vw, 2.8rem);
  color:var(--gold-2); line-height:1;
}
.stat dt .unit{font-size:.55em; margin-left:2px;}
.stat dd{margin:8px 0 0; font-size:.86rem; color:var(--faint);}

/* ============ Movement scaffolding ============ */
.movement{padding:clamp(90px, 11vw, 148px) 0; position:relative;}
.movement.alt{background:linear-gradient(180deg, var(--night-2), var(--night));
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.mv-head{max-width:760px; margin-bottom:clamp(40px, 5vw, 64px);}
.two-col{display:grid; grid-template-columns:minmax(300px, 5fr) 7fr; gap:clamp(42px, 6vw, 92px);}
.sticky-block{position:sticky; top:112px;}
.card{
  background:linear-gradient(180deg, rgba(243,237,228,.05), rgba(243,237,228,.016));
  border:1px solid var(--line); border-radius:20px; padding:26px;
  transition:border-color .3s ease, transform .3s ease;
}
.card:hover{border-color:rgba(240,200,104,.32);}

/* ============ Movement I: the program ============ */
.program{list-style:none; margin:0; padding:0;}
.lv{
  display:grid; grid-template-columns:52px 60px 1fr; gap:20px; align-items:center;
  padding:17px 10px; border-bottom:1px solid var(--line); transition:background .25s ease;
}
.lv:first-child{border-top:1px solid var(--line);}
.lv:hover{background:rgba(217,166,46,.045);}
.lv-num{font:500 .84rem var(--mono); letter-spacing:.1em; color:var(--gold);}
.lv-glyph{width:60px; height:38px; overflow:visible;}
.lv-glyph .st line{stroke:rgba(243,237,228,.3); stroke-width:1;}
.lv-glyph .dot{fill:var(--gold-2); filter:drop-shadow(0 0 4px rgba(240,200,104,.6));}
.lv-glyph .lv-clef{font-family:var(--music); font-size:15px; fill:rgba(243,237,228,.62);}
.lv-glyph .lv-clef.bass{font-size:13px;}
.lv-glyph .lv-acc{font-size:9px; fill:var(--gold-2); font-family:var(--sans);}
.lv-text h3{margin-bottom:3px; font-size:1.08rem;}
.lv-text p{margin:0; font-size:.9rem; color:var(--faint);}

/* ============ Movement II: practice ============ */
.practice-grid{display:grid; grid-template-columns:5fr 7fr; gap:24px; align-items:stretch;}
.weights-card{margin:0; display:flex; flex-direction:column;}
.weights{
  display:flex; align-items:flex-end; gap:12px; height:230px; padding:16px 8px 12px;
  border-bottom:1px solid var(--line); margin-bottom:18px; flex:1;
}
.wcol{
  position:relative; flex:1; height:100%; display:flex; flex-direction:column;
  justify-content:flex-end; align-items:center; gap:9px;
}
.wcol i{
  display:block; width:100%; height:var(--h); border-radius:9px 9px 3px 3px;
  background:linear-gradient(180deg, rgba(243,237,228,.17), rgba(243,237,228,.05));
  border:1px solid rgba(243,237,228,.09);
  transform-origin:50% 100%; animation:breathe 4.6s ease-in-out infinite;
}
.wcol:nth-child(2) i{animation-delay:.6s;}
.wcol:nth-child(3) i{animation-delay:1.1s;}
.wcol:nth-child(4) i{animation-delay:1.7s;}
.wcol:nth-child(5) i{animation-delay:2.3s;}
.wcol:nth-child(6) i{animation-delay:2.9s;}
.wcol:nth-child(7) i{animation-delay:3.4s;}
@keyframes breathe{0%,100%{transform:scaleY(1);} 50%{transform:scaleY(1.07);}}
.wcol b{font:500 .68rem var(--mono); color:var(--faint);}
.wcol.focus i{
  background:linear-gradient(180deg, var(--gold-2), #B77E1C);
  border-color:rgba(240,200,104,.55); box-shadow:var(--glow);
}
.wcol.focus b{color:var(--gold-2);}
.wcol.focus::after{
  content:'needs work'; position:absolute; bottom:calc(var(--h) + 26px); left:50%;
  transform:translateX(-50%); white-space:nowrap;
  font:500 .62rem var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--gold-2); border:1px solid rgba(240,200,104,.4); border-radius:999px;
  padding:3px 9px; background:rgba(33,26,18,.9);
}
.weights-card figcaption p{margin:0; font-size:.92rem; color:var(--faint);}

.demo-card{display:flex; flex-direction:column; gap:14px;}
.demo-head{display:flex; align-items:center; justify-content:space-between; gap:12px;}
.demo-head h3{margin:0;}
.streak-chip{
  font:500 .78rem var(--mono); color:var(--gold-2);
  border:1px solid rgba(240,200,104,.4); border-radius:999px; padding:4px 12px;
  background:rgba(33,26,18,.9);
}
.streak-chip b{font-weight:600;}
.demo-staff{display:grid; place-items:center; padding:4px 0 0;}
.demo-staff svg{width:min(300px, 78%); overflow:visible;}
.demo-staff .sline{stroke:rgba(243,237,228,.42); stroke-width:1.1;}
.demo-staff .sclef{font-family:var(--music); font-size:58px; fill:rgba(243,237,228,.82);}
.demo-staff .snote{fill:var(--gold-2); filter:drop-shadow(0 0 7px rgba(240,200,104,.55));}
.demo-staff .sstem{stroke:var(--gold-2); stroke-width:1.6;}
.demo-staff .sledger{stroke:rgba(243,237,228,.42); stroke-width:1.1;}
.demo-staff.ok .snote{fill:var(--jade); filter:drop-shadow(0 0 7px rgba(127,199,164,.6));}
.demo-staff.ok .sstem{stroke:var(--jade);}
.demo-staff.no{animation:shake .34s ease;}
@keyframes shake{
  0%,100%{transform:translateX(0);} 25%{transform:translateX(-6px);}
  55%{transform:translateX(5px);} 80%{transform:translateX(-3px);}
}
.demo-feedback{
  margin:0; text-align:center; font:500 .86rem var(--mono); color:var(--faint);
  min-height:1.5em;
}
.demo-feedback.ok{color:var(--jade);}
.demo-feedback.no{color:var(--ember);}
.demo-piano{height:150px;}
.demo-piano .wkey{
  background:linear-gradient(180deg, #D9D0BC 0%, #EFE8D8 55%, #F7F1E5 100%);
}
.demo-foot{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}

/* ============ Movement III: songs ============ */
.songs-grid{display:grid; grid-template-columns:7fr 5fr; gap:24px; align-items:start;}
.songs-side{display:flex; flex-direction:column; gap:24px;}

.player-mock{
  margin:0; border:1px solid var(--line); border-radius:22px; overflow:hidden;
  background:#1B1510;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.8);
}
.pm-top{
  display:flex; align-items:center; gap:14px; padding:13px 18px;
  border-bottom:1px solid var(--line);
}
.pm-dots{display:flex; gap:6px;}
.pm-dots i{width:10px; height:10px; border-radius:50%; background:rgba(243,237,228,.16);}
.pm-title{flex:1; text-align:center; font:500 .8rem var(--mono); color:var(--cream-dim);}
.pm-chips{display:flex; gap:8px;}
.pm-chips b{
  font:500 .7rem var(--mono); color:var(--gold-2); font-weight:500;
  border:1px solid rgba(240,200,104,.35); border-radius:999px; padding:3px 10px;
}
.pm-video{
  position:relative; aspect-ratio:16/7; display:grid; place-items:center;
  background:radial-gradient(130% 150% at 28% -10%, #2C2416, #110D07 62%);
}
.pm-play{
  width:66px; height:66px; border-radius:50%; border:1.5px solid rgba(243,237,228,.55);
  position:relative; background:rgba(22,17,11,.4);
}
.pm-play::after{
  content:''; position:absolute; left:26px; top:20px;
  border-left:20px solid var(--cream); border-top:13px solid transparent;
  border-bottom:13px solid transparent;
}
.pm-corner{position:absolute; width:28px; height:28px; border:2px solid var(--gold);}
.pm-corner.tl{top:12px; left:12px; border-right:0; border-bottom:0;}
.pm-corner.br{bottom:12px; right:12px; border-left:0; border-top:0;}
.pm-cap{
  position:absolute; bottom:12px; left:14px; font:500 .7rem var(--mono);
  letter-spacing:.08em; color:var(--faint);
}
.pm-sheet{position:relative; border-top:1px solid var(--line); background:#150F09;}
.pm-sheet .ribbon{display:block; width:100%; height:112px;}
.ribbon .rst line{stroke:rgba(243,237,228,.3); stroke-width:1;}
.ribbon .rst .bar{stroke:rgba(243,237,228,.14);}
.ribbon .rnotes ellipse{fill:#E7DEC9;}
.ribbon-move{animation:ribbonflow 15s linear infinite;}
@keyframes ribbonflow{to{transform:translateX(-600px);}}
.pm-playhead{
  position:absolute; left:33%; top:9%; bottom:9%; width:2px; z-index:2;
  background:linear-gradient(180deg, transparent, var(--gold-2) 16% 84%, transparent);
  box-shadow:0 0 16px rgba(240,200,104,.75);
}
.pm-caption{padding:20px 22px 24px;}
.pm-caption p{margin:0 0 16px; font-size:.94rem; color:var(--faint);}
.chip-row{list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0;}
.chip-row li{
  font:500 .7rem var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-dim); border:1px solid var(--line-strong); border-radius:999px;
  padding:5px 12px;
}

.roll-card{margin:0; padding:0; overflow:hidden;}
.roll{display:block; width:100%; background:linear-gradient(180deg, #191209, #0F0B06);}
.roll .bars .rh{fill:var(--jade); opacity:.92; filter:url(#glow);}
.roll .bars .lh{fill:var(--ember); opacity:.92; filter:url(#glow);}
.roll-move{animation:rollfall 12s linear infinite;}
@keyframes rollfall{to{transform:translateY(312px);}}
.roll .kb-bed{fill:#0C0906;}
.roll .wk rect{fill:#EDE6D5;}
.roll .wk rect.lit{fill:var(--gold-2); filter:url(#glow);}
.roll .bk rect{fill:#171209;}
.roll-card figcaption{padding:18px 22px 22px;}
.roll-card figcaption p{margin:0; font-size:.92rem; color:var(--faint);}

.intro-card p{margin:0 0 18px; font-size:.94rem; color:var(--faint);}
.intro-card .text-link{font-size:.92rem;}
.intro-chiprow{margin-top:20px;}
.intro-line{display:flex; gap:8px; flex-wrap:wrap;}
.intro-line span{
  width:40px; height:40px; border:1px solid var(--line-strong); border-radius:11px;
  display:grid; place-items:center; font:500 .9rem var(--mono); color:var(--cream-dim);
  animation:introglow 6.4s linear infinite;
}
.intro-line span:nth-child(1){animation-delay:0s;}
.intro-line span:nth-child(2){animation-delay:.8s;}
.intro-line span:nth-child(3){animation-delay:1.6s;}
.intro-line span:nth-child(4){animation-delay:2.4s;}
.intro-line span:nth-child(5){animation-delay:3.2s;}
.intro-line span:nth-child(6){animation-delay:4s;}
.intro-line span:nth-child(7){animation-delay:4.8s;}
.intro-line span:nth-child(8){animation-delay:5.6s;}
@keyframes introglow{
  0%, 10%{background:linear-gradient(180deg, #F3CF7B, var(--gold)); color:#251A05;
    border-color:var(--gold-2); box-shadow:var(--glow);}
  13%, 100%{background:none; color:var(--cream-dim); border-color:var(--line-strong);
    box-shadow:none;}
}

/* ============ Movement IV: rhythm ============ */
.rhythm-grid{grid-template-columns:5fr 7fr; align-items:center;}
.metro-fig{margin:0; position:relative; display:grid; place-items:center;}
.metro-fig::before{
  content:''; position:absolute; width:70%; aspect-ratio:1;
  background:radial-gradient(50% 50% at 50% 50%, rgba(217,166,46,.14), transparent 70%);
}
.metro{width:min(300px, 74%); position:relative;}
.metro-body{stroke:rgba(217,166,46,.6); stroke-width:1.4;}
.metro-slot{stroke:rgba(243,237,228,.18); stroke-width:2;}
.metro-base{fill:#241C11; stroke:rgba(217,166,46,.5); stroke-width:1.2;}
.pendulum line{stroke:var(--gold-2); stroke-width:2.6; stroke-linecap:round;}
.pendulum rect{fill:var(--gold); stroke:var(--gold-2); stroke-width:1;}
.pendulum circle{fill:var(--gold-deep);}
.pendulum{
  transform-box:view-box; transform-origin:110px 252px;
  animation:swing .86s ease-in-out infinite alternate;
}
@keyframes swing{from{transform:rotate(-13deg);} to{transform:rotate(13deg);}}
.beat-dots circle{fill:rgba(243,237,228,.22); animation:beatdot 1.72s linear infinite;}
.beat-dots circle:nth-child(2){animation-delay:.43s;}
.beat-dots circle:nth-child(3){animation-delay:.86s;}
.beat-dots circle:nth-child(4){animation-delay:1.29s;}
@keyframes beatdot{
  0%, 18%{fill:var(--gold-2);} 22%, 100%{fill:rgba(243,237,228,.22);}
}

/* ============ Movement V: rings ============ */
.trio{display:grid; grid-template-columns:repeat(3, 1fr); gap:22px;}
.ring-card{text-align:center; padding:32px 26px 30px;}
.ring-card p{margin:0; font-size:.92rem; color:var(--faint);}
.ring-wrap{position:relative; width:150px; margin:0 auto 20px;}
.ring{display:block; width:100%;}
.ring circle{fill:none; stroke-width:9;}
.ring .track{stroke:rgba(243,237,228,.1);}
.ring .val{
  stroke:var(--gold); stroke-linecap:round;
  transform:rotate(-90deg); transform-origin:center;
  stroke-dasharray:364.4; stroke-dashoffset:364.4;
  transition:stroke-dashoffset 1.5s cubic-bezier(.2,.7,.2,1) .25s;
  filter:drop-shadow(0 0 8px rgba(217,166,46,.45));
}
.ring-card.in .ring .val{stroke-dashoffset:calc(364.4 * (1 - var(--frac, .75)));}
.ring-label{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2px;
}
.ring-label b{
  font-family:var(--serif); font-weight:600; font-size:2.1rem; color:var(--gold-2);
  line-height:1;
}
.ring-label b i{font-style:normal; font-size:.55em;}
.ring-label span{
  font:500 .66rem var(--mono); letter-spacing:.18em; text-transform:uppercase;
  color:var(--faint);
}
.boards-note{
  max-width:700px; margin:52px auto 0; text-align:center; color:var(--cream-dim);
  font-size:.98rem; padding-top:34px; position:relative;
}
.boards-note::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:64px; height:1px; background:linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* ============ Movements VI + VII: cards & icons ============ */
.input-card, .plain-card{padding:30px 26px;}
.input-card p, .plain-card p{margin:0; font-size:.94rem; color:var(--faint);}
.ic{
  width:46px; height:46px; margin-bottom:18px; overflow:visible;
  stroke:var(--gold); fill:none; stroke-width:1.5; stroke-linecap:round;
  stroke-linejoin:round; filter:drop-shadow(0 0 9px rgba(217,166,46,.3));
}
.ic .fill{fill:var(--gold); stroke:none;}
.ic .thin{stroke-width:1.1; opacity:.7;}

/* ============ Coda & footer ============ */
.coda{
  position:relative; text-align:center; padding:clamp(110px, 15vw, 190px) 24px;
  overflow:hidden;
}
.coda-light{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(52% 58% at 50% 44%, rgba(217,166,46,.15), transparent 72%);
}
.coda .eyebrow{margin-bottom:22px;}
.coda-title{
  font-size:clamp(3.2rem, 9vw, 6.4rem); letter-spacing:-.02em; margin-bottom:22px;
}
.coda-title em{font-style:italic;}
.coda .lede{margin-left:auto; margin-right:auto; margin-bottom:36px;}

.foot{border-top:1px solid var(--line); padding:56px 24px 72px; text-align:center;}
.foot-inner{max-width:var(--wrap); margin:0 auto;}
.foot-brand{font-family:var(--serif); font-weight:700; font-size:1.3rem; margin:0 0 14px;}
.foot-brand em{font-style:italic; color:var(--gold-2);}
.foot-nav{display:flex; justify-content:center; gap:26px; flex-wrap:wrap; margin-bottom:18px;}
.foot-nav a{
  color:var(--cream-dim); text-decoration:none; font-size:.92rem; font-weight:500;
}
.foot-nav a:hover{color:var(--gold-2);}
.foot-fine{margin:0 auto; max-width:560px; font-size:.8rem; color:var(--faint);}

/* ============ Key cue pill ============ */
#keyCue{
  position:fixed; z-index:10000; pointer-events:none; opacity:0;
  transform:translate(-50%, -120%);
  font:600 .82rem var(--mono); color:var(--gold-2);
  background:rgba(28,22,15,.95); border:1px solid rgba(240,200,104,.5);
  border-radius:999px; padding:5px 12px; white-space:nowrap;
}
#keyCue.show{animation:cuepop 1s ease forwards;}
@keyframes cuepop{
  0%{opacity:0; transform:translate(-50%, -95%) scale(.92);}
  14%{opacity:1; transform:translate(-50%, -130%) scale(1);}
  72%{opacity:1;}
  100%{opacity:0; transform:translate(-50%, -170%) scale(1);}
}

/* ============ Reveal on scroll ============ */
html.js .reveal{opacity:0; transform:translateY(26px);
  transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);}
html.js .reveal.d1{transition-delay:.08s;}
html.js .reveal.d2{transition-delay:.16s;}
html.js .reveal.d3{transition-delay:.24s;}
html.js .reveal.d4{transition-delay:.32s;}
html.js .reveal.in{opacity:1; transform:none;}
html.js .reveal-list > *{opacity:0; transform:translateY(22px);
  transition:opacity .65s ease, transform .65s cubic-bezier(.2,.7,.2,1);}
html.js .reveal-list.in > *{opacity:1; transform:none;}
html.js .reveal-list.in > *:nth-child(1){transition-delay:.03s;}
html.js .reveal-list.in > *:nth-child(2){transition-delay:.07s;}
html.js .reveal-list.in > *:nth-child(3){transition-delay:.11s;}
html.js .reveal-list.in > *:nth-child(4){transition-delay:.15s;}
html.js .reveal-list.in > *:nth-child(5){transition-delay:.19s;}
html.js .reveal-list.in > *:nth-child(6){transition-delay:.23s;}
html.js .reveal-list.in > *:nth-child(7){transition-delay:.27s;}
html.js .reveal-list.in > *:nth-child(8){transition-delay:.31s;}
html.js .reveal-list.in > *:nth-child(9){transition-delay:.35s;}
html.js .reveal-list.in > *:nth-child(10){transition-delay:.39s;}
html.js .reveal-list.in > *:nth-child(11){transition-delay:.43s;}

/* ============ Responsive ============ */
@media (max-width:1020px){
  .two-col, .practice-grid, .songs-grid, .rhythm-grid{grid-template-columns:1fr;}
  .sticky-block{position:static;}
  .rhythm-grid .metro-fig{order:2; margin-top:36px;}
  .trio{grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));}
  .stat + .stat{border-left:0;}
  .stat{flex-basis:150px; min-width:140px;}
}
@media (max-width:620px){
  .lv{grid-template-columns:38px 1fr; grid-template-rows:auto auto;}
  .lv-glyph{display:none;}
  .hero-clef{right:-30vw;}
  .demo-piano{height:128px;}
  .btn{padding:13px 22px;}
  .eyebrow{letter-spacing:.17em;}
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion: reduce){
  .ribbon-move, .roll-move, .pendulum, .wcol i, .intro-line span,
  .beat-dots circle, .pulse-dot{animation:none !important;}
  html.js .reveal, html.js .reveal-list > *{opacity:1; transform:none; transition:none;}
  .ring .val{transition:none;}
  .btn, .card{transition:none;}
}