/* Baton site, "Downbeat" (site refresh 2026-09-27, baton.css v1).
   The page is a dark mahogany stage and the hero is Baton's own face, live: the pendulum hangs from
   the top and reaches the end of its swing on every click (half-cosine ease, 26 degrees, the numbers
   in Pendulum.kt), the beat dots cycle accent, normal, ghost and off like BeatDots.kt, the dial maps
   20 to 400 BPM over 270 degrees with the app's tempo words (DialWidgets.kt). The seven faces are the
   app's own palettes from skins/Skins.kt, stated once below as tokens; the Cast receiver
   (site/cast/) keeps its own copy of the same palettes and shares nothing with this file.

   Rules this file keeps:
   - Text never sits on anything that moves. The beat glow sits behind the face only.
   - Nothing moves without JS (so the Pause motion chip exists whenever anything moves), nothing
     moves under prefers-reduced-motion (html.rm), and html.paused (the chip) stops every loop.
   - No flashing: the only beat-timed light is small (the bob, the live dot, a soft glow whose
     luminance swing stays far under the flash threshold), and baton.js stops even that above 180 BPM.
   - Colours are tokens; the contrast proof is tools/site-contrast.json (site repo) run through the
     site-kit contrast.py, including every face-coloured pair in all seven faces. Change a colour, run it.
   - assets/style.css is the old family sheet, left byte-identical and no longer referenced. */

@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/bodoni-display.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 600;font-display:swap;src:url(fonts/bodoni-display-italic.woff2) format("woff2")}

