/* koiimedia.com, in the Workbook 2.0 app's look (docs/design-2.0.md in
   iamsamwood/workbook): the paper and warm-brown ink, the blue accent, glass
   over the sky, New York for the Course's words and SF Pro for everything
   else, and the approved gold title with its occasional glimmer.
   Layout: a sky hero (title, line, App Store badge) beside the app's Home;
   then paper sections at one rhythm: the lesson screen, the narrators,
   readers' words, support; then the footer. */
:root {
  --paper: #fbfaf7;
  --surface: #ffffff;
  --ink: #3a2f26;
  --ink-soft: #74675b;
  --rule: #e4e1da;
  --accent: #3f6f9f;
  --on-accent: #ffffff;
  --star: #d9a521;
  --button-fill: rgba(255, 255, 255, .8);
  --glass-edge: rgba(255, 255, 255, .55);
  --glass-shadow: rgba(20, 30, 45, .07);
  --title-glow: rgba(8, 20, 40, .35);
  --title-glow-wide: rgba(8, 20, 40, .22);
  --sky-shade: rgba(8, 20, 40, 0);
  --slab-tint: rgba(40, 70, 110, .22);
  --slab-ink: #ffffff;
  --slab-label: rgba(255, 255, 255, .85);
  --slab-button: #ffffff;
  --slab-divider: rgba(255, 255, 255, .25);
  --slab-pressed: rgba(255, 255, 255, .18);
  --slab-text-shadow: 0 1px 2px rgba(0, 32, 60, .35);
  --phone-sky: url("assets/sky-phone.jpg");
  --phone-sky-dim: rgba(11, 22, 39, 0);
  --spot-dim: rgba(0, 0, 0, .4);
  --book: ui-serif, "New York", "Source Serif 4", Georgia, "Times New Roman", serif;
  --app: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --space: clamp(64px, 9vw, 112px);
  --gutter: 20px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #121417; --surface: #1b1e22; --ink: #e4e2dc; --ink-soft: #9a9fa6; --rule: #2a2e33;
    --accent: #8fb4da; --on-accent: #121417; --star: #f0c24b;
    --button-fill: rgba(38, 42, 48, .8); --glass-edge: rgba(255, 255, 255, .1); --glass-shadow: rgba(0, 0, 0, .3);
    --sky-shade: rgba(11, 22, 39, .32);
    --slab-tint: rgba(11, 22, 39, .3); --slab-ink: #e4e2dc; --slab-label: #8fb4da; --slab-button: #8fb4da; --slab-divider: rgba(255, 255, 255, .14); --slab-pressed: rgba(255, 255, 255, .16); --slab-text-shadow: none; --phone-sky: url("assets/sky-phone-dark.jpg"); --phone-sky-dim: rgba(11, 22, 39, .32);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #121417; --surface: #1b1e22; --ink: #e4e2dc; --ink-soft: #9a9fa6; --rule: #2a2e33;
  --accent: #8fb4da; --on-accent: #121417; --star: #f0c24b;
  --button-fill: rgba(38, 42, 48, .8); --glass-edge: rgba(255, 255, 255, .1); --glass-shadow: rgba(0, 0, 0, .3);
  --sky-shade: rgba(11, 22, 39, .32);
  --slab-tint: rgba(11, 22, 39, .3); --slab-ink: #e4e2dc; --slab-label: #8fb4da; --slab-button: #8fb4da; --slab-divider: rgba(255, 255, 255, .14); --slab-pressed: rgba(255, 255, 255, .16); --slab-text-shadow: none; --phone-sky: url("assets/sky-phone-dark.jpg"); --phone-sky-dim: rgba(11, 22, 39, .32);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.55 var(--app); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: var(--accent); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
p { margin: 0; }
.wrap { width: min(1100px, 100%); margin-inline: auto; padding-inline: var(--gutter); }
.kicker { font: 600 .8rem/1 var(--app); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
h2 { font: 600 clamp(1.75rem, 3.4vw, 2.4rem)/1.15 var(--book); margin: 0; text-wrap: balance; letter-spacing: -.005em; }
h3 { font: 600 1.3rem/1.25 var(--book); margin: 0; }
.lede { color: var(--ink-soft); font-size: 1.1rem; max-width: 52ch; }
.soft-rule { width: 36px; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--accent) 55%, transparent); }

