/* ClamNotes website: every page has one background, white or black, from top to bottom (the
   owner's word, 20 October 2026: no two-tone bands between sections); only cards stand out.
   Every page (the home page, the guides, the legal pages, the shared note, the
   welcome page and the Worker's pages). The theme follows the system until the visitor picks one
   with the toggle; the choice is set as data-theme on <html> before the first paint (theme.js). */

:root {
  --red: rgb(196, 31, 48);
  /* Red behind white text: the dark mode's brighter red is too light for it (WCAG AA). */
  --red-fill: rgb(196, 31, 48);
  --bg: #ffffff;
  --bg-2: #f5f5f7;
  --surface: #ffffff;
  --fill: #f5f5f7;
  --text: #1d1d1f;
  --text-2: rgba(60, 60, 67, 0.76);
  --text-3: rgba(60, 60, 67, 0.5);
  --separator: rgba(60, 60, 67, 0.16);
  --hairline: rgba(0, 0, 0, 0.07);
  --glass: rgba(255, 255, 255, 0.72);
  /* The app's own colours (iOS/ClamNotes/Components.swift and iOS's system colours), for the phone. */
  --app-red: rgb(196, 31, 48);
  --app-badge: rgb(196, 31, 48);
  --app-bg: #f2f2f7;
  --app-card: #ffffff;
  --app-text: #000000;
  --app-text-2: rgba(60, 60, 67, 0.6);
  --app-text-3: rgba(60, 60, 67, 0.3);
  --app-ring: rgb(199, 199, 199);
  --app-fill: rgba(0, 0, 0, 0.06);
  --app-glass: rgba(255, 255, 255, 0.82);
  --app-glass-edge: rgba(0, 0, 0, 0.05);
  --app-glass-light: rgba(255, 255, 255, 0.9);
  --app-glass-shadow: rgba(0, 0, 0, 0.08);
  --app-bar: rgba(255, 255, 255, 0.7);
  --app-pill: rgba(0, 0, 0, 0.07);
  --app-track: rgba(118, 118, 128, 0.12);
  --app-thumb: #ffffff;
  --green: rgb(36, 138, 61);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 12px 32px -12px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, 0.04), 0 40px 80px -30px rgba(0, 0, 0, 0.28);
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  color-scheme: light;
}

:root[data-theme="dark"] {
  --red: rgb(255, 69, 59);
  --red-fill: rgb(215, 0, 21);
  --bg: #000000;
  --bg-2: #0e0e0f;
  --surface: #161617;
  --fill: #232325;
  --text: #f5f5f7;
  --text-2: rgba(235, 235, 245, 0.66);
  --text-3: rgba(235, 235, 245, 0.42);
  --separator: rgba(84, 84, 88, 0.6);
  --hairline: rgba(255, 255, 255, 0.09);
  --glass: rgba(0, 0, 0, 0.66);
  --app-red: rgb(255, 69, 59);
  --app-badge: rgb(214, 41, 36);
  --app-bg: #000000;
  --app-card: rgb(22, 22, 22);
  --app-text: #ffffff;
  --app-text-2: rgba(235, 235, 245, 0.6);
  --app-text-3: rgba(235, 235, 245, 0.3);
  --app-ring: rgba(255, 255, 255, 0.9);
  --app-fill: rgba(255, 255, 255, 0.06);
  --app-glass: rgba(255, 255, 255, 0.1);
  --app-glass-edge: rgba(255, 255, 255, 0.07);
  --app-glass-light: rgba(255, 255, 255, 0.2);
  --app-glass-shadow: rgba(0, 0, 0, 0.4);
  --app-bar: rgba(30, 30, 32, 0.64);
  --app-pill: rgba(255, 255, 255, 0.13);
  --app-track: rgba(255, 255, 255, 0.1);
  --app-thumb: rgba(255, 255, 255, 0.18);
  --green: rgb(48, 209, 88);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
  color-scheme: dark;
}

/* Without JavaScript the system decides. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --red: rgb(255, 69, 59);
    --red-fill: rgb(215, 0, 21);
    --bg: #000000;
    --bg-2: #0e0e0f;
    --surface: #161617;
  --fill: #232325;
    --text: #f5f5f7;
    --text-2: rgba(235, 235, 245, 0.66);
    --text-3: rgba(235, 235, 245, 0.42);
    --separator: rgba(84, 84, 88, 0.6);
    --hairline: rgba(255, 255, 255, 0.09);
    --glass: rgba(0, 0, 0, 0.66);
    --app-red: rgb(255, 69, 59);
    --app-badge: rgb(214, 41, 36);
    --app-bg: #000000;
    --app-card: rgb(22, 22, 22);
    --app-text: #ffffff;
    --app-text-2: rgba(235, 235, 245, 0.6);
    --app-text-3: rgba(235, 235, 245, 0.3);
    --app-ring: rgba(255, 255, 255, 0.9);
    --app-fill: rgba(255, 255, 255, 0.06);
    --app-glass: rgba(255, 255, 255, 0.1);
    --app-glass-edge: rgba(255, 255, 255, 0.07);
    --app-glass-light: rgba(255, 255, 255, 0.2);
    --app-glass-shadow: rgba(0, 0, 0, 0.4);
    --app-bar: rgba(30, 30, 32, 0.64);
    --app-pill: rgba(255, 255, 255, 0.13);
    --app-track: rgba(255, 255, 255, 0.1);
    --app-thumb: rgba(255, 255, 255, 0.18);
    --green: rgb(48, 209, 88);
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.5), 0 12px 32px -12px rgba(0, 0, 0, 0.7);
    --shadow-lg: 0 40px 90px -30px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(255, 255, 255, 0.06);
    color-scheme: dark;
  }
}

/* Light and dark images. */
.on-dark { display: none !important; }
:root[data-theme="dark"] .on-light { display: none !important; }
:root[data-theme="dark"] .on-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .on-light { display: none !important; }
  :root:not([data-theme]) .on-dark { display: block !important; }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 72px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Clip, not hide, so the sticky top bar still sticks. */
@supports (overflow: clip) { body { overflow-x: clip; } }

a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: 999px; background: var(--text); color: var(--bg); font-size: 15px; font-weight: 600; }
.skip:focus { top: 12px; text-decoration: none; }

/* Top bar: sticky, clear at the top, frosted glass once the page scrolls (script.js adds .scrolled). */

.nav { position: sticky; top: 0; z-index: 50; transition: background-color 0.3s ease, box-shadow 0.3s ease, -webkit-backdrop-filter 0.3s ease, backdrop-filter 0.3s ease; }
.nav.scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  box-shadow: 0 1px 0 var(--hairline);
}
.nav-inner { max-width: 1120px; height: 60px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; gap: 28px; }
.brand { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; display: block; }
.nav-links { display: flex; gap: 28px; margin-left: auto; font-size: 14px; }
.nav-links a { color: var(--text-2); white-space: nowrap; transition: color 0.2s ease; }
.nav-links a:hover { color: var(--text); text-decoration: none; }
.theme-toggle {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: none; color: var(--text); cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
.theme-toggle:hover { color: var(--red); background: color-mix(in srgb, var(--text) 6%, transparent); }
html:not(.js) .theme-toggle { display: none; }
.nav-cta {
  flex: none; padding: 7px 15px; border-radius: 999px; background: var(--red-fill); color: #fff;
  font-size: 14px; font-weight: 600; transition: transform 0.25s var(--ease), box-shadow 0.25s ease;
}
.nav-cta:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--red) 70%, transparent); }
.nav-links + .theme-toggle { margin-left: -8px; }
@media (max-width: 760px) {
  .nav-inner { gap: 10px; padding: 0 16px; }
  .nav-links { display: none; }
  .theme-toggle { margin-left: auto !important; }
}
/* The narrowest windows (a phone's split view, a small pane): the bar's three parts stay on one line. */
@media (max-width: 360px) {
  .nav-inner { gap: 6px; padding: 0 12px; }
  .brand { gap: 8px; font-size: 16px; }
  .nav-cta { padding: 7px 12px; font-size: 13px; }
}
/* Narrower still, the page follows the system's look and the switch steps aside. */
@media (max-width: 320px) {
  .theme-toggle { display: none; }
  .nav-cta { margin-left: auto; }
}

/* Type */

