/* Fonts, self-hosted: the same files and @font-face rules Google Fonts serves (OFL), from this origin, so the
   first paint waits on no other server. Each subset is downloaded only when the page uses its characters. */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin-ext.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(fonts/instrument-sans-latin.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-italic-vietnamese.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-italic-latin-ext.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-italic-latin.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-vietnamese.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/newsreader-latin.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-vietnamese.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-latin-ext.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(fonts/newsreader-latin.woff2?v=20261012120000) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Ask Eduport, after han1.ai: a calm, dark page with one ask box and a plush
   mascot peeking up from the bottom, in Eduport orange. */

:root {
  --bg: #0a0a0a;
  --surface: #161616;
  --surface-2: #1f1f1f;
  --surface-3: #2a2a2a;
  --sunken: #111111;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.05);
  --text: #ededed;
  --heading: #f9fafb;
  --muted: #a1a1aa;
  --faint: #8a8a93; /* 5.8:1 on the page, 5.2:1 on surfaces (WCAG AA for small text) */
  --brand: #fb6514;
  --brand-600: #e4560b;
  --brand-ink: #ffb27d;
  --brand-tint: #1f1f1f; /* neutral: orange is for lines, text and icons only, never a fill on dark */
  --ok: #4ade80;
  --danger: #f87171;
  --amber: #f5a524;
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
  --shadow-1: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 30px -12px rgba(0, 0, 0, 0.6);
  --shadow-2: 0 30px 80px -20px rgba(0, 0, 0, 0.75);
  --font-sans: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --nav-bg: rgba(22, 22, 22, 0.82);
  --sep: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.22);
  --chip-text: #d4d4d8;
  --glow-1: rgba(255, 255, 255, 0.03); /* the light behind the logo: neutral, never warm on dark */
  --glow-2: rgba(255, 255, 255, 0.03);
  --glow-card: rgba(255, 255, 255, 0.035);
  --key-bg: var(--surface);
  --key-border: rgba(251, 101, 20, 0.55);
  --key-text: #ffffff;
  --mat: linear-gradient(160deg, #1d1d1d 0%, #161616 60%, #141414 100%);
  --focus: #fb6514;
  --nav-h: 0px;
  /* the class player (chat.js classCard): a board around a screen. Video is shown on black in both
     themes, and what sits on the picture is neutral glass, never warm */
  --board: var(--surface-2);
  --screen: #060606;
  --glass: rgba(10, 10, 10, 0.68);
  --glass-hover: rgba(40, 40, 40, 0.82);
  --glass-line: rgba(255, 255, 255, 0.2);
  --on-glass: #ffffff;
  --on-glass-muted: rgba(255, 255, 255, 0.76);
  --scrim: rgba(0, 0, 0, 0.62);
  color-scheme: dark;
}

/* White: han1's warm light palette, Eduport orange; every text colour meets WCAG AA. */
:root[data-theme="light"] {
  --bg: #fafafa;
  --surface: #f4f4f5;
  --surface-2: #ececee;
  --surface-3: #e2e2e5;
  --sunken: #ffffff;
  --line: rgba(9, 9, 11, 0.1);
  --line-2: rgba(9, 9, 11, 0.06);
  --text: #27272a;
  --heading: #09090b;
  --muted: #52525b;
  --faint: #6b6b72; /* 5.0:1 on the page, 4.8:1 on surfaces */
  --brand-ink: #c2410c;
  --brand-tint: #ececee;
  --ok: #15803d;
  --danger: #b91c1c;
  --amber: #a34706; /* 5.3:1 on surfaces */
  --shadow-1: 0 1px 2px rgba(9, 9, 11, 0.06), 0 10px 30px -12px rgba(9, 9, 11, 0.16);
  --shadow-2: 0 30px 80px -24px rgba(9, 9, 11, 0.24);
  --nav-bg: rgba(250, 250, 250, 0.86);
  --sep: rgba(9, 9, 11, 0.14);
  --line-strong: rgba(9, 9, 11, 0.25);
  --chip-text: #3f3f46;
  --glow-1: transparent; /* no cream behind the logo */
  --glow-2: rgba(255, 255, 255, 0.8);
  --glow-card: rgba(255, 255, 255, 0.6);
  --key-bg: #ffffff;
  --key-border: rgba(251, 101, 20, 0.55);
  --key-text: #1c1917;
  --mat: linear-gradient(160deg, #ffffff 0%, #f4f4f5 60%, #ececee 100%);
  --focus: #c2410c; /* 4.9:1 on the page, 4.6:1 on surfaces */
  --board: var(--sunken);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); scroll-padding-top: 100px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 15px/1.6 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: var(--line-strong); color: var(--heading); } /* neutral: an orange wash is brown on dark, and white text on peach was unreadable on white */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 10px; }
.sr-only {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 12px; text-decoration: none; font-weight: 600;
}
.skip:focus { top: 12px; }
body.locked { overflow: hidden; }
/* The open chat covers the whole page once its 0.35 s entrance is over, so the page under it is not
   painted meanwhile and its own animations (the corner switch's stars, the hero Edu) stop costing
   frames. It is back at once when the chat closes. Edu's sky and bubbles are not in this list. */
body.locked > :is(main, .features, .footer, .corner, .topnav, .bottomnav) { visibility: hidden; transition: visibility 0s 0.4s; }

/* --- floating pill nav ------------------------------------------------------ */
.topnav {
  position: fixed; top: 40px; left: 0; right: 0; z-index: 40; display: flex; justify-content: center; pointer-events: none;
}
.pillnav {
  pointer-events: auto; display: inline-flex; align-items: center; gap: 24px; padding: 10px 24px; border-radius: 999px;
  background: var(--nav-bg); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  font-size: 14px;
}
.pillnav a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
.pillnav a:hover { color: var(--text); }
.pillnav .pillnav-brand { color: var(--heading); font-weight: 600; }
.pillnav .pillnav-brand:hover { opacity: 0.75; }
.pillnav-sep { width: 1px; height: 16px; background: var(--sep); }

.corner { position: fixed; top: 42px; right: 24px; z-index: 41; display: flex; align-items: center; gap: 12px; }



.bottomnav { display: none; }

/* --- hero ----------------------------------------------------------------------- */
.hero {
  position: relative; display: flex; flex-direction: column; align-items: center; min-height: 100vh; min-height: 100svh;
  padding: 24vh 24px 64px; overflow: hidden; isolation: isolate;
}
.hero-glow {
  position: absolute; inset: 0 0 auto; height: 100vh; height: 100svh; z-index: -1; pointer-events: none;
  background:
    radial-gradient(44% 38% at 50% 24%, var(--glow-1), transparent 74%),
    radial-gradient(60% 34% at 50% 0%, var(--glow-2), transparent 70%);
}
.hero-mark {
  position: relative; margin: 0 0 32px; width: 220px; min-height: 70px; display: grid; place-items: center;
  font-weight: 400;
}

/* The ask box: a dark pill with a search icon and a round orange send button. */
.askbox {
  position: relative; display: flex; align-items: center; width: min(460px, 100%); min-height: 48px; margin-bottom: 36px;
  padding: 4px 6px 4px 44px; border-radius: 24px; background: var(--surface); border: 1px solid transparent;
  transition: border-color 0.3s ease, box-shadow 0.3s ease; cursor: text;
}
.askbox:hover { background: var(--surface-2); }
.askbox:focus-within { border-color: var(--focus); background: var(--surface); } /* a clean orange edge, no warm glow under it */
.askbox-icon { position: absolute; left: 16px; top: 15px; width: 16px; height: 16px; color: var(--faint); }
.askbox-icon svg { width: 16px; height: 16px; }
.askbox textarea {
  flex: 1; min-width: 0; height: 38px; max-height: 140px; padding: 9px 4px; border: 0; outline: none; resize: none; background: transparent;
  font-size: 14px; line-height: 1.45; color: var(--text);
}
.askbox textarea::placeholder { color: var(--faint); }
.askbox-actions { display: flex; align-items: center; gap: 2px; align-self: flex-end; padding-bottom: 3px; }

.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--muted); transition: background 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn svg { width: 18px; height: 18px; }
.icon-btn[hidden] { display: none; }
.icon-btn.listening { color: #fff; background: var(--brand); animation: pulse 1.4s ease infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--line-strong); } /* a neutral ring: an orange one is a warm halo on dark */
  100% { box-shadow: 0 0 0 14px transparent; }
}
.send-btn {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; padding: 0; border-radius: 50%;
  background: var(--brand); color: #fff; transition: transform 0.15s ease, opacity 0.15s ease, background 0.15s ease;
}
.send-btn:hover { opacity: 0.9; }
.send-btn:active { transform: scale(0.94); }
.send-btn svg { width: 15px; height: 15px; }

/* Suggestions: an editorial list under the ask box (after oboe.com, in our own dark-first tokens).
   Three rows split by hairlines, each with a small subject glyph, its words, and a quiet chevron
   that slides in on hover; "More ideas" sits under them. They wait, hidden, until the logo brings
   them in (and on a first visit Edu's intro), then rise one after another (landing.js enter()).
   Touch never hovers. */
.chips { display: flex; flex-direction: column; align-items: stretch; width: min(460px, 100%); margin: 4px 0 0; }
.chips-break { display: none; }
.chip {
  position: relative; display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 8px 6px 8px 4px;
  border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--chip-text);
  font-size: 15px; font-weight: 450; letter-spacing: -0.005em; text-align: left; cursor: pointer;
  transition: color 0.2s ease, transform 0.2s cubic-bezier(0.3, 0.7, 0.4, 1);
}
.chip:first-child { border-top: 1px solid var(--line); }
.chip-glyph {
  display: inline-grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 10px;
  background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--brand-ink);
  transition: transform 0.35s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.chip-glyph svg { width: 15px; height: 15px; }
.chip-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip-go { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; color: var(--faint); opacity: 0.6;
  transition: transform 0.25s cubic-bezier(0.3, 0.7, 0.4, 1), opacity 0.2s ease, color 0.2s ease; }
.chip-go svg { width: 16px; height: 16px; }
.chip:active { color: var(--heading); }
.chip:active .chip-glyph { transform: scale(0.9); }
.chip:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 8px; color: var(--heading); }
.chip:focus-visible .chip-go { opacity: 1; color: var(--brand-ink); transform: translateX(3px); }
.chip-shuffle {
  display: inline-flex; align-items: center; align-self: center; gap: 7px; min-height: 44px; margin-top: 14px; padding: 0 16px 0 13px;
  border-radius: 999px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 13px; font-weight: 500;
  cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.chip-shuffle svg { width: 14px; height: 14px; transition: transform 0.45s cubic-bezier(0.3, 1.3, 0.5, 1); }
.chip-shuffle:active { background: var(--surface); }
.chip-shuffle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.chip-shuffle.spin svg { animation: chip-spin 0.65s cubic-bezier(0.3, 0.8, 0.3, 1); }
@keyframes chip-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@media (hover: hover) and (pointer: fine) {
  .chip:hover { color: var(--heading); transform: translateX(2px); }
  .chip:hover .chip-glyph { transform: rotate(-8deg) scale(1.06); }
  .chip:hover .chip-go { opacity: 1; color: var(--brand-ink); transform: translateX(3px); }
  .chip-shuffle:hover { color: var(--heading); border-color: var(--line); }
  .chip-shuffle:hover svg { transform: rotate(90deg); }
}
/* the entrance: the rows rise one after another, each glyph pops a beat later, then "More ideas" */
.chips.is-waiting > .chip, .chips.is-waiting > .chip-shuffle { opacity: 0; }
.chips.is-in > .chip, .chips.is-in > .chip-shuffle { animation: chip-rise 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--i, 0) * 80ms) backwards; }
.chips.is-in > .chip .chip-glyph { animation: chip-glyph-in 0.6s cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--i, 0) * 80ms + 140ms) backwards; }
@keyframes chip-rise { from { opacity: 0; transform: translateY(8px); } }
@keyframes chip-glyph-in { from { opacity: 0; transform: scale(0.4) rotate(-24deg); } }
@media (max-width: 480px) {
  .chip { min-height: 52px; font-size: 14.5px; gap: 12px; }
  .chip-glyph { width: 28px; height: 28px; border-radius: 9px; }
  .chip-shuffle { margin-top: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .chip, .chip-glyph, .chip-go { transition: none; }
  .chip:hover, .chip:focus-visible .chip-go, .chip:hover .chip-go, .chip:hover .chip-glyph { transform: none; }
  .chips.is-in > .chip, .chips.is-in > .chip-shuffle, .chips.is-in > .chip .chip-glyph, .chip-shuffle.spin svg { animation: none; }
}

/* The mascot peeking over the bottom edge of the first screen */
.peek-stage { position: relative; flex: none; width: 128px; margin-top: auto; padding-top: 40px; line-height: 0; cursor: pointer; }
/* a faint ledge for the mascot to peek over */
.peek-stage::after {
  content: ""; position: absolute; left: 50%; bottom: 0; width: 260px; height: 1px; transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--line-strong), transparent); pointer-events: none;
}

/* --- the hand-written mark (assets/mark.js) -------------------------------------- */
.mk { display: block; width: 100%; line-height: 0; }
.mk svg { display: block; width: 100%; height: auto; overflow: visible; }

/* --- feature rows (han1's project bento) ------------------------------------------------------
   Each row is a stage (.bento-art) and two tiles. On the stage: a quiet dot grid, a thin cable that
   plugs into the card, a second card behind it for depth, the card itself (.mock), and Edu on its
   top edge (.bento-perch, journey.js). The card's surface, outline and sheen are layers inside .mock,
   so .mock and every ancestor of the perch (and of the row's button) never take a transform, opacity
   or filter: the perch stays above the row's stretched button, so a tap on Edu giggles, never asks.
   These rules are the finished state, which reduced motion shows. bento-motion.js holds the parts
   back (.cm-h) and builds them as the card reaches you, with Web Animations on transforms, opacity
   and small strokes; the depth parallax is a scroll-driven animation where the browser has them.
   Colours: the tokens, plus neutral white and black and the quiz's cool green. Orange only draws
   thin lines, rings and small marks. */
.features { padding: 96px 24px 120px; scroll-margin-top: 40px; }
.bento {
  --cm-dot: rgba(255, 255, 255, 0.1);
  --cm-card-1: #181818;
  --cm-card-2: #121212;
  --cm-hi: rgba(255, 255, 255, 0.06);
  --cm-ghost: #151515;
  --cm-ghost-line: rgba(255, 255, 255, 0.07);
  --cm-sheen: rgba(255, 255, 255, 0.075);
  --cm-lift: 0 14px 30px -14px rgba(0, 0, 0, 0.85);
  --cm-ok-wash: rgba(74, 222, 128, 0.075);
  --cm-ok-line: rgba(74, 222, 128, 0.5);
  --cm-ok-dot: #22c55e;
  --cm-ok-ink: #052e16;
  width: min(851px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 24px;
}
:root[data-theme="light"] .bento {
  --cm-dot: rgba(9, 9, 11, 0.13);
  --cm-card-1: #ffffff;
  --cm-card-2: #fdfdfd;
  --cm-hi: #ffffff;
  --cm-ghost: #ffffff;
  --cm-ghost-line: rgba(9, 9, 11, 0.08);
  --cm-sheen: rgba(255, 255, 255, 0.55); /* light enough that words stay readable as it passes */
  --cm-lift: 0 12px 26px -14px rgba(9, 9, 11, 0.22);
  --cm-ok-wash: rgba(22, 163, 74, 0.06);
  --cm-ok-line: rgba(21, 128, 61, 0.42);
}
.bento-row { position: relative; display: grid; grid-template-columns: 3fr 1fr; gap: 24px; text-decoration: none; color: inherit; }
.bento-row.flip { direction: rtl; }
.bento-row.flip > * { direction: ltr; }

/* the stage */
.bento-art {
  position: relative; aspect-ratio: 1600 / 1121; padding: 104px 40px 32px; border-radius: var(--radius-xl); overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 0%, var(--glow-card), transparent 70%), var(--mat);
  box-shadow: inset 0 1px 0 var(--line-2);
  display: flex; align-items: center; justify-content: center;
}
/* a dot grid behind the card, fading out toward the edges (the far layer of the parallax) */
.cm-backdrop {
  position: absolute; left: 0; right: 0; top: -28px; bottom: -28px; pointer-events: none;
  background: radial-gradient(circle, var(--cm-dot) 1px, transparent 1.5px) 50% 50% / 16px 16px;
  -webkit-mask-image: radial-gradient(ellipse 78% 74% at 50% 56%, #000 38%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 74% at 50% 56%, #000 38%, transparent 100%);
}

/* the card: no paint of its own, only its layers (see the note above) */
.mock { position: relative; width: min(480px, 100%); padding: 22px; border-radius: 22px; text-align: left; font-size: 13.5px; line-height: 1.5; }
.cm-surface {
  position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, var(--cm-card-1), var(--cm-card-2)); border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 var(--cm-hi), var(--shadow-2);
}
/* a second card behind, peeking out below: depth */
.cm-ghost {
  position: absolute; left: 6%; right: 6%; top: 18px; bottom: -12px; z-index: 0; border-radius: 20px; pointer-events: none;
  background: var(--cm-ghost); border: 1px solid var(--cm-ghost-line); box-shadow: 0 16px 34px -22px rgba(0, 0, 0, 0.55);
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* the cable: comes in from the stage's edge, loops once and plugs into the card's top edge (over the
   card's surface, so the plug sits on the edge; the wire itself never enters the card) */
.cm-cable {
  position: absolute; left: -220px; top: -100px; width: 340px; height: 200px; z-index: 1; pointer-events: none; overflow: visible;
  fill: none; stroke: var(--brand); stroke-width: 1.25; stroke-linecap: round;
}
.cm-cable-wire { stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.32; }
.bento-row:first-child .cm-cable-wire { opacity: 0.6; } /* the cable leads in once, then quietens */
.cm-plug { fill: var(--cm-card-1); stroke: var(--brand); stroke-width: 1.5; transform-box: fill-box; transform-origin: 50% 50%; }
/* the outline that draws around the card as it arrives (bento-motion.js gives it its path) */
.cm-frame {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; overflow: visible; pointer-events: none; opacity: 0;
  fill: none; stroke: var(--brand); stroke-width: 1.25; stroke-linecap: round;
}
/* the light that sweeps across the finished card (neutral white, over everything but Edu) */
.cm-sheen { position: absolute; inset: 0; z-index: 2; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cm-sheen > span {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 30%; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--cm-sheen) 42%, var(--cm-sheen) 58%, transparent);
}
.cm-z { position: relative; z-index: 1; }
/* masked reveals: words (and labels) rise through a window of their own */
.cm-mask, .cm-w { display: inline-block; vertical-align: top; overflow: hidden; padding: 0.08em 0.03em 0.18em; margin: -0.08em -0.03em -0.18em; }
.cm-mask > span, .cm-w > span { display: inline-block; }
.cm-words { margin: 0; }

/* The mascot sits on the top edge of the card, legs over the side. Above the row's stretched
   button, so tapping Edu makes it giggle; the rest of the card asks. */
.bento-perch { position: absolute; z-index: 4; bottom: calc(100% - 10px); right: 28px; width: 88px; line-height: 0; }
.bento-row.flip .bento-perch { right: auto; left: 28px; }

/* labels */
.mock-label { display: block; margin-bottom: 6px; font: 600 10.5px/1.4 var(--font-sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.mock-label.cm-mask { display: block; width: max-content; max-width: 100%; margin: -0.08em -0.03em calc(6px - 0.18em); }

/* doubt: the picture, the short answer, and three steps joined by a line */
.mock-hook { position: relative; padding-left: 16px; font-family: var(--font-display); font-size: 17px; line-height: 1.42; color: var(--heading); }
.cm-rule { position: absolute; left: 0; top: 3px; bottom: 4px; width: 2px; border-radius: 2px; background: var(--brand); transform-origin: 50% 0; }
.mock-hook .mock-label, .mock-answer .mock-label { color: var(--brand-ink); }
.mock-answer { position: relative; margin-top: 16px; padding: 12px 14px 13px; border-radius: 14px; font-weight: 500; color: var(--heading); }
.cm-box { position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: var(--surface); }
.cm-boxline, .cm-seal, .cm-hl {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none;
  fill: none; stroke-width: 1; vector-effect: non-scaling-stroke;
}
.cm-boxline rect, .cm-seal rect, .cm-hl rect { width: calc(100% - 1px); height: calc(100% - 1px); stroke-dasharray: 1; stroke-dashoffset: 0; }
.cm-boxline { stroke: var(--line-strong); }
.mock-steps { --gap: 14px; list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: var(--gap); }
.mock-steps li { position: relative; display: flex; align-items: flex-start; gap: 11px; color: var(--chip-text); }
.cm-n {
  position: relative; flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 50%;
  font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--brand-ink);
}
.cm-n b { position: relative; font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-disc { position: absolute; inset: 0; border-radius: 50%; background: var(--surface-2); }
.cm-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); fill: none; stroke: var(--brand); stroke-width: 1.5; }
.cm-ring circle { stroke-dasharray: 1; stroke-dashoffset: 0; }
.cm-ripple { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); opacity: 0; pointer-events: none; } /* a neutral pulse: never a warm halo */
.cm-t { padding-top: 2px; }
/* the line from one step's ring down to the next (centre to centre: the rings cover its ends) */
.cm-link { position: absolute; left: 11.25px; top: 12px; bottom: calc(-12px - var(--gap)); width: 1.5px; background: var(--brand); opacity: 0.75; transform-origin: 50% 0; }

/* quiz: the options, the choice that glides over them, the seal, the working */
.mock-q { margin: 0 0 14px; color: var(--heading); font-size: 14.5px; line-height: 1.5; }
.mock-opts { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cm-opt {
  position: relative; display: flex; align-items: center; gap: 9px; min-height: 42px; padding: 8px 12px 8px 9px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line); color: var(--chip-text); font-variant-numeric: tabular-nums;
}
.cm-dim { display: flex; align-items: center; gap: 9px; opacity: 0.76; }
.cm-opt i { position: relative; flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--surface-3); font-style: normal; font-size: 11px; font-weight: 700; color: var(--text); }
.cm-opt i b { grid-area: 1 / 1; font-weight: 700; }
.cm-okfill { position: absolute; inset: -1px; border-radius: inherit; background: var(--cm-ok-wash); box-shadow: inset 0 0 0 1px var(--cm-ok-line); pointer-events: none; }
.cm-opt.right i { background: var(--surface-3); }
.cm-okdot { position: absolute; inset: 0; border-radius: inherit; background: var(--cm-ok-dot); }
.cm-opt .cm-l0 { position: relative; color: var(--text); opacity: 0; }
.cm-opt .cm-l1 { position: relative; color: var(--cm-ok-ink); }
.cm-opt .cm-ripple { border-radius: 8px; box-shadow: 0 0 0 1.5px var(--ok); }
.cm-opt .cm-o { position: relative; }
.cm-seal { inset: -4px; width: calc(100% + 8px); height: calc(100% + 8px); stroke: var(--ok); stroke-width: 1.25; opacity: 0.55; }
.cm-tick { position: relative; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--ok); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cm-tick path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.cm-sel {
  position: absolute; left: 0; top: 0; z-index: 2; border-radius: 12px; pointer-events: none; opacity: 0;
  box-shadow: 0 0 0 1.5px var(--line-strong), 0 8px 18px -10px rgba(0, 0, 0, 0.5);
}
.cm-work {
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 14px 0 0; padding-top: 11px;
  font-family: var(--font-display); font-style: italic; font-size: 15.5px; line-height: 1.4; color: var(--text);
}
.cm-wline { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--line-strong); transform-origin: 0 50%; }
.cm-work .cm-arrow { font-style: normal; color: var(--faint); }
.cm-work .cm-ans > span { color: var(--ok); font-weight: 500; }

/* course: three matches, scored on dials; the best one rises, with a ring of its own */
.cm-rows { position: relative; display: grid; gap: 8px; }
.mock-row {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 10px 10px 13px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line);
}
.mock-row.is-best { z-index: 2; }
/* the best match, lifted: a lighter card with a shadow (over the row's own fill and border), and an orange ring */
.cm-lift { position: absolute; inset: -1px; z-index: -1; border-radius: inherit; background: var(--cm-card-1); box-shadow: var(--cm-lift); pointer-events: none; }
.cm-rt { min-width: 0; }
.mock-row b { display: block; font-weight: 600; color: var(--heading); }
.mock-row small { display: block; font-size: 12px; color: var(--faint); }
.cm-fee { color: var(--heading); font-weight: 600; }
/* the others settle back: their dials step down (decorative); their words keep full contrast (AA) */
.mock-row:not(.is-best) .cm-dial { opacity: 0.76; }
.cm-glint { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.cm-glint::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; opacity: 0; transform: translateX(-130%);
  background: linear-gradient(90deg, transparent, var(--cm-sheen), transparent);
}
.cm-glint.is-on::before { animation: cm-glint 0.9s cubic-bezier(0.65, 0, 0.35, 1); }
@keyframes cm-glint { 0% { opacity: 1; transform: translateX(-130%); } 100% { opacity: 1; transform: translateX(260%); } }
.cm-hl { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); stroke: var(--brand); }
.cm-pill {
  position: absolute; top: -9px; right: 12px; padding: 1px 8px 2px; border-radius: 999px; font-size: 10.5px; font-weight: 600; line-height: 1.45;
  color: var(--brand-ink); background: var(--cm-card-1); box-shadow: inset 0 0 0 1px var(--brand);
}
.cm-gauge { position: relative; flex: none; width: 38px; height: 38px; display: grid; place-items: center; }
.cm-dial { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); fill: none; stroke-width: 2; }
.cm-track { stroke: var(--line); }
.cm-fill { --p: 0; stroke: var(--muted); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--p)); } /* --p: landing.js */
.is-best .cm-fill { stroke: var(--brand); }
.cm-gauge em { position: relative; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: -0.02em; color: var(--heading); font-variant-numeric: tabular-nums; }
.mock-row .cm-gauge small { display: inline; margin-left: 0.5px; font-size: 8px; font-weight: 600; color: var(--faint); }

/* the tiles beside the stage */
.bento-side { display: grid; grid-template-rows: 1fr auto; gap: 24px; }
.tile { position: relative; border-radius: var(--radius-xl); background: var(--surface); padding: 24px; transition: background 0.3s ease; }
.bento-row:hover .tile { background-color: var(--surface-2); }
.tile-about { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; }
.tile-tag { display: inline-block; font-size: 12px; font-weight: 500; color: var(--brand-ink); }
.tile-about h3 { margin: 0; padding-right: 20px; font-size: 18px; font-weight: 600; line-height: 1.25; letter-spacing: -0.015em; color: var(--heading); }
.tile-about p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
/* The whole row is one button (stretched over the row from inside the heading). */
.bento-btn { all: unset; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* after all: unset, which brings back Android's blue flash */
.bento-btn::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: var(--radius-xl); }
.bento-btn:focus-visible::after { outline: 2px solid var(--focus); outline-offset: 4px; }
.tile-about { position: static; } /* the row's stretched button needs the row as its box */
.tile-about > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tile-arrow {
  width: 16px; height: 16px; color: var(--brand-ink); opacity: 0;
  transform: translate(-4px, 4px); transition: opacity 0.3s ease, transform 0.3s ease;
}
.tile-arrow svg { width: 16px; height: 16px; }
.bento-row:hover .tile-arrow { opacity: 1; transform: none; }
.tile-small { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-height: 120px; overflow: hidden; }
.tile-stat { display: flex; align-items: baseline; font-family: var(--font-display); font-weight: 400; font-size: 44px; line-height: 1; letter-spacing: -0.03em; color: var(--heading); font-variant-numeric: tabular-nums lining-nums; }
.cm-plus { color: var(--brand-ink); display: inline-block; }
.tile-label { font-size: 13px; color: var(--muted); }
.tile-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.tile-chips span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--surface-3); font-size: 12px; color: var(--chip-text); }
.cm-mi { width: 13px; height: 13px; flex: none; fill: none; stroke: var(--brand-ink); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cm-subjects { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.cm-subjects span { padding: 2px 8px 3px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 11px; color: var(--muted); }
.cm-route { display: block; width: 120px; height: 16px; margin-top: 6px; overflow: visible; fill: var(--surface); stroke: var(--brand); stroke-width: 1.25; }
.cm-route-line { fill: none; stroke-dasharray: 1; stroke-dashoffset: 0; opacity: 0.75; }
.cm-route circle { transform-box: fill-box; transform-origin: 50% 50%; stroke-width: 1.5; }
.bento-row:hover .tile-small { background-color: var(--surface-2); }
.bento-row:hover .cm-route { fill: var(--surface-2); }

/* --- the show: parts held back until their moment (bento-motion.js) --- */
.cm-h.cm-k-rise { transform: translateY(112%); }
.cm-h.cm-k-up { opacity: 0; transform: translateY(10px); }
.cm-h.cm-k-fade, .cm-h.cm-k-pop, .cm-h.cm-k-slide { opacity: 0; }
.cm-h.cm-k-draw, .cm-h.cm-k-gauge { stroke-dashoffset: 1; }
.cm-h.cm-k-growY { transform: scaleY(0); }
.cm-h.cm-k-growX { transform: scaleX(0); }
.cm-h.cm-k-settle { opacity: 1; }
.cm-h.cm-k-out { opacity: 1; }
.cm-live .mock-row, .cm-live .cm-sel { will-change: transform; } /* layers that stay put while rows pass each other */

/* depth: as a row scrolls past, the dot grid drifts slower than the card, the card behind a little less */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .bento-row { view-timeline: --cm-row block; }
    .cm-backdrop { animation: cm-far linear both; animation-timeline: --cm-row; animation-range: cover; }
    .cm-ghost { animation: cm-mid linear both; animation-timeline: --cm-row; animation-range: cover; }
  }
}
@media (min-width: 861px) {
  .bento-row.flip .cm-cable { left: auto; right: -220px; transform: scaleX(-1); }
}
@keyframes cm-far { from { translate: 0 -22px; } to { translate: 0 22px; } }
@keyframes cm-mid { from { translate: 0 -7px; } to { translate: 0 7px; } }
@media (hover: hover) and (pointer: fine) {
  .bento-row:hover .cm-ghost { transform: translateY(5px) scale(0.985); }
}

/* --- footer -------------------------------------------------------------------------- */
.footer { width: min(851px, calc(100% - 48px)); margin: 0 auto; padding: 0 0 40px; position: relative; }
.footer-top { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 32px; padding-top: 40px; border-top: 1px solid var(--line); }
.footer-top { position: relative; }
.footer-peek { position: absolute; left: 0; bottom: 100%; width: 72px; } /* peeks over the footer line */
.footer-title { margin: 0; font-family: var(--font-display); font-size: 26px; letter-spacing: -0.02em; color: var(--heading); }
.footer-title b { font-weight: 400; color: var(--brand); }
.footer-tag { margin: 8px 0 0; color: var(--faint); font-size: 13.5px; max-width: 320px; }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; font-size: 14px; }
.footer-links a { color: var(--muted); text-decoration: none; transition: color 0.15s ease; }
.footer-links a:hover { color: var(--text); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-top: 40px; font-size: 12.5px; color: var(--faint); }

/* --- reveal on scroll ---------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* --- chat sheet ---------------------------------------------------------------------- */
.sheet {
  position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column;
  background: var(--bg);
  animation: sheet-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sheet[hidden] { display: none; }
@keyframes sheet-in { from { opacity: 0; transform: translateY(16px); } }
.sheet-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; flex: none;
  padding: 0 clamp(14px, 3vw, 28px); border-bottom: 1px solid var(--line-2);
}
.sheet-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.sheet-avatar { display: inline-block; width: 30px; height: 30px; }
.sheet-name { font-weight: 600; font-size: 15px; color: var(--heading); }
.sheet-actions { display: flex; align-items: center; gap: 6px; }
.ghost-btn {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line);
  border-radius: 999px; background: var(--surface); color: var(--text); font-weight: 500; font-size: 13.5px;
  transition: background 0.15s ease;
}
.ghost-btn:hover { background: var(--surface-2); }
.ghost-btn svg { width: 15px; height: 15px; }
.thread { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 32px 16px 76px; } /* room under the last answer for the mascot on the chat box */
.thread-inner { width: min(720px, 100%); margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }

.empty { text-align: center; padding: 6vh 0 0; }
.empty-peek { width: 132px; margin: 0 auto 18px; padding: 0 22px; border-bottom: 1px solid var(--line); box-sizing: content-box; } /* a ledge to peek over */
.empty h2 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(32px, 5vw, 44px); letter-spacing: -0.03em; color: var(--heading); }
.empty p { margin: 12px auto 0; max-width: 460px; color: var(--muted); }
.suggest { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 26px; }
.chip-btn {
  display: inline-flex; align-items: center; min-height: 38px; padding: 8px 16px; border: 1px solid var(--line-2);
  border-radius: 999px; background: var(--surface); color: var(--chip-text); font-size: 14px; text-align: left;
  transition: background 0.15s ease, color 0.15s ease;
}
.chip-btn:hover { background: var(--surface-2); color: var(--heading); }

.msg-user {
  align-self: flex-end; max-width: min(78%, 540px); padding: 11px 17px; border-radius: 20px 20px 6px 20px;
  background: var(--surface-2); color: var(--heading); white-space: pre-wrap; word-wrap: break-word; animation: rise 0.3s ease both;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.notice { align-self: flex-end; display: flex; gap: 8px; align-items: flex-start; max-width: min(78%, 540px); margin-top: -18px; font-size: 12.5px; color: var(--faint); }
.notice svg { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--ok); }
.msg-bot { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 14px; align-items: start; }
.msg-bot > .mascot.msg-avatar { width: 32px; height: 32px; margin-top: 2px; justify-self: start; }
.stopped-line { color: var(--faint); }
.msg-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* answer text */
.answer { font-size: 16px; line-height: 1.68; color: var(--text); word-wrap: break-word; }
.answer > :first-child { margin-top: 0; }
.answer > :last-child { margin-bottom: 0; }
.answer p { margin: 0 0 14px; }
.answer h3, .answer h4, .answer h5 { margin: 22px 0 8px; font-size: 16.5px; font-weight: 600; color: var(--heading); }
.answer a { color: var(--brand-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.answer strong { font-weight: 600; color: var(--heading); }
.answer code { font-size: 0.9em; background: var(--surface-2); padding: 1px 6px; border-radius: 6px; }
.answer pre { background: var(--sunken); border: 1px solid var(--line); padding: 14px; border-radius: 14px; overflow-x: auto; }
.answer pre code { background: none; padding: 0; }
.answer ol, .answer ul { list-style: none; padding-left: 0; margin: 0 0 14px; }
.answer ol { counter-reset: md-ol; }
.answer li { position: relative; padding-left: 1.6rem; margin: 0; }
.answer li + li { margin-top: 0.45rem; }
.answer ol > li { counter-increment: md-ol; }
.answer ol > li::before { content: attr(data-n) "."; position: absolute; left: 0; top: 0; font-weight: 600; color: var(--brand-ink); }
.md-math { margin: 0 0 14px; overflow-x: auto; text-align: center; }
.answer ul > li::before { content: ""; position: absolute; left: 0.45rem; top: 0.72em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }
.md-table { overflow-x: auto; margin: 0 0 14px; }
.answer table { border-collapse: collapse; font-size: 14.5px; min-width: 100%; }
.answer th, .answer td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; }
.answer th { font-weight: 600; color: var(--heading); background: var(--surface); }
.answer.retracted { color: var(--muted); font-style: italic; }
.answer p.key-idea { margin: 18px 0 4px; padding: 14px 16px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); }
.answer p.key-idea strong { display: block; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-ink); margin-bottom: 2px; }

/* --- explanation cards (assets/explain.js) ------------------------------------------- */
.answer .xb, .answer .xb-md { margin: 0 0 14px; }
.xb { position: relative; border-radius: 20px; padding: 16px 18px; }
.xb-body > :first-child { margin-top: 0; }
.xb-body > :last-child { margin-bottom: 0; }
.xb-label, .answer .xb-label {
  display: flex; align-items: center; gap: 7px; margin: 0 0 8px;
  font-family: var(--font-sans); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint);
}
.xb-label svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.xb-enter { animation: xb-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes xb-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.xb-hook { padding: 2px 0 2px 18px; border-radius: 0; border-left: 2px solid var(--brand); }
.xb-hook .xb-label { color: var(--brand-ink); }
.xb-hook .xb-body { font-family: var(--font-display); font-size: 21px; line-height: 1.42; letter-spacing: -0.01em; color: var(--heading); }

.xb-answer { background: var(--surface); border: 1px solid var(--line); }
.xb-answer .xb-label { color: var(--brand-ink); }
.xb-answer .xb-body { font-size: 17px; font-weight: 500; line-height: 1.55; color: var(--heading); }

.xb-steps { padding: 4px 0; border-radius: 0; }
.answer .xb-steplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.answer .xb-steplist > li { position: relative; display: grid; grid-template-columns: 28px 1fr; gap: 14px; margin: 0; padding: 0; }
.answer .xb-steplist > li::before { content: none; }
.answer .xb-steplist > li:not(:last-child)::before {
  content: ""; position: absolute; left: 13px; top: 34px; bottom: -14px; width: 2px; border-radius: 2px; background: var(--surface-3);
}
.xb-n {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface-2); color: var(--brand-ink); font-size: 13px; font-weight: 700;
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.xb-steplist li p { margin: 2px 0 6px; }
.xb-steplist li p:last-child { margin-bottom: 0; }

.xb-formula { background: var(--sunken); border: 1px solid var(--line); }
.xb-formula-main { padding: 12px 6px 10px; font-size: 1.3em; text-align: center; overflow-x: auto; color: var(--heading); }
.xb-symbols { display: grid; gap: 6px; margin: 8px 0 0; }
.xb-symbols div { display: grid; grid-template-columns: minmax(44px, max-content) 1fr; gap: 14px; align-items: baseline; padding: 9px 14px; border-radius: 12px; background: var(--surface); }
.xb-symbols dt { font-weight: 600; color: var(--heading); }
.xb-symbols dd { margin: 0; color: var(--muted); font-size: 14.5px; }

.xb-diagram { background: var(--surface); border: 1px solid var(--line); }
.xb-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.xb-hop { display: flex; align-items: center; gap: 8px; }
.xb-node {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px 10px 10px; border-radius: 14px;
  background: var(--surface-2); color: var(--heading); font-size: 14px; font-weight: 500; line-height: 1.3;
}
.xb-node-n {
  flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  color: var(--brand-ink); font-size: 11.5px; font-weight: 700; box-shadow: inset 0 0 0 1.5px var(--brand);
}
.xb-arrow { position: relative; flex: none; width: 22px; height: 2px; border-radius: 2px; background: var(--brand); }
.xb-arrow::after {
  content: ""; position: absolute; right: -1px; top: 50%; width: 7px; height: 7px;
  border-top: 2px solid var(--brand); border-right: 2px solid var(--brand); transform: translateY(-50%) rotate(45deg);
}
.xb-cycle { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 4px auto 0; }
.xb-cycle svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.xb-cycle circle { fill: none; stroke: var(--surface-3); stroke-width: 1.4; stroke-dasharray: 2.4 2.4; }
.xb-cycle path { fill: var(--brand); }
.xb-cycle .xb-node {
  position: absolute; width: 34%; transform: translate(-50%, -50%); flex-direction: column; justify-content: center;
  gap: 5px; padding: 10px; text-align: center; font-size: 13px; background: var(--surface-2); border: 1px solid var(--line);
}
/* node positions on the ring for 3 to 6 stages (inline styles are blocked by the CSP) */
.xb-c3-0 { left: 50.00%; top: 13.00%; }
.xb-c3-1 { left: 82.04%; top: 68.50%; }
.xb-c3-2 { left: 17.96%; top: 68.50%; }
.xb-c4-0 { left: 50.00%; top: 13.00%; }
.xb-c4-1 { left: 87.00%; top: 50.00%; }
.xb-c4-2 { left: 50.00%; top: 87.00%; }
.xb-c4-3 { left: 13.00%; top: 50.00%; }
.xb-c5-0 { left: 50.00%; top: 13.00%; }
.xb-c5-1 { left: 85.19%; top: 38.57%; }
.xb-c5-2 { left: 71.75%; top: 79.93%; }
.xb-c5-3 { left: 28.25%; top: 79.93%; }
.xb-c5-4 { left: 14.81%; top: 38.57%; }
.xb-c6-0 { left: 50.00%; top: 13.00%; }
.xb-c6-1 { left: 82.04%; top: 31.50%; }
.xb-c6-2 { left: 82.04%; top: 68.50%; }
.xb-c6-3 { left: 50.00%; top: 87.00%; }
.xb-c6-4 { left: 17.96%; top: 68.50%; }
.xb-c6-5 { left: 17.96%; top: 31.50%; }
.xb-cycle-list { display: none; }
.xb-loop { margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--brand-ink); }

.xb-example { background: var(--surface); }
.xb-trap { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 6px 20px 20px 6px; }
.xb-trap .xb-label { color: var(--amber); }
.xb-key { background: var(--key-bg); border: 1px solid var(--key-border); } /* the orange edge only: no halo */
.xb-key .xb-label { color: var(--brand-ink); }
.xb-key .xb-body { font-size: 17px; font-weight: 500; line-height: 1.5; color: var(--key-text); }
.xb-note { background: var(--surface); }

/* explain it differently */
.modes { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.modes-label { flex-basis: 100%; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.mode-btn {
  height: 34px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
  font-size: 13.5px; font-weight: 500; color: var(--chip-text); transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.mode-btn:hover { border-color: var(--brand); color: var(--heading); background: var(--surface-2); }
.mode-btn:active { transform: scale(0.97); }

/* copy, feedback */
.after { display: grid; gap: 10px; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.mini-btn { display: inline-grid; place-items: center; width: 32px; height: 32px; border: 0; padding: 0; border-radius: 50%; background: transparent; color: var(--faint); }
.mini-btn:hover { background: var(--surface); color: var(--text); }
.mini-btn svg { width: 16px; height: 16px; }
.mini-btn[aria-pressed="true"] { color: var(--brand-ink); background: var(--surface-2); }
.feedback-box { padding: 16px; border: 1px solid var(--line); border-radius: 18px; display: grid; gap: 10px; background: var(--surface); }
.feedback-box h4 { margin: 0; font-size: 14.5px; font-weight: 600; color: var(--heading); }
.reasons { display: flex; flex-wrap: wrap; gap: 8px; }
.reasons label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; cursor: pointer; color: var(--chip-text); }
.reasons input { accent-color: var(--brand); }
.feedback-box textarea { width: 100%; min-height: 70px; border: 1px solid var(--line); border-radius: 12px; padding: 10px; resize: vertical; background: var(--sunken); }
.note { margin: 0; font-size: 13px; color: var(--faint); }
.note.warn { color: var(--brand-ink); }

/* follow-ups: a few short hairline pills right under the answer's tools (no heading, no rows) */
.msg-body > .followups { margin-top: -6px; }
.followups ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.followups li { min-width: 0; max-width: 100%; }
.followups button {
  display: inline-flex; align-items: center; gap: 7px; max-width: 100%; min-height: 36px; padding: 6px 13px 6px 10px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--chip-text); text-align: left;
  font-size: 13.5px; line-height: 1.3; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.followups button span { min-width: 0; }
.followups button:hover { background: var(--surface); border-color: var(--line-strong); color: var(--heading); }
.followups button:active { background: var(--surface-2); }
.followups button svg { width: 14px; height: 14px; color: var(--brand-ink); flex: none; }
@media (max-width: 767px) { .followups button { min-height: 40px; } }
@media (max-width: 480px) { .followups li:nth-child(n+3) { display: none; } } /* small phones: two are plenty */

/* exam question */
.eyebrow { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--faint); }
.quiz-card { padding: 18px; border: 1px solid var(--line); border-radius: 22px; background: var(--surface); display: grid; gap: 14px; }
.quiz-head { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.quiz-head .eyebrow { color: var(--brand-ink); }
.quiz-head small { color: var(--faint); font-size: 12px; }
.quiz-q { font-size: 15.5px; line-height: 1.6; color: var(--heading); }
.quiz-options { display: grid; gap: 8px; }
.quiz-options button {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface-2); color: var(--text); text-align: left; font-size: 14.5px; transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.quiz-options button:hover:not([disabled]) { border-color: var(--line-strong); transform: translateY(-1px); }
.quiz-options .letter { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-3); font-weight: 700; font-size: 12.5px; }
.quiz-options button.right { border-color: rgba(74, 222, 128, 0.5); background: rgba(74, 222, 128, 0.08); }
.quiz-options button.right .letter { background: #22c55e; color: #052e16; }
.quiz-options button.wrong { border-color: rgba(248, 113, 113, 0.5); background: rgba(248, 113, 113, 0.08); }
.quiz-options button.wrong .letter { background: #dc2626; color: #fff; }
.quiz-options button[disabled], .quiz-options button[aria-disabled="true"] { cursor: default; }
.quiz-options button[aria-disabled="true"]:hover { transform: none; }
.quiz-result { margin: 0; font-weight: 500; font-size: 14px; color: var(--heading); }
.quiz-result:empty { display: none; }

.err-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; color: var(--danger); font-size: 14px; }
.end-card { padding: 22px; border-radius: 22px; background: var(--surface); text-align: center; }
.end-card h3 { margin: 0; font-size: 19px; color: var(--heading); }
.end-card p { margin: 8px 0 16px; color: var(--muted); }
.crisis { padding: 20px; border-radius: 22px; background: var(--surface); border: 1px solid rgba(248, 113, 113, 0.25); display: grid; gap: 10px; }
.crisis h3 { margin: 0; font-size: 17px; display: flex; gap: 8px; align-items: center; color: var(--heading); }
.crisis h3 svg { color: var(--danger); }
.crisis p { margin: 0; color: var(--muted); }
.crisis .row { display: flex; flex-wrap: wrap; gap: 8px; }
.crisis a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); text-decoration: none; font-weight: 500; font-size: 14px; }
.crisis a svg { width: 16px; height: 16px; }

/* dock */
.dock { flex: none; padding: 10px 16px calc(14px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, transparent, var(--bg) 35%); }
.dock-inner { position: relative; width: min(720px, 100%); margin: 0 auto; }
/* the mascot perched on the chat box, feet over its top edge */
.dock-perch { position: absolute; z-index: 3; right: 30px; bottom: calc(100% - 8px); width: 54px; line-height: 0; cursor: pointer; }
.dock-perch .mascot { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.25)); }
.dock-wrap { --beam-radius: 26px; }
/* calm like han1: the glow only runs while an answer is being written */
.dock-wrap.beam[data-beam="idle"], .dock-wrap.beam[data-beam="idle"]:focus-within { --beam-o: 0; }
.dock-wrap.beam[data-beam="idle"] .beam-stroke::before { animation: none; }
.dock-form {
  display: flex; align-items: flex-end; gap: 4px; padding: 6px 6px 6px 20px; border-radius: 26px; background: var(--surface);
  border: 1px solid var(--line); transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.dock-form:focus-within { border-color: var(--focus); }
.dock-form textarea { flex: 1; min-height: 40px; max-height: 160px; padding: 9px 0; border: 0; outline: none; resize: none; background: transparent; font-size: 15px; line-height: 1.45; }
.dock-form textarea::placeholder { color: var(--faint); }
.dock-form .send-btn { width: 40px; height: 40px; }
.dock-form .send-btn svg { width: 17px; height: 17px; }
.dock-form .send-btn.stopping { background: var(--surface-3); }
.disclaimer { margin: 8px 0 0; text-align: center; font-size: 11.5px; color: var(--faint); }
.disclaimer a { color: var(--faint); }
#turnstile-slot:empty { display: none; }
#turnstile-slot { display: flex; justify-content: center; margin-bottom: 10px; }

/* --- lead card (only while lead capture is on) --------------------------------------- */
.lead-wrap { --beam-radius: 24px; --beam-strength: 0.8; }
.lead { padding: 22px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); display: grid; gap: 16px; }
.lead-head { display: flex; gap: 14px; align-items: flex-start; }
.lead-icon { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; background: rgba(74, 222, 128, 0.12); color: var(--ok); }
.lead-icon.brand { background: var(--brand-tint); color: var(--brand-ink); }
.lead h3 { margin: 0; font-size: 17px; color: var(--heading); }
.lead-head p { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.lead form { display: grid; gap: 14px; }
.seg { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--sunken); gap: 4px; }
.seg button { border: 0; background: transparent; height: 34px; padding: 0 16px; border-radius: 999px; font-weight: 500; font-size: 14px; color: var(--muted); }
.seg button[aria-pressed="true"] { background: var(--surface-3); color: var(--heading); }
.field-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.field-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field { display: grid; gap: 6px; }
.field label, .field .field-label { font-size: 13px; font-weight: 500; color: var(--muted); }
.field input, .field select {
  height: 44px; width: 100%; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--sunken);
  font-size: 15px; transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); } /* a crisp edge, not a halo */
.field small { color: var(--faint); font-size: 12.5px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muted); line-height: 1.45; cursor: pointer; }
.check input { margin-top: 2px; width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.check a { color: var(--brand-ink); }
.primary-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px;
  background: var(--heading); color: var(--bg); font-weight: 600; font-size: 15px; transition: opacity 0.15s ease, transform 0.15s ease;
}
.primary-btn:hover { opacity: 0.9; }
.primary-btn:active { transform: scale(0.98); }
.primary-btn[disabled] { opacity: 0.6; cursor: wait; }
.primary-btn.brand { background: var(--brand); color: #fff; }
.form-error { margin: 0; color: var(--danger); font-size: 13.5px; }
.otp {
  height: 56px; width: 100%; max-width: 280px; padding: 0 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--sunken);
  font: 600 24px/1 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: 0.5em; text-align: center;
}
.otp:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.link-btn { border: 0; background: none; padding: 0; color: var(--brand-ink); font-weight: 500; font-size: 14px; text-decoration: underline; text-underline-offset: 2px; }
.link-btn[disabled] { color: var(--faint); text-decoration: none; cursor: default; }
.store-row { display: flex; flex-wrap: wrap; gap: 10px; }
.store-btn { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 18px; border-radius: 14px; background: var(--surface-2); color: var(--heading); text-decoration: none; font-weight: 500; font-size: 14px; }
.lead-done { display: grid; gap: 14px; }
.lead-done .ok-mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(74, 222, 128, 0.12); color: var(--ok); }
.lead-done h3 { font-size: 19px; }
.lead-done p { margin: 0; color: var(--muted); }
.dismiss { justify-self: start; }

/* --- privacy / terms pages ------------------------------------------------------------ */
.doc { width: min(720px, 100% - 32px); margin: 0 auto; padding: 56px 0 96px; }
.doc-back { display: inline-block; margin-bottom: 36px; color: var(--brand-ink); font-weight: 500; text-decoration: none; }
.doc h1 { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(40px, 6vw, 60px); letter-spacing: -0.03em; color: var(--heading); }
.doc-meta { color: var(--faint); margin: 10px 0 32px; }
.doc h2 { margin: 36px 0 10px; font-size: 19px; font-weight: 600; letter-spacing: -0.01em; color: var(--heading); }
.doc p, .doc li { color: var(--muted); font-size: 16px; line-height: 1.75; }
.doc a { color: var(--brand-ink); }

/* --- phones ----------------------------------------------------------------------------- */
@media (max-width: 1259px) {
  .corner { position: absolute; } /* scrolls away instead of sitting on the content column */
}
@media (max-width: 860px) {
  .bento-row, .bento-row.flip { grid-template-columns: 1fr; direction: ltr; }
  /* one column: the about tile and the small tile join into one card, a hairline between them */
  .bento-side { grid-template-rows: none; grid-template-columns: 1fr; gap: 0; }
  .bento-side > .tile-about { border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: 20px; }
  .bento-side > .tile-small {
    min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 2px 12px;
    padding: 16px 24px 20px; border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: inset 0 1px 0 var(--line);
  }
  .tile-small .tile-stat { font-size: 32px; }
  .tile-small .tile-label { flex: 1 1 150px; }
  .tile-doubt .tile-label { flex: none; }
  .bento-side > .tile-doubt { flex-direction: column; align-items: flex-start; }
  .tile-doubt .tile-chips { margin-top: 4px; }
  .tile-small .cm-subjects, .tile-small .cm-route { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  :root { --nav-h: 76px; }
  html { scroll-padding-top: 64px; scroll-padding-bottom: 96px; }
  .topnav { display: none; }
  .corner { top: 14px; right: 14px; gap: 8px; }
  .bottomnav {
    position: fixed; z-index: 40; left: 16px; right: 16px; bottom: 12px; display: flex; justify-content: space-around; align-items: center;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom) / 2); border-radius: 18px; background: var(--nav-bg);
    border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .bottomnav { border-radius: 999px; }
  .bottomnav a { padding: 8px 10px; border-radius: 999px; font-size: 14px; white-space: nowrap; color: var(--faint); text-decoration: none; }
  .bottomnav a.on { color: var(--heading); font-weight: 600; }
  .hero { padding: 22vh 16px calc(var(--nav-h) + 14px); padding-top: max(96px, 22svh); }
  .hero-mark { margin-bottom: 22px; }
  .askbox { margin-bottom: 24px; }
  .chip-shuffle { margin-top: 6px; }
  .askbox textarea { font-size: 16px; } /* 16px stops iOS zooming into the field */
  .peek-stage { width: 96px; padding-top: 28px; }
  .features { padding: 40px 16px 80px; }
  .bento-art { aspect-ratio: auto; padding: 96px 18px 24px; }
  .bento-perch { right: 18px; width: 76px; }
  .bento-row.flip .bento-perch { left: 18px; }
  .mock { padding: 20px 18px; }
  .mock-hook { font-size: 16.5px; }
  .footer { width: calc(100% - 32px); padding-bottom: 110px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .thread { padding: 24px 14px 20px; }
  .msg-bot { grid-template-columns: minmax(0, 1fr); gap: 8px; } /* full-width answers: the face sits above them */
  .msg-bot > .mascot.msg-avatar { width: 28px; height: 28px; margin: 0; }
  .answer .xb-steplist > li { grid-template-columns: 24px 1fr; gap: 12px; }
  .xb-n { width: 24px; height: 24px; font-size: 12px; }
  .answer .xb-steplist > li:not(:last-child)::before { left: 11px; top: 30px; }
  /* 16px stops iPhones zooming into fields */
  .dock-form textarea, .feedback-box textarea, .field input, .field select { font-size: 16px; }
  .msg-user { max-width: 88%; }
  .sheet-bar .ghost-btn span[data-i18n] { display: none; }
  .sheet-bar .ghost-btn { width: 36px; padding: 0; justify-content: center; }
  .grid2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .hero-mark { width: 176px; min-height: 56px; }
}
@media (max-width: 380px) {
  .bottomnav a { padding: 8px 7px; font-size: 13px; }
}
@media (max-width: 600px) {
  .xb { padding: 14px 15px; }
  .xb-hook { padding: 2px 0 2px 14px; }
  .xb-hook .xb-body { font-size: 19px; }
  .xb-flow { flex-direction: column; align-items: stretch; gap: 0; }
  .xb-hop { flex-direction: column; align-items: stretch; gap: 0; }
  .xb-arrow { align-self: flex-start; width: 2px; height: 18px; margin-left: 21px; }
  .xb-arrow::after { right: auto; left: 50%; top: auto; bottom: -1px; transform: translateX(-50%) rotate(135deg); }
  .xb-cycle { display: none; }
  .xb-cycle-list { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
}

/* --- hero mark (generated by scripts/build_art.py from art/mark/mark.css) --- */
/* Ask Eduport hero mark: "eduport" written by hand, the t crossed, then a teacher's tick.
   Inline mark.svg in the page (CSS cannot reach inside an <img>) and link this file.
   The pen lands 0.25s after the mark appears (--mk-delay), writes for 2.13s, then rests.
   Hooks: color (ink), --mk-delay (wait before writing), --mk-seek (jump into the animation),
   .mk-sm (small size on demand), .mk-still (finished mark, no animation). */

.mk-mark {
  display: block;
  width: 200px;
  height: auto;
  color: #FB6514;
  overflow: visible;
}

.mk-stroke {
  stroke-dasharray: 1 2;
  animation-name: mk-draw;
  animation-duration: var(--mk-dur, .1s);
  animation-timing-function: var(--mk-ease, linear);
  animation-delay: calc(var(--mk-delay, 0.25s) + var(--mk-at, 0s) - var(--mk-seek, 0s));
  animation-fill-mode: both;
}

@keyframes mk-draw {
  from { stroke-dashoffset: 1.001; }
  to   { stroke-dashoffset: 0; }
}

/* Writing order: one class per stretch of new ink. --mk-at is when it starts (s after the
   pen lands) and --mk-dur how long it takes. The gaps between them are the pen turning at
   a cusp, running back over ink already down, or lifting: before the cross at 1.74s and
   before the tick at 2.00s. The word itself is done at 1.58s. */
.mk-s1  { --mk-at: 0s; --mk-dur: 0.109s; --mk-ease: cubic-bezier(.5,0,.78,.78); } /* e, then up into the d */
.mk-s2  { --mk-at: 0.109s; --mk-dur: 0.136s; --mk-ease: cubic-bezier(.22,.22,.4,1); } /* e, then up into the d (cont.) */
.mk-s3  { --mk-at: 0.297s; --mk-dur: 0.068s; --mk-ease: linear; } /* round the d, up the stem */
.mk-s4  { --mk-at: 0.364s; --mk-dur: 0.047s; --mk-ease: cubic-bezier(.22,.22,.4,1); } /* round the d, up the stem (cont.) */
.mk-s5  { --mk-at: 0.456s; --mk-dur: 0.076s; --mk-ease: cubic-bezier(.22,.22,.4,1); } /* d foot, up into u */
.mk-s6  { --mk-at: 0.568s; --mk-dur: 0.082s; --mk-ease: cubic-bezier(.22,.22,.4,1); } /* u */
.mk-s7  { --mk-at: 0.686s; --mk-dur: 0.076s; --mk-ease: cubic-bezier(.22,.22,.4,1); } /* u, up into p */
.mk-s8  { --mk-at: 0.778s; --mk-dur: 0.057s; --mk-ease: cubic-bezier(.45,.05,.4,1); } /* p descender */
.mk-s9  { --mk-at: 0.875s; --mk-dur: 0.124s; --mk-ease: cubic-bezier(.22,.22,.4,1); } /* p bowl */
.mk-s10 { --mk-at: 1.036s; --mk-dur: 0.089s; --mk-ease: cubic-bezier(.22,.22,.4,1); } /* join, over the top of o */
.mk-s11 { --mk-at: 1.169s; --mk-dur: 0.034s; --mk-ease: linear; } /* o, anticlockwise */
.mk-s12 { --mk-at: 1.203s; --mk-dur: 0.071s; --mk-ease: cubic-bezier(.22,.22,.4,1); } /* o, anticlockwise (cont.) */
.mk-s13 { --mk-at: 1.29s; --mk-dur: 0.036s; --mk-ease: cubic-bezier(.45,.05,.4,1); } /* bridge to r */
.mk-s14 { --mk-at: 1.342s; --mk-dur: 0.036s; --mk-ease: cubic-bezier(.45,.05,.4,1); } /* r stem */
.mk-s15 { --mk-at: 1.414s; --mk-dur: 0.061s; --mk-ease: cubic-bezier(.22,.22,.4,1); } /* r shoulder, up to t */
.mk-s16 { --mk-at: 1.491s; --mk-dur: 0.089s; --mk-ease: cubic-bezier(.45,.05,.4,1); } /* t stem and exit */
.mk-s17 { --mk-at: 1.74s; --mk-dur: 0.12s; --mk-ease: cubic-bezier(.45,.05,.4,1); } /* pen lift, cross the t */
.mk-s18 { --mk-at: 2s; --mk-dur: 0.046s; --mk-ease: cubic-bezier(.45,.05,.4,1); } /* pen lift, tick down */
.mk-s19 { --mk-at: 2.062s; --mk-dur: 0.068s; --mk-ease: cubic-bezier(.45,.05,.4,1); } /* tick flick up */

/* The pen's real speed inside each stroke: the two-thirds power law of handwriting, so it
   slows in the bowls and turns, runs on the straights, and eases into every stop.
   Browsers without linear() keep the simpler eases above. */
@supports (animation-timing-function: linear(0, 1)) {
  .mk-s1  { --mk-ease: linear(0, .012 4.1%, .038 7.5%, .165 16.4%, .223 21.4%, .553 58.1%, .680 71.3%, .801 82.9%, 1); }
  .mk-s2  { --mk-ease: linear(0, .127 12.0%, .325 34.4%, .384 39.3%, .531 49.6%, .778 72.3%, .968 92.6%, .991 96.2%, 1); }
  .mk-s3  { --mk-ease: linear(0, .258 23.0%, .555 56.3%, 1); }
  .mk-s4  { --mk-ease: linear(0, .469 42.8%, .918 85.2%, .975 92.6%, 1); }
  .mk-s5  { --mk-ease: linear(0, .092 7.0%, .315 39.1%, .399 49.3%, .495 59.4%, .604 70.1%, .951 92.7%, .987 96.5%, 1); }
  .mk-s6  { --mk-ease: linear(0, .125 14.1%, .352 42.2%, .639 73.3%, .949 92.9%, .985 96.4%, 1); }
  .mk-s7  { --mk-ease: linear(0, .089 6.2%, .162 16.0%, .255 31.1%, .321 40.4%, .477 58.1%, .572 67.3%, .950 92.6%, .986 96.4%, 1); }
  .mk-s8  { --mk-ease: linear(0, .017 4.9%, .058 10.4%, .933 88.8%, .975 93.7%, 1); }
  .mk-s9  { --mk-ease: linear(0, .238 22.3%, .410 40.9%, .714 65.9%, .919 85.9%, .979 93.0%, 1); }
  .mk-s10 { --mk-ease: linear(0, .124 10.0%, .564 48.2%, .822 71.7%, .964 87.7%, .990 93.6%, 1); }
  .mk-s11 { --mk-ease: linear(0, .289 24.4%, .504 44.5%, .659 60.8%, 1); }
  .mk-s12 { --mk-ease: linear(0, .238 23.0%, .659 57.1%, .821 71.8%, .911 81.3%, .954 87.0%, .986 93.3%, 1); }
  .mk-s13 { --mk-ease: linear(0, .024 7.2%, .079 13.5%, .324 33.8%, .652 64.0%, .920 85.9%, .978 93.3%, 1); }
  .mk-s14 { --mk-ease: linear(0, .025 7.6%, .083 15.2%, .900 83.2%, .967 91.0%, 1); }
  .mk-s15 { --mk-ease: linear(0, .257 24.1%, .501 51.9%, .586 60.7%, .679 68.8%, .942 89.3%, .984 94.8%, 1); }
  .mk-s16 { --mk-ease: linear(0, .015 3.5%, .051 7.0%, .613 46.9%, .791 74.5%, .873 84.4%, .973 93.5%, .992 96.6%, 1); }
  .mk-s17 { --mk-ease: linear(0, .024 7.9%, .090 16.6%, .889 81.7%, .966 90.6%, 1); }
  .mk-s18 { --mk-ease: linear(0, .017 8.2%, .050 15.6%, .109 23.7%, .184 30.9%, .258 36.2%, .333 40.4%, .391 43.1%, .541 48.8%, .649 54.3%, .749 60.8%, .840 68.7%, .899 75.3%, .949 83.1%, .983 91.2%, 1); }
  .mk-s19 { --mk-ease: linear(0, .033 11.0%, .075 17.5%, .125 23.1%, .233 32.1%, .783 70.6%, .858 76.5%, .917 82.4%, .958 88.0%, .983 93.1%, 1); }
}

/* Phones: 120 px wide, with a little more ink so the line stays about 2 px. */
@media (max-width: 640px) {
  .mk-mark { width: 120px; }
  .mk-mark .mk-ink { stroke-width: 5.1; }
}

/* The same small setting, on demand. */
.mk-mark.mk-sm { width: 120px; }
.mk-mark.mk-sm .mk-ink { stroke-width: 5.1; }

/* The finished mark, without the animation. */
.mk-still .mk-stroke { animation: none; stroke-dasharray: none; }

@media (prefers-reduced-motion: reduce) {
  .mk-stroke { animation: none; stroke-dasharray: none; }
}
/* --- end of hero mark --- */

/* --- phones, measured in the mobile audit (scratchpad mobile-audit/fixes.css) -------------- */


/* F1. (landed in styles.css at 02:08: .msg-bot > .mascot.msg-avatar is 28px on phones; nothing to add) */

/* F2. Chat: the perched dock mascot stops covering answer text. It stands behind the chat box
   with only its head over the edge, and the thread fades out under it. */
@media (max-width: 767px) {
  .dock-wrap { z-index: 1; }
  .dock-perch { z-index: 0; bottom: calc(100% - 26px); width: 50px; right: 64px; }
  /* (the thread's fade under Edu is in journey.css, with the band Edu stands in) */
}

/* F3. (landed in styles.css at 02:08: .chip { padding: 8px 14px } at <=380px and a 32px shuffle keep one row at
   360px; F4 gives the shuffle a 44px hit area without widening the row) */

/* F4. Touch targets on phones: 44px hit areas. Where the look must not change, an invisible
   ::after extends the hit area beyond the drawn circle (no layout shift). */
@media (max-width: 767px) {
  /* (the theme switch has its own 44px tap area in theme-toggle.css) */
  .chip-shuffle, .askbox .send-btn, .askbox .icon-btn, .mini-btn, .sheet-bar .icon-btn,
  .sheet-bar .ghost-btn, .dock-form .icon-btn { position: relative; }
  .chip-shuffle::after, .mini-btn::after, .askbox .send-btn::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; }
  .askbox .icon-btn::after, .sheet-bar .icon-btn::after, .sheet-bar .ghost-btn::after,
  .dock-form .icon-btn::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
  .chip { min-height: 44px; }
  .chip-btn { min-height: 44px; }
  .mode-btn { height: 40px; }
  .bottomnav { padding: 4px; bottom: max(12px, env(safe-area-inset-bottom)); }
  .bottomnav a { flex: 1 1 auto; text-align: center; padding: 12px 4px; }
  .hero { padding-bottom: calc(var(--nav-h) + 2px + max(12px, env(safe-area-inset-bottom))); }
  .actions { gap: 8px; }
  .sheet-actions { gap: 8px; }
  .footer-links { gap: 0; }
  .footer-links a { display: inline-block; padding: 11px 0; }
}

/* F5. Touch screens never hover: show the "open" arrow on the feature cards. */
@media (hover: none) {
  .tile-arrow { opacity: 1; transform: none; }
}

/* F6. Chat chrome on phones: a shorter bar, safe-area aware, and no disclaimer while typing
   (the keyboard is up then, and every line of answer counts). */
@media (max-width: 767px) {
  .sheet-bar { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); }
  .dock:focus-within .disclaimer { display: none; }
}

/* F7. The steps card has no box on phones, so it needs no side padding (+30px per line). */
@media (max-width: 600px) {
  .xb-steps { padding: 4px 0; }
}

/* F8. Tablets 768-1023px: the floating pill and the corner (theme toggle) overlapped by 18px. */
@media (min-width: 768px) and (max-width: 1023px) {
  .topnav { justify-content: flex-start; padding-left: 24px; }
}

/* F9. Phones on their side (740x360): the bottom bar covered the mascot. Use the top pill,
   as a 844x390 phone already does. */
@media (max-width: 767px) and (orientation: landscape) and (max-height: 500px) {
  .bottomnav { display: none; }
  .topnav { display: flex; top: 12px; justify-content: flex-start; padding-left: 16px; }
  .hero { padding-bottom: 24px; }
}

/* F10. No fixed bar at the top on phones: section links land at the section. */
@media (max-width: 767px) {
  html { scroll-padding-top: 16px; }
  .features { scroll-margin-top: 0; }
}

/* No grey tap flash on Android; the :active styles give the feedback. */
a, button, summary { -webkit-tap-highlight-color: transparent; }
@media (max-width: 767px) {
  .dock-form textarea { max-height: 112px; }
  /* The empty chat already has a big waving mascot; the one on the chat box joins with the first answer. */
  .sheet:has(.empty) .dock-perch { visibility: hidden; }
  /* A bigger hello on tall phones, the same on short ones. */
  .peek-stage { width: clamp(96px, 13svh, 124px); }
}
@media (max-height: 500px) {
  .hero { padding-top: 72px; }
}

/* --- answer cards, round 4: han1-style, neutral surfaces, hairlines, orange only as a line or icon --- */
.xb-answer, .xb-example, .xb-trap, .xb-key, .xb-note, .xb-formula, .xb-diagram {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: none;
}
/* the label: a small framed icon, then a quiet caps label */
.xb-label { gap: 9px; margin-bottom: 10px; letter-spacing: 0.1em; }
.xb-label svg {
  width: 24px; height: 24px; padding: 4px; border-radius: 8px; box-sizing: border-box;
  border: 1px solid var(--line-strong); background: var(--sunken); color: var(--muted);
}
.xb-hook .xb-label svg, .xb-answer .xb-label svg, .xb-key .xb-label svg { color: var(--brand-ink); }
.xb-trap .xb-label svg { color: var(--amber); }
/* Watch out: a neutral card with a thin amber rule on its left edge */
.xb-trap { position: relative; border-radius: 18px; border-left: 1px solid var(--line); padding-left: 20px; }
.xb-trap::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: var(--amber); }
/* Remember this: the same neutral card, an orange hairline across the top, no fill or halo */
.xb-key { position: relative; --key-bg: var(--surface); background: var(--surface); border-color: var(--line); overflow: hidden; }
.xb-key::before { content: ""; position: absolute; left: 18px; top: 0; width: 32px; height: 2px; border-radius: 0 0 2px 2px; background: var(--brand); }
.xb-key .xb-body { color: var(--heading); }
/* steps: a connected timeline of hairline rings */
.answer .xb-steplist { gap: 18px; }
.xb-n {
  background: var(--bg); color: var(--heading); font-size: 12.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px var(--line-strong);
}
.answer .xb-steplist > li:first-child .xb-n { color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--brand); }
.answer .xb-steplist > li:not(:last-child)::before { width: 1px; left: 13.5px; top: 32px; bottom: -16px; background: var(--line-strong); }

/* explain it differently: one segmented group, each option an icon, a name and a short hint */
.modes { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--surface); }
.modes-label { grid-column: 1 / -1; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.mode-btn {
  position: relative; display: grid; grid-template-columns: 18px 1fr; column-gap: 8px; align-items: center; text-align: left;
  height: auto; min-height: 58px; padding: 10px 12px; border: 0; border-radius: 0; background: transparent;
  color: var(--heading); font-size: 13.5px; font-weight: 500; line-height: 1.25;
}
.mode-btn + .mode-btn { box-shadow: inset 1px 0 0 var(--line); }
.mode-btn::before {
  content: ""; grid-row: 1 / span 2; width: 18px; height: 18px; background: var(--brand-ink);
  -webkit-mask: var(--mi) center / contain no-repeat; mask: var(--mi) center / contain no-repeat;
}
.mode-btn::after { grid-column: 2; font-size: 11.5px; font-weight: 400; color: var(--faint); }
.mode-btn:nth-of-type(1) { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h10M4 17h6'/%3E%3C/svg%3E"); }
.mode-btn:nth-of-type(1)::after { content: "Shorter words"; }
.mode-btn:nth-of-type(2) { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4v14M6 12l6 6 6-6'/%3E%3C/svg%3E"); }
.mode-btn:nth-of-type(2)::after { content: "More detail"; }
.mode-btn:nth-of-type(3) { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 11l9-7 9 7v9H3z'/%3E%3Cpath d='M10 20v-6h4v6'/%3E%3C/svg%3E"); }
.mode-btn:nth-of-type(3)::after { content: "From everyday life"; }
.mode-btn:nth-of-type(4) { --mi: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='18' r='2.5'/%3E%3Cpath d='M8.5 6H15a3 3 0 0 1 0 6H9a3 3 0 0 0 0 6h6.5'/%3E%3C/svg%3E"); }
.mode-btn:nth-of-type(4)::after { content: "As a picture"; }
.mode-btn:hover { background: var(--surface-2); border-color: transparent; }
.mode-btn:active { transform: none; background: var(--surface-3); }
.mode-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; border-radius: 0; }
@media (max-width: 600px) {
  .modes { grid-template-columns: 1fr 1fr; }
  /* phones: the name says enough; no hint line, so the four options take two short rows */
  .modes-label { padding: 8px 14px; }
  .mode-btn { min-height: 44px; padding: 8px 12px; }
  .modes .mode-btn::after { content: none; }
  .mode-btn:nth-of-type(3) { box-shadow: inset 0 1px 0 var(--line); }
  .mode-btn:nth-of-type(4) { box-shadow: inset 1px 0 0 var(--line), inset 0 1px 0 var(--line); }
}

/* copy / helpful / not helpful: one quiet hairline row */
.actions { gap: 2px; padding-top: 6px; border-top: 1px solid var(--line-2); }
.mini-btn { width: 34px; height: 34px; border-radius: 10px; color: var(--faint); transition: background 0.15s ease, color 0.15s ease; }
.mini-btn:hover { background: var(--surface-2); color: var(--heading); }
.mini-btn[aria-pressed="true"] { background: transparent; color: var(--brand-ink); box-shadow: inset 0 0 0 1px var(--line-strong); }

/* --- the mini-lesson path (assets/path.js) and "Check yourself" (explain.js) ---------------------
   A slim rail in its own gutter left of the cards: a hairline, one ring per step of the lesson
   (Picture this, In short, Steps, Check yourself, Remember this), and a thin orange line that
   fills down to the step you have read to. It never sits over the words. */
.lesson { position: relative; }
.lesson.has-path { padding-left: 22px; }
.lesson-rail { display: none; position: absolute; left: 0; top: 0; bottom: 14px; width: 14px; pointer-events: none; }
.lesson.has-path .lesson-rail { display: block; }
.lesson-rail::before { content: ""; position: absolute; left: 6px; top: 0; bottom: 0; width: 1px; background: var(--line); }
.lesson-fill {
  position: absolute; left: 6px; top: 0; width: 1px; height: 1px; background: var(--brand);
  transform-origin: 0 0; transform: scaleY(0); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.lesson-dot {
  position: absolute; left: 2px; top: -4.5px; width: 9px; height: 9px; border-radius: 50%;
  background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.lesson-dot.is-on { background: var(--brand); box-shadow: inset 0 0 0 1.5px var(--brand); }
@media (max-width: 767px) {
  .lesson.has-path { padding-left: 18px; }
  .lesson-rail::before, .lesson-fill { left: 4px; }
  .lesson-dot { left: 0; }
}

/* Check yourself: one quick question, the answer revealed on tap */
.xb-check { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; }
.xb-check .xb-label svg { color: var(--brand-ink); }
.xb-q { color: var(--heading); font-weight: 500; }
.xb-q > :last-child { margin-bottom: 0; }
.xb-reveal {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 10px; padding: 0 16px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: transparent; color: var(--heading); font-size: 14px; font-weight: 500; cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.xb-reveal:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.xb-a { display: none; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--text); }
.xb-a > :last-child { margin-bottom: 0; }
.xb-check.is-revealed .xb-a { display: block; animation: xb-in 0.35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@media (hover: hover) and (pointer: fine) { .xb-reveal:hover { background: var(--surface-2); } }
@media (prefers-reduced-motion: reduce) {
  .lesson-fill, .lesson-dot, .xb-reveal { transition: none; }
  .xb-check.is-revealed .xb-a { animation: none; }
}

/* short phones: the suggestion list tightens so Edu still has room to fly in beside it */
@media (max-width: 767px) and (max-height: 780px) {
  .hero-mark { margin-bottom: 18px; }
  .askbox { margin-bottom: 18px; }
  .chip { min-height: 46px; padding-top: 6px; padding-bottom: 6px; }
  .chip-glyph { width: 26px; height: 26px; }
  .chip-shuffle { margin-top: 2px; }
}