/* The approved gold title, as the app draws it: rendered once, a soft dark
   glow behind it, and a band of light that sweeps the letters now and then. */
.gold { position: relative; aspect-ratio: 1124 / 523; width: 100%; }
.gold img { width: 100%; height: auto; filter: drop-shadow(0 0 2px var(--title-glow)) drop-shadow(0 0 7px var(--title-glow-wide)); }
.gold .glint { position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  -webkit-mask: url("assets/title-mask.png") 0 0 / 100% 100% no-repeat; mask: url("assets/title-mask.png") 0 0 / 100% 100% no-repeat; }
.gold .glint i { position: absolute; top: -20%; bottom: -20%; left: 0; width: 22%;
  transform: translateX(-160%) skewX(var(--skew, -22deg));
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9) 45%, rgba(255, 255, 255, .9) 55%, transparent); }
.gold .glint.go i { animation: sweep var(--dur, 1.8s) cubic-bezier(.45, 0, .55, 1) 1; }
@keyframes sweep { from { transform: translateX(-160%) skewX(var(--skew, -22deg)); } to { transform: translateX(560%) skewX(var(--skew, -22deg)); } }

/* Hero */
.hero { position: relative; overflow: hidden; color: #fff; background: #8fb4da url("assets/sky.jpg") center 35% / cover no-repeat; }
.hero::before { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(8, 20, 40, .30), rgba(8, 20, 40, .08) 60%, transparent), var(--sky-shade); }
.hero::after { content: ""; position: absolute; inset: auto 0 0; height: 120px; pointer-events: none; background: linear-gradient(transparent, var(--paper)); }
.hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(32px, 6vw, 80px);
  align-items: center; padding-block: clamp(48px, 8vw, 96px) clamp(88px, 10vw, 128px); }
