/* The Final HUM — beta design.
   Editorial "manual" look: off-white paper, ink type, mono labels, hairline rules.
   Mobile-first; layouts widen at 640 / 900 / 1180px. Colours are set as tokens below. */
:root{
  --bg:#FBFBFC; --paper:#FFFFFF; --ink:#111214; --body:#3C4046; --sub:#5F636A; --muted:#8A8E95;
  --line:#E3E5E8; --line-2:#C9CCD1; --hover:#55595F; --accent:#8A2F2E;
  --dark:#111214; --dark-line:#33363B; --dark-sub:#A2A6AD; --dark-btn:#55595F;
  --kaaba:#0A0A0B; --gold:#B9933F; --gold-2:#D4B26A;
  --on-ink:#FFFFFF; --on-light:#111214; --brand-mark:#2B3C42;
  --ink-hover:#2A2C30; --light-hover:#E9EAEC; --foot-text:#C9CCD1; --foot-rule:#26282C;
  --on-accent:#FFFFFF; --accent-hover:#6F2524; --accent-on-dark:#D27A72;
  --wave-track:#5A5E64; --placeholder-stripe:#F3F4F6; --read-from:#D6D8DC;
  --scrim:rgba(17,18,20,.32); --gold-glow:rgba(185,147,63,.22); --on-dark:#FFFFFF; --on-dark-line:rgba(255,255,255,.5);
  --cover-filter:drop-shadow(0 30px 40px rgba(17,18,20,.18)) drop-shadow(0 2px 4px rgba(17,18,20,.10));
  --fp-filter:brightness(0);
  /* Passage band (My Journey): dark in both themes, so these stay the same in both */
  --life:#E8B7B2; --life-glow:rgba(232,183,178,.55); --white-glow:rgba(255,255,255,.85); --beyond-tint:rgba(255,255,255,.045); --life-tint:rgba(232,183,178,.16);
  --f-ui:"Inter Tight","Helvetica Neue",Arial,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:20px; --pad-y:56px; --max:960px; --max-wide:1080px; --nav-h:72px;
  color-scheme:light;
}
/* Dark theme: <html data-theme="dark"> (set before first paint by the inline script in each page's <head>).
   Tokens not listed here (kaaba, gold, on-dark, on-light, footer, wave, glow) are the same in both themes. */
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#141519; --paper:#1B1C21; --ink:#ECEEF1; --ink-hover:#D4D7DC; --body:#B9BDC4; --sub:#9A9FA7;
  --muted:#868B93; --hover:#C9CCD1; --line:#2A2C31; --line-2:#3D4047; --accent:#D27A72;
  --dark:#1F2126; --dark-line:#34373D; --dark-sub:#A2A6AD; --dark-btn:#55595F;
  --on-ink:#111214; --brand-mark:#D3DADC; --on-accent:#111214; --accent-hover:#E39A93; --placeholder-stripe:#202227; --read-from:#3A3D43;
  --scrim:rgba(0,0,0,.55);
  --cover-filter:drop-shadow(0 30px 40px rgba(0,0,0,.55)) drop-shadow(0 2px 4px rgba(0,0,0,.45));
  --fp-filter:brightness(0) invert(1);
}
/* Section padding kept tight so neighbouring sections don't stack two large gaps; the dividing rules stay */
@media (min-width:640px){:root{--gutter:32px;--pad-y:64px}}
@media (min-width:900px){:root{--gutter:56px;--pad-y:72px}}

*{box-sizing:border-box}
html{scroll-padding-top:calc(var(--nav-h) + 16px);-webkit-text-size-adjust:100%}
/* Smooth in-page scrolling only once the page has settled (beta.js adds .is-ready), so arriving at
   /page/#section jumps straight there instead of gliding to a spot computed before fonts loaded */
:root.is-ready{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--f-ui);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
body.locked{overflow:hidden}
h1,h2,h3,p,blockquote,figure,ul{margin:0}
ul{padding:0;list-style:none}
img{max-width:100%}
a{color:inherit;text-decoration:none}
a:hover{color:var(--hover)}
button{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;text-align:left;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:8px;z-index:20;background:var(--ink);color:var(--on-ink);padding:8px 12px}
.skip:focus{left:8px}
.accent{color:var(--accent);font-weight:600}
.nowrap{white-space:nowrap}

/* ---------- Layout ---------- */
.sec{padding:var(--pad-y) var(--gutter);border-bottom:1px solid var(--line)}
.sec--paper{background:var(--paper)}
.sec--flush{padding-inline:0}
.wrap{max-width:var(--max);margin-inline:auto;display:flex;flex-direction:column;gap:28px}
.wrap--wide{max-width:var(--max-wide)}
.stack-s{display:flex;flex-direction:column;gap:20px}
.stack{display:flex;flex-direction:column;gap:24px}