:root{
  /* the page: Mahogany, a touch deeper than the app's backdrop */
  --bg:#120B07;
  --bg2:#170E09;         /* alternate band */
  --panel:#1E140E;       /* tiles */
  --panel2:#26180F;      /* raised */
  --line:#352316;        /* hairline (Skins-era outline) */
  --line2:#553A25;       /* control outline */
  --ink:#F4E9DD;         /* headings = Skins.mahogany text */
  --text:#EDE0D2;        /* body */
  --text2:#D3C0AD;       /* secondary body */
  --dim:#B09A85;         /* small print */
  --accent:#E8A25B;      /* Skins.mahogany accent */
  --mist:#F2BD80;        /* links, kickers, focus */
  --brass:#D4A94F;       /* the Brass accent, the logo's frame */
  --onaccent:#1A100B;    /* text on the amber button = Skins.mahogany backdrop */
  --tagpro:#F3CF95;--tagpro-bg:#3A2616;
  --tagfree:#B5E0BB;--tagfree-bg:#1C2A1D;

  /* the seven faces, verbatim from skins/Skins.kt: bg backdrop, sf surface, ac accent, tx text, mu muted */
  --mahogany-bg:#1A100B;--mahogany-sf:#2A1B12;--mahogany-ac:#E8A25B;--mahogany-tx:#F4E9DD;--mahogany-mu:#9C8877;
  --ivory-bg:#F5F1E8;--ivory-sf:#FFFFFF;--ivory-ac:#4A6FA5;--ivory-tx:#2A2620;--ivory-mu:#8A8272;
  --brass-bg:#10141C;--brass-sf:#1B2230;--brass-ac:#D4A94F;--brass-tx:#EDEBE2;--brass-mu:#7E8697;
  --velvet-bg:#170D12;--velvet-sf:#26141D;--velvet-ac:#E05A6E;--velvet-tx:#F5E6EA;--velvet-mu:#9A7E88;
  --neon-bg:#05080A;--neon-sf:#0E1519;--neon-ac:#29E6D0;--neon-tx:#DFF7F3;--neon-mu:#5E7C77;
  --graphite-bg:#131417;--graphite-sf:#1E2024;--graphite-ac:#9BA6B2;--graphite-tx:#ECEEF1;--graphite-mu:#767C85;
  --glacier-bg:#EAF2F7;--glacier-sf:#FBFDFF;--glacier-ac:#2E7FB8;--glacier-tx:#1E2A33;--glacier-mu:#7A8C99;

  --navh:56px;
  --pad:clamp(16px,4.2vw,40px);
  --display:"Bodoni Moda",Didot,"Bodoni 72",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --swing:cubic-bezier(.3,1.32,.45,1);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
[id]{scroll-margin-top:calc(var(--navh) + 12px)}
body{background:var(--bg);color:var(--text);font:16px/1.62 var(--sans);overflow-x:hidden}
img,svg,video{display:block;max-width:100%}
a{color:var(--mist);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a:hover{color:#FFD7A8}
strong{color:var(--ink);font-weight:650}
button{font:inherit;color:inherit}
.wrap{max-width:1160px;margin:0 auto;padding:0 var(--pad)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* focus: a light ring with a dark halo, so it reads on the amber button, the badges and every face */
:focus:not(:focus-visible){outline:none}
:focus-visible{outline:2px solid var(--mist);outline-offset:3px;border-radius:6px;box-shadow:0 0 0 5px rgba(18,11,7,.92)}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:var(--ink);color:#120B07;padding:.7em 1.1em;border-radius:10px;font-weight:650;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.skip:focus{left:8px}

/* ---------- nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--navh);background:rgba(18,11,7,.82);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border-bottom:1px solid rgba(85,58,37,0);transition:background .3s,border-color .3s}
.nav.scrolled,html:not(.js) .nav{background:rgba(18,11,7,.94);border-bottom-color:rgba(85,58,37,.9)}
.navin{max-width:1240px;margin:0 auto;height:100%;padding:0 12px;display:flex;align-items:center;gap:8px}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--ink);min-height:44px;padding-right:4px}
.logo-b{width:30px;height:30px;flex:none}
.wordmark{font-weight:650;font-size:.84rem;letter-spacing:.34em;color:var(--ink)}
.navlinks{display:none}
.getbtn{margin-left:auto;display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:var(--accent);color:var(--onaccent);font-weight:700;font-size:.86rem;text-decoration:none;white-space:nowrap}
.getbtn:hover{background:#F4B878;color:var(--onaccent)}
.navmenu{position:relative}
.navmenu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;min-height:38px;padding:0 12px;border-radius:999px;border:1px solid var(--line2);color:var(--text);font-size:.86rem;background:rgba(30,20,14,.7)}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s}
.navmenu[open] summary::after{transform:translateY(1px) rotate(-135deg)}
.navmenu nav{position:absolute;right:0;top:calc(100% + 10px);min-width:210px;background:var(--panel);border:1px solid var(--line2);border-radius:16px;padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.6)}
.navmenu nav a{display:flex;align-items:center;min-height:44px;padding:0 14px;border-radius:10px;color:var(--text);text-decoration:none}
.navmenu nav a:hover{background:var(--panel2);color:var(--ink)}
@media (min-width:370px){.navin{padding:0 16px;gap:10px}.wordmark{font-size:.9rem;letter-spacing:.4em}.getbtn{padding:0 16px;font-size:.9rem}}
@media (max-width:339.98px){.wordmark{display:none}}
@media (min-width:820px){
  .navlinks{display:flex;gap:4px;margin-left:auto}
  .navlinks a{display:inline-flex;align-items:center;min-height:40px;padding:0 12px;border-radius:999px;color:var(--text2);text-decoration:none;font-size:.94rem}
  .navlinks a:hover{color:var(--ink);background:rgba(255,255,255,.04)}
  .getbtn{margin-left:8px}
  .navmenu{display:none}
}
.logo-b .arm{transform-box:view-box;transform-origin:32px 46px}
@media (prefers-reduced-motion:no-preference){.brand:hover .logo-b .arm{animation:logo-swing .9s ease-in-out 1}}
@keyframes logo-swing{0%{transform:rotate(0)}30%{transform:rotate(-38deg)}70%{transform:rotate(7deg)}100%{transform:rotate(0)}}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(var(--navh) + 22px) 0 44px;
  background:radial-gradient(70% 46% at 50% 0%,rgba(232,162,91,.13),transparent 70%),var(--bg)}
.hero-in{position:relative;max-width:1240px;margin:0 auto;padding:0 var(--pad);display:grid;gap:30px}
.hero-copy{position:relative;z-index:2}
.eyebrow{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);font-weight:650}
.hero h1{font-family:var(--display);font-weight:500;font-size:clamp(2.15rem,9.4vw,3.2rem);line-height:1.04;letter-spacing:-.01em;color:var(--ink);margin-top:10px;max-width:15ch}
.hero h1 em{font-style:italic;font-weight:500;color:var(--mist)}
.lede{margin-top:12px;color:var(--text2);font-size:1.02rem;line-height:1.52;max-width:32rem}
.pillars{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pillars li{border:1px solid rgba(242,189,128,.32);background:rgba(242,189,128,.07);color:#F0E1CE;font-size:.8rem;padding:4px 11px;border-radius:999px;white-space:nowrap}
.store-row{display:flex;align-items:center;flex-wrap:wrap;gap:2px 4px;margin-top:12px}
.store-row a{display:inline-flex;border-radius:10px}
.play-badge{height:64px;width:auto;margin-left:-6px}
@media (max-width:359px){.play-badge{height:56px}.hero h1{font-size:2rem}}

/* the stage: the live face, its glow and the face picker */
.stage{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.glow{position:absolute;z-index:0;left:50%;top:44%;width:150%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--f-ac) 26%,transparent),transparent 72%);opacity:.5}
.device{position:relative;z-index:1;width:min(100%,390px);padding:9px;border-radius:44px;background:linear-gradient(160deg,#2B1D14,#0B0705 60%);
  box-shadow:0 0 0 1px rgba(244,233,221,.07),0 40px 80px rgba(0,0,0,.6),0 0 0 1px #000 inset}

/* ---------- the face (colours come from the chosen face; mahogany by default) ---------- */
.face{--f-bg:var(--mahogany-bg);--f-sf:var(--mahogany-sf);--f-ac:var(--mahogany-ac);--f-tx:var(--mahogany-tx);--f-mu:var(--mahogany-mu);
  position:relative;container-type:inline-size;border-radius:36px;padding:14px 14px 18px;background:var(--f-bg);color:var(--f-tx);overflow:hidden;
  transition:background-color .6s ease,color .6s ease}
.face-top{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:44px}
.meter{display:inline-flex;align-items:center;justify-content:center;min-width:58px;min-height:40px;padding:0 14px;border-radius:14px;border:1.5px solid color-mix(in srgb,var(--f-mu) 70%,transparent);background:var(--f-sf);color:var(--f-tx);font-weight:650;font-size:1rem;cursor:pointer;font-variant-numeric:tabular-nums}
.meter:hover{border-color:var(--f-ac)}
.skinname{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--f-tx);font-weight:650;padding-right:6px}
.pend{width:100%;height:auto;margin-top:2px}
.pend .track{fill:none;stroke:var(--f-mu);stroke-opacity:.3;stroke-width:2;stroke-linecap:round}
.pend .rod{stroke:var(--f-tx);stroke-opacity:.7;stroke-width:4;stroke-linecap:round}
.pend .pivot{fill:var(--f-mu)}
.pend .bob{fill:var(--f-ac)}
.pend .bobc{fill:var(--f-bg);fill-opacity:.35}
.pend .halo{fill:var(--f-ac);opacity:0}

.dots{display:flex;justify-content:center;flex-wrap:wrap;gap:0;min-height:44px;margin-top:2px}
.dot{position:relative;width:42px;height:44px;border:0;background:none;cursor:pointer;border-radius:50%;display:grid;place-items:center}
.dot::before{content:"";width:18px;height:18px;border-radius:50%;background:var(--f-mu);transition:width .15s,height .15s,background-color .15s}
.dot::after{content:"";position:absolute;left:50%;top:50%;width:36px;height:36px;translate:-50% -50%;border-radius:50%;border:2px solid var(--f-ac);opacity:0}
.dot[data-l="2"]::before{width:26px;height:26px;background:var(--f-tx)}
.dot[data-l="0.5"]::before{width:11px;height:11px}
.dot[data-l="0"]::before{background:transparent;box-shadow:inset 0 0 0 2px var(--f-mu)}
.dot.on::before{background:var(--f-ac)}
.dot.on[data-l="0"]::before{background:transparent;box-shadow:inset 0 0 0 2px var(--f-ac)}
.dot.on::after{opacity:.55}

.dialrow{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:4px;margin-top:6px}
.steps{display:grid;gap:10px}
.step{width:max(44px,13cqw);height:max(44px,13cqw);border-radius:50%;border:1.5px solid color-mix(in srgb,var(--f-mu) 55%,transparent);background:var(--f-sf);color:var(--f-tx);font-size:max(.9rem,3.9cqw);font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.step:hover{border-color:var(--f-ac)}
.step:active{transform:scale(.95)}
.dial{position:relative;justify-self:center;width:min(60cqw,236px);aspect-ratio:1;border-radius:50%;cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.dial:active{cursor:grabbing}
.dial svg{width:100%;height:100%}
.dial .dtrack{fill:none;stroke:var(--f-mu);stroke-opacity:.3;stroke-width:10;stroke-linecap:round}
.dial .dfill{fill:none;stroke:var(--f-ac);stroke-width:10;stroke-linecap:round}
.dial .knob{fill:var(--f-ac);stroke:var(--f-bg);stroke-width:4}
.readout{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;padding-top:4%}
.bpm{font-family:var(--sans);font-weight:250;font-size:clamp(3rem,17cqw,4.4rem);line-height:.95;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--f-tx)}
.bpml{font-size:.68rem;letter-spacing:.3em;font-weight:650;color:var(--f-tx);margin-top:4px;padding-left:.3em}
.word{font-family:var(--display);font-style:italic;font-weight:500;font-size:max(24px,7.2cqw);line-height:1.1;color:var(--f-ac);margin-top:2px}

.face-bottom{display:flex;align-items:stretch;gap:12px;margin-top:12px}
.tap{flex:1;min-height:76px;border-radius:20px;border:1.5px solid color-mix(in srgb,var(--f-mu) 40%,transparent);background:var(--f-sf);color:var(--f-tx);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;touch-action:manipulation;-webkit-user-select:none;user-select:none;transition:transform .08s,border-color .2s}
.tap:hover{border-color:var(--f-ac)}
.tap.hit{transform:scale(.97);border-color:var(--f-ac)}
.tap1{font-size:.84rem;letter-spacing:.22em;font-weight:700;text-transform:uppercase;padding-left:.22em}
.tap2{font-size:.78rem}
.playbtn{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;border:0;background:none;cursor:pointer;border-radius:18px;padding:0 2px;color:var(--f-tx)}
.playbtn .disc{display:grid;place-items:center;width:62px;height:62px;border-radius:50%;background:var(--f-ac);box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .12s}
.playbtn:hover .disc{transform:scale(1.04)}
.playbtn svg{width:26px;height:26px;fill:var(--f-bg)}
.playbtn .i-stop{display:none}
.playbtn[aria-pressed="true"] .i-play{display:none}
.playbtn[aria-pressed="true"] .i-stop{display:block}
.playl{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700}
html:not(.js) .needs-js{visibility:hidden}
html:not(.js) .face-bottom{display:none}
.face :focus-visible{outline:2px solid var(--f-tx);outline-offset:2px;box-shadow:0 0 0 5px var(--f-bg)}
.dot:focus-visible{border-radius:50%}

/* the faces: one radio group in the hero, one in the faces chapter; baton.js keeps them in step, and the
   colours follow the hero group through :has(), so the face changes with no script at all */
:root:has(#hk-ivory:checked) :is(.face,.tv,.glow){--f-bg:var(--ivory-bg);--f-sf:var(--ivory-sf);--f-ac:var(--ivory-ac);--f-tx:var(--ivory-tx);--f-mu:var(--ivory-mu)}
:root:has(#hk-brass:checked) :is(.face,.tv,.glow){--f-bg:var(--brass-bg);--f-sf:var(--brass-sf);--f-ac:var(--brass-ac);--f-tx:var(--brass-tx);--f-mu:var(--brass-mu)}
:root:has(#hk-velvet:checked) :is(.face,.tv,.glow){--f-bg:var(--velvet-bg);--f-sf:var(--velvet-sf);--f-ac:var(--velvet-ac);--f-tx:var(--velvet-tx);--f-mu:var(--velvet-mu)}
:root:has(#hk-neon:checked) :is(.face,.tv,.glow){--f-bg:var(--neon-bg);--f-sf:var(--neon-sf);--f-ac:var(--neon-ac);--f-tx:var(--neon-tx);--f-mu:var(--neon-mu)}
:root:has(#hk-graphite:checked) :is(.face,.tv,.glow){--f-bg:var(--graphite-bg);--f-sf:var(--graphite-sf);--f-ac:var(--graphite-ac);--f-tx:var(--graphite-tx);--f-mu:var(--graphite-mu)}
:root:has(#hk-glacier:checked) :is(.face,.tv,.glow){--f-bg:var(--glacier-bg);--f-sf:var(--glacier-sf);--f-ac:var(--glacier-ac);--f-tx:var(--glacier-tx);--f-mu:var(--glacier-mu)}
.glow{--f-ac:var(--mahogany-ac)}
.tv{--f-bg:var(--mahogany-bg);--f-sf:var(--mahogany-sf);--f-ac:var(--mahogany-ac);--f-tx:var(--mahogany-tx);--f-mu:var(--mahogany-mu)}

/* the swatch row under the face */
.swatches{border:0;display:flex;flex-direction:column;align-items:center;gap:8px;margin-top:18px}
.swatches legend{float:left;width:100%;text-align:center;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mist);font-weight:650;margin-bottom:8px}
.swrow{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.sw{position:relative;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;cursor:pointer}
.sw input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.sw i{display:block;width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--sb) 0 50%,var(--sa) 50% 100%);box-shadow:0 0 0 1.5px rgba(244,233,221,.55);transition:transform .2s var(--swing)}
.sw:has(input:checked) i{transform:scale(1.14);box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}
.sw:has(input:focus-visible){outline:2px solid var(--mist);outline-offset:1px;box-shadow:0 0 0 5px rgba(18,11,7,.92)}
.swname{min-height:1.6em;font-size:.9rem;color:var(--text2);display:flex;align-items:center;gap:8px}
.k-mahogany{--sa:var(--mahogany-ac);--sb:var(--mahogany-bg)}
.k-ivory{--sa:var(--ivory-ac);--sb:var(--ivory-bg)}
.k-brass{--sa:var(--brass-ac);--sb:var(--brass-bg)}
.k-velvet{--sa:var(--velvet-ac);--sb:var(--velvet-bg)}
.k-neon{--sa:var(--neon-ac);--sb:var(--neon-bg)}
.k-graphite{--sa:var(--graphite-ac);--sb:var(--graphite-bg)}
.k-glacier{--sa:var(--glacier-ac);--sb:var(--glacier-bg)}
.notes{display:flex;flex-direction:column;align-items:center;text-align:center;margin-top:-12px}
.try{max-width:26rem;color:var(--text2);font-size:.92rem}
.honest{margin-top:6px;max-width:26rem;color:var(--dim);font-size:.8rem;line-height:1.45}
.tag{display:inline-block;font-size:.64rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--tagpro-bg);color:var(--tagpro);line-height:1.5}
.tag.free{background:var(--tagfree-bg);color:var(--tagfree)}

@media (min-width:960px){
  .hero{padding:calc(var(--navh) + 20px) 0 40px;min-height:min(100svh,1000px);display:flex;align-items:center;
    background:radial-gradient(52% 60% at 74% 38%,rgba(232,162,91,.13),transparent 70%),radial-gradient(60% 40% at 20% 0%,rgba(212,169,79,.07),transparent 70%),var(--bg)}
  .hero-in{width:100%;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy stage" "notes stage";column-gap:clamp(40px,6vw,96px);row-gap:28px}
  .hero-copy{grid-area:copy;align-self:end}
  .stage{grid-area:stage;align-self:center}
  .notes{grid-area:notes;align-self:start;align-items:flex-start;text-align:left;margin-top:0}
  .notes .try{padding-left:14px;border-left:2px solid rgba(242,189,128,.5)}
  .notes .honest{padding-left:16px}
  .hero h1{font-size:clamp(3.2rem,5.2vw,5rem);max-width:12.5ch}
  .lede{font-size:1.14rem;margin-top:18px}
  .pillars{margin-top:20px}
  .play-badge{height:76px}
  .store-row{margin-top:18px}
  .device{width:clamp(318px,min(29vw,calc((100svh - var(--navh) - 200px) * .575)),392px)}
}
@media (min-width:960px) and (max-height:700px){.swatches legend{display:none}}

/* ---------- sections ---------- */
main > section{padding:clamp(56px,8vw,104px) 0}
main > section.hero{padding-bottom:44px}
.kicker{font-size:.74rem;letter-spacing:.24em;text-transform:uppercase;color:var(--mist);font-weight:650}
h2{font-family:var(--display);font-weight:500;font-size:clamp(2rem,5.6vw,3.3rem);line-height:1.06;letter-spacing:-.01em;color:var(--ink);margin-top:10px;max-width:20ch}
h2 em{font-style:italic;color:var(--mist)}
h3{color:var(--ink)}
.intro{margin-top:14px;max-width:38rem;color:var(--text2);font-size:1.06rem;line-height:1.6}
.caption{margin-top:14px;color:var(--dim);font-size:.86rem}

/* the promo cards */
.cards{background:radial-gradient(70% 50% at 50% 0%,rgba(232,162,91,.08),transparent 70%)}
.cardstrip{margin-top:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:6px var(--pad) 18px;scrollbar-width:thin;scrollbar-color:var(--line2) transparent}
.cardstrip:focus-visible{outline-offset:-4px}
.cardrow{display:flex;gap:16px;width:max-content}
.card{flex:0 0 auto;width:min(80vw,380px);scroll-snap-align:start}
.card img{width:100%;height:auto;border-radius:22px;border:1px solid rgba(242,189,128,.14);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 80px -30px rgba(232,162,91,.35);background:var(--panel)}
@media (min-width:960px){
  .cardstrip{overflow:visible;padding:6px var(--pad) 8px}
  .cardrow{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;width:auto;max-width:1160px;margin:0 auto}
  .card{width:auto}
  .cards .caption{margin-top:22px}
}

/* the free instrument */
.free-sec{background:linear-gradient(180deg,transparent,var(--bg2) 22%,var(--bg2) 78%,transparent)}
.tiles{display:grid;gap:12px;margin-top:32px}
.tile{padding:20px 22px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.tile .ic{width:34px;height:34px;margin-bottom:10px}
.ic *{fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic .f{fill:var(--accent);stroke:none}
.tile h3{font-family:var(--display);font-weight:500;font-size:1.32rem;line-height:1.2}
.tile p{margin-top:6px;color:var(--text2);font-size:.97rem}
@media (max-width:699.98px){.tile{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:18px 20px}.tile .ic{grid-row:span 2;width:36px;height:36px;margin:0}}
@media (min-width:700px){.tiles{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:1020px){.tiles{grid-template-columns:repeat(3,1fr)}}

/* cast: the TV keeps time with the face up top */
.castband{display:grid;gap:22px;align-items:center;margin-top:40px;padding:22px;border-radius:28px;background:radial-gradient(90% 90% at 0% 0%,rgba(232,162,91,.12),transparent 60%),var(--panel);border:1px solid rgba(232,162,91,.24)}
.tvwrap{max-width:520px}
.tv{width:100%;height:auto}
.tv .bezel{fill:#050403;stroke:#3A2A1E;stroke-width:2}
.tv .scr{fill:var(--f-bg);transition:fill .6s}
.tv .stand{fill:#2A1D14}
.tv .disc{fill:var(--f-sf);stroke:var(--f-mu);stroke-width:2;transform-box:fill-box;transform-origin:center}
.tv .ring{fill:none;stroke:var(--f-ac);stroke-width:3;opacity:0;transform-box:fill-box;transform-origin:center}
.tv .td{fill:var(--f-mu)}
.tv .td.a{fill:var(--f-tx)}
.tv .td.on{fill:var(--f-ac)}
.tv text{fill:var(--f-tx);font-family:var(--sans);font-size:15px;letter-spacing:.06em}
.tv .big{font-size:30px;font-weight:300;letter-spacing:0}
.tv .tk{font-size:12px;font-weight:700;letter-spacing:.3em}
.castcopy h3{font-family:var(--display);font-weight:500;font-size:clamp(1.6rem,3.6vw,2.1rem);line-height:1.12}
.castcopy p{margin-top:10px;color:var(--text2)}
.castcopy .verdict{margin-top:14px;color:var(--ink);font-weight:600;padding-left:12px;border-left:3px solid var(--accent)}
.castcopy .fine{font-size:.9rem;color:var(--dim)}
.tvcap{margin-top:10px;color:var(--dim);font-size:.82rem}
@media (min-width:880px){.castband{grid-template-columns:1.05fr 1fr;gap:40px;padding:36px}}

/* the seven faces, as a fan that swings to the chosen one */
.faces{position:relative;overflow:hidden;--sel:3;--A:13deg;--R:360px;--W:150px}
.faces::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 46% at 50% 58%,color-mix(in srgb,var(--fc) 16%,transparent),transparent 70%);transition:background .8s}
.faces{--fc:var(--mahogany-ac)}
.faces:has(#sk-ivory:checked){--sel:0;--fc:var(--ivory-ac)}
.faces:has(#sk-brass:checked){--sel:1;--fc:var(--brass-ac)}
.faces:has(#sk-velvet:checked){--sel:2;--fc:var(--velvet-ac)}
.faces:has(#sk-neon:checked){--sel:4;--fc:var(--neon-ac)}
.faces:has(#sk-graphite:checked){--sel:5;--fc:var(--graphite-ac)}
.faces:has(#sk-glacier:checked){--sel:6;--fc:var(--glacier-ac)}
.fanstage{position:relative;height:calc(var(--W) * 16 / 9 + 110px);margin-top:26px;overflow:hidden;touch-action:pan-y;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.fan{position:absolute;left:50%;bottom:44px;width:0;height:0}
.fc{position:absolute;left:0;bottom:0;width:var(--W);--d:calc(var(--i) - var(--sel));
  transform-origin:50% calc(100% + var(--R));transform:translateX(-50%) rotate(calc(var(--d) * var(--A)));
  z-index:calc(10 - max(var(--d), -1 * var(--d)));transition:transform .95s var(--swing),filter .6s ease;
  filter:brightness(calc(1 - min(1, max(var(--d), -1 * var(--d))) * .5)) saturate(calc(1 - min(1, max(var(--d), -1 * var(--d))) * .25))}
.fc img{width:100%;height:auto;border-radius:clamp(14px,2.2vw,22px);border:1px solid rgba(244,233,221,.14);box-shadow:0 22px 50px rgba(0,0,0,.6);background:var(--panel);cursor:pointer}
.fc:nth-child(1){--i:0}.fc:nth-child(2){--i:1}.fc:nth-child(3){--i:2}.fc:nth-child(4){--i:3}.fc:nth-child(5){--i:4}.fc:nth-child(6){--i:5}.fc:nth-child(7){--i:6}
html.js.enh:not(.failsafe) .fan:not(.in) .fc{transform:translateX(-50%) rotate(calc(var(--d) * 2deg)) translateY(30px)}
@media (min-width:700px){.faces{--A:11deg;--R:620px;--W:190px}.fanstage{height:calc(var(--W) * 16 / 9 + 140px)}}
@media (min-width:1100px){.faces{--A:10deg;--R:760px;--W:214px}}
.skinpick{border:0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:6px}
.chip{position:relative;display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 10px 0 8px;border:1px solid var(--line2);border-radius:999px;background:var(--panel);color:var(--text);font-size:.9rem;cursor:pointer;transition:border-color .2s,background .2s}
@media (min-width:700px){.chip{min-height:44px}}
.chip:hover{border-color:#7A5A3E}
.chip input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.chip i{width:18px;height:18px;border-radius:50%;flex:none;background:linear-gradient(135deg,var(--sb) 0 50%,var(--sa) 50% 100%);box-shadow:0 0 0 1px rgba(244,233,221,.5)}
.chip:has(input:checked){border-color:var(--accent);background:var(--panel2);color:var(--ink)}
.chip:has(input:checked)::after{content:"";position:absolute;left:50%;bottom:-1px;width:26px;height:3px;translate:-50% 0;border-radius:3px;background:var(--accent)}
.chip:has(input:focus-visible){outline:2px solid var(--mist);outline-offset:3px;box-shadow:0 0 0 5px rgba(18,11,7,.92)}
.skindesc{margin:18px auto 0;max-width:36rem;min-height:3.2em;text-align:center;color:var(--text2)}
.faces .caption{text-align:center}
.sounds{margin:40px auto 0;max-width:46rem;padding:22px 24px;border-radius:24px;background:var(--panel);border:1px solid var(--line);text-align:center}
.sounds h3{font-family:var(--display);font-weight:500;font-size:1.5rem}
.sounds p{margin-top:8px;color:var(--text2)}
.packs{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:14px}
.packs li{display:inline-flex;align-items:center;gap:7px;padding:5px 8px 5px 12px;border-radius:999px;background:var(--bg);border:1px solid var(--line);font-size:.9rem;color:var(--text)}

/* Pro */
.pro-sec{background:radial-gradient(60% 40% at 80% 10%,rgba(212,169,79,.08),transparent 70%)}
.tools{display:grid;gap:12px;margin-top:32px}
.tool{display:grid;grid-template-columns:auto 1fr;gap:4px 16px;padding:20px 22px;border-radius:20px;background:var(--panel);border:1px solid var(--line)}
.tool .ic{grid-row:span 2;width:40px;height:40px}
.tool h3{font-family:var(--display);font-weight:500;font-size:1.3rem;line-height:1.2}
.tool p{color:var(--text2);font-size:.97rem}
@media (min-width:760px){.tools{grid-template-columns:1fr 1fr;gap:16px}}
.plans{display:grid;gap:16px;margin-top:34px}
.plan{padding:26px;border-radius:26px;background:var(--panel);border:1px solid var(--line)}
.plan.pro{background:radial-gradient(120% 90% at 100% 0%,rgba(232,162,91,.18),transparent 60%),#1F140C;border-color:rgba(232,162,91,.45)}
.plan h3{font-family:var(--display);font-weight:500;font-size:1.8rem;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.plan h3 small{font-family:var(--sans);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);font-weight:650}
.plan ul{list-style:none;margin-top:14px;display:grid;gap:8px}
.plan li{position:relative;padding-left:20px;color:var(--text)}
.plan li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.plan:not(.pro) li::before{background:var(--text2)}
.plan-note{margin-top:16px;color:var(--text2);font-size:.95rem}
@media (min-width:820px){.plans{grid-template-columns:1fr 1fr;gap:22px}.plan{padding:32px}}

/* the film */
.promo{margin-top:26px}
.promo video{width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:20px;border:1px solid var(--line);box-shadow:0 26px 60px rgba(0,0,0,.55)}
.promo .note{display:flex;gap:6px 16px;flex-wrap:wrap;align-items:baseline;margin-top:12px;color:var(--dim);font-size:.86rem}
.promo .note a{display:inline-flex;align-items:center;min-height:24px}

/* inside the app */
.inside{margin-top:40px;padding:22px 24px;border-radius:22px;background:var(--panel);border:1px solid var(--line);max-width:52rem}
.inside p{color:var(--text2)}
.inside p+p{margin-top:8px}
.inside .big{font-family:var(--display);font-size:clamp(1.25rem,3vw,1.5rem);line-height:1.3;color:var(--ink)}

/* get */
main > section.get-sec{padding-top:24px}
.getbox{text-align:center;padding:40px 12px;border-radius:32px;background:radial-gradient(80% 120% at 50% 0%,rgba(232,162,91,.2),transparent 65%),#1A110B;border:1px solid rgba(232,162,91,.3)}
.getmark{width:64px;height:64px;margin:0 auto}
.getbox h2{margin:6px auto 0}
.getbox p{max-width:34rem;margin:14px auto 0;color:var(--text2)}
.getbox .store-row{justify-content:center;margin-top:20px}
@media (min-width:600px){.getbox{padding:44px 20px}.getbox .play-badge{height:76px}}

/* footer */
.foot{border-top:1px solid var(--line);padding:34px 0 92px;color:var(--dim);font-size:.9rem}
.foot .family{color:var(--text2);max-width:44rem}
.footlinks{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:16px}
.footlinks a{display:inline-flex;align-items:center;min-height:40px;padding:0 10px;margin-left:-10px;margin-right:6px;color:var(--text2);text-decoration:none;border-radius:8px}
.footlinks a:hover{color:var(--ink);text-decoration:underline}
.foot .co{margin-top:12px}
.foot .co a,.foot .family a{color:var(--text2)}
.legal-note{margin-top:10px;color:var(--dim);font-size:.8rem;line-height:1.5}

/* the fixed chips: Pause motion, and Stop the click while the click plays off screen */
.chips-fixed{position:fixed;right:12px;bottom:12px;z-index:60;display:flex;gap:8px;align-items:center}
.motion{font:inherit;font-size:.7rem;font-weight:650;letter-spacing:.12em;text-transform:uppercase;color:var(--text);background:rgba(18,11,7,.94);border:1px solid rgba(242,189,128,.55);border-radius:999px;padding:0 14px;min-height:38px;display:inline-flex;align-items:center;gap:8px;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.motion::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid var(--mist)}
.motion[aria-pressed="true"]{border-color:var(--mist);color:var(--ink)}
.motion[aria-pressed="true"]::before{background:var(--mist)}
.motion.sound::before{border-radius:2px;background:var(--mist)}
.motion[hidden]{display:none}
html.rm #motion,html:not(.js) .chips-fixed{display:none}
@media (max-width:599.98px){.motion .mw{display:none}}

/* ---------- motion (only with script, never under reduced motion, stopped by the chip) ---------- */
html.paused *,html.paused *::before,html.paused *::after{animation-play-state:paused!important}
.rv{transition:opacity .8s ease,transform .9s var(--ease);transition-delay:var(--dl,0s)}
html.js.enh:not(.failsafe) .rv:not(.in){opacity:0;transform:translateY(20px)}
.cardrow .card:nth-child(2),.plans .plan:nth-child(2){--dl:.12s}
.cardrow .card:nth-child(3){--dl:.24s}
.tiles .tile:nth-child(3n+2),.tools .tool:nth-child(2n){--dl:.08s}
.tiles .tile:nth-child(3n){--dl:.16s}
html.rm{scroll-behavior:auto}
html.rm .fc,html.rm .face,html.rm .tv .scr{transition:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important}}