h1, h2, h3, h4 { margin: 0; color: var(--text); }
h1 { font-size: clamp(46px, 7.2vw, 92px); font-weight: 700; letter-spacing: -0.045em; line-height: 1.02; }
h2 { font-size: clamp(38px, 5.4vw, 68px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.04; }
h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.17; }
p { margin: 0; }
.eyebrow { color: var(--red); font-weight: 600; font-size: 15px; letter-spacing: 0; margin-bottom: 14px; }
.lead { color: var(--text-2); font-size: clamp(19px, 1.9vw, 23px); line-height: 1.42; letter-spacing: -0.014em; margin-top: 22px; max-width: 600px; }
.center .lead { margin-left: auto; margin-right: auto; }
.small { color: var(--text-2); font-size: 15px; }
.accent { color: var(--red); }

section { padding: 120px 0; }
.section-head { margin-bottom: 64px; }
@media (max-width: 800px) { section { padding: 80px 0; } .section-head { margin-bottom: 44px; } }

/* Buttons. `.button` is the pill of every page (the welcome page's and the Worker's too);
   `.primary` is red, `.outline` a ring for the second of two. The TestFlight link is text, not a
   badge: Apple allows only its official App Store badges. */

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px; background: var(--text); color: var(--bg);
  font-size: 17px; font-weight: 600; letter-spacing: -0.01em;
  transition: transform 0.25s var(--ease), box-shadow 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}
.button:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.35); }
.button:active { transform: translateY(0) scale(0.98); }
.button.primary { background: var(--red-fill); color: #fff; }
.button.primary:hover { box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--red) 75%, transparent); }
.button.outline { padding: 12px 23px; border: 1px solid var(--separator); background: none; color: var(--text); }
.button.outline:hover { border-color: var(--text); box-shadow: none; }
.button svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Hero */