/* ---------- Type ---------- */
.eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.eyebrow--sm{font-size:11px}
.eyebrow-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.mono{font-family:var(--f-mono)}
.rule{height:1px;background:var(--ink);transform-origin:left}
.h1{font-size:clamp(38px,8.4vw,64px);line-height:1.02;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
/* One-line page title from tablets up: sized to the 960px column (and narrower ones) */
@media (min-width:640px){.h1--line{white-space:nowrap;font-size:min(56px,5.3vw)}}
/* Short page title that stays on one line at every width ("Watch. Listen. Explore." is ~9.3em wide) */
.h1--fit{white-space:nowrap;font-size:min(64px,calc((100vw - 2 * var(--gutter)) / 9.6))}
.h2{font-size:clamp(30px,6.2vw,44px);line-height:1.1;font-weight:500;letter-spacing:-.025em;text-wrap:balance}
.lead{font-size:clamp(17px,2.4vw,20px);line-height:1.55;color:var(--body);max-width:720px;text-wrap:pretty}
.text{font-size:17px;line-height:1.65;color:var(--body);text-wrap:pretty}
.note{font-size:14px;line-height:1.55;color:var(--sub)}
.cite{font-family:var(--f-mono);font-size:12px;color:var(--sub)}

/* ---------- Buttons & chips ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 24px;font-size:15px;font-weight:500;border-radius:2px;border:1px solid transparent;white-space:nowrap;transition:background-color .25s,border-color .25s,color .25s}
.btn--primary{background:var(--ink);color:var(--on-ink);padding:0 28px}
.btn--primary:hover{background:var(--ink-hover);color:var(--on-ink)}
.btn--outline{border-color:var(--line-2);color:var(--ink)}
.btn--outline:hover{border-color:var(--ink);color:var(--ink)}
.btn--light{background:var(--on-dark);color:var(--on-light);padding:0 28px}
.btn--light:hover{background:var(--light-hover);color:var(--on-light)}
.btn--ghost{border-color:var(--dark-btn);color:var(--on-dark)}
.btn--ghost:hover{border-color:var(--on-dark);color:var(--on-dark)}
.btn--sm{height:36px;padding:0 16px;font-size:13px}
/* Bordeaux call to action (header "I want my Guide"); in dark mode the lighter bordeaux takes ink-dark text */
.btn--accent{background:var(--accent);color:var(--on-accent);padding:0 28px}
.btn--accent:hover{background:var(--accent-hover);color:var(--on-accent)}
.btn--sm.btn--accent{padding:0 16px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--f-mono);font-size:12px;padding:8px 12px;border:1px solid var(--line-2);border-radius:2px}

