/* Divisible Dash homepage styles. Loaded after css/site.css by index.html
   only; the shared stylesheet is untouched. Redesign agreed 2026-10-10 (one
   storm, lit from above): the nav and the hero keep their live rules, and
   everything below the hero draws only from the page tokens in :root.
   No emojis anywhere. Icons are drawn SVG paths or CSS shapes. */

:root {
  --ground: #0f1226;
  --ground-deep: #0a0f22;
  --ink: #eef0ff;
  --ink-2: #b4b9d9;
  --ink-3: #7f85ad;
  --bolt: #8CD9FF;
  --gold: #F2C94C;
  --line: rgba(140, 217, 255, 0.14);
  --maxw: 1180px;
  --gutter: 22px;
  --rhythm: 104px;
  /* The demo board rows are opaque so gliding rows never show text through
     each other. This is the ground they sit on. */
  --dbd-row: #0f1226;
}

/* The nav and the hero keep the live hairline colour. */
.site-nav, .hero { --line: #33386b; }

body {
  color: var(--ink-2);
  font-size: 16.5px;
  /* One slow darkening toward the footer. No radial blobs. */
  background-color: var(--ground-deep);
  background-image: linear-gradient(180deg, var(--ground) 0%, var(--ground) 52%, var(--ground-deep) 100%);
}
::selection { background: rgba(140, 217, 255, 0.3); }
a { color: var(--bolt); }
:focus-visible { outline: 2px solid var(--bolt); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { color: var(--ink); text-wrap: balance; }
/* Every h2 and h3 is below the hero; the rules that place them set their
   size, weight, line-height and margins. */
h2, h3 { margin: 0; line-height: inherit; letter-spacing: normal; }

.num { font-variant-numeric: tabular-nums; }

.container { padding: 0 var(--gutter); }

/* ---------------- Hero (as live) ---------------- */
.btn.hero-cta {
    display: inline-flex; align-items: center;
    background: linear-gradient(135deg, #57e6f2, var(--accent) 52%, #3fa9f0);
    color: var(--accent-ink);
  }

.btn.hero-cta {
    gap: 11px; border-color: rgba(160, 245, 255, 0.55); padding: 17px 32px; font-size: 18px; border-radius: 14px;
    box-shadow: 0 8px 26px rgba(53, 208, 224, 0.42), 0 0 0 6px rgba(53, 208, 224, 0.11);
  }

.btn.hero-cta:hover { filter: brightness(1.06); box-shadow: 0 10px 32px rgba(53, 208, 224, 0.55), 0 0 0 8px rgba(53, 208, 224, 0.16); }

.btn svg { flex: 0 0 auto; display: block; }

.store-pill {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13.5px; font-weight: 700; color: var(--ink-dim);
    border: 1px solid var(--line); border-radius: 999px; padding: 7px 14px;
    margin-bottom: 22px; background: rgba(23, 26, 53, 0.6);
  }

.store-pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px rgba(255, 207, 92, 0.7); }

.hero-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0.8; pointer-events: none; }

/* The fade ends in the page ground (--bg is --ground, #0f1226). */
.hero-fade {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
      radial-gradient(760px 560px at 22% 48%, rgba(15, 18, 38, 0.75), rgba(15, 18, 38, 0) 70%),
      linear-gradient(180deg, rgba(15, 18, 38, 0) 40%, var(--bg) 96%);
  }

/* Desktop hero: the copy on the left, the current build capture on the
   right. The container already sits above the canvas, so the falling tiles
   and the lightning pass behind the phone. Phones skip the capture: the
   How it plays recording follows straight after. */
.hero { padding: 96px 0 100px; }

@media (max-width: 600px) { .hero { padding: 64px 0 72px; } }

.hero-phone { display: none; }

@media (min-width: 861px) {
    .hero .container { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; }
    .hero-phone { display: block; }
  }

.phone {
    width: 272px; border-radius: 40px; padding: 8px; background: #060814;
    border: 1px solid var(--line);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(53, 208, 224, 0.1);
  }

.phone img { display: block; width: 100%; height: auto; border-radius: 32px; }

/* Phones: hero buttons fill their row, the big ones take a row each. The
   ghost buttons below the hero keep their own width. */
@media (max-width: 520px) {
    .row-btns .btn { flex: 1 1 auto; }
    .row-btns .btn.big, .row-btns .btn.hero-cta { flex-basis: 100%; }
    .btn.hero-cta { justify-content: center; }
    .row-btns .btn.quiet { flex: 0 0 auto; }
  }

/* ---------------- Buttons below the hero ---------------- */
/* Ghost. */
.btn.quiet {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border-color: var(--line); color: var(--ink);
  font-weight: 600; line-height: 1.4;
}
.btn.quiet:hover { border-color: rgba(140, 217, 255, 0.55); background: rgba(140, 217, 255, 0.05); filter: none; }

/* Text link: plain --bolt, underline on hover. */
.tlink { color: var(--bolt); font-weight: 600; font-size: 15.5px; }

.row-btns.links { gap: 10px 26px; }

/* ---------------- Below the hero ---------------- */
/* Page-wide tile field (js/page-field.js): one fixed canvas behind all
   content. Content sits above it at z-index 1. */
#page-field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main, .site-footer { position: relative; z-index: 1; }

/* Static afterglow at the hero's foot, under the phone. Full width, so it
   never widens the page; the ellipse (900 by 300) lives in the gradient.
   z-index 1 lifts it over the hero fade but under the hero copy (z 2). It
   has fully faded 14px above the first heading. No motion. */
#how { position: relative; }
#how::before {
  content: ""; position: absolute; left: 0; right: 0; top: -210px; height: 300px;
  z-index: 1; pointer-events: none;
  background: radial-gradient(450px 150px at calc(50% + 432px) 50%, rgba(140, 217, 255, 0.07), rgba(140, 217, 255, 0));
}
.sec { padding-top: var(--rhythm); }
.sec h2 {
  font-size: clamp(32px, 4vw, 44px); font-weight: 700; line-height: 1.08;
  letter-spacing: -0.02em; margin: 0 0 18px;
}
.sec .lead { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 58ch; margin: 0; }
.sec p { color: var(--ink-2); }
.sec strong, .runin { font-weight: 600; color: var(--ink); }
.caption { font-size: 13.5px; color: var(--ink-3); }
.hair { border: 0; height: 1px; background: var(--line); margin: 0; }