.hero-copy { display: grid; gap: 28px; justify-items: start; }
.tagline { font: 600 clamp(1.3rem, 2.4vw, 1.7rem)/1.25 var(--app); letter-spacing: -.01em; margin-top: -8px; text-shadow: 0 1px 10px rgba(8, 20, 40, .45); }
.hero-copy .pitch { margin-top: -14px; }
.hero-copy .pitch span { display: block; text-wrap: balance; }
.tagline { text-wrap: balance; }
.hero .gold { max-width: 560px; }
.pitch { font: 500 clamp(1.15rem, 1.9vw, 1.35rem)/1.45 var(--app); max-width: 44ch; text-shadow: 0 1px 10px rgba(8, 20, 40, .45); }
.store { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.store a { display: block; line-height: 0; border-radius: 10px; }
.store img { height: 54px; width: auto; }
.store span { font: 600 .95rem var(--app); text-shadow: 0 1px 8px rgba(8, 20, 40, .5); }

/* Phones. Every screen is drawn at the app's own size, an iPhone 17
   (393 × 852 points), in .mini, and phones.js scales it to the frame, so
   Home, the lesson, All Lessons and the intro's pictures share one drawing. */
.phone { width: min(310px, 100%); justify-self: center; border-radius: 52px; padding: 11px; position: relative;
  background: #0b0d10; box-shadow: 0 40px 80px rgba(8, 20, 40, .28), 0 0 0 1.5px #2b3138 inset; }
.phone::before { content: ""; position: absolute; top: 22px; left: 50%; width: 31%; height: 26px; transform: translateX(-50%); border-radius: 20px; background: #0b0d10; z-index: 4; }
.screen { position: relative; aspect-ratio: 393 / 852; border-radius: 42px; overflow: hidden; background: var(--surface); }
.mini { position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform-origin: 0 0; transform: scale(var(--s, .74));
  font: 17px/1.3 var(--app); color: var(--ink); overflow: hidden; }
.mini .status { position: absolute; top: 18px; left: 46px; right: 46px; display: flex; justify-content: space-between; font: 600 17px var(--app); }

/* Home */
.mini.home { background: linear-gradient(var(--phone-sky-dim), var(--phone-sky-dim)), var(--phone-sky) center / cover, #8fb4da; color: #fff; }
.mini.home .gold { position: absolute; left: 32px; width: 329px; top: 214px; }
.mini.home .soft-rule { position: absolute; left: 50%; top: 392px; transform: translateX(-50%); background: rgba(255, 255, 255, .7); }
.mini.home .info { position: absolute; top: 62px; right: 20px; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center;
  background: var(--slab-tint); border: .5px solid rgba(255, 255, 255, .35); color: var(--slab-button);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.mini.home .info svg { width: 24px; height: 24px; }
.slab { position: absolute; left: 28px; right: 28px; bottom: 58px; border-radius: 26px; overflow: hidden; color: var(--slab-ink);
  background: var(--slab-tint); border: .5px solid rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); box-shadow: 0 2px 8px rgba(20, 30, 45, .07); }
.slab .row-card { padding: 16px 20px; display: grid; gap: 4px; }
.slab .label { font: 600 13px/1.2 var(--app); letter-spacing: .06em; text-transform: uppercase; color: var(--slab-label); text-shadow: var(--slab-text-shadow); }
.slab .line { display: flex; align-items: center; gap: 12px; }
.slab .title { flex: 1; font: 400 21px/1.22 var(--book); text-shadow: var(--slab-text-shadow); }
.slab .play { flex: none; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; color: var(--slab-ink);
  background: rgba(143, 180, 218, .35); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), 0 2px 8px rgba(20, 30, 45, .1); }
.slab .play svg { width: 18px; height: 18px; margin-left: 3px; }
.slab .divider { height: .5px; background: var(--slab-divider); }
.slab .row-button { height: 52px; display: grid; place-items: center; font: 600 17px var(--app); color: var(--slab-button); text-shadow: var(--slab-text-shadow); }

/* Lesson */
.mini.lesson { background: var(--surface); }
.mini .bar { position: absolute; top: 62px; left: 16px; right: 16px; display: flex; justify-content: space-between; z-index: 2; }
.mini .round { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font: 600 17px var(--app); color: var(--ink);
  background: var(--button-fill); border: .5px solid var(--glass-edge); box-shadow: 0 2px 8px var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.mini .round svg { width: 18px; height: 18px; }
.mini .text { position: absolute; top: 122px; left: 22px; right: 22px; bottom: 0;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 200px), transparent calc(100% - 80px)); mask-image: linear-gradient(#000 calc(100% - 200px), transparent calc(100% - 80px)); }
.mini .kicker2 { display: flex; justify-content: center; align-items: center; gap: 7px; font: 500 12px var(--app); letter-spacing: .075em; text-transform: uppercase; color: var(--accent); }
.mini .kicker2::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mini h5 { margin: 8px 0 0; font: 600 28px/1.18 var(--book); text-align: center; text-wrap: balance; }
.mini .text .soft-rule { margin: 12px auto 18px; }
.mini .text p { font: 400 18px/1.55 var(--book); }
.mini .text p + p { margin-top: 18px; text-indent: 1.5em; }
.mini .tray { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 56px; border-radius: 999px; z-index: 2;
  display: grid; grid-template-columns: repeat(6, 1fr); align-items: center; justify-items: center; color: var(--ink);
  background: var(--button-fill); border: .5px solid var(--glass-edge); box-shadow: 0 2px 8px var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.mini .tray .b { width: 44px; height: 44px; display: grid; place-items: center; }
.mini .tray svg { width: 23px; height: 23px; }
.mini .tray .on { color: var(--accent); }
.mini .tray .progress { position: absolute; left: 28px; right: 28px; bottom: 5px; height: 2.5px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 18%, transparent); }
.mini .tray .progress::before { content: ""; position: absolute; inset: 0 64% 0 0; border-radius: 2px; background: color-mix(in srgb, var(--accent) 90%, transparent); }

/* All Lessons */
.mini.lessons { background: var(--paper); }
.mini .bar .head { position: absolute; left: 0; right: 0; top: 10px; text-align: center; font: 600 17px var(--app); pointer-events: none; }
.mini .rows { position: absolute; top: 118px; left: 0; right: 0; }
.mini .rows .r { display: flex; align-items: center; gap: 12px; padding: 11px 22px; border-bottom: 1px solid var(--rule); }
.mini .rows .r.today { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mini .rows .r span { flex: 1; display: grid; gap: 2px; }
.mini .rows small { font: 400 13px var(--app); color: var(--ink-soft); }
.mini .rows b { font: 400 18px/1.25 var(--book); }
.mini .rows svg { width: 22px; height: 22px; color: var(--ink-soft); }
.mini .rows .done svg { color: var(--star); }
.mini .panel { position: absolute; left: 12px; right: 12px; bottom: 6px; border-radius: 28px; padding: 12px 12px 12px; display: grid; gap: 10px;
  background: var(--button-fill); border: .5px solid var(--glass-edge); box-shadow: 0 2px 8px var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); }
.mini .panel .done-line { padding: 0 8px; display: grid; gap: 6px; font: 500 13px var(--app); color: var(--ink-soft); }
.mini .panel .done-line i { display: block; height: 3px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 15%, transparent); position: relative; }
.mini .panel .done-line i::before { content: ""; position: absolute; inset: 0 67% 0 0; border-radius: 2px; background: var(--accent); }
.mini .panel .controls { display: flex; gap: 8px; }
.mini .search { flex: 1; height: 44px; border-radius: 999px; display: flex; align-items: center; gap: 8px; padding: 0 14px; color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 6%, transparent); font: 400 17px var(--app); }
.mini .search svg { width: 18px; height: 18px; }
.mini .today { height: 44px; padding: 0 18px; border-radius: 999px; display: grid; place-items: center; font: 600 17px var(--app); color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); }

/* The intro: the app's first-launch tour, in a phone */
.mini.intro { background: linear-gradient(transparent 0, var(--paper) 60%), var(--phone-sky) top center / 100% auto no-repeat, var(--paper); }
.mini.intro .slide { position: absolute; inset: 59px 0 104px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: opacity .35s ease; }
.mini.intro .slide[hidden] { display: flex !important; opacity: 0; pointer-events: none; }
.picture { position: relative; width: 296px; height: 321px; flex: none; }
.picture .clip { position: absolute; inset: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 .5px color-mix(in srgb, var(--ink) 14%, transparent), 0 12px 30px rgba(20, 30, 45, .12); }
.picture.top .clip { border-radius: 40px 40px 14px 14px; }
.picture.bottom .clip { border-radius: 14px 14px 40px 40px; }
.picture .mini { --s: .7532; }
.picture.bottom .mini { top: -321px; }
/* The lit control, as in the app's ScreenPicture: the rest of the picture
   dims (black at 40%) around a rounded hole, and a white ring 4 points
   outside the hole, drawn over the picture's edge rather than cut by it,
   grows and fades every 1.8 s (IntroTour.pulse); steady with Reduce Motion. */
.hole { position: absolute; box-shadow: 0 0 0 999px var(--spot-dim); pointer-events: none; }
.ring { position: absolute; z-index: 2; box-sizing: border-box; border: 2px solid #fff; pointer-events: none;
  box-shadow: 0 0 4px rgba(0, 0, 0, .35), inset 0 0 4px rgba(0, 0, 0, .35); animation: ring-pulse 1.8s cubic-bezier(.25, .46, .45, .94) infinite; }
@keyframes ring-pulse { from { transform: scale(.96); opacity: 1; } to { transform: scale(1.12); opacity: 0; } }
.slide[hidden] .ring { animation: none; }
@media (prefers-reduced-motion: reduce) { .ring { animation: none; } }
.blurb { margin: 0; font: 400 19px/1.5 var(--app); color: var(--ink); text-align: center; padding: 0 22px; text-wrap: pretty; }
.blurb.small { font-size: 16.5px; }
.blurb b { font-weight: 700; }
.blurb .ic { display: inline-block; width: 1.05em; height: 1.05em; vertical-align: -.16em; color: var(--accent); }
.mini.intro .foot { position: absolute; left: 12px; right: 12px; bottom: 14px; height: 56px; display: flex; align-items: center; justify-content: space-between; z-index: 3; }
.mini.intro .foot button { all: unset; box-sizing: border-box; min-width: 44px; height: 44px; padding: 0 18px; border-radius: 999px; display: grid; place-items: center; cursor: pointer;
  font: 600 17px var(--app); color: var(--ink); background: var(--button-fill); border: .5px solid var(--glass-edge); box-shadow: 0 2px 8px var(--glass-shadow);
  -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.mini.intro .foot button.go { color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--button-fill)); }