.hero { padding: 64px 0 120px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 72px; align-items: center; }
.hero-app { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.hero-app img { width: 44px; height: 44px; border-radius: 10px; box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.3); }
.hero .lead { max-width: 540px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 36px; }
.hero-meta { margin-top: 22px; color: var(--text-3); font-size: 14px; font-weight: 500; }
.hero-visual { position: relative; display: grid; justify-items: center; gap: 18px; }
.hero-glow {
  position: absolute; inset: -18% -40%; z-index: -1; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--red) 16%, transparent), transparent 72%);
}
.replay {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--separator);
  border-radius: 999px; background: var(--bg); color: var(--text-2); font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
  transition: color 0.2s ease, border-color 0.2s ease, opacity 0.4s ease;
}
.replay:hover { color: var(--text); border-color: var(--text-2); }
.replay svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.replay[hidden] { display: none; }
@media (max-width: 860px) {
  .hero { padding: 32px 0 88px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; text-align: center; justify-items: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
}
@media (max-width: 420px) { .hero-actions .button { width: 100%; } }

/* The phone: the app itself, drawn in HTML from its SwiftUI views (iOS/ClamNotes: ClamNotesApp's
   RootView, CreateView, NoteDetailView, NoteBody, Components). The screen is an iPhone 17 Pro's,
   402 by 874 points, and --pt is one of its points, so every size here is the app's own: fonts at
   the default text size (largeTitle 34, title3 20, body 17, subheadline 15, footnote 13, caption 12),
   the Card's 18 padding and 24 corners, the record button's 92 ring and 74 dot. The colours are the
   app's (--app-*, from Components.swift), and the glass is Liquid Glass's look, flat but for the tab
   bar's blur. Only opacity and transforms move, with the app's springs (Motion.swift) as linear(). */

.phone {
  position: relative; width: min(316px, 74vw); aspect-ratio: 316 / 666; padding: 2.8%;
  border-radius: 15.6% / 7.4%; background: linear-gradient(150deg, #3a3a3c, #121214 40%, #0a0a0b);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.08), var(--shadow-lg);
  container-type: inline-size;
}
.screen {
  --pt: calc(100cqw / 402);
  /* The app's animations: RecordControls' spring (0.42, 0.72), Motion.morph (0.42, 0.8),
     Motion.pop (0.34, 0.78), PressableStyle (0.25, 0.7) and .smooth (0.35). */
  --spring: linear(0, 0.025, 0.09, 0.18, 0.283, 0.39, 0.496, 0.595, 0.685, 0.763, 0.83, 0.886, 0.931, 0.966, 0.993, 1.012, 1.025, 1.033, 1.037, 1.038, 1.037, 1.035, 1.031, 1.027, 1.023, 1.019, 1.015, 1.012, 1.009, 1.006, 1.004, 1.003, 1);
  --morph: linear(0, 0.028, 0.099, 0.194, 0.3, 0.407, 0.511, 0.605, 0.689, 0.761, 0.822, 0.872, 0.912, 0.943, 0.967, 0.984, 0.997, 1.005, 1.011, 1.014, 1.015, 1.015, 1.014, 1.013, 1.011, 1.01, 1.008, 1.007, 1.005, 1.004, 1.003, 1.002, 1);
  --pop: linear(0, 0.028, 0.098, 0.193, 0.299, 0.407, 0.512, 0.608, 0.693, 0.766, 0.828, 0.879, 0.92, 0.951, 0.975, 0.992, 1.005, 1.012, 1.017, 1.019, 1.02, 1.019, 1.018, 1.016, 1.014, 1.011, 1.009, 1.008, 1.006, 1.004, 1.003, 1.002, 1);
  --press: linear(0, 0.038, 0.13, 0.252, 0.386, 0.518, 0.639, 0.745, 0.833, 0.903, 0.956, 0.994, 1.02, 1.036, 1.044, 1.046, 1.044, 1.04, 1.034, 1.028, 1.022, 1.016, 1.012, 1.008, 1.004, 1.002, 1, 0.999, 0.998, 0.998, 0.998, 0.998, 1);
  --smooth: linear(0, 0.03, 0.102, 0.195, 0.293, 0.391, 0.481, 0.563, 0.635, 0.698, 0.751, 0.796, 0.834, 0.865, 0.891, 0.912, 0.929, 0.943, 0.954, 0.964, 0.971, 0.977, 0.982, 0.985, 0.988, 0.991, 0.993, 0.994, 0.996, 0.996, 0.997, 0.998, 1);
  --glass-edge: inset 0 0 0 calc(0.6 * var(--pt)) var(--app-glass-edge), inset 0 calc(0.8 * var(--pt)) 0 var(--app-glass-light), 0 calc(2 * var(--pt)) calc(10 * var(--pt)) var(--app-glass-shadow);
  position: relative; height: 100%; overflow: hidden; border-radius: calc(55 * var(--pt));
  background: var(--app-bg); color: var(--app-text);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", sans-serif;
  font-size: calc(17 * var(--pt)); line-height: calc(22 * var(--pt)); text-align: left;
}
.screen p { margin: 0; }
.screen svg { display: block; flex: none; overflow: visible; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.screen .f { fill: currentColor; stroke: none; }
.screen .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.glass { background: var(--app-glass); box-shadow: var(--glass-edge); }

/* The status bar and the Dynamic Island. */
.sb { position: absolute; inset: 0 0 auto; height: calc(59 * var(--pt)); font-size: calc(17 * var(--pt)); font-weight: 600; z-index: 4; }
.sb-time { position: absolute; left: 0; width: calc(138 * var(--pt)); top: calc(18.5 * var(--pt)); text-align: center; letter-spacing: -0.01em; }
.sb-island { position: absolute; left: calc(138 * var(--pt)); top: calc(11 * var(--pt)); width: calc(126 * var(--pt)); height: calc(37 * var(--pt)); border-radius: 99px; background: #000; }
.sb-icons { position: absolute; left: calc(264 * var(--pt)); width: calc(138 * var(--pt)); top: calc(23.5 * var(--pt)); display: flex; justify-content: center; gap: calc(6 * var(--pt)); }
.sb-icons svg { height: calc(12 * var(--pt)); width: auto; }
.sb-icons svg:nth-child(1) { width: calc(18 * var(--pt)); }
.sb-icons svg:nth-child(2) { width: calc(16 * var(--pt)); }
.sb-icons svg:nth-child(3) { width: calc(27 * var(--pt)); stroke-width: 1.1; }
.sb-icons .dim { opacity: 0.4; }

/* Each tab's screen; the Create tab and the note cross over as a tab switch does (Motion.swap). */
.app { position: absolute; inset: 0; transition: opacity 0.3s ease; }
.app-note, .demo[data-step="note"] .app-create { opacity: 0; }
.demo[data-step="note"] .app-note { opacity: 1; }

/* The Create tab: the large title, the subject menu, then the clock, the sound, the button and
   From Files in the middle, the line heard at the top and the status line between. */
.large-title { position: absolute; left: calc(20 * var(--pt)); top: calc(107 * var(--pt)); font-size: calc(34 * var(--pt)); line-height: calc(41 * var(--pt)); font-weight: 700; }
.subject {
  position: absolute; left: calc(20 * var(--pt)); top: calc(162 * var(--pt)); height: calc(36 * var(--pt)); padding: 0 calc(14 * var(--pt));
  display: flex; align-items: center; gap: calc(8 * var(--pt)); border-radius: 99px; font-size: calc(15 * var(--pt)); font-weight: 600;
  transition: opacity 0.35s ease;
}
.subject .sym { width: calc(20 * var(--pt)); height: calc(17 * var(--pt)); color: var(--app-red); stroke-width: 2.1; }
.subject span { min-width: calc(97 * var(--pt)); }
.subject .updown { width: calc(11 * var(--pt)); height: calc(14 * var(--pt)); color: var(--app-text-2); stroke-width: 2.6; }

.live {
  position: absolute; left: calc(22 * var(--pt)); right: calc(22 * var(--pt)); top: calc(210 * var(--pt)); height: calc(32 * var(--pt));
  padding: 0 calc(12 * var(--pt)); display: grid; grid-template-columns: calc(6 * var(--pt)) minmax(0, 1fr); column-gap: calc(8 * var(--pt)); align-items: center;
  border-radius: 99px; background: var(--app-fill); font-size: calc(13 * var(--pt)); line-height: calc(18 * var(--pt));
  opacity: 0; transition: opacity 0.35s ease;
}
.live i { width: calc(6 * var(--pt)); height: calc(6 * var(--pt)); border-radius: 50%; background: var(--app-red); }
.live span { grid-area: 1 / 2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; opacity: 0; color: var(--app-text); transition: opacity 0.35s ease; }
.live span.on { opacity: 0.85; }

.status-line {
  position: absolute; left: calc(22 * var(--pt)); right: calc(22 * var(--pt)); top: calc(205 * var(--pt));
  display: flex; align-items: center; gap: calc(10 * var(--pt)); padding: calc(10 * var(--pt)) calc(12 * var(--pt));
  border-radius: calc(14 * var(--pt)); background: var(--app-fill);
  opacity: 0; transform: translateY(calc(-16 * var(--pt))); transition: opacity 0.3s ease, transform 0.41s var(--smooth);
}
.status-line .sym { width: calc(17 * var(--pt)); height: calc(17 * var(--pt)); color: var(--app-red); }
.status-line .sym .knock, .status-line .knock { stroke: var(--app-bg); stroke-width: 2.6; }
.status-text { flex: 1; min-width: 0; display: grid; gap: calc(2 * var(--pt)); }
.status-text b { font-size: calc(13 * var(--pt)); line-height: calc(18 * var(--pt)); font-weight: 600; }
.status-text small { font-size: calc(12 * var(--pt)); line-height: calc(16 * var(--pt)); color: var(--app-text-2); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.open-note { flex: none; height: calc(28 * var(--pt)); padding: 0 calc(12 * var(--pt)); border-radius: 99px; font-size: calc(12 * var(--pt)); line-height: calc(28 * var(--pt)); font-weight: 600; transition: transform 0.37s var(--press); }

.middle { position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); top: calc(267 * var(--pt)); }
.clock {
  display: grid; height: calc(76 * var(--pt)); place-items: center;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: calc(64 * var(--pt)); line-height: calc(76 * var(--pt)); font-weight: 300; font-variant-numeric: tabular-nums;
}
.clock span { grid-area: 1 / 1; transition: opacity 0.35s ease; }
.clock-run { opacity: 0; }
.clock-idle { opacity: 0.25; }

/* The sound: 44 levels as rounded bars, newest on the right, sliding left as LevelMeter's do;
   older bars fade. Still, they are grey dots. script.js draws the bars. */
.meter { position: relative; height: calc(64 * var(--pt)); margin: calc(32 * var(--pt)) calc(4 * var(--pt)); }
.meter-idle, .meter-run { position: absolute; inset: 0; transition: opacity 0.35s ease; }
.meter-idle {
  background: radial-gradient(circle closest-side, color-mix(in srgb, var(--app-text) 14%, transparent) 96%, transparent 100%)
    calc(-1.5 * var(--pt)) 50% / calc(8.114 * var(--pt)) calc(5.114 * var(--pt)) repeat-x;
}
.meter-run { overflow: hidden; opacity: 0; }
.meter-run::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in srgb, var(--app-bg) 65%, transparent), transparent); }
.meter-track { position: absolute; left: 0; top: 0; bottom: 0; display: flex; align-items: center; will-change: transform; }
.meter-track i { flex: none; width: calc(5.114 * var(--pt)); margin-right: calc(3 * var(--pt)); min-height: calc(5.114 * var(--pt)); border-radius: 99px; background: var(--app-red); }
.demo[data-step="rec"] .meter-track, .demo[data-step="finishing"] .meter-track { animation: levels 3.75s linear infinite; }
@keyframes levels { to { transform: translateX(calc(-357 * var(--pt))); } }

.controls { position: relative; height: calc(92 * var(--pt)); }
.record { position: absolute; left: calc(50% - 46 * var(--pt)); top: 0; width: calc(92 * var(--pt)); height: calc(92 * var(--pt)); transition: transform 0.37s var(--press); }
.record > * { position: absolute; }
.ring { inset: 0; border-radius: 50%; border: calc(4 * var(--pt)) solid var(--app-ring); background: var(--app-bg); transition: opacity 0.35s ease; }
.dot, .square { background: var(--app-red); transition: transform 0.51s var(--spring), opacity 0.25s ease; }
.dot { inset: calc(9 * var(--pt)); border-radius: 50%; box-shadow: 0 0 calc(15 * var(--pt)) color-mix(in srgb, var(--app-red) 35%, transparent); }
.square {
  left: calc(28 * var(--pt)); top: calc(28 * var(--pt)); width: calc(36 * var(--pt)); height: calc(36 * var(--pt)); border-radius: calc(9 * var(--pt));
  box-shadow: 0 0 calc(27 * var(--pt)) color-mix(in srgb, var(--app-red) 60%, transparent); opacity: 0; transform: scale(2);
}
.spinner { left: calc(30 * var(--pt)); top: calc(30 * var(--pt)); width: calc(32 * var(--pt)); height: calc(32 * var(--pt)); stroke-width: 3; opacity: 0; transition: opacity 0.3s ease; }
.demo[data-step="finishing"] .spinner, .demo[data-step="writing"] .spinner { animation: spin 0.8s steps(8) infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.side {
  position: absolute; left: calc(50% - 29 * var(--pt)); top: calc(17 * var(--pt)); width: calc(58 * var(--pt)); height: calc(58 * var(--pt));
  display: grid; place-items: center; border-radius: 50%; opacity: 0; transform: scale(0.4);
  transition: transform 0.51s var(--spring), opacity 0.3s ease;
}
.side svg { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); stroke-width: 2.2; }
.side-discard { color: color-mix(in srgb, var(--app-text) 85%, transparent); }

.choices { position: relative; height: calc(52 * var(--pt)); margin-top: calc(36 * var(--pt)); }
.from-files, .round { position: absolute; top: 0; height: calc(52 * var(--pt)); border-radius: 99px; transition: transform 0.55s var(--morph), opacity 0.3s ease; }
.from-files {
  left: 0; right: 0; width: max-content; margin: 0 auto; padding: 0 calc(20 * var(--pt));
  display: flex; align-items: center; gap: calc(7 * var(--pt)); font-size: calc(15 * var(--pt)); font-weight: 600;
}
.from-files svg { width: calc(19 * var(--pt)); height: calc(19 * var(--pt)); stroke-width: 2; }
.round { width: calc(52 * var(--pt)); display: grid; place-items: center; opacity: 0; transform: scale(0.6); }
.round svg { width: calc(22 * var(--pt)); height: calc(22 * var(--pt)); stroke-width: 2.2; }
.round-camera { left: calc(50% - 59 * var(--pt)); }
.round-files { left: calc(50% + 7 * var(--pt)); }

.caption { display: grid; height: calc(64 * var(--pt)); margin-top: calc(8 * var(--pt)); text-align: center; font-size: calc(15 * var(--pt)); line-height: calc(20 * var(--pt)); color: var(--app-text-2); }
.caption > span { grid-area: 1 / 1; opacity: 0; transition: opacity 0.35s ease; }
.caption small { display: block; margin-top: calc(4 * var(--pt)); font-size: calc(13 * var(--pt)); line-height: calc(18 * var(--pt)); color: var(--app-text-3); }

/* While recording: the subject dims, the line heard and the clock run, the sound moves, the red
   dot becomes a square, Discard and Pause slide out, and From Files becomes the camera and Add
   Files. After Stop the note is written (the button turns), then Note ready. */
.demo[data-step="rec"] .subject, .demo[data-step="finishing"] .subject, .demo[data-step="writing"] .subject { opacity: 0.4; }
.demo[data-step="rec"] .live { opacity: 1; }
.demo[data-step="rec"] .clock-run, .demo[data-step="rec"] .meter-run { opacity: 1; }
.demo[data-step="rec"] .clock-idle, .demo[data-step="rec"] .meter-idle { opacity: 0; }
.demo[data-step="rec"] .side { opacity: 1; transform: translateX(calc(-104 * var(--pt))); }
.demo[data-step="rec"] .side-pause { transform: translateX(calc(104 * var(--pt))); }
.demo[data-step="rec"] .dot { opacity: 0; transform: scale(0.49); }
.demo[data-step="rec"] .square { opacity: 1; transform: none; }
.demo.press-stop .record { transform: scale(0.95); }
.demo[data-step="finishing"] .ring, .demo[data-step="writing"] .ring { opacity: 0.3; }
.demo[data-step="finishing"] .dot, .demo[data-step="writing"] .dot { opacity: 0; transform: scale(0.6); }
.demo[data-step="finishing"] .square, .demo[data-step="writing"] .square { opacity: 0; transform: scale(0.6); }
.demo[data-step="finishing"] .spinner, .demo[data-step="writing"] .spinner { opacity: 1; }
.demo[data-step="rec"] .from-files { opacity: 0; transform: scale(0.7); }
.demo[data-step="finishing"] .from-files, .demo[data-step="writing"] .from-files { opacity: 0.4; }
.demo[data-step="rec"] .round { opacity: 1; transform: none; }
.demo[data-step="rec"] .cap-rec, .demo[data-step="finishing"] .cap-finishing, .demo[data-step="writing"] .cap-writing,
.demo[data-step="ready"] .cap-ready, .demo[data-step="note"] .cap-ready { opacity: 1; }
.demo[data-step="ready"] .status-line, .demo[data-step="note"] .status-line { opacity: 1; transform: none; }
.demo.press-open .open-note { transform: scale(1.08); }

/* The note, as the Notes tab shows it (NoteDetailView): the bar's back button, Notes and
   Visuals, and More; the title and its line, the export buttons and the cards (NoteBody). */
.note-bar { position: absolute; left: calc(16 * var(--pt)); right: calc(16 * var(--pt)); top: calc(62 * var(--pt)); height: calc(54 * var(--pt)); display: flex; align-items: center; justify-content: space-between; z-index: 2; }
.bar-button { display: grid; place-items: center; width: calc(44 * var(--pt)); height: calc(44 * var(--pt)); border-radius: 50%; }
.bar-button svg { width: calc(20 * var(--pt)); height: calc(20 * var(--pt)); stroke-width: 2.4; }
.part-switch { display: flex; height: calc(38 * var(--pt)); padding: calc(3 * var(--pt)); border-radius: 99px; background: var(--app-track); box-shadow: var(--app-track-edge, none); }
.part { height: calc(32 * var(--pt)); padding: 0 calc(15 * var(--pt)); border-radius: 99px; font-size: calc(15 * var(--pt)); line-height: calc(32 * var(--pt)); font-weight: 600; color: var(--app-text-2); }
.part.on { background: var(--app-thumb); color: var(--app-text); box-shadow: 0 calc(1 * var(--pt)) calc(4 * var(--pt)) rgba(0, 0, 0, 0.1); }
.note-page { position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); top: calc(122 * var(--pt)); display: grid; gap: calc(18 * var(--pt)); }
.note-page > * { opacity: 0; transform: translateY(calc(10 * var(--pt))); transition: opacity 0.35s ease, transform 0.41s var(--smooth); }
.demo[data-step="note"] .note-page > * { opacity: 1; transform: none; }
.demo[data-step="note"] .note-page > :nth-child(2) { transition-delay: 0.05s; }
.demo[data-step="note"] .note-page > :nth-child(3) { transition-delay: 0.1s; }
.demo[data-step="note"] .note-page > :nth-child(4) { transition-delay: 0.15s; }
.demo[data-step="note"] .note-page > :nth-child(5) { transition-delay: 0.2s; }
.demo[data-step="note"] .note-page > :nth-child(6) { transition-delay: 0.25s; }
.note-head { display: grid; gap: calc(8 * var(--pt)); padding-bottom: calc(4 * var(--pt)); }
.note-title { font-size: calc(34 * var(--pt)); line-height: calc(41 * var(--pt)); font-weight: 700; }
.note-byline { font-size: calc(15 * var(--pt)); line-height: calc(20 * var(--pt)); color: var(--app-text-2); }
.exports { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(10 * var(--pt)); }
.export {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(6 * var(--pt));
  height: calc(62 * var(--pt)); border-radius: 99px; font-size: calc(12 * var(--pt)); line-height: calc(16 * var(--pt)); font-weight: 500; white-space: nowrap;
}
.export svg { width: calc(21 * var(--pt)); height: calc(21 * var(--pt)); stroke-width: 1.7; }
.export.resume { color: var(--app-red); }
.note-card { padding: calc(18 * var(--pt)); border-radius: calc(24 * var(--pt)); background: var(--app-card); box-shadow: inset 0 0 0 calc(1 * var(--pt)) var(--app-fill); }
.note-heading {
  display: flex; align-items: center; gap: calc(6 * var(--pt)); margin-bottom: calc(8 * var(--pt)) !important;
  font-size: calc(12 * var(--pt)); line-height: calc(16 * var(--pt)); font-weight: 600; text-transform: uppercase; color: var(--app-red);
}
.note-heading svg { width: calc(14 * var(--pt)); height: calc(14 * var(--pt)); stroke-width: 2.2; }
.note-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(8 * var(--pt)); }
.note-card li { position: relative; }
.note-card li::before { content: none; }
.note-section { margin-bottom: calc(10 * var(--pt)) !important; font-size: calc(20 * var(--pt)); line-height: calc(25 * var(--pt)); font-weight: 600; }
.note-points li { padding-left: calc(18 * var(--pt)); }
.note-points li::before { content: ""; position: absolute; left: calc(1.5 * var(--pt)); top: calc(8 * var(--pt)); width: calc(5 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 50%; background: color-mix(in srgb, var(--app-red) 80%, transparent); }
.note-card .note-heading + ul { margin-top: calc(2 * var(--pt)); }
.note-todo li { padding-left: calc(23 * var(--pt)); }
.note-todo svg { position: absolute; left: 0; top: calc(5 * var(--pt)); width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); color: var(--app-red); stroke-width: 2.1; }
.note-ai { display: flex; align-items: center; gap: calc(6 * var(--pt)); padding: 0 calc(4 * var(--pt)); font-size: calc(12 * var(--pt)); line-height: calc(16 * var(--pt)); color: var(--app-text-2); }
.note-ai svg { width: calc(13 * var(--pt)); height: calc(13 * var(--pt)); }

