/* Plugins page (docs/landing-storyboard.md, "Plugins page"). Each chapter pins its title
   beside a scene and scrolling plays the scene (plugins.js). A scene is 400 × 520 units
   (--u), sized to its stage, so it scales as layout and stays crisp at any width. Scenes are
   drawn the way the app draws them: its own black-and-white greys, hairlines and light
   weights, colour only for meaning, with the app's real numbers. The page around them is
   the site's warm palette. */

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes blink { 50% { opacity: 0; } }

/* The opening: the six, as large type, each a way into its chapter. */
.plug-head { padding-bottom: clamp(80px, 14vh, 150px); }
.plug-head .lede { max-width: 31em; }
.index { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0 24px; max-width: 1080px; margin: clamp(56px, 9vh, 96px) auto 0; text-align: center; }
.index.reveal { opacity: 1; transform: none; }
.index a { display: block; padding: 10px 0 26px; opacity: 0; transform: translateY(20px); transition: opacity .9s var(--ease), transform .9s var(--ease), border-color .3s; }
.index.in a { opacity: 1; transform: none; }
.index.in a:nth-child(2) { transition-delay: .06s; }
.index.in a:nth-child(3) { transition-delay: .12s; }
.index.in a:nth-child(4) { transition-delay: .18s; }
.index.in a:nth-child(5) { transition-delay: .24s; }
.index.in a:nth-child(6) { transition-delay: .3s; }
.ix-name { display: block; margin-top: 14px; font-size: clamp(24px, 2.3vw, 31px); font-weight: 400; letter-spacing: -.035em; line-height: 1.05; transition: color .3s; }
.ix-what { display: block; margin-top: 8px; font-size: 14px; color: var(--ink-3); transition: color .3s; }
.index a:hover { border-top-color: var(--ink-4); }
.index a:hover .ix-mark { transform: translateY(-4px); }
.index a:hover .ix-mark .halo { opacity: 1; }

/* The plugins' own marks: stone objects lit from inside (img/icons), with the light behind
   them like the app icon's. */
.ix-mark, .ch-mark { position: relative; display: block; isolation: isolate; }
.ix-mark { width: clamp(76px, 7.4vw, 96px); aspect-ratio: 1; margin: 0 auto; transition: transform .6s var(--ease); }
.ix-mark img, .ch-mark img { width: 100%; height: 100%; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .7)); }
.ix-mark .halo, .ch-mark .halo { position: absolute; inset: -40%; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(243, 178, 94, .2) 0%, rgba(224, 138, 60, .06) 36%, transparent 64%); opacity: .7; transition: opacity .6s var(--ease); }
.ch-mark { width: 84px; height: 84px; margin: 0 0 18px -6px; }
.chapter.near .ch-mark .halo { opacity: 1; }
.index a:hover .ix-what { color: var(--ink-2); }

/* A chapter: its track is as long as the scroll its beats play over; the pin stays put
   inside it. Copy on the left and the scene on the right; on phones, stacked. */
.chapter { position: relative; }
.ch-track { height: calc(var(--beats, 3) * 85svh + 100svh); }
.ch-pin {
  display: grid; width: 100%; max-width: var(--max); margin: 0 auto; padding: 76px var(--gutter) 24px;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: 1fr auto auto 1fr;
  grid-template-areas: ". stage" "head stage" "foot stage" ". stage"; column-gap: 64px;
}
.ch-copy { display: contents; }
.ch-head { grid-area: head; }
.ch-foot { grid-area: foot; padding-top: 34px; }
.ch-stage { grid-area: stage; position: relative; min-height: 0; container-type: size; display: grid; place-items: center; cursor: pointer; }
.ch-stage.end { cursor: default; }
.ch-stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 720px; height: 720px; margin: -360px 0 0 -360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(243, 178, 94, .07), transparent); pointer-events: none; }
.ch-label { display: flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.ch-label svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ch-where { margin-left: 2px; padding: 3px 10px; border-radius: 99px; font-size: 12px; color: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); }
.chapter h2 { font-size: clamp(32px, 3.7vw, 50px); line-height: 1.06; letter-spacing: -.035em; margin-top: 18px; max-width: 11em; }
.ch-caps { list-style: none; display: grid; max-width: 23em; }
/* One caption at a time: the old one leaves first, then the new one comes in (never both at once). */
.ch-caps li { grid-area: 1 / 1; text-wrap: balance; font-size: 18px; line-height: 1.5; color: var(--ink-2); opacity: 0; transform: translateY(6px); transition: opacity .2s ease, transform .2s ease; }
.ch-caps li.on { opacity: 1; transform: none; transition: opacity .55s var(--ease) .22s, transform .65s var(--ease) .22s; }
.ch-line { display: block; width: 120px; height: 1px; margin-top: 26px; background: var(--line-2); }
.ch-line b { display: block; height: 100%; background: var(--ink-3); transform-origin: 0 0; transform: scaleX(0); }
.ch-also { max-width: 38em; margin: 0 auto; padding: 4vh var(--gutter) 0; text-align: center; font-size: 15px; line-height: 1.6; color: var(--ink-3); }
.chapter > .ch-also:last-child { padding-bottom: 16vh; }
.ch-next { padding-top: 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; }

