/* Bead site, "The thread" (site refresh 2026-09-27, bead.css v1).
   The logo is a bead on a thread; the page grows it up. The hero is a thread across the screen where the
   lanes sit as calm beads (Soon, Waiting, Today) and a Today bead fills, slides along and settles green:
   done. Further down, the story hangs on a spine whose chapter beads turn green as you read them, a
   sketch of the board lets you swipe a row, and the accent picker recolours the accent only, as the app
   does.

   Rules this file keeps (Bead's own, from the app: ui/Theme.kt, PIPELINE.md "The product claim"):
   - NEVER red, anywhere: no colour here passes the app's red rule (r > 140, r-g > 60, r-b > 60) or sits
     in the red hue band. tools/nored.py in the site repo (reading the "nored" block of
     tools/contrast-manifest.json) proves it for both stylesheets, the inline SVG/style colours of
     every page, bead.js and the rasters this refresh made.
   - Amber #D9A441 is the Waiting lane and NOTHING else: it is used only as var(--amber) inside rules
     whose selector names a wait* class (nored.py proves that too).
   - The page tokens are BeadPalette verbatim; the seven accent packs are AccentPacks.kt verbatim. Only
     --acc/--acc2 follow the picker (the app: only accent roles recolour; ground, amber and green are locked).
   - Text never sits on anything that moves. 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 the thread.
   - Colours are tokens; the contrast proof is tools/contrast-manifest.json (site repo) through the site-kit
     contrast.py, every accent-coloured pair in all seven packs. Change a colour, run both gates.
   - assets/style.css is the old family sheet, left byte-identical and no longer referenced. */

@font-face{font-family:"Fraunces";font-style:normal;font-weight:380 660;font-display:swap;src:url(fonts/fraunces-bead.woff2) format("woff2")}