/* The tab bar: Create, Notes and Study in one Liquid Glass bar, Settings in its own glass circle
   (RootView). The selection glides; a red dot on Notes says a note was written. */
.tabbar { position: absolute; left: calc(20 * var(--pt)); right: calc(20 * var(--pt)); bottom: calc(21 * var(--pt)); height: calc(62 * var(--pt)); display: flex; gap: calc(12 * var(--pt)); z-index: 3; }
.tabs, .tab-search {
  border-radius: 99px; background: var(--app-bar); box-shadow: var(--glass-edge);
  -webkit-backdrop-filter: blur(10px) saturate(1.8); backdrop-filter: blur(10px) saturate(1.8);
}
.tabs { position: relative; flex: 1; display: flex; padding: calc(4 * var(--pt)); }
.tab-pill { position: absolute; left: calc(4 * var(--pt)); top: calc(4 * var(--pt)); bottom: calc(4 * var(--pt)); width: calc((100% - 8 * var(--pt)) / 3); border-radius: 99px; background: var(--app-pill); transition: transform 0.55s var(--morph); }
.demo[data-step="note"] .tab-pill { transform: translateX(100%); }
.tab {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(1 * var(--pt));
  font-size: calc(10 * var(--pt)); line-height: calc(12 * var(--pt)); font-weight: 600; transition: color 0.3s ease;
}
.tab svg { width: calc(25 * var(--pt)); height: calc(25 * var(--pt)); stroke-width: 1.7; }
.demo:not([data-step="note"]) .tab-create, .demo[data-step="note"] .tab-notes { color: var(--app-red); }
.tab-badge { position: absolute; top: calc(5 * var(--pt)); left: calc(50% + 8 * var(--pt)); width: calc(11 * var(--pt)); height: calc(11 * var(--pt)); border-radius: 50%; background: var(--app-badge); transform: scale(0); transition: transform 0.44s var(--pop); }
.demo[data-step="ready"] .tab-badge { transform: none; }
.tab-search { flex: none; display: grid; place-items: center; width: calc(62 * var(--pt)); }
.tab-search svg { width: calc(26 * var(--pt)); height: calc(26 * var(--pt)); stroke-width: 1.6; }
.home-bar { position: absolute; left: calc(50% - 70 * var(--pt)); bottom: calc(8 * var(--pt)); width: calc(140 * var(--pt)); height: calc(5 * var(--pt)); border-radius: 99px; background: var(--app-text); z-index: 3; }

/* Back to the start for Play again, without the way back showing. */
.demo.instant, .demo.instant * { transition: none !important; }

/* Feature moments: text and a visual side by side; .flip puts the visual first. */

.feature { padding: 90px 0; }
#interactive { padding-top: 0; }
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 96px; align-items: center; }
.flip .feature-visual { order: -1; }
.feature-text { max-width: 520px; }
.ticks { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 14px; }
.ticks li { position: relative; padding-left: 32px; font-size: 18px; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 0.18em; width: 20px; height: 20px; border-radius: 50%; background: color-mix(in srgb, var(--red) 13%, transparent); }
.ticks li::after { content: ""; position: absolute; left: 7px; top: calc(0.18em + 4.5px); width: 5px; height: 9px; border: solid var(--red); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.feature-fine { margin-top: 18px; color: var(--text-3); font-size: 15px; }
.chips { list-style: none; margin: 32px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { padding: 6px 14px; border-radius: 999px; background: var(--bg-2); font-size: 15px; font-weight: 500; transition: background-color 0.25s ease, color 0.25s ease, transform 0.25s var(--ease); }
.chips li:hover { background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); transform: translateY(-2px); }
@media (max-width: 900px) {
  .feature-grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
  .flip .feature-visual { order: 0; }
  .feature-text { max-width: 600px; }
}

/* The note's cards as the app draws them (Card and Heading in the iOS app). */

.card-head { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; color: var(--red); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; }
.card-head svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.todo, .points { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.todo li, .points li { position: relative; padding-left: 24px; }
.todo li::before { content: ""; position: absolute; left: 0; top: 0.3em; width: 13px; height: 13px; border: 1.5px solid var(--red); border-radius: 50%; box-sizing: border-box; }
.points li::before { content: ""; position: absolute; left: 2px; top: 0.55em; width: 5px; height: 5px; border-radius: 50%; background: var(--red); }

.cards-stack { position: relative; min-height: 440px; }
.float-card {
  position: absolute; width: min(360px, 88%); padding: 22px 24px; border-radius: 26px;
  background: var(--surface); box-shadow: var(--shadow-lg); font-size: 16px; line-height: 1.45;
  border: 1px solid var(--hairline);
}
.float-card:nth-child(1) { top: 0; left: 0; z-index: 1; }
.float-card:nth-child(2) { top: 140px; right: 0; z-index: 2; }
.float-card:nth-child(3) { top: 290px; left: 6%; z-index: 3; }
.float-card.parts .card-head { color: var(--text); text-transform: none; font-size: 17px; letter-spacing: -0.01em; font-weight: 700; }
.part-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 8px; font-size: 15px; }
.part-list li { display: flex; justify-content: space-between; gap: 12px; padding: 9px 12px; border-radius: 12px; background: var(--fill); }
.part-list li span:last-child { color: var(--text-2); font-variant-numeric: tabular-nums; }
.part-list em { margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--red-fill); color: #fff; font-size: 12px; font-style: normal; font-weight: 600; }
.float-card .said { color: var(--text-3); margin-bottom: 6px; }
@media (max-width: 900px) {
  .cards-stack { min-height: 0; display: grid; gap: 16px; max-width: 460px; margin: 0 auto; width: 100%; }
  .float-card { position: relative; inset: auto !important; width: 100%; }
}

/* From files: the sheet. */

.sheet {
  max-width: 440px; margin: 0 auto; padding: 22px; border-radius: 30px; background: var(--surface);
  box-shadow: var(--shadow-lg); border: 1px solid var(--hairline);
}
.sheet-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-size: 17px; font-weight: 700; }
.sheet-subject { padding: 4px 12px; border-radius: 999px; background: var(--fill); font-size: 14px; font-weight: 600; }
.file-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.file-rows li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 16px; background: var(--fill); transition: transform 0.25s var(--ease); }
.file-rows li:hover { transform: translateX(4px); }
.file-rows b { display: block; font-size: 15px; font-weight: 600; }
.file-rows small { color: var(--text-2); font-size: 13px; }
.ficon { flex: none; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; font-size: 10px; font-weight: 800; letter-spacing: 0.02em; color: var(--red); background: color-mix(in srgb, var(--red) 13%, transparent); }
.ficon.ppt { color: rgb(201, 85, 20); background: rgba(232, 115, 40, 0.15); }
.ficon.aud { color: var(--text-2); background: color-mix(in srgb, var(--text) 9%, transparent); }
.ficon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
:root[data-theme="dark"] .ficon.ppt { color: rgb(255, 159, 10); }
.focus-field { margin-top: 14px; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--separator); min-height: 72px; }
.focus-label { display: block; color: var(--text-3); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
.typed { font-size: 15px; }
.typed.typing::after { content: ""; display: inline-block; width: 2px; height: 1.1em; margin-left: 1px; vertical-align: -0.18em; background: var(--red); animation: caret 0.9s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.sheet-button { display: block; margin-top: 14px; padding: 12px; border-radius: 999px; background: var(--red-fill); color: #fff; font-weight: 600; text-align: center; }

/* Study (Pro): a study set with its Note, Flashcards, Quiz and Test, each working. */

.study { max-width: 640px; margin: 0 auto; padding: 28px; border-radius: 34px; background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--hairline); }
.segmented { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); padding: 4px; margin-bottom: 26px; border-radius: 999px; background: var(--fill); }
.segmented button { position: relative; z-index: 1; padding: 9px 8px; border: 0; border-radius: 999px; background: none; color: var(--text-2); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: color 0.3s ease; }
.segmented button[aria-selected="true"] { color: #fff; }
.segmented button:hover:not([aria-selected="true"]) { color: var(--text); }
/* The thumb sits under the selected tab, which script.js measures (--seg-x, --seg-w): on a phone the tabs differ in width. */
.seg-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: var(--seg-w, calc((100% - 8px) / 5)); border-radius: 999px; background: var(--red-fill); box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--red) 70%, transparent); transform: translateX(var(--seg-x, 0)); transition: transform 0.5s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.5s cubic-bezier(0.3, 1.25, 0.5, 1); }
.study-panel { min-height: 270px; display: flex; flex-direction: column; gap: 14px; }
.study-panel[hidden] { display: none; }
html:not(.js) .segmented { display: none; }
html:not(.js) .study-panel + .study-panel { margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--separator); }
.study-panel.enter { animation: panel-in 0.45s var(--ease); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.study-hint { color: var(--text-3); font-size: 14px; text-align: center; }
.study-note-title { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.study-note-card { padding: 14px 16px; border-radius: 16px; background: var(--fill); font-size: 16px; line-height: 1.5; }
.study-note-card p { margin: 0; }
.study-note-head { color: var(--red); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; margin-bottom: 4px !important; }
.study-note-points { margin: 0; padding-left: 20px; display: grid; gap: 6px; font-size: 16px; line-height: 1.45; }
.study-note-points li::marker { color: var(--red); }
/* The Visuals tab: a timeline whose dates show what happened. */
.timeline { position: relative; list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.timeline::before { content: ""; position: absolute; top: 9px; left: 12.5%; right: 12.5%; height: 2px; border-radius: 1px; background: var(--separator); }
.timeline button {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 100%; padding: 30px 2px 4px;
  border: 0; border-radius: 12px; background: none; color: var(--text-2); font: inherit; font-size: 14px; line-height: 1.25;
  text-align: center; cursor: pointer; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent;
}
.timeline button::before {
  content: ""; position: absolute; top: 2px; left: 50%; width: 16px; height: 16px; margin-left: -8px; box-sizing: border-box;
  border: 2px solid var(--red); border-radius: 50%; background: var(--surface); transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1), background-color 0.2s ease;
}
.timeline button b { color: var(--text); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.timeline button:hover, .timeline button[aria-pressed="true"] { color: var(--text); }
.timeline button[aria-pressed="true"]::before { background: var(--red-fill); transform: scale(1.3); }
.timeline-detail { min-height: 4.5em; padding: 14px 16px; border-radius: 16px; background: var(--fill); font-size: 16px; line-height: 1.5; }
.timeline-detail.enter { animation: panel-in 0.35s var(--ease); }
.flashcard { display: block; width: 100%; min-height: 220px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: center; cursor: pointer; perspective: 1000px; -webkit-tap-highlight-color: transparent; border-radius: 22px; }
.flash-inner { position: relative; display: grid; min-height: 220px; transform-style: preserve-3d; transition: transform 0.7s cubic-bezier(0.3, 1.1, 0.4, 1); }
.flash-face {
  grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 24px;
  border-radius: 22px; background: var(--fill); backface-visibility: hidden; -webkit-backface-visibility: hidden;
  font-size: 28px; font-weight: 700; letter-spacing: -0.025em; line-height: 1.2;
}
.flash-face small { color: var(--red); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.flash-back { transform: rotateY(180deg); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.45; }
.flashcard.flipped .flash-inner { transform: rotateY(180deg); }
@media (hover: hover) { .flashcard:hover .flash-inner { transform: rotateY(-6deg); } .flashcard.flipped:hover .flash-inner { transform: rotateY(186deg); } }
.quiz-q { font-size: 20px; font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; }
.quiz-options { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.quiz-options button {
  width: 100%; padding: 14px 18px; border: 1px solid var(--separator); border-radius: 16px; background: none;
  color: var(--text); font: inherit; font-size: 16px; text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s var(--ease);
}
.quiz-options button:hover:not([disabled]) { border-color: var(--red); transform: translateX(4px); }
.quiz-options button[disabled] { cursor: default; }
.quiz-options .right { border-color: var(--green); background: color-mix(in srgb, var(--green) 13%, transparent); animation: pop 0.4s var(--ease); }
.quiz-options .wrong { border-color: var(--red); background: color-mix(in srgb, var(--red) 11%, transparent); animation: shake 0.4s ease; }
@keyframes pop { 50% { transform: scale(1.03); } }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.quiz-feedback { min-height: 1.5em; font-size: 15px; font-weight: 600; }
.quiz-feedback.right { color: var(--green); }
.quiz-feedback.wrong { color: var(--red); }
.points-pill { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--fill); color: var(--text-2); font-size: 13px; font-weight: 600; vertical-align: 2px; letter-spacing: 0; }
.test-answer { padding: 14px 16px; border-radius: 16px; background: var(--fill); font-size: 16px; line-height: 1.5; }
.check-button { align-self: flex-start; padding: 10px 20px; border: 0; border-radius: 999px; background: var(--text); color: var(--bg); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform 0.25s var(--ease), opacity 0.2s ease; }
.check-button:hover { transform: translateY(-1px); }
.check-button.busy { opacity: 0.6; cursor: progress; }
.check-button.busy::after { content: "…"; }
.check-button[hidden] { display: none; }
.test-mark { color: var(--text-2); font-size: 16px; line-height: 1.5; }
.test-mark:not([hidden]) { animation: panel-in 0.5s var(--ease); }
.test-mark .mark { display: inline-block; margin-right: 10px; padding: 2px 11px; border-radius: 999px; background: var(--red-fill); color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .study { padding: 18px; border-radius: 28px; } .segmented { grid-template-columns: repeat(5, auto); } .segmented button { padding: 9px 4px; font-size: 13px; } .timeline button { font-size: 13px; } .timeline button b { font-size: 14px; } .flash-face { font-size: 24px; } .quiz-q { font-size: 18px; } .study-note-title { font-size: 21px; } }
@media (max-width: 360px) { .study { padding: 14px; } .segmented button { padding: 9px 2px; font-size: 12px; } }

/* The visuals and the timetable: two tiles. */

.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tile { display: flex; flex-direction: column; padding: 40px; border-radius: 34px; background: var(--bg-2); overflow: hidden; }
.tile h3 { font-size: clamp(30px, 3.4vw, 40px); letter-spacing: -0.035em; line-height: 1.08; }
.tile > p:not(.eyebrow):not(.tile-fine) { margin-top: 14px; color: var(--text-2); font-size: 18px; line-height: 1.45; max-width: 460px; }
.tile-fine { margin-top: 14px; color: var(--text-3); font-size: 14px; }
@media (max-width: 900px) { .bento { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .tile { padding: 28px 22px; border-radius: 28px; } }

.i-graph-wrap { margin-top: auto; padding: 18px 18px 14px; border-radius: 22px; background: var(--surface); box-shadow: var(--shadow); transform: translateZ(0); }
.tile .i-graph-wrap, .tile .tt { margin-top: 32px; }
.i-graph { display: block; width: 100%; height: auto; }
.i-graph .grid path { stroke: var(--text-2); stroke-width: 1.2; opacity: 0.35; fill: none; }
.i-graph .grid .minor { opacity: 0.12; }
.i-graph .curve { stroke: var(--red); stroke-width: 3; fill: none; stroke-linecap: round; }
.i-graph .vertex { fill: var(--red); }
.i-slider { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 15px; color: var(--text-2); }
.i-slider span { min-width: 64px; font-variant-numeric: tabular-nums; }
.i-slider input { flex: 1; accent-color: var(--red); }

.tt { display: grid; gap: 12px; }
.tt-banner {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 20px; background: var(--surface);
  box-shadow: var(--shadow); font-size: 14px; line-height: 1.35;
}
.tt-banner img { flex: none; width: 34px; height: 34px; border-radius: 8px; }
.tt-banner b { display: block; font-size: 15px; }
.tt-banner small { color: var(--text-2); font-size: 13px; }
.tt-banner.show { animation: banner-in 0.6s cubic-bezier(0.3, 1.3, 0.5, 1); }
@keyframes banner-in { from { opacity: 0; transform: translateY(-14px) scale(0.96); } to { opacity: 1; transform: none; } }
.tt-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tt-list button {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 13px 16px; border: 1px solid transparent; border-radius: 16px;
  background: var(--surface); color: var(--text); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer;
  transition: border-color 0.2s ease, transform 0.25s var(--ease);
}
.tt-list button span { min-width: 44px; color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; }
.tt-list button:hover { transform: translateX(4px); }
.tt-list button[aria-pressed="true"] { border-color: var(--red); }
.tt-list button[aria-pressed="true"]::after { content: "In 5 min"; margin-left: auto; padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); font-size: 12px; font-weight: 600; }

/* Details: six small facts. */

.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.facts li { padding: 30px 28px; border-radius: 26px; background: var(--bg-2); transition: transform 0.35s var(--ease); }
.facts h3 { font-size: 22px; }
.facts p { margin-top: 6px; color: var(--text-2); font-size: 17px; }
#privacy .small { margin-top: 40px; }
@media (max-width: 900px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .facts { grid-template-columns: minmax(0, 1fr); } }

/* iPhone, iPad and Mac (#download): a line drawing with the app icon, its requirement and button. */

#download { padding-top: 0; }
.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.platform { display: flex; flex-direction: column; align-items: center; padding: 34px 24px 30px; border-radius: 30px; background: var(--bg-2); text-align: center; }
.device-glyph { width: 170px; height: 110px; max-width: 100%; margin-bottom: 18px; overflow: visible; transition: transform 0.5s var(--ease); }
.device-glyph .frame { fill: color-mix(in srgb, var(--red) 6%, transparent); stroke: var(--red); stroke-width: 2; stroke-linejoin: round; }
.device-glyph .island { fill: var(--red); }
.platform h3 { font-size: 28px; }
.platform-req { margin: 6px 0 24px; color: var(--text-2); font-size: 15px; }
.platform .button { margin-top: auto; }
@media (hover: hover) { .platform:hover .device-glyph { transform: translateY(-6px) scale(1.03); } }
@media (max-width: 800px) { .platforms { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin: 0 auto; } }

/* Pricing: Monthly or Yearly (script.js sets data-period on .plans; without it, monthly). */

.period-switch { position: relative; display: flex; width: max-content; max-width: 100%; min-width: 0; margin: -20px auto 44px; padding: 4px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--text) 7%, transparent); gap: 2px; }
html:not(.js) .period-switch { display: none; }
.period-switch input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.period-switch label { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; padding: 8px 18px; border-radius: 999px; color: var(--text-2); font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.period-switch label:hover { color: var(--text); }
.period-switch input:checked + label { background: var(--red-fill); color: #fff; }
.period-switch input:focus-visible + label { outline: 2px solid var(--red); outline-offset: 2px; }
@media (max-width: 360px) { .period-switch label { padding: 8px 12px; font-size: 14px; gap: 6px; } .period-switch .save { font-size: 11px; } }
.period-switch .save { padding: 1px 8px; border-radius: 999px; background: color-mix(in srgb, var(--red) 12%, transparent); color: var(--red); font-size: 12px; }
.period-switch input:checked + label .save { background: rgba(255, 255, 255, 0.22); color: #fff; }
/* The red thumb glides between the two (script.js measures the chosen label into --thumb-x and
   --thumb-w and adds .has-thumb; until then the chosen label has the red itself). */
.period-switch .thumb { position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--thumb-w, 0); border-radius: 999px; background: var(--red-fill); transform: translateX(var(--thumb-x, 0)); opacity: 0; pointer-events: none; }
.period-switch.has-thumb .thumb { opacity: 1; }
.period-switch.has-thumb input:checked + label { background: none; }
.period-switch.glide .thumb { transition: transform 0.5s cubic-bezier(0.3, 1.25, 0.5, 1), width 0.5s cubic-bezier(0.3, 1.25, 0.5, 1); }
.period-switch.glide label, .period-switch.glide .save { transition: color 0.3s ease, background-color 0.3s ease; }
.plans[data-period="monthly"] .yearly, .plans[data-period="yearly"] .monthly { display: none !important; }

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; display: flex; flex-direction: column; padding: 36px 30px 30px; border: 1px solid var(--hairline); border-radius: 30px; background: var(--bg); }
.plan.popular { border-color: var(--red); box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--red) 60%, transparent); }
.amount { font-variant-numeric: tabular-nums; }
.plan .badge { position: absolute; top: -13px; left: 30px; padding: 3px 12px; border-radius: 999px; background: var(--red-fill); color: #fff; font-size: 13px; font-weight: 600; }
.plan h3 { font-size: 28px; }
.plan .tagline { color: var(--text-2); margin-top: 4px; font-size: 16px; }
.price { margin-top: 26px; font-size: 44px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.price small { font-size: 16px; font-weight: 500; color: var(--text-2); letter-spacing: 0; white-space: nowrap; }
.plan .billing { margin-top: 8px; color: var(--text-2); font-size: 14px; }
.plan ul { list-style: none; padding: 0; margin: 28px 0 0; display: flex; flex-direction: column; gap: 10px; }
.plan li { font-size: 16px; padding-left: 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--red); }
.plan-action { margin-top: auto; padding-top: 30px; }
.buy { position: relative; overflow: hidden; display: block; padding: 12px 20px; border: 1px solid var(--red); border-radius: 999px; color: var(--red); font-size: 17px; font-weight: 600; text-align: center; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.25s ease; }
.buy:hover, .popular .buy { background: var(--red-fill); border-color: var(--red-fill); color: #fff; text-decoration: none; }
.popular .buy:hover { box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--red) 80%, transparent); }
@media (hover: hover) {
  .plan { transition: translate 0.4s var(--ease), box-shadow 0.4s ease; }
  .plan:hover { translate: 0 -6px; box-shadow: var(--shadow-lg); }
  .plan.popular:hover { box-shadow: 0 36px 70px -28px color-mix(in srgb, var(--red) 70%, transparent); }
}
.plans-note { color: var(--text-2); font-size: 14px; text-align: center; max-width: 720px; margin: 36px auto 0; }
.plans-note + .plans-note { margin-top: 10px; }
@media (max-width: 960px) { .plan { padding: 32px 24px 26px; } .price { font-size: 38px; } }
@media (max-width: 800px) { .plans { grid-template-columns: minmax(0, 1fr); max-width: 460px; margin: 0 auto; gap: 30px; } .price { font-size: 44px; } }
@media (max-width: 360px) { .period-switch label { padding: 8px 12px; } .price small { display: block; margin-top: 8px; } }

/* FAQ */

.faq { max-width: 780px; margin: 0 auto; border-top: 1px solid var(--separator); }
.faq details { border-bottom: 1px solid var(--separator); }
.faq summary { cursor: pointer; list-style: none; padding: 24px 0; font-weight: 600; font-size: 19px; letter-spacing: -0.01em; display: flex; justify-content: space-between; gap: 16px; transition: color 0.2s ease; }
.faq summary:hover { color: var(--red); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--red); font-size: 26px; line-height: 0.9; font-weight: 300; flex: none; transition: transform 0.35s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq-body { overflow: hidden; }
.faq-body p { padding: 0 40px 24px 0; color: var(--text-2); font-size: 17px; }

/* Guide cards (the home page's Guides, the guides' index and their More guides). */

#guides { padding-top: 0; }
.guide-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 20px; }
.guide-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 28px 28px 24px; border-radius: 26px; background: var(--bg-2); color: var(--text); transition: transform 0.4s var(--ease), box-shadow 0.4s ease, background-color 0.3s ease; }
.guide-card:hover { text-decoration: none; transform: translateY(-4px); box-shadow: var(--shadow-lg); background: var(--surface); }
.guide-card h2, .guide-card h3 { font-size: 21px; letter-spacing: -0.02em; line-height: 1.25; margin: 0; }
.guide-card p { margin: 10px 0 18px; color: var(--text-2); font-size: 16px; line-height: 1.45; }
.guide-card-more { margin-top: auto; color: var(--red); font-size: 14px; font-weight: 600; }
.guide-card-more::after { content: "→"; display: inline-block; margin-left: 6px; transition: transform 0.3s var(--ease); }
.guide-card:hover .guide-card-more::after { transform: translateX(4px); }
.guides-all { margin-top: 36px; }
.more-link { font-weight: 600; }
.more-link::after { content: " →"; }

/* Footer */

.footer { padding: 36px 0 48px; border-top: 1px solid var(--separator); color: var(--text-2); font-size: 13px; }
.footer-inner { display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; }
.footer .brand { font-size: 15px; }
.footer .brand img { width: 24px; height: 24px; border-radius: 6px; }
.footer nav { display: flex; flex-wrap: wrap; gap: 10px 24px; font-size: 14px; margin-left: auto; }
.footer nav a { color: var(--text); }
.footer nav .pdf { margin-left: 7px; padding: 1px 6px; border: 1px solid var(--separator); border-radius: 6px; color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: 0.03em; vertical-align: 1px; }
.footer nav .pdf:hover { color: var(--red); border-color: var(--red); text-decoration: none; }
.footer .fine { flex-basis: 100%; margin: 0; }
@media (max-width: 700px) { .footer nav { margin-left: 0; } }
.legal + .footer, .guide + .footer { margin-top: 120px; }

/* Scroll reveals: hidden only when JavaScript runs and motion is welcome (script.js adds .in, and
   --d for elements that arrive together). Parallax uses `translate`, so it adds to them. */

html.js:not(.static) .reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease), translate 0.4s var(--ease), box-shadow 0.4s ease;
  transition-delay: var(--d, 0ms);
}
html.js:not(.static) .reveal.in { opacity: 1; transform: none; }
html.js:not(.static) h1.reveal, html.js:not(.static) h2.reveal { transform: translateY(36px); }
html.js:not(.static) h1.reveal.in, html.js:not(.static) h2.reveal.in { transform: none; }
html.js:not(.static) .hero-visual.reveal { transform: translateY(48px) scale(0.97); transition-duration: 1.2s; }
html.js:not(.static) .hero-visual.reveal.in { transform: none; }
[data-parallax] { translate: 0 var(--py, 0px); }

/* Pricing: the cards rise in one after another, their points follow, the badge pops and a light
   passes over Buy Plus once. A new period's prices slide in (.swap) while script.js counts. */
html.js:not(.static) .plan.reveal { transform: translateY(36px) scale(0.96); }
html.js:not(.static) .plan.reveal.in { transform: none; }
html.js:not(.static) .plan.reveal li { opacity: 0; transform: translateY(8px); transition: opacity 0.5s ease-out, transform 0.5s ease-out; }
html.js:not(.static) .plan.reveal.in li { opacity: 1; transform: none; }
html.js:not(.static) .plan.reveal li:nth-child(1) { transition-delay: calc(var(--d, 0ms) + 300ms); }
html.js:not(.static) .plan.reveal li:nth-child(2) { transition-delay: calc(var(--d, 0ms) + 380ms); }
html.js:not(.static) .plan.reveal li:nth-child(3) { transition-delay: calc(var(--d, 0ms) + 460ms); }
html.js:not(.static) .plan.reveal li:nth-child(4) { transition-delay: calc(var(--d, 0ms) + 540ms); }
html.js:not(.static) .plan.reveal li:nth-child(5) { transition-delay: calc(var(--d, 0ms) + 620ms); }
html.js:not(.static) .plan.reveal.in .badge { animation: badge-pop 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) calc(var(--d, 0ms) + 350ms) both; }
html.js:not(.static) .popular.reveal.in .buy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.38) 50%, transparent 70%);
  transform: translateX(-110%); animation: sheen 1.2s ease-in-out calc(var(--d, 0ms) + 900ms) both;
}
.plans .swap { animation: price-in 0.5s var(--ease) both; }
.plans .billing.swap { animation-delay: 0.06s; }
@keyframes badge-pop { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: none; } }
@keyframes sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes price-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  html.js .reveal, html.js .plan li { opacity: 1 !important; transform: none !important; transition: none !important; }
  [data-parallax] { translate: none !important; }
  *, *::before, *::after { animation: none !important; }
  .demo, .demo *, .seg-thumb, .faq summary::after, .button, .nav-cta, .plan, .period-switch .thumb, .period-switch label,
  .device-glyph, .guide-card, .guide-card-more::after, .chips li, .file-rows li, .tt-list button, .quiz-options button, .timeline button, .timeline button::before { transition: none !important; }
  .button:hover, .nav-cta:hover, .plan:hover, .guide-card:hover, .chips li:hover, .file-rows li:hover, .tt-list button:hover,
  .quiz-options button:hover, .platform:hover .device-glyph, .check-button:hover { transform: none !important; translate: none !important; }
  .flash-inner { transform-style: flat; transition: none; }
  .flashcard:hover .flash-inner, .flashcard.flipped:hover .flash-inner { transform: none; }
  .flash-face { backface-visibility: visible; -webkit-backface-visibility: visible; transition: opacity 0.25s ease; }
  .flash-back { transform: none; opacity: 0; }
  .flashcard.flipped .flash-inner { transform: none; }
  .flashcard.flipped .flash-front { opacity: 0; }
  .flashcard.flipped .flash-back { opacity: 1; }
}