.mini.intro .foot button:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.mini.intro .dots { display: flex; gap: 8px; align-items: center; }
.mini.intro .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .2; transition: all .2s; }
.mini.intro .dots i.on { width: 8px; height: 8px; opacity: 1; background: var(--accent); }


/* Sections share one rhythm */
section { padding-block: var(--space); }
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(40px, 7vw, 96px); align-items: center; }
.stack { display: grid; gap: 20px; align-content: start; }
.facts { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 16px; }
.facts li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.facts svg { width: 22px; height: 22px; color: var(--accent); margin-top: 1px; }
.facts b { font-weight: 600; }
.facts span { color: var(--ink-soft); }
.facts b + span { display: block; }

/* Sections alternate paper and surface; the change of colour is the divider. */
.band { background: var(--surface); }
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin-top: 44px; }
.voice { display: grid; gap: 10px; align-content: start; }
.voice .soft-rule { margin-bottom: 4px; }
.voice p { color: var(--ink-soft); font-size: .98rem; }

.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 44px; }
blockquote { margin: 0; display: grid; gap: 16px; align-content: start; }
blockquote p { font: italic 400 1.15rem/1.6 var(--book); }
blockquote footer { font: 600 .9rem var(--app); color: var(--ink-soft); }

.give { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 40px; align-items: center;
  background: var(--surface); border: 1px solid var(--rule); border-radius: 26px; padding: clamp(28px, 4vw, 48px); }