:root{
  /* the page: BeadPalette (ui/Theme.kt) */
  --bg:#07090D;          /* page field, a touch deeper than the app ground */
  --ground:#0A0C10;      /* BeadPalette.ground */
  --panel:#12151C;       /* BeadPalette.surface */
  --panel2:#171B24;      /* BeadPalette.surface2 */
  --line:#242A36;        /* BeadPalette.line */
  --line2:#343C4C;       /* control outline, lifted for 3:1 */
  --thread:#3A4254;      /* the thread itself */
  --ink:#F2F5FA;         /* headings (the cards' ink) */
  --text:#E8ECF2;        /* BeadPalette.text */
  --text2:#C3CAD6;       /* secondary body */
  --dim:#8B93A3;         /* BeadPalette.muted: small print */
  --faint:#5C6373;       /* BeadPalette.faint: decoration only, never text */
  --mist:#6F9DFF;        /* links and focus: Electric accentBright */
  --brand:#3D7BFF;       /* the Get button: Electric accent */
  --onbrand:#07090D;     /* text on the Get button (the app: onPrimary = ground) */
  --amber:#D9A441;       /* the Waiting lane. Nowhere else, ever. */
  --good:#4FB87A;        /* the done bead */
  --good2:#8FDDB0;       /* the done bead's highlight */
  --good3:#2F7A52;       /* the done bead's shade */
  --tagpro:#B9CCFF;--tagpro-bg:#1A2542;
  --tagfree:#A9E3C3;--tagfree-bg:#14271E;

  /* the seven accent packs, verbatim from ui/AccentPacks.kt: a = accent, b = accentBright */
  --electric-a:#3D7BFF;--electric-b:#6F9DFF;
  --violet-a:#7B61FF;--violet-b:#9D8CFF;
  --teal-a:#2BB8A8;--teal-b:#5FD9CB;
  --moss-a:#6FA65A;--moss-b:#97C77F;
  --orchid-a:#C061D6;--orchid-b:#D492E6;
  --frost-a:#3FC2E6;--frost-b:#79D9F2;
  --cornflower-a:#6E9FD6;--cornflower-b:#98BEE8;
  --acc:var(--electric-a);
  --acc2:var(--electric-b);

  --navh:56px;
  --pad:clamp(16px,4.2vw,40px);
  --display:"Fraunces","Iowan Old Style",Georgia,"Times New Roman",serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --glide:cubic-bezier(.5,0,.2,1);
  --ease:cubic-bezier(.2,.7,.2,1);
  color-scheme:dark;
}
/* the accent picker (Make it yours): the app's rule, only the accent roles move */
:root:has(#ac-violet:checked){--acc:var(--violet-a);--acc2:var(--violet-b)}
:root:has(#ac-teal:checked){--acc:var(--teal-a);--acc2:var(--teal-b)}
:root:has(#ac-moss:checked){--acc:var(--moss-a);--acc2:var(--moss-b)}
:root:has(#ac-orchid:checked){--acc:var(--orchid-a);--acc2:var(--orchid-b)}
:root:has(#ac-frost:checked){--acc:var(--frost-a);--acc2:var(--frost-b)}
:root:has(#ac-cornflower:checked){--acc:var(--cornflower-a);--acc2:var(--cornflower-b)}

*,*::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:#A9C3FF}
strong{color:var(--ink);font-weight:650}
em{font-style:italic}
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 badges, the board and every surface */
: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(7,9,13,.92)}
.skip{position:absolute;left:-999px;top:8px;z-index:90;background:var(--ink);color:var(--bg);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(7,9,13,.8);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);border-bottom:1px solid rgba(52,60,76,0);transition:background .3s,border-color .3s}
.nav.scrolled,html:not(.js) .nav{background:rgba(7,9,13,.94);border-bottom-color:rgba(52,60,76,.9)}
.navin{max-width:1160px;margin:0 auto;height:100%;padding:0 var(--pad);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:32px;height:32px;flex:none}
.wordmark{font-weight:600;font-size:.86rem;letter-spacing:.38em;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(--brand);color:var(--onbrand);font-weight:700;font-size:.86rem;text-decoration:none;white-space:nowrap}
.getbtn:hover{background:#6F9DFF;color:var(--onbrand)}
.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(18,21,28,.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{gap:10px}.wordmark{font-size:.9rem;letter-spacing:.42em}.getbtn{padding:0 16px;font-size:.9rem}}
@media (max-width:339.98px){.wordmark{display:none}}
@media (min-width:860px){
  .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,.05)}
  .getbtn{margin-left:8px}
  .navmenu{display:none}
}
@media (prefers-reduced-motion:no-preference){
  .logo-b .done{transition:transform .4s cubic-bezier(.2,.7,.3,1)}
  .brand:hover .logo-b .done{transform:translateX(6px)}
}

/* ---------- hero ---------- */
.hero{position:relative;overflow:hidden;padding:calc(var(--navh) + 20px) 0 34px;
  background:radial-gradient(80% 42% at 50% 0%,rgba(61,123,255,.12),transparent 70%),var(--bg)}
.hero-in{position:relative;max-width:1160px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-areas:"copy" "thread" "stage";gap:22px}
.hero-copy{grid-area:copy;position:relative;z-index:2}
.eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc2);font-weight:650;text-wrap:balance}
@media (max-width:420px){.eyebrow{font-size:.7rem;letter-spacing:.12em}}
.hero h1{font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,10vw,3.3rem);line-height:1.02;letter-spacing:-.015em;color:var(--ink);margin-top:10px;max-width:14ch}
.hero h1 em{display:block;font-style:normal;color:var(--acc2)}
.lede{margin-top:12px;color:var(--text2);font-size:1.04rem;line-height:1.5;max-width:31rem}
.lede strong{color:var(--ink)}
.pillars{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.pillars li{border:1px solid rgba(111,157,255,.34);background:rgba(111,157,255,.07);color:#DCE5F5;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}
.app-store-badge{height:43px;width:auto;margin:0 0 0 2px}
@media (max-width:359px){.play-badge{height:56px}.app-store-badge{height:37.6px}.hero h1{font-size:2.05rem}}

/* the thread: the lanes as calm beads, and the one that finishes */
.thread{grid-area:thread;position:relative;height:88px;margin:0 calc(-1 * var(--pad));contain:layout paint}
.th-line{position:absolute;left:0;right:0;top:34px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,rgba(58,66,84,0),var(--thread) 5%,var(--thread) 95%,rgba(58,66,84,0))}
.th-line::after{content:"";position:absolute;left:50%;right:20%;top:-3px;height:8px;border-radius:8px;filter:blur(4px);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc) 30%,transparent),transparent)}
.bd{position:absolute;top:35px;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;display:grid;place-items:center}
.bd svg{width:18px;height:18px;fill:none;stroke:#FFFFFF;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:0}
.bd.soon{box-shadow:inset 0 0 0 2px var(--faint);background:var(--bg)}
.bd.wait{box-shadow:inset 0 0 0 2px var(--amber);background:var(--bg)}
.bd.today{box-shadow:inset 0 0 0 2px var(--acc);background:var(--bg)}
.bd.today.lit{box-shadow:0 0 18px color-mix(in srgb,var(--acc) 55%,transparent);
  background:radial-gradient(circle at 36% 30%,var(--acc2),var(--acc) 58%,color-mix(in srgb,var(--acc) 70%,black))}
.bd.done{box-shadow:0 0 12px rgba(79,184,122,.35);background:radial-gradient(circle at 36% 30%,var(--good2),var(--good) 58%,var(--good3))}
.bd.done svg{opacity:.95}
.bd.done.fresh::after{content:"";position:absolute;inset:-2px;border-radius:50%;box-shadow:0 0 0 2px rgba(79,184,122,.7);animation:bloom 1s ease-out 1 both}
.bd.done.fresh svg path{stroke-dasharray:12;stroke-dashoffset:12;animation:tick .45s .1s ease-out forwards}
@keyframes bloom{from{transform:scale(1);opacity:.9}to{transform:scale(2.3);opacity:0}}
@keyframes tick{to{stroke-dashoffset:0}}
.bd.drop{animation:drop .8s cubic-bezier(.3,1.4,.5,1) both}
@keyframes drop{from{transform:translateY(-26px);opacity:0}to{transform:none;opacity:1}}
.bd.lit{animation:lit .6s ease-out 1}
@keyframes lit{50%{transform:scale(1.22)}}
.bd.moving::before{content:"";position:absolute;right:50%;top:50%;width:78px;height:4px;margin-top:-2px;border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--acc2) 55%,transparent))}
/* bead stations (% of the thread); bead.js POS carries the same numbers. Labels sit under the middle of
   their group and never touch at 320 px (Soon 10, Waiting 27, Today 46, Done 80). */