/* Scroll reveals. The hidden state exists only once the page script has
   added .rv-on to <html>, which it never does under reduced motion or
   without IntersectionObserver, so the page is complete without JS. */
.rv-on [data-rv] {
  opacity: 0; transform: translateY(18px);
  transition: opacity 600ms ease-out, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1);
  transition-delay: var(--rvd, 0ms);
}
.rv-on [data-rv].in { opacity: 1; transform: none; }

/* How it plays: the real recording in a phone, the beats in sync with it.
   The head and the beat list share the left column; the beat list
   stretches to the phone's height, so there is no gap under the lead. */
#how::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(4, 6, 16, 0.35), rgba(4, 6, 16, 0) 24%, rgba(4, 6, 16, 0) 76%, rgba(4, 6, 16, 0.35));
  -webkit-mask: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
  mask: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
}
#how > .container { position: relative; z-index: 2; }
.play {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: 72px;
  grid-template-rows: auto 1fr; grid-template-areas: "head phone" "beats phone"; align-items: stretch;
}
.play-head { grid-area: head; }
.beats-wrap { grid-area: beats; position: relative; margin-top: 44px; display: flex; flex-direction: column; }
.beats {
  flex: 1 1 auto; position: relative; list-style: none; margin: 0; padding: 0 0 0 34px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
/* The rail, and one marker per beat on it. */
.beats::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 1px; z-index: 0; }
.beats li { position: relative; z-index: 2; }
.beats li::before, .beats li::after {
  content: ""; position: absolute; left: -34px; top: 6px; width: 10px; height: 10px; border-radius: 50%;
}
.beats li::before { background: var(--ink-3); transition: background-color 200ms ease-out; }
.beats li::after { background: var(--bolt); box-shadow: 0 0 16px rgba(140, 217, 255, 0.75); opacity: 0; transition: opacity 200ms ease-out; }
.beats h3 { font-size: 17px; font-weight: 600; line-height: 1.3; margin: 0; color: var(--ink); transition: color 200ms ease-out; }
.beats p { font-size: 15px; line-height: 1.55; margin: 6px 0 0; color: var(--ink-2); transition: color 200ms ease-out; }
/* In sync with the video (page script adds .sync; at rest, without JS
   and under reduced motion, every beat stays in --ink). */