.ways { display: grid; gap: 12px; }
.button { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 999px;
  font: 600 1.05rem var(--app); text-decoration: none; background: var(--accent); color: var(--on-accent); }
.button.quiet { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
.note { font-size: .92rem; color: var(--ink-soft); }

footer.site { border-top: 1px solid var(--rule); padding-block: 32px 44px; font-size: .92rem; color: var(--ink-soft); }
footer.site .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; justify-content: space-between; align-items: center; }
footer.site nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }

/* Plain pages: privacy, give, not found */
.masthead { background: #8fb4da url("assets/sky.jpg") center 35% / cover; position: relative; }
.masthead .gold { aspect-ratio: 1124 / 523; }
.masthead::before { content: ""; position: absolute; inset: 0; background: var(--sky-shade); }
.masthead .wrap { position: relative; padding-block: 28px 34px; max-width: 760px; }
.masthead a { display: block; width: 210px; }
.doc { padding-block: 56px var(--space); }
.doc .wrap { max-width: 760px; display: grid; gap: 20px; }
.doc h1 { font: 600 clamp(2rem, 5vw, 2.7rem)/1.15 var(--book); margin: 0; }
.doc h2 { font-size: 1.35rem; margin-top: 12px; }
.qr { width: min(240px, 100%); aspect-ratio: 1; justify-self: center; background: #fff; border-radius: 18px; padding: 14px; border: 1px solid var(--rule); }
.qr svg, .qr img { width: 100%; height: 100%; }

@media (max-width: 860px) {
  .hero .wrap, .split, .give { grid-template-columns: minmax(0, 1fr); }
  .hero-copy { justify-items: center; text-align: center; }
  .hero .gold { max-width: 420px; }
  .store { justify-content: center; }
  .voices, .quotes { grid-template-columns: minmax(0, 1fr); }
  .split .phone { order: 2; }
  .hero .phone { display: none; }
  .hero .wrap { padding-block: 76px 96px; }
}
@media (prefers-reduced-motion: reduce) { .gold .glint { display: none; } }

/* Appearance switch, top right: Auto, Light, Dark (as in the app's
   Settings › Appearance). A glass capsule on the sky; the chosen one is lit. */
.appearance { position: absolute; z-index: 5; top: calc(16px + env(safe-area-inset-top, 0px));
  right: max(16px, calc((100% - 1100px) / 2 + 20px)); display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: rgba(255, 255, 255, .28); border: .5px solid rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); box-shadow: 0 2px 10px rgba(8, 20, 40, .12); }
.appearance button { all: unset; box-sizing: border-box; width: 36px; height: 30px; border-radius: 999px; display: grid; place-items: center;
  color: #fff; cursor: pointer; transition: background-color .2s, color .2s; }
.appearance button svg { width: 17px; height: 17px; filter: drop-shadow(0 1px 2px rgba(8, 20, 40, .35)); }
.appearance button[aria-checked="true"] { background: var(--button-fill); color: var(--accent); }
.appearance button[aria-checked="true"] svg { filter: none; }
.appearance button:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.appearance button:hover:not([aria-checked="true"]) { background: rgba(255, 255, 255, .18); }

/* Narrator samples: the app's play circle, the lesson, and a progress line. */
.sample { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr);
  gap: 12px; align-items: center; padding: 10px 14px 14px 10px; border-radius: 18px; background: var(--surface); border: 1px solid var(--rule); }
.sample:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--rule)); }
.sample:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sample .play { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: inset 0 0 0 .5px color-mix(in srgb, var(--accent) 30%, transparent); }
.sample .play svg { width: 15px; height: 15px; margin-left: 2px; }
.sample:hover .play { background: color-mix(in srgb, var(--accent) 22%, transparent); }
.sample .i-pause, .sample.playing .i-play { display: none; }
.sample.playing .i-pause { display: block; margin-left: 0; }
.sample-text { display: grid; gap: 1px; min-width: 0; }
.sample-text b { font: 600 .82rem var(--app); letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.sample-text span { font: 400 .98rem/1.3 var(--book); color: var(--ink); }
.sample-line { position: absolute; left: 66px; right: 16px; bottom: 7px; height: 2.5px; border-radius: 2px; background: color-mix(in srgb, var(--ink) 12%, transparent); overflow: hidden; }
.sample-line i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .25s linear; }
.voice { gap: 14px; }