[data-p="s0"]{left:7%}[data-p="s1"]{left:13%}
[data-p="w0"]{left:27%}
[data-p="t0"]{left:40%}[data-p="t1"]{left:46%}[data-p="t2"]{left:52%}
[data-p="d0"]{left:74%}[data-p="d1"]{left:80%}[data-p="d2"]{left:86%}
.th-l{position:absolute;top:56px;translate:-50% 0;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:650;color:var(--dim);white-space:nowrap}
.th-l.tl-soon{left:10%}
.th-l.tl-wait{left:27%;color:var(--amber)}
.th-l.tl-today{left:46%;color:var(--acc2)}
.th-l.tl-done{left:80%}
@media (max-width:420px){.th-l{font-size:.64rem;letter-spacing:.1em}.bd{width:16px;height:16px;margin:-8px 0 0 -8px}.bd svg{width:16px;height:16px}}

/* the real board, in a phone */
.hero-stage{grid-area:stage;position:relative;display:flex;justify-content:center}
.hero-stage::before{content:"";position:absolute;left:50%;top:44%;width:140%;aspect-ratio:1;translate:-50% -50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(61,123,255,.16),transparent 72%)}
.phone{position:relative;width:min(78vw,300px);padding:8px;border-radius:40px;background:linear-gradient(160deg,#1E2430,#07090D 62%);
  box-shadow:0 0 0 1px rgba(232,236,242,.08),0 40px 80px rgba(0,0,0,.65),0 0 0 1px #000 inset}
.phone img{width:100%;height:auto;border-radius:32px;background:var(--ground)}

@media (min-width:960px){
  .hero{padding:calc(var(--navh) + 24px) 0 26px;min-height:min(100svh,980px);display:flex;flex-direction:column;justify-content:center;
    background:radial-gradient(46% 60% at 76% 40%,rgba(61,123,255,.13),transparent 70%),radial-gradient(60% 40% at 18% 0%,rgba(111,157,255,.06),transparent 70%),var(--bg)}
  .hero-in{width:100%;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"copy stage" "thread thread";column-gap:clamp(40px,6vw,96px);row-gap:14px;align-items:center}
  .hero h1{font-size:clamp(3.4rem,5.4vw,5.1rem);max-width:12ch}
  .lede{font-size:1.16rem;margin-top:18px}
  .pillars{margin-top:20px}
  .play-badge{height:76px}.app-store-badge{height:51px}
  .store-row{margin-top:18px}
  .phone{width:clamp(250px,min(24vw,calc((100svh - var(--navh) - 190px) * .55)),318px)}
  .thread{height:96px;margin:0 calc(50% - 50vw)}
  .th-line{top:38px}.bd{top:39px}.th-l{top:62px;font-size:.74rem}
}

/* ---------- sections ---------- */
main > section{padding:clamp(56px,8vw,104px) 0}
main > section.hero{padding-bottom:34px}
.kicker{display:flex;align-items:center;gap:10px;font-size:.76rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc2);font-weight:650}
h2{font-family:var(--display);font-weight:600;font-size:clamp(2rem,6vw,3.2rem);line-height:1.06;letter-spacing:-.012em;color:var(--ink);margin-top:10px;max-width:20ch;text-wrap:balance}
h2 em{font-style:normal;color:var(--acc2)}
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: three, aligned (owner 2026-09-27: same top and bottom edges, no offset) */
.cards{position:relative;background:radial-gradient(70% 50% at 50% 0%,rgba(61,123,255,.07),transparent 70%)}
.cardstrip{position:relative;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{position:relative;display:flex;gap:16px;width:max-content}
.card{position:relative;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(111,157,255,.18);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 80px -30px rgba(61,123,255,.4);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:30px;width:auto;max-width:calc(1160px - 2 * var(--pad));margin:0 auto}
  .cardrow::before{content:"";position:absolute;left:-40px;right:-40px;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--thread) 8%,var(--thread) 92%,transparent)}
  .card{width:auto}
  .cards .caption{margin-top:22px}
}