/* ---------- Header (logo · contents · order) ---------- */
.nav{position:sticky;top:0;z-index:10;background:var(--bg);border-bottom:1px solid var(--line);padding:0 var(--gutter)}
.nav__in{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 0}
.brand{display:flex;align-items:center;gap:12px;color:var(--ink);min-width:0}
.brand:hover{color:var(--ink)}
/* Lafza-i Celal, centred on the two brand lines and sized to the header's inner height */
.brand__mark{display:block;flex-shrink:0;width:auto;aspect-ratio:123.176/356.463;height:min(48px,calc(var(--nav-h) - 24px));color:var(--brand-mark);fill:currentColor}
.brand__txt{display:flex;flex-direction:column;gap:3px;min-width:0}
/* The name on two lines (The FINAL / Human User Manual), filling the mark's height */
.brand__name{font-size:17px;line-height:1.1;font-weight:500;letter-spacing:-.015em;white-space:nowrap}
.brand__l{display:block}
@media (min-width:640px){.brand__name{font-size:20px}}
/* Galaxy Fold cover screen (~280px): keep the name clear of the menu button */
/* Phones up to ~420px: with the theme toggle beside the menu button the name needs two lines to stay clear */
@media (max-width:359px){.brand__name{font-size:13px}.brand{gap:8px}.brand__mark{height:40px}}
.nav__links{display:none}
.nav__links a{display:flex;align-items:baseline;gap:6px;padding:8px 0;font-size:14px;line-height:1.3;color:var(--muted);white-space:nowrap;border-bottom:1px solid transparent}
.nav__links a:hover{color:var(--ink)}
.nav__links a[aria-current="page"]{color:var(--ink);font-weight:500;border-bottom-color:var(--ink)}
.nav__end{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nav__cta{display:none}
.theme-toggle{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;border:1px solid var(--line-2);border-radius:2px;color:var(--ink);transition:border-color .25s}
.theme-toggle:hover{border-color:var(--ink);color:var(--ink)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-sun,:root[data-theme="dark"] .theme-toggle .i-moon{display:none}
:root[data-theme="dark"] .theme-toggle .i-sun{display:block}
/* From tablets up the header buttons are the 36px "sm" size; the toggle and menu button match them */
@media (min-width:640px){.theme-toggle{width:36px;height:36px}.theme-toggle svg{width:18px;height:18px}}
.burger{width:44px;height:44px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:1px solid var(--line-2);border-radius:2px}
@media (min-width:640px){.burger{width:36px;height:36px}}
.burger span{display:block;width:18px;height:1.5px;background:var(--ink);transition:transform .3s var(--ease),opacity .2s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
.menu{position:fixed;top:var(--nav-h);right:0;bottom:0;z-index:9;width:min(360px,100%);background:var(--bg);border-left:1px solid var(--line);padding:24px var(--gutter) 32px;display:flex;flex-direction:column;gap:24px;overflow-y:auto;transform:translateX(100%);visibility:hidden;transition:transform .4s var(--ease),visibility 0s .4s}
.menu.open{transform:none;visibility:visible;transition:transform .4s var(--ease)}
.menu ul{display:flex;flex-direction:column}
.menu li a{display:flex;align-items:baseline;gap:12px;padding:14px 0;border-bottom:1px solid var(--line);font-size:17px;color:var(--ink)}
.menu li a[aria-current="page"]{font-weight:500}
.menu .btn{width:100%}
.menu-scrim{position:fixed;inset:var(--nav-h) 0 0 0;z-index:8;background:var(--scrim);opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s}
.menu-scrim.open{opacity:1;visibility:visible;transition:opacity .3s}
.nav__listen{display:none;gap:8px}
.nav__listen svg,.menu__listen svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.menu__btns{display:flex;flex-direction:column;gap:12px}
.menu__listen{gap:10px}
@media (min-width:640px){.nav__cta{display:inline-flex}}
/* Listen joins the header once the larger name leaves room; below that it is in the menu */
@media (min-width:768px){.nav__listen{display:inline-flex}}
@media (min-width:1180px){
  .nav__links{display:flex;gap:22px;align-items:center}
  .burger,.menu,.menu-scrim{display:none}
}
@media (min-width:1360px){.nav__links{gap:28px}}

/* ---------- Home: hero ---------- */
.hero{padding:56px var(--gutter) 72px;border-bottom:1px solid var(--line)}
.hero__grid{max-width:var(--max-wide);margin-inline:auto;display:grid;gap:48px;align-items:center}
.hero__copy{display:flex;flex-direction:column;gap:28px;container-type:inline-size;min-width:0}
/* #6: "Human User Manual" stays on one line — sized to the column via container units. */
.hero__title{font-size:min(80px,11.4cqi);line-height:.98;font-weight:500;letter-spacing:-.035em}
.hero__title .line{display:block;white-space:nowrap}
.hero__lead{font-size:clamp(18px,2.6vw,22px);line-height:1.45;color:var(--body);max-width:560px;text-wrap:pretty}
.hero__sub{font-size:17px;line-height:1.5;color:var(--body)}
.hero__fig{display:flex;flex-direction:column;align-items:center;gap:20px}
.cover{position:relative;display:block;width:min(320px,72vw);cursor:pointer;-webkit-tap-highlight-color:transparent}
.cover img{display:block;width:100%;height:auto}
/* Click/tap shows the other side of the book straight away (no turning animation) */
.cover__card{position:relative;display:block}
.cover__face{position:relative;display:block}
.cover__face--back{position:absolute;inset:0;visibility:hidden}
.cover.is-flipped .cover__face--front{visibility:hidden}
.cover.is-flipped .cover__face--back{visibility:visible}
.cover.is-flipped .callout{visibility:hidden}
.cover:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.cover__hint{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);cursor:pointer}
.cover__hint svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.cover__real{position:absolute;inset:0;filter:var(--cover-filter)}
/* Start un-scanned so the colour print doesn't flash before beta.js takes over; without JS it simply shows */
@media (scripting:enabled){.cover__real{clip-path:inset(0 0 100% 0)}}
.callout{position:absolute;display:none;align-items:center;width:104px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.callout::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--ink);order:3;flex-shrink:0}
.callout i{flex:1;height:1px;background:var(--ink);margin:0 8px;order:2}
.callout b{font-weight:400;order:1}
.callout--l{left:-96px}
.callout--r{right:-104px;flex-direction:row-reverse}
.callout--r b{order:1}.callout--r i{order:2}.callout--r::before{order:3}
.fig-label{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub);display:flex;gap:24px}
@media (min-width:640px){.callout{display:flex}.hero__fig{padding:0 110px}}
@media (min-width:900px){
  .hero{padding:104px var(--gutter) 88px}
  .hero__grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:56px}
  .hero__fig{padding:0}
  .callout{display:none}
}
/* callouts need ~105px either side of the cover; only show them when the column has room */
@media (min-width:1180px){.hero__fig{padding:0 104px}.callout{display:flex}}

/* ---------- Quote ---------- */
.quote{font-size:clamp(22px,3.6vw,32px);line-height:1.45;letter-spacing:-.015em;text-wrap:pretty}
.quote .hl{font-style:normal;color:var(--accent)}
.link-mono{align-self:flex-start;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--line-2)}