/* A scene: 400 × 520 units, in the app's own colours (Stone). */
.scene {
  --u: min(100cqw / 400, 100cqh / 540, 1.3px);
  /* Stone, the app's default theme (src/theme.ts) */
  --line: #1d1b19; --line-strong: #2d2b29; --muted: #8c8377; --faint: #5d564d;
  position: relative; width: calc(400 * var(--u)); height: calc(520 * var(--u)); font-size: calc(16 * var(--u)); line-height: 1.3; color: var(--ink);
  opacity: .3; transform: translateY(26px); transition: opacity 1s var(--ease), transform 1.1s var(--ease);
}
.chapter.near .scene { opacity: 1; transform: none; }
.scene > * { position: absolute; }
.chapter.near .scene { will-change: transform; }
@supports not (width: 1cqw) { .scene { --u: .88px; } }
.scene .label, .f-label, .f-lasthead, .f-chart-label, .f-rest-label, .h-label, .h-wl span:first-child, .a-deck, .pp-label, .w-lbl, .w-in, .w-hc-label, .sw-label { font-size: calc(11 * var(--u)); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.scene svg { overflow: visible; }

/* Focus: the pop-up timer (src/plugins/focus/Popup.tsx), at 4/3: Now's ring (168) in its 300 wide window, a card under it. */
.sc-focus { --k: calc(var(--u) * 400 / 300); }
.rp { left: 0; top: calc(52 * var(--u)); width: calc(300 * var(--k)); display: flex; flex-direction: column; align-items: center; }
.rp-disc {
  position: relative; width: calc(168 * var(--k)); aspect-ratio: 1; border-radius: 50%; background: #0a0908;
  box-shadow: inset 0 0 0 1px #2d2b29, 0 calc(30 * var(--u)) calc(80 * var(--u)) rgba(0, 0, 0, .7), 0 0 calc(120 * var(--u)) rgba(243, 178, 94, .08);
}
.rp-ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.rp-ring circle { fill: none; stroke-width: 3; }
.rp-ring .track { stroke: rgba(244, 237, 226, .07); }
.rp-ring .arc { stroke: var(--ink); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.rp-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.rp-head { font-size: calc(9 * var(--k)); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.rp-area { margin-top: calc(3 * var(--k)); font-size: calc(11 * var(--k)); color: var(--muted); }
.rp-clock { margin-top: calc(1 * var(--k)); font-size: calc(30 * var(--k)); font-weight: 200; letter-spacing: -.035em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.rp-clock.dim { color: var(--faint); }
.rp-note { margin-top: calc(1 * var(--k)); font-size: calc(10 * var(--k)); color: var(--faint); }
.rp-tools { display: none; gap: calc(13 * var(--k)); margin-top: calc(6 * var(--k)); }
.rp-tools svg { width: calc(13 * var(--k)); height: calc(13 * var(--k)); fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rp-tools svg.faint { stroke: var(--faint); }
.rp-card { position: absolute; left: 0; right: 0; top: calc(176 * var(--k)); padding: calc(12 * var(--k)); border-radius: calc(16 * var(--k)); text-align: center; background: #0a0908; box-shadow: inset 0 0 0 1px #2d2b29, 0 calc(20 * var(--u)) calc(50 * var(--u)) rgba(0, 0, 0, .5); opacity: 0; }
.pp-q { font-size: calc(14 * var(--k)); white-space: nowrap; }
.pp-acts { display: flex; justify-content: center; gap: calc(6 * var(--k)); margin-top: calc(10 * var(--k)); }
.pp-acts span { position: relative; overflow: hidden; display: inline-flex; align-items: center; height: calc(28 * var(--k)); padding: 0 calc(12 * var(--k)); border-radius: calc(14 * var(--k)); box-shadow: inset 0 0 0 1px var(--line-strong); font-size: calc(12 * var(--k)); white-space: nowrap; }
.pp-acts .solid { background: var(--ink); color: #0a0908; box-shadow: none; }
.pp-press { position: absolute; inset: 0; background: rgba(0, 0, 0, .18); opacity: 0; }
.pp-cap { left: 0; right: 0; top: calc(8 * var(--u)); text-align: center; font-size: calc(12 * var(--u)); color: var(--faint); }

/* Anki: the session's clock above a card; the answer below a hairline; the grades rise; the deck grows. */
.a-head { left: 0; top: 0; width: calc(400 * var(--u)); height: calc(60 * var(--u)); }
.a-head > * { position: absolute; }
.a-in { left: 0; top: calc(0 * var(--u)); font-size: calc(16 * var(--u)); }
.a-left { left: 0; top: calc(22 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }
.a-clock { right: 0; top: 0; font-size: calc(40 * var(--u)); font-weight: 200; line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.a-meter { left: 0; right: 0; top: calc(54 * var(--u)); height: 1px; background: var(--line); }
.a-meter::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: calc(3 * var(--u)); background: var(--alert); }
.a-card { left: 0; top: calc(84 * var(--u)); width: calc(400 * var(--u)); height: calc(272 * var(--u)); border-radius: calc(28 * var(--u)); background: rgba(244, 237, 226, .045); box-shadow: inset 0 0 0 1px rgba(244, 237, 226, .1), inset 0 1px 0 rgba(244, 237, 226, .14), 0 30px 80px rgba(0, 0, 0, .6); }
.a-card > * { position: absolute; }
.a-card[data-fx="next"] { opacity: 0; }
.a-front { left: 0; right: 0; top: calc(70 * var(--u)); text-align: center; font-size: calc(50 * var(--u)); font-weight: 300; letter-spacing: -.02em; line-height: 1.2; }
.a-rule { left: 50%; top: calc(152 * var(--u)); width: calc(40 * var(--u)); margin-left: calc(-20 * var(--u)); height: 1px; background: var(--line-strong); transform: scaleX(0); }
.a-back { left: 0; right: 0; top: calc(170 * var(--u)); text-align: center; font-size: calc(20 * var(--u)); font-weight: 300; line-height: 1.4; color: rgba(244, 237, 226, .86); opacity: 0; }
.a-bar { left: 0; top: calc(376 * var(--u)); width: calc(400 * var(--u)); height: calc(64 * var(--u)); border-radius: calc(18 * var(--u)); box-shadow: inset 0 0 0 1px var(--line-strong); overflow: hidden; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.a-show { position: absolute; inset: 0; display: grid; place-items: center; font-size: calc(16 * var(--u)); }
.a-press { position: absolute; inset: 0; background: rgba(244, 237, 226, .08); opacity: 0; }
.a-cell { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; }
.a-cell + .a-cell { box-shadow: inset 1px 0 0 var(--line); }
.a-cell b { position: relative; font-weight: 400; font-size: calc(16 * var(--u)); }
.a-cell span { position: relative; margin-top: calc(3 * var(--u)); font-size: calc(12 * var(--u)); color: var(--muted); font-variant-numeric: tabular-nums; }
.a-foot { left: 0; top: calc(458 * var(--u)); width: calc(400 * var(--u)); height: calc(20 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }
.a-foot span { position: absolute; left: 0; top: 0; }
.a-foot .a-undo { left: auto; right: 0; }
.a-foot [data-fx="left2"], .a-foot .a-undo { opacity: 0; }
.a-done { left: 0; top: calc(136 * var(--u)); width: calc(400 * var(--u)); text-align: center; opacity: 0; }
.a-check { display: block; width: calc(30 * var(--u)); height: calc(30 * var(--u)); margin: calc(40 * var(--u)) auto 0; fill: none; stroke: var(--good); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.a-title { margin-top: calc(16 * var(--u)); font-size: calc(30 * var(--u)); font-weight: 300; letter-spacing: -.01em; }
.a-sub { margin-top: calc(6 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }
.a-grow { display: flex; justify-content: space-between; margin-top: calc(70 * var(--u)); font-size: calc(13 * var(--u)); }
.a-grow span + span { color: var(--muted); }
.a-two { display: block; position: relative; height: calc(2 * var(--u)); margin-top: calc(10 * var(--u)); background: var(--line); border-radius: 1px; }
.a-two b { position: absolute; left: 0; top: 0; bottom: 0; transform-origin: 0 50%; transform: scaleX(0); }
.a-two .learned { width: 62.3%; background: var(--muted); }
.a-two .known { width: 25.5%; background: #f4ede2; }

/* Fitness: the exercise, its sets beside last time's; a tick that grows into the rest; the climb. */
.f-top { left: 0; top: 0; width: calc(400 * var(--u)); }
.f-title { margin-top: calc(10 * var(--u)); font-size: calc(46 * var(--u)); font-weight: 300; letter-spacing: -.025em; line-height: 1.05; }
.f-sub { margin-top: calc(12 * var(--u)); font-size: calc(14 * var(--u)); color: var(--muted); }
.f-sets { left: 0; top: calc(130 * var(--u)); width: calc(400 * var(--u)); }
.f-lasthead { height: calc(16 * var(--u)); line-height: calc(16 * var(--u)); text-align: right; padding-right: calc(62 * var(--u)); font-size: calc(10 * var(--u)); color: var(--faint); }
.f-row { position: relative; height: calc(70 * var(--u)); border-bottom: 1px solid var(--line); }
.f-row > * { position: absolute; top: 50%; transform: translateY(-50%); }
.f-row .n { left: 0; font-size: calc(13 * var(--u)); color: var(--faint); }
.f-row .v { left: calc(30 * var(--u)); font-size: calc(24 * var(--u)); font-weight: 300; white-space: nowrap; }
.f-row .v.off { color: var(--muted); }
.f-row [data-fx="v2"] { opacity: 0; }
.f-row .rec { position: static; margin-left: calc(12 * var(--u)); font-size: calc(11 * var(--u)); font-weight: 400; letter-spacing: .03em; color: var(--muted); opacity: 0; }
.f-row .l { right: calc(62 * var(--u)); font-size: calc(13 * var(--u)); color: var(--faint); }
.f-btn { right: 0; width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-strong); }
.f-btn.now { box-shadow: inset 0 0 0 1.5px #f4ede2; }
.f-btn > * { position: absolute; inset: 0; border-radius: 50%; }
.f-btn .fill { background: #f4ede2; transform: scale(0); }
.f-btn svg { width: 100%; height: 100%; fill: none; stroke: #0a0908; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.f-btn path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.f-btn .lit { box-shadow: inset 0 0 0 1.5px #f4ede2; opacity: 0; }
.f-grow { left: calc(356 * var(--u)); top: calc(159 * var(--u)); width: calc(44 * var(--u)); height: calc(44 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(.7 * var(--u)) #f4ede2; opacity: 0; }
.f-rest { left: calc(90 * var(--u)); top: calc(160 * var(--u)); width: calc(220 * var(--u)); height: calc(220 * var(--u)); opacity: 0; }
.f-rest svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.f-rest circle { fill: none; stroke-width: 3; }
.f-rest .track { stroke: var(--line); }
.f-rest .arc { stroke: #f4ede2; stroke-linecap: round; stroke-dasharray: 1 1; }
.f-rest-label { position: absolute; left: 0; right: 0; top: calc(64 * var(--u)); text-align: center; }
.f-rest-clock { position: absolute; left: 0; right: 0; top: calc(84 * var(--u)); text-align: center; font-size: calc(58 * var(--u)); font-weight: 200; letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.f-rest-btns { left: 0; top: calc(408 * var(--u)); width: calc(400 * var(--u)); display: flex; justify-content: center; gap: calc(30 * var(--u)); font-size: calc(14 * var(--u)); opacity: 0; }
.f-records { left: 0; top: 0; width: calc(400 * var(--u)); height: calc(520 * var(--u)); opacity: 0; }
.f-records > * { position: absolute; }
.f-hero { left: 0; right: 0; top: calc(36 * var(--u)); text-align: center; font-size: calc(84 * var(--u)); font-weight: 200; letter-spacing: -.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.f-hero span { font-size: calc(28 * var(--u)); font-weight: 300; color: var(--muted); letter-spacing: 0; }
.f-hero-sub { left: 0; right: 0; top: calc(132 * var(--u)); text-align: center; font-size: calc(13 * var(--u)); color: var(--muted); }
.f-chart-label { left: 0; top: calc(214 * var(--u)); }
.f-bars { left: 0; top: calc(244 * var(--u)); width: calc(400 * var(--u)); height: calc(126 * var(--u)); display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); justify-items: center; align-items: end; }
.f-bars i { width: calc(9 * var(--u)); height: calc(var(--h) * 100%); border-radius: calc(5 * var(--u)); background: var(--muted); transform-origin: 50% 100%; transform: scaleY(0); }
.f-bars i.now { background: #f4ede2; }
.f-axis { left: 0; top: calc(380 * var(--u)); width: calc(400 * var(--u)); display: flex; justify-content: space-between; font-size: calc(10 * var(--u)); color: var(--faint); }
.f-orm { left: 0; top: calc(418 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); opacity: 0; }

/* Health: a sentence typed, its words lifted into foods; a search of packaged foods; a week of sleep. */
.h-say { left: 0; top: 0; width: calc(400 * var(--u)); height: calc(200 * var(--u)); }
.h-say > * { position: absolute; }
.h-say .h-label { left: 0; top: calc(40 * var(--u)); }
.h-said { left: 0; top: calc(68 * var(--u)); width: calc(400 * var(--u)); font-size: calc(34 * var(--u)); font-weight: 300; line-height: 1.32; letter-spacing: -.015em; }
.h-said .ph { display: inline-block; }
.scene .c { opacity: 0; }
.h-caret { position: absolute; left: 0; top: 0; width: 2px; height: calc(38 * var(--u)); opacity: 0; }
.h-caret::after { content: ""; position: absolute; inset: 0; background: #f4ede2; animation: blink 1s steps(1) infinite; }
.h-field { left: 0; top: calc(176 * var(--u)); width: calc(400 * var(--u)); height: 1px; background: var(--line); }
.h-fly { position: absolute; font-size: calc(34 * var(--u)); font-weight: 300; line-height: 1.32; letter-spacing: -.015em; white-space: nowrap; transform-origin: 0 0; opacity: 0; }
.h-rows { width: calc(400 * var(--u)); }
.h-meal { left: 0; top: calc(196 * var(--u)); }
.h-row { position: relative; height: calc(60 * var(--u)); border-bottom: 1px solid var(--line); }
.h-meal .h-row, .h-found .h-row { opacity: 0; }
.h-row > * { position: absolute; white-space: nowrap; }
.h-row .t { left: 0; top: calc(11 * var(--u)); font-size: calc(17 * var(--u)); }
.h-row .s { left: 0; top: calc(35 * var(--u)); font-size: calc(12 * var(--u)); color: var(--muted); }
.h-row .k { right: 0; top: calc(11 * var(--u)); text-align: right; font-size: calc(17 * var(--u)); font-variant-numeric: tabular-nums; line-height: 1.15; }
.h-row .k small { display: block; font-size: calc(10 * var(--u)); color: var(--muted); }
.roll { display: inline-block; height: 1.3em; line-height: 1.3em; overflow: hidden; vertical-align: bottom; font-variant-numeric: tabular-nums; }
.roll b { display: block; font-weight: inherit; }
.roll i { display: block; font-style: normal; text-align: center; }
.h-add { left: 0; top: calc(458 * var(--u)); width: calc(400 * var(--u)); height: calc(48 * var(--u)); border-radius: 999px; background: #f4ede2; color: #0a0908; display: flex; align-items: center; justify-content: center; gap: .28em; font-size: calc(15 * var(--u)); opacity: 0; }
.h-find { left: 0; top: 0; width: calc(400 * var(--u)); height: calc(520 * var(--u)); opacity: 0; }
.h-find > * { position: absolute; }
.h-q { left: 0; top: calc(52 * var(--u)); font-size: calc(26 * var(--u)); font-weight: 300; white-space: nowrap; }
.h-ph { position: absolute; left: 0; top: 0; color: var(--faint); }
.h-q .h-caret { height: calc(30 * var(--u)); }
.h-scan { right: 0; top: calc(58 * var(--u)); width: calc(22 * var(--u)); height: calc(22 * var(--u)); fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.h-find .h-field { top: calc(98 * var(--u)); }
.h-brands { left: 0; top: calc(122 * var(--u)); opacity: 0; }
.h-found { left: 0; top: calc(140 * var(--u)); }
.h-found .h-row { height: calc(58 * var(--u)); }
.h-count { left: 0; top: calc(446 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); opacity: 0; }
.h-week { left: 0; top: calc(64 * var(--u)); width: calc(400 * var(--u)); opacity: 0; }
.h-wl { display: flex; justify-content: space-between; align-items: baseline; }
.h-wl span:last-child { font-size: calc(13 * var(--u)); color: var(--muted); }
.h-bars, .h-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); justify-items: center; }
.h-bars { position: relative; height: calc(190 * var(--u)); margin-top: calc(22 * var(--u)); align-items: end; }
.h-bars i { width: calc(10 * var(--u)); height: calc(var(--h) * 100%); border-radius: calc(5 * var(--u)); background: #f4ede2; transform-origin: 50% 100%; transform: scaleY(0); }
.h-bars .goal { position: absolute; left: 0; right: 0; bottom: 88.9%; width: auto; height: 1px; border-radius: 0; background: var(--line-strong); transform-origin: 0 50%; transform: scaleX(0); }
.h-days { margin-top: calc(10 * var(--u)); font-size: calc(10 * var(--u)); color: var(--faint); }
.h-note { margin-top: calc(18 * var(--u)); font-size: calc(12 * var(--u)); color: var(--faint); }
.h-more { margin-top: calc(34 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }

/* Practice: the tempo, big, with the bar's beats lit in time; then the line climbing to the goal. */
.p-head { left: 0; top: 0; width: calc(400 * var(--u)); text-align: center; }
.p-title { display: inline-flex; align-items: center; gap: calc(6 * var(--u)); font-size: calc(21 * var(--u)); }
.p-title svg { width: calc(16 * var(--u)); height: calc(16 * var(--u)); fill: none; stroke: var(--faint); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-note { margin-top: calc(6 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }
.dots { left: 0; top: calc(98 * var(--u)); width: calc(400 * var(--u)); height: calc(12 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(14 * var(--u)); }
.dots i { width: calc(7 * var(--u)); height: calc(7 * var(--u)); border-radius: 50%; background: #f4ede2; opacity: .16; }
.dots i.accent { width: calc(10 * var(--u)); height: calc(10 * var(--u)); opacity: .28; }
/* The app's own beat (src/plugins/practice/beat.ts): 84 bpm in 3/4, each dot lit on its beat. */
.dots.on i { animation: beat 2142.857ms ease-out infinite; }
.dots.on i:nth-child(2) { animation-delay: 714.286ms; }
.dots.on i:nth-child(3) { animation-delay: 1428.571ms; }
@keyframes beat { 0% { opacity: 1; } 7% { opacity: .45; } 23.3% { opacity: .16; } 100% { opacity: .16; } }
.p-bpm { left: 50%; top: calc(114 * var(--u)); font-size: calc(172 * var(--u)); font-weight: 200; line-height: 1; letter-spacing: -.06em; font-variant-numeric: tabular-nums; translate: -50% 0; }
.p-sub { left: 0; top: calc(296 * var(--u)); width: calc(400 * var(--u)); text-align: center; font-size: calc(14 * var(--u)); color: var(--muted); }
.p-ctl { left: 0; top: calc(334 * var(--u)); width: calc(400 * var(--u)); display: flex; justify-content: center; align-items: center; gap: calc(26 * var(--u)); }
.p-ctl > span { position: relative; display: grid; place-items: center; border-radius: 50%; }
.p-nudge { width: calc(52 * var(--u)); height: calc(52 * var(--u)); box-shadow: inset 0 0 0 1px var(--line-strong); }
.p-ctl svg { width: calc(20 * var(--u)); height: calc(20 * var(--u)); fill: none; stroke: #f4ede2; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.p-play { width: calc(76 * var(--u)); height: calc(76 * var(--u)); }
.p-play i { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; }
.p-play .go { background: #f4ede2; }
.p-play .go svg { width: calc(26 * var(--u)); height: calc(26 * var(--u)); stroke: #0a0908; stroke-width: 1.8; }
.p-play .stop { box-shadow: inset 0 0 0 1.5px #f4ede2; opacity: 0; }
.p-log { left: 50%; top: calc(446 * var(--u)); translate: -50% 0; }
.p-pill { overflow: hidden; display: grid; align-items: center; height: calc(38 * var(--u)); padding: 0 calc(16 * var(--u)); border-radius: 999px; background: rgba(244, 237, 226, .045); box-shadow: inset 0 0 0 1px rgba(244, 237, 226, .1), inset 0 1px 0 rgba(244, 237, 226, .14); font-size: calc(14 * var(--u)); }
.p-pill > span { grid-area: 1 / 1; display: flex; align-items: center; gap: calc(8 * var(--u)); white-space: nowrap; }
.p-pill svg { width: calc(15 * var(--u)); height: calc(15 * var(--u)); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.p-l2 { color: var(--muted); opacity: 0; }
.p-undo { position: absolute; left: 100%; top: 50%; margin-left: calc(14 * var(--u)); translate: 0 -50%; font-size: calc(13 * var(--u)); color: var(--muted); opacity: 0; }
.p-piece { left: 0; top: 0; width: calc(400 * var(--u)); height: calc(520 * var(--u)); opacity: 0; }
.p-piece > * { position: absolute; }
.p-hero { left: 0; right: 0; top: calc(58 * var(--u)); text-align: center; font-size: calc(88 * var(--u)); font-weight: 200; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; opacity: 0; }
.p-hero span { font-size: calc(30 * var(--u)); font-weight: 300; color: var(--muted); letter-spacing: 0; }
.p-goal { left: 0; right: 0; top: calc(158 * var(--u)); text-align: center; font-size: calc(13 * var(--u)); color: var(--muted); }
.p-chart { left: 0; top: calc(212 * var(--u)); width: calc(400 * var(--u)); height: calc(130 * var(--u)); }
.p-goalline { stroke: var(--line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.p-climb { fill: none; stroke: #f4ede2; stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.p-end { fill: #f4ede2; opacity: 0; }
.p-goallabel { right: 0; top: calc(213 * var(--u)); font-size: calc(10 * var(--u)); color: var(--faint); }
.p-axis { left: 0; top: calc(350 * var(--u)); width: calc(400 * var(--u)); display: flex; justify-content: space-between; font-size: calc(10 * var(--u)); color: var(--faint); }
.p-from { left: 0; right: 0; top: calc(392 * var(--u)); text-align: center; font-size: calc(14 * var(--u)); color: var(--muted); opacity: 0; }
.p-next { left: 0; right: 0; top: calc(440 * var(--u)); text-align: center; font-size: calc(13 * var(--u)); color: var(--muted); opacity: 0; }
.p-next b { font-weight: 400; color: #f4ede2; }

/* Watches: a round watch picks an area, then runs it in the quota ring; then what Health
   Connect brings in from a watch's own app. */
.w-watch { left: calc(50 * var(--u)); top: calc(70 * var(--u)); width: calc(300 * var(--u)); height: calc(300 * var(--u)); transform-origin: 50% 0; }
.w-watch > * { position: absolute; }
.w-watch::before { /* the case */
  content: ""; position: absolute; inset: calc(-16 * var(--u)); border-radius: 50%;
  background: conic-gradient(from 210deg, #2c2722, #121010 25%, #3a332c 45%, #0f0d0c 70%, #2a241f);
  box-shadow: inset 0 0 0 1px rgba(255, 228, 196, .16), inset 0 0 0 calc(5 * var(--u)) #0c0a09, 0 calc(40 * var(--u)) calc(90 * var(--u)) rgba(0, 0, 0, .8);
}
.w-lug { left: calc(70 * var(--u)); width: calc(160 * var(--u)); height: calc(60 * var(--u)); background: linear-gradient(#171412, #0d0b0a); z-index: -1; }
.w-lug.top { top: calc(-56 * var(--u)); border-radius: calc(18 * var(--u)) calc(18 * var(--u)) 0 0; }
.w-lug.bottom { bottom: calc(-56 * var(--u)); border-radius: 0 0 calc(18 * var(--u)) calc(18 * var(--u)); }
.w-crown { right: calc(-24 * var(--u)); top: calc(126 * var(--u)); width: calc(12 * var(--u)); height: calc(48 * var(--u)); border-radius: calc(4 * var(--u)); background: linear-gradient(90deg, #2c2722, #15120f); box-shadow: inset 0 0 0 1px rgba(255, 228, 196, .12); }
.w-face { inset: 0; border-radius: 50%; background: #000; overflow: hidden; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.w-face > * { position: absolute; inset: 0; }
.w-pick { display: flex; flex-direction: column; justify-content: center; padding: 0 calc(46 * var(--u)); }
.w-lbl { text-align: center; margin-bottom: calc(10 * var(--u)); }
.w-area { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; height: calc(46 * var(--u)); margin-top: calc(6 * var(--u)); border-radius: 99px; background: #161616; font-size: calc(18 * var(--u)); }
.w-area.on { background: #fff; color: #000; }
.w-press { position: absolute; inset: 0; background: rgba(0, 0, 0, .16); opacity: 0; }
.w-run { opacity: 0; }
.w-run > svg { position: absolute; inset: calc(10 * var(--u)); width: calc(280 * var(--u)); height: calc(280 * var(--u)); transform: rotate(-90deg); }
.w-run circle { fill: none; stroke-width: 3.5; }
.w-run .track { stroke: #161616; }
.w-run .arc { stroke: var(--rc, var(--alert)); stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.w-run p { position: absolute; left: 0; right: 0; text-align: center; }
.w-in { top: calc(70 * var(--u)); }
.w-name { top: calc(90 * var(--u)); font-size: calc(16 * var(--u)); color: var(--muted); }
.w-clock { top: calc(112 * var(--u)); font-size: calc(54 * var(--u)); font-weight: 200; letter-spacing: -.04em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.w-bell { top: calc(178 * var(--u)); font-size: calc(12 * var(--u)); color: var(--muted); font-variant-numeric: tabular-nums; }
.w-btns { top: calc(206 * var(--u)) !important; display: flex; justify-content: center; gap: calc(14 * var(--u)); }
.w-btns span { display: grid; place-items: center; width: calc(42 * var(--u)); height: calc(42 * var(--u)); border-radius: 50%; background: #161616; }
.w-btns svg { width: calc(17 * var(--u)); height: calc(17 * var(--u)); fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.w-hc { left: 0; top: calc(210 * var(--u)); width: calc(400 * var(--u)); opacity: 0; }
.w-hc-label { margin-bottom: calc(6 * var(--u)); }
.w-hc .h-row { height: calc(58 * var(--u)); }
.w-hc .h-row .k { top: calc(18 * var(--u)); }
.w-hc-note { margin-top: calc(16 * var(--u)); font-size: calc(13 * var(--u)); color: var(--muted); }

/* Together: the desktop app with every plugin pinned, the phone in front with the day's entry. */
.together { padding-top: clamp(40px, 8vh, 100px); }
.duo { position: relative; max-width: 1040px; margin: 64px auto 0; padding-bottom: 6%; perspective: 1800px; }
.duo::before { content: ""; position: absolute; inset: 0 8% 10%; z-index: -1; filter: blur(60px); background: radial-gradient(50% 45% at 55% 45%, rgba(243, 178, 94, .1), transparent 70%); }
.tg-win {
  position: relative; padding: 5px; border-radius: 18px; overflow: hidden;
  background: linear-gradient(150deg, #3a332c, #13110f 32%, #1d1915 62%, #0b0a09);
  box-shadow: inset 0 0 0 1px rgba(255, 228, 196, .14), 0 60px 140px -40px #000;
  transform: rotateX(calc(var(--tilt, 0) * 1deg)); transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(#000 86%, transparent 100%); mask-image: linear-gradient(#000 86%, transparent 100%);
}
.tg-win img { border-radius: 13px; }
.tg-phone {
  position: absolute; right: 3%; bottom: 0; width: 23%; padding: 4px; border-radius: 42px;
  background: linear-gradient(150deg, #3a332c 0%, #15120f 22%, #0d0b0a 60%, #2a231d 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 228, 196, .14), 0 50px 100px rgba(0, 0, 0, .95), -20px 20px 60px rgba(0, 0, 0, .6);
}
.tg-isle { position: absolute; left: 50%; top: 14px; z-index: 2; width: 30%; height: 3%; min-height: 12px; transform: translateX(-50%); border-radius: 999px; background: #000; }
.tg-screen { position: relative; aspect-ratio: 388 / 798; overflow: hidden; border-radius: 38px; background: #000; }
.tg-screen img { width: 100%; height: auto; }

/* The close: off until you turn them on (Anki's switch turns on as it arrives). */
.plug-close { max-width: 1040px; margin: 0 auto; padding: clamp(110px, 18vh, 200px) var(--gutter) 0; }
.close-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); align-items: center; gap: 56px;
  padding: clamp(36px, 5vw, 64px); border-radius: 28px;
  background: radial-gradient(70% 90% at 85% 50%, rgba(243, 178, 94, .06), transparent 70%), rgba(255, 240, 220, .025);
  box-shadow: inset 0 0 0 1px var(--line);
}
.close-card h2 { font-size: clamp(32px, 4vw, 52px); line-height: 1.06; letter-spacing: -.035em; }
.close-copy > p:not(.onward) { color: var(--ink-3); margin-top: 18px; max-width: 24em; }
.close-copy .onward { text-align: left; margin-top: 26px; }
.switches { --u: 1px; --line: #1d1b19; --line-strong: #2d2b29; --muted: #8c8377; --faint: #5d564d; padding: 20px 22px 8px; border-radius: 20px; background: rgba(244, 237, 226, .04); box-shadow: inset 0 0 0 1px rgba(244, 237, 226, .08); }
.sw-label { padding-bottom: 6px; }
.sw-row { display: grid; grid-template-columns: 16px minmax(0, 1fr) 42px; align-items: center; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--line); text-align: left; }
.sw-row:last-child { border-bottom: 0; }
.sw-row svg { width: 16px; height: 16px; fill: none; stroke: var(--faint); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s ease 1s; }
.sw-row p b { display: block; font-weight: 400; font-size: 16px; color: var(--muted); transition: color .4s ease 1s; }
.sw-row p span { display: block; margin-top: 2px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.switch { position: relative; width: 42px; height: 24px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-strong); transition: background .3s ease .9s, box-shadow .3s ease .9s; }
.switch b { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--muted); transition: transform .45s var(--ease) .9s, background .3s ease .9s; }
.close-card.in .first svg { stroke: #f4ede2; }
.close-card.in .first p b { color: #f4ede2; }
.close-card.in .first .switch { background: #f4ede2; box-shadow: inset 0 0 0 1px #f4ede2; }
.close-card.in .first .switch b { transform: translateX(18px); background: #0a0908; }

/* Without the script: each chapter's scene as its first moment, and its whole story, in order. */
html:not(.js) .ch-track { height: auto; }
html:not(.js) .ch-pin { position: relative; height: auto; min-height: 700px; padding-top: 6vh; }
html:not(.js) .ch-caps li { grid-area: auto; opacity: 1; transform: none; margin-top: 10px; }
html:not(.js) .index a, html:not(.js) .scene { opacity: 1; transform: none; }

@media (max-width: 899px) {
  .ch-pin { grid-template-columns: 100%; grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "head" "stage" "foot"; padding-top: 70px; padding-bottom: 18px; }
  .ch-foot { padding-top: 10px; }
  .ch-stage { margin-top: 14px; }
  .ch-stage::before { width: 460px; height: 460px; margin: -230px 0 0 -230px; }
  .ch-head { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 14px; align-items: center; }
  .ch-mark { grid-row: span 2; width: 56px; height: 56px; margin: 0; }
  .chapter h2 { font-size: 26px; line-height: 1.12; margin-top: 4px; max-width: 16em; }
  .chapter h2 .a, .chapter h2 .b { display: inline; }
  .ch-label { font-size: 14px; }
  .ch-caps li { font-size: 16px; }
  .ch-line { margin-top: 12px; }
  .close-card { grid-template-columns: 1fr; gap: 32px; text-align: center; justify-items: center; }
  .close-copy > p:not(.onward) { margin-left: auto; margin-right: auto; }
  .close-copy .onward { text-align: center; }
  .switches { order: -1; width: 100%; max-width: 400px; }
}
@media (max-width: 600px) {
  .close-card { padding: 32px 12px 36px; }
  .close-copy { padding: 0 12px; }
  .switches { padding: 16px 16px 4px; }
  .sw-row { gap: 12px; }
  .duo { margin: 44px calc(var(--gutter) * -1) 0; padding-bottom: 30%; }
  .tg-win { width: 92%; margin-left: 4%; padding: 3px; border-radius: 11px; }
  .tg-win img { border-radius: 8px; }
  .tg-phone { width: 34%; right: 4%; padding: 2.5px; border-radius: 28px; }
  .tg-isle { top: 9px; min-height: 8px; }
  .tg-screen { border-radius: 25.5px; }
}
@media (max-width: 1060px) {
  .index { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 760px) {
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
  .ix-mark { width: 68px; }
  .ix-name { font-size: 24px; margin-top: 10px; }
  .ix-what { font-size: 13px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .chapter h2 { font-size: 21px; }
}
/* A phone on its side: stacked, the scene would shrink to a stamp, so copy goes back beside it. */
@media (orientation: landscape) and (max-height: 500px) {
  .ch-pin { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-rows: 1fr auto auto 1fr; grid-template-areas: ". stage" "head stage" "foot stage" ". stage"; column-gap: 32px; padding-top: 62px; padding-bottom: 12px; }
  .ch-stage { margin-top: 0; }
  .ch-foot { padding-top: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .ch-caps li { transform: none; transition: opacity .2s ease; }
  .ch-caps li.on { transform: none; transition: opacity .3s ease .2s; }
  .index a, .scene { transition: none; opacity: 1; transform: none; }
  .calm .ch-stage { transition: opacity .25s ease; }
  .h-caret::after { animation: none; }
  .switch, .switch b, .sw-row svg, .sw-row p b { transition: none; }
}