/* ---------- the story: chapters on a spine; each chapter's bead turns green once you've read it ---------- */
/* --sx = the spine's x inside the centred 1160 px column; the spine, every knot and the chapter indent all
   measure from that same column edge, so the knots sit ON the spine at every width. */
.story{position:relative;--sx:22px}
.spine{position:absolute;left:calc((100% - min(100%,1160px)) / 2 + var(--sx));top:40px;bottom:60px;width:2px;translate:-1px 0;border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--thread) 40px,var(--thread) calc(100% - 60px),transparent)}
.traveller{position:sticky;top:50vh;display:block;width:12px;height:12px;margin-left:-5px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,var(--acc2),var(--acc) 60%);box-shadow:0 0 14px color-mix(in srgb,var(--acc) 60%,transparent)}
html:not(.js) .traveller,html.rm .traveller{display:none}
.chapter{position:relative;padding:clamp(48px,7vw,96px) 0}
.chap-in{max-width:1160px;margin:0 auto;padding:0 var(--pad) 0 calc(var(--sx) + 26px);display:grid;gap:30px}
.chap-in + .chap-in{margin-top:34px}
.chapter .kicker{position:relative}
.knot{position:absolute;left:calc(-26px - 8px);top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;background:var(--bg);box-shadow:inset 0 0 0 2px var(--acc);transition:background .6s,box-shadow .6s}
.knot::after{content:"";position:absolute;left:4px;top:3.5px;width:7px;height:4px;border-left:2px solid #FFFFFF;border-bottom:2px solid #FFFFFF;transform:rotate(-45deg);opacity:0;transition:opacity .4s .2s}
.chapter.read .knot,html:not(.js) .knot{background:radial-gradient(circle at 36% 30%,var(--good2),var(--good) 58%,var(--good3));box-shadow:0 0 12px rgba(79,184,122,.35)}
.chapter.read .knot::after,html:not(.js) .knot::after{opacity:1}
.chap-copy > p:not(.kicker){margin-top:14px;max-width:36rem;color:var(--text2);font-size:1.04rem}
.chap-copy h2 + p{margin-top:18px}
.wait-word{font-style:normal;color:var(--text)}
.shot{justify-self:center;width:min(100%,280px)}
.shot img{width:100%;height:auto;border-radius:26px;border:1px solid rgba(232,236,242,.1);box-shadow:0 26px 60px rgba(0,0,0,.55),0 0 70px -30px rgba(61,123,255,.35);background:var(--ground)}
.shot figcaption{margin-top:10px;color:var(--dim);font-size:.86rem;text-align:center}
@media (min-width:900px){
  .story{--sx:var(--pad)}
  .chap-in{grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(40px,6vw,90px);align-items:center;padding-left:calc(var(--sx) + 44px)}
  .knot{left:calc(-44px - 8px)}
  .chap-in.chap-one{grid-template-columns:1fr}
  .shot{width:260px}
}

/* how it works: the four lanes on their own short thread */
.lanes{list-style:none;position:relative;display:grid;gap:10px;max-width:30rem}
.lane{position:relative;padding:16px 18px 16px 50px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.lanes::before{content:"";position:absolute;left:27px;top:22px;bottom:22px;width:2px;translate:-1px 0;background:var(--thread);border-radius:2px}
.lring{position:absolute;left:18px;top:21px;width:18px;height:18px;border-radius:50%;background:var(--panel);box-shadow:inset 0 0 0 2px var(--faint)}
.lane h3{font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--text)}
.lane p{margin-top:4px;color:var(--text2);font-size:.97rem}
.l-today .lring{box-shadow:inset 0 0 0 2px var(--acc)}
.l-today h3{color:var(--acc2)}
.l-wait .lring{box-shadow:inset 0 0 0 2px var(--amber)}
.l-wait h3{color:var(--amber)}
.l-later .lring{box-shadow:inset 0 0 0 2px var(--line2)}
.l-later h3,.l-soon h3{color:var(--dim)}

/* doing things: the moves and the board sketch */
.moves{list-style:none;display:grid;gap:12px;margin-top:22px;max-width:36rem}
.moves li{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:16px 18px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.moves h3{font-family:var(--display);font-weight:560;font-size:1.28rem;line-height:1.2}
.moves p{margin-top:4px;color:var(--text2);font-size:.97rem}
.ic{width:36px;height:36px;flex:none}
.ic *{fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ic .th{stroke:var(--thread)}
.ic .gd{fill:var(--good);stroke:none}
.ic .gdf{fill:rgba(79,184,122,.5);stroke:none}
.ic .tk{stroke:#FFFFFF}
.ic .ac{stroke:var(--acc)}
.ic .ar{stroke:var(--acc2)}
.chap-wide{align-items:start}
@media (min-width:900px){.chap-wide{grid-template-columns:minmax(0,1fr) minmax(320px,400px)}}

.tryit{justify-self:center;width:min(100%,400px)}
.board{position:relative;padding:14px 12px 12px;border-radius:30px;background:var(--ground);border:1px solid var(--line2);box-shadow:0 30px 70px rgba(0,0,0,.6),0 0 90px -40px color-mix(in srgb,var(--acc) 60%,transparent);overflow:hidden}
.b-top{display:flex;align-items:center;gap:8px;padding:2px 6px 10px}
.b-dot{width:9px;height:9px;border-radius:50%;background:var(--acc)}
.b-name{font-weight:650;color:var(--ink);font-size:1.02rem}
.b-list{margin-left:auto;color:var(--dim);font-size:.82rem}
.b-h{display:flex;align-items:center;gap:8px;padding:10px 6px 6px;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--dim)}
.b-h::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--faint)}
.b-h-today{color:var(--acc2)}
.b-h-today::before{background:var(--acc)}
.b-rows{list-style:none;display:grid;gap:6px}
.b-row{position:relative;border-radius:14px;overflow:hidden;transition:height .3s var(--ease),opacity .3s,margin .3s}
.b-under{position:absolute;inset:0;border-radius:14px;background:var(--panel)}
.b-under::before{content:"";position:absolute;left:14px;right:14px;top:50%;height:2px;margin-top:-1px;background:var(--thread);border-radius:2px}
.b-run{position:absolute;left:14px;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;opacity:0;background:radial-gradient(circle at 36% 30%,var(--good2),var(--good) 58%,var(--good3));box-shadow:0 0 12px rgba(79,184,122,.5)}
.b-row.go-right .b-under{background:rgba(79,184,122,.12)}
.b-row.go-left .b-under{background:color-mix(in srgb,var(--acc) 14%,var(--panel))}
.b-card{position:relative;z-index:1;display:flex;align-items:center;gap:10px;min-height:52px;padding:8px 6px 8px 12px;border-radius:14px;background:var(--panel);touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;cursor:grab;overflow:hidden}
.b-card::after{content:"";position:absolute;z-index:0;left:0;top:0;bottom:0;width:0;background:rgba(79,184,122,.15);pointer-events:none}
.b-card > *{position:relative;z-index:1} /* the hold fill sweeps UNDER the words (contrast: 'hold' ground) */
.b-row.holding .b-card::after{width:100%;transition:width 1.1s linear}
.b-wait .b-card,.b-soon .b-card{cursor:default;background:transparent}
.b-ring{flex:none;width:13px;height:13px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--acc)}
.b-ring-soon{box-shadow:inset 0 0 0 2px var(--faint)}
.b-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.3}
.b-title{color:var(--text);font-size:.95rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.b-when{color:var(--dim);font-size:.76rem}
.b-tag{flex:none;font-size:.7rem;color:var(--dim);padding:1px 7px;border-radius:7px;border:1px solid var(--line2)}
@media (max-width:440px){.b-tag{display:none}} /* phones: the title gets the room, not the list tag */
.b-acts{display:flex;gap:2px;flex:none}
.b-act{display:grid;place-items:center;width:34px;height:34px;border-radius:10px;border:0;background:transparent;cursor:pointer;color:var(--text2)}
.b-act svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-act:hover{background:var(--panel2);color:var(--ink)}
.b-do:hover{color:var(--good2)}
.b-act:focus-visible,.b-waitline:focus-visible,.b-undo:focus-visible,.b-reset:focus-visible{outline:2px solid var(--mist);outline-offset:1px;box-shadow:none}
.b-waitline{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;margin-top:8px;padding:8px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel);text-align:left;cursor:pointer;color:var(--text2);font-size:.86rem;list-style:none}
.b-waitline::-webkit-details-marker{display:none}
.b-waitdot{flex:none;width:9px;height:9px;border-radius:50%;background:var(--amber)}
.b-waitline .chev{width:18px;height:18px;margin-left:auto;fill:none;stroke:var(--dim);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.b-waitd[open] .chev{transform:rotate(180deg)}
.b-wait{margin-top:6px}
.b-ring-wait{box-shadow:inset 0 0 0 2px var(--amber)}
.b-when-wait{color:var(--amber)}
.b-clear{display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 8px 16px;text-align:center}
.b-clear[hidden]{display:none}
.b-cthread{position:relative;width:80px;height:2px;background:var(--thread);border-radius:2px}
.b-cthread span{position:absolute;left:50%;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--acc)}
.b-clear p{color:var(--text2)}
.b-reset,.b-undo{min-height:36px;padding:0 14px;border-radius:999px;border:1px solid var(--line2);background:var(--panel2);color:var(--acc2);font-weight:650;font-size:.86rem;cursor:pointer}
.b-reset:hover,.b-undo:hover{border-color:var(--acc2)}
.b-done-l{display:flex;align-items:center;gap:8px;padding:8px 6px 0;color:var(--text2);font-size:.82rem}
.b-done-l[hidden]{display:none}
.b-done-l::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--good)}
.b-snack{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:0;margin-top:0;padding:0 12px;border-radius:14px;background:var(--panel2);color:var(--text);font-size:.88rem;overflow:hidden;max-height:0;transition:max-height .25s,margin .25s,padding .25s}
.b-snack.on{max-height:80px;min-height:48px;margin-top:10px;padding:6px 8px 6px 14px}
.b-undo[hidden]{display:none}
.try{margin-top:14px;color:var(--text2);font-size:.92rem;text-align:center}
.honest{margin-top:6px;color:var(--dim);font-size:.82rem;text-align:center}
html:not(.js) .needs-js{display:none}
html:not(.js) .b-card{cursor:default}