/* ---------- #5: feature cards (tick + title), two moving rows ---------- */
.feats{display:flex;flex-direction:column;gap:12px;overflow:hidden;margin-inline:calc(-1 * var(--gutter));padding-block:4px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.feats__row{display:flex;gap:12px;width:max-content;animation:feats-l 46s linear infinite}
.feats__row--rev{animation-name:feats-r;animation-duration:52s}
.feats:hover .feats__row{animation-play-state:paused}
@keyframes feats-l{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 6px))}}
@keyframes feats-r{from{transform:translateX(calc(-50% - 6px))}to{transform:translateX(0)}}
.feat{display:inline-flex;align-items:center;gap:12px;padding:14px 20px 14px 14px;background:var(--paper);border:1px solid var(--line);border-radius:2px;font-size:16px;font-weight:500;white-space:nowrap}
.feat--new{background:var(--ink);border-color:var(--ink);color:var(--on-ink)}
.tick{width:24px;height:24px;flex-shrink:0;border-radius:50%;background:var(--accent);display:inline-flex;align-items:center;justify-content:center}
.tick svg{width:13px;height:13px;stroke:var(--on-dark);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.feat--new .tick{background:var(--on-ink)}.feat--new .tick svg{stroke:var(--ink)}
/* My Journey: three short principles under the page lead, same tick as the feature cards */
.ticks{display:flex;flex-direction:column;gap:14px}
/* the tick sits on the first line when an item wraps */
.ticks .tick{margin-top:calc((1.35em - 24px) / 2)}
.ticks li{display:flex;align-items:flex-start;gap:14px;line-height:1.35;font-size:clamp(18px,2.4vw,21px);font-weight:500;letter-spacing:-.01em;color:var(--ink)}

/* ---------- Verse rail ---------- */
.sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap}
.rail-btns{display:flex;gap:8px}
.railbtn{width:44px;height:44px;border:1px solid var(--line-2);background:var(--bg);color:var(--ink);display:inline-flex;align-items:center;justify-content:center;font-size:18px;border-radius:2px;cursor:pointer}
.railbtn:hover{border-color:var(--ink)}
/* #7: cards are sized from the rail's own width (not the viewport), so both edges keep equal padding on 360px phones. */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;padding:4px 4px 20px;margin:0 -4px;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.rail>*{scroll-snap-align:start;flex:0 0 min(360px,calc(88% - 8px))}
/* Phones: no arrows; the next card peeks in and dots show there is more */
.rail-dots{display:flex;flex-wrap:wrap;justify-content:center;margin-top:-4px}
.rail-dots button{width:16px;height:24px;display:inline-flex;align-items:center;justify-content:center}
.rail-dots button::before{content:"";width:6px;height:6px;border-radius:3px;background:var(--line-2);transition:width .25s,background-color .25s}
.rail-dots button[aria-current="true"]::before{width:14px;background:var(--ink)}
@media (min-width:640px){.rail-dots{display:none}}
@media (min-width:640px){.rail>*{flex-basis:min(360px,82%)}}
.vcard{background:var(--bg);border:1px solid var(--line);padding:28px 24px 24px;display:flex;flex-direction:column;gap:18px;min-height:300px}
.vcard__top{display:flex;justify-content:space-between;gap:12px;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.vcard__top{align-items:center}
.vcard__top span{flex:1;min-width:0}
.vcard__top b{font-weight:400;color:var(--ink);white-space:nowrap}
/* Share (like the sayings on esadcosan.global): the device's share sheet first, otherwise a small menu */
.share-btn{flex-shrink:0;width:32px;height:32px;margin:-8px -8px -8px 0;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:2px;color:var(--sub);transition:border-color .25s,color .25s}
.share-btn:hover,.share-btn[aria-expanded="true"]{border-color:var(--ink);color:var(--ink)}
.share-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.share-pop{position:fixed;z-index:30;width:220px;background:var(--paper);border:1px solid var(--ink);padding:6px;display:flex;flex-direction:column}
.share-pop[hidden]{display:none}
.share-pop button{padding:10px 12px;font-size:14px;color:var(--ink);text-align:left;border-radius:2px}
.share-pop button:hover,.share-pop button:focus-visible{background:var(--bg)}
.sec-head--rail{align-items:flex-end}
@media (min-width:640px){.sec-head--rail{flex-wrap:nowrap}.sec-head--rail>:first-child{flex:1;min-width:0}}
.vcard__text{font-size:17px;line-height:1.55;letter-spacing:-.005em;text-wrap:pretty;flex:1}
.rail-note{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--sub)}
@media (min-width:640px){.vcard{padding:28px 28px 24px}}

/* ---------- Chapter / media grids ---------- */
.grid-cells{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.grid-cells--4{grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr))}
.grid-cells--2{grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr))}
.chap{background:var(--bg);min-height:200px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;color:var(--ink);transition:background-color .25s}
.chap:hover{background:var(--paper);color:var(--ink)}
.chap__top{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.chap .arrow{font-size:16px;color:var(--ink);opacity:0;transform:translateX(-8px);transition:opacity .35s,transform .35s var(--ease)}
.chap:hover .arrow{opacity:1;transform:none}
.chap__title{font-size:22px;font-weight:500;line-height:1.15}
.chap__desc{font-size:14px;line-height:1.5;color:var(--sub)}
.chap__body{display:flex;flex-direction:column;gap:8px}
.mcard{background:var(--bg);padding:20px;display:flex;flex-direction:column;gap:16px;color:var(--ink);transition:background-color .25s}
.mcard:hover{background:var(--paper);color:var(--ink)}
.mcard img{aspect-ratio:16/9;width:100%;height:auto;object-fit:cover;display:block}
:root[data-theme="dark"] .mcard img{filter:brightness(.88)}
.mcard__title{font-size:18px;font-weight:500}
.mcard--lg{padding:clamp(16px,2.6vw,28px)}
.mcard--lg .mcard__title{font-size:22px;line-height:1.2}

/* ---------- Stats + fingerprint ---------- */
.stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,3vw,40px)}
.stat{display:flex;flex-direction:column;gap:12px;padding-top:20px;border-top:1px solid var(--ink)}
.stat__n{font-size:clamp(24px,6.6vw,56px);font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.stat__l{font-size:clamp(13px,1.5vw,16px);line-height:1.4;color:var(--body)}
.figcard{border:1px solid var(--ink);background:var(--paper);padding:clamp(20px,3.5vw,40px);display:grid;grid-template-columns:clamp(72px,16vw,170px) minmax(0,1fr);gap:clamp(16px,4vw,48px);align-items:center;color:var(--ink)}
.figcard:hover{color:var(--ink)}
.figcard__body{display:flex;flex-direction:column;gap:18px;min-width:0}
.figcard__text{font-size:clamp(17px,2vw,22px);line-height:1.4;letter-spacing:-.01em;text-wrap:pretty}
.figcard__foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--f-mono);font-size:12px;color:var(--sub)}
.figcard__foot b{font-weight:400;color:var(--ink)}
/* The verse itself, set apart from the note above it so it doesn't read as the same sentence */
.figcard__verse{display:flex;flex-direction:column;gap:10px;padding:2px 0 2px 16px;border-left:2px solid var(--accent)}
.figcard__q{font-size:clamp(16px,1.8vw,19px);line-height:1.45;color:var(--body);text-wrap:pretty}
.figcard__ref{font-family:var(--f-mono);font-size:12px;color:var(--sub)}
.fpwrap{position:relative;width:100%;max-width:180px;align-self:center}
.fpwrap img{display:block;width:100%;height:auto;filter:var(--fp-filter)}
.fp-base{opacity:.12}
.fp-ink{position:absolute;inset:0}

