:root{
  --near-black:#070707;
  --panel:#0f0f10;
  --crimson:#d71920;
  --deep-red:#7b0d12;
  --ivory:#f3e8cc;
  --charcoal:#242424;
  --muted:#a99f95;
  --line:rgba(243,232,204,.14);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--near-black);color:var(--ivory);overflow-x:hidden}
img{max-width:100%;display:block}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link{position:absolute;left:-999px;top:0;background:var(--crimson);color:var(--near-black);padding:10px 16px;z-index:100}
.skip-link:focus{left:16px;top:16px}
:focus-visible{outline:2px solid var(--crimson);outline-offset:3px}

.hero{
  position:relative;min-height:100vh;overflow:hidden;isolation:isolate;
}
.hero-content{
  position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  padding:calc(clamp(68px,10svh,112px) - 40px) clamp(22px,5vw,72px) 0;text-align:center;min-width:0;pointer-events:none;
}
.hero-title{margin:0;width:min(700px,100%);line-height:1}
.hero-title__visual{display:flex;width:100%;flex-direction:column;align-items:center;gap:clamp(4px,.8vw,10px)}
.hero-title__model{display:block;width:65%;height:auto}
.hero-title__edition{display:block;width:100%;height:auto}
.hero-title__glyph,.hero-title__wordmark{
  opacity:0;transform:translateY(12px) scale(.9);transform-box:fill-box;transform-origin:center;
}
.is-hero-art-ready .hero-title__glyph{
  animation:title-reveal 107ms cubic-bezier(.18,1,.3,1) var(--glyph-delay) both;
}
.is-hero-art-ready .hero-title__wordmark{
  animation:title-reveal 200ms cubic-bezier(.18,1,.3,1) var(--wordmark-delay) both;
}
@keyframes title-reveal{to{opacity:1;transform:translateY(0) scale(1)}}
.hero-scroll-cue{
  position:absolute;left:50%;bottom:clamp(14px,3svh,32px);z-index:3;
  display:block;width:min(800px,calc(100% - 32px));transform:translateX(-50%);
  opacity:var(--hero-opacity,1);visibility:hidden;pointer-events:auto;
}
.is-hero-art-ready .hero-scroll-cue{animation:cue-visibility 1ms linear 1000ms forwards}
@keyframes cue-visibility{to{visibility:visible}}
.hero-scroll-cue svg{display:block;width:100%;height:auto}
.hero-scroll-cue__content{opacity:0;transform:translateY(12px) scale(.94);transform-box:fill-box;transform-origin:center}
#hero-cue-progress{stroke-dasharray:227;stroke-dashoffset:227}
.is-hero-art-ready .hero-scroll-cue__content{
  animation:cue-appear 250ms cubic-bezier(.18,1,.3,1) 1000ms both;
}
.is-hero-art-ready #hero-cue-progress{
  animation:cue-progress-draw 250ms ease-out 1000ms both,
    cue-scan 2.8s cubic-bezier(.16,1,.3,1) 1250ms infinite;
}
@keyframes cue-appear{to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes cue-progress-draw{to{stroke-dashoffset:0}}
@keyframes cue-scan{from{transform:translateX(0);opacity:1}70%{opacity:1}to{transform:translateX(563px);opacity:0}}
.hero-scroll-cue:hover{filter:brightness(1.12)}
body.is-detail .hero-scroll-cue{opacity:0;pointer-events:none}
/* A touch drag turns the picked cap (hero-scene.mjs) instead of scrolling. */
body.is-detail #hero-canvas{touch-action:none}
.hero-stage{position:absolute;inset:0;z-index:0;min-width:0}
#hero-canvas{width:100%;height:100%;display:block}
#hero-canvas[hidden]{display:none}
.keyboard-still{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.has-live-keyboard>.keyboard-still{visibility:hidden}
.has-live-keyboard>#hero-canvas{position:absolute;inset:0}
.product-story .hero-stage{inset:calc(clamp(300px,36svh,380px) - 104px) 4% calc(8% + 104px)}
.product-story .hero-loading{inset:auto 0 0;text-align:center}
.hero-loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:13px;margin:0}
.hero-loading[hidden]{display:none}

.hero-content{transition:opacity .35s ease}
body.is-detail .hero-content{opacity:0;pointer-events:none}

.keycap-close{
  position:absolute;top:90px;right:40px;z-index:4;width:40px;height:40px;border-radius:50%;
  background:transparent;color:var(--ivory);border:1px solid var(--line);font-size:15px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity .25s ease,border-color .2s;
}
.keycap-close:hover{border-color:var(--ivory)}
.keycap-close.is-visible{opacity:1;pointer-events:auto}

.keycap-label{
  position:absolute;left:50%;bottom:16%;transform:translateX(-50%);z-index:4;margin:0;
  color:var(--ivory);font-size:22px;font-weight:650;letter-spacing:-.01em;text-align:center;
  opacity:0;transition:opacity .3s ease;pointer-events:none;text-shadow:0 4px 20px rgba(0,0,0,.7);
}
.keycap-label.is-visible{opacity:1}
/* The name as Joker glyphs from the key-name sprite; the text stays for assistive tech. */
.keycap-label{width:max-content;max-width:calc(100% - 32px)}
.keycap-label .glyph-art{display:none;width:auto;max-width:100%;height:50px;margin-inline:auto;overflow:visible;filter:drop-shadow(0 4px 14px rgba(0,0,0,.7))}
.keycap-label.has-glyphs .glyph-art{display:block}
.keycap-label.has-glyphs .keycap-label-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

section{padding:90px 40px}

/* Both chapters remain readable without JS. One renderer moves between their
   mounts. Do not put overflow:hidden on a sticky-stage ancestor. */
.product-story{
  --story-gutter:clamp(24px,4vw,72px);position:relative;
  /* Section 2 deepens toward deep red per layer; product-story.mjs sets --construction-depth (0..0.85). */
  --construction-ground:color-mix(in srgb,var(--deep-red) calc(var(--construction-depth,0) * 100%),var(--near-black));
}
.product-stage{position:relative;background-color:var(--near-black)}
/* Sticky: the construction chapter is transparent over the shared stage, so the stage carries the tint. */
.product-story.is-sticky .product-stage{background-color:var(--construction-ground);transition:background-color .32s linear}
/* Light snap targets placed by product-story.mjs at the hero, each layer hold and the "Hear it" hold. */
:root:has(.product-story.is-sticky){scroll-snap-type:y proximity}
.story-snap{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start}
.hero-art{
  position:absolute;inset:0 0 auto;width:100%;height:max(660px,100svh);
  overflow:hidden;pointer-events:none;opacity:var(--hero-opacity,1);
}
.hero-art__ring,.hero-art__sparkle{transform-box:fill-box;transform-origin:center;transform:scale(.01)}
.hero-art__sparkle{opacity:0}
.is-hero-art-ready .hero-art__ring{
  animation:rings-grow 130ms cubic-bezier(.16,1,.3,1) var(--ring-delay) both;
}
.is-hero-art-ready .hero-art__sparkle{
  animation:spark-spawn 130ms cubic-bezier(.18,1.4,.36,1) var(--spark-delay) both;
}
@keyframes rings-grow{from{transform:scale(.01)}to{transform:scale(1)}}
@keyframes spark-spawn{from{transform:scale(.01);opacity:0}to{transform:scale(1);opacity:1}}
body.is-detail .hero-art{opacity:0}
.keyboard-stage{display:none;position:absolute;inset:0;z-index:1;pointer-events:none}
.keyboard-stage>#hero-canvas{position:absolute;inset:0}
.is-sticky.has-shared-scene .keyboard-stage{display:block}
.is-sticky.has-shared-scene .keyboard-still{visibility:hidden}
.is-sticky.has-shared-scene .product-stage>.hero{isolation:auto;pointer-events:none}
.is-sticky.has-shared-scene .product-stage>.construction{background:transparent;pointer-events:none}
.is-sticky.has-shared-scene [data-story-hidden="true"]{visibility:visible;pointer-events:none}
.is-sticky.has-shared-scene .hero-content{opacity:var(--hero-opacity,1);transition:none}
/* The hero fades on scroll: give each faded part its own layer so the fade is a
   compositor opacity change, not a full-screen repaint of the SVG art per frame.
   product-story.mjs writes each scroll opacity only on the elements that read
   it, and these do not inherit, so the SVG art inside never sees a style change
   (an inherited change repaints every ring and path). --sound-opacity inherits
   because .sound::before reads it; it is written on .sound, not the story. */
@property --hero-opacity{syntax:'<number>';inherits:false;initial-value:1}
@property --construction-opacity{syntax:'<number>';inherits:false;initial-value:0}
@property --labels-opacity{syntax:'<number>';inherits:false;initial-value:0}
.is-sticky.has-shared-scene :is(.hero-art,.hero-content,.hero-scroll-cue){will-change:opacity}
/* The cue's scan line repaints the cue every frame; stop it once the hero is left. */
.is-sticky.has-shared-scene:is([data-chapter="construction"],[data-chapter="sound"]) #hero-cue-progress{animation-play-state:paused}
.is-sticky.has-shared-scene .hero-scroll-cue{pointer-events:none}
.is-sticky.has-shared-scene[data-chapter="hero"] .hero-scroll-cue{pointer-events:auto}
body.is-detail .is-sticky.has-shared-scene .hero-scroll-cue{pointer-events:none}
.is-sticky.has-shared-scene .keycap-close.is-visible{pointer-events:auto}
.is-sticky.has-shared-scene .construction-heading,
.is-sticky.has-shared-scene .layer-caption,
.is-sticky.has-shared-scene .layer-steps{position:relative;z-index:2;opacity:var(--construction-opacity,0)}
.is-sticky.has-shared-scene .layer-caption,
.is-sticky.has-shared-scene .layer-steps,
.is-sticky.has-shared-scene .construction-backdrop{opacity:var(--labels-opacity,0)}
.is-sticky.has-shared-scene[data-labels-visible="false"] .layer-caption,
.is-sticky.has-shared-scene[data-labels-visible="false"] .layer-steps,
.is-sticky.has-shared-scene[data-labels-visible="false"] .construction-backdrop{visibility:hidden}
.is-sticky.has-shared-scene .construction:not([inert]) .layer-steps button{pointer-events:auto}
.is-sticky.has-shared-scene .layer-steps:focus-within{opacity:1}
body.is-detail .is-sticky.has-shared-scene .hero-content{opacity:0}
.product-stage .hero{min-height:max(660px,100svh)}
.product-stage .construction{
  box-sizing:border-box;position:relative;min-height:100svh;padding:clamp(28px,4svh,48px) var(--story-gutter) 24px;
  display:grid;grid-template-rows:auto minmax(280px,1fr) auto auto;gap:16px;justify-items:stretch;
  background-color:var(--construction-ground);border-top:1px solid var(--line);transition:background-color .32s linear;
}
.construction-heading{display:flex;justify-content:center;align-items:flex-start;gap:16px 32px;flex-wrap:wrap;text-align:center}
/* The halftone panel behind the active layer; product-story.mjs sets its shape per step. */
.construction-backdrop{
  position:absolute;left:50%;top:50%;width:min(58%,900px);max-height:100%;aspect-ratio:1.2;z-index:0;transform:translate(-50%,-50%);pointer-events:none;
  background-color:var(--backdrop-color,var(--crimson));
  background-image:radial-gradient(circle,rgba(7,7,7,.32) 1.5px,transparent 1.9px);background-size:13px 13px;
  clip-path:var(--backdrop-shape,polygon(6% 12%,58% 0%,96% 9%,100% 70%,82% 100%,24% 94%,0% 78%,3% 40%));
  transition:clip-path .55s cubic-bezier(.2,.7,.3,1),background-color .55s ease;
}
.layer-caption{display:flex;align-items:center;justify-content:center;gap:16px;min-height:64px;text-align:left}
.glyph-sprite{position:absolute;width:0;height:0;overflow:hidden}
.layer-caption>div{min-width:0}
.layer-number{flex:none;display:block;width:64px;height:64px}
.layer-number .glyph-art{display:block;width:100%;height:100%;overflow:visible}
/* Joker glyph titles: fixed height, width from the viewBox, shrink to fit when a long title runs out of room. */
.layer-name{margin:0;line-height:0}
.layer-name .glyph-art{display:block;width:auto;max-width:100%;height:clamp(40px,4.2vw,58px);overflow:visible}
.layer-role{margin:4px 0 0;color:var(--muted);font-size:clamp(14px,1.2vw,17px);line-height:1.4}
.layer-steps{list-style:none;margin:0;padding:0;display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.layer-steps button{
  width:44px;height:44px;border:2px solid rgba(243,232,204,.34);background:transparent;color:var(--ivory);cursor:pointer;
  font:800 17px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;transition:background-color .2s,color .2s,border-color .2s;
}
.layer-steps button:hover{border-color:var(--ivory)}
.layer-steps button[aria-current="step"]{background:var(--ivory);color:var(--near-black);border-color:var(--ivory);box-shadow:inset 0 -5px 0 var(--crimson)}
.construction-heading h2{font-size:clamp(30px,3.2vw,48px);font-weight:650;line-height:1.1;letter-spacing:-.035em;margin:0 0 10px}
.construction-title-art{display:block;margin-inline:auto;width:clamp(300px,40vw,580px);max-width:100%;height:auto}
.construction-heading h2:focus{outline:none}
.construction-heading h2:focus-visible{outline:2px solid var(--crimson);outline-offset:6px}
.construction-figure{margin:0;min-width:0;min-height:0;position:relative}
.construction-scene{height:100%;min-height:0;width:100%;position:relative}
.construction-scene img{display:block;width:100%;height:100%;max-height:64svh;object-fit:contain}

/* "Hear it": the settled flat board. The canvas renders into .sound-scene. */
.product-stage .sound{
  box-sizing:border-box;position:relative;min-height:100svh;padding:clamp(56px,9svh,110px) var(--story-gutter) clamp(40px,6svh,72px);
  display:grid;grid-template-rows:auto minmax(260px,1fr);gap:clamp(16px,3svh,36px);justify-items:center;
  background:radial-gradient(ellipse 58% 42% at 50% 72%,rgba(123,13,18,.72),rgba(123,13,18,.22) 55%,transparent 78%),var(--near-black);
}
.sound-heading{text-align:center}
.sound-heading p{color:var(--muted);font-size:clamp(15px,1.4vw,19px);line-height:1.5;margin:clamp(16px,2.6svh,28px) 0 0}
.sound-heading h2:focus{outline:none}
.sound-heading h2:focus-visible{outline:2px solid var(--crimson);outline-offset:8px}
.sound-title{margin:0}
.sound-title-art{display:block;width:min(800px,88vw);height:auto}
.sound-scene{position:relative;width:100%;min-height:0;height:100%}
/* Sized to the flat board's footprint so no dead band opens under it. */
.is-sticky .product-stage>.sound{grid-template-rows:auto auto;align-content:center}
.is-sticky .sound-scene{height:auto;width:min(100%,calc(56svh * 2.4));aspect-ratio:12/5}
.sound-scene img{display:block;width:100%;height:100%;max-height:60svh;object-fit:contain}
.sound-tag{
  position:absolute;left:var(--tag-x,auto);right:auto;top:var(--tag-y,auto);z-index:3;
  display:inline-flex;align-items:center;gap:.55em;min-height:44px;padding:.5em 1em .5em .85em;
  background:var(--crimson);color:#fff;border:0;border-radius:0;cursor:pointer;
  font:800 clamp(15px,1.5vw,22px)/1 -apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;letter-spacing:.01em;
  transform:rotate(4deg);box-shadow:0 10px 30px rgba(0,0,0,.45);transition:background-color .2s,color .2s;
}
.sound-tag svg{width:1.1em;height:1.1em;flex:none}
.sound-tag:hover{background:#ec2129}
.sound-tag[aria-pressed="true"]{background:var(--ivory);color:var(--near-black)}
.sound-tag[aria-pressed="false"] .sound-tag-waves{opacity:.55}
.sound-tag:focus-visible{outline:2px solid var(--ivory);outline-offset:4px}
.is-sticky.has-shared-scene .product-stage>.sound{background:transparent;pointer-events:none}
.is-sticky.has-shared-scene .product-stage>.sound::before{
  content:"";position:absolute;inset:0;z-index:0;opacity:var(--sound-opacity,0);
  background:radial-gradient(ellipse 58% 42% at 50% 72%,rgba(123,13,18,.72),rgba(123,13,18,.22) 55%,transparent 78%);
}
.is-sticky.has-shared-scene .sound-heading,
.is-sticky.has-shared-scene .sound-tag{position:relative;z-index:2;opacity:var(--sound-opacity,0)}
.is-sticky.has-shared-scene .sound-tag{position:absolute;z-index:3}
.is-sticky.has-shared-scene[data-sound-visible="false"] .sound-heading,
.is-sticky.has-shared-scene[data-sound-visible="false"] .sound-tag{visibility:hidden}
.is-sticky.has-shared-scene .sound:not([inert]) .sound-tag{pointer-events:auto}

@media (min-height:680px) and (prefers-reduced-motion:no-preference){
  /* 100svh stage + 360svh construction + 160svh "Hear it"; keep in step with
     CONSTRUCTION_SHARE in construction-motion.mjs. */
  .product-story.is-sticky{height:620svh}
  .is-sticky .product-stage{position:sticky;top:0;height:100svh;isolation:isolate}
  .is-sticky .hero-art{height:100%}
  .is-sticky .product-stage>.hero,.is-sticky .product-stage>.construction,.is-sticky .product-stage>.sound{position:absolute;inset:0;height:100%;min-height:0}
  .is-sticky .sound-scene img{max-height:none}
  .is-sticky .product-stage>.construction{grid-template-rows:auto minmax(0,1fr) auto auto;border-top:0}
  .is-sticky [data-story-hidden="true"]{visibility:hidden;pointer-events:none}
  .is-sticky .construction-scene img{max-height:none}
}
@media (max-width:767px){
  .construction-backdrop{top:0;bottom:0;width:88%;aspect-ratio:auto;transform:translateX(-50%)}
  .layer-number{width:48px;height:48px}
  .layer-name .glyph-art{height:36px}
  .keycap-label .glyph-art{height:36px}
  .layer-steps{gap:4px}
  .layer-steps button{width:32px;height:40px;font-size:15px}
}
@media (max-width:600px){
  .is-sticky .sound-scene{width:100%}
}
@media (max-width:1023px){
  .construction-scene img{max-height:58svh}
}
@media (max-height:679px){
  .product-stage .sound{grid-template-rows:auto auto;min-height:0}
  .sound-scene{height:clamp(240px,70svh,480px)}
  .product-stage .construction{grid-template-rows:auto auto auto auto;min-height:0}
  .construction-scene{height:clamp(300px,85svh,480px)}
  .construction-scene img{max-height:none}
}
@media (prefers-reduced-motion:reduce){
  .is-hero-art-ready .hero-art__ring,.is-hero-art-ready .hero-art__sparkle,
  .is-hero-art-ready .hero-title__glyph,.is-hero-art-ready .hero-title__wordmark,
  .is-hero-art-ready .hero-scroll-cue__content{animation:none;transform:none;opacity:1}
  .is-hero-art-ready #hero-cue-progress{animation:none;stroke-dashoffset:0;opacity:1;transform:none}
  .is-hero-art-ready .hero-scroll-cue{animation:none;visibility:visible}
  .product-story.is-sticky{height:auto}
  .product-story .product-stage{position:relative;height:auto}
  .product-story .product-stage>.hero,.product-story .product-stage>.construction,.product-story .product-stage>.sound{position:relative;height:auto;visibility:visible}
  .product-story .sound-scene{height:clamp(240px,60svh,640px)}
  .product-story .construction-scene{height:clamp(320px,65svh,720px)}
  .product-story .construction-scene img{max-height:none}
}

@media (max-width:900px){
  section{padding:60px 22px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .product-stage,.product-stage .construction{transition:none}
}