/* repeats, lists and a look back */
.facts{display:grid;gap:12px;margin-top:24px}
.fact{padding:18px 20px;border-radius:18px;background:var(--panel);border:1px solid var(--line)}
.fact h3{font-family:var(--display);font-weight:560;font-size:1.22rem;line-height:1.2}
.fact p{margin-top:6px;color:var(--text2);font-size:.97rem}
.fact em{font-style:normal;color:var(--text)}
.factset .facts{margin-top:0}
.factset .facts + .facts{margin-top:12px}
@media (min-width:640px){.facts{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.facts-wide{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1100px){.facts-four{grid-template-columns:repeat(4,1fr)}}
.chap-follow{grid-template-columns:1fr!important}
.shots2{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.shots2 .shot{width:min(46%,220px)}
@media (max-width:420px){.shots2 .shot{width:min(47%,220px)}.shots2 .shot figcaption{font-size:.8rem}}
@media (min-width:900px){.shots2{flex-wrap:nowrap}.shots2 .shot{width:200px}}
@media (min-width:1100px){.shots2 .shot{width:220px}}

/* make it yours: the accent beads, the sounds, the widget and the TV */
.looks{border:0;margin-top:22px}
.looks legend{font-size:.76rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text2);font-weight:650;margin-bottom:10px}
.swrow{display:flex;flex-wrap:wrap;gap:8px}
.sw{position:relative;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px 0 10px;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}
.sw:hover{border-color:#56607A}
.sw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer}
.sw i{width:18px;height:18px;border-radius:50%;flex:none;background:radial-gradient(circle at 36% 30%,var(--sb),var(--sa) 62%)}
.sw:has(input:checked){border-color:var(--acc2);background:var(--panel2);color:var(--ink)}
.sw:has(input:focus-visible){outline:2px solid var(--mist);outline-offset:3px;box-shadow:0 0 0 5px rgba(7,9,13,.92)}
.a-electric{--sa:var(--electric-a);--sb:var(--electric-b)}
.a-violet{--sa:var(--violet-a);--sb:var(--violet-b)}
.a-teal{--sa:var(--teal-a);--sb:var(--teal-b)}
.a-moss{--sa:var(--moss-a);--sb:var(--moss-b)}
.a-orchid{--sa:var(--orchid-a);--sb:var(--orchid-b)}
.a-frost{--sa:var(--frost-a);--sb:var(--frost-b)}
.a-cornflower{--sa:var(--cornflower-a);--sb:var(--cornflower-b)}
.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)}
.sounds{margin-top:22px;padding:20px 22px;border-radius:20px;background:var(--panel);border:1px solid var(--line);max-width:36rem}
.sounds h3,.widgetcopy h3,.castcopy h3{font-family:var(--display);font-weight:560;font-size:1.4rem;line-height:1.2}
.sounds p{margin-top:6px;color:var(--text2);font-size:.97rem}
.packs{list-style:none;display:flex;flex-wrap:wrap;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)}
.widgetcopy{max-width:40rem}
.widgetcopy p{margin-top:8px;color:var(--text2)}
.widgetcopy em{font-style:normal;color:var(--text)}
.castband{display:grid;gap:22px;align-items:center;margin-top:10px;padding:22px;border-radius:28px;background:radial-gradient(90% 90% at 0% 0%,color-mix(in srgb,var(--acc) 10%,transparent),transparent 60%),var(--panel);border:1px solid var(--line2)}
.tvwrap{max-width:540px}
.tv{position:relative;container-type:inline-size}
.tv-scr{aspect-ratio:16/9;border-radius:10px;border:7px solid #030406;outline:1px solid #262C38;background:var(--ground);padding:3.4cqw 3.6cqw;display:flex;flex-direction:column;overflow:hidden}
.tv-stand{display:block;width:18%;height:10px;margin:0 auto;background:#1B2029;border-radius:0 0 8px 8px}
.tv-head{display:flex;align-items:baseline;gap:2.4cqw;padding-bottom:1.4cqw;border-bottom:1px solid var(--line)}
.tv-wm{font-size:2.2cqw;letter-spacing:.42em;color:var(--acc2);font-weight:600}
.tv-list{font-size:3.6cqw;font-weight:300;color:var(--text)}
.tv-day{margin-left:auto;font-size:2cqw;color:var(--dim)}
.tv-board{flex:1;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2.4cqw;padding-top:2.2cqw;min-height:0}
.tv-lane ul{list-style:none}
.tv-h{font-size:1.9cqw;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);font-weight:600;padding-bottom:1cqw}
.tv-lane li{font-size:2.3cqw;color:var(--text2);padding:.5cqw 0;line-height:1.25}
.tv-today{background:var(--panel);border-radius:1.4cqw;padding:1.6cqw 1.8cqw}
.tv-today .tv-h{color:var(--acc2)}
.tv-today li{font-size:2.8cqw;color:var(--text)}
.tv-wait .tv-h{color:var(--amber)}
.tv-foot{display:flex;gap:2cqw;align-items:baseline;border-top:1px solid var(--line);padding-top:1.2cqw;margin-top:1.2cqw;font-size:1.8cqw;color:var(--dim);white-space:nowrap;overflow:hidden}
.tv-foot s{color:var(--text2);text-decoration-color:var(--good);text-decoration-thickness:2px}
.tvcap{margin-top:12px;color:var(--dim);font-size:.82rem}
.castcopy p{margin-top:10px;color:var(--text2)}
.castcopy .fine{font-size:.9rem;color:var(--dim)}
@media (min-width:880px){.castband{grid-template-columns:1.1fr 1fr;gap:40px;padding:34px}}

/* what Bead will never do */
.nots{list-style:none;display:grid;gap:10px 28px;margin-top:26px;max-width:62rem}
.nots li{position:relative;padding-left:28px;color:var(--text);font-size:1.02rem}
.nots li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--line2)}
@media (min-width:640px){.nots{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.nots{grid-template-columns:repeat(3,1fr)}}
#never .fine{margin-top:26px;max-width:44rem;color:var(--dim);font-size:.92rem}

/* Pro */
.pro-sec{background:radial-gradient(60% 40% at 80% 10%,rgba(61,123,255,.08),transparent 70%)}
.plans{display:grid;gap:16px;margin-top:32px}
.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(61,123,255,.16),transparent 60%),#0F1524;border-color:rgba(111,157,255,.42)}
.plan h3{font-family:var(--display);font-weight:600;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:22px;color:var(--text)}
.plan li::before{content:"";position:absolute;left:1px;top:.5em;width:10px;height:10px;border-radius:50%;background:var(--brand)}
.plan:not(.pro) li::before{background:var(--good)}
.plan-note{margin-top:14px;color:var(--text2);font-size:.95rem}
@media (min-width:820px){.plans{grid-template-columns:1fr 1fr;gap:22px}.plan{padding:32px}}