/* Printed, every section shows, without the controls. */
@media print {
  html.js .reveal, html.js .plan li { opacity: 1 !important; transform: none !important; transition: none !important; }
  .nav, .legal-top, .replay, .skip { display: none !important; }
}

/* Legal pages */

.legal { max-width: 760px; margin: 0 auto; padding: 48px 24px 0; }
.legal h1 { font-size: clamp(36px, 5.4vw, 52px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.06; margin-bottom: 24px; }
.legal h2 { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; margin: 48px 0 14px; }
.legal h3 { font-size: 20px; margin: 30px 0 10px; }
.legal p, .legal li { font-size: 17px; line-height: 1.6; }
.legal p { margin: 0 0 14px; }
.legal ul, .legal ol { margin: 0 0 16px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal li::marker { color: var(--red); }
.legal a { word-break: break-word; }
.legal h4, .legal h5 { font-size: 17px; margin: 22px 0 8px; }
/* Licence texts, as their authors wrote them. */
.legal pre { margin: 0 0 20px; padding: 14px 16px; border-radius: 14px; background: rgba(127, 127, 127, 0.09); font: 12.5px/1.5 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; }
.legal-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 28px; }
.back { display: inline-block; font-size: 15px; }
.pdf-button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 16px 7px 13px; border: 1px solid var(--red); border-radius: 999px; color: var(--red); font-size: 15px; font-weight: 500; }
.pdf-button:hover { background: var(--red-fill); border-color: var(--red-fill); color: #fff; text-decoration: none; }
.pdf-button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* A page's main action, a `.button` (the welcome page, the Worker's pages). */
.legal .page-actions { margin: 26px 0 30px; }

/* A note shared as a link (n/index.html): n/open.js shows the button, or the line that the link is
   incomplete; both are hidden until it runs, and `hidden` must win over their display. */
.legal [hidden] { display: none !important; }
.share-open { margin: 30px 0 34px !important; }
.share-button { display: inline-flex; align-items: center; padding: 16px 34px; border-radius: 999px; background: var(--red-fill); color: #fff; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
.share-button:hover { text-decoration: none; opacity: 0.88; }
.share-file { margin-top: -14px !important; }
.share-status { color: var(--text-2); }
.share-missing { padding: 14px 16px; border-radius: 14px; background: color-mix(in srgb, var(--red) 11%, transparent); }
.legal .share-fine { color: var(--text-2); font-size: 15px; margin-top: 28px; }

/* Guides (generated by build.py from guides/*.md). */

.guide { max-width: 1120px; margin: 0 auto; padding: 40px 24px 0; }
.guide article, .guide .crumbs, .guide .guide-cta { max-width: 720px; margin-left: auto; margin-right: auto; }
.crumbs ol { list-style: none; margin: 0 0 40px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--text-2); }
.crumbs li + li::before { content: "›"; margin-right: 6px; color: var(--text-3); }
.crumbs a { color: var(--text-2); }
.crumbs a:hover { color: var(--red); }
.crumbs [aria-current] { color: var(--text-3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-head { margin-bottom: 44px; }
.guide-head h1 { font-size: clamp(36px, 5.6vw, 60px); letter-spacing: -0.04em; line-height: 1.06; }
.guide-meta { margin-top: 20px; color: var(--text-3); font-size: 15px; }
.guides-index-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.guides-index-head .lead { margin-left: auto; margin-right: auto; }
.guide-body { font-size: 19px; line-height: 1.68; letter-spacing: -0.005em; }
.guide-body > p:first-child { font-size: 22px; line-height: 1.55; color: var(--text); letter-spacing: -0.012em; }
.guide-body p { margin: 0 0 22px; }
.guide-body h2 { font-size: clamp(26px, 3vw, 32px); letter-spacing: -0.03em; line-height: 1.15; margin: 60px 0 18px; }
.guide-body h3 { font-size: 21px; margin: 36px 0 10px; }
.guide-body ul, .guide-body ol { margin: 0 0 24px; padding-left: 24px; }
.guide-body li { margin-bottom: 10px; padding-left: 4px; }
.guide-body li::marker { color: var(--red); font-weight: 600; }
.guide-body a { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--red) 40%, transparent); text-underline-offset: 3px; }
.guide-body a:hover { text-decoration-color: currentColor; }
.guide-body strong { font-weight: 650; }
.guide-body em { color: var(--text-2); }
.guide-cta { display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; align-items: center; margin-top: 64px; padding: 30px; border-radius: 30px; background: var(--bg-2); }
.guide-cta img { width: 64px; height: 64px; border-radius: 15px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, 0.35); }
.guide-cta-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.guide-cta div p:not(.guide-cta-title) { color: var(--text-2); font-size: 16px; margin-top: 2px; }
.guide-cta-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.guide-cta-actions .button { font-size: 16px; padding: 11px 20px; }
.guide-cta-actions .button.outline { padding: 10px 19px; }
.guide-more { margin-top: 110px; padding: 0; }
.guide-more h2 { font-size: 30px; letter-spacing: -0.03em; margin-bottom: 26px; }
.guide > .guide-cards { margin-bottom: 0; }
@media (max-width: 560px) { .guide-cta { padding: 24px; } .guide-body { font-size: 18px; } .guide-body > p:first-child { font-size: 20px; } }