/* ---------- Dark support band ---------- */
.band{background:var(--dark);color:var(--on-dark);border-bottom-color:var(--dark-line)}
.band .eyebrow{color:var(--dark-sub)}
.band .rule{background:var(--on-dark)}
.band__title{font-size:clamp(32px,6.8vw,52px);line-height:1.04;font-weight:500;letter-spacing:-.03em;text-wrap:balance}
/* Desktop: the band line on one line, sized to the column (~19.8em wide) */
@media (min-width:900px){.band__title{white-space:nowrap;font-size:min(52px,calc(min(100vw - 2 * var(--gutter), var(--max)) / 20))}}
.counter{display:flex;flex-direction:column;gap:12px;padding:28px 0;border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line)}
.counter__n{font-family:var(--f-mono);font-size:clamp(30px,8.4vw,56px);letter-spacing:-.02em;line-height:1;font-weight:500;font-variant-numeric:tabular-nums}

/* ---------- #3: footer — like the book's back cover ---------- */
/* Footer height follows its content (credit, page links, apps/social) — no forced empty space */
.foot{position:relative;background:var(--kaaba);color:var(--on-dark);padding:46px var(--gutter) 28px}
/* gold rule just below where the page meets the footer, as on the book's cover (height unchanged) */
.foot::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--gold)}
.foot__in{max-width:var(--max);margin-inline:auto;display:flex;flex-direction:column;gap:28px}
.foot__top{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap}
.foot__credit{display:flex;flex-direction:column;gap:6px}
/* Credit set like the book's cover: the same geometric sans, the name ~1.3x the line above it */
.foot__credit{gap:2px;font-family:"Montserrat",var(--f-ui);font-size:clamp(14px,1.8vw,16px);line-height:1.25}
.foot__kicker{font-size:1em;font-weight:400;color:var(--foot-text)}
.foot__name{font-size:1.3em;font-weight:700;letter-spacing:0}
.foot__logo{display:inline-flex;color:var(--gold)}
.foot__logo:hover{color:var(--gold-2)}
.foot__logo svg{width:46px;height:auto;display:block;fill:currentColor}
.foot__bar{display:flex;justify-content:space-between;align-items:center;gap:24px 32px;flex-wrap:wrap;padding-top:32px;border-top:1px solid var(--foot-rule)}
.apps{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.apps a{display:inline-flex;line-height:0}
.apps img{height:44px;width:auto;display:block}
.social{display:flex;flex-wrap:wrap;gap:8px}
.social a{width:44px;height:44px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--dark-line);border-radius:2px;color:var(--foot-text);transition:border-color .25s,color .25s}
.social a:hover{border-color:var(--gold);color:var(--gold)}
.social svg{width:18px;height:18px;fill:currentColor}
/* Galaxy Fold cover screen: five icons on one row */
@media (max-width:359px){.social{gap:6px}.social a{width:40px;height:40px}}
/* Phones: the two store badges span exactly the width of the social row below them */
@media (max-width:639px){.apps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:252px}.apps a{display:block}.apps img{width:100%;height:auto}}
@media (max-width:359px){.apps{width:224px;gap:6px}}