/* the film and the family */
.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}
.family{margin-top:40px;padding:22px 24px;border-radius:22px;background:var(--panel);border:1px solid var(--line);max-width:52rem}
.family p{color:var(--text2)}
.family p+p{margin-top:8px}
.family .big{font-family:var(--display);font-weight:560;font-size:clamp(1.3rem,3vw,1.55rem);line-height:1.3;color:var(--ink)}

/* get */
main > section.get-sec{padding-top:24px}
.getbox{text-align:center;padding:40px 14px;border-radius:32px;background:radial-gradient(80% 120% at 50% 0%,rgba(61,123,255,.18),transparent 65%),#0C1019;border:1px solid rgba(111,157,255,.3)}
.getmark{width:72px;height:72px;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}
.getbox .quiet{font-size:.9rem;color:var(--dim)}
@media (min-width:600px){.getbox{padding:44px 20px}.getbox .play-badge{height:76px}.getbox .app-store-badge{height:51px}}

/* footer */
.foot{border-top:1px solid var(--line);padding:34px 0 92px;color:var(--dim);font-size:.9rem}
.foot .family-l{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-l a{color:var(--text2)}
.legal-note{margin-top:10px;color:var(--dim);font-size:.8rem;line-height:1.5}

/* the fixed chip: Pause motion (the thread loops) */
.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(7,9,13,.94);border:1px solid rgba(111,157,255,.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)}
html.rm .chips-fixed,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}
.moves li:nth-child(2),.facts .fact:nth-child(2n){--dl:.08s}
.moves li:nth-child(3){--dl:.16s}
html.rm{scroll-behavior:auto}
html.rm .b-row,html.rm .b-snack,html.rm .knot,html.rm .knot::after{transition:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition-duration:.01ms!important;animation-duration:.01ms!important}}