/* Privacy */
.glance { list-style: none; margin: 8px 0 12px; padding: 22px; display: grid; gap: 18px; grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--surface); border: 1px solid var(--rule); border-radius: 22px; }
.glance li { display: grid; gap: 10px; align-content: start; }
.glance svg { width: 26px; height: 26px; color: var(--accent); }
.glance b { display: block; font-weight: 600; }
.glance span { color: var(--ink-soft); font-size: .95rem; }
.policy { padding-block: 22px 0; display: grid; gap: 12px; border-top: 1px solid var(--rule); }
.policy h2 { margin: 0; }
@media (max-width: 700px) { .glance { grid-template-columns: minmax(0, 1fr); } }

/* The App Store badge follows the appearance: white in light, black in dark. */
.badge-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .badge-light { display: none; } :root:not([data-theme="light"]) .badge-dark { display: block; } }
:root[data-theme="dark"] .badge-light { display: none; }
:root[data-theme="dark"] .badge-dark { display: block; }
/* The QR code turns light on dark with the page: the site's dark accent on
   a dark tile (assets/give-qr-dark.png, made from give-qr.png). */
.qr-dark { display: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qr { background: #15181c; } :root:not([data-theme="light"]) .qr-light { display: none; } :root:not([data-theme="light"]) .qr-dark { display: block; } }
:root[data-theme="dark"] .qr { background: #15181c; }
:root[data-theme="dark"] .qr-light { display: none; }
:root[data-theme="dark"] .qr-dark { display: block; }

/* Version 2.0 and the promotion label */
.version { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 600 .95rem var(--app); text-shadow: 0 1px 8px rgba(8, 20, 40, .45); margin-bottom: -6px; }
.version span { flex: none; white-space: nowrap; text-shadow: none; font: 700 .75rem/1 var(--app); letter-spacing: .08em; text-transform: uppercase; padding: 6px 10px; border-radius: 999px;
  color: #fff; background: rgba(255, 255, 255, .22); border: .5px solid rgba(255, 255, 255, .55);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
.promo { display: inline-block; margin-right: 4px; padding: 5px 11px 4px; border-radius: 999px; font: 800 .78rem/1 var(--app); letter-spacing: .08em;
  text-transform: uppercase; color: #2b2f00; text-shadow: none; vertical-align: 1px;
  background: linear-gradient(180deg, #ffff8a, #e6f22a 55%, #c9d40e); box-shadow: 0 1px 0 rgba(255, 255, 255, .6) inset, 0 2px 8px rgba(8, 20, 40, .25); }
.store .free { font: 600 .95rem var(--app); text-shadow: 0 1px 8px rgba(8, 20, 40, .5); }
.mini.home .info { cursor: pointer; }

/* The page's sky drifts (still with Reduce Motion). The phones' Home sky is
   the app's own flight through the clouds, drawn by sky.js on a canvas. */
@keyframes drift { from { background-position: 0% 35%; } to { background-position: 100% 35%; } }
.hero { background-size: 130% auto; animation: drift 140s ease-in-out infinite alternate; }
@media (max-width: 860px) { .hero { background-size: cover; animation-name: none; } .version { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .hero { animation: none; } }
.mini.home .sky { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.anniversary .facts svg { color: var(--accent); }
.anniversary-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.anniversary-line .promo { margin: 0; font-size: .85rem; padding: 6px 12px 5px; }

/* On a computer the hero's copy spans the phone's height: "Version 2.0" at
   its top, the App Store row at its bottom, the title and pitch between. */
@media (min-width: 861px) {
  .hero .wrap { align-items: stretch; }
  .hero .phone { align-self: center; }
  .hero-copy { display: flex; flex-direction: column; align-items: flex-start; }
  .hero-copy .gold { align-self: stretch; }
  .hero-copy .version { margin-bottom: auto; }
  /* The badge and "Free promo" span the title: flush with its left and right. */
  .hero-copy .store { margin-top: auto; align-self: stretch; max-width: 560px; justify-content: space-between; }
  .hero-copy .store .promo { margin-right: 0; }
}

/* The hero's phone is the tour: hover (or focus) says so, a click starts
   the app's intro in place, Skip or Begin come back to Home. On a small
   screen, where the phone is hidden, "Take the tour" opens it over the page. */
.hero .phone:not(.touring) { cursor: pointer; }
.hero .phone:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.mini.intro.off { visibility: hidden; opacity: 0; pointer-events: none; }
.screen > .mini.intro { transition: opacity .35s ease, visibility 0s; }
.screen > .mini.intro.off { transition: opacity .35s ease, visibility 0s .35s; }
.take { position: absolute; left: 50%; top: 57%; z-index: 5; display: inline-flex; align-items: center; gap: 9px; padding: 11px 20px 11px 17px;
  border-radius: 999px; font: 600 1.02rem var(--app); color: #fff; white-space: nowrap; pointer-events: none;
  background: rgba(11, 22, 39, .42); border: .5px solid rgba(255, 255, 255, .45); box-shadow: 0 8px 24px rgba(8, 20, 40, .28);
  -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5);
  opacity: 0; transform: translate(-50%, -50%) scale(.94); transition: opacity .25s ease, transform .25s ease; }
.take svg { width: 12px; height: 14px; }
.hero .phone:not(.touring):hover .take, .hero .phone:not(.touring):focus-visible .take { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (hover: none) { .hero .phone:not(.touring) .take { opacity: 1; transform: translate(-50%, -50%); } }
.hero .phone.touring .take { opacity: 0; }
.tour-button { display: none; }
@media (max-width: 860px) {
  .tour-button { all: unset; box-sizing: border-box; display: inline-flex; align-items: center; gap: 9px; cursor: pointer; padding: 11px 20px 11px 17px; border-radius: 999px;
    font: 600 1rem var(--app); color: #fff; background: rgba(11, 22, 39, .32); border: .5px solid rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
  .tour-button svg { width: 12px; height: 14px; }
  .tour-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
  .hero.touring .wrap { z-index: 10; }
  .hero .phone.touring { display: block; position: fixed; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(310px, 86vw, calc((100svh - 64px) * 393 / 852)); padding: 9px; border-radius: 46px; }
  .hero .phone.touring .screen { border-radius: 38px; }
  .tour-backdrop { position: fixed; inset: 0; z-index: 1; background: rgba(8, 14, 24, .6); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}

/* The crypto sheet: the QR code and the payment link over the page. */
dialog.sheet { border: 0; padding: 0; border-radius: 26px; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  background: var(--surface); color: var(--ink); box-shadow: 0 30px 80px rgba(8, 20, 40, .35); }
dialog.sheet[open] { animation: sheet-in .25s ease; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(14px) scale(.98); } }
dialog.sheet::backdrop { background: rgba(8, 14, 24, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet-body { position: relative; padding: 36px 28px 28px; display: grid; gap: 16px; justify-items: center; text-align: center; }
.sheet-body h2 { margin: 0; }
.sheet-body .lede { font-size: 1rem; }
.sheet-body .qr { width: min(220px, 70%); }
.sheet-body .button { width: 100%; }
.sheet .close { all: unset; box-sizing: border-box; position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center;
  cursor: pointer; color: var(--ink-soft); background: color-mix(in srgb, var(--ink) 8%, transparent); }
.sheet .close svg { width: 13px; height: 13px; }
.sheet .close:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { dialog.sheet[open] { animation: none; } }