/* ---------- Chapter pages ---------- */
.page-head{padding:56px var(--gutter) 40px;border-bottom:1px solid var(--line)}
@media (min-width:900px){.page-head{padding:80px var(--gutter) 40px}}
/* the first section under a page title starts right after the divider */
.page-head+.sec{padding-top:40px!important}
.qa{border-bottom:1px solid var(--ink)}
.qa__item{border-top:1px solid var(--line)}
.qa__item:first-child{border-top-color:var(--ink)}
.qa__btn{width:100%;display:grid;grid-template-columns:36px minmax(0,1fr) 24px;gap:12px;padding:24px 0;align-items:start}
.qa__num{font-family:var(--f-mono);font-size:12px;color:var(--sub);padding-top:5px}
.qa__head{display:flex;flex-direction:column;gap:8px}
.qa__q{font-size:clamp(19px,3vw,24px);font-weight:500;line-height:1.2}
.qa__sum{font-size:16px;line-height:1.55;color:var(--sub)}
.qa__mark{font-family:var(--f-mono);font-size:20px;color:var(--sub);width:24px;height:24px;display:flex;align-items:center;justify-content:center;line-height:1;margin-top:2px;transition:transform .7s var(--ease),color .3s}
.qa__btn:hover .qa__mark{color:var(--ink)}
.qa__btn[aria-expanded="true"] .qa__mark{transform:rotate(45deg);color:var(--ink)}
.qa__panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .5s var(--ease),opacity .4s ease,visibility 0s .5s;visibility:hidden}
.qa__panel>div{overflow:hidden;min-height:0}
.qa__item.open .qa__panel{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .5s var(--ease),opacity .4s ease}
.qa__body{padding:0 0 32px 48px;display:flex;flex-direction:column;gap:16px;font-size:17px;line-height:1.65;color:var(--body)}
.qa__body ul{list-style:disc;padding-left:20px;display:flex;flex-direction:column;gap:8px}
@media (min-width:640px){.qa__btn{grid-template-columns:56px minmax(0,1fr) 32px;gap:16px;padding:28px 0}.qa__body{padding-left:72px;padding-right:48px}}
.spec{background:var(--bg);border:1px solid var(--line);padding:28px 24px;display:flex;flex-direction:column;gap:16px}
.spec__title{font-size:20px;font-weight:500;line-height:1.2}
.spec__text{font-size:15px;line-height:1.6;color:var(--body);text-wrap:pretty}
.boxquote{border:1px solid var(--ink);padding:clamp(24px,5vw,52px);display:flex;flex-direction:column;gap:20px;margin-top:24px}
.boxquote__text{font-size:clamp(24px,4.4vw,34px);line-height:1.35;letter-spacing:-.015em;text-wrap:pretty}
.refrows{display:flex;flex-direction:column;font-size:16px}
.refrow{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--line)}
.refrow:last-child{border-bottom-color:var(--ink)}
.refrow .mono{font-size:13px;color:var(--sub);white-space:nowrap}
.figbox{border:1px solid var(--ink);background:var(--bg);padding:clamp(24px,4vw,40px);display:flex;flex-direction:column;gap:24px}
.split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(380px,100%),1fr));gap:56px;align-items:start}
.dl{display:flex;flex-direction:column;font-size:16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.dl>div{display:grid;grid-template-columns:minmax(110px,1fr) 2fr;gap:20px;padding:14px 0;border-bottom:1px solid var(--line)}
.dl>div:last-child{border-bottom:0}
.dl dt{color:var(--sub)}.dl dd{margin:0}

/* ---------- Motion (CSS scroll-driven; no-ops where unsupported) ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes ink{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes land{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes readin{from{color:var(--read-from)}to{color:var(--ink)}}
@keyframes readhl{from{color:var(--read-from)}to{color:var(--accent)}}
@keyframes unveil{from{opacity:0;filter:blur(8px);transform:translateY(6px)}to{opacity:1;filter:none;transform:none}}
@keyframes boxin{from{border-color:var(--line)}to{border-color:var(--ink)}}
@keyframes typein{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes callfade{from{opacity:1}to{opacity:0}}
@keyframes drift{from{transform:translateY(0)}to{transform:translateY(60px)}}
.hero-in{animation:fadeUp .8s var(--ease) both}
.cover-in{animation:land 1s var(--ease) .2s both}
.rule-t{animation:draw .8s var(--ease) both}
@supports (animation-timeline:view()){
  .reveal{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 35%}
  .rule{animation:draw linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .row{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 30%}
  .fp-ink{animation:ink linear both;animation-timeline:view();animation-range:entry 15% cover 60%}
  .read>span{animation:readin linear both;animation-timeline:view();animation-range:cover 10% cover 30%}
  .read>span>.hl{animation:readhl linear both;animation-timeline:view();animation-range:cover 10% cover 30%}
  .unveil>span{display:inline-block;animation:unveil linear both;animation-timeline:view();animation-range:entry 25% entry 70%}
  .unveil-box{animation:boxin linear both;animation-timeline:view();animation-range:entry 0% entry 50%}
  .ref{animation:typein linear both;animation-timeline:view();animation-range:entry 15% entry 55%}
  @media (min-width:900px){
    .callout{animation:callfade linear both;animation-timeline:scroll();animation-range:0 360px}
    .cover-drift{animation:drift linear both;animation-timeline:scroll();animation-range:0 900px}
  }
}
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){
  html,:root.is-ready{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .feats{-webkit-mask-image:none;mask-image:none;margin-inline:0}
  .feats__row{width:auto;flex-wrap:wrap}
  .feats__row>[aria-hidden="true"]{display:none}
  .feat{white-space:normal}
}
/* The fingerprint scan only clips an image as you scroll (nothing moves), so it stays on with Reduce Motion.
   The cover scan is driven from beta.js (it has to finish before the cover's top edge reaches the header). */
@media (prefers-reduced-motion:reduce){
  @supports (animation-timeline:view()){
    .fp-ink{animation:ink linear both!important;animation-timeline:view()!important;animation-range:entry 15% cover 60%!important}
  }
}
/* #6: "Read a few lines before you read the book." on one line from tablet up */
@media (min-width:900px){.h2--line{font-size:min(44px,4.1vw);white-space:nowrap}}

/* ---------- #10: book details (icon · label · value, like a store listing) ---------- */
.bd{display:flex;flex-direction:column;gap:20px;padding:24px 0;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink)}
.bd__title{font-size:22px;font-weight:600;letter-spacing:-.01em}
.bd__list{margin:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:18px 24px}
.bd__item{display:grid;grid-template-columns:28px minmax(0,1fr);column-gap:12px;align-items:start}
.bd__ic{grid-row:1/3;width:24px;height:24px;margin-top:2px;fill:none;stroke:var(--ink);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bd__ic--mec{fill:var(--ink);stroke:none;height:auto;margin-top:5px}
.bd__item dd a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.bd__item dt{font-size:14px;color:var(--sub)}
.bd__item dd{margin:0;font-size:17px;font-weight:600;overflow-wrap:anywhere}
.bd__item dd.mono{font-size:15px;font-weight:500}

/* ---------- Media clips rail (home + /media/) ---------- */
/* #15: clips slide sideways on every screen; four in view from 900px, two on tablets, one and a peek on phones */
.media-rail>*{flex-basis:min(300px,calc(85% - 8px))}
@media (min-width:640px){.media-rail>*{flex-basis:calc((100% - 16px) / 2)}}
@media (min-width:900px){.media-rail>*{flex-basis:calc((100% - 48px) / 4)}}
.media-rail .mcard{border:1px solid var(--line);padding:0 0 20px;gap:16px}
.media-rail .mcard__meta{padding:0 16px}
.mcard__meta{display:flex;flex-direction:column;gap:8px}
.media-rail .mcard__title{font-size:18px;line-height:1.25}
.mcard__desc{font-size:15px;line-height:1.5;color:var(--sub)}
/* Audio clips: one click plays, another click pauses; starting one stops the rest (beta.js) */
.acard{display:flex}
.acard__btn{width:100%;height:100%}
.acard__btn:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.acard__art{position:relative;container-type:inline-size;aspect-ratio:16/9;display:flex;flex-direction:column;justify-content:space-between;padding:16px 18px 14px;overflow:hidden;background:var(--paper);color:var(--ink);border-bottom:1px solid var(--line)}
/* "Folio": a thin inner frame, like a page plate */
.acard__art::after{content:"";position:absolute;inset:6px;border:1px solid var(--line);pointer-events:none}
.acard__top{position:relative;padding-top:2px;font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--sub)}
.acard__num{position:absolute;right:18px;top:12px;font-family:var(--f-ui);font-size:26cqi;line-height:.8;font-weight:400;letter-spacing:-.05em;color:var(--ink);font-variant-numeric:tabular-nums;pointer-events:none}
.acard__row{position:relative;display:flex;align-items:center;gap:12px;padding-top:10px;border-top:1px solid var(--line)}
.acard__play{flex-shrink:0;width:34px;height:34px;border-radius:50%;border:0;background:var(--ink);display:inline-flex;align-items:center;justify-content:center;transition:background-color .25s}
.acard__play svg{width:14px;height:14px;fill:var(--on-ink)}
.acard__ic-play{margin-left:2px}
.acard__ic-pause,.acard.playing .acard__ic-play{display:none}
.acard.playing .acard__ic-pause{display:block}
.acard__btn:hover .acard__play,.acard.playing .acard__play{background:var(--accent)}
.acard__btn:hover .acard__play svg,.acard.playing .acard__play svg{fill:var(--on-dark)}
.acard__wave{flex:1;min-width:0;height:22px;--p:0%;background:linear-gradient(90deg,var(--accent) var(--p),var(--line-2) var(--p));-webkit-mask:var(--wave) center/100% 100% no-repeat;mask:var(--wave) center/100% 100% no-repeat}
.acard__time{flex-shrink:0;font-family:var(--f-mono);font-size:11px;letter-spacing:.04em;color:var(--sub);font-variant-numeric:tabular-nums}
.media-rail .acard .mcard{transition:background-color .25s,border-color .25s}
.media-rail .acard .mcard:hover,.media-rail .acard.playing .mcard{border-color:var(--ink)}
/* Rail arrows sit beside the heading; on phones the rail is simply swiped */
.rail-btns--wide{display:none}
@media (min-width:640px){.rail-btns--wide{display:flex}}
.page-head--rail{border-bottom:0;padding-bottom:var(--pad-y)}
.eyebrow--accent{color:var(--accent)}
.band__hl{color:var(--accent-on-dark)}
.leads{display:flex;flex-direction:column;gap:16px}

/* ---------- Passage: "This life → Next" band (My Journey) ----------
   Births glow in on the left and drift into the crowd; passings cross the white line, flash, and rise away on the right.
   Particles are made in beta.js; animations only run while the band is on screen (.is-on). */
.psg{position:relative;background:var(--dark);color:var(--on-dark);border-top:1px solid var(--dark-line);border-bottom:1px solid var(--dark-line);overflow:hidden}
.psg__in{max-width:var(--max);margin-inline:auto;padding:56px var(--gutter) 48px;display:flex;flex-direction:column;gap:28px}
.psg__head{margin:0;display:flex;align-items:center;justify-content:center;gap:14px;font-family:var(--f-mono);font-size:12px;font-weight:400;letter-spacing:.14em;text-transform:uppercase;color:var(--dark-sub)}
.psg__head b{font-weight:400;color:var(--on-dark)}
.psg__head span{white-space:nowrap}
.psg__arrow{width:72px;height:10px;overflow:visible}
.psg__arrow path{fill:none;stroke:var(--dark-sub);stroke-width:1;stroke-linecap:round}
.psg__arrow .run{stroke:var(--life);stroke-dasharray:14 86;animation:psg-run 3.6s linear infinite}
@keyframes psg-run{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.psg__inf{width:30px;height:15px;overflow:visible}
.psg__inf path{fill:none;stroke:var(--on-dark);stroke-width:1.2;stroke-linecap:round}
.psg__inf .ghost{stroke:var(--dark-line)}
.psg__inf .trace{stroke-dasharray:30 70;animation:psg-trace 6s linear infinite}
@keyframes psg-trace{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
.psg__stage{position:relative;height:360px}
/* Both glows fade out inside their half (closest-side), so no hard edge shows where the stage ends */
.psg__warm{position:absolute;inset:0 50% 0 0;background:radial-gradient(closest-side at 34% 68%,var(--life-tint),transparent);pointer-events:none}
.psg__beyond{position:absolute;inset:0 0 0 50%;background:radial-gradient(closest-side at 50% 38%,var(--beyond-tint),transparent);pointer-events:none}
.psg__line{position:absolute;left:50%;top:0;bottom:0;width:1px;background:var(--on-dark);opacity:.9;transform:translateX(-.5px)}
.psg__line::after{content:"";position:absolute;left:-1px;width:3px;height:70px;top:-70px;background:linear-gradient(180deg,transparent,var(--white-glow),transparent);filter:blur(1px);animation:psg-fall 7s cubic-bezier(.4,0,.6,1) infinite}
@keyframes psg-fall{from{top:-70px}to{top:100%}}
.psg__side{position:absolute;top:0;display:flex;flex-direction:column;gap:10px;z-index:2}
.psg__side--in{left:0;padding-right:24px}
.psg__side--out{left:calc(50% + 32px)}
.psg__lab{display:flex;align-items:baseline;gap:10px;font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dark-sub)}
.psg__lab b{font-weight:500;font-size:13px;letter-spacing:.14em}
.psg__side--in .psg__lab b,.psg__side--in .psg__n{color:var(--life)}
.psg__side--out .psg__lab b,.psg__side--out .psg__n{color:var(--on-dark)}
.psg__n{font-family:var(--f-mono);font-weight:500;font-size:clamp(26px,3.6vw,44px);line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.psg__field{position:absolute;inset:0;pointer-events:none}
.psg .dot{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;background:var(--life);opacity:0;animation-iteration-count:infinite;animation-timing-function:cubic-bezier(.45,0,.55,1);animation-play-state:paused}
.psg .dot.b{animation-name:psg-born}
.psg .dot.p{animation-name:psg-pass}
.psg.is-on .dot,.psg.is-on .star{animation-play-state:running}
@keyframes psg-born{
  0%{left:var(--x0);top:var(--y0);opacity:0;transform:scale(.2);background:var(--on-dark);box-shadow:none}
  6%{opacity:1;transform:scale(2);background:var(--life);box-shadow:0 0 16px 4px var(--life-glow)}
  22%{transform:scale(1);box-shadow:0 0 6px 1px var(--life-glow)}
  80%{opacity:.75}
  100%{left:var(--x1);top:var(--y1);opacity:0;transform:scale(.8);box-shadow:none}}
@keyframes psg-pass{
  0%{left:var(--x0);top:var(--y0);opacity:0;transform:scale(.8);background:var(--life)}
  12%{opacity:.7}
  66%{left:calc(50% - 4px);top:var(--ym);opacity:.95;transform:scale(1);background:var(--life);box-shadow:0 0 6px 1px var(--life-glow)}
  70%{left:50%;top:var(--ym);opacity:1;transform:scale(2.6);background:var(--on-dark);box-shadow:0 0 20px 5px var(--white-glow)}
  76%{transform:scale(1);box-shadow:0 0 8px 1px var(--white-glow)}
  100%{left:var(--x1);top:var(--y1);opacity:0;transform:scale(.45);background:var(--on-dark);box-shadow:none}}
.psg .star{position:absolute;width:2px;height:2px;margin:-1px 0 0 -1px;border-radius:50%;background:var(--on-dark);opacity:.12;animation:psg-tw ease-in-out infinite;animation-play-state:paused}
@keyframes psg-tw{0%,100%{opacity:.08}50%{opacity:.5}}
.psg__since{margin:0;font-size:16px;line-height:1.5;color:var(--dark-sub);text-align:center;text-wrap:balance}
.psg__since b{font-family:var(--f-mono);font-weight:500;font-variant-numeric:tabular-nums}
.psg__since .r{color:var(--life)}
.psg__since .w{color:var(--on-dark)}
.psg__verse{margin:8px auto 0;max-width:640px;text-align:center;display:flex;flex-direction:column;gap:12px;padding-top:24px;border-top:1px solid var(--dark-line)}
.psg__verse p{margin:0;font-size:clamp(19px,2.4vw,24px);line-height:1.45;letter-spacing:-.01em;color:var(--on-dark);text-wrap:balance}
.psg__verse span{font-family:var(--f-mono);font-size:12px;color:var(--dark-sub)}
@media (max-width:639px){
  .psg__in{padding:40px var(--gutter) 36px;gap:22px}
  .psg__stage{height:300px}
  .psg__side--in{padding-right:12px}
  .psg__side--out{left:calc(50% + 14px)}
  .psg__n{font-size:clamp(17px,5.4vw,22px)}
  .psg__lab{font-size:10px;gap:6px;flex-direction:column}
  .psg__since{font-size:15px}
}
@media (max-width:359px){.psg__head{gap:8px}.psg__arrow{width:44px}}
.psg .still{position:absolute;width:4px;height:4px;margin:-2px 0 0 -2px;border-radius:50%;display:none}
/* Reduce Motion: the site-wide rule already stops every animation; here the moving dots give way to a still frame. Counters keep counting. */
@media (prefers-reduced-motion:reduce){
  .psg .dot,.psg__line::after{display:none}
  .psg__arrow .run,.psg__inf .trace,.psg .star{animation:none!important}
  .psg .still{display:block}
  .psg .still.r{background:var(--life);opacity:.7}
  .psg .still.w{background:var(--on-dark);opacity:.35}
}