.beats.sync h3 { color: var(--ink-2); }
.beats.sync p { color: var(--ink-3); }
.beats.sync li.on h3 { color: var(--ink); }
.beats.sync li.on p { color: var(--ink-2); }
/* A dot lights when the comet head reaches it (.lit); the cue table sets
   the title and copy emphasis (.on). */
.beats.sync li.lit::after { opacity: 1; }
/* The strike: the beat 3 dot pops 1 to 1.6 to 1 in 320ms. Scaling the dot
   scales its 16px glow to about 24px with it. Transform only. */
.beats.sync li.hit::after { animation: dotpop 320ms ease-out; }
@keyframes dotpop { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.6); } }
/* The rail tour (page script, motion only): a bolt inlay that fills from
   the top at the clip's pace, a comet head at its front, and a flash of the
   whole rail at the strike. Transform and opacity only. */
.rail-tour { display: none; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; z-index: 1; pointer-events: none; }
.beats-wrap.sync .rail-tour { display: block; }
.rt-fill, .rt-flash { position: absolute; left: 4px; top: 8px; width: 2px; border-radius: 1px; background: var(--bolt); }
.rt-fill { height: 0; transform: scaleY(0); transform-origin: 50% 0; box-shadow: 0 0 6px rgba(140, 217, 255, 0.55); will-change: transform; }
.rt-flash { bottom: 8px; opacity: 0; box-shadow: 0 0 10px rgba(140, 217, 255, 0.9); }
.rt-flash.go { animation: railflash 600ms ease-out; }
@keyframes railflash { 0% { opacity: 1; } 100% { opacity: 0; } }
.rt-head { position: absolute; left: 5px; top: 0; width: 0; height: 0; will-change: transform; }
.rt-head::before {
  content: ""; position: absolute; left: -1px; top: -36px; width: 2px; height: 36px; border-radius: 1px;
  background: linear-gradient(180deg, rgba(140, 217, 255, 0), var(--bolt));
}
.rt-head::after {
  content: ""; position: absolute; left: -2.5px; top: -2.5px; width: 5px; height: 5px; border-radius: 50%;
  background: #ffffff; box-shadow: 0 0 0 1px var(--bolt), 0 0 10px 3px rgba(140, 217, 255, 0.85);
}
.play-phone { grid-area: phone; position: relative; margin: 0; display: flex; flex-direction: column; align-items: center; }
/* The Diamond stage's plinth light, stood upright behind the phone. */
.play-phone::before {
  content: ""; position: absolute; left: 0; right: 0; top: 47%; height: 900px; transform: translateY(-50%);
  pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(140, 217, 255, 0.30), rgba(140, 217, 255, 0.12) 35%, rgba(140, 217, 255, 0) 70%);
}
.play-phone > * { position: relative; z-index: 1; }
/* The hero's phone recipe at 340px. */
.vphone {
  width: 340px; padding: 8px; border-radius: 44px; background: #060814; border: 1px solid var(--line);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 60px rgba(53, 208, 224, 0.1), 0 0 60px rgba(140, 217, 255, 0.12);
}
.screen { position: relative; border-radius: 36px; overflow: hidden; aspect-ratio: 540 / 1174; background: #060814; }
.screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Loop seam: a ground-coloured veil the page script fades in over the last
   0.35s and out over the first 0.35s of each loop. Opacity only. */
.seam { position: absolute; inset: 0; background: var(--ground); opacity: 0; pointer-events: none; will-change: opacity; }
.play-phone figcaption { margin-top: 16px; text-align: center; }

/* The nine tests: one focus tile and an index */
.tests { display: grid; grid-template-columns: 480px minmax(0, 1fr); gap: 64px; align-items: center; margin-top: 48px; }
.focus { position: relative; text-align: center; padding: 26px 0 6px; }
/* The Diamond stage's plinth light behind the focus tile. */
.focus::before {
  content: ""; position: absolute; left: 0; right: 0; top: 34%; height: 380px; transform: translateY(-50%);
  pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(140, 217, 255, 0.18), rgba(140, 217, 255, 0.07) 35%, rgba(140, 217, 255, 0) 70%);
}
.focus > * { position: relative; z-index: 1; }
.ftile { position: relative; width: 300px; height: 131.25px; margin: 0 auto; }
/* diamond-blank.webp is 240 native, shown at 300 here until a 2x bake lands. */
.ftile img { display: block; width: 100%; height: 100%; filter: url(#tile-cut) drop-shadow(0 0 18px rgba(150, 220, 255, 0.45)); }
.ftile .shine {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2;
  -webkit-mask: url(/img/tiles/diamond-blank.webp) center / contain no-repeat; mask: url(/img/tiles/diamond-blank.webp) center / contain no-repeat;
}
.ftile .shine::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; width: 50%; left: -70%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: translateX(0) skewX(-18deg);
  animation: sweep 6s ease-in-out infinite 0.8s;
}
/* The number is live text over the blank face, in Mulish 900 (tile digits
   only), sized so "3,748" spans about 62% of the tile. */
.fnum {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center;
  padding-top: 3px;
  font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: 900; font-size: 71px; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums;
  color: #17253a; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: opacity 150ms ease-out;
}
/* Lit digits: solid, with a tight 2px edge only. A wide glow smears on the
   near-white face. */
.fnum .lit { color: #0a7fc4; text-shadow: 0 0 2px rgba(140, 217, 255, 0.6); }
.fnum .lit.ig { animation: ignite 520ms ease-out both; }
.fnum.out, .fcap.out { opacity: 0; }
.focus.paused .shine::after { animation-play-state: paused; }
.fcap { margin-top: 14px; transition: opacity 150ms ease-out; }
.fcap h3 { font-size: 20px; font-weight: 600; line-height: 1.3; margin: 0 0 6px; color: var(--ink); }
.fcap p { font-size: 16px; line-height: 1.5; margin: 0; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.fcap .hl { color: var(--bolt); }
@keyframes ignite {
  0% { color: #17253a; text-shadow: 0 0 0 rgba(140, 217, 255, 0), 0 1px 0 rgba(255, 255, 255, 0.5); }
  23% { color: #ffffff; text-shadow: 0 0 22px rgba(140, 217, 255, 1), 0 1px 0 rgba(255, 255, 255, 0.5); }
  100% { color: #0a7fc4; text-shadow: 0 0 2px rgba(140, 217, 255, 0.6); }
}
/* The index: nine rows, each a button. */
.tindex { list-style: none; margin: 0; padding: 0; }
.tindex li + li { margin-top: 2px; }
.trow {
  appearance: none; -webkit-appearance: none; background: none; border: 0; margin: 0; font: inherit; color: inherit;
  width: 100%; text-align: left; cursor: pointer; position: relative;
  display: grid; grid-template-columns: 28px 64px minmax(0, 1fr); column-gap: 16px; align-items: center;
  padding: 10px 10px 10px 18px; border-radius: 8px; font-variant-numeric: tabular-nums;
  -webkit-tap-highlight-color: transparent; transition: background-color 150ms ease-out;
}
.trow:hover { background: rgba(140, 217, 255, 0.04); }
.trow:focus-visible { outline: 2px solid var(--bolt); outline-offset: -2px; border-radius: 6px; }
.trow::before {
  content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px;
  background: var(--bolt); box-shadow: 0 0 10px rgba(140, 217, 255, 0.6);
  opacity: 0; transform: scaleY(0.4); transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.trow.on::before { opacity: 1; transform: none; }
/* The divisor in a ring, drawn like the Drill rings. */
.td svg { display: block; width: 28px; height: 28px; }
.td circle { fill: rgba(140, 217, 255, 0); stroke: var(--line); stroke-width: 2; transition: stroke 200ms ease-out, fill 200ms ease-out; }
.td text { fill: var(--ink); font: 600 11.5px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.trow.on .td circle { stroke: var(--bolt); fill: rgba(140, 217, 255, 0.1); }
.tn { font-size: 17px; color: var(--ink-2); white-space: nowrap; transition: color 200ms ease-out; }
.tn .lit { color: var(--bolt); }
.trow.on .tn { color: var(--ink); }
.tr { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.after-rules { margin-top: 44px; }

/* Drill: the paragraph left, nine accuracy rings right */
.drill { margin-top: 72px; padding-top: 36px; border-top: 1px solid var(--line); display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 56px; align-items: center; }
.drill p { margin: 0 0 12px; }
.rings { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 18px 12px; }
/* Eleven rings (2 to 12): at most six across, so the rows read 6 and 5. */
#drill-rings { max-width: 444px; }
.ring { width: 64px; text-align: center; font-variant-numeric: tabular-nums; }
.ring svg { display: block; width: 64px; height: 64px; }
/* The game's mini ring: a dark well with a navy bezel, a slate track, and
   an arc in the accuracy colour (--c, set by the page script from the
   game's HSV ramp). The one place the game's red, yellow and green appear. */
.ring { --c: var(--bolt); }
.ring .well { fill: rgb(4, 5, 10); stroke: rgb(22, 27, 46); stroke-width: 2; }
.ring .track { fill: none; stroke: rgb(41, 46, 61); stroke-width: 4; }
.ring .arc {
  fill: none; stroke: var(--c); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 163.36; stroke-dashoffset: var(--o);
  transform: rotate(-90deg); transform-origin: 32px 32px;
  transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i) * 60ms);
}
.ring text { fill: var(--ink); font: 600 15px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.ring .pct { display: block; margin-top: 6px; font-size: 13px; color: var(--c); }
.rings.pre .arc { stroke-dashoffset: 163.36; transition: none; }
.rings-cap { margin: 16px 0 0 !important; }

/* For teachers */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 72px; margin-top: 48px; align-items: start; }
.split p { margin: 0 0 18px; }
.ticks { list-style: none; padding: 0; margin: 26px 0 0; }
.ticks li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; margin-bottom: 14px; }
.ticks svg { margin-top: 4px; display: block; }
.board-wrap { min-width: 0; }
/* Rows are hidden until the section reveals, then cascade in 40ms apart. */
#demo-board.dbd-pre .dbd-row { opacity: 0; }
.weak { margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.weak .caption { margin: 0 0 6px; }
.weak .read { margin: 0 0 12px; color: var(--ink-2); font-size: 15.5px; }
.weak .read b { font-weight: 600; color: var(--ink); font-size: 18px; }
.bar { height: 4px; background: var(--line); border-radius: 2px; overflow: hidden; }
.bar span { display: block; width: 55%; height: 100%; background: var(--bolt); border-radius: 2px; transform-origin: left center; transition: transform 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms; }
.weak.pre .bar span { transform: scaleX(0); }
.teach-actions { margin-top: 44px; }

/* Skins: one Diamond, four summits kept secret */
/* A static navy vignette at the section's sides, feathered top and bottom
   so it has no edge. */
#skins { position: relative; }
#skins::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(90deg, rgba(4, 6, 16, 0.35), rgba(4, 6, 16, 0) 24%, rgba(4, 6, 16, 0) 76%, rgba(4, 6, 16, 0.35));
  -webkit-mask: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
  mask: linear-gradient(180deg, transparent, #000 140px, #000 calc(100% - 140px), transparent);
}
#skins > .container { position: relative; z-index: 1; }
.stage {
  position: relative; margin-top: 40px; min-height: 340px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 320px minmax(0, 1fr) minmax(0, 1fr);
  align-items: center; justify-items: center; gap: 0 12px;
}
/* The plinth light: bolt at 0.30 in the core, gone by 70%. Static. */
.stage::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1000px; height: 420px;
  transform: translate(-50%, -56%); pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(140, 217, 255, 0.30), rgba(140, 217, 255, 0.12) 35%, rgba(140, 217, 255, 0) 70%);
}
.stage > * { position: relative; z-index: 1; text-align: center; }
/* The bob moves only this wrapper, by transform, so the filtered tile
   underneath stays a cached layer. */
.diamond .float { animation: bob 5s ease-in-out infinite; will-change: transform; }
@keyframes bob { 0%, 100% { transform: translateY(-4px); } 50% { transform: translateY(4px); } }
.diamond .art { position: relative; width: 240px; height: 105px; margin: 0 auto; }
/* #tile-cut drops the bake's faint edge halo so the glow follows the tile. */
.diamond .art img { display: block; width: 240px; height: 105px; filter: url(#tile-cut) drop-shadow(0 0 22px rgba(140, 217, 255, 0.6)); }
.diamond .art .shine, .diamond .art .glint {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: url(/img/tiles/diamond-next.webp) center / contain no-repeat; mask: url(/img/tiles/diamond-next.webp) center / contain no-repeat;
}
.diamond .art .shine::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; width: 50%; left: -70%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.45), transparent);
  transform: translateX(0) skewX(-18deg);
  animation: sweep 6s ease-in-out infinite 0.8s;
}
@keyframes sweep {
  0% { transform: translateX(0) skewX(-18deg); }
  28%, 100% { transform: translateX(380%) skewX(-18deg); }
}
/* A second, narrow glint 2s after the broad sweep. */
.diamond .art .glint::after {
  content: ""; position: absolute; top: -30%; bottom: -30%; width: 12%; left: -20%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.7), transparent);
  transform: translateX(0) skewX(-18deg);
  animation: glint 6s ease-in-out infinite 2.8s;
}
@keyframes glint {
  0% { transform: translateX(0) skewX(-18deg); }
  18%, 100% { transform: translateX(1250%) skewX(-18deg); }
}
/* A small four-point star on the top-left facet, 500ms in every 6s. */
.diamond .star {
  position: absolute; left: 15%; top: 6%; width: 18px; height: 18px; pointer-events: none;
  transform: scale(0); filter: drop-shadow(0 0 5px rgba(140, 217, 255, 0.9));
  animation: star 6s ease-in-out infinite 1.5s;
}
@keyframes star {
  0% { transform: scale(0) rotate(0deg); }
  4.2% { transform: scale(1) rotate(45deg); }
  8.3%, 100% { transform: scale(0) rotate(90deg); }
}
/* Floor reflection: the same art flipped, faint, soft, fading over 40px. */
.diamond .reflect {
  width: 240px; height: 40px; margin: 4px auto 0; overflow: hidden; opacity: 0.18;
  -webkit-mask: linear-gradient(180deg, #000, transparent 40px); mask: linear-gradient(180deg, #000, transparent 40px);
}
.diamond .reflect img { display: block; width: 240px; height: 105px; transform: scaleY(-1); filter: url(#tile-cut) blur(2px); }
.diamond .name { margin-top: 6px; font-size: 17px; font-weight: 600; color: var(--ink); }
/* The live mystery tile, quieter than the Diamond. */
.mys {
  position: relative; display: flex; align-items: center; justify-content: center; margin: 0 auto;
  width: 112px; height: 49px; border-radius: 11px; overflow: hidden;
  background: linear-gradient(165deg, #1b2140, #10142b);
  border: 1px solid rgba(150, 220, 255, 0.4); color: #bfe6ff;
  box-shadow: 0 0 18px rgba(150, 220, 255, 0.2), inset 0 0 22px rgba(20, 40, 70, 0.6);
  font-family: "Mulish", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 21px; font-weight: 900; line-height: 1;
}
.mys::after {
  content: ""; position: absolute; top: -20%; bottom: -20%; width: 34%; left: -60%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.22), transparent);
  transform: translateX(0) skewX(-18deg);
  animation: skinshine 7s ease-in-out infinite; animation-delay: var(--d, 0s);
}
@keyframes skinshine {
  0% { transform: translateX(0) skewX(-18deg); }
  16%, 100% { transform: translateX(558.82%) skewX(-18deg); }
}
/* The outer pair sits 12px lower: a shallow arc, Diamond at the crest. */
.summit.s1, .summit.s4 { top: 12px; }
.summit .name { margin-top: 12px; font-size: 14px; font-weight: 600; color: var(--ink); }
.skins-paused .mys::after, .skins-paused .diamond .shine::after, .skins-paused .diamond .glint::after,
.skins-paused .diamond .star, .skins-paused .diamond .float { animation-play-state: paused; }

details.all { margin-top: 36px; }
details.all > summary {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
  color: var(--bolt); font-weight: 600; font-size: 15.5px;
}
details.all > summary::-webkit-details-marker { display: none; }
details.all > summary::after, .faq summary::after {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease;
}
details[open] > summary::after { transform: translateY(2px) rotate(225deg); }
/* See all 45: the game's rail-and-rung ladders. */
.ladders-note { margin: 22px 0 0 !important; font-size: 15px; color: var(--ink-2); }
.ladders { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 40px 56px; margin-top: 30px; }
.ladder h3 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--ink); }
.ladder-sub { margin: 0 0 4px !important; font-size: 13px; color: var(--ink-3) !important; }
/* The groove: a dark channel with a faint rim, as on the game's skin rail. */
.ladder ol { position: relative; list-style: none; margin: 12px 0 0; padding: 0 0 0 26px; }
.ladder ol::before {
  content: ""; position: absolute; left: 1px; top: 4px; bottom: 4px; width: 6px; box-sizing: border-box;
  border-radius: 3px; background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(140, 217, 255, 0.10); z-index: 0;
}
/* The bolt inlay, top to summit. Full at rest; the page script climbs it
   once, when the list first opens. */
.ladder ol::after {
  content: ""; position: absolute; left: 3px; top: 4px; bottom: 20px; width: 2px; border-radius: 1px;
  background: var(--bolt); box-shadow: 0 0 6px rgba(140, 217, 255, 0.55); z-index: 0;
  transform: scaleY(1); transform-origin: 50% 0;
  transition: transform 1.2s cubic-bezier(0.3, 0.7, 0.2, 1) calc(var(--k, 0) * 120ms);
}
.lad-pre .ladder ol::after { transform: scaleY(0); transition: none; }
.ladder li { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; padding: 3px 0; }
/* Rungs: hollow 8px sockets; the summit a filled 10px stud with the 16px glow. */
.ladder li::before {
  content: ""; position: absolute; left: -26px; top: 50%; width: 8px; height: 8px; margin-top: -4px;
  border-radius: 50%; box-sizing: border-box; background: #090c1a; border: 1.5px solid rgba(140, 217, 255, 0.3);
}
.ladder li.summit::before { left: -27px; width: 10px; height: 10px; margin-top: -5px; border: 0; background: var(--bolt); box-shadow: 0 0 16px rgba(140, 217, 255, 0.75); }
.ladder li.soon::before { border: 1px dashed var(--ink-3); }
.ladder .nm { font-size: 15px; color: var(--ink); }
.ladder li.soon .nm { color: var(--ink-3); }
.ladder .lock { display: inline-block; vertical-align: -1px; margin-right: 6px; fill: none; stroke: var(--ink-3); stroke-width: 1.4; stroke-linecap: round; }

/* Sheet lightning overlay (js/page-field.js pulses its opacity). */
#sheet { position: fixed; inset: 0; z-index: 0; pointer-events: none; background: rgb(110, 160, 240); opacity: 0; transition: opacity 45ms linear; }

/* Parents: the game's picked-name chooser */
.picker {
  display: inline-flex; margin: 12px 0 22px; padding: 10px 2px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  font-size: 30px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.picker .slot { display: inline-block; height: 1.25em; line-height: 1.25em; overflow: hidden; }
.picker .slot > span { display: inline-block; transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 300ms ease-out; }
.picker .slot > span.up { transform: translateY(-24px); opacity: 0; }
.picker .slot > span.below { transform: translateY(24px); opacity: 0; transition: none; }
.picker .slot.num { color: var(--bolt); text-shadow: 0 0 14px rgba(140, 217, 255, 0.45); }


/* Get the app: the power ring, charging to full on reveal */
.charge { width: 64px; height: 64px; margin: 0 auto 22px; }
.charge svg { display: block; width: 64px; height: 64px; }
.charge .track { fill: none; stroke: var(--line); stroke-width: 4; }
.charge .arc {
  fill: none; stroke: var(--gold); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 163.36; stroke-dashoffset: 0;
  transform: rotate(-90deg); transform-origin: 32px 32px;
  transition: stroke-dashoffset 900ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms;
}
.charge.pre .arc { stroke-dashoffset: 163.36; transition: none; }
.charge .glyph { fill: var(--gold); }

/* Parents and questions */
.duo { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 72px; align-items: start; }
.duo h3.q { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; margin: 14px 0 22px; }
.faqs { border-top: 1px solid var(--line); }
/* site.css draws details.faq as cards; here they are hairline rows. */
details.faq { background: none; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; margin: 0; overflow: visible; }
details.faq[open] { border-color: var(--line); }
details.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0; cursor: pointer; list-style: none;
  color: var(--ink); font-weight: 600; font-size: 16.5px;
}
details.faq summary:hover { background: none; }
details.faq[open] summary { border-bottom: 0; }
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: ""; width: 8px; height: 8px; flex: 0 0 auto;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.15s ease;
  color: var(--ink-3); margin-right: 4px;
}
details.faq[open] summary::after { transform: translateY(2px) rotate(225deg); }
.faq .body { padding: 0 0 18px; }
.faq .body p { margin: 0; font-size: 15.5px; }
.legal-links { margin-top: 22px !important; font-size: 15px; }

/* Get the app. The store badges keep site.css's rules untouched. */
.get { text-align: center; padding-bottom: 8px; }
.get h2 { margin-left: auto !important; margin-right: auto !important; }
.get .lead { margin: 0 auto !important; }
.launch { margin: 16px 0 0 !important; font-size: 13.5px; color: var(--ink-3) !important; }
.get .row-btns { justify-content: center; margin-top: 28px; }
.trademark-note { margin: 34px auto 0 !important; max-width: 620px; font-size: 11.5px; line-height: 1.6; color: var(--ink-3) !important; opacity: 1; }

/* Footer (as live, on the page tokens) */
.site-footer { border-top: 1px solid var(--line); background: none; padding: 34px 0 44px; margin-top: var(--rhythm); font-size: 14px; color: var(--ink-3); }
.site-footer .inner { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.site-footer .foot-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 700; }
.site-footer nav { display: flex; gap: 8px 20px; flex-wrap: wrap; align-items: center; }
.site-footer a { color: var(--ink-2); }
.site-footer a:hover { color: var(--ink); }
.site-footer .foot-note { flex-basis: 100%; margin: 10px 0 0; font-size: 13px; }
.site-footer .foot-legal { margin-top: 0; font-size: 12px; opacity: 1; }
.site-footer .foot-legal a { color: inherit; }

/* ---------------- Narrower screens ---------------- */
@media (max-width: 1080px) {
  .play { grid-template-columns: minmax(0, 1fr) 380px; column-gap: 48px; }
  .vphone { width: 320px; }
  .tests { grid-template-columns: 400px minmax(0, 1fr); gap: 44px; }
  .drill { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 960px) {
  .stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .stage .diamond { grid-column: 1 / -1; order: -1; margin-bottom: 8px; }
  .summit.s1, .summit.s4 { top: 0; }
  .stage::before { top: 0; transform: translate(-50%, -18%); width: 100%; height: 280px; }
}
@media (max-width: 860px) {
  .split, .duo { grid-template-columns: 1fr; gap: 48px; }
  .play { grid-template-columns: 1fr; grid-template-rows: auto auto auto; grid-template-areas: "head" "phone" "beats"; }
  .play-phone { margin-top: 36px; }
  .vphone { width: 300px; border-radius: 40px; }
  .screen { border-radius: 32px; }
  .beats-wrap { margin-top: 40px; }
  .beats { justify-content: flex-start; }
  .tests { grid-template-columns: 1fr; gap: 28px; }
  .focus .ftile { width: 240px; }
  .focus .ftile { height: 105px; }
  .fnum { font-size: 57px; }
  .focus::before { height: 300px; }
  #how::before { background: radial-gradient(450px 150px at 50% 50%, rgba(140, 217, 255, 0.07), rgba(140, 217, 255, 0)); }
}
@media (max-width: 600px) {
  :root { --gutter: 16px; --rhythm: 64px; }
  .beats { gap: 26px; }
  .sec .lead { font-size: 17.5px; }
  .trow { grid-template-columns: 28px minmax(0, 1fr); padding: 10px 8px 10px 16px; }
  .tr { grid-column: 2 / -1; margin-top: 3px; }
  .drill { margin-top: 48px; }
  .rings { gap: 16px 8px; }
  .picker { font-size: 25px; }

  .ladders { grid-template-columns: 1fr; }
  .split, .duo { gap: 40px; }
}
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }