/* ==========================================================================
   lyeli — draft stylesheet
   Palette taken from the logo: indigo -> violet -> orchid gradient on a cool
   paper ground, with the flashcard sample's mint + navy as the study colors.
   Token order matters: bare :root holds the complete LIGHT palette, then the
   system-dark media query, then the explicit [data-theme] stamps.
   ========================================================================== */

:root {
  /* --- surfaces & ink (light) --- */
  --bg:            #F4F4FA;
  --bg-sunk:       #EAEAF4;
  --surface:       #FFFFFF;
  --surface-2:     #F6F6FC;
  --ink:           #1C2033;
  --ink-soft:      #333A55;
  --muted:         #676E90;
  --line:          #E3E3F0;
  --line-strong:   #CFCFE4;

  /* --- brand, straight off the logo --- */
  --brand:         #0F2D21;   /* the logo's deep green: the one brand colour */
  --blue:          #0F2D21;
  --violet:        #0F2D21;
  --orchid:        #0F2D21;
  --accent:        #0F2D21;
  --accent-hover:  #1C4A38;
  --accent-ink:    #FFFFFF;
  --accent-wash:   #E4ECE7;
  --grad:          linear-gradient(var(--brand), var(--brand));

  /* --- the AI mark's own gradient (YelAI + the lyeli wordmark logo) ---
     kept separate from --blue/--violet/--orchid above on purpose: this is
     the new logo gradient the reader chose, and it should be free to move
     independently of the discipline tints, which still borrow the old
     brand blue/orchid for --d-english/--d-arts further down. */
  --ai-1:          #0F2D21;
  --ai-2:          #0F2D21;
  --ai-3:          #0F2D21;
  --ai-grad:       linear-gradient(var(--brand), var(--brand));

  /* --- study colors, from the flashcard sample --- */
  --mint:          #0F2D21;
  --mint-soft:     #E4ECE7;
  --navy:          #22303F;
  --amber:         #E9A13B;
  --berry:         #D2455C;
  --berry-wash:    #FBE6EA;

  /* --- discipline tints (AP catalog) --- */
  --d-arts:        #0F2D21;
  --d-english:     #0F2D21;
  --d-history:     #C2743C;
  --d-math:        #0F2D21;
  --d-science:     #2A9CB8;
  --d-language:    #E0567F;
  --d-capstone:    #0F2D21;
  --d-career:      #0F2D21;
  --coral:         #E8734F;

  /* --- form --- */
  --r-xs: 8px;
  --r-sm: 12px;
  --r:    18px;
  --r-lg: 26px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px rgba(28, 32, 51, .06), 0 2px 8px rgba(28, 32, 51, .05);
  --shadow-2: 0 4px 12px rgba(28, 32, 51, .08), 0 18px 40px rgba(45, 40, 90, .12);
  --shadow-3: 0 24px 70px rgba(30, 26, 66, .28);
  --glow:     0 14px 34px rgba(15, 45, 33, .28);
  --ring: 0 0 0 3px var(--accent-wash), 0 0 0 5px var(--accent);

  --maxw: 1180px;
  --header-h: 68px;

  --font-display: "Poppins", "Segoe UI", system-ui, sans-serif;
  --font-body: "Figtree", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-card: "Oswald", "Arial Narrow", sans-serif;
  --font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
  --font-hand: "Caveat", "Segoe Script", "Bradley Hand", cursive;

  --ease: cubic-bezier(.22, .68, .32, 1);
  --ease-out-back: cubic-bezier(.2, .9, .3, 1.28);

  color-scheme: light;
}

/* Dark by system preference — only when the reader has not pinned a theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dim"]) {
    --brand: #2F7D5B;
    --bg:          #000000;
    --bg-sunk:     #000000;
    --surface:     #0A0A0B;
    --surface-2:   #131315;
    --ink:         #F2F2F5;
    --ink-soft:    #CACAD3;
    --muted:       #9B9BA7;
    --line:        #1F1F23;
    --line-strong: #34343A;

    --blue:        #5FB48E;
    --violet:      #5FB48E;
    --orchid:      #5FB48E;
    --accent:      #5FB48E;
    --accent-hover:#7CC6A3;
    --accent-ink:  #0B0A1C;
    --accent-wash: #14261D;

    --ai-1:        #5FB48E;
    --ai-2:        #5FB48E;
    --ai-3:        #5FB48E;

    --mint:        #5FB48E;
    --mint-soft:   #14261D;
    --navy:        #D6E3EC;
    --amber:       #F0B45C;
    --berry:       #F27A8E;
    --berry-wash:  #3C1E27;

    --d-arts:      #5FB48E;
    --d-english:   #5FB48E;
    --d-history:   #DFA06A;
    --d-math:      #5FB48E;
    --d-science:   #55C3DE;
    --d-language:  #FF87A7;
    --d-capstone:  #5FB48E;
    --d-career:    #ADC95E;
    --coral:       #FF9569;

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-2: 0 6px 16px rgba(0, 0, 0, .45), 0 20px 46px rgba(0, 0, 0, .38);
    --shadow-3: 0 26px 80px rgba(0, 0, 0, .62);
    --glow:     0 14px 34px rgba(95, 180, 142, .3);

    color-scheme: dark;
  }
}

/* Explicit Dark — beats a light OS. */
:root[data-theme="dark"] {
  --brand: #2F7D5B;
  --bg:          #000000;
  --bg-sunk:     #000000;
  --surface:     #0A0A0B;
  --surface-2:   #131315;
  --ink:         #F2F2F5;
  --ink-soft:    #CACAD3;
  --muted:       #9B9BA7;
  --line:        #1F1F23;
  --line-strong: #34343A;

  --blue:        #5FB48E;
  --violet:      #5FB48E;
  --orchid:      #5FB48E;
  --accent:      #5FB48E;
  --accent-hover:#7CC6A3;
  --accent-ink:  #0B0A1C;
  --accent-wash: #14261D;

  --ai-1:        #5FB48E;
  --ai-2:        #5FB48E;
  --ai-3:        #5FB48E;

  --mint:        #5FB48E;
  --mint-soft:   #14261D;
  --navy:        #D6E3EC;
  --amber:       #F0B45C;
  --berry:       #F27A8E;
  --berry-wash:  #3C1E27;

  --d-arts:      #5FB48E;
  --d-english:   #5FB48E;
  --d-history:   #DFA06A;
  --d-math:      #5FB48E;
  --d-science:   #55C3DE;
  --d-language:  #FF87A7;
  --d-capstone:  #5FB48E;
  --d-career:    #ADC95E;
  --coral:       #FF9569;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, .45), 0 20px 46px rgba(0, 0, 0, .38);
  --shadow-3: 0 26px 80px rgba(0, 0, 0, .62);
  --glow:     0 14px 34px rgba(95, 180, 142, .3);

  color-scheme: dark;
}

/* Dim — the previous dark theme: deep navy, not pure black. */
:root[data-theme="dim"] {
  --brand: #2F7D5B;
  --bg:          #0C0D1A;
  --bg-sunk:     #07070F;
  --surface:     #16182B;
  --surface-2:   #1E2138;
  --ink:         #ECEDF7;
  --ink-soft:    #C7CAE0;
  --muted:       #949AC0;
  --line:        #262A45;
  --line-strong: #373C5E;

  --blue:        #5FB48E;
  --violet:      #5FB48E;
  --orchid:      #5FB48E;
  --accent:      #5FB48E;
  --accent-hover:#7CC6A3;
  --accent-ink:  #0B0A1C;
  --accent-wash: #14261D;

  --ai-1:        #5FB48E;
  --ai-2:        #5FB48E;
  --ai-3:        #5FB48E;

  --mint:        #5FB48E;
  --mint-soft:   #14261D;
  --navy:        #D6E3EC;
  --amber:       #F0B45C;
  --berry:       #F27A8E;
  --berry-wash:  #3C1E27;

  --d-arts:      #5FB48E;
  --d-english:   #5FB48E;
  --d-history:   #DFA06A;
  --d-math:      #5FB48E;
  --d-science:   #55C3DE;
  --d-language:  #FF87A7;
  --d-capstone:  #5FB48E;
  --d-career:    #ADC95E;
  --coral:       #FF9569;

  --shadow-1: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-2: 0 6px 16px rgba(0, 0, 0, .45), 0 20px 46px rgba(0, 0, 0, .38);
  --shadow-3: 0 26px 80px rgba(0, 0, 0, .62);
  --glow:     0 14px 34px rgba(95, 180, 142, .3);

  color-scheme: dark;
}

/* ==========================================================================
   Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.14;
  text-wrap: balance;
  margin: 0;
  letter-spacing: -.02em;
}

p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--r-xs);
}
/* Inputs inside a bar that paints its own focus state (site search, YelAI
   composer) must not stack the global ring on top of it. */
.lysearch input:focus-visible, .yelbar__input:focus-visible, .yc__form input:focus-visible { box-shadow: none; }

.shell { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px; }

.eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--muted);
}

.gradtext {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   Buttons — rectangular, rounded corners
   ========================================================================== */

.btn svg { width: 17px; height: 17px; flex: 0 0 auto; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 600;
  font-size: .93rem;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              box-shadow .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(.985); }
.btn[disabled] { opacity: .45; cursor: not-allowed; transform: none; }

.btn--primary {
  background: var(--grad);
  color: #FFFFFF;
  box-shadow: var(--glow);
  border: 0;
}
.btn--primary:hover:not([disabled]) { filter: brightness(1.08); box-shadow: var(--shadow-2), var(--glow); }

.btn--solid { background: var(--accent); color: var(--accent-ink); }
.btn--solid:hover:not([disabled]) { background: var(--accent-hover); }

.btn--ghost { background: transparent; border-color: var(--line-strong); color: var(--ink); }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }

.btn--mint { background: var(--mint); color: var(--navy); }
.btn--mint:hover { filter: brightness(1.05); }

.btn--quiet { background: transparent; color: var(--muted); }
.btn--quiet:hover { color: var(--ink); background: var(--surface-2); }

.btn--block { width: 100%; }
.btn--lg { padding: 14px 26px; font-size: 1rem; }
.btn--sm { padding: 7px 12px; font-size: .82rem; border-radius: var(--r-xs); }
.btn--done { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); box-shadow: none; }

/* ==========================================================================
   Cookie strip
   ========================================================================== */

.cookiebar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--ink);
  color: #FFFFFF;
}
:root[data-theme="dark"] .cookiebar,
:root[data-theme="dim"] .cookiebar { background: var(--surface-2); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dim"]) .cookiebar {
    background: var(--surface-2); color: var(--ink);
  }
}
.cookiebar[hidden] { display: none !important; }
.cookiebar__in {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-block: 10px;
  font-size: .88rem;
}
.cookiebar__text { flex: 1 1 320px; }
.cookiebar__text svg { width: 16px; height: 16px; flex: 0 0 auto; vertical-align: -3px; }
.cookiebar__acts { display: flex; gap: 8px; }
.cookiebar .btn { padding: 7px 14px; font-size: .82rem; }
.cookiebar .btn--ghost { border-color: currentColor; color: inherit; opacity: .82; }
.cookiebar .btn--ghost:hover { opacity: 1; color: inherit; border-color: currentColor; }

/* ==========================================================================
   Header
   ========================================================================== */

.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(14px) saturate(1.5);
  border-bottom: 1px solid var(--line);
}

.header__in {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  min-height: var(--header-h);
}

.header__left, .header__right {
  display: flex;
  align-items: center;
  gap: 3px;
  min-width: 0;
}
.header__right { justify-content: flex-end; }

.navlink {
  padding: 8px 11px;
  border-radius: var(--r-xs);
  font-weight: 600;
  font-size: .89rem;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  background: none;
  border: 0;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.navlink:hover { color: var(--ink); background: var(--surface-2); }
.navlink svg { width: 15px; height: 15px; flex: 0 0 auto; vertical-align: -2px; }
.navlink.is-active { color: var(--accent); background: var(--accent-wash); }

/* Centered lyeli logo */
.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  transition: transform .3s var(--ease-out-back);
}
.brand:hover { transform: none; }   /* logo hover'da buyumez, oldugu gibi kalir */
/* The mark is the cursive "lyeli" wordmark itself (a transparent PNG,
   wider than tall), so it only needs a height — width follows the image's
   own aspect ratio. A soft drop shadow lifts it off the header the way the
   old 3D artwork used to float on its ground. There is no separate text
   beside it any more: the wordmark already says the brand name. */
.brand__mark { height: 46px; width: auto; display: block; flex: 0 0 auto; object-fit: contain; filter: drop-shadow(0 4px 8px rgba(15, 45, 33, .22)); }
.brand:hover .brand__mark { filter: drop-shadow(0 4px 8px rgba(15, 45, 33, .22)); }

.iconbtn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 40px;
  height: 40px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  cursor: pointer;
  color: var(--ink);
  transition: background-color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.iconbtn:hover { background: var(--surface-2); border-color: var(--line); }
.iconbtn svg { width: 20px; height: 20px; }

.cart-count {
  position: absolute;
  top: 1px; right: -1px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: var(--r-pill);
  background: var(--orchid);
  color: #FFFFFF;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.cart-count[hidden] { display: none; }

.flagbtn { gap: 7px; font-size: .85rem; font-weight: 600; }
.flag { width: 22px; height: 15px; border-radius: 2px; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.16) inset; }

.avatar {
  width: 36px; height: 36px;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  padding: 1px;
  box-shadow: 0 0 0 2px var(--accent);
  overflow: hidden;
  display: block;
}
.avatar svg { width: 100%; height: 100%; display: block; }
.avatar__inner { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--surface); overflow: hidden; }

/* Guest state: no chosen mascot yet, so a plain silhouette sits in the same
   ring instead of stretching a stroke icon edge-to-edge like the mascot art. */
.avatar--guest { display: grid; place-items: center; color: var(--accent); transition: background-color .16s var(--ease); }
.avatar--guest svg { width: 60%; height: 60%; }
.iconbtn:hover .avatar--guest { background: color-mix(in srgb, var(--accent) 14%, var(--accent-wash)); }

/* A member's avatar ring, shaped by their level progress — an Instagram
   story-ring style conic sweep through the site gradient (--ringpct is set
   inline per instance by avatarHtml). Turned off entirely by the "show my
   level to others" setting, which just falls back to the plain accent
   ring above. */
.avatar--leveled {
  padding: 3px;
  box-shadow: none;
  background: conic-gradient(from -90deg,
    var(--blue) 0%,
    var(--violet) calc(var(--ringpct, 100) * 0.5%),
    var(--orchid) calc(var(--ringpct, 100) * 1%),
    color-mix(in srgb, var(--line-strong) 65%, transparent) 0);
}
.avatar--photo.avatar--leveled { padding: 3px; }

/* --- dropdowns: hover AND click AND keyboard --- */
.menu { position: relative; }
.menu__panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 236px;
  padding: 8px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow-2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(.98);
  transform-origin: top right;
  transition: opacity .16s var(--ease), transform .16s var(--ease), visibility .16s;
  z-index: 40;
}
.menu__panel--left { right: auto; left: 0; transform-origin: top left; }
.menu:hover .menu__panel,
.menu:focus-within .menu__panel,
.menu.is-open .menu__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}
.menu__head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.menu__name { font-weight: 700; font-size: .95rem; }
.menu__mail { font-size: .78rem; color: var(--muted); overflow-wrap: anywhere; }
.menu__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  font-size: .9rem;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.menu__item:hover { background: var(--surface-2); color: var(--accent); }
.menu__item svg { width: 17px; height: 17px; flex: 0 0 auto; }
.menu__label {
  padding: 10px 10px 4px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.menu__sep { height: 1px; background: var(--line); margin: 6px 2px; }
.menu__item.is-on { color: var(--accent); background: var(--accent-wash); }
.menu__check { margin-left: auto; opacity: 0; }
.menu__item.is-on .menu__check { opacity: 1; }

.langmenu { max-height: min(70vh, 460px); overflow-y: auto; min-width: 250px; }
.langmenu .menu__native { margin-left: auto; color: var(--muted); font-size: .76rem; }
/* The generic 17px menu icon size squares a 3:2 flag, leaving bands above
   and below it; flags keep their own proportions. */
.menu__item svg.flag { width: 22px; height: 15px; }

.burger { display: none; }

.mobilenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 20px 14px;
  border-top: 1px solid var(--line);
  background: var(--bg);
}
.mobilenav[hidden] { display: none; }
.mobilenav .navlink { width: 100%; text-align: left; padding: 11px 12px; }

/* ==========================================================================
   Hero
   ========================================================================== */

/* ---- Brush story (home): a pinned stage, a wide track slid sideways by
   vertical scroll, and a gradient brush stroke painting through every
   drawing. Sizes and the path itself are set by app.js brushLayout(). ---- */
.brush { position: relative; border-bottom: 1px solid var(--line); }
.brush__stage {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); min-height: 540px;
  overflow: hidden;
  background:
    radial-gradient(105% 80% at 84% 6%, color-mix(in srgb, var(--violet) 18%, transparent) 0%, transparent 60%),
    radial-gradient(80% 70% at 4% 100%, color-mix(in srgb, var(--blue) 14%, transparent) 0%, transparent 62%),
    var(--bg);
}
.brush__track {
  position: relative; display: flex; height: 100%;
  width: calc(var(--n) * 54%);
  will-change: transform;
}
.brush__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 0; }
.brush__reveal { stroke-width: 64; stroke-linecap: round; stroke-linejoin: round; }
.brush__stroke { fill: none; stroke: url(#brushGrad); stroke-linecap: round; stroke-linejoin: round; }
.brush__stroke--wash { stroke-width: 46; opacity: .12; }
.brush__stroke--main { stroke-width: 20; opacity: .9; }
.brush__stroke--hair1 { stroke-width: 3; opacity: .5; stroke-dasharray: 26 7 4 11; }
.brush__stroke--hair2 { stroke-width: 2.5; opacity: .42; stroke-dasharray: 9 12 30 6; }
.brush__tip circle { fill: var(--surface); stroke: var(--violet); stroke-width: 3; filter: drop-shadow(0 4px 10px color-mix(in srgb, var(--violet) 45%, transparent)); }
.brush__tip .brush__tipdot { fill: var(--violet); stroke: none; filter: none; }
.brush__tip { transition: opacity .3s var(--ease); }
.brush__tip.is-done { opacity: 0; }

.brush__panel {
  position: relative; z-index: 1;
  flex: 0 0 calc(100% / var(--n));
  display: grid; grid-template-rows: 1fr 1fr; justify-items: center;
  padding: 44px 40px 40px;
}
.brush__art {
  --r: clamp(150px, 14vw, 205px);
  position: relative; width: var(--r); aspect-ratio: 1;
  display: grid; place-items: center;
  opacity: 0; transform: scale(.55) rotate(-8deg);
  transition: opacity .45s var(--ease), transform .6s var(--ease-out-back);
}
/* The main drawing (a link to the section) sits on a soft paint splash. */
.brush__main, .brush__mascot {
  position: relative; z-index: 1; display: grid; place-items: center;
  width: var(--r); height: var(--r); border-radius: 50%;
  color: inherit; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer;
}
span.brush__main { cursor: default; }
.brush__main::before, .brush__mascot::before {
  content: ''; position: absolute; left: 50%; top: 50%; z-index: -1;
  width: calc(var(--r) * 1.12); height: calc(var(--r) * 1.12); translate: -50% -50%;
  border-radius: 46% 54% 58% 42% / 52% 44% 56% 48%;
  background: color-mix(in srgb, var(--tile-hue) 20%, var(--surface));
  box-shadow: 0 18px 40px color-mix(in srgb, var(--tile-hue) 22%, transparent);
  transition: rotate .6s var(--ease), scale .4s var(--ease-out-back);
}
a.brush__main:hover::before, button.brush__main:hover::before { rotate: 12deg; scale: 1.05; }
.brush__main > svg { width: calc(var(--r) * .82); height: auto; display: block; }
.brush__yel svg, .brush__medal svg { width: 100%; }
.brush__yel, .brush__medal { display: block; width: calc(var(--r) * .62); }

/* Satellites: picture chips that fly in from off to the side when the
   brush reaches the stop, then bob; each one opens its exact page. */
.brush__sat {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  color: var(--ink); text-decoration: none; background: none; border: 0; padding: 0; font: inherit; cursor: pointer;
  opacity: 0;
  transform: translate(calc(-50% + var(--sx) * var(--r) * 2.4), calc(-50% + var(--sy) * var(--r) * 2.4)) scale(.4);
  transition: transform .8s var(--ease-out-back), opacity .45s var(--ease);
  transition-delay: calc(.2s + var(--k) * .1s);
}
.brush__panel.is-in .brush__sat {
  opacity: 1;
  transform: translate(calc(-50% + var(--sx) * var(--r)), calc(-50% + var(--sy) * var(--r)));
}
.brush__sat-ico {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--surface); color: var(--tile-hue);
  border: 2px solid color-mix(in srgb, var(--tile-hue) 40%, var(--line));
  box-shadow: 0 8px 18px color-mix(in srgb, var(--tile-hue) 24%, transparent);
  animation: brush-bob 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * -.7s);
  transition: transform .2s var(--ease-out-back), background-color .2s var(--ease), color .2s var(--ease);
}
.brush__sat-ico svg { width: 24px; height: 24px; }
.brush__sat-lbl {
  font-size: .74rem; font-weight: 700; white-space: nowrap;
  padding: 2px 9px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
a.brush__sat:hover .brush__sat-ico, button.brush__sat:hover .brush__sat-ico { background: var(--tile-hue); color: #fff; transform: scale(1.14); }
a.brush__sat:hover .brush__sat-lbl, button.brush__sat:hover .brush__sat-lbl { color: var(--tile-hue); }
.brush__sat.is-locked { cursor: default; }
.brush__sat.is-locked .brush__sat-ico { color: var(--muted); border-style: dashed; }
@keyframes brush-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
.brush__lock {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 5px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tile-hue) 16%, var(--surface)); color: var(--tile-hue);
  font-weight: 700; font-size: .8rem;
}
.brush__lock svg { width: 14px; height: 14px; }
/* YelAI's three depths, under its text: each opens the panel on that depth. */
.brush__modes { display: flex; width: max-content; max-width: 100%; gap: 4px; margin: 12px auto 0; padding: 4px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tile-hue) 12%, var(--surface)); }
.brush__mode {
  padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: none;
  font: 700 .8rem var(--font-body); color: var(--tile-hue); cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease);
}
.brush__mode:hover { background: var(--tile-hue); color: #fff; }
.brush__text {
  max-width: 34ch; text-align: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .5s var(--ease) .12s, transform .6s var(--ease) .12s;
}
.brush__panel--up .brush__art { align-self: end; margin-bottom: 26px; }
.brush__panel--up .brush__text { align-self: start; }
.brush__panel--down .brush__text { grid-row: 1; align-self: end; margin-bottom: 26px; }
.brush__panel--down .brush__art { grid-row: 2; align-self: start; }
.brush__panel.is-in .brush__art { opacity: 1; transform: none; }
.brush__panel.is-in .brush__text { opacity: 1; transform: none; }
/* Once painted in, the drawing plays the same little lift its home tile
   plays on hover (.pop/.fan/.brick/.cal-cell), then keeps floating. */
.brush__panel.is-in .pop--1 { transform: translateY(-8px) rotate(-5deg); }
.brush__panel.is-in .pop--2 { transform: translateY(-12px) rotate(5deg); }
.brush__panel.is-in .pop--3 { transform: translateY(-6px) rotate(8deg); }
.brush__panel.is-in .brick--1 { transform: translateX(-6px); }
.brush__panel.is-in .cal-cell--a, .brush__panel.is-in .cal-cell--c { transform: translateY(-4px) scale(1.06); }
.brush__panel.is-in .brush__art { animation: brush-float 6s ease-in-out .7s infinite; }
@keyframes brush-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.brush__kicker { display: block; font: 700 .72rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--tile-hue); }
.brush__title { position: relative; display: inline-block; font-size: clamp(1.35rem, 2.3vw, 1.9rem); margin: 6px 0 10px; }
.brush__title::after {
  content: ''; position: absolute; left: -4%; right: -4%; bottom: .02em; height: .34em; z-index: -1;
  border-radius: 40% 60% 55% 45% / 60% 50% 50% 40%;
  background: color-mix(in srgb, var(--tile-hue) 28%, transparent);
  transform: scaleX(0); transform-origin: left center;
  transition: transform .7s var(--ease) .35s;
}
.brush__panel.is-in .brush__title::after { transform: scaleX(1); }
.brush__desc { color: var(--ink-soft); font-size: .95rem; }
.brush__go {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  padding: 0; border: 0; background: none; font: inherit; font-weight: 700; font-size: .88rem;
  color: var(--tile-hue); text-decoration: none; cursor: pointer;
}
.brush__go svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.brush__go:hover svg { transform: translateX(5px); }

.brush__panel--intro { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 40px 48px 120px; }
.brush__intro { max-width: min(34rem, 100%); }
.brush__intro .hero__lede { max-width: 42ch; }
.brush__hint {
  position: absolute; left: 48px; bottom: 36px;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  transition: opacity .3s var(--ease);
}
.brush__hint svg { width: 16px; height: 16px; animation: brush-nudge 1.6s ease-in-out infinite; }
@keyframes brush-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
.brush.is-moving .brush__hint { opacity: 0; }

/* Skip: always within reach while the story is pinned, gone once it ends. */
.brush__skip {
  position: absolute; top: 18px; right: 22px; z-index: 5;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: blur(6px);
  font: 700 .8rem var(--font-body); color: var(--ink-soft); cursor: pointer;
  box-shadow: var(--shadow-1, 0 4px 14px rgba(20, 20, 40, .08));
  transition: color .16s var(--ease), border-color .16s var(--ease), opacity .3s var(--ease), transform .16s var(--ease);
}
.brush__skip svg { width: 15px; height: 15px; }
.brush__skip:hover { color: var(--accent); border-color: var(--accent); transform: translateY(1px); }
.brush.is-done .brush__skip { opacity: 0; pointer-events: none; }

/* The last stop: the mascot, bigger than the other drawings. */
.brush__art--mascot { --r: clamp(220px, 22vw, 320px); }
.brush__mascot canvas { display: block; }
.brush__mascot > svg { width: 78%; height: auto; }
/* The entrance: the words on the left, the mascot on the right (stacked,
   words first, on a phone). */
.brush.is-static.brush--solo .brush__panel { flex-direction: row; justify-content: center; align-items: center; gap: clamp(28px, 6vw, 90px); padding: 40px clamp(20px, 5vw, 64px); }
.brush.is-static.brush--solo .brush__text { order: 1; text-align: left; max-width: 700px; align-self: center; }
.brush.is-static.brush--solo .brush__desc { max-width: 46ch; }
.brush.is-static.brush--solo .brush__art { order: 2; width: auto; flex: 0 0 auto; }
.brush.is-static.brush--solo .brush__mascot { flex: 0 0 auto; margin: 0; }
/* The feature words: short phrases scattered in different sizes and
   typefaces — no list, no bullets. Numbers (the **bold** parts) take the
   site's dark green. */
.brush__cloud { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin: 16px 0 10px; max-width: 680px; }
.cw { display: inline-block; white-space: nowrap; line-height: 1.15; color: var(--ink-soft); }
.cw strong { color: var(--accent); font-weight: 800; }
.cw--1  { font: 700 1.9rem var(--font-display); color: var(--ink); rotate: -2deg; }
.cw--2  { font: 500 1.7rem var(--font-hand); rotate: 2deg; translate: 6px 8px; }
.cw--3  { font: 500 1.1rem var(--font-card); text-transform: uppercase; letter-spacing: .08em; }
.cw--4  { font: italic 500 1rem Georgia, serif; rotate: -1.5deg; translate: 0 -6px; }
.cw--5  { font: 600 1.2rem var(--font-display); color: var(--ink); translate: 14px -4px; }
.cw--6  { font: 700 .92rem var(--font-mono); rotate: 1.5deg; }
.cw--7  { font: 700 2.3rem var(--font-display); color: var(--ink); rotate: 1.5deg; translate: -6px 4px; }
.cw--8  { font: 600 1.55rem var(--font-hand); rotate: -3deg; translate: 8px 6px; }
.cw--9  { font: 700 .8rem var(--font-body); text-transform: uppercase; letter-spacing: .14em; translate: 0 6px; }
.cw--10 { font: italic 400 1.15rem Georgia, serif; rotate: 1deg; }
.cw--11 { font: 700 1.8rem var(--font-card); color: var(--ink); rotate: -1deg; translate: 10px 0; }
.cw--12 { font: 500 .85rem var(--font-mono); rotate: 1deg; translate: 0 -4px; }
.cw--13 { font: 500 1.45rem var(--font-hand); rotate: 2deg; translate: 4px 4px; }
.cw--14 { font: 600 1.3rem var(--font-display); color: var(--ink); rotate: -1.5deg; }
.cw--15 { font: 700 1rem var(--font-body); translate: 18px -2px; }
.cw--16 { font: 500 1.25rem var(--font-card); rotate: 1.5deg; translate: -4px 6px; }
.cw--17 { font: 700 1.6rem var(--font-display); color: var(--ink); rotate: -1deg; translate: 6px 2px; }

/* Daily report: under the mascot on the entrance (see features/dailyreport.js) */
.brush.is-static.brush--solo .brush__side { order: 2; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.brush.is-static.brush--solo .brush__side .brush__art { order: 0; }
.brush__report.is-on { border-color: var(--accent); color: var(--accent); }
.brush__report svg { width: 16px; height: 16px; }
.drep { width: min(360px, 100%); padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); box-shadow: 0 10px 28px rgba(15, 45, 33, .10); font-size: .84rem; color: var(--ink-soft); text-align: left; }
.drep__head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.drep__title { order: -1; width: 100%; margin: 0 0 6px; font: 700 1rem var(--font-display); color: var(--ink); }
.drep__nav, .drep__x { width: 30px; height: 30px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font-size: 1.1rem; line-height: 1; cursor: pointer; }
.drep__nav:disabled { opacity: .35; cursor: default; }
.drep__x { margin-left: auto; }
.drep__select { flex: 1; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); color: var(--ink); font: 600 .82rem var(--font-body); }
.drep__tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 12px 0; }
.drep__tile { padding: 8px 6px; border-radius: 12px; background: var(--accent-wash); text-align: center; }
.drep__tile b { display: block; font: 800 1.3rem/1.1 var(--font-display); color: var(--accent); }
.drep__tile span { display: block; margin-top: 2px; font-size: .68rem; line-height: 1.2; }
.drep h4 { margin: 10px 0 4px; font: 700 .7rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.drep__list { margin: 0; padding-left: 16px; }
.drep__list li { margin: 2px 0; }
.drep__list--inline { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-left: 0; list-style: none; }
.drep__note { margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: var(--accent-wash); color: var(--ink); }
.drep__note h4 { margin-top: 0; }
.drep__note p { margin: 0; line-height: 1.5; }
.drep__empty { margin: 8px 0 2px; line-height: 1.5; }
.drep__foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; font-size: .72rem; }
.drep__ai { border: 0; background: none; padding: 0; color: var(--accent); font: 700 .74rem var(--font-body); text-decoration: underline; cursor: pointer; }
.drep__busy { color: var(--accent); font-weight: 700; }
.brush__pitch { margin: 12px 0 0; max-width: 52ch; font-weight: 600; color: var(--ink); font-size: 1rem; line-height: 1.55; }
.brush__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.brush__start, .brush__resume { gap: 8px; display: inline-flex; align-items: center; text-decoration: none; }
.brush__resume svg { width: 16px; height: 16px; }
.brush__start svg { width: 16px; height: 16px; }
.brush__pitch { margin-top: 16px; }
@media (max-width: 760px) {
  .brush__acts { justify-content: center; }
  .brush.is-static.brush--solo .brush__panel { flex-direction: column; gap: 18px; }
  .brush.is-static.brush--solo .brush__text { text-align: center; }
}

/* Phone / reduced motion: no pinning, no long stroke — the panels stack
   and each one fades in as it scrolls into view. */
.brush.is-static { height: auto !important; }
.brush.is-static .brush__stage { position: static; height: auto; min-height: 0; overflow: visible; }
.brush.is-static .brush__track { width: auto; flex-direction: column; transform: none !important; }
.brush.is-static .brush__svg, .brush.is-static .brush__hint { display: none; }
.brush.is-static .brush__skip { top: 12px; right: 14px; }
.brush.is-static .brush__panel { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 28px 20px; }
.brush.is-static .brush__panel--intro { align-items: flex-start; padding-top: 34px; }
.brush.is-static .brush__art, .brush.is-static .brush__text { margin: 0; align-self: center; }
.brush.is-static .brush__art {
  width: 100%; aspect-ratio: auto;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 14px;
}
.brush.is-static .brush__main, .brush.is-static .brush__mascot { flex: 0 0 var(--r); margin: 10px calc(50% - var(--r) / 2) 8px; }
.brush.is-static .brush__sat { position: static; opacity: 0; transform: translateY(14px); }
.brush.is-static .brush__panel.is-in .brush__sat { opacity: 1; transform: none; }
.brush.is-static .brush__sat-ico { width: 46px; height: 46px; }
.brush.is-static .brush__panel--down .brush__art { order: -1; }
@media (prefers-reduced-motion: reduce) {
  .brush__art, .brush__text, .brush__title::after, .brush__sat { transition: none; }
  .brush__sat-ico { animation: none; }
  .brush__panel .brush__sat { opacity: 1; }
  .brush__panel .brush__art, .brush__panel .brush__text { opacity: 1; transform: none; }
  .brush__title::after { transform: scaleX(1); }
  .brush__panel.is-in .brush__art { animation: none; }
}

.hero__title {
  font-size: clamp(2.05rem, 4.6vw, 3.3rem);
  margin-block: 10px 10px;
}
.hero__tagline {
  font-family: var(--font-display);
  font-size: clamp(1rem, 1.6vw, 1.16rem);
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .01em;
}
.hero__lede { margin-top: 14px; max-width: 46ch; color: var(--ink-soft); }
.hero__acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.stat-chip {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  padding: 7px 13px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
}
.stat-chip svg { width: 15px; height: 15px; flex: 0 0 auto; align-self: center; }
.stat-chip b {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
  color: var(--ink);
}
.stat-chip--streak b { color: var(--orchid); }
.profile__bio { color: var(--ink-soft); font-size: .92rem; max-width: 56ch; white-space: pre-wrap; }

/* The account page's own "Shared" section reuses Discover's card markup
   (Discover.profileGrid) but lays it out as a Pinterest-style masonry via
   CSS columns instead of Discover's usual equal-row grid — scoped to this
   wrapper only, so Discover's own pages (#/discover/u/<handle>) keep their
   normal .dv__grid layout untouched. */
.profile__shared { margin-top: 34px; }
/* Applies wherever profileGrid() is used — Discover's own #/discover/u/<handle>
   page and this account page's "Shared" section alike — so any member's
   (including the seed "lyeli" team account's) shared posts read as a real
   Pinterest-style masonry instead of Discover's usual equal-row grid. */
.dv__grid.dv__grid--profile {
  display: block;
  columns: 3 220px;
  column-gap: 14px;
}
.dv__grid.dv__grid--profile > * { break-inside: avoid; margin-bottom: 14px; width: 100%; }
a.stat-chip, button.stat-chip { text-decoration: none; cursor: pointer; transition: border-color .16s var(--ease), color .16s var(--ease); font: inherit; }
a.stat-chip:hover, button.stat-chip:hover { border-color: var(--accent); color: var(--accent); }

@keyframes float-tilt { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-18px) rotate(-2deg); } }
@keyframes float-tilt-r { 0%, 100% { transform: translateY(0) rotate(7deg); } 50% { transform: translateY(-12px) rotate(3deg); } }
@keyframes twinkle { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes swirl { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* ==========================================================================
   Tile shelf — AP wide, Vocabulary + Grammar half, Reading wide
   ========================================================================== */

.section { padding-block: 46px; }
.section__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.section__title { font-size: clamp(1.45rem, 2.6vw, 1.95rem); }
.section__sub { color: var(--muted); font-size: .93rem; margin-top: 5px; max-width: 62ch; }

/* ---- Home hero carousel: auto-advancing, one full slide at a time,
   dots + arrows. Each slide is the whole clickable block (see app.js
   heroSlideHtml/HERO_SLIDES) — colours and art are the same --tile-hue /
   Icons.tileArt pairing the matching home tile below already uses, so the
   two always read as the same thing. ---- */
.hcarousel-wrap { margin-top: -6px; }
.hcarousel { position: relative; }
.hcarousel__viewport { overflow: hidden; border-radius: var(--r-lg); }
.hcarousel__track { display: flex; transition: transform .55s cubic-bezier(.65, 0, .35, 1); }
.hcarousel__slide {
  flex: 0 0 100%; width: 100%; min-height: 210px; position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 28px; padding: 32px 40px;
  border-radius: var(--r-lg); text-decoration: none; color: inherit;
  background: color-mix(in srgb, var(--tile-hue) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tile-hue) 22%, var(--line));
  transition: box-shadow .25s var(--ease);
}
a.hcarousel__slide:hover { box-shadow: 0 16px 32px color-mix(in srgb, var(--tile-hue) 22%, transparent); }
.hcarousel__wash { position: absolute; inset: 0; background: radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--tile-hue) 16%, transparent), transparent 60%); pointer-events: none; }
.hcarousel__art { flex: 0 0 auto; width: 180px; }
.hcarousel__art svg { display: block; width: 100%; height: auto; }
.hcarousel__body { position: relative; flex: 1; min-width: 0; }
.hcarousel__kicker { display: inline-block; font: 700 .72rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--tile-hue); margin-bottom: 6px; }
.hcarousel__title { font: 700 1.5rem var(--font-display); color: var(--ink); margin: 0 0 8px; }
.hcarousel__desc { color: var(--ink-soft); max-width: 46ch; margin: 0 0 14px; }
.hcarousel__go { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tile-hue); }
.hcarousel__go svg { width: 16px; height: 16px; transition: transform .2s var(--ease); }
a.hcarousel__slide:hover .hcarousel__go svg { transform: translateX(4px); }
.hcarousel__lockbadge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tile-hue) 16%, var(--surface)); color: var(--tile-hue); font-weight: 700; font-size: .8rem; }
.hcarousel__lockbadge svg { width: 14px; height: 14px; }
.hcarousel__slide.is-locked { cursor: default; opacity: .92; }
.hcarousel__nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink-soft); box-shadow: var(--shadow-2); cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.hcarousel__nav svg { width: 18px; height: 18px; }
.hcarousel__nav:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-50%) scale(1.06); }
.hcarousel__nav--prev { left: -18px; }
.hcarousel__nav--next { right: -18px; }
.hcarousel__dots { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.hcarousel__dot { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: var(--line-strong); cursor: pointer; transition: background-color .2s var(--ease), width .2s var(--ease); }
.hcarousel__dot.is-on { background: var(--accent); width: 22px; border-radius: var(--r-pill); }
@media (max-width: 720px) {
  .hcarousel__slide { flex-direction: column; align-items: flex-start; padding: 22px; gap: 14px; }
  .hcarousel__art { width: 120px; }
  .hcarousel__nav { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hcarousel__track { transition: none; }
}

.shelf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 194px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  transition: transform .3s var(--ease-out-back), box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.tile:hover, .tile:focus-visible {
  transform: translateY(-7px) scale(1.024);
  box-shadow: var(--shadow-2);
  border-color: color-mix(in srgb, var(--tile-hue) 50%, var(--line));
  z-index: 2;
}
.tile--wide { grid-column: 1 / -1; min-height: 272px; }
.tile--short { grid-column: 1 / -1; min-height: 180px; }

/* A notch smaller than the home shelf's tiles — used where several category
   buttons need to sit side by side instead of stacking two-wide. */
/* AP tile artwork (Icons.tileArt.apAnim): always moving, not only on hover.
   Each piece has its own loop; the wrapper is only there for the transforms
   to measure against their own box (fill-box). */
.ap-anim { overflow: visible; }
.ap-anim .ap-back { transform-box: fill-box; transform-origin: 50% 100%; animation: ap-tilt 5s ease-in-out infinite alternate; }
.ap-anim .ap-front { animation: ap-bob 4.2s ease-in-out infinite; }
.ap-anim .ap-curve { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ap-draw 4s ease-in-out infinite; }
.ap-anim .ap-bub { animation: ap-rise 2.6s ease-in infinite; }
.ap-anim .ap-bub--2 { animation-delay: .9s; }
.ap-anim .ap-bub--3 { animation-delay: 1.7s; }
.ap-anim .ap-badge { transform-box: fill-box; transform-origin: center; animation: ap-pulse 2.8s ease-in-out infinite; }
.ap-anim .ap-spark { transform-box: fill-box; transform-origin: center; animation: ap-twinkle 2.2s ease-in-out infinite; }
.ap-anim .ap-spark--2 { animation-delay: 1.1s; }
@keyframes ap-tilt { from { transform: rotate(-12deg) translateX(-4px); } to { transform: rotate(-5deg) translateX(0); } }
@keyframes ap-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes ap-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  55% { stroke-dashoffset: 0; opacity: 1; }
  82% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes ap-rise {
  0% { transform: translate(0, 0); opacity: 0; }
  20% { opacity: .95; }
  100% { transform: translate(3px, -34px); opacity: 0; }
}
@keyframes ap-pulse { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(6deg) scale(1.08); } }
@keyframes ap-twinkle { 0%, 100% { transform: scale(.5); opacity: .4; } 50% { transform: scale(1.15); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .ap-anim * { animation: none !important; }
  .ap-anim .ap-curve { stroke-dashoffset: 0; }
}

/* AP course scenes (src/lib/ap-scenes.js). Each scene is a 240x150 picture
   whose parts move on their own. Per-part timing comes from custom properties
   set inline: --d (delay), --spd (spin speed), --ox/--oy (pivot), --amp (swing).
   Under reduced motion every loop stops and the drawn lines stay visible. */
.apscene { display: block; width: 100%; height: 100%; overflow: hidden; }
.apscene .aps-spin { transform-box: view-box; transform-origin: var(--ox, 50%) var(--oy, 50%); animation: aps-rot var(--spd, 12s) linear infinite; }
.apscene .aps-swing { transform-box: view-box; transform-origin: var(--ox, 50%) var(--oy, 50%); animation: aps-swing 2.6s ease-in-out infinite alternate; }
.apscene .aps-bob { animation: aps-bob 3.4s ease-in-out infinite alternate; animation-delay: var(--d, 0s); }
.apscene .aps-pulse { transform-box: fill-box; transform-origin: center; animation: aps-pulse 2.8s ease-in-out infinite; }
.apscene .aps-draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: aps-draw 5s ease-in-out infinite; animation-delay: var(--d, 0s); }
.apscene .aps-grow { transform-box: fill-box; transform-origin: 50% 100%; animation: aps-grow 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: var(--d, 0s); }
.apscene .aps-blink { animation: aps-blink 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.apscene .aps-ring { animation: aps-ring 2.4s ease-out infinite; animation-delay: var(--d, 0s); }
.apscene .aps-twinkle { transform-box: fill-box; transform-origin: center; animation: aps-twinkle 2.4s ease-in-out infinite; animation-delay: var(--d, 0s); }
.apscene .aps-flow { animation: aps-flow 1.2s linear infinite; }
.apscene .aps-scroll { animation: aps-scroll 9s linear infinite; }
.apscene .aps-flip { transform-box: view-box; transform-origin: 122px 84px; animation: aps-flip 4.2s ease-in-out infinite; }
@keyframes aps-rot { to { transform: rotate(360deg); } }
@keyframes aps-swing { from { transform: rotate(calc(var(--amp, 20deg) * -1)); } to { transform: rotate(var(--amp, 20deg)); } }
@keyframes aps-bob { from { transform: translateY(0); } to { transform: translateY(-7px); } }
@keyframes aps-pulse { 0%, 100% { transform: scale(.96); opacity: .8; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes aps-draw {
  0% { stroke-dashoffset: 1; opacity: 1; }
  45% { stroke-dashoffset: 0; opacity: 1; }
  80% { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes aps-grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes aps-blink { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes aps-ring { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes aps-twinkle { 0%, 100% { transform: scale(.6); opacity: .5; } 50% { transform: scale(1.1); opacity: 1; } }
@keyframes aps-flow { to { stroke-dashoffset: -12; } }
@keyframes aps-scroll { to { transform: translateX(-240px); } }
@keyframes aps-flip { 0%, 25% { transform: scaleX(1); } 60%, 70% { transform: scaleX(-.95); } 95%, 100% { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  .apscene * { animation: none !important; }
  .apscene .aps-draw { stroke-dashoffset: 0; }
  .apscene .aps-grow { transform: none; }
}
/* Course cards in the AP grid: the scene is the photo band at the top */
.coursecard--photo.coursecard--ap .coursecard__glyph { background: linear-gradient(135deg, var(--ap-a, var(--surface)), var(--ap-b, var(--surface))); padding: 0; }
.coursecard--ap .coursecard__glyph svg { width: 100%; height: 100%; }
/* Course page header: the same scene, larger */
.apbanner { height: 190px; margin-bottom: 18px; border-radius: var(--r); background: linear-gradient(135deg, var(--ap-a, var(--surface)), var(--ap-b, var(--surface))); overflow: hidden; }
.apbanner svg { width: 100%; height: 100%; }

.tile--compact { min-height: 148px; padding: 18px; }
.tile--compact .tile__kicker { padding: 4px 9px; font-size: .64rem; }
.tile--compact .tile__name { font-size: clamp(1.05rem, 1.9vw, 1.3rem); margin-top: 8px; }
.tile--compact .tile__desc { font-size: .82rem; margin-top: 4px; }
.tile--compact .tile__go { margin-top: 10px; font-size: .82rem; }
.testcats { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

.tile__wash {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(85% 120% at 88% 10%, color-mix(in srgb, var(--tile-hue) 28%, transparent) 0%, transparent 62%),
    linear-gradient(155deg, color-mix(in srgb, var(--tile-hue) 13%, transparent) 0%, transparent 58%);
  transition: opacity .3s var(--ease);
}
.tile:hover .tile__wash { opacity: 1.4; }

.tile__art { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.tile__art svg { position: absolute; right: 3%; top: 50%; translate: 0 -50%; height: 90%; width: auto; overflow: visible; }
.tile--short .tile__art svg { height: 98%; }

.tile__body { position: relative; }
.tile__kicker {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 5px 11px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tile-hue) 16%, var(--surface));
  color: var(--tile-hue);
  font-size: .69rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.tile__name {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 2.4vw, 1.85rem);
  font-weight: 700;
  margin-top: 12px;
  letter-spacing: -.02em;
}
.tile--wide .tile__name { font-size: clamp(1.65rem, 3.4vw, 2.5rem); }
.tile__desc { color: var(--muted); font-size: .92rem; max-width: 42ch; margin-top: 6px; }
.tile__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-weight: 700;
  font-size: .88rem;
  color: var(--tile-hue);
}
.tile__go svg { width: 16px; height: 16px; transition: transform .25s var(--ease); }
.tile:hover .tile__go svg { transform: translateX(5px); }

/* per-tile artwork motion, only while hovered */
.fan { transform-box: fill-box; transform-origin: bottom center; transition: transform .45s var(--ease-out-back); }
.tile:hover .fan--l { transform: rotate(-16deg) translate(-18px, -8px); }
.tile:hover .fan--r { transform: rotate(16deg) translate(18px, -8px); }
.tile:hover .fan--c { transform: translateY(-14px) scale(1.06); }

.pop { transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease-out-back); }
.tile:hover .pop--1 { transform: translateY(-11px) rotate(-7deg); }
.tile:hover .pop--2 { transform: translateY(-17px) rotate(6deg); }
.tile:hover .pop--3 { transform: translateY(-8px) rotate(10deg); }

.page-leaf { transform-box: fill-box; transform-origin: left center; transition: transform .55s var(--ease); }
.tile:hover .page-leaf { transform: rotateY(-42deg); }

/* a stroke that redraws itself on hover (paths carry pathLength="1") */
.trace { stroke-dasharray: 1; stroke-dashoffset: 0; }
.tile:hover .trace { animation: trace-draw .9s var(--ease) both; }
@keyframes trace-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
/* a text caret that blinks while hovered */
.tile:hover .blink { animation: caret-blink 1s steps(1) infinite; }
@keyframes caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tile:hover .trace, .tile:hover .blink { animation: none; } }

/* SAT hub: two labelled groups (SAT / Extras), tiles a size up from the
   course cards, art tucked into the top-right corner. */
.satgroup + .satgroup { margin-top: 34px; }
.satgroup__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.satgroup__mark { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto; background: var(--accent-wash); color: var(--accent); }
.satgroup__mark svg { width: 20px; height: 20px; }
.satgroup__title { font-family: var(--font-display); font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; }
.satgroup__sub { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.satgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile--sat { min-height: 232px; padding: 20px; }
.tile--sat .tile__art svg { top: 8px; right: 8px; translate: none; height: 56%; opacity: 1; }
.tile--sat .tile__kicker { padding: 4px 9px; font-size: .62rem; }
.tile--sat .tile__name { font-size: clamp(1.15rem, 1.7vw, 1.38rem); margin-top: 8px; }
.tile--sat .tile__desc { font-size: .83rem; margin-top: 4px; }
.tile--sat .tile__go { margin-top: 10px; font-size: .84rem; }
@media (max-width: 1180px) { .satgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .satgrid { grid-template-columns: 1fr; }
  .tile--sat { min-height: 210px; }
  .tile--sat .tile__art svg { opacity: 1; right: 8px; }
}

/* SAT section outline: units as plain text rows (hairline-separated, no
   cards), each with a small glyph. Opening a unit unfolds its topic rows
   from the row's middle outward: the height grows via grid-template-rows
   while a clip-path opens from the centre line. */
.satoutline__meta { color: var(--muted); font-size: .88rem; margin: -6px 0 14px; }
.satoutline { list-style: none; margin: 0; padding: 0; max-width: 860px; border-top: 1px solid var(--line); }
.satunit { border-bottom: 1px solid var(--line); animation: satunit-in .45s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes satunit-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.satunit__head {
  width: 100%; display: flex; align-items: center; gap: 14px; padding: 14px 10px;
  border: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; border-radius: 12px;
  transition: background-color .2s var(--ease);
}
.satunit__head:hover { background: color-mix(in srgb, var(--tile-hue) 7%, transparent); }
.satunit__head:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tile-hue); }
.satunit__icon {
  position: relative; width: 40px; height: 40px; flex: 0 0 auto; border-radius: 12px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tile-hue) 15%, var(--surface)); color: var(--tile-hue);
  transition: transform .4s var(--ease-out-back), background-color .25s var(--ease), color .25s var(--ease), box-shadow .25s var(--ease);
}
.satunit__icon svg { width: 21px; height: 21px; }
.satunit__icon::after {
  content: ""; position: absolute; inset: -4px; border-radius: 15px; border: 2px solid var(--tile-hue);
  opacity: 0; transform: scale(.8); transition: opacity .3s var(--ease), transform .4s var(--ease-out-back);
}
.satunit__head:hover .satunit__icon { transform: rotate(-10deg) scale(1.1); }
.satunit__head:hover .satunit__icon::after { opacity: .35; transform: scale(1); }
.satunit.is-open .satunit__icon { background: var(--tile-hue); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--tile-hue) 35%, transparent); transform: none; }
.satunit__text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.satunit__no { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--tile-hue); }
.satunit__name { font-family: var(--font-display); font-weight: 600; font-size: 1.04rem; letter-spacing: -.01em; }
.satunit__count { color: var(--muted); font-size: .8rem; white-space: nowrap; }
.satunit__chev { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; transition: transform .35s var(--ease), color .2s var(--ease); }
.satunit__chev svg { width: 20px; height: 20px; display: block; }
.satunit.is-open .satunit__chev { transform: rotate(180deg); color: var(--tile-hue); }

.satunit__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.satunit.is-open .satunit__panel { grid-template-rows: 1fr; }
.satunit__clip {
  min-height: 0; overflow: hidden;
  clip-path: inset(50% 0 50% 0); opacity: 0;
  transition: clip-path .5s var(--ease), opacity .3s var(--ease);
}
.satunit.is-open .satunit__clip { clip-path: inset(0 0 0 0); opacity: 1; }
.sattopics { list-style: none; margin: 0 0 12px 29px; padding: 2px 0 2px 25px; border-left: 2px solid color-mix(in srgb, var(--tile-hue) 35%, var(--line)); }
.sattopic { display: flex; align-items: center; gap: 12px; padding: 7px 8px; border-radius: 10px; color: var(--ink-soft); text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease); }
.sattopic:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--tile-hue); }
.sattopic__video {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: .72rem; font-weight: 700; color: var(--muted); opacity: .75; white-space: nowrap;
  transition: color .2s var(--ease), opacity .2s var(--ease), transform .3s var(--ease-out-back);
}
.sattopic__video svg { width: 13px; height: 13px; }
.sattopic__video.is-ready { color: var(--tile-hue); opacity: 1; }
.sattopic:hover .sattopic__video { color: var(--tile-hue); opacity: 1; transform: translateX(-3px); }
@media (max-width: 560px) { .sattopic__video span { display: none; } }

/* The Tests page: same row look as the topic list, but flat (no unit rail)
   since it is already just five rows, no accordion needed. A tier with no
   questions yet is unclickable and dimmed, same language as an un-recorded
   video row. */
.sattopics--flat { margin: 18px 0 0; padding: 0; border-left: 0; }

/* ---- SAT test levels: one colour and one picture per level, the same on
   every topic and in the Tests section. Cool colours for the warm-up
   levels, warmer as it gets harder, brand blue with a gold trophy for the
   final. Set on an element as --tier (see satTierStyle in app.js). ---- */
:root {
  --tier-practice: #2E9FC9;
  --tier-basic: #14A085;
  --tier-easy: #45A04B;
  --tier-medium: #D9A21B;
  --tier-upper-medium: #EC7B34;
  --tier-hard: #D9434F;
  --tier-final: #0F2D21;
}

.tierart { display: block; width: 100%; height: auto; overflow: visible; }
.tierart .ta-pale { fill: color-mix(in srgb, var(--tier) 18%, var(--surface)); }
.tierart .ta-soft { fill: color-mix(in srgb, var(--tier) 36%, var(--surface)); }
.tierart .ta-main { fill: var(--tier); }
.tierart .ta-ground { fill: color-mix(in srgb, var(--tier) 26%, var(--surface)); }
.tierart .ta-snow { fill: #fff; opacity: .95; }
.tierart .ta-tentdoor { fill: color-mix(in srgb, var(--tier) 55%, #0b1320); }
.tierart .ta-gold { fill: #F2B233; }
.tierart .ta-cloud { fill: #fff; opacity: .92; }
.tierart .ta-spark { fill: #F2B233; }
.tierart .ta-pole, .tierart .ta-pole-thin { fill: none; stroke: var(--ink); stroke-linecap: round; }
.tierart .ta-pole { stroke-width: 2.2; }
.tierart .ta-pole-thin { stroke: #F2B233; stroke-width: 2; }
.tierart .ta-ray { stroke: #F2B233; stroke-width: 2.2; stroke-linecap: round; }
.tierart .ta-wind { fill: none; stroke: color-mix(in srgb, var(--tier) 45%, var(--surface)); stroke-width: 3; stroke-linecap: round; }
.tierart .ta-trail { fill: none; stroke: var(--tier); stroke-width: 3.4; stroke-linecap: round; stroke-dasharray: .1 7; }
.tierart .ta-flag { transform-box: fill-box; transform-origin: left center; }
.tierart .ta-trophy, .tierart .ta-sun, .tierart .ta-fire { transform-box: fill-box; transform-origin: center; }

/* A level card: the picture on a tinted wash, then the level's name. */
.sattopicpage__head + .satoutline__meta { margin-top: 14px; }
.sattests__head { margin: 26px 0 0; font: 700 1.2rem var(--font-display); }
.sattests__head + .satoutline__meta { margin-top: 4px; }
/* "Extra practice · basic quality" — the ladder's bulk questions, said plainly. */
.qualnote { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: -4px 0 14px; color: var(--muted); font-size: .84rem; line-height: 1.45; }
.qualbadge { flex: none; display: inline-flex; align-items: center; padding: 3px 10px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); color: var(--ink-soft); font-size: .74rem; font-weight: 700; white-space: nowrap; }
/* ---- SAT question-type cards: one small card per type, laid out in the
   order the SAT asks them. The picture is a paper slip carrying the type's
   own specimen plus one moving tool (Icons.typeArt); nine colours cycle
   with the order. Set on an element as --tier, like the level cards. ---- */
:root {
  --type-1: #0E9AA7; --type-2: #E4572E; --type-3: #7B5EA7; --type-4: #2E86DE; --type-5: #C98A04;
  --type-6: #1FA36B; --type-7: #D6336C; --type-8: #5661D8; --type-9: #8A6A3B;
}
.tiercard__desc { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.typegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
@media (min-width: 720px) { .typegrid { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); } }
.typecard {
  display: flex; flex-direction: column; gap: 3px; padding: 8px 10px 9px;
  border: 1.5px solid color-mix(in srgb, var(--tier) 26%, var(--line)); border-radius: var(--r);
  background: color-mix(in srgb, var(--tier) 6%, var(--surface)); color: var(--ink); text-decoration: none;
  transition: transform .2s var(--ease-out-back), border-color .18s var(--ease), box-shadow .2s var(--ease);
}
.typecard__art { display: block; height: 44px; margin-bottom: 4px; border-radius: var(--r-sm); background: color-mix(in srgb, var(--tier) 13%, var(--surface)); overflow: hidden; }
.typecard__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 16px; }
.typecard__no { font: 700 .6rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--tier); white-space: nowrap; }
.typecard__count { display: inline-flex; align-items: center; gap: 3px; font-size: .68rem; color: var(--muted); white-space: nowrap; }
.typecard__count svg { width: 11px; height: 11px; color: var(--tier); }
.typecard__soon { padding: 1px 7px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tier) 13%, var(--surface)); color: var(--tier); font-weight: 700; font-size: .6rem; letter-spacing: .02em; white-space: nowrap; }
.typecard__name { font: 700 .86rem var(--font-display); line-height: 1.2; }
a.typecard:hover { transform: translateY(-3px); border-color: var(--tier); box-shadow: 0 10px 24px color-mix(in srgb, var(--tier) 20%, transparent); }
.typecard.is-soon { cursor: default; }

.typeart { display: block; width: 100%; height: 100%; overflow: visible; }
.typeart .ta-soft { fill: color-mix(in srgb, var(--tier) 36%, var(--surface)); }
.typeart .ta-main { fill: var(--tier); }
.typeart .ta-gold { fill: #F2B233; }
.typeart .ta-ray { fill: none; stroke: #F2B233; stroke-width: 2.6; stroke-linecap: round; }
.typeart .ty-slip { fill: var(--surface); stroke: color-mix(in srgb, var(--tier) 30%, var(--surface)); stroke-width: 1.5; }
.typeart .ty-specimen { fill: color-mix(in srgb, var(--tier) 80%, var(--ink)); font-family: var(--font-display); font-weight: 700; }
.typeart .ty-ring { fill: none; stroke: var(--tier); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.typeart .ty-ring--gold { stroke: #F2B233; }
.typeart .ty-line { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.typeart .ty-stroke { fill: none; stroke: var(--tier); stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.typeart .ty-stroke--gold { stroke: #F2B233; }
.typeart .ty-glass { fill: color-mix(in srgb, #fff 60%, transparent); stroke: var(--tier); stroke-width: 4.5; }
.typeart .ty-glint { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }
.typeart .ty-handle { fill: none; stroke: var(--ink); stroke-width: 6; stroke-linecap: round; }
.typeart .ty-white { fill: var(--surface); }
.typeart .ty-frame { fill: var(--surface); stroke: var(--tier); stroke-width: 3.2; stroke-linejoin: round; }
.typeart .ty-grid { fill: none; stroke: color-mix(in srgb, var(--tier) 40%, var(--surface)); stroke-width: 2; }
.typeart .ty-dash { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 2 5; }
.typeart .ty-arc { fill: none; stroke: color-mix(in srgb, var(--tier) 50%, var(--surface)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 6; }
.typeart .ty-gear { fill: none; stroke: var(--tier); stroke-width: 7; }
.typeart .ty-tick { fill: none; stroke: #fff; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
.typeart .ty-bookline { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; opacity: .85; }
.typeart .ty-cut { fill: none; stroke: var(--surface); stroke-width: 2.4; }
.typeart .ty-loop-bg { fill: none; stroke: color-mix(in srgb, var(--tier) 28%, var(--surface)); stroke-width: 7; }
.typeart .ty-loop { fill: none; stroke: var(--tier); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 34 18; }
.typeart .ty-scribble { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }

/* Every tool keeps moving on its own, gently, and only with transforms and
   opacity so nine cards on a page cost next to nothing. The two motions
   that redraw a stroke run on desktop only. */
.typeart .ty-hero, .typeart .ty-beam, .typeart .ty-arrow, .typeart .ty-rays, .typeart .ty-pulse, .typeart .ty-cell,
.typeart .ty-rock, .typeart .ty-quarter, .typeart .ty-spinner, .typeart .ty-twinkle, .typeart .ty-bub--a, .typeart .ty-bub--b,
.typeart .ty-iris, .typeart .ty-bounce, .typeart .ty-popper, .typeart .ty-shake, .typeart .ty-climb { transform-box: fill-box; transform-origin: center; }
.typeart .ty-slice { transform-box: fill-box; transform-origin: left top; }
.typeart .ty-bar { transform-box: fill-box; transform-origin: center bottom; }
.typeart .ty-flagw { transform-box: fill-box; transform-origin: left center; }
.typeart .ty-swing { transform-box: fill-box; transform-origin: center top; }
.typeart .ty-hand { transform-origin: 0 0; }
.typeart .ty-key { animation: ty-turn 2.6s var(--ease) infinite alternate; }
.typeart .ty-mag { animation: ty-sweep 3.2s var(--ease) infinite alternate; }
.typeart .ty-bobber { animation: ty-bob 2.4s ease-in-out infinite; }
.typeart .ty-pencil { animation: ty-write 1.4s ease-in-out infinite alternate; }
.typeart .ty-beam { animation: ty-tilt 2.8s ease-in-out infinite alternate; }
.typeart .ty-rays { animation: ty-blink 1.6s ease-in-out infinite alternate; }
.typeart .ty-arrow { animation: ty-aim 2.6s cubic-bezier(.3, .7, .4, 1) infinite; }
.typeart .ty-slice { animation: ty-slice 3s var(--ease) infinite alternate; }
.typeart .ty-pulse { animation: ty-pulse 1.8s ease-in-out infinite; }
.typeart .ty-pulse--late { animation-delay: .9s; }
.typeart .ty-bar--a { animation: ty-grow 2.6s ease-in-out infinite alternate; }
.typeart .ty-bar--b { animation: ty-grow 2.6s ease-in-out .5s infinite alternate; }
.typeart .ty-bar--c { animation: ty-grow 2.6s ease-in-out 1s infinite alternate; }
.typeart .ty-cell { animation: ty-cell 4.8s ease-in-out infinite; }
.typeart .ty-link--a, .typeart .ty-split--l, .typeart .ty-swap--b, .typeart .ty-br--r { animation: ty-nudge-l 2s ease-in-out infinite alternate; }
.typeart .ty-link--b, .typeart .ty-split--r, .typeart .ty-swap--a, .typeart .ty-br--l { animation: ty-nudge-r 2s ease-in-out infinite alternate; }
.typeart .ty-hand { animation: ty-spin 6s linear infinite; }
.typeart .ty-hand--slow { animation: ty-arcsweep 3.4s ease-in-out infinite alternate; }
.typeart .ty-flagw { animation: ta-wave 1.2s var(--ease) infinite alternate; }
.typeart .ty-swing { animation: ty-swing 2.6s ease-in-out infinite alternate; }
.typeart .ty-rock { animation: ty-swing 2.2s ease-in-out infinite alternate; }
.typeart .ty-climb { animation: ty-climb 4s ease-in-out infinite; }
.typeart .ty-layer--a { animation: ty-bob 2.4s ease-in-out infinite; }
.typeart .ty-layer--b { animation: ty-bob 2.4s ease-in-out .4s infinite; }
.typeart .ty-iris { animation: ty-look 3s ease-in-out infinite alternate; }
.typeart .ty-popper { animation: ty-pop 2.4s ease-in-out infinite; }
.typeart .ty-shake { animation: ty-shake 2.6s ease-in-out infinite; }
.typeart .ty-quarter { animation: ty-quarter 3s var(--ease) infinite; }
.typeart .ty-bounce { animation: ty-bob 1.8s ease-in-out infinite; }
.typeart .ty-bub--a { animation: ty-pop 2.8s ease-in-out infinite; }
.typeart .ty-bub--b { animation: ty-pop 2.8s ease-in-out 1.4s infinite; }
.typeart .ty-spinner { animation: ty-spin 9s linear infinite; }
.typeart .ty-twinkle { animation: ty-twinkle 2.4s ease-in-out infinite; }
@media (hover: hover) and (min-width: 900px) {
  .typeart .ty-scribble { stroke-dasharray: 30; animation: ty-draw 2.4s linear infinite; }
  .typeart .ty-loop { animation: ty-loop 2.2s linear infinite; }
}
@keyframes ty-turn { from { transform: rotate(-12deg); } to { transform: rotate(12deg); } }
@keyframes ty-sweep { from { transform: translate(-8px, 4px); } to { transform: translate(3px, -4px); } }
@keyframes ty-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes ty-write { from { transform: translate(-3px, 2px) rotate(-4deg); } to { transform: translate(5px, -3px) rotate(3deg); } }
@keyframes ty-tilt { from { transform: rotate(-9deg); } to { transform: rotate(9deg); } }
@keyframes ty-blink { from { opacity: .2; } to { opacity: 1; } }
@keyframes ty-aim { 0% { transform: translate(16px, -16px); opacity: 0; } 30% { transform: translate(0, 0); opacity: 1; } 70% { transform: translate(0, 0); opacity: 1; } 100% { transform: translate(-5px, 5px); opacity: 0; } }
@keyframes ty-slice { from { transform: translate(0, 0); } to { transform: translate(4px, 4px); } }
@keyframes ty-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.28); } }
@keyframes ty-grow { from { transform: scaleY(.55); } to { transform: scaleY(1); } }
@keyframes ty-cell { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(15.5px, -12px); } 50% { transform: translate(-15.5px, -12px); } 75% { transform: translate(-15.5px, 12px); } }
@keyframes ty-nudge-l { from { transform: translateX(0); } to { transform: translateX(-3px); } }
@keyframes ty-nudge-r { from { transform: translateX(0); } to { transform: translateX(3px); } }
@keyframes ty-spin { to { transform: rotate(360deg); } }
@keyframes ty-arcsweep { from { transform: rotate(0deg); } to { transform: rotate(-60deg); } }
@keyframes ty-swing { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }
@keyframes ty-climb { 0%, 12% { transform: translate(0, 0); } 30%, 42% { transform: translate(12px, -11px); } 58%, 70% { transform: translate(24px, -22px); } 86%, 100% { transform: translate(34.5px, -33px); } }
@keyframes ty-look { from { transform: translateX(-6px); } to { transform: translateX(6px); } }
@keyframes ty-pop { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@keyframes ty-shake { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-10deg); } 80% { transform: rotate(10deg); } 90% { transform: rotate(-6deg); } }
@keyframes ty-quarter { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@keyframes ty-twinkle { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(.78) rotate(18deg); } }
@keyframes ty-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: -30; } }
@keyframes ty-loop { to { stroke-dashoffset: -52; } }
@media (prefers-reduced-motion: reduce) { .typeart * { animation: none !important; } }

/* Official domain headings inside a section outline, and a topic taught by
   more than one video (tabs, no script: radio inputs pick the panel). */
.satdomain { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 14px; padding: 20px 14px 9px; border-bottom: 1px solid var(--line); }
.satdomain:first-child { padding-top: 12px; }
.satdomain__name { font: 800 .74rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--tile-hue); }
.satdomain__share, .satunit__share { color: var(--muted); font-size: .78rem; }
.satunit__share { display: block; margin-top: 1px; }
.satvideos { position: relative; }
.satvideos__pick { position: absolute; opacity: 0; pointer-events: none; }
.satvideos__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.satvideos__tab {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border: 1.5px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink); font: 700 .82rem var(--font-body); cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease), color .16s var(--ease);
}
.satvideos__tab b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); font-size: .72rem; }
.satvideos__tab:hover { border-color: var(--tile-hue); }
.satvideos__panel { display: none; }
.satvideos__pick:nth-of-type(1):checked ~ .satvideos__tabs > :nth-child(1),
.satvideos__pick:nth-of-type(2):checked ~ .satvideos__tabs > :nth-child(2),
.satvideos__pick:nth-of-type(3):checked ~ .satvideos__tabs > :nth-child(3),
.satvideos__pick:nth-of-type(4):checked ~ .satvideos__tabs > :nth-child(4) { background: var(--tile-hue); border-color: var(--tile-hue); color: #fff; }
.satvideos__pick:nth-of-type(1):checked ~ .satvideos__tabs > :nth-child(1) b,
.satvideos__pick:nth-of-type(2):checked ~ .satvideos__tabs > :nth-child(2) b,
.satvideos__pick:nth-of-type(3):checked ~ .satvideos__tabs > :nth-child(3) b,
.satvideos__pick:nth-of-type(4):checked ~ .satvideos__tabs > :nth-child(4) b { background: #fff; color: var(--tile-hue); }
.satvideos__pick:nth-of-type(1):checked ~ .satvideos__panels > :nth-child(1),
.satvideos__pick:nth-of-type(2):checked ~ .satvideos__panels > :nth-child(2),
.satvideos__pick:nth-of-type(3):checked ~ .satvideos__panels > :nth-child(3),
.satvideos__pick:nth-of-type(4):checked ~ .satvideos__panels > :nth-child(4) { display: block; }
.satvideos__pick:nth-of-type(1):focus-visible ~ .satvideos__tabs > :nth-child(1),
.satvideos__pick:nth-of-type(2):focus-visible ~ .satvideos__tabs > :nth-child(2),
.satvideos__pick:nth-of-type(3):focus-visible ~ .satvideos__tabs > :nth-child(3),
.satvideos__pick:nth-of-type(4):focus-visible ~ .satvideos__tabs > :nth-child(4) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--tile-hue); }
.tiergrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin-top: 20px; }
.tiercard {
  position: relative; display: flex; flex-direction: column; gap: 10px; padding: 14px;
  border: 1.5px solid color-mix(in srgb, var(--tier) 28%, var(--line)); border-radius: var(--r);
  background: color-mix(in srgb, var(--tier) 7%, var(--surface)); color: var(--ink);
  text-decoration: none; overflow: hidden;
  transition: transform .22s var(--ease-out-back), border-color .18s var(--ease), box-shadow .22s var(--ease);
}
.tiercard__art { display: block; padding: 6px 8px 0; border-radius: var(--r-sm); background: color-mix(in srgb, var(--tier) 10%, var(--surface)); }
.tiercard__step { font: 700 .66rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--tier); }
.tiercard__name { font: 700 1.05rem var(--font-display); line-height: 1.15; }
.tiercard__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--muted); }
.qhq { display: inline-block; margin-left: 4px; padding: 1px 7px; border-radius: var(--r-pill); font: 700 .68rem var(--font-body); color: var(--tier); background: color-mix(in srgb, var(--tier) 14%, var(--surface)); }
.tiercard__go { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--tier); color: #fff; }
.tiercard__go svg { width: 15px; height: 15px; }
a.tiercard:hover { transform: translateY(-4px); border-color: var(--tier); box-shadow: 0 14px 30px color-mix(in srgb, var(--tier) 22%, transparent); }
a.tiercard:hover .ta-flag { animation: ta-wave .9s var(--ease) infinite alternate; }
a.tiercard:hover .ta-trophy { animation: ta-pop .6s var(--ease-out-back) both; }
a.tiercard:hover .ta-sun { animation: ta-spin 6s linear infinite; }
a.tiercard:hover .ta-fire { animation: ta-flicker .5s ease-in-out infinite alternate; }
a.tiercard:hover .ta-trail { animation: ta-march 1.2s linear infinite; }
.tiercard.is-soon { filter: grayscale(.9); opacity: .55; }
.tiercard.is-soon .tiercard__go { display: none; }
/* On a wide screen the ladder is six levels in a row with Final as one
   full-width card of the same height below; on narrower screens Final is
   simply the seventh card. */
@media (min-width: 720px) {
  .tiergrid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .tiergrid--ladder { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .tiercard--final { grid-column: 1 / -1; display: grid; grid-template-columns: calc((100% - 70px) / 6 - 28px) minmax(0, 1fr); grid-template-rows: auto auto auto auto; column-gap: 42px; row-gap: 10px; }
  .tiercard--final .tiercard__art, .tiercard--final .tiercard__step, .tiercard--final .tiercard__name, .tiercard--final .tiercard__meta { grid-column: 1; }
  .tiercard--final .tiercard__desc { grid-column: 2; grid-row: 1 / -1; align-self: center; font-size: 1.05rem; line-height: 1.5; color: var(--ink); max-width: 70ch; }
}
@keyframes ta-wave { from { transform: skewY(0) scaleX(1); } to { transform: skewY(-10deg) scaleX(.88); } }
@keyframes ta-pop { 0% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.12); } 100% { transform: translateY(0) scale(1); } }
@keyframes ta-spin { to { transform: rotate(360deg); } }
@keyframes ta-flicker { from { transform: scaleY(1); } to { transform: scaleY(1.25); } }
@keyframes ta-march { to { stroke-dashoffset: -14.2; } }

/* A level pill: the same picture, small — used in the Tests section lists. */
.tierpills { display: flex; flex-wrap: wrap; gap: 8px; }
.tierpill {
  display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border: 1.5px solid color-mix(in srgb, var(--tier) 35%, var(--line)); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--tier) 9%, var(--surface)); color: var(--ink);
  font: 700 .8rem var(--font-body); text-decoration: none;
  transition: transform .16s var(--ease-out-back), border-color .16s var(--ease), background-color .16s var(--ease);
}
.tierpill__art { display: block; width: 46px; flex: 0 0 auto; padding: 2px 3px 0; border-radius: var(--r-pill); background: color-mix(in srgb, var(--tier) 14%, var(--surface)); }
.tierpill small { font-weight: 600; color: var(--muted); }
.tierpill:hover { transform: translateY(-2px); border-color: var(--tier); background: color-mix(in srgb, var(--tier) 16%, var(--surface)); }
.tierpill:hover .ta-flag { animation: ta-wave .9s var(--ease) infinite alternate; }
.tierlegend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 14px 0 6px; font-size: .78rem; color: var(--muted); }
.tierlegend span { display: inline-flex; align-items: center; gap: 6px; }
.tierlegend i { width: 10px; height: 10px; border-radius: 50%; background: var(--tier); }

/* ---- Points / Levels / Badges (Phase 1) ------------------------------ */

/* A small, reusable liquid-fill bar: the flat fill is driven by --pct, a
   layered radial-gradient "bubble" texture scrolls across it for the
   liquid feel. CSS-only, no per-frame JS — shared by the profile chip,
   the #/levels hero and (later) anywhere else that wants the same look. */
.liquidbar { position: relative; display: inline-block; width: 100%; height: 14px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; vertical-align: middle; }
.liquidbar--sm { width: 64px; height: 8px; }
.liquidbar__fill {
  position: absolute; inset: 0 auto 0 0; width: var(--pct, 0%); height: 100%;
  background: var(--liquid, var(--grad)); border-radius: inherit; overflow: hidden;
  transition: width .6s var(--ease-out-back);
}
.liquidbar__wave {
  position: absolute; inset: -30% -20% auto -20%; height: 220%; opacity: .45;
  background:
    radial-gradient(closest-side, color-mix(in srgb, #fff 45%, transparent) 60%, transparent 62%) 0 0/20px 20px repeat-x,
    radial-gradient(closest-side, color-mix(in srgb, #fff 28%, transparent) 60%, transparent 62%) 10px 5px/20px 20px repeat-x;
  animation: liquid-wave 2.4s linear infinite;
}
@keyframes liquid-wave { to { transform: translateX(-20px); } }

.points-hero { margin-top: 6px; display: flex; flex-direction: column; gap: 8px; max-width: 420px; }
.points-hero__level { font: 700 1.3rem var(--font-display); color: var(--ink); }

/* Step-list of level thresholds (#/levels). Levels 1-20 show individually,
   then every 5th after that — driven by whatever pageLevels() filters, not
   hardcoded here. */
.levelsteps { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.levelrow {
  display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  color: var(--muted); font-size: .86rem;
}
.levelrow__n {
  display: grid; place-items: center; width: 26px; height: 26px; flex: 0 0 auto;
  border-radius: 50%; background: var(--surface-2); font: 700 .78rem var(--font-mono); color: var(--muted);
}
.levelrow__label { flex: 1; font-weight: 600; color: var(--ink); }
.levelrow__pts { color: var(--muted); }
.levelrow__reward { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); font-size: .74rem; font-weight: 700; }
.levelrow__reward svg { width: 12px; height: 12px; }
.levelrow.is-done { color: var(--ink); }
.levelrow.is-done .levelrow__n { background: var(--accent); color: #fff; }
.levelrow.is-current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.levelrow.is-current .levelrow__n { background: var(--grad); color: #fff; }

/* Badge medallion art: one ring+face+ribbon drawing, ~7 centre symbols,
   coloured entirely via --badge (see Icons.badgeArt / .ba-*). */
.badgeart { display: block; width: 100%; height: auto; overflow: visible; }
.badgeart .ba-ribbon { fill: color-mix(in srgb, var(--badge) 55%, var(--surface)); }
.badgeart .ba-ring { fill: color-mix(in srgb, var(--badge) 24%, var(--surface)); }
.badgeart .ba-face { fill: var(--badge); }
.badgeart .ba-sym { fill: #fff; }
.badgeart .ba-sym-thin { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.badgegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 12px; margin-top: 4px; }
.badgecard {
  display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); text-align: center;
}
.badgecard__art { display: block; width: 64px; }
.badgecard__name { font-size: .78rem; font-weight: 700; color: var(--ink); }
.badgecard__pts { font: 700 .72rem var(--font-mono); color: var(--badge); }
.badgecard:hover .badgeart { animation: ta-pop .6s var(--ease-out-back) both; }
.badgecard.is-locked { filter: grayscale(.9); opacity: .5; }
.badgecard.is-locked .badgecard__pts { color: var(--muted); }
.badgecard.is-locked:hover .badgeart { animation: none; }

/* Sidebar avatar's level ring, same overlay technique as .cart-count. */
/* The account trigger's unread-notifications badge — same spot/shape the
   level number used to occupy (the level moved to the avatar ring). On
   Home, with something unread, it delays its own entrance until the
   "{n} new" pill above it (.notifpop) has finished shrinking away, so the
   two read as one motion: pill announces, badge remains. */
.notifbadge {
  position: absolute; right: -5px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: var(--r-pill); background: var(--berry); color: #fff;
  font: 700 .58rem var(--font-mono); line-height: 16px; text-align: center;
  border: 2px solid var(--surface); cursor: pointer;
}
.notifbadge.is-intro { opacity: 0; animation: notifbadge-intro .3s var(--ease-out-back) 2.1s both; }
@keyframes notifbadge-intro { from { opacity: 0; transform: scale(.4); } to { opacity: 1; transform: scale(1); } }
.notifpop {
  position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translateX(-50%);
  white-space: nowrap; padding: 6px 13px; border-radius: var(--r-pill);
  background: var(--berry); color: #fff; font: 700 .74rem var(--font-body);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--berry) 45%, transparent);
  pointer-events: none; z-index: 20;
  animation: notifpop-intro 2.4s ease forwards;
}
.notifpop::after {
  content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--berry);
}
@keyframes notifpop-intro {
  0% { opacity: 0; transform: translateX(-50%) translateY(4px) scale(.85); }
  12% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  75% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
  100% { opacity: 0; transform: translateX(-50%) translateY(-4px) scale(.7); }
}
@media (prefers-reduced-motion: reduce) {
  .notifbadge.is-intro { animation: none; opacity: 1; }
  .notifpop { animation: none; opacity: 0; }
}

/* Level-up modal (Points.announceLevelUp) */
.points-modal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 28px 24px; text-align: center; }
.points-modal__badge { width: 88px; margin-bottom: 4px; }
.points-modal__title { font: 700 1.5rem var(--font-display); margin: 0; }
.points-modal__sub { color: var(--muted); margin: 0; }
.points-modal__reward { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 6px 14px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--accent) 14%, var(--surface)); color: var(--accent); font-weight: 700; font-size: .84rem; }
.points-modal__reward svg { width: 14px; height: 14px; }

/* ---- Notifications (likes/comments/follows/requests, see features/notify.js) */
.notiflist { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.notif__row { display: flex; align-items: center; gap: 4px; border-radius: var(--r); background: var(--surface); border: 1px solid var(--line); }
.notif__row.is-unread { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); }
.notif__main { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 10px; border: 0; background: none; text-align: left; cursor: pointer; border-radius: var(--r-sm); font: inherit; color: inherit; }
.notif__main:hover { background: var(--surface-2); }
.notif__body { flex: 1; min-width: 0; font-size: .88rem; color: var(--ink-soft); }
.notif__body b { color: var(--ink); }
.notif__snippet { display: block; color: var(--muted); font-style: italic; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notif__when { flex: 0 0 auto; color: var(--muted); font-size: .76rem; white-space: nowrap; }
.notif__acts { display: flex; gap: 6px; padding-right: 10px; flex: 0 0 auto; }

/* Tests section: SAT sections as tiles, then topic rows with level pills */
.testunit { margin-top: 30px; }
.testunit__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.testunit__head h2 { font: 700 1.05rem var(--font-display); margin: 0; }
.testunit__head span { color: var(--muted); font-size: .82rem; font-weight: 600; }
.testtopics { display: grid; gap: 10px; }
.testtopic {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; align-items: start;
  padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.testtopic .sattopic__sym { grid-row: span 2; }
.testtopic__name { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-weight: 700; color: var(--ink); text-decoration: none; }
.testtopic__name .mono { color: var(--muted); font-size: .8rem; font-weight: 600; }
a.testtopic__name:hover { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  a.tiercard:hover .ta-flag, a.tiercard:hover .ta-trophy, a.tiercard:hover .ta-sun, a.tiercard:hover .ta-fire, a.tiercard:hover .ta-trail, .tierpill:hover .ta-flag { animation: none; }
  .liquidbar__wave { animation: none; }
  .badgecard:hover .badgeart { animation: none; }
}

/* The Learn page: an illustrated lesson. The pen layer (features/ink.js)
   covers the whole page area, not just this column; the column is only
   the anchor that keeps notes on the words they were written over. */
.satlesson { position: relative; max-width: 720px; margin-top: 8px; padding-bottom: 40px; }
.satlesson__p { line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; }
.satlesson__h { font-family: var(--font-display); font-size: 1.05rem; margin: 28px 0 10px; }
.satlesson__rule {
  display: flex; align-items: flex-start; gap: 10px; margin: 10px 0; padding: 12px 14px;
  border-radius: 12px; background: color-mix(in srgb, var(--tile-hue) 8%, var(--surface)); font-weight: 700;
}
.satlesson__rule svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; color: var(--tile-hue); }
.satlesson__sentence { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.satlesson__cap { font-size: .75rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 8px; }
.satlesson__sen { font-family: var(--font-mono); font-size: 1rem; margin: 0; line-height: 1.8; }
.satlesson__part { padding: 2px 3px; border-radius: 5px; }
.satlesson__part--independent { background: color-mix(in srgb, var(--d-math) 20%, transparent); }
.satlesson__part--dependent { background: color-mix(in srgb, var(--berry) 20%, transparent); }
.satlesson__part--conjunction { background: color-mix(in srgb, var(--amber) 35%, transparent); font-weight: 700; }
.satlesson__example { margin: 16px 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); }
.satlesson__ex { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px; font-family: var(--font-mono); font-size: .92rem; }
.satlesson__ex svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 3px; color: var(--d-math); }
.satlesson__ex--bad { color: var(--berry); text-decoration: line-through; padding-left: 24px; }
.satlesson__why { color: var(--muted); font-size: .88rem; margin: 8px 0 0; white-space: pre-line; }
.satlesson__list { color: var(--ink-soft); line-height: 1.7; padding-left: 22px; margin: 0 0 16px; }
.satlesson__steps { counter-reset: step; list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 10px; }
.satlesson__steps li { counter-increment: step; position: relative; padding: 10px 14px 10px 50px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); color: var(--ink-soft); line-height: 1.6; }
.satlesson__steps li::before { content: counter(step); position: absolute; left: 12px; top: 10px; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--tile-hue); color: #fff; font: 700 .82rem var(--font-display); }
.satlesson__tip { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; padding: 14px 16px; border-radius: 14px; border-left: 4px solid var(--amber); background: color-mix(in srgb, var(--amber) 10%, var(--surface)); }
.satlesson__tip > svg { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 2px; color: var(--amber); }
.satlesson__tip b { display: block; margin-bottom: 4px; color: var(--ink); }
.satlesson__tip p { margin: 0; color: var(--ink-soft); line-height: 1.6; }
.satlesson__check { margin: 16px 0; padding: 14px 16px; border-radius: 14px; border: 1.5px dashed color-mix(in srgb, var(--tile-hue) 45%, var(--line)); background: var(--surface); }
.satlesson__q { margin: 0 0 8px; font-weight: 600; line-height: 1.6; white-space: pre-line; }
.satlesson__opts { margin: 0 0 10px; padding-left: 24px; list-style: upper-alpha; color: var(--ink-soft); line-height: 1.7; font-family: var(--font-mono); font-size: .92rem; }
.satlesson__check summary { cursor: pointer; font-weight: 700; color: var(--tile-hue); width: fit-content; }
.satlesson__ans { margin: 8px 0 0; color: var(--ink-soft); line-height: 1.6; }
/* Math lesson blocks: formula, worked example, trap. */
.satlesson__formula { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 14px 0; padding: 12px 16px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line); }
.satlesson__formula code { font-family: var(--font-mono); font-size: 1.02rem; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere; }
.satlesson__flabel { font-size: .78rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.satlesson__worked { margin: 16px 0; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); }
.satlesson__worked .satlesson__q { font-weight: 600; margin: 0 0 10px; }
.satlesson__worked .satlesson__steps { margin: 10px 0; }
.satlesson__worked .satlesson__rule { margin: 6px 0 0; }
.satlesson__trap { margin: 16px 0; padding: 14px 16px; border-radius: 14px; border-left: 4px solid var(--berry); background: color-mix(in srgb, var(--berry) 7%, var(--surface)); }
.satlesson__traptitle { display: flex; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--ink); }
.satlesson__traptitle svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--berry); }
.satlesson__trappair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 16px; }
.satlesson__trappair .satlesson__ex { margin: 0; }
@media (max-width: 640px) { .satlesson__trappair { grid-template-columns: 1fr; } }

/* Figures (src/features/figure.js): tables, coordinate planes, bar graphs,
   diagrams. Colours from tokens so dark mode needs no second set. */
.fig { margin: 0 0 16px; color: var(--ink-soft); }
.fig__svg, .fig__draw svg { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; overflow: visible; }
.fig__grid { stroke: var(--line); stroke-width: 1; }
.fig__axis { stroke: var(--ink-soft); stroke-width: 1.4; }
.fig__tick { fill: var(--muted); font: 600 10px var(--font-mono); }
.fig__label { fill: var(--ink-soft); font: 700 10.5px var(--font-body, sans-serif); }
.fig__line { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.fig__line--2 { stroke: var(--berry); }
.fig__line--3 { stroke: var(--amber); }
.fig__line.is-dash { stroke-dasharray: 6 5; }
.fig__lbl { fill: var(--ink); font: 700 11px var(--font-mono); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }
.fig__lbl--2 { fill: var(--berry); }
.fig__lbl--3 { fill: var(--amber); }
.fig__pt { fill: var(--accent); stroke: var(--surface); stroke-width: 1.2; }
.fig__bar { fill: color-mix(in srgb, var(--accent) 70%, var(--surface)); stroke: var(--accent); stroke-width: 1; }
.fig__draw { color: var(--ink-soft); }
.fig__draw svg { max-width: 340px; }
.fig__draw svg text { fill: currentColor; font: 600 12px var(--font-mono); }
.fig__draw .fig__fill { fill: color-mix(in srgb, var(--accent) 16%, transparent); }
.fig__cap { margin: 6px 0 0; text-align: center; color: var(--muted); font-size: .82rem; }
.fig__scroll { overflow-x: auto; }
.fig__table { border-collapse: collapse; margin: 0 auto; font-size: .9rem; font-variant-numeric: tabular-nums; }
.fig__table th, .fig__table td { padding: 6px 12px; border: 1px solid var(--line-strong); text-align: center; }
.fig__table thead th, .fig__table tbody th { background: var(--surface-2); color: var(--ink); font-weight: 700; }
/* A blank "paper" area at the end of the lesson, big enough to actually
   write on with the pen — not a decorative sliver. */
.satlesson__notes { margin: 36px 0 0; }
.satlesson__notes .satlesson__h { margin-top: 0; }
.satlesson__notesSub { color: var(--muted); font-size: .85rem; margin: 0 0 12px; }
.satlesson__notesArea {
  min-height: 55vh;
  border: 1.5px dashed var(--line-strong);
  border-radius: 16px;
  background:
    repeating-linear-gradient(to bottom, transparent 0 39px, var(--line) 39px 40px),
    var(--surface);
}

/* SAT topic page: video first, then (later) the lesson and practice. */
.sattopicpage .satvideo, .sattopicpage .satnav { max-width: 940px; }
.sattopicpage__head { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.sattopicpage .sattopicpage__sym { width: 56px; height: 56px; border-radius: 16px; font-size: 1.1rem; background: var(--tile-hue); color: #fff; border: 0; box-shadow: 0 10px 22px color-mix(in srgb, var(--tile-hue) 32%, transparent); }
.sattopicpage__crumbs { color: var(--tile-hue); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px; }
.sattopicpage__crumbs .mono { letter-spacing: 0; }
.satsteps { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 26px; padding: 0; }
.satsteps__item {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px 7px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: .85rem; font-weight: 700;
}
.satsteps__item small { font-weight: 600; font-size: .7rem; opacity: .8; }
.satsteps__n { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); font-size: .75rem; }
.satsteps > li { display: flex; }
.satsteps__item.is-on { color: var(--tile-hue); border-color: color-mix(in srgb, var(--tile-hue) 45%, var(--line)); background: color-mix(in srgb, var(--tile-hue) 8%, var(--surface)); }
.satsteps__item.is-on .satsteps__n { background: var(--tile-hue); color: #fff; }
/* the whole pill is the link, not just its label */
a.satsteps__item { text-decoration: none; cursor: pointer; transition: transform .16s var(--ease-out-back), border-color .16s var(--ease), background-color .16s var(--ease), box-shadow .16s var(--ease); }
a.satsteps__item:hover { transform: translateY(-1px); border-color: var(--tile-hue); box-shadow: 0 6px 16px color-mix(in srgb, var(--tile-hue) 18%, transparent); }
a.satsteps__item:focus-visible { outline: 2px solid var(--tile-hue); outline-offset: 2px; }
.satsteps__item.is-current { background: var(--tile-hue); border-color: var(--tile-hue); color: #fff; }
.satsteps__item.is-current .satsteps__n { background: #fff; color: var(--tile-hue); }
.satsteps + .satoutline__meta { margin-top: 0; }
.sattopicpage__h2 { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.1rem; margin-bottom: 12px; }
.sattopicpage__h2 svg { width: 18px; height: 18px; color: var(--tile-hue); }

.satvideo {
  position: relative; aspect-ratio: 16 / 9; width: 100%; border-radius: var(--r-lg); overflow: hidden;
  background: #0E1020; box-shadow: var(--shadow-2);
}
.satvideo video, .satvideo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #000; }
.satvideo--empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center;
  background:
    radial-gradient(70% 90% at 80% 10%, color-mix(in srgb, var(--tile-hue) 45%, transparent) 0%, transparent 60%),
    radial-gradient(60% 80% at 10% 100%, color-mix(in srgb, var(--accent) 35%, transparent) 0%, transparent 60%),
    #151829;
  color: #fff;
}
.satvideo__art { position: relative; width: 84px; height: 84px; display: grid; place-items: center; margin-bottom: 10px; }
.satvideo__ring { position: absolute; inset: 0; border-radius: 50%; border: 2px solid color-mix(in srgb, var(--tile-hue) 70%, #fff); animation: satvideo-pulse 2.4s var(--ease) infinite; }
.satvideo__play { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--tile-hue); box-shadow: 0 12px 30px rgba(0,0,0,.35); transition: transform .35s var(--ease-out-back); }
.satvideo__play svg { width: 26px; height: 26px; margin-left: 4px; fill: currentColor; }
.satvideo--empty:hover .satvideo__play { transform: scale(1.08); }
@keyframes satvideo-pulse { 0% { transform: scale(.85); opacity: .9; } 70% { transform: scale(1.35); opacity: 0; } 100% { opacity: 0; } }
.satvideo__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1rem, 2vw, 1.25rem); }
.satvideo__sub { color: rgba(255,255,255,.72); font-size: .88rem; max-width: 46ch; }

.satnav { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.satnav__link {
  display: grid; gap: 3px; padding: 12px 16px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); text-decoration: none; transition: border-color .2s var(--ease), transform .25s var(--ease-out-back);
}
.satnav__link small { color: var(--muted); font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.satnav__link span { font-size: .92rem; }
.satnav__link b { color: var(--tile-hue); font-family: var(--font-mono); font-size: .8rem; margin-right: 4px; }
.satnav__link--next { text-align: right; }
.satnav__link:hover { border-color: color-mix(in srgb, var(--tile-hue) 55%, var(--line)); transform: translateY(-2px); }
@media (max-width: 560px) {
  .satnav { grid-template-columns: 1fr; }
  .satnav__link--next { text-align: left; }
  .sattopicpage .sattopicpage__sym { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) { .satvideo__ring { animation: none; } }
.sattopic:hover { background: color-mix(in srgb, var(--tile-hue) 6%, transparent); color: var(--ink); }
.sattopic__sym {
  width: 40px; height: 30px; flex: 0 0 auto; border-radius: 9px; display: grid; place-items: center; overflow: hidden;
  background: var(--surface); border: 1px solid color-mix(in srgb, var(--tile-hue) 35%, var(--line)); color: var(--tile-hue);
  font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: -.02em; line-height: 1; white-space: nowrap;
  transition: transform .35s var(--ease-out-back), background-color .2s var(--ease), color .2s var(--ease);
}
.sattopic:hover .sattopic__sym { transform: translateY(-2px) rotate(-6deg) scale(1.12); background: var(--tile-hue); color: #fff; }
.sattopic__no { font-family: var(--font-mono); font-size: .74rem; color: var(--muted); min-width: 28px; }
.sattopic__name { font-size: .93rem; }
@media (max-width: 560px) {
  .satunit__head { gap: 11px; padding: 12px 4px; }
  .satunit__count { display: none; }
  .sattopics { margin-left: 22px; padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .satunit, .satunit__panel, .satunit__clip { animation: none; transition: none; }
}

.brick { transform-box: fill-box; transform-origin: center; transition: transform .4s var(--ease-out-back); }
.tile:hover .brick--1 { transform: translateX(-12px); }
.tile:hover .brick--2 { transform: translateX(12px); }
.tile:hover .brick--3 { transform: translateY(-10px); }

/* Planner tile — a calendar that wakes up under the cursor: the day cells
   lift in sequence, the "today" marker swells, and the tick draws itself. */
.cal-cell { transform-box: fill-box; transform-origin: center; transition: transform .38s var(--ease-out-back); }
.tile:hover .cal-cell--a { transform: translateY(-6px) scale(1.09); }
.tile:hover .cal-cell--b { transform: translateY(-4px) scale(1.06); transition-delay: .05s; }
.tile:hover .cal-cell--c { transform: translateY(-5px) scale(1.07); transition-delay: .1s; }
.tile:hover .cal-cell--d { transform: translateY(-3px) scale(1.05); transition-delay: .15s; }
.cal-check { stroke-dasharray: 26; stroke-dashoffset: 26; transition: stroke-dashoffset .5s var(--ease) .16s; }
.tile:hover .cal-check { stroke-dashoffset: 0; }
.cal-today { transform-box: fill-box; transform-origin: center; transition: transform .45s var(--ease-out-back); }
.tile:hover .cal-today { transform: scale(1.16) rotate(-6deg); }
.cal-ring { transform-box: fill-box; transform-origin: bottom center; transition: transform .4s var(--ease); }
.tile:hover .cal-ring--l { transform: rotate(-12deg); }
.tile:hover .cal-ring--r { transform: rotate(12deg); }

/* ==========================================================================
   AP catalog
   ========================================================================== */

.toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.search { position: relative; flex: 1 1 250px; max-width: 360px; }
.search input {
  width: 100%;
  padding: 11px 14px 11px 40px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .92rem;
}
.search svg {
  position: absolute; left: 13px; top: 50%; translate: 0 -50%;
  width: 17px; height: 17px; color: var(--muted); pointer-events: none;
}
.chipbar { display: flex; gap: 7px; flex-wrap: wrap; }
.chip {
  padding: 7px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: transparent;
  font-size: .82rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease), background-color .16s var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--ink-soft); }
.chip.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip--rect { border-radius: var(--r-xs); }

.coursegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 14px; }
.coursecard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  min-height: 150px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--tile-hue);
  border-radius: var(--r);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition: transform .26s var(--ease-out-back), box-shadow .26s var(--ease);
}
.coursecard:hover, .coursecard:focus-visible {
  transform: translateY(-6px) scale(1.04);
  box-shadow: var(--shadow-2);
  z-index: 2;
}
.coursecard__glyph {
  position: absolute;
  right: -14px; bottom: -14px;
  width: 96px; height: 96px;
  color: var(--tile-hue);
  opacity: .14;
  transition: transform .4s var(--ease-out-back), opacity .3s var(--ease);
}
.coursecard:hover .coursecard__glyph { transform: rotate(-10deg) scale(1.16); opacity: .24; }
.coursecard__glyph svg { width: 100%; height: 100%; display: block; }
.coursecard__disc {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--tile-hue);
  position: relative;
}
.coursecard__name {
  font-family: var(--font-display);
  font-size: 1.03rem;
  font-weight: 600;
  line-height: 1.24;
  letter-spacing: -.01em;
  position: relative;
}
.coursecard__meta {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .78rem;
  color: var(--muted);
  position: relative;
}
.coursecard__price { font-family: var(--font-mono); font-weight: 700; color: var(--accent); }
.coursecard__meta svg { width: 14px; height: 14px; flex: 0 0 auto; }
.coursecard__desc { position: relative; color: var(--muted); font-size: .82rem; line-height: 1.4; }

/* Horizontal rail: the English hub's Vocabulary/Grammar rows scroll
   sideways instead of wrapping into a tall grid — each .coursecard keeps
   its own styling, just pinned to a fixed width in a scrolling track. */
.hrail + .hrail { margin-top: 30px; }
.hrail__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hrail__title { font-family: var(--font-display); font-size: 1.1rem; font-weight: 700; letter-spacing: -.01em; }
.hrail__sub { color: var(--muted); font-size: .85rem; margin-top: 2px; }
.hrail__nav { display: flex; gap: 8px; flex: 0 0 auto; }
.hrail__navbtn {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center; border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); cursor: pointer;
}
.hrail__navbtn:hover { background: var(--surface-2); }
.hrail__navbtn svg { width: 16px; height: 16px; }
.hrail__track {
  display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: thin; padding: 4px 2px 12px;
}
.hrail__track > * { flex: 0 0 216px; scroll-snap-align: start; }
@media (max-width: 560px) {
  .hrail__head { align-items: center; }
  .hrail__track > * { flex-basis: 188px; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: var(--r-xs);
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.badge--owned { background: var(--mint); color: var(--navy); }
.badge--saved { background: var(--accent-wash); color: var(--accent); }
.badge--free  { background: var(--mint-soft); color: var(--mint); }
.badge--soon  { background: var(--surface-2); color: var(--muted); }

.empty-note {
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r);
}

/* ==========================================================================
   Course detail
   ========================================================================== */

.crumb {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--muted);
  margin-bottom: 14px;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0;
}
.crumb:hover { color: var(--accent); }
.crumb svg { width: 15px; height: 15px; flex: 0 0 auto; }

.detail { display: grid; grid-template-columns: minmax(0, 1fr) 318px; gap: 26px; align-items: start; }
.detail__head { margin-bottom: 22px; }
.detail__title { font-size: clamp(1.65rem, 3.4vw, 2.4rem); margin-top: 8px; }
.detail__sub { color: var(--muted); margin-top: 10px; max-width: 62ch; }

.unitlist { display: flex; flex-direction: column; gap: 9px; }
.unit {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.unit:hover { transform: translateX(4px); border-color: var(--accent); box-shadow: var(--shadow-1); }
.unit--locked { cursor: not-allowed; opacity: .8; }
.unit--locked:hover { transform: none; border-color: var(--berry); }
.unit--trial { border-color: var(--mint); background: var(--mint-soft); }

.unit__no {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: var(--r-xs);
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 700;
  color: var(--muted);
}
.unit__no svg { width: 16px; height: 16px; }
.unit--trial .unit__no { background: var(--mint); color: var(--navy); }
.unit__main { min-width: 0; flex: 1; }
.unit__name { font-weight: 600; font-size: .96rem; }
.unit__meta { font-size: .78rem; color: var(--muted); margin-top: 2px; }
.unit__lock { flex: 0 0 auto; display: flex; }
.unit__lock svg { color: var(--berry); width: 18px; height: 18px; }
.unit__open { flex: 0 0 auto; color: var(--accent); font-weight: 700; font-size: .82rem; white-space: nowrap; }

.progress { height: 5px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; margin-top: 7px; }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--grad); }

.rail {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-1);
}
.rail ul { list-style: none; padding: 0; margin: 0; }
.rail__list { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 6px; }
.rail__list li { display: flex; gap: 9px; font-size: .86rem; color: var(--ink-soft); align-items: flex-start; }
.rail__list svg { width: 16px; height: 16px; color: var(--accent); flex: 0 0 auto; margin-top: 3px; }

/* ==========================================================================
   Flashcards — built to the sample: mint face, condensed navy type
   ========================================================================== */

.deck { max-width: 760px; margin-inline: auto; }
.deck__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  font-size: .84rem;
  color: var(--muted);
}
.deck__bar-info { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.card3d {
  perspective: 1600px;
  width: 100%;
  aspect-ratio: 4 / 3;
  max-height: 470px;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 0;
  display: block;
}
.card3d__inner {
  position: relative;
  width: 100%;
  height: 100%;
  transition: transform .62s var(--ease);
  transform-style: preserve-3d;
}
.card3d.is-flipped .card3d__inner { transform: rotateY(180deg); }
.card3d__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 26px;
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-2);
  backface-visibility: hidden;
  text-align: center;
  overflow: hidden;
}
.card3d__face--front { background: var(--mint); }
.card3d__face--back { transform: rotateY(180deg); background: var(--mint-soft); }

.card3d__art { flex: 1; display: grid; place-items: center; min-height: 0; width: 100%; }
.card3d__art svg { max-height: 100%; width: auto; }
.card3d__plate {
  width: 100%;
  padding: 15px 22px;
  border-radius: var(--r);
  background: var(--surface);
}
.card3d__term {
  font-family: var(--font-card);
  font-weight: 700;
  font-size: clamp(1.5rem, 4.4vw, 2.5rem);
  line-height: 1.06;
  color: var(--navy);
}
.card3d__panel {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  padding: 28px;
  border-radius: var(--r);
  background: var(--surface);
}
.card3d__def {
  font-family: var(--font-card);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: 1.5;
  font-size: clamp(1rem, 2.3vw, 1.4rem);
  color: var(--navy);
  max-width: 30ch;
}
.card3d__hint {
  position: absolute;
  bottom: 9px;
  left: 0; right: 0;
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: .48;
}
.deck__acts { display: flex; gap: 10px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }

.paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 28px;
  text-align: center;
  border: 1px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--accent-wash);
}
.paywall svg { width: 96px; height: 96px; }

/* ==========================================================================
   Cart & checkout
   ========================================================================== */

.cartgrid { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 26px; align-items: start; }
.lineitem {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.lineitem + .lineitem { margin-top: 10px; }
.lineitem__name { font-weight: 600; }
.lineitem__meta { font-size: .78rem; color: var(--muted); }
.lineitem__price { margin-left: auto; font-family: var(--font-mono); font-weight: 700; }

.totals { display: flex; flex-direction: column; gap: 9px; }
.totals__row { display: flex; justify-content: space-between; gap: 12px; font-size: .9rem; color: var(--muted); }
.totals__row b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 600; }
.totals__row--save, .totals__row--save b { color: var(--mint); }
.totals__row--grand {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 4px;
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 700;
}
.totals__row--grand b { font-size: 1.35rem; }

.emptycart {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 44px 24px;
  text-align: center;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.emptycart svg { width: min(300px, 78%); height: auto; overflow: visible; }

@keyframes tumble { 0%, 100% { transform: translateX(0) rotate(0deg); } 50% { transform: translateX(10px) rotate(11deg); } }
.emptycart .basket { animation: tumble 3.6s var(--ease) infinite; transform-box: fill-box; transform-origin: bottom center; }

/* ==========================================================================
   Premium plans — draft pricing shown under the cart; final tiers and
   prices land once the rest of the site is finished.
   ========================================================================== */

.plangrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-top: 6px; }
.plancard {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.plancard--featured { border-color: var(--accent); box-shadow: var(--glow); }
.plancard__badge {
  position: absolute;
  top: -11px; left: 20px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: #FFFFFF;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.plancard__name { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.plancard__price { font-family: var(--font-mono); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; }
.plancard__price span { font-family: var(--font-body); font-size: .78rem; font-weight: 600; color: var(--muted); margin-left: 4px; }
.plancard__desc { color: var(--muted); font-size: .85rem; }
.plancard__feats { list-style: none; padding: 0; margin: 4px 0 6px; display: flex; flex-direction: column; gap: 7px; }
.plancard__feats li { display: flex; gap: 8px; align-items: flex-start; font-size: .86rem; color: var(--ink-soft); }
.plancard__feats svg { width: 16px; height: 16px; color: var(--mint); flex: 0 0 auto; margin-top: 2px; }

/* ==========================================================================
   Forms & modals
   ========================================================================== */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(14, 12, 32, .58);
  backdrop-filter: blur(4px);
  animation: fade .2s var(--ease);
  overflow-y: auto;
}
.overlay[hidden] { display: none !important; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px) scale(.985); } to { opacity: 1; transform: none; } }

.modal {
  width: min(520px, 100%);
  max-height: min(88vh, 920px);
  overflow-y: auto;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  animation: rise .24s var(--ease);
}
.modal--wide { width: min(700px, 100%); }
.modal__head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.modal__title { font-size: 1.45rem; }
.modal__sub { color: var(--muted); font-size: .89rem; margin-top: 5px; }
.modal__x { margin-left: auto; flex: 0 0 auto; }

.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.field > label { font-size: .82rem; font-weight: 700; color: var(--ink-soft); }
.field input, .field select, .field textarea {
  padding: 11px 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.field input:focus, .field select:focus { background: var(--surface); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.req { color: var(--berry); }
.hint { font-size: .76rem; color: var(--muted); }
.xr__note { max-width: 62ch; margin: 10px 0 0; padding: 10px 14px; border-left: 3px solid var(--accent); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--surface-2); font-size: .92rem; line-height: 1.5; }
.err {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: var(--berry-wash);
  color: var(--berry);
  font-size: .85rem;
  font-weight: 600;
  margin-bottom: 14px;
}
.err[hidden] { display: none !important; }
.err svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; }

.check {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 13px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-size: .85rem;
  cursor: pointer;
  margin-bottom: 12px;
  transition: border-color .16s var(--ease);
}
.check:hover { border-color: var(--accent); }
.check--required { border-left: 3px solid var(--berry); }
.check input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--accent); flex: 0 0 auto; }
.check a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

.codeboxes { display: flex; gap: 9px; justify-content: center; margin: 8px 0 16px; }
.codeboxes input {
  width: 48px; height: 58px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 700;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
}
.codeboxes input:focus { border-color: var(--accent); background: var(--surface); }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.codeboxes.is-bad { animation: shake .38s var(--ease); }
.codeboxes.is-bad input { border-color: var(--berry); }

.devnote {
  display: flex; gap: 9px; align-items: center;
  padding: 11px 13px;
  border: 1px dashed var(--accent);
  border-radius: var(--r-sm);
  background: var(--accent-wash);
  font-size: .82rem;
  margin-bottom: 14px;
}
.devnote b { font-family: var(--font-mono); font-size: 1.06rem; letter-spacing: .18em; color: var(--accent); }
.devnote svg { width: 17px; height: 17px; flex: 0 0 auto; color: var(--accent); }

.posegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; }
.pose {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  padding: 13px 8px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r);
  background: var(--surface-2);
  cursor: pointer;
  font-size: .75rem;
  font-weight: 600;
  color: var(--muted);
  transition: transform .22s var(--ease-out-back), border-color .18s var(--ease), background-color .18s var(--ease);
}
.pose:hover { transform: translateY(-4px) scale(1.05); border-color: var(--accent); }
.pose.is-on { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); border-width: 2px; }
.pose svg { width: 56px; height: 56px; }

.steps { display: flex; gap: 7px; margin-bottom: 18px; }
.steps span { flex: 1; height: 4px; border-radius: var(--r-pill); background: var(--line); }
.steps span.is-on { background: var(--accent); }

/* ==========================================================================
   Toast
   ========================================================================== */

.toaster {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 120;
  display: flex;
  flex-direction: column;
  gap: 9px;
  pointer-events: none;
}
.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: var(--shadow-2);
  font-size: .88rem;
  font-weight: 600;
  animation: rise .22s var(--ease);
  max-width: 340px;
}
.toast--warn { border-left-color: var(--berry); }
.toast svg { width: 17px; height: 17px; color: var(--accent); flex: 0 0 auto; }
.toast--warn svg { color: var(--berry); }

/* ==========================================================================
   Social row & footer
   ========================================================================== */

.social {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  padding-block: 34px;
  border-top: 1px solid var(--line);
}
.social__label { width: 100%; text-align: center; margin-bottom: 4px; }
.social a {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  color: var(--muted);
  transition: transform .2s var(--ease-out-back), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.social a:hover {
  transform: translateY(-4px) scale(1.08);
  background: var(--grad);
  border-color: transparent;
  color: #FFFFFF;
}
.social svg { width: 19px; height: 19px; }

.footer { background: var(--bg-sunk); border-top: 1px solid var(--line); padding-block: 42px 26px; }
.footer__cols { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); gap: 28px; }
.footer__brand { display: flex; flex-direction: column; gap: 10px; max-width: 30ch; }
.footer__brand svg, .footer__brand img { height: 38px; width: auto; display: block; align-self: flex-start; object-fit: contain; }
.footer__blurb { font-size: .85rem; color: var(--muted); }
.footer h4 {
  font-family: var(--font-body);
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer li a { font-size: .87rem; color: var(--ink-soft); transition: color .15s var(--ease); cursor: pointer; }
.footer li a:hover { color: var(--accent); }
.footer__base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: .82rem;
  color: var(--muted);
}
.footer__mini { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   Generic pages (Vocabulary / Grammar / Reading / My Courses / Profile)
   ========================================================================== */

.panelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); gap: 14px; }
.panel {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  transition: transform .25s var(--ease-out-back), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.panel:hover { transform: translateY(-5px) scale(1.028); box-shadow: var(--shadow-2); border-color: var(--accent); }
.panel__name { font-family: var(--font-display); font-size: 1.06rem; font-weight: 600; }
.panel__desc { font-size: .86rem; color: var(--muted); }
.panel__foot { margin-top: auto; padding-top: 10px; font-size: .78rem; color: var(--muted); display: flex; gap: 8px; align-items: center; }

.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r);
  background: var(--surface);
  font-size: .88rem;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.notice svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }

.prose { max-width: 68ch; display: flex; flex-direction: column; gap: 14px; }
.prose p { color: var(--ink-soft); }
.prose h3 { font-size: 1.12rem; margin-top: 10px; }
.prose ul { margin: 0; padding-left: 20px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 7px; }

/* ==========================================================================
   Study engine — word lists, mode picker, quizzes, match, IPA
   New component styles only, built entirely from existing tokens (surfaces,
   ink, accent, mint, radii, easing) so light/dark/dim all follow for free.
   ========================================================================== */

.modebar { display: flex; gap: 8px; flex-wrap: wrap; margin: 18px 0; }
.modebar .chip { display: inline-flex; align-items: center; gap: 6px; }
.modebar .chip svg { width: 15px; height: 15px; }

.wordlist { display: flex; flex-direction: column; gap: 10px; }
.word {
  padding: 14px 17px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
}
.word__head { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.word__actions { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.word__term { font-weight: 700; font-size: 1.02rem; }
.word__pos { font-size: .74rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.word__def { color: var(--ink-soft); margin-top: 4px; }
.word__ex { color: var(--muted); font-size: .88rem; font-style: italic; margin-top: 4px; }
.word__level {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: var(--r-xs);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .04em;
}

/* --------------------------------------------------- reading dictionary  */
/* Hoverable/clickable glossed words inside a reading passage. At rest they
   only carry a dotted underline; hovering reveals a soft-colored box, cycled
   across a handful of palette tokens so neighboring glossed words don't all
   read as the same color. Clicking one opens the full word-detail modal.   */
.rword {
  cursor: pointer;
  border-radius: 5px;
  padding: 0 1px;
  text-underline-offset: 3px;
  text-decoration: underline dotted color-mix(in srgb, var(--muted) 60%, transparent) 1.4px;
  transition: background-color .15s var(--ease), box-shadow .15s var(--ease);
}
.rword:hover, .rword:focus-visible {
  text-decoration-color: transparent;
  box-shadow: 0 0 0 3px var(--rword-hue, var(--accent-wash));
  background: var(--rword-hue, var(--accent-wash));
}
.rword--0 { --rword-hue: color-mix(in srgb, var(--accent) 20%, var(--surface)); }
.rword--1 { --rword-hue: color-mix(in srgb, var(--mint) 32%, var(--surface)); }
.rword--2 { --rword-hue: color-mix(in srgb, var(--amber) 26%, var(--surface)); }
.rword--3 { --rword-hue: color-mix(in srgb, var(--berry) 20%, var(--surface)); }
.rword--4 { --rword-hue: color-mix(in srgb, var(--blue) 20%, var(--surface)); }
.rword--5 { --rword-hue: color-mix(in srgb, var(--orchid) 22%, var(--surface)); }

.dict-fab {
  position: fixed;
  right: 22px;
  bottom: 92px;
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 20px 13px 16px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--grad);
  color: #FFFFFF;
  font-weight: 700;
  font-size: .9rem;
  cursor: pointer;
  box-shadow: var(--shadow-2), var(--glow);
  transition: transform .22s var(--ease-out-back);
}
.dict-fab:hover { transform: translateY(-3px) scale(1.03); }
.dict-fab svg { width: 19px; height: 19px; flex: 0 0 auto; }

.wordcard {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
}
.wordcard__head { display: flex; align-items: center; gap: 10px; }
.wordcard__term { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; }
.wordcard__row { display: flex; gap: 8px; font-size: .88rem; color: var(--ink-soft); }
.wordcard__row b { color: var(--muted); font-weight: 700; min-width: 78px; flex: 0 0 auto; }

/* -------------------------------------------------------------- lesson  */

.exlist { display: flex; flex-direction: column; gap: 12px; margin: 6px 0 4px; }
.ex {
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface-2);
  display: flex; flex-direction: column; gap: 5px;
}
.ex--good, .ex--bad { display: flex; align-items: flex-start; gap: 8px; margin: 0; }
.ex--good svg, .ex--bad svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 2px; }
.ex--good { color: var(--ink); }
.ex--good svg { color: var(--mint); }
.ex--bad { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 50%, transparent); }
.ex--bad svg { color: var(--muted); }
.ex__note { color: var(--muted); font-size: .86rem; margin: 2px 0 0 24px; text-decoration: none; }

.lesson-nav { display: flex; justify-content: space-between; gap: 10px; margin-top: 22px; }

/* --------------------------------------------------------------- quiz   */

.quiz__bar { color: var(--muted); font-size: .82rem; font-weight: 600; margin-bottom: 10px; }
.quiz { display: flex; flex-direction: column; gap: 14px; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.quiz__q { font-size: 1.08rem; font-weight: 600; }
.quiz__qrow { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.quiz__qrow .quiz__q { flex: 1; }
.quiz__qrow .iconbtn { flex: 0 0 auto; }
.quiz__opts { display: flex; flex-direction: column; gap: 9px; }
.quiz__opt {
  padding: 12px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: left;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.quiz__opt:hover:not(:disabled) { border-color: var(--accent); }
.quiz__opt:disabled { cursor: default; }
.quiz__opt.is-right { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 16%, var(--surface)); }
.quiz__opt.is-wrong { border-color: #E0637A; background: color-mix(in srgb, #E0637A 14%, var(--surface)); }
.quiz__why { display: flex; align-items: flex-start; gap: 8px; font-size: .9rem; color: var(--ink-soft); margin: 0; }
.quiz__why svg { width: 16px; height: 16px; flex: 0 0 auto; margin-top: 1px; }
.quiz__why.is-right svg { color: var(--mint); }
.quiz__why.is-wrong svg { color: #E0637A; }
.quiz__score { font-size: 1.15rem; font-weight: 700; }
.quiz__review { text-align: left; max-width: 46ch; margin: 4px auto 0; display: flex; flex-direction: column; gap: 6px; }
.quiz__reviewline { color: var(--ink-soft); font-size: .88rem; margin: 0; }

.writebox { display: flex; gap: 9px; flex-wrap: wrap; }
.writebox input {
  flex: 1 1 220px;
  padding: 12px 15px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .95rem;
}

.matchgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.matchcol { display: flex; flex-direction: column; gap: 9px; }
.matchcell {
  padding: 11px 14px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  text-align: left;
  font-size: .92rem;
  cursor: pointer;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.matchcell:hover:not(:disabled) { border-color: var(--accent); }
.matchcell.is-picked { border-color: var(--accent); background: var(--accent-wash); }
.matchcell.is-solved { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 16%, var(--surface)); cursor: default; opacity: .8; }
.matchcell.is-wrong { border-color: #E0637A; background: color-mix(in srgb, #E0637A 14%, var(--surface)); }

/* ------------------------------------------------------------------- games */
/* features/games.js — Matching, Quick swipe and Hangman. The picker screen
   reuses the home page's own .shelf/.tile component (and its tileArt pop/
   trace hover animation); the cards below reuse .card3d for the flip. */

.gm { max-width: 640px; }
.gm--wide { max-width: 980px; }
.gm--full { max-width: var(--maxw); }
.gm--run .hint { margin: 0 0 6px; }

/* The three game tiles (in-pack picker and the #/games hub share this):
   confine the art to a corner instead of the home page's full-bleed-right
   placement, since these tiles run narrower — otherwise the art sits
   directly behind the name/description and the text reads as "missing". */
.gmshelf.shelf { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-top: 18px; }
.gmshelf .tile__art { opacity: .9; }
.gmshelf .tile__art svg { right: 10px; top: 10px; translate: none; height: 46%; }
.gmshelf .tile__body { position: relative; z-index: 1; max-width: 72%; }

/* ---- hub: pick-topics screen (plain rows, not tiles, multi-select) ---- */
.gmtopics { margin-top: 16px; display: flex; flex-direction: column; gap: 8px; }
.gmtopics__row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 16px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); cursor: pointer;
}
.gmtopics__row:hover { border-color: var(--accent); }
.gmtopics__name { font-weight: 600; }
.gmtopics__meta { margin-left: 8px; color: var(--muted); font-weight: 400; font-size: .84rem; }
.gmtopics__row input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--accent); flex: 0 0 auto; }

/* ---- matching ---- */
/* Sized to use the page's full width (.gm--full on the run screen) and
   fit everything in one screen, without scrolling — more, narrower
   columns rather than the few-huge or many-tiny extremes tried before. */
.memgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--mem-min, 170px), 1fr)); gap: 12px; margin-top: 12px; }
.memgrid.is-locked { pointer-events: none; }
.memgrid .card3d { max-height: 190px; }
.memgrid .card3d__face { padding: 12px; border-radius: var(--r-sm); box-shadow: var(--shadow-1); gap: 6px; }
.memgrid .card3d__face--front svg { width: 40px; height: 40px; }
.memgrid .card3d__face--back { background: var(--surface); border: 1px solid var(--line-strong); }
.memcard.is-solved { opacity: .45; }
.memcard__text { font-size: .88rem; line-height: 1.25; overflow-wrap: break-word; word-break: break-word; }
.memcard__text--sm { font-size: .76rem; }
.memcard__text--xs { font-size: .68rem; }

/* ---- flashcards (quick swipe) ---- */
.swipewrap { display: flex; justify-content: center; margin: 18px 0; touch-action: none; }
.swipecard { position: relative; width: 100%; max-width: 360px; user-select: none; cursor: pointer; }
.swipecard .card3d { max-height: 320px; }
.swipecard .card3d__face--front { background: var(--mint); gap: 10px; }
.swipecard .card3d__face--back { background: var(--surface); border: 1px solid var(--line-strong); }
.swipecard__term { font-size: 1.3rem; }
.swipecard__def { color: var(--ink-soft); margin: 0; }
.swipecard__label {
  position: absolute; top: 14px; z-index: 2; font-weight: 700; font-size: .82rem; letter-spacing: .04em;
  padding: 4px 10px; border-radius: var(--r-xs); text-transform: uppercase; background: var(--bg);
}
.swipecard__label--know { left: 14px; color: var(--mint); border: 2px solid var(--mint); }
.swipecard__label--archive { right: 14px; color: #E0637A; border: 2px solid #E0637A; }
.swipebtns { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 18px; }
.swipebtns .iconbtn { flex: 0 0 auto; }

/* ---- speed match ---- */
.smgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.smcard {
  min-height: 74px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: var(--r-sm);
  background: var(--surface); font-size: .9rem; line-height: 1.3; cursor: pointer; text-align: center;
  display: flex; align-items: center; justify-content: center; overflow-wrap: anywhere;
  transition: transform .16s var(--ease), background-color .16s var(--ease), border-color .16s var(--ease), opacity .3s var(--ease);
}
.smcard--t { font-weight: 700; background: var(--accent-wash); }
.smcard:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-2px); }
.smcard--selected { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.smcard--wrong { border-color: #E0637A; background: color-mix(in srgb, #E0637A 18%, var(--surface)); }
.smcard--matched { opacity: 0; transform: scale(.85); pointer-events: none; }

/* ---- anagram ---- */
.andef { font-size: 1.1rem; font-weight: 600; margin: 8px 0 18px; }
.anslots, .anpool { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.anslot {
  width: 46px; height: 54px; display: inline-flex; align-items: center; justify-content: center;
  border: 2px dashed var(--line-strong); border-radius: var(--r-xs); background: var(--surface);
  font-size: 1.3rem; font-weight: 700; text-transform: uppercase; cursor: pointer;
}
.anslot--filled { border-style: solid; border-color: var(--accent); }
.anslot--fixed { border: none; background: none; cursor: default; width: 24px; }
.anslot--wrong { border-color: #E0637A; background: color-mix(in srgb, #E0637A 18%, var(--surface)); animation: anshake .4s; }
.anslot--right { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 25%, var(--surface)); }
@keyframes anshake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.antile {
  width: 46px; height: 54px; border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: var(--accent-wash); font-size: 1.3rem; font-weight: 700; text-transform: uppercase; cursor: pointer;
  box-shadow: var(--shadow-1); transition: transform .12s var(--ease), opacity .2s var(--ease);
}
.antile:hover:not(:disabled) { transform: translateY(-3px); }
.antile--used { opacity: .25; cursor: default; }

/* ---- word search ---- */
.wsplay { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; margin-top: 10px; }
.wsgrid {
  display: grid; grid-template-columns: repeat(var(--ws-n), 1fr); gap: 2px; flex: 1 1 360px; max-width: 560px;
  touch-action: none; user-select: none; -webkit-user-select: none;
}
.wscell {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-weight: 700;
  font-size: clamp(.7rem, 2.2vw, 1.05rem); border-radius: 6px; background: var(--surface); border: 1px solid var(--line);
  cursor: pointer;
}
.wscell--selecting { background: var(--accent-wash); border-color: var(--accent); }
.wscell--found { color: #fff; border-color: transparent; }
.wsclues { flex: 1 1 220px; margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }
.wsclues__word { font-weight: 700; color: var(--accent); }
.wsclues__item--done { text-decoration: line-through; color: var(--muted); }
.wsclues__item--done .wsclues__word { text-decoration: none; display: inline-block; }

/* ---- crossword ---- */
.xwplay { display: flex; flex-direction: column; gap: 22px; margin-top: 10px; }
/* grid on top, clues below (no sideways scrolling): cells shrink to fit the width, capped at 44px */
.xwwrap { width: 100%; }
.xwgrid { display: grid; grid-template-columns: repeat(var(--xw-cols), minmax(0, 1fr)); gap: 2px; width: min(100%, calc(var(--xw-cols) * 46px)); margin: 0 auto; }
.xwcell { position: relative; aspect-ratio: 1; border-radius: 4px; background: var(--surface); border: 1px solid var(--line-strong); }
.xwcell small { position: absolute; top: 1px; left: 3px; font-size: .55rem; color: var(--muted); pointer-events: none; }
.xwcell--block { background: transparent; border: none; }
.xwcell__input {
  width: 100%; height: 100%; border: 0; background: transparent; text-align: center; padding: 6px 0 0; min-width: 0;
  font-size: clamp(.7rem, 2.4vw, 1.05rem); font-weight: 700; text-transform: uppercase; color: var(--ink); outline: none;
}
.xwcell--active { background: var(--accent-wash); border-color: var(--accent); }
.xwcell--wrong { background: color-mix(in srgb, #E0637A 20%, var(--surface)); }
.xwcell--solved { background: color-mix(in srgb, var(--mint) 25%, var(--surface)); }
.xwclues { font-size: .9rem; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 4px 28px; align-items: start; }
.xwclues > button { grid-column: 1 / -1; justify-self: start; }
.xwclues h4 { margin: 0 0 6px; }
.xwclues ol { margin: 0 0 14px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.xwclues__item { cursor: pointer; padding: 3px 6px; border-radius: 6px; }
.xwclues__item--active { background: var(--accent-wash); }
.xwclues__item--done { text-decoration: line-through; color: var(--muted); }

/* ---- falling words ---- */
.fwtop { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.fwlives { display: inline-flex; gap: 4px; }
.fwlife svg { width: 22px; height: 22px; color: #E0637A; }
.fwlife--lost svg { color: var(--muted); }
.fwstage { position: relative; height: 320px; overflow: hidden; border: 1px solid var(--line-strong); border-radius: var(--r); background: linear-gradient(180deg, var(--accent-wash), var(--surface)); }
.fwword {
  position: absolute; top: 0; left: 50%; translate: -50% 0; padding: 10px 22px; border-radius: 14px;
  background: #fff; color: #22303F; box-shadow: var(--shadow-2); font-weight: 700; font-size: 1.15rem; white-space: nowrap;
}
.fwword--falling { animation: fwfall linear forwards; }
.fwword--missed { background: #FFD9DF; }
@keyframes fwfall { from { transform: translateY(0); } to { transform: translateY(262px); } }
@media (prefers-reduced-motion: reduce) {
  .fwword--falling { animation-name: fwfall-rm; top: 40%; }
  @keyframes fwfall-rm { from { opacity: 1; } to { opacity: .35; } }
}
.fwchoices { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 14px; }
.fwchoice { padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); text-align: left; cursor: pointer; font-size: .92rem; }
.fwchoice:hover:not(:disabled) { border-color: var(--accent); }
.fwchoice--correct { border-color: var(--mint); background: color-mix(in srgb, var(--mint) 25%, var(--surface)); }
.fwchoice--wrong { border-color: #E0637A; background: color-mix(in srgb, #E0637A 18%, var(--surface)); }

/* ---- hangman ---- */
.fillgrid { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.fillgrid__main { flex: 1 1 280px; min-width: 0; }
.fillgrid__gallows { flex: 0 0 140px; text-align: center; }
.fillgallows { width: 100%; max-width: 140px; }
.fillgrid__lives { margin-top: 6px; }
/* Each newly-missed body part draws itself in like a brush stroke instead
   of popping in whole (pathLength="1" makes the dash math size-agnostic
   for both lines and the head's circle). */
.fillgallows__draw { stroke-dasharray: 1; stroke-dashoffset: 1; animation: fillgallows-draw .7s var(--ease, ease) forwards; }
@keyframes fillgallows-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .fillgallows__draw { animation: none; stroke-dashoffset: 0; } }
.fillclue { font-size: 1.15rem; line-height: 1.5; font-weight: 600; margin: 0 0 18px; }
.fillclue small { color: var(--muted); font-weight: 400; }
.fillblank-group { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 22px; }
.fillblank {
  display: inline-block; min-width: 26px; height: 38px; line-height: 36px; font-size: 1.4rem; text-transform: uppercase;
  border-bottom: 3px solid var(--line-strong); text-align: center; font-weight: 700;
}
/* Praise phrase shown for a moment on every correct answer (same ten
   phrases as the tests). */
.gmpraise {
  position: fixed; left: 50%; bottom: 36px; translate: -50% 0; z-index: 60; padding: 10px 22px;
  border-radius: 999px; background: var(--accent); color: #fff; font-weight: 700; box-shadow: var(--shadow-2);
  pointer-events: none; animation: gmpraise-in 1.2s var(--ease) forwards;
}
@keyframes gmpraise-in { 0% { opacity: 0; transform: translateY(14px); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
.fillblank--sep { border-bottom: none; min-width: 6px; }
.fillblank.is-revealed { border-color: var(--accent); }
.fillkeyboard { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.fillkey {
  min-width: 34px; padding: 8px 0; border: 1px solid var(--line-strong); border-radius: var(--r-xs);
  background: var(--surface); font-weight: 600; cursor: pointer;
}
.fillkey:hover:not(:disabled) { border-color: var(--accent); }
.fillkey--used { opacity: .55; cursor: default; }
.fillkey--wrong { border-color: #E0637A; background: color-mix(in srgb, #E0637A 14%, var(--surface)); }
@media (max-width: 560px) {
  .fillgrid { flex-direction: column; }
  .fillgrid__gallows { flex-basis: auto; width: 120px; margin: 0 auto 10px; }
}

/* -------------------------------------------------------- phonetic alphabet */

.ipagrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-bottom: 8px; }
.ipa {
  padding: 14px 15px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  transition: border-color .16s var(--ease), transform .16s var(--ease);
}
.ipa:hover { border-color: var(--accent); transform: translateY(-2px); }
.ipa__symbol { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 1.15rem; font-weight: 700; color: var(--accent); }
.ipa__symbol svg { width: 14px; height: 14px; opacity: .7; }
.ipa__name { font-size: .78rem; color: var(--muted); text-transform: uppercase; letter-spacing: .02em; }
.ipa__examples { font-size: .86rem; color: var(--ink-soft); }
.ipa__word { cursor: pointer; }
.ipa__word:hover { color: var(--accent); text-decoration: underline; }

/* ==========================================================================
   Program Oluşturucu — home-page planner
   Reuses existing tokens/components (.chip, .iconbtn, .field, .notice,
   .modal__head) throughout; only genuinely new shapes get their own class.
   ========================================================================== */

.pv-shelf { display: flex; flex-direction: column; gap: 18px; margin-top: 4px; }
.pv-card { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-1); overflow: hidden; }
.pv-card__head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px 24px 4px; }
.pv-card__title h3 { font-size: 1.22rem; }
.pv-card__title p { color: var(--muted); font-size: .87rem; margin-top: 4px; max-width: 46ch; }
.pv-card__body { padding: 14px 24px 24px; }
.pv-card__body--top { padding-top: 24px; }
.pv-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.pv-daynav { display: flex; align-items: center; gap: 10px; margin: 10px 0 4px; flex-wrap: wrap; }
.pv-daynav .iconbtn { width: 34px; min-width: 34px; height: 34px; }
.pv-daylabel { display: flex; flex-direction: column; line-height: 1.2; margin-right: auto; }
.pv-daylabel strong { font-size: .98rem; }
.pv-daylabel span { font-size: .78rem; color: var(--muted); }

.pv-list { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pv-task { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); transition: opacity .15s; }
.pv-task.is-done { opacity: .55; }
.pv-check { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--line-strong); background: none; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #FFFFFF; }
.pv-task.is-done .pv-check { background: var(--mint); border-color: var(--mint); }
.pv-check svg { width: 13px; height: 13px; }
.pv-avatar { flex: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFFFFF; box-shadow: 0 0 0 2px var(--surface-2); }
.pv-avatar svg { width: 18px; height: 18px; }
.pv-task-main { min-width: 0; flex: 1; }
.pv-task-title { font-weight: 600; font-size: .93rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-task.is-done .pv-task-title { text-decoration: line-through; }
.pv-task-time { font-size: .77rem; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; gap: 8px; align-items: center; }
.pv-example-badge { font-size: .63rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line-strong); border-radius: var(--r-pill); padding: 1px 6px; }
.pv-edit { flex: none; border: none; background: none; color: var(--muted); cursor: pointer; padding: 6px; border-radius: var(--r-xs); }
.pv-edit:hover { color: var(--accent); background: var(--accent-wash); }
.pv-edit svg { width: 16px; height: 16px; }

.pv-tabs { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 3px; gap: 2px; margin: 4px 0 18px; }
.pv-rangenav { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; color: var(--muted); font-size: .88rem; }
.pv-rangenav strong { color: var(--ink); }
.pv-rangenav .iconbtn { width: 30px; min-width: 30px; height: 30px; }

.pv-progrid { display: grid; grid-template-columns: 190px 1fr; gap: 26px; align-items: start; }
.pv-donutwrap { position: relative; width: 158px; height: 158px; margin: 0 auto; }
.pv-donutwrap svg { width: 100%; height: 100%; }
.pv-donutctr { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.pv-donutctr b { font-size: 1.6rem; font-family: var(--font-display); }
.pv-donutctr span { font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pv-legend { display: flex; justify-content: center; gap: 16px; font-size: .78rem; color: var(--ink-soft); margin-top: 10px; }
.pv-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.pv-stats { display: flex; gap: 10px; margin-top: 14px; }
.pv-stat { flex: 1; border: 1px solid var(--line); border-radius: var(--r); padding: 9px 13px; background: var(--surface-2); }
.pv-stat span { display: block; font-size: .66rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pv-stat b { font-size: 1.15rem; }

.pv-rowhead { font-size: .78rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px; }
.pv-rows { display: flex; flex-direction: column; gap: 10px; }
.pv-row { display: grid; grid-template-columns: 116px 1fr 42px; align-items: center; gap: 10px; }
.pv-row-label { font-size: .84rem; font-weight: 600; display: flex; align-items: center; gap: 7px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pv-row-ic { width: 18px; height: 18px; flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; }
.pv-row-ic svg { width: 10px; height: 10px; }
.pv-row-track { height: 12px; border-radius: var(--r-pill); background: var(--surface-2); overflow: hidden; }
.pv-row-fill { display: block; height: 100%; border-radius: var(--r-pill); background: var(--accent); }
.pv-row-val { font-size: .8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

.pv-chip.is-on { background: color-mix(in srgb, var(--pv-hue) 18%, var(--surface)); border-color: var(--pv-hue); color: var(--pv-hue); }
.pv-chip svg { width: 14px; height: 14px; }
.pv-swatches { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pv-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; }
.pv-swatch.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--surface); }

/* Image picker — the glyphs belonging to whichever category is selected. */
.pv-icons { display: flex; flex-wrap: wrap; gap: 8px; }
.pv-icon {
  width: 42px; height: 42px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--pv-hue, var(--accent));
  cursor: pointer;
  transition: transform .2s var(--ease-out-back), border-color .18s var(--ease), background-color .18s var(--ease);
}
.pv-icon svg { width: 21px; height: 21px; }
.pv-icon:hover { transform: translateY(-3px); border-color: var(--pv-hue, var(--accent)); }
.pv-icon.is-on {
  border-color: var(--pv-hue, var(--accent));
  border-width: 2px;
  background: color-mix(in srgb, var(--pv-hue, var(--accent)) 16%, var(--surface));
}
.pv-timerow { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pv-timegroup { display: flex; align-items: center; gap: 4px; }
.pv-timegroup select { padding: 9px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); font-variant-numeric: tabular-nums; }

/* ==========================================================================
   YelAI chat — a message log, own bubble shapes, everything else borrowed
   ========================================================================== */

.chatlog { display: flex; flex-direction: column; gap: 10px; max-height: 440px; overflow-y: auto; padding: 4px 2px; }
.chatbubble { max-width: 82%; padding: 11px 15px; border-radius: var(--r); font-size: .92rem; line-height: 1.5; white-space: pre-wrap; }
/* pre-wrap is for plain-text answers; a formatted answer (term card, grammar
   note) is built from indented template markup, whose line breaks must not show. */
.chatbubble:has(> *) { white-space: normal; }
.chatbubble > p { margin: 4px 0 0; }
.chatbubble p { margin: 0 0 6px; }
.chatbubble p:last-child { margin-bottom: 0; }
.chatbubble--user { align-self: flex-end; background: var(--accent); color: var(--accent-ink); }
.chatbubble--assistant { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--line); }
.chatbubble__title { font-weight: 700; margin-bottom: 4px; }

/* ==========================================================================
   YelAI dock — the launcher and panel that live in the bottom-right corner
   on every page. It sits just under the toaster (z-index 120) so a toast
   is never covered, and it is a sibling of #app-page, so routing never
   re-renders it and a streaming answer is never interrupted by navigation.
   ========================================================================== */

/* Below the modal overlay (90) so a dialog always covers it, above the
   reading Dictionary button (45), and under the toaster (120). */
/* Below the modal overlay (90) so a dialog always covers it, above the
   reading Dictionary button (45), and under the toaster (120). */
.yeldock { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }

/* ------------------------------------------------------------ the launcher */
/* A real 3D mascot lives inside this circle (Mascot3D), so the button is a
   stage rather than an icon holder. The flat SVG is still injected as the
   fallback when Three.js or WebGL is missing, and the old breathe/bob
   animations apply to it alone. */
.yeldock__launch {
  position: relative;
  width: 66px; height: 66px;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--ai-grad);
  box-shadow: var(--shadow-2), 0 14px 34px color-mix(in srgb, var(--ai-2) 28%, transparent);
  cursor: pointer;
  display: grid; place-items: center;
  transition: transform .28s var(--ease-out-back), box-shadow .28s var(--ease);
}
.yeldock__launch::after {
  content: "";
  position: absolute; inset: -6px;
  border-radius: inherit;
  border: 2px solid var(--accent);
  opacity: 0;
  transition: opacity .25s var(--ease), transform .25s var(--ease);
  transform: scale(.9);
}
.yeldock__launch:hover { transform: translateY(-4px) scale(1.06); }
.yeldock__launch:hover::after { opacity: .5; transform: scale(1); }
.yeldock__launch:active { transform: translateY(-1px) scale(.98); }

/* The gradient shows as a thin ring around the button's edge (the 3px inset
   below); the disc itself stays a theme-neutral surface so the mark — which
   draws in that same gradient family — still reads clearly on top of it. */
.yeldock__stage { position: absolute; inset: 3px; display: grid; place-items: center; border-radius: inherit; overflow: hidden; background: var(--surface); }
.yeldock__stage canvas { display: block; width: 100%; height: 100%; }
.yeldock__stage > svg { width: 62%; height: auto; display: block; animation: breathe 5.5s ease-in-out infinite; transform-origin: center; }
.yeldock.is-thinking .yeldock__stage > svg { animation-duration: 1.1s; }

/* While an answer is being written the launcher wears a soft pulsing halo —
   the same signal the header row gives, readable with the panel closed. */
.yeldock.is-thinking .yeldock__launch { animation: dockPulse 1.5s var(--ease) infinite; }
@keyframes dockPulse {
  0%, 100% { box-shadow: var(--shadow-2), 0 0 0 0 color-mix(in srgb, var(--accent) 45%, transparent); }
  55%      { box-shadow: var(--shadow-2), 0 0 0 12px transparent; }
}

.yeldock__dot {
  position: absolute; top: 2px; right: 2px;
  width: 14px; height: 14px;
  border-radius: var(--r-pill);
  background: var(--ai-3);
  box-shadow: 0 0 0 3px var(--bg);
}
.yeldock__dot[hidden] { display: none; }

/* --------------------------------------------------------------- the panel */
.yeldock__panel {
  position: relative;
  width: min(380px, calc(100vw - 36px));
  height: min(560px, calc(100vh - 130px));
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow-3);
  overflow: hidden;
  animation: rise .22s var(--ease);
}
.yeldock__panel[hidden] { display: none !important; }
.yeldock__head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.yeldock__id { min-width: 0; flex: 0 0 auto; }
.yeldock__name { font-family: var(--font-display); font-weight: 700; font-size: 1rem; line-height: 1.1; display: flex; justify-content: flex-start; }
.yeldock__mark { height: 26px; width: auto; display: block; }
.yeldock__acts { display: flex; gap: 2px; flex: 0 0 auto; margin-left: auto; }
.yeldock__head .iconbtn { min-width: 32px; height: 32px; flex: 0 0 auto; }
.yeldock__head .iconbtn svg { width: 18px; height: 18px; }

/* The AI picker: one small tab between the logo and the action icons,
   labelled with the current model (+ mode once picked). Opens a "liquid
   glass" popover — translucent, blurred, over whatever is behind it —
   with the full Models/Modes chip rows. Both choices are meant to survive
   whatever answers the dock later: see the MODEL_RULE/MODE_TIER note in
   features/yelai.js. `color-mix()` on the theme tokens (not hardcoded
   white) so the glass reads correctly in dark mode too. */
.yeldock__aiTrigger { position: relative; flex: 1; display: flex; justify-content: center; min-width: 0; }
/* Fixed width, not sized to its own text — "Teach" and "Coach · Think" are
   very different lengths, and a content-sized button centered in a fixed
   area visibly jumps sideways every time the label changes. A fixed box
   with its label truncated (ellipsis) if it's ever too long stays put. */
.yeldock__aiBtn {
  width: 132px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 8px; border-radius: var(--r-pill); border: 1px solid color-mix(in srgb, var(--line-strong) 70%, transparent);
  background: color-mix(in srgb, var(--surface) 55%, transparent);
  backdrop-filter: blur(14px) saturate(160%); -webkit-backdrop-filter: blur(14px) saturate(160%);
  color: var(--ink); font-size: .76rem; font-weight: 700; cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.yeldock__aiBtnLabel { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yeldock__aiBtn svg { width: 13px; height: 13px; flex: 0 0 auto; transition: transform .15s var(--ease); }
.yeldock__aiBtn.is-on { border-color: color-mix(in srgb, var(--accent) 50%, var(--line-strong)); }
.yeldock__aiBtn.is-on svg { transform: rotate(180deg); }
.yeldock__aiPop {
  position: absolute; top: calc(100% + 6px); left: 50%; transform: translateX(-50%);
  transform-origin: top center;
  z-index: 5; width: 268px; max-height: min(60vh, 420px); overflow-y: auto;
  padding: 10px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--line-strong) 60%, transparent);
  background: color-mix(in srgb, var(--surface) 62%, transparent);
  backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%);
  box-shadow: var(--shadow-3); display: flex; flex-direction: column; gap: 10px;
  animation: aiPopDrop .16s var(--ease);
}
.yeldock__aiPop[hidden] { display: none !important; }
/* A dedicated keyframe, not the shared `rise` — `rise` sets `transform:
   none` on completion, which would clobber the translateX(-50%) this
   popover needs just to stay centered under the trigger, and read as the
   whole thing sliding in sideways. This keeps translateX(-50%) constant
   throughout and only animates the vertical drop, so it opens straight
   down from the tab. */
@keyframes aiPopDrop {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px) scale(.97); }
  to { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
/* A soft, theme-matched scrollbar instead of the OS default — thin, muted,
   rounded, and invisible until the popover actually needs to scroll. */
.yeldock__aiPop { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
.yeldock__aiPop::-webkit-scrollbar { width: 6px; }
.yeldock__aiPop::-webkit-scrollbar-track { background: transparent; }
.yeldock__aiPop::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 999px; }
.yeldock__aiPop::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 65%, transparent); }
.yeldock__aiSection { display: flex; flex-direction: column; gap: 2px; }
.yeldock__aiLabel { font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin: 0 0 2px 2px; }
/* One row per choice, its description right underneath — this is the
   whole point of the redesign: no choice needs a hover or a tooltip. */
.yeldock__aiItem {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 5px 8px; border-radius: 10px; border: 1px solid transparent; background: transparent; cursor: pointer;
  transition: border-color .15s var(--ease), background-color .15s var(--ease);
}
.yeldock__aiItem:hover { background: color-mix(in srgb, var(--surface) 50%, transparent); }
.yeldock__aiItem.is-on { border-color: color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
.yeldock__aiItemName { font-size: .78rem; font-weight: 800; color: var(--ink); }
.yeldock__aiItem.is-on .yeldock__aiItemName { color: var(--accent); }
.yeldock__aiItemDesc { font-size: .68rem; line-height: 1.25; color: var(--muted); }
.yeldock__body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 12px 14px; gap: 10px; }
.yeldock__body .chatlog { flex: 1; max-height: none; }
.yeldock__body .chatlog[hidden] { display: none !important; }

/* ------------------------------------------- the greeting: 3D mascot + line */
/* The mascot is whichever character the reader picked for their profile,
   rendered in real 3D and acting out that pose — reading, thinking, cheering.
   Under it one sentence at a time fades through; only ever one, so two lines
   can never overlap mid-animation. */
.yeldock__hero {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; text-align: center; padding: 4px 4px 8px;
}
.yeldock__hero[hidden] { display: none !important; }
.yelstage { width: min(186px, 64%); aspect-ratio: 1; display: block; flex: 0 1 auto; min-height: 0; }
.yelstage canvas { display: block; width: 100%; height: 100%; }
.yelstage > svg { width: 100%; height: 100%; display: block; animation: breathe 5.5s ease-in-out infinite; transform-origin: center; }
.yelhello { font-family: var(--font-display); font-weight: 700; font-size: 1.04rem; margin-top: 2px; }
.yelticker { min-height: 3.2em; display: flex; align-items: flex-start; justify-content: center; margin-top: 4px; }
.yelticker span { display: block; max-width: 30ch; font-size: .87rem; line-height: 1.45; color: var(--muted); }
.yelticker span.is-in  { animation: yelLineIn .5s var(--ease) both; }
.yelticker span.is-out { animation: yelLineOut .34s var(--ease) both; }
@keyframes yelLineIn  { from { opacity: 0; transform: translateY(10px); filter: blur(3px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes yelLineOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-10px); filter: blur(3px); } }

/* Each new turn slides up into place instead of appearing under the one
   above it, so the log never reads as two messages sharing a line. */
.yeldock__body .chatbubble { animation: yelBubbleIn .34s var(--ease) both; }
@keyframes yelBubbleIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ------------------------------------------------------------ the composer */
/* Mic on the left, a minimal round arrow on the right that turns into a
   square while an answer is streaming — pressing it then stops the answer. */
.yeldock__foot { border-top: 1px solid var(--line); padding: 10px 12px 12px; }
.yelbar {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 5px 5px 6px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface-2);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.yelbar:focus-within { border-color: var(--accent); background: var(--surface); }
.yelbar__input { flex: 1; min-width: 0; border: 0; background: none; outline: none; padding: 9px 2px; font-size: .91rem; }
.yelbar__input::placeholder { color: var(--muted); }
.yelbar__mic, .yelbar__send {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  padding: 0; border: 0;
  border-radius: var(--r-pill);
  cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), transform .2s var(--ease-out-back);
}
.yelbar__mic { background: transparent; color: var(--muted); }
.yelbar__mic:hover { background: var(--accent-wash); color: var(--accent); }
.yelbar__mic svg { width: 18px; height: 18px; }
.yelbar__mic.is-live { background: var(--berry); color: #FFFFFF; animation: yelMic 1.3s ease-in-out infinite; }
@keyframes yelMic {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--berry) 55%, transparent); }
  60%      { box-shadow: 0 0 0 8px transparent; }
}
.yelbar__send { background: var(--accent); color: var(--accent-ink); }
.yelbar__send:hover { background: var(--accent-hover); transform: scale(1.07); }
.yelbar__send svg { width: 18px; height: 18px; }
.yelbar__send.is-idle { background: var(--line-strong); color: var(--surface); }
.yelbar__send--stop { background: var(--ink); color: var(--surface); }
.yelbar__send--stop:hover { background: var(--ink-soft); }
.yelbar__send--stop svg { width: 16px; height: 16px; }
.yeldock__hint { margin-top: 7px; font-size: .7rem; text-align: center; color: var(--muted); }

/* ------------------------------------------------------- the history drawer */
/* Conversations, not questions: one row per chat, reopenable and deletable. */
.yelhistory {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  background: var(--surface);
  animation: yelHistIn .22s var(--ease);
}
.yelhistory[hidden] { display: none !important; }
@keyframes yelHistIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
.yelhistory__head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: var(--surface-2); }
.yelhistory__head .iconbtn { min-width: 32px; height: 32px; flex: 0 0 auto; }
.yelhistory__head .iconbtn svg { width: 18px; height: 18px; }
.yelhistory__title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; flex: 1; }
.yelhistory__list { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
.yelhistory__empty { margin: auto 0; text-align: center; color: var(--muted); font-size: .87rem; padding: 12px; }
.yelchat {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 8px 9px 11px;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--surface);
  transition: border-color .16s var(--ease), transform .16s var(--ease), background-color .16s var(--ease);
}
.yelchat:hover { border-color: var(--accent); transform: translateX(3px); }
.yelchat.is-on { border-color: var(--accent); background: var(--accent-wash); }
.yelchat__open { flex: 1; min-width: 0; border: 0; background: none; padding: 0; text-align: left; cursor: pointer; color: inherit; }
.yelchat__name { font-weight: 600; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yelchat__meta { font-size: .73rem; color: var(--muted); }
.yelchat__del { flex: 0 0 auto; width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--muted); cursor: pointer; }
.yelchat__del:hover { background: var(--berry-wash); color: var(--berry); }
.yelchat__del svg { width: 15px; height: 15px; }

@media (max-width: 520px) {
  .yeldock__panel { width: calc(100vw - 16px); height: min(70dvh, 540px); }
}

/* ==========================================================================
   Live-AI chrome — the busy row, the one-time fallback note, and the small
   "written by YelAI" badge. All built from existing tokens.
   ========================================================================== */

.aibar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 2px; font-size: .86rem; color: var(--muted); }
.aibar__spin {
  width: 16px; height: 16px; flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  border-top-color: var(--accent);
  animation: aispin .8s linear infinite;
}
@keyframes aispin { to { transform: rotate(360deg); } }
.aibadge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: var(--r-pill);
  background: var(--accent-wash);
  color: var(--accent);
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.aibadge svg { width: 12px; height: 12px; }
.aibadge--quiet { background: var(--surface-2); color: var(--muted); }
.setuprow { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; justify-content: center; }
.setupfield { display: flex; flex-direction: column; gap: 5px; text-align: left; }
.setupfield > span { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.setupfield input, .setupfield select {
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  min-width: 150px;
}
.critrow { display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-top: 1px solid var(--line); text-align: left; }
.critrow:first-child { border-top: 0; }
.critrow b { font-family: var(--font-mono); color: var(--accent); flex: 0 0 auto; }
.critrow span { color: var(--ink-soft); font-size: .88rem; }
.critrow em { font-style: normal; font-weight: 700; flex: 0 0 116px; font-size: .82rem; }
@media (max-width: 560px) { .critrow { flex-wrap: wrap; } .critrow em { flex-basis: 100%; } }

@media (max-width: 720px) {
  .pv-progrid { grid-template-columns: 1fr; }
  .pv-timerow { grid-template-columns: 1fr; }
  .pv-row { grid-template-columns: 78px 1fr 36px; }
  .pv-card__head, .pv-card__body { padding-left: 16px; padding-right: 16px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1040px) {
  .detail, .cartgrid { grid-template-columns: 1fr; }
  .rail { position: static; }
  .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 900px) {
  .header__in { grid-template-columns: auto 1fr auto; }
  .header__left .navlink, .header__right .navlink { display: none; }
  .burger { display: inline-flex; }
}

@media (max-width: 720px) {
  .shelf { grid-template-columns: 1fr; }
  .tile, .tile--wide, .tile--short { grid-column: 1 / -1; min-height: 176px; }
  .tile__art svg { opacity: .45; right: -10%; }
  .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--row { grid-template-columns: 1fr; }
  .codeboxes input { width: 42px; height: 52px; font-size: 1.25rem; }
  .posegrid { grid-template-columns: repeat(2, 1fr); }
  .section { padding-block: 32px; }
}

@media (max-width: 420px) {
  .codeboxes { gap: 6px; }
  .codeboxes input { width: 38px; height: 48px; }
  .shell { padding-inline: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
  .tile:hover, .coursecard:hover, .panel:hover, .pose:hover, .social a:hover { transform: none; }
}

/* ==========================================================================
   Confusing Words — side-by-side compare
   Built on .card3d above rather than beside it: the flip geometry
   (perspective, preserve-3d, rotateY, backface-visibility) is already right
   there, so this only changes size, layout and what goes on the faces.

   Height is fixed rather than aspect-driven. Both faces are position:absolute
   inside .card3d__inner, so the container cannot grow to fit the taller one —
   and the back face (meaning + three examples with translations) is far
   taller than the front. So the card gets a set height and the back scrolls
   inside itself.
   ========================================================================== */

.compare { max-width: 1000px; margin-inline: auto; }

.compare__grid {
  display: grid;
  grid-template-columns: repeat(var(--n, 2), minmax(280px, 1fr));
  gap: 22px;
  margin-top: 18px;
  align-items: start;
}
/* Each word's own column: the same info card + sentence card a standalone
   word page shows, just stacked here instead of beside a notes aside. */
.compare__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* The wordbar (Archive · Previous · flag · Next · Skip) sits between the
   columns and the notes, same component and spacing the word page uses. */
.compare .wordbar { margin: 28px 0 22px; }

@media (max-width: 760px) {
  .compare__grid { grid-template-columns: 1fr; gap: 18px; }
}

/* Still used by VideoCards' own intro flip card. */
@media (prefers-reduced-motion: reduce) {
  .card3d__inner { transition: none; }
}

/* ==========================================================================
   Videocards
   Every deck opens here. One column, measured to the viewport so nothing
   scrolls: the word header (term, pronunciation, definition in the reader's
   language, video picker), then a three-part body — Archive on the left
   wing, the frame in the middle, Skip on the right wing, with previous /
   next word under each rail. The frame is the dark stage plus a light
   control bar that sits on the page, not on black. While a word is open
   the footer and the AI dock are hidden; only phones scroll.
   ========================================================================== */

/* Focus mode: applied to <body> for as long as a Videocard is mounted. */
body.vc-focus { overflow: hidden; }
body.vc-focus #footer,
body.vc-focus #yeldock { display: none; }

.vc {
  --vc-stage: #07080F;
  --vc-bar-ink: #F2F3FB;
  --vc-learn: #B0730F;  --vc-learn-2: #8F5C08;  --vc-learn-ink: #FFF6E6;
  --vc-known: #0E8A4A;  --vc-known-2: #0A6E3A;  --vc-known-ink: #F0FFF6;

  /* Popover palette (settings, subtitles, picker). On the page these are
     the site's surfaces; in fullscreen they turn to dark glass. */
  --pp-bg: var(--surface);
  --pp-ink: var(--ink);
  --pp-soft: var(--ink-soft);
  --pp-muted: var(--muted);
  --pp-line: var(--line);
  --pp-hi: var(--surface-2);
  --pp-shadow: var(--shadow-2);

  /* Layout budget. --vc-chrome is everything above and below the 16:9
     stage (column padding, header rows, control bar, gaps); the stage
     takes what is left of the viewport and the frame width follows from
     it — or from the column width minus the two wings, whichever is
     smaller. Both constraints, no scrolling. */
  --vc-gap: 14px;
  --vc-wing: 132px;
  --vc-chrome: 210px;   /* padding, two head rows (meaning may take two lines), one control row, gaps */
  --vc-extra: 0px;   /* the cookie strip, while it is up */
  container: vc / size;

  /* -1px: the header carries a 1px bottom border on top of --header-h. */
  height: calc(100dvh - var(--header-h) - var(--vc-extra) - 1px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 16px 16px;
  max-width: 1400px;
  margin-inline: auto;
  box-sizing: border-box;
}
body:has(.cookiebar:not([hidden])) .vc { --vc-extra: 56px; }
[data-theme="dark"] .vc, [data-theme="dim"] .vc {
  --vc-learn: #E9A13B; --vc-learn-2: #C97F1C; --vc-learn-ink: #2A1B04;
  --vc-known: #3FC080; --vc-known-2: #2A9A62; --vc-known-ink: #03200F;
}
/* The column is a fixed-height flex box; without this its rows would
   shrink to fit and the frame would lose its control bar instead of
   letting the column scroll on a viewport shorter than planned. */
.vc > * {
  flex: 0 0 auto;
  /* The two width formulas are computed on each child (not on .vc) so
     that a tier below can retune --vc-chrome or --vc-wing from inside
     the column's own container query. */
  --vc-shelf: 0px;   /* the subtitle shelf under the stage, when it is on */
  --vc-w: min(
    calc(100% - 2 * (var(--vc-wing) + var(--vc-gap))),
    calc((100dvh - var(--header-h) - var(--vc-extra) - var(--vc-chrome) - var(--vc-shelf)) * 16 / 9)
  );
  /* Stacked layout: the wings move under the frame, so the frame may take
     the whole column — and the chrome budget grows by those two rows. */
  --vc-chrome-stack: calc(var(--vc-chrome) + 200px);
  --vc-w-stack: min(100%, calc((100dvh - var(--header-h) - var(--vc-extra) - var(--vc-chrome-stack) - var(--vc-shelf)) * 16 / 9));
}
.vc:has(.vc__shelf:not([hidden])) > * { --vc-shelf: 66px; }
/* :where() keeps this reset at zero specificity, so .vc__rail and
   .vc__btn--play (0,1,0) can paint their own backgrounds over it. A plain
   .vc button (0,1,1) would win and wash every styled button out to nothing. */
:where(.vc) button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:where(.vc) button:disabled { opacity: .35; cursor: not-allowed; }
.vc svg { width: 20px; height: 20px; }

/* --- header: word + pronunciation, count + picker, definition below ----- */

.vc__head {
  /* Two rows, always: crumb · word (term + IPA + speaker) · count · picker,
     then the meaning across the full width. The word column is the one
     that gives; the IPA trims first, then the term. */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px 12px;
  grid-template-areas: "crumb word count pick" "def def def def";
  /* As wide as frame + wings, but never so narrow that the count and the
     picker drop to a third row — that row is not in the height budget. */
  width: min(100%, max(calc(var(--vc-w) + 2 * (var(--vc-wing) + var(--vc-gap))), 960px));
  margin-inline: auto;
  padding: 0 2px;
}
.vc__word { grid-area: word; display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.vc__head > .vc__crumb { grid-area: crumb; }
.vc__head > .vc__wordcount { grid-area: count; }
.vc__head > .vc__pick { grid-area: pick; }
.vc__head > .vc__def { grid-area: def; }
.vc__word .vc__term { flex: 0 0 auto; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc__word .vc__ipa { flex: 0 10 auto; min-width: 3ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc__word .vc__say { flex: 0 0 auto; }
.vc__term {
  font-family: var(--font-card); font-weight: 700;
  font-size: clamp(1.35rem, 3vw, 1.9rem); line-height: 1.05; letter-spacing: .005em;
  color: var(--ink);
  overflow-wrap: anywhere;
}
/* A long entry ("photoelectron spectroscopy") steps the size down rather
   than wrapping into a third row the height budget does not have. */
.vc__term.is-long { font-size: clamp(1.15rem, 2.2vw, 1.5rem); }
.vc__term.is-xlong { font-size: clamp(1rem, 1.8vw, 1.25rem); }
.vc__ipa { font-family: var(--font-mono); font-size: .82rem; color: var(--muted); }
.vc__ipa[hidden] { display: none; }
.vc__say {
  align-self: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-wash); color: var(--accent);
  display: grid; place-items: center;
  transition: transform .18s var(--ease-out-back), background-color .16s var(--ease);
}
.vc__say svg { width: 18px; height: 18px; }
.vc__say:hover { transform: scale(1.08); }
.vc__say.is-on { background: var(--accent); color: var(--accent-ink); }
.vc__wordcount { margin-left: auto; font-family: var(--font-mono); font-size: .76rem; color: var(--muted); white-space: nowrap; }

/* The meaning, one or two lines under the term. */
.vc__def {
  flex: 1 1 100%; margin: 0;
  font-size: .95rem; line-height: 1.4; color: var(--ink-soft);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  overflow-wrap: anywhere;
}
.vc__def[hidden] { display: none; }

.vc__pick { position: relative; }
.vc__pickbtn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 12px 8px 14px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-strong);
  font-size: .84rem; font-weight: 600; color: var(--ink);
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.vc__pickbtn svg { width: 15px; height: 15px; color: var(--muted); }
.vc__pickbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.vc__picklist {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 40;
  width: 300px; padding: 10px;
  background: var(--pp-bg); border: 1px solid var(--pp-line); border-radius: var(--r);
  box-shadow: var(--pp-shadow); color: var(--pp-ink);
  animation: vc-rise .18s var(--ease);
}
.vc__picklist[hidden] { display: none !important; }
.vc__picktitle {
  padding: 2px 4px 10px;
  font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--pp-muted);
}
.vc__slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.vc__slot {
  display: grid; place-items: center; gap: 2px;
  padding: 9px 4px; border-radius: var(--r-sm);
  background: var(--pp-hi); border: 1px solid var(--pp-line);
  font-family: var(--font-mono); font-weight: 700; font-size: .9rem; color: var(--pp-ink);
  transition: background-color .14s var(--ease), border-color .14s var(--ease), transform .14s var(--ease-out-back);
}
.vc__slot small { font-family: var(--font-body); font-size: .58rem; font-weight: 600; color: var(--pp-muted); letter-spacing: .04em; }
.vc__slot:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); }
.vc__slot.is-on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.vc__slot.is-empty { opacity: .55; }

/* --- body: wing | frame | wing ------------------------------------------ */

.vc__body {
  display: grid;
  grid-template-columns: var(--vc-wing) var(--vc-w) var(--vc-wing);
  justify-content: center;
  align-items: stretch;
  gap: var(--vc-gap);
  width: 100%;
}
/* A wing: the decision rail centred on the frame, the word button under it. */
.vc__wing {
  display: flex; flex-direction: column; justify-content: center; align-items: stretch;
  gap: 10px; min-width: 0;
}

/* --- frame: dark stage + light control bar ------------------------------- */

.vc__frame { position: relative; min-width: 0; color: var(--ink); container: vcframe / inline-size; }
.vc__stage {
  position: relative; aspect-ratio: 16 / 9;
  background: var(--vc-stage); color: var(--vc-bar-ink);
  border-radius: var(--r-lg); box-shadow: var(--shadow-2); overflow: hidden;
}
.vc__stage video { width: 100%; height: 100%; display: block; object-fit: contain; background: var(--vc-stage); }
.vc__frame.is-novideo video { display: none; }

.vc__bigplay {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(60% 60% at 50% 50%, rgba(7,8,15,.35) 0%, rgba(7,8,15,.7) 100%);
}
.vc__bigplay[hidden] { display: none !important; }
.vc__bigplay span {
  width: 76px; height: 76px; border-radius: 50%;
  background: var(--grad); display: grid; place-items: center;
  box-shadow: 0 12px 36px rgba(0,0,0,.5);
  transition: transform .3s var(--ease-out-back);
}
.vc__bigplay:hover span { transform: scale(1.09); }
.vc__bigplay svg { width: 32px; height: 32px; color: #fff; margin-left: 4px; }

.vc__spin {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,.22); border-top-color: #fff;
  animation: vc-spin .8s linear infinite;
}
.vc__spin[hidden] { display: none !important; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
@keyframes vc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* --- intro card: the flashcard inside the video box -------------------- */

.vc__intro {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 16px; padding: 18px;
  background: var(--vc-stage);
  transition: opacity .38s var(--ease), transform .38s var(--ease);
}
.vc__intro[hidden] { display: none !important; }
.vc__intro.is-leaving { opacity: 0; transform: scale(.96); pointer-events: none; }
/* Sized by height so the card and the button below it always share the
   stage: the card takes what the button leaves, width follows from the
   16:10 ratio, and max-width catches narrow stages. */
.vc__introcard {
  width: auto;
  height: calc(100% - 64px);
  max-height: none;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  flex: 0 0 auto;
  cursor: pointer;
}
.vc__frame.is-novideo .vc__introcard { height: calc(100% - 46px); }
/* room under the text for the "lyeli" hint, so a long definition never
   runs into it on a small card */
.vc__introface { justify-content: center; padding-bottom: 34px; }
.vc__introterm {
  font-family: var(--font-card); font-weight: 700;
  font-size: clamp(2rem, 6vw, 3.4rem); line-height: 1.05; color: var(--navy);
}
.vc__introdef {
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(1rem, 2.2vw, 1.35rem); line-height: 1.45; color: var(--navy);
  max-width: 32ch; overflow: hidden;
}
/* narrow: the card gives up its 16:10 and fills the stage's width so the
   definition has lines to wrap on */
@container vc (max-width: 560px) {
  .vc__introcard { width: 100%; aspect-ratio: auto; }
  .vc__introface { padding: 14px 16px 30px; }
  .vc__introdef { font-size: .9rem; line-height: 1.4; max-width: none; }
}
/* "Skip to videos" — the way past the flipping card, sitting right under
   it in the brand gradient so it reads as the next step, not a footnote. */
.vc__skipintro {
  display: inline-flex; align-items: center; gap: 9px; flex: 0 0 auto;
  padding: 11px 22px; border-radius: var(--r-pill);
  background: var(--grad); color: #fff;
  font-size: .9rem; font-weight: 700; letter-spacing: .01em;
  box-shadow: var(--glow);
  transition: transform .2s var(--ease-out-back), filter .16s var(--ease);
}
.vc__skipintro svg { width: 16px; height: 16px; }
.vc__skipintro:hover { transform: translateY(-2px); filter: brightness(1.08); }
.vc__skipintro:active { transform: translateY(0) scale(.98); }
.vc__skipintro[hidden] { display: none !important; }
.vc__novideo {
  position: absolute; left: 50%; bottom: 14px; translate: -50% 0;
  max-width: 90%; padding: 7px 14px; border-radius: var(--r-pill);
  background: rgba(255,255,255,.12); color: rgba(255,255,255,.85);
  font-size: .78rem; font-weight: 500; text-align: center;
}
.vc__novideo[hidden] { display: none !important; }

/* --- subtitles ---------------------------------------------------------- */

.vc__cuewrap { position: absolute; left: 0; right: 0; bottom: 14px; display: grid; place-items: center; padding-inline: 5%; pointer-events: none; }
/* The "below the video" shelf stays on the dark ground with the stage —
   subtitle colours are picked for video, not for paper. */
.vc__shelf {
  min-height: 66px; display: grid; place-items: center; padding: 10px 5%;
  background: var(--vc-stage); color: var(--vc-bar-ink);
  border-top: 1px solid rgba(255,255,255,.07);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.vc__shelf[hidden] { display: none !important; }
.vc__frame:has(.vc__shelf:not([hidden])) .vc__stage { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.vc__cue { display: grid; gap: 4px; justify-items: center; text-align: center; max-width: 44ch; }
.vc__cue:empty { display: none; }
.vc__line {
  display: inline-block; padding: .18em .5em; border-radius: 6px;
  font-family: var(--font-body);
  font-size: var(--cue-size, 24px);
  font-weight: var(--cue-weight, 600);
  line-height: 1.32;
  color: var(--cue-color, #FFFFFF);
  opacity: var(--cue-text-op, 1);
  background: rgba(0,0,0,var(--cue-bg-op, .55));
  text-shadow: var(--cue-shadow, 0 2px 6px rgba(0,0,0,.85));
  -webkit-text-stroke: var(--cue-stroke, 0);
  paint-order: stroke fill;
}
.vc__line--src { font-size: calc(var(--cue-size, 24px) * .8); font-weight: 500; opacity: calc(var(--cue-text-op, 1) * .88); }
.vc__shelf .vc__line { --cue-shadow: none; }

/* The word being learned, wherever it is spoken. Bold, warm, and lit —
   it has to be the first thing the eye lands on in the line. */
.vc__kw {
  background: none;
  color: #FFD46B;
  font-weight: 800;
  text-shadow: 0 0 14px rgba(255,212,107,.75), 0 2px 6px rgba(0,0,0,.9);
  border-bottom: 2px solid rgba(255,212,107,.9);
  padding-bottom: 1px;
}

/* --- control bar: three equal thirds, on the page ground ---------------- */

.vc__cbar {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
  gap: 10px;
  padding: 10px 2px 0;
}
.vc__third { display: flex; align-items: center; min-width: 0; }
.vc__scrub { flex-direction: column; align-items: stretch; gap: 5px; }
.vc__cluster { justify-content: center; gap: 6px; justify-self: center; }
.vc__right { justify-content: flex-end; gap: 6px; min-width: max-content; }
.vc__tools { display: flex; align-items: center; gap: 4px; }

.vc__track {
  position: relative; height: 10px; border-radius: var(--r-pill);
  background: var(--line); cursor: pointer;
  display: flex; align-items: center;
}
.vc__buf { position: absolute; left: 0; top: 0; bottom: 0; border-radius: var(--r-pill); background: var(--line-strong); }
.vc__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: var(--r-pill); background: var(--grad); }
.vc__knob {
  position: absolute; top: 50%; left: 0; translate: -50% -50%;
  width: 16px; height: 16px; border-radius: 50%; background: var(--surface);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-1);
  transition: transform .16s var(--ease);
}
.vc__track:hover .vc__knob, .vc__track.is-drag .vc__knob { transform: scale(1.2); }
.vc__tip {
  position: absolute; bottom: calc(100% + 8px); translate: -50% 0;
  padding: 3px 7px; border-radius: 6px; background: var(--ink);
  font-family: var(--font-mono); font-size: .7rem; color: var(--bg); pointer-events: none; white-space: nowrap;
}
.vc__tip[hidden] { display: none !important; }
.vc__time { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: .76rem; color: var(--muted); text-align: center; }

.vc__btn {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; color: var(--ink-soft);
  transition: background-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.vc__btn:hover:not(:disabled) { background: var(--surface-2); color: var(--ink); transform: translateY(-1px); }
.vc__btn.is-on { background: var(--accent-wash); color: var(--accent); }
/* Play: the brand gradient at partial opacity — findable, not shouting. */
.vc__btn--play {
  width: 46px; height: 46px; color: #fff;
  background: var(--grad); opacity: .72;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
.vc__btn--play:hover:not(:disabled) { background: var(--grad); color: #fff; opacity: 1; transform: none; }
.vc__btn--play svg { width: 22px; height: 22px; }
.vc__btn--fav.is-on { color: #FF5470; background: none; }
.vc__btn--fav.is-on svg { fill: #FF5470; }
@keyframes vc-pop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.vc__btn--fav.is-pop svg { animation: vc-pop .42s var(--ease-out-back); }
.vc__nav { background: var(--surface-2); }
.vc__frame.is-novideo .vc__cbar { opacity: .35; pointer-events: none; }

/* --- popover panels ------------------------------------------------------ */

.vc__pop { position: relative; }
.vc__panel {
  position: absolute; bottom: calc(100% + 12px); left: 50%; translate: -50% 0;
  z-index: 30; width: 284px; max-height: min(62vh, 420px); overflow-y: auto;
  padding: 8px; border-radius: var(--r);
  background: var(--pp-bg); border: 1px solid var(--pp-line);
  box-shadow: var(--pp-shadow); color: var(--pp-ink);
  animation: vc-rise .18s var(--ease);
  text-align: left;
}
.vc__panel[hidden] { display: none !important; }
.vc__panel.is-wide { width: 330px; }
.vc__panelhead {
  display: flex; align-items: center; gap: 8px; padding: 6px 8px 10px;
  border-bottom: 1px solid var(--pp-line); margin-bottom: 6px;
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
}
.vc__panelback { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.vc__panelback:hover { background: var(--pp-hi); }
.vc__panelback svg { width: 16px; height: 16px; }
.vc__row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 10px; border-radius: var(--r-xs);
  font-size: .87rem; font-weight: 500; text-align: left;
  transition: background-color .14s var(--ease);
}
.vc__row:hover { background: var(--pp-hi); }
.vc__row.is-on { color: var(--accent); }
/* A tier this video does not have: listed, greyed, not a button. */
.vc__row.is-off { opacity: .45; cursor: default; }
.vc__row.is-off:hover { background: none; }
.vc__rowicon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto; background: var(--pp-hi); }
.vc__rowicon svg { width: 16px; height: 16px; }
.vc__rowval { margin-left: auto; font-size: .78rem; color: var(--pp-muted); display: flex; align-items: center; gap: 5px; }
.vc__rowval svg { width: 14px; height: 14px; }
.vc__rowcheck { margin-left: auto; color: var(--accent); }
.vc__rowcheck svg { width: 16px; height: 16px; }
.vc__note { padding: 4px 10px 8px; font-size: .72rem; line-height: 1.4; color: var(--pp-muted); margin: 0; }
.vc__sep { height: 1px; background: var(--pp-line); margin: 6px 4px; }
.vc__field { padding: 8px 10px 12px; display: grid; gap: 7px; }
.vc__fieldtop { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .78rem; }
.vc__fieldtop b { font-family: var(--font-mono); font-weight: 700; color: var(--pp-ink); }
.vc__field input[type="range"] { width: 100%; accent-color: var(--accent); }
.vc__chips { display: flex; gap: 6px; flex-wrap: wrap; }
.vc__chips button {
  padding: 6px 11px; border-radius: var(--r-pill); font-size: .76rem; font-weight: 600;
  background: var(--pp-hi); color: var(--pp-soft);
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.vc__chips button:hover { background: var(--accent-wash); color: var(--accent); }
.vc__chips button.is-on { background: var(--accent); color: var(--accent-ink); }
.vc__swatches { display: flex; gap: 7px; flex-wrap: wrap; }
.vc__swatches button {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid transparent;
  box-shadow: 0 0 0 1px rgba(0,0,0,.18) inset;
  transition: transform .16s var(--ease-out-back);
}
.vc__swatches button:hover { transform: scale(1.14); }
.vc__swatches button.is-on { border-color: var(--accent); transform: scale(1.14); }
.vc__panel textarea {
  width: 100%; min-height: 78px; resize: vertical; padding: 9px 11px;
  border-radius: var(--r-xs); border: 1px solid var(--pp-line);
  background: var(--pp-hi); color: var(--pp-ink); font: inherit; font-size: .84rem;
}
.vc__panel textarea::placeholder { color: var(--pp-muted); }
.vc__pbtn {
  width: calc(100% - 16px); margin: 4px 8px 8px; padding: 10px; border-radius: var(--r-xs);
  background: var(--grad); color: #fff; font-weight: 700; font-size: .86rem;
  transition: filter .15s var(--ease);
}
.vc__pbtn:hover { filter: brightness(1.1); }
.vc__pbtn--quiet { background: var(--pp-hi); color: var(--pp-ink); }
.vc__ccpreview {
  margin: 4px 8px 8px; padding: 14px 10px; border-radius: var(--r-xs);
  background: repeating-linear-gradient(45deg, #1a1d30 0 10px, #222741 10px 20px);
  display: grid; place-items: center;
}

/* --- info card (inside the stage, so it stays dark) --------------------- */

.vc__info {
  position: absolute; right: 14px; bottom: 14px; z-index: 25;
  width: min(340px, calc(100% - 28px)); padding: 16px 18px;
  border-radius: var(--r); background: rgba(20,22,38,.96);
  border: 1px solid rgba(255,255,255,.14); color: #EDEEF8;
  box-shadow: 0 20px 60px rgba(0,0,0,.55);
  animation: vc-rise .2s var(--ease);
  text-align: left;
}
.vc__info[hidden] { display: none !important; }
.vc__infohead { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.vc__infokind {
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent);
  font-size: .64rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.vc__infox { margin-left: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; }
.vc__infox:hover { background: rgba(255,255,255,.16); }
.vc__infox svg { width: 15px; height: 15px; }
.vc__infotitle { font-family: var(--font-display); font-weight: 700; font-size: 1.06rem; line-height: 1.2; margin-bottom: 10px; }
.vc__infogrid { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .82rem; margin: 0; }
.vc__infogrid dt { color: rgba(237,238,248,.55); }
.vc__infogrid dd { margin: 0; font-weight: 600; }
.vc__infogrid dd.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* --- decision rails: archive on the left wing, known on the right ------- */

.vc__rail {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9px;
  padding: 16px 10px; border-radius: var(--r);
  background: linear-gradient(180deg, var(--rail) 0%, var(--rail-2) 100%);
  color: var(--rail-ink);
  box-shadow: var(--shadow-2);
  text-align: center;
  transition: transform .26s var(--ease-out-back), box-shadow .26s var(--ease);
}
.vc__rail--learn { --rail: var(--vc-learn); --rail-2: var(--vc-learn-2); --rail-ink: var(--vc-learn-ink); }
.vc__rail--known { --rail: var(--vc-known); --rail-2: var(--vc-known-2); --rail-ink: var(--vc-known-ink); }
.vc__rail:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }
.vc__rail:active { transform: translateY(-1px) scale(.99); }
.vc__railglyph {
  width: 46px; height: 46px; border-radius: 14px; flex: 0 0 auto;
  background: rgba(255,255,255,.92); color: var(--rail-2);
  display: grid; place-items: center;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
.vc__railglyph svg { width: 24px; height: 24px; }
.vc__railtext { display: grid; gap: 2px; min-width: 0; }
.vc__railtext b { font-family: var(--font-display); font-weight: 700; font-size: 1rem; letter-spacing: -.01em; }
.vc__railtext small { font-size: .6rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }

/* --- word navigation: under each rail ----------------------------------- */

.vc__wordbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 10px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface);
  font-size: .78rem; font-weight: 600; color: var(--ink-soft);
  transition: border-color .16s var(--ease), color .16s var(--ease);
}
.vc__wordbtn svg { width: 16px; height: 16px; flex: 0 0 auto; }
.vc__wordbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }

/* --- fullscreen: YouTube-style overlays on the video ---------------------
   Only the frame is fullscreen. The stage fills the screen and the video
   letterboxes itself (object-fit: contain — a tall clip gets bars on the
   sides, a wide one above and below, nothing painted by us). Everything
   else floats over it on soft scrims: the word block top-left and the
   picker top-right, the video arrows mid-left and mid-right, and the
   control panel along the bottom carrying the scrubber, the transport,
   and — moved in from the page by fsLayout() — Archive, Skip and the
   previous / next word buttons. All of it fades while playing and comes
   back on movement.                                                        */

.vc__fstop, .vc__fsnav, .vc__fsl, .vc__fsr, .vc__fsrails { display: none; }

/* The fallback box: where a <div> cannot go fullscreen (iPhone Safari) the
   frame pins itself over everything with the same overlay layout. */
body.vc-fakefs { overflow: hidden; }
.vc__frame.is-fs, .dv__deck.is-fs { position: fixed !important; inset: 0 !important; z-index: 300; width: 100vw !important; height: 100dvh !important; max-width: none !important; margin: 0 !important; border-radius: 0 !important; }

.vc__frame:is(:fullscreen, .is-fs) {
  background: #000; color: var(--vc-bar-ink); width: 100%; height: 100%;
  --pp-bg: rgba(18, 20, 34, .82);
  --pp-ink: #EDEEF8;
  --pp-soft: rgba(237,238,248,.86);
  --pp-muted: rgba(237,238,248,.6);
  --pp-line: rgba(255,255,255,.14);
  --pp-hi: rgba(255,255,255,.12);
  --pp-shadow: 0 20px 60px rgba(0,0,0,.55);
}
.vc__frame:is(:fullscreen, .is-fs) .vc__stage { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; box-shadow: none; background: #000; }
.vc__frame:is(:fullscreen, .is-fs) .vc__stage video { background: #000; }
/* The intro card keeps clear of the top strip and the bottom panel. */
.vc__frame:is(:fullscreen, .is-fs) .vc__intro { background: #000; padding: 120px 90px 160px; }
.vc__frame:is(:fullscreen, .is-fs) .vc__panel, .vc__frame:is(:fullscreen, .is-fs) .vc__picklist { backdrop-filter: blur(14px) saturate(1.4); }

/* top strip */
.vc__frame:is(:fullscreen, .is-fs) .vc__fstop {
  position: absolute; left: 0; right: 0; top: 0; z-index: 8;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 22px 28px 60px;
  background: linear-gradient(to bottom, rgba(0,0,0,.66) 0%, rgba(0,0,0,.28) 60%, transparent 100%);
  pointer-events: none;
}
.vc__frame:is(:fullscreen, .is-fs) .vc__fstop > * { pointer-events: auto; }
.vc__frame:is(:fullscreen, .is-fs) .vc__fstopl { display: flex; flex-direction: column; gap: 6px; min-width: 0; max-width: 60ch; }
.vc__frame:is(:fullscreen, .is-fs) .vc__fstopr { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.vc__frame:is(:fullscreen, .is-fs) .vc__word { gap: 12px; }
.vc__frame:is(:fullscreen, .is-fs) .vc__term { color: #fff; font-size: clamp(1.6rem, 2.6vw, 2.3rem); text-shadow: 0 2px 10px rgba(0,0,0,.6); }
.vc__frame:is(:fullscreen, .is-fs) .vc__ipa { color: rgba(255,255,255,.72); font-size: .9rem; }
.vc__frame:is(:fullscreen, .is-fs) .vc__say { background: rgba(255,255,255,.16); color: #fff; }
.vc__frame:is(:fullscreen, .is-fs) .vc__say.is-on { background: var(--accent); }
.vc__frame:is(:fullscreen, .is-fs) .vc__def { color: rgba(255,255,255,.86); font-size: 1rem; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vc__frame:is(:fullscreen, .is-fs) .vc__wordcount { margin-left: 0; color: rgba(255,255,255,.7); }
.vc__frame:is(:fullscreen, .is-fs) .vc__pickbtn { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.22); color: #fff; }
.vc__frame:is(:fullscreen, .is-fs) .vc__pickbtn svg { color: rgba(255,255,255,.7); }

/* side arrows: previous / next video */
.vc__frame:is(:fullscreen, .is-fs) .vc__fsnav {
  position: absolute; top: 50%; translate: 0 -50%; z-index: 8; display: block;
}
.vc__frame:is(:fullscreen, .is-fs) .vc__fsnav--l { left: 22px; }
.vc__frame:is(:fullscreen, .is-fs) .vc__fsnav--r { right: 22px; }
.vc__frame:is(:fullscreen, .is-fs) .vc__fsnav .vc__btn {
  width: 56px; height: 56px;
  background: rgba(0,0,0,.34); color: #fff;
  backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
}
.vc__frame:is(:fullscreen, .is-fs) .vc__fsnav .vc__btn svg { width: 26px; height: 26px; }
.vc__frame:is(:fullscreen, .is-fs) .vc__fsnav .vc__btn:hover:not(:disabled) { background: rgba(0,0,0,.55); }

/* subtitles ride above the panel while it is up */
.vc__frame:is(:fullscreen, .is-fs) .vc__cuewrap { bottom: 138px; transition: bottom .3s var(--ease); }
.vc__frame:is(:fullscreen, .is-fs) .vc__shelf {
  position: absolute; left: 0; right: 0; bottom: 118px; z-index: 7;
  background: none; border: 0; border-radius: 0; min-height: 0; padding: 0 5%;
  transition: bottom .3s var(--ease);
}
.vc__frame:is(:fullscreen, .is-fs) .vc__shelf .vc__line { --cue-shadow: 0 2px 6px rgba(0,0,0,.85); }

/* the bottom panel */
.vc__frame:is(:fullscreen, .is-fs) .vc__cbar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 9;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "scrub scrub scrub" "left cluster right";
  gap: 6px 12px;
  padding: 56px 24px 18px;
  background: linear-gradient(to top, rgba(0,0,0,.78) 0%, rgba(0,0,0,.42) 55%, transparent 100%);
}
.vc__frame:is(:fullscreen, .is-fs) .vc__scrub { grid-area: scrub; flex-direction: row; align-items: center; gap: 14px; }
.vc__frame:is(:fullscreen, .is-fs) .vc__track { flex: 1; height: 6px; background: rgba(255,255,255,.22); transition: height .15s var(--ease); }
.vc__frame:is(:fullscreen, .is-fs) .vc__track:hover, .vc__frame:is(:fullscreen, .is-fs) .vc__track.is-drag { height: 9px; }
.vc__frame:is(:fullscreen, .is-fs) .vc__buf { background: rgba(255,255,255,.28); }
.vc__frame:is(:fullscreen, .is-fs) .vc__knob { width: 14px; height: 14px; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.6); }
.vc__frame:is(:fullscreen, .is-fs) .vc__time { color: rgba(255,255,255,.85); flex: 0 0 auto; }
.vc__frame:is(:fullscreen, .is-fs) .vc__tip { background: rgba(0,0,0,.85); color: #fff; }

.vc__frame:is(:fullscreen, .is-fs) .vc__fsl { grid-area: left; display: flex; align-items: center; gap: 10px; justify-self: start; }
.vc__frame:is(:fullscreen, .is-fs) .vc__cluster { grid-area: cluster; justify-self: center; }
.vc__frame:is(:fullscreen, .is-fs) .vc__right { grid-area: right; justify-self: end; min-width: 0; }
.vc__frame:is(:fullscreen, .is-fs) .vc__fsr { display: flex; align-items: center; gap: 10px; margin-right: 6px; }

.vc__frame:is(:fullscreen, .is-fs) .vc__btn { color: #fff; }
.vc__frame:is(:fullscreen, .is-fs) .vc__btn:hover:not(:disabled) { background: rgba(255,255,255,.18); color: #fff; }
.vc__frame:is(:fullscreen, .is-fs) .vc__btn.is-on { background: rgba(255,255,255,.2); color: #fff; }
.vc__frame:is(:fullscreen, .is-fs) .vc__btn--play { background: rgba(255,255,255,.2); opacity: 1; box-shadow: 0 0 0 1px rgba(255,255,255,.16) inset; }
.vc__frame:is(:fullscreen, .is-fs) .vc__btn--play:hover:not(:disabled) { background: rgba(255,255,255,.32); }
.vc__frame:is(:fullscreen, .is-fs) .vc__nav { background: rgba(255,255,255,.12); }

/* decision rails and word buttons as glass, quiet enough to sit on film */
.vc__frame:is(:fullscreen, .is-fs) .vc__rail {
  flex-direction: row; text-align: left; gap: 9px;
  padding: 6px 14px 6px 6px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--rail) 58%, transparent);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.14) inset;
  color: #fff;
}
.vc__frame:is(:fullscreen, .is-fs) .vc__rail:hover { transform: none; background: color-mix(in srgb, var(--rail) 82%, transparent); box-shadow: 0 0 0 1px rgba(255,255,255,.24) inset; }
.vc__frame:is(:fullscreen, .is-fs) .vc__rail--known { flex-direction: row-reverse; text-align: right; padding: 6px 6px 6px 14px; }
.vc__frame:is(:fullscreen, .is-fs) .vc__railglyph { width: 34px; height: 34px; border-radius: 50%; box-shadow: none; background: rgba(255,255,255,.9); }
.vc__frame:is(:fullscreen, .is-fs) .vc__railglyph svg { width: 18px; height: 18px; }
.vc__frame:is(:fullscreen, .is-fs) .vc__railtext b { font-size: .88rem; }
.vc__frame:is(:fullscreen, .is-fs) .vc__railtext small { display: none; }
.vc__frame:is(:fullscreen, .is-fs) .vc__wordbtn {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.18); color: #fff;
  backdrop-filter: blur(8px); padding: 8px 12px;
}
.vc__frame:is(:fullscreen, .is-fs) .vc__wordbtn:hover:not(:disabled) { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.3); color: #fff; }

/* idle: everything fades, the cursor with it */
.vc__frame:is(:fullscreen, .is-fs) .vc__fstop, .vc__frame:is(:fullscreen, .is-fs) .vc__fsnav, .vc__frame:is(:fullscreen, .is-fs) .vc__cbar { transition: opacity .35s var(--ease); }
.vc__frame:is(:fullscreen, .is-fs).is-idle .vc__fstop,
.vc__frame:is(:fullscreen, .is-fs).is-idle .vc__fsnav,
.vc__frame:is(:fullscreen, .is-fs).is-idle .vc__cbar { opacity: 0; pointer-events: none; }
.vc__frame:is(:fullscreen, .is-fs).is-idle .vc__cuewrap { bottom: 36px; }
.vc__frame:is(:fullscreen, .is-fs).is-idle .vc__shelf { bottom: 24px; }
.vc__frame:is(:fullscreen, .is-fs).is-idle { cursor: none; }

/* narrow fullscreen: the frame's own control bar is not a size container
   (it is pinned to the screen), so these go by the viewport. */
@media (max-width: 900px) {
  .vc__frame:is(:fullscreen, .is-fs) .vc__fstop { padding: 12px 16px 40px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__def { display: none; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fsnav--l { left: 10px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fsnav--r { right: 10px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fsnav .vc__btn { width: 44px; height: 44px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__cbar { padding: 40px 14px 12px; gap: 8px 10px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__right { min-width: 0; }
}
/* sideways (a phone in landscape): the side wings share one row under the
   transport, glyph-only so they fit */
@media (max-width: 900px) and (orientation: landscape) {
  .vc__frame:is(:fullscreen, .is-fs) .vc__cbar { grid-template-columns: 1fr auto 1fr; grid-template-areas: "scrub scrub scrub" "left cluster right"; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__railtext { display: none; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__intro { padding: 60px 90px 96px; gap: 8px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__introcard { height: calc(100% - 44px); width: auto; aspect-ratio: 16 / 10; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__introdef { font-size: .9rem; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__skipintro { padding: 7px 14px; font-size: .78rem; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__rail { padding: 5px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__wordbtn span { display: none; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__wordbtn { padding: 10px; }
}
/* upright (a phone or tablet in portrait): the video letterboxes in the
   middle, so there is room to stack — scrubber, transport, tools, then
   Archive | Skip and Previous | Next word as two clean half-and-half rows
   (fsLayout seats the four buttons in .vc__fsrails). Nothing shares a row
   with something it does not belong to. */
@media (max-width: 900px) and (orientation: portrait) {
  .vc__frame:is(:fullscreen, .is-fs) .vc__cbar {
    grid-template-columns: 1fr;
    grid-template-areas: "scrub" "cluster" "right" "rails";
    padding: 40px 14px calc(12px + env(safe-area-inset-bottom, 0px));
  }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fsl, .vc__frame:is(:fullscreen, .is-fs) .vc__fsr { display: none; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__cluster { justify-self: center; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__right { justify-self: center; justify-content: center; flex-wrap: wrap; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fsrails {
    grid-area: rails;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px;
  }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fsrails .vc__rail { justify-content: center; text-align: center; min-height: 44px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fsrails .vc__rail--known { text-align: center; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fsrails .vc__wordbtn { min-height: 40px; }
  /* the page layout names these buttons' grid areas; in the slot they flow */
  .vc__frame:is(:fullscreen, .is-fs) .vc__fsrails :is(#vcArchive, #vcKnown, #vcPrevW, #vcNextW) { grid-area: auto; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__cuewrap { bottom: 250px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__shelf { bottom: 240px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__intro { padding: 120px 14px 260px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__introcard { height: auto; width: 100%; max-height: 100%; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__novideo { bottom: auto; top: 130px; }
  /* the word block at the top: term on its own line, count + picker on the next */
  .vc__frame:is(:fullscreen, .is-fs) .vc__fstop { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px 40px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fstopl { max-width: none; flex: 1 1 100%; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__word { flex-wrap: wrap; row-gap: 2px; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__term { font-size: clamp(1.25rem, 5.5vw, 1.8rem); }
  .vc__frame:is(:fullscreen, .is-fs) .vc__ipa { font-size: .8rem; }
  .vc__frame:is(:fullscreen, .is-fs) .vc__fstopr { flex: 1 1 100%; justify-content: space-between; }
}

/* --- control bar: folds by the frame's own width ---------------------------
   Wide frame: one row. ≤900: the scrubber takes its own row, transport
   left and tools right under it. ≤480: transport and tools each take
   their own centred row.                                                 */

@container vcframe (max-width: 900px) {
  .vc__cbar {
    grid-template-columns: auto auto;
    grid-template-areas: "scrub scrub" "cluster right";
    justify-content: space-between;
    gap: 8px 12px;
    padding: 8px 2px 0;
  }
  .vc__scrub { grid-area: scrub; flex-direction: row; align-items: center; gap: 10px; }
  .vc__scrub .vc__track { flex: 1; }
  .vc__cluster { grid-area: cluster; justify-self: start; }
  .vc__right { grid-area: right; justify-self: end; }
}
@container vcframe (max-width: 480px) {
  .vc__cbar {
    grid-template-columns: 1fr;
    grid-template-areas: "scrub" "cluster" "right";
    justify-content: stretch;
    gap: 8px;
  }
  .vc__cluster { justify-self: center; gap: 6px; }
  .vc__right { justify-self: center; justify-content: center; min-width: 0; flex-wrap: wrap; gap: 6px; }
}
/* A two-row control bar is 25px taller than the budget assumes. The frame
   folds at 900px, which a column narrower than ~1200 or a viewport
   shorter than ~780 produces; the budget follows the same line. */
@container vc ((max-width: 1200px) or (max-height: 780px)) {
  .vc > * { --vc-chrome: 235px; }
}
/* …and a three-row bar (frame ≤480px) another 30px: that happens once the
   column is shorter than ~560px, or ~620px with the subtitle shelf on. */
@container vc (max-height: 560px) {
  .vc > * { --vc-chrome: 267px; }
}
@container vc (max-height: 620px) {
  .vc:has(.vc__shelf:not([hidden])) > * { --vc-chrome: 267px; }
}

/* --- narrower columns, measured on the column itself ----------------------
   The column (.vc) is a size container, so a tablet, a phone and a desktop
   window shrunk beside the sidebar all get the same treatment for the same
   size. ≤900 wide: the wings slim down. ≤900 wide AND tall enough (or
   upright): the wings dissolve and the frame takes the whole column;
   Archive and Skip sit half and half under it, previous / next word under
   those. A wide-and-short column (a tablet on its side, a zoomed laptop)
   keeps the wings — stacking there would leave the video a thumbnail.    */

@container vc (max-width: 900px) {
  .vc > * { --vc-wing: 104px; }
  .vc__head { width: 100%; }
  .vc__rail { padding: 12px 8px; gap: 7px; }
  .vc__railglyph { width: 40px; height: 40px; }
  .vc__railtext b { font-size: .92rem; }
  .vc__railtext small { display: none; }
  .vc__wordbtn { padding: 8px 8px; font-size: .74rem; }
  .vc__wordbtn span { display: none; }   /* arrow only: "Previous word" does not fit a slim wing */
}

/* Not on a wide-and-short screen (a tablet on its side with the browser
   bars up, a zoomed laptop): there the wings stay, see above. Phones are
   never excluded — a phone on its side gets the theatre layout below. */
@media not ((orientation: landscape) and (max-height: 700px) and ((min-width: 1000px) or (hover: hover))) {
@container vc (max-width: 900px) {
  .vc__body {
    width: min(100%, var(--vc-w-stack));
    margin-inline: auto;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "frame frame"
      "arch known"
      "prev next";
    gap: 10px;
  }
  .vc__wing { display: contents; }
  .vc__frame { grid-area: frame; }
  #vcArchive { grid-area: arch; }
  #vcKnown { grid-area: known; }
  #vcPrevW { grid-area: prev; }
  #vcNextW { grid-area: next; }

  .vc__rail { flex-direction: row; text-align: left; padding: 11px 13px; gap: 10px; }
  .vc__rail--known { flex-direction: row-reverse; text-align: right; }
  .vc__railglyph { width: 38px; height: 38px; border-radius: 11px; }
  .vc__railglyph svg { width: 20px; height: 20px; }
  .vc__railtext b { font-size: .96rem; }
  .vc__railtext small { display: block; font-size: .62rem; }
  .vc__wordbtn { padding: 9px 11px; font-size: .78rem; }
  .vc__wordbtn span { display: inline; }
}
}

@container vc (max-width: 560px) {
  /* the head reads like the desktop one: term and pronunciation, then the
     count and the picker on their own row, then the whole meaning */
  /* the page scrolls here, so the word may wrap and the count and the
     picker take a row of their own */
  .vc__head { gap: 8px 10px; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "crumb crumb" "word word" "count pick" "def def"; }
  .vc__head > .vc__wordcount { justify-self: start; }
  .vc__word { flex-wrap: wrap; }
  .vc__word .vc__term, .vc__word .vc__ipa { white-space: normal; overflow: visible; text-overflow: clip; }
  .vc__term { font-size: 1.5rem; }
  .vc__term.is-long, .vc__term.is-xlong { font-size: 1.25rem; }
  .vc__def { font-size: .95rem; -webkit-line-clamp: 4; }
  .vc__rail { padding: 13px 14px; }
  .vc__wordbtn { padding: 10px 12px; font-size: .82rem; }
}

/* --- phones: the page scrolls -----------------------------------------------
   A phone browser's own bars come and go, so a viewport-measured column is
   never quite right there. The column takes its natural height instead:
   the video spans the full width and whatever does not fit scrolls. */
/* A phone on its side (touch, ≤560px tall) is a phone too: the same
   scrolling column — word on top, the video across the full width, the
   controls and the rails under it. */
@media (max-width: 720px), ((orientation: landscape) and (max-height: 560px) and (hover: none)) {
  .vc { height: auto; min-height: calc(100dvh - var(--header-h) - var(--vc-extra) - 1px); overflow: visible; padding: 12px 14px 24px; gap: 12px; container-type: inline-size; }
  body.vc-focus { overflow: auto; }
  .vc > * { --vc-w-stack: 100%; }
  .vc__body { gap: 12px; }
  .vc__frame { width: 100%; }
}
/* --- a phone on its side ---------------------------------------------------
   322px of height is nothing to stack in, so the card turns into a theatre:
   the frame on the left takes the full height, and everything else — the
   word, its meaning, Archive, Skip, previous / next word — is a column on
   the right. The body dissolves so the frame and the wings sit directly in
   the column's grid. */
@media (max-height: 560px) and (orientation: landscape) and (hover: hover) {
  body.vc-focus { overflow: auto; }
  .vc {
    height: auto; min-height: calc(100dvh - var(--header-h) - var(--vc-extra) - 1px); overflow: visible;
    container-type: inline-size;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas: "frame head" "frame learn" "frame known";
    align-items: start;
    gap: 6px 12px;
    padding: 6px 12px 8px;
  }
  .vc > * { --vc-chrome: 80px; --vc-w: min(calc(100cqw - 24px - 290px), calc((100dvh - var(--header-h) - var(--vc-extra) - var(--vc-chrome)) * 16 / 9)); }
  .vc__body { display: contents; }
  .vc__frame { grid-area: frame; width: var(--vc-w); align-self: center; }
  .vc__head { grid-area: head; width: 100%; gap: 4px 8px; }
  .vc__wing--l { grid-area: learn; }
  .vc__wing--r { grid-area: known; align-self: start; }
  .vc__wing { display: flex; flex-direction: row; align-items: stretch; gap: 6px; }
  .vc__wing .vc__rail { flex: 1 1 auto; flex-direction: row; text-align: left; padding: 7px 10px; gap: 8px; }
  .vc__wing .vc__wordbtn { flex: 0 0 auto; padding: 6px 8px; font-size: .72rem; }
  .vc__wing .vc__wordbtn span { display: none; }
  .vc__railglyph { width: 30px; height: 30px; border-radius: 9px; }
  .vc__railglyph svg { width: 16px; height: 16px; }
  .vc__railtext b { font-size: .86rem; }
  .vc__railtext small { display: none; }
  .vc__crumb { font-size: .76rem; }
  .vc__term { font-size: 1.15rem; }
  .vc__ipa { font-size: .72rem; }
  .vc__say { width: 28px; height: 28px; }
  .vc__def { font-size: .8rem; line-height: 1.3; -webkit-line-clamp: 2; }
  .vc__pickbtn { padding: 5px 9px 5px 11px; font-size: .78rem; }
  /* control bar: two tight rows, 32px buttons, no YelAI label — three rows
     when the frame is too narrow even for that (a small phone on its side) */
  .vc__cbar { gap: 4px 8px; padding: 4px 2px 0; }
  @container vcframe (min-width: 401px) {
    .vc__cbar { grid-template-columns: auto auto; grid-template-areas: "scrub scrub" "cluster right"; justify-content: space-between; }
    .vc__scrub { grid-area: scrub; flex-direction: row; align-items: center; gap: 8px; }
    .vc__scrub .vc__track { flex: 1; }
    .vc__cluster { grid-area: cluster; justify-self: start; gap: 3px; }
    .vc__right { grid-area: right; justify-self: end; gap: 3px; min-width: 0; flex-wrap: nowrap; }
  }
  .vc__tools { gap: 2px; }
  .vc__btn { width: 32px; height: 32px; }
  .vc__btn--play { width: 36px; height: 36px; }
  .vc__yeltag { display: none; }
  .vc__time { font-size: .7rem; }
  .vc__introface { padding: 10px 14px 26px; }
  .vc__introdef { font-size: .78rem; line-height: 1.3; max-width: none; }
  .vc__introterm { font-size: clamp(1.3rem, 4vw, 2rem); }
  .vc__skipintro { padding: 7px 14px; font-size: .78rem; }
}
/* short phones (an SE, or a browser with its bars up): the definition drops
   to one line and the rows tighten a notch more */
@media (max-width: 720px), ((orientation: landscape) and (max-height: 560px) and (hover: none)) {
  .vc__picklist { width: min(300px, calc(100vw - 24px)); }
  .vc__panel { left: auto; right: -10px; translate: 0 0; width: min(300px, calc(100vw - 32px)); }
  .vc__intro { gap: 10px; padding: 12px; }
  .vc__introcard { height: calc(100% - 48px); }
  .vc__skipintro { padding: 8px 15px; font-size: .78rem; gap: 6px; }
  .vc__skipintro svg { width: 13px; height: 13px; }
  .vc__introterm { font-size: clamp(1.3rem, 7vw, 2rem); }
  .vc__introdef { font-size: .84rem; }
}

@media (prefers-reduced-motion: reduce) {
  .vc__intro, .vc__rail, .vc__btn, .vc__say, .vc__slot { transition: none; }
  .vc__btn--fav.is-pop svg { animation: none; }
}

/* --- plain mode: the player alone, inside a normal page -------------------
   Discover mounts VideoCards this way for a post's video. No word chrome, no
   focus mode, no viewport measuring: the frame simply fills its column. */
.vc.vc--plain { height: auto; min-height: 0; padding: 0; max-width: none; overflow: visible; --vc-wing: 0px; --vc-gap: 0px; container-type: inline-size; }
.vc--plain .vc__wing, .vc--plain .vc__intro { display: none !important; }
.vc--plain .vc__head { width: 100%; margin-bottom: 4px; }
.vc--plain .vc__head .vc__ipa, .vc--plain .vc__head .vc__say, .vc--plain .vc__head .vc__pick,
.vc--plain .vc__head .vc__wordcount, .vc--plain .vc__head .vc__def { display: none !important; }
.vc--plain .vc__term { font-family: var(--font-display); font-size: clamp(1.1rem, 2vw, 1.4rem); letter-spacing: -.01em; }
.vc--plain .vc__body { grid-template-columns: minmax(0, 1fr); }
.vc--plain .vc__frame.is-single .vc__nav { display: none; }
.vc--plain .vc__btn--social.is-on { color: var(--accent); }
.vc--plain .vc__frame:is(:fullscreen, .is-fs) .vc__cbar { grid-template-columns: 1fr auto 1fr; }

/* The deck section is only a mount point now: no width cap, no padding —
   the Videocards column measures itself against the viewport. */
.deck--video { max-width: none; padding: 0; }
.vc__crumb { margin: 0 6px 0 0; flex: 0 0 auto; }

/* ==========================================================================
   Discover — the community page (features/discover.js)
   A hero row, tag chips, then four sections: a horizontal rail of Peeks
   (vertical 9:16 cards), a grid of Videos, a grid of Presentations and a
   grid of text Posts. Every card carries the same like / comment / share
   row with live counts.
   ========================================================================== */

.dv__hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.dv__hero .section__sub { max-width: 62ch; }
.dv__filters { margin-bottom: 26px; }
.dv__section + .dv__section { margin-top: 34px; }
.dv__loginnote {
  display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--r-sm);
  background: var(--accent-wash); color: var(--accent); font-size: .86rem; font-weight: 600;
}
.dv__loginnote svg { width: 17px; height: 17px; flex: 0 0 auto; }

.dv__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.dv__grid--text { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.dv__card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
  overflow: hidden;
  transition: transform .25s var(--ease-out-back), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.dv__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.dv__card-body { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; flex: 1; }
.dv__card-title { font-family: var(--font-display); font-size: 1.02rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.dv__card-title button { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.dv__card-title button:hover { color: var(--accent); }
.dv__text { color: var(--ink-soft); font-size: .92rem; line-height: 1.5; white-space: pre-line; }

/* thumbnail: a muted video or the deck's cover, with a play badge */
.dv__thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
  background: #07080F; border: 0; padding: 0; cursor: pointer; overflow: hidden;
}
.dv__thumb video, .dv__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv__thumb-empty { display: grid; place-items: center; width: 100%; height: 100%; color: rgba(255,255,255,.5); }
.dv__thumb-empty svg { width: 34px; height: 34px; }
.dv__play {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%;
  width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.18); backdrop-filter: blur(6px); color: #fff;
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset;
  transition: transform .25s var(--ease-out-back), background-color .2s var(--ease);
}
.dv__play svg { width: 24px; height: 24px; margin-left: 3px; }
.dv__thumb:hover .dv__play { transform: translate(0, 0) scale(1.1); background: var(--accent); }
.dv__thumb:hover .dv__play { translate: -50% -50%; }
.dv__dur {
  position: absolute; right: 10px; bottom: 10px;
  padding: 3px 8px; border-radius: 6px; background: rgba(0,0,0,.7); color: #fff; font-size: .72rem; font-weight: 700;
}
.dv__thumb--deck::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.35), transparent 45%);
}
.dv__thumb--deck .dv__dur { z-index: 1; }

/* author line */
.dv__by { display: flex; align-items: center; gap: 9px; min-width: 0; font-size: .82rem; }
.dv__avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: 0 0 auto; overflow: hidden;
  background: var(--accent-wash); box-shadow: 0 0 0 2px var(--accent-wash);
}
.dv__avatar svg { width: 100%; height: 100%; display: block; }
.dv__avatar--team { background: var(--mint-soft); box-shadow: 0 0 0 2px var(--mint); }
.dv__byname { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); min-width: 0; }
.dv__badge {
  padding: 2px 7px; border-radius: var(--r-pill); background: var(--mint); color: var(--navy);
  font-size: .62rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.dv__when { color: var(--muted); margin-left: auto; white-space: nowrap; }
.dv__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.dv__tag {
  padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--muted);
  font-size: .68rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* like / comment / share */
.dv__acts { display: flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 6px; }
.dv__act {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 11px; border-radius: var(--r-pill); border: 0; background: none;
  font: inherit; font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease-out-back);
}
.dv__act svg { width: 18px; height: 18px; }
.dv__act b { font-family: var(--font-mono); font-weight: 700; }
.dv__act:hover { background: var(--surface-2); color: var(--ink); }
.dv__act.is-on { color: #E0567F; }
.dv__act.is-on:active { transform: scale(1.15); }
.dv__acts:not(.dv__acts--compact) .dv__act { font-size: .9rem; padding: 9px 14px; background: var(--surface-2); }
.dv__acts:not(.dv__acts--compact) .dv__act:hover { background: var(--accent-wash); color: var(--accent); }
.dv__acts:not(.dv__acts--compact) .dv__act.is-on { background: var(--berry-wash); color: var(--berry); }
.dv__acts:not(.dv__acts--compact) { gap: 8px; }

/* Peeks rail on the hub: 9:16 cards in a horizontal scroller */
.dv__rail {
  display: flex; gap: 12px; overflow-x: auto; padding: 14px 4px 16px;
  scroll-snap-type: x mandatory; scrollbar-width: thin;
}
.dv__peek {
  position: relative; flex: 0 0 auto; width: 172px; aspect-ratio: 9 / 16;
  border: 0; padding: 0; border-radius: var(--r); overflow: hidden; background: #07080F;
  cursor: pointer; scroll-snap-align: start; color: #fff; text-align: left;
  transition: transform .25s var(--ease-out-back), box-shadow .25s var(--ease);
}
.dv__peek:hover { transform: scale(1.035); box-shadow: var(--shadow-2); }
.dv__peek video { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv__peek-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.78), transparent 55%); }
.dv__peek-play {
  position: absolute; left: 50%; top: 42%; translate: -50% -50%;
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.2); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset;
}
.dv__peek-play svg { width: 18px; height: 18px; margin-left: 2px; }
.dv__peek-meta { position: absolute; left: 10px; right: 10px; bottom: 10px; display: grid; gap: 4px; }
.dv__peek-title { font-family: var(--font-display); font-weight: 600; font-size: .82rem; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.dv__peek-stats { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-mono); font-size: .68rem; opacity: .9; }
.dv__peek-stats svg { width: 12px; height: 12px; }

/* --- post page ------------------------------------------------------------ */

.dv__post { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 8px; max-width: 980px; margin-inline: auto; }
.dv__post-main { min-width: 0; }
.dv__player { width: 100%; }
.dv__post-head { display: grid; gap: 12px; padding: 20px 4px 0; }
.dv__kind {
  display: inline-flex; align-items: center; gap: 6px; justify-self: start;
  padding: 4px 10px; border-radius: var(--r-pill); background: var(--accent-wash); color: var(--accent);
  font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
}
.dv__kind svg { width: 14px; height: 14px; }
.dv__post-title { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.dv__post-text { color: var(--ink-soft); line-height: 1.6; max-width: 68ch; }
.dv__post-text p + p { margin-top: 10px; }

.dv__comments {
  display: grid; gap: 12px; padding: 18px;
  border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.dv__comments-title { display: flex; align-items: center; gap: 8px; font-size: 1rem; }
.dv__comments-title svg { width: 18px; height: 18px; color: var(--accent); }
.dv__comments-title .mono { color: var(--muted); font-size: .85rem; }
.dv__comment { display: flex; gap: 10px; align-items: flex-start; font-size: .88rem; }
.dv__comment p { color: var(--ink-soft); line-height: 1.45; margin-top: 2px; }
.dv__comment-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dv__comment-head .dv__when { margin-left: 0; font-size: .76rem; }
.dv__commentform { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.dv__commentform input {
  flex: 1; min-width: 0; padding: 9px 12px;
  border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface-2);
}

/* slide deck viewer */
.dv__deck { display: grid; gap: 10px; }
.dv__deck:is(:fullscreen, .is-fs) { background: #000; padding: 24px; place-content: center; }
.dv__deck:is(:fullscreen, .is-fs) .dv__strip { display: none; }
.dv__deck:is(:fullscreen, .is-fs) .dv__caption { color: #fff; }
.dv__deck:is(:fullscreen, .is-fs) .dv__slide { max-height: 84vh; }
.dv__slide {
  position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden;
  background: #1C2033; box-shadow: var(--shadow-2);
}
.dv__slide img { width: 100%; height: 100%; object-fit: contain; display: block; }
.dv__slide-text { display: grid; place-content: center; gap: 12px; height: 100%; padding: 8%; color: #fff; text-align: center; }
.dv__slide-text h3 { font-size: clamp(1.3rem, 3vw, 2.2rem); }
.dv__slidenav {
  position: absolute; top: 50%; translate: 0 -50%;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff;
  background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
  box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
  transition: background-color .16s var(--ease), opacity .16s var(--ease);
}
.dv__slidenav svg { width: 22px; height: 22px; }
.dv__slidenav:hover:not(:disabled) { background: rgba(0,0,0,.65); }
.dv__slidenav:disabled { opacity: .25; cursor: default; }
.dv__slidenav--l { left: 12px; }
.dv__slidenav--r { right: 12px; }
.dv__slidefull {
  position: absolute; right: 12px; top: 12px; width: 36px; height: 36px; border-radius: 50%; border: 0; cursor: pointer;
  display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.42); backdrop-filter: blur(6px);
}
.dv__slidefull svg { width: 18px; height: 18px; }
.dv__slidecount {
  position: absolute; left: 12px; bottom: 12px;
  padding: 3px 9px; border-radius: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: .72rem; font-weight: 700;
}
.dv__caption { display: grid; gap: 3px; padding: 2px 4px; font-size: .92rem; color: var(--ink-soft); line-height: 1.45; }
.dv__caption b { color: var(--ink); font-family: var(--font-display); }
.dv__strip { display: flex; gap: 6px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: thin; }
.dv__thumbsm {
  flex: 0 0 auto; width: 88px; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden;
  border: 2px solid transparent; padding: 0; background: var(--surface-2); cursor: pointer;
  display: grid; place-items: center; font-family: var(--font-mono); font-size: .75rem; color: var(--muted);
  transition: border-color .16s var(--ease), transform .16s var(--ease-out-back);
}
.dv__thumbsm img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv__thumbsm:hover { transform: translateY(-2px); }
.dv__thumbsm.is-on { border-color: var(--accent); }

/* composer */
.dv__tagpicks { display: flex; gap: 8px; flex-wrap: wrap; }
.dv__tagpick {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: var(--r-pill); border: 1px solid var(--line-strong);
  font-size: .82rem; font-weight: 600; color: var(--muted); cursor: pointer;
}
.dv__tagpick input { accent-color: var(--accent); }
.dv__tagpick.is-on, .dv__tagpick:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }

/* favourites page entry */
.dv__favlink {
  display: inline-flex; align-items: center; gap: 12px; background: none; border: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; min-width: 0;
}
.dv__favlink > svg { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }
.dv__favlink span { display: grid; gap: 2px; min-width: 0; }
.dv__favlink small { color: var(--muted); font-size: .78rem; }
.dv__favlink:hover b { color: var(--accent); }

/* ==========================================================================
   Peeks — the vertical feed
   One 9:16 frame per screen, scroll-snapped inside its own scroller so the
   page never scrolls; the frame in view plays, muted until asked. Actions
   ride the right edge, the title the bottom — the language of every
   shorts feed, so nothing needs explaining.
   ========================================================================== */

body.pk-focus { overflow: hidden; }
body.pk-focus #footer,
body.pk-focus #yeldock { display: none; }

.pk { --pk-extra: 0px; height: calc(100dvh - var(--header-h) - var(--pk-extra) - 1px); display: flex; flex-direction: column; background: var(--bg-sunk); }
body:has(.cookiebar:not([hidden])) .pk { --pk-extra: 56px; }
.pk__top {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 20px; border-bottom: 1px solid var(--line); background: var(--bg);
}
.pk__top .crumb { margin: 0; }
.pk__name { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-display); font-weight: 700; margin-left: auto; }
.pk__name svg { width: 18px; height: 18px; color: var(--accent); }
.pk__count { color: var(--muted); font-size: .78rem; }
.pk__feed {
  flex: 1; min-height: 0; overflow-y: auto; scroll-snap-type: y mandatory;
  scrollbar-width: none; overscroll-behavior: contain;
}
.pk__feed::-webkit-scrollbar { display: none; }
.pk__item { height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; padding: 14px; }
.pk__frame {
  position: relative; height: 100%; max-height: 100%; aspect-ratio: 9 / 16; max-width: 100%;
  border-radius: var(--r-lg); overflow: hidden; background: #000; box-shadow: var(--shadow-3); color: #fff;
}
.pk__frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pk__tap { position: absolute; inset: 0; background: none; border: 0; cursor: pointer; }
.pk__paused {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none;
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(0,0,0,.45); backdrop-filter: blur(6px);
}
.pk__paused[hidden] { display: none; }
.pk__paused svg { width: 30px; height: 30px; margin-left: 3px; }
.pk__side { position: absolute; right: 10px; bottom: 96px; display: grid; gap: 14px; justify-items: center; }
.pk__btn {
  display: grid; justify-items: center; gap: 3px; width: 50px;
  background: none; border: 0; padding: 0; color: #fff; cursor: pointer; font: inherit;
}
.pk__btn > svg {
  width: 46px; height: 46px; padding: 11px; border-radius: 50%;
  background: rgba(0,0,0,.4); backdrop-filter: blur(6px); box-shadow: 0 0 0 1px rgba(255,255,255,.18) inset;
  transition: transform .2s var(--ease-out-back), background-color .16s var(--ease);
}
.pk__btn:hover > svg { transform: scale(1.08); background: rgba(0,0,0,.6); }
.pk__btn b { font-family: var(--font-mono); font-size: .72rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.8); }
.pk__btn.is-on { color: #FF5470; }
.pk__btn.is-on > svg { background: rgba(255,84,112,.28); }
.pk__meta {
  position: absolute; left: 14px; right: 72px; bottom: 16px; display: grid; gap: 6px;
  padding-top: 60px; background: linear-gradient(to top, rgba(0,0,0,.05), transparent);
}
.pk__frame::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 46%; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.78), transparent);
}
.pk__meta, .pk__side { z-index: 2; }
.pk__meta .dv__by { color: #fff; }
.pk__meta .dv__byname { color: #fff; }
.pk__meta .dv__when { color: rgba(255,255,255,.7); }
.pk__meta .dv__tag { background: rgba(255,255,255,.18); color: #fff; }
.pk__title { font-size: 1.05rem; line-height: 1.25; text-shadow: 0 1px 6px rgba(0,0,0,.6); }
.pk__text { font-size: .86rem; color: rgba(255,255,255,.88); line-height: 1.4; text-shadow: 0 1px 6px rgba(0,0,0,.6); }


@media (max-width: 720px) {
  .dv__peek { width: 140px; }
  .pk { position: fixed; inset: 0; z-index: 150; height: 100dvh; background: #000; }
  .pk__top {
    position: absolute; left: 0; right: 0; top: 0; z-index: 3; border: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent); color: #fff;
    padding-top: max(10px, env(safe-area-inset-top));
  }
  .pk__top .crumb, .pk__name, .pk__count { color: #fff; }
  .pk__name svg { color: #fff; }
  .pk__feed { height: 100%; }
  .pk__item { padding: 0; height: 100dvh; }
  .pk__frame { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; box-shadow: none; }
  .pk__frame video { object-fit: contain; }
  .pk__side { bottom: calc(110px + env(safe-area-inset-bottom)); }
  .pk__meta { bottom: calc(18px + env(safe-area-inset-bottom)); }
  .dv__slidenav { width: 36px; height: 36px; }
}

/* ==========================================================================
   lyeli search — the one box that reaches everything
   A pill with the mascot on the left, a soft brand-gradient ring that
   wakes up on focus, and a grouped dropdown of results. .lysearch--site
   is the home page box (results drop down); .lysearch--dv is the Discover
   box (results replace the page below it, and it stays pinned on top).
   ========================================================================== */

.lysearch {
  position: relative; display: flex; align-items: center; gap: 10px;
  padding: 6px 8px 6px 10px; border-radius: var(--r-pill);
  background: var(--surface); border: 2px solid var(--line);
  box-shadow: 0 6px 22px rgba(30,26,66,.08);
  transition: box-shadow .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
/* On focus: a thin accent line and the same soft neutral shadow, lifted a
   touch. No gradient ring, no coloured glow. */
.lysearch:focus-within {
  border-color: var(--accent); transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(30,26,66,.10);
  background: var(--surface);
}
.lysearch input {
  flex: 1; min-width: 0; border: 0; background: none; padding: 9px 4px;
  font: inherit; font-size: 1rem; color: var(--ink); outline: none;
}
.lysearch input::placeholder { color: var(--muted); }
.lysearch input::-webkit-search-cancel-button { display: none; }
.lysearch__mark {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--accent-wash); color: var(--accent);
}
.lysearch__mark svg { width: 18px; height: 18px; }
.lysearch__mark--mascot { background: linear-gradient(135deg, var(--accent-wash), var(--mint-soft)); overflow: hidden; }
.lysearch__mark--mascot svg { width: 30px; height: 30px; }
.lysearch__kbd { font-size: .7rem; color: var(--muted); padding: 3px 7px; border: 1px solid var(--line); border-radius: 6px; opacity: 0; transition: opacity .2s var(--ease); }
.lysearch:focus-within .lysearch__kbd { opacity: 1; }
.lysearch__clear, .lysearch__item, .yc__chip, .yc__x, .yc__send, .pk__navbtn, .dv__side-more, .dv__row, .privpick, .dvdrawer__x, .dv__slidecomm { border: 0; background: none; cursor: pointer; }
.lysearch__clear {
  width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  color: var(--muted); background: var(--surface-2);
}
.lysearch__clear:hover { color: var(--ink); }
.lysearch__clear svg { width: 15px; height: 15px; }
.lysearch__clear[hidden] { display: none; }

.lysearch-wrap { position: relative; }
.lysearch__hint { margin-top: 10px; font-size: .8rem; color: var(--muted); text-align: center; }
.lysearch__drop {
  position: absolute; left: 0; right: 0; top: calc(100% - 26px); z-index: 60;
  max-height: min(520px, 70vh); overflow-y: auto; padding: 8px;
  border-radius: var(--r); background: var(--surface); border: 1px solid var(--line);
  box-shadow: var(--shadow-3); animation: vc-rise .18s var(--ease);
}
.lysearch-wrap--home .lysearch__drop { top: calc(100% - 22px); }
.lysearch__drop[hidden] { display: none; }
.lysearch__group + .lysearch__group { margin-top: 6px; border-top: 1px solid var(--line); padding-top: 6px; }
.lysearch__glabel {
  display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 4px;
  font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.lysearch__glabel .mono { font-weight: 600; letter-spacing: 0; text-transform: none; }
.lysearch__item {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: var(--r-sm); color: var(--ink);
}
.lysearch__item:hover, .lysearch__item:focus-visible { background: var(--accent-wash); outline: none; }
.lysearch__icon { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; background: var(--surface-2); color: var(--accent); }
.lysearch__icon svg { width: 17px; height: 17px; }
.lysearch__text { display: grid; gap: 1px; min-width: 0; flex: 1; }
.lysearch__text b { font-family: var(--font-display); font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lysearch__text small { color: var(--muted); font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lysearch__tag { flex: 0 0 auto; padding: 3px 8px; border-radius: var(--r-pill); background: var(--mint); color: var(--navy); font-size: .68rem; font-weight: 700; white-space: nowrap; }
.lysearch__none { padding: 18px; text-align: center; color: var(--muted); font-size: .9rem; }

.dv__results-h { font-family: var(--font-display); font-weight: 600; color: var(--ink-soft); margin-bottom: 16px; }
.dv__results .dv__section + .dv__section { margin-top: 26px; }

/* ==========================================================================
   Discover — additions: section arrows, follow, profiles, sidebar, drawer
   ========================================================================== */

.dv__section-title { display: grid; gap: 4px; }
.dv__section-go {
  display: inline-flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0;
  color: var(--ink); cursor: pointer; text-align: left;
}
.dv__section-go svg {
  width: 30px; height: 30px; padding: 6px; border-radius: 50%;
  background: var(--surface-2); color: var(--accent); border: 1px solid var(--line);
  transition: transform .2s var(--ease-out-back), background-color .16s var(--ease), color .16s var(--ease);
}
.dv__section-go:hover svg { transform: translateX(3px); background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.dv__section-go:hover .section__title { color: var(--accent); }

.dv__grid--peeks { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.dv__grid--peeks .dv__peek { width: auto; }
.dv__grid--profile { margin-top: 12px; }

/* who + follow */
.dv__who { display: inline-flex; align-items: center; gap: 9px; padding: 0; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; min-width: 0; text-align: left; }
.dv__who:hover .dv__byname { color: var(--accent); }
.dv__who--plain { gap: 0; }
.dv__who--plain:hover b { color: var(--accent); }
.dv__byname > small { display: block; font-weight: 500; color: var(--muted); font-size: .76rem; }
.dv__lock { display: inline-grid; place-items: center; color: var(--muted); }
.dv__lock svg { width: 13px; height: 13px; }
.dv__follow {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto;
  padding: 4px 10px 4px 7px; border-radius: var(--r-pill);
  border: 1px solid var(--accent); background: var(--accent); color: var(--accent-ink);
  font-size: .74rem; font-weight: 700; letter-spacing: .01em; cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease), transform .16s var(--ease);
}
.dv__follow svg { width: 13px; height: 13px; }
.dv__follow:hover { transform: translateY(-1px); }
.dv__follow.is-on { background: transparent; color: var(--ink-soft); border-color: var(--line-strong); }
.dv__follow.is-on:hover { color: var(--berry); border-color: var(--berry); }
.dv__follow--lg { padding: 10px 18px 10px 14px; font-size: .9rem; }
.dv__follow--lg svg { width: 16px; height: 16px; }
.dv__follow--dark.is-on { color: #fff; border-color: rgba(255,255,255,.5); background: rgba(0,0,0,.25); }
.dv__by .dv__follow { margin-left: 2px; }

/* members list */
.dv__members { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.dv__member {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
}
.dv__member .dv__byname { display: grid; gap: 1px; }
.dv__member .dv__byname > span { display: inline-flex; align-items: center; gap: 6px; }
.dv__member .dv__byname > small { font-family: var(--font-body); }

/* profile */
.dv__profile {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 22px;
  padding: 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface);
}
.dv__avatar--xl { width: 96px; height: 96px; }
.dv__profile-id { display: grid; gap: 6px; min-width: 0; }
.dv__profile-name { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.dv__badge--you { background: var(--accent-wash); color: var(--accent); }
.dv__profile-handle { color: var(--muted); font-size: .84rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.dv__vis { display: inline-flex; align-items: center; gap: 4px; }
.dv__vis svg { width: 13px; height: 13px; }
.dv__profile-bio { color: var(--ink-soft); max-width: 60ch; }
.dv__stats { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 4px; }
.dv__stat { display: grid; gap: 0; }
.dv__stat b { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; }
.dv__stat small { color: var(--muted); font-size: .76rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.dv__profile-acts { display: flex; gap: 8px; }
.dv__stat--btn { border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; padding: 0; border-radius: var(--r-sm); }
.dv__stat--btn:hover b { color: var(--accent); }
.dv__privatebox {
  display: flex; align-items: center; gap: 12px; margin-top: 12px; padding: 20px;
  border: 1px dashed var(--line-strong); border-radius: var(--r-lg); background: var(--surface-2); color: var(--ink-soft);
}
.dv__privatebox svg { width: 24px; height: 24px; color: var(--accent); flex: 0 0 auto; }

/* post page: player on the left, related on the right */
.dv__post--wide { max-width: none; grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; align-items: start; }
.dv__post--wide .dv__post-main { min-width: 0; }
.dv__side { display: grid; gap: 10px; min-width: 0; }
.dv__side-h {
  display: flex; align-items: center; gap: 8px; margin: 4px 0 2px;
  font-family: var(--font-display); font-weight: 600; font-size: .92rem; color: var(--ink);
}
.dv__side-h svg { width: 16px; height: 16px; color: var(--accent); }
.dv__side-more { margin-left: auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: var(--accent); background: var(--surface-2); }
.dv__side-more svg { width: 15px; height: 15px; }
.dv__side-more:hover { background: var(--accent); color: var(--accent-ink); }
.dv__side-peeks { display: grid; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); margin-block: 4px; }
.dv__rail--side { padding-bottom: 4px; }
.dv__rail--side .dv__peek { width: 118px; }
.dv__row {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 12px; align-items: start; width: 100%;
  padding: 6px; border-radius: var(--r-sm); text-align: left; color: var(--ink);
  transition: background-color .16s var(--ease);
}
.dv__row:hover { background: var(--surface-2); }
.dv__row-thumb { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #07080F; display: block; }
.dv__row-thumb video, .dv__row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dv__row-thumb .dv__thumb-empty svg { width: 22px; height: 22px; }
.dv__row-thumb .dv__dur { right: 6px; bottom: 6px; padding: 2px 6px; font-size: .66rem; }
.dv__row-body { display: grid; gap: 3px; min-width: 0; padding-top: 2px; }
.dv__row-body b { font-family: var(--font-display); font-weight: 600; font-size: .9rem; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.dv__row-body small { color: var(--muted); font-size: .76rem; }
.dv__row-stats { display: inline-flex; align-items: center; gap: 4px; }
.dv__row-stats svg { width: 12px; height: 12px; }
.dv__slidecomm {
  position: absolute; right: 60px; bottom: 12px; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; backdrop-filter: blur(6px);
}
.dv__slidecomm svg { width: 18px; height: 18px; }
.dv__slidecomm:hover { background: rgba(0,0,0,.65); }

/* the drawer: comments / YelAI, from the right; a sheet on phones */
.dvdrawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 400;
  width: min(400px, 100vw); display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink); border-left: 1px solid var(--line);
  box-shadow: -20px 0 60px rgba(0,0,0,.25);
  transform: translateX(100%); transition: transform .28s var(--ease);
}
.dvdrawer.is-in { transform: translateX(0); }
.dvdrawer__head {
  display: flex; align-items: center; gap: 8px; padding: 16px 16px 12px; border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
}
.dvdrawer__head > svg { width: 18px; height: 18px; color: var(--accent); }
.dvdrawer__head .mono { color: var(--muted); font-size: .84rem; }
.dvdrawer__x { margin-left: auto; }
.dvdrawer__body { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px; display: grid; gap: 12px; align-content: start; }
.dvdrawer__body--yel { padding: 0; display: block; }
.dvdrawer__foot { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--bg); }
.dvdrawer__back { display: none; }
.dv__comment-list { display: grid; gap: 12px; }
:fullscreen > .dvdrawer, .is-fs > .dvdrawer { z-index: 500; }

/* ==========================================================================
   Peeks — additions: up / down on the left, YelAI, the double-tap heart
   ========================================================================== */

.pk { position: relative; }
.pk__nav {
  position: absolute; left: 18px; top: 50%; translate: 0 -50%; z-index: 3;
  display: grid; gap: 10px;
}
.pk__navbtn {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 6px 22px rgba(30,26,66,.1);
  transition: transform .2s var(--ease-out-back), background-color .16s var(--ease), color .16s var(--ease);
}
.pk__navbtn svg { width: 20px; height: 20px; }
.pk__navbtn:first-child svg { transform: rotate(180deg); }
.pk__navbtn:hover { background: var(--accent); color: var(--accent-ink); transform: scale(1.08); }
.pk__burst {
  position: absolute; left: 50%; top: 50%; translate: -50% -50%; pointer-events: none; z-index: 3;
  color: #FF5470; filter: drop-shadow(0 6px 18px rgba(0,0,0,.5));
}
.pk__burst[hidden] { display: none; }
.pk__burst svg { width: 110px; height: 110px; }
.pk__burst.is-go { animation: pk-burst .85s var(--ease-out-back) forwards; }
@keyframes pk-burst {
  0% { opacity: 0; scale: .3; }
  18% { opacity: 1; scale: 1.15; }
  45% { scale: 1; }
  100% { opacity: 0; scale: 1.05; translate: -50% -70%; }
}
.dv__yelface { display: inline-grid; place-items: center; }
.pk__yel .dv__yelface {
  width: 46px; height: 46px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(rgba(20, 22, 40, .85), rgba(20, 22, 40, .85)) padding-box,
              radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--ai-2) 40%, transparent), transparent 70%) padding-box,
              linear-gradient(135deg, var(--ai-1), var(--ai-2), var(--ai-3)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 14px rgba(15, 45, 33, .35);
  transition: transform .2s var(--ease-out-back);
}
.dv__yelimg { width: 70%; height: 70%; display: block; }
.pk__yel:hover .dv__yelface { transform: scale(1.08); }

/* ==========================================================================
   YelClip — the YelAI clip panel (inside the player's dark panel and inside
   the light drawer; the surface decides the palette through tokens)
   ========================================================================== */

.yc { --yc-ink: var(--ink); --yc-soft: var(--ink-soft); --yc-muted: var(--muted); --yc-line: var(--line); --yc-chip: var(--surface-2); --yc-chip-on: var(--accent-wash); --yc-field: var(--surface-2); display: grid; gap: 12px; color: var(--yc-ink); }
.vc__info.yc { --yc-ink: #EDEEF8; --yc-soft: rgba(237,238,248,.85); --yc-muted: rgba(237,238,248,.6); --yc-line: rgba(255,255,255,.14); --yc-chip: rgba(255,255,255,.08); --yc-chip-on: rgba(255,255,255,.16); --yc-field: rgba(255,255,255,.08); width: min(380px, calc(100% - 28px)); max-height: calc(100% - 28px); overflow-y: auto; }
.dvdrawer .yc { padding: 16px; }
.yc__head { display: flex; align-items: center; gap: 10px; }
/* YelAI's face in the clip panel: the real 3D render on a soft brand wash,
   held in a thin gradient ring — the same mark as the header logo. */
.yc__mascot {
  width: 42px; height: 42px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(var(--pp-bg, var(--surface)), var(--pp-bg, var(--surface))) padding-box,
              radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--ai-2) 26%, transparent), transparent 70%) padding-box,
              linear-gradient(135deg, var(--ai-1), var(--ai-2), var(--ai-3)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 4px 12px rgba(15, 45, 33, .18);
}
.yc__mascotimg { width: 70%; height: 70%; display: block; }
.yc__id { display: grid; gap: 1px; min-width: 0; }
.yc__id b { font-family: var(--font-display); font-size: 1rem; }
.yc__id small { color: var(--yc-muted); font-size: .76rem; }
.yc__x { margin-left: auto; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--yc-soft); }
.yc__x:hover { background: var(--yc-chip-on); }
.yc__x svg { width: 15px; height: 15px; }
.yc__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.yc__chip {
  padding: 7px 11px; border-radius: var(--r-pill); background: var(--yc-chip); color: var(--yc-ink);
  border: 1px solid var(--yc-line); font-size: .8rem; font-weight: 600; text-align: left;
  transition: background-color .16s var(--ease), transform .16s var(--ease);
}
.yc__chip:hover { background: var(--yc-chip-on); transform: translateY(-1px); }
.yc__answer { padding: 12px 14px; border-radius: var(--r-sm); background: var(--yc-chip); border: 1px solid var(--yc-line); font-size: .9rem; line-height: 1.55; color: var(--yc-ink); }
.yc__answer p + p { margin-top: 8px; }
.yc__answer.is-busy { animation: yc-pulse 1.4s ease-in-out infinite; }
@keyframes yc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .65; } }
.yc__note { font-size: .78rem; color: var(--yc-muted); font-style: italic; }
.yc__form { display: flex; align-items: center; gap: 6px; padding: 4px 4px 4px 12px; border-radius: var(--r-pill); background: var(--yc-field); border: 1px solid var(--yc-line); }
.yc__form input { flex: 1; min-width: 0; background: none; border: 0; padding: 8px 0; font: inherit; font-size: .9rem; color: var(--yc-ink); outline: none; }
.yc__form input::placeholder { color: var(--yc-muted); }
.yc__send { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); flex: 0 0 auto; }
.yc__send svg { width: 16px; height: 16px; }
.yc__send.is-stop { background: var(--berry); color: #fff; }
.yc__details { font-size: .82rem; color: var(--yc-soft); }
.yc__details summary { cursor: pointer; color: var(--yc-muted); font-weight: 600; font-size: .76rem; letter-spacing: .06em; text-transform: uppercase; }
.yc__details .vc__infotitle { margin-top: 8px; }

/* the player's YelAI button (where the "i" used to be) */
.vc__btn--yel { width: auto; padding: 0 10px 0 3px; gap: 6px; grid-auto-flow: column; border-radius: var(--r-pill); }
/* The YelAI button's face: the real 3D render in a gradient ring on the
   site's own surface (dark glass in fullscreen), never a flat stand-in. */
.vc__yelface {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: 0 0 auto;
  background: linear-gradient(var(--pp-bg), var(--pp-bg)) padding-box,
              radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--ai-2) 26%, transparent), transparent 70%) padding-box,
              linear-gradient(135deg, var(--ai-1), var(--ai-2), var(--ai-3)) border-box;
  border: 1.5px solid transparent;
  box-shadow: 0 3px 10px rgba(15, 45, 33, .2);
  transition: transform .3s var(--ease-out-back), box-shadow .2s var(--ease);
}
.vc__yelimg { width: 72%; height: 72%; display: block; }
.vc__btn--yel:hover .vc__yelface { transform: translateY(-1px) scale(1.06); box-shadow: 0 6px 16px rgba(15, 45, 33, .3); }
.vc__btn--yel.is-on .vc__yelface, .vc__btn--yel:hover .vc__yelface { background: linear-gradient(var(--accent-wash), var(--accent-wash)) padding-box, linear-gradient(135deg, var(--ai-1), var(--ai-2), var(--ai-3)) border-box; }
.vc__frame:is(:fullscreen, .is-fs) .vc__btn--yel.is-on .vc__yelface, .vc__frame:is(:fullscreen, .is-fs) .vc__btn--yel:hover .vc__yelface { background: linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)) padding-box, linear-gradient(135deg, var(--ai-1), var(--ai-2), var(--ai-3)) border-box; }
.vc__yeltag { background: var(--ai-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.vc__yeltag { font-family: var(--font-display); font-weight: 700; font-size: .74rem; letter-spacing: .02em; }
.vc__frame:is(:fullscreen, .is-fs) .vc__yeltag { color: #fff; }

/* ==========================================================================
   Sign-up: public or private
   ========================================================================== */

.privpicks { display: grid; gap: 10px; }
.privpick {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 14px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r); background: var(--surface); text-align: left;
  transition: border-color .16s var(--ease), background-color .16s var(--ease), transform .16s var(--ease);
}
.privpick:hover { transform: translateY(-1px); border-color: var(--ink-soft); }
.privpick.is-on { border-color: var(--accent); background: var(--accent-wash); }
.privpick__icon { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); color: var(--accent); }
.privpick.is-on .privpick__icon { background: var(--accent); color: var(--accent-ink); }
.privpick__icon svg { width: 20px; height: 20px; }
.privpick__text { display: grid; gap: 2px; }
.privpick__text b { font-family: var(--font-display); font-size: 1rem; }
.privpick__text small { color: var(--ink-soft); font-size: .82rem; line-height: 1.4; }
.privpick__check { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); opacity: 0; transition: opacity .16s var(--ease); }
.privpick.is-on .privpick__check { opacity: 1; }
.privpick__check svg { width: 14px; height: 14px; }
.chip > svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }

/* --- phones --------------------------------------------------------------- */

@media (max-width: 960px) {
  .dv__post--wide { grid-template-columns: minmax(0, 1fr); }
  .dv__side { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
  .dv__side-h, .dv__side-peeks { grid-column: 1 / -1; }
  .dv__profile { grid-template-columns: auto minmax(0, 1fr); }
  .dv__profile-acts { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .lysearch input { font-size: .95rem; }
  .lysearch__kbd { display: none; }
  .dv__section-go svg { width: 26px; height: 26px; }
  .dv__row { grid-template-columns: 110px minmax(0, 1fr); }
  .dv__avatar--xl { width: 72px; height: 72px; }
  .dvdrawer {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: 78dvh;
    border-left: 0; border-top: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0;
    transform: translateY(100%); box-shadow: 0 -20px 60px rgba(0,0,0,.35);
  }
  .dvdrawer.is-in { transform: translateY(0); }
  .dvdrawer__back { display: block; position: fixed; inset: 0; z-index: -1; background: rgba(0,0,0,.35); }
  .dvdrawer::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--line-strong); margin: 8px auto 0; }
  .pk__nav { left: 10px; top: auto; bottom: calc(160px + env(safe-area-inset-bottom)); translate: none; gap: 8px; }
  .pk__navbtn { width: 40px; height: 40px; background: rgba(0,0,0,.4); color: #fff; border-color: rgba(255,255,255,.2); backdrop-filter: blur(6px); }
  .pk__side { bottom: calc(96px + env(safe-area-inset-bottom)); }
  .pk__yel .dv__yelface { width: 42px; height: 42px; }
  .vc__btn--yel { padding: 0 4px 0 2px; }
  .vc__yeltag { display: none; }
  .vc__info.yc { width: calc(100% - 16px); right: 8px; bottom: 8px; }
}

/* ==========================================================================
   Top bar + sidebar
   The top bar holds the logo (top-left), the site search beside it and the
   account cluster on the right. Every page of the site lives in the left
   sidebar under the logo — full labels on desktops and tablets alike, a
   slide-in drawer behind the burger on a phone.
   ========================================================================== */

:root { --side-w: 240px; }

.header__in {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px;
  min-height: var(--header-h); padding-inline: 16px 18px;
}
.header .brand { padding: 4px 8px 4px 4px; margin-left: -4px; }
.header__search { display: flex; align-items: center; gap: 8px; min-width: 0; max-width: 720px; justify-self: start; width: 100%; }
.header__search .lysearch-wrap { flex: 1; min-width: 0; }
.lysearch-wrap--top .lysearch { padding: 3px 5px 3px 6px; border-width: 1.5px; box-shadow: none; background: var(--surface-2); }
.lysearch-wrap--top .lysearch:focus-within { background: var(--surface); box-shadow: 0 6px 18px rgba(30,26,66,.08); }
.lysearch-wrap--top .lysearch input { padding: 7px 4px; font-size: .94rem; }
.lysearch-wrap--top .lysearch__mark { width: 30px; height: 30px; }
.lysearch-wrap--top .lysearch__mark--mascot svg { width: 26px; height: 26px; }
.lysearch-wrap--top .lysearch__drop { top: calc(100% + 8px); }

/* the burger: three lines that fold into an X */
.burger { width: 40px; padding: 0; }
.burger__lines { display: grid; gap: 4px; width: 18px; }
.burger__lines i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform .22s var(--ease), opacity .18s var(--ease); }
body.has-mobilenav .burger__lines i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.has-mobilenav .burger__lines i:nth-child(2) { opacity: 0; }
body.has-mobilenav .burger__lines i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* sidebar */
.sidebar {
  position: fixed; left: 0; top: var(--header-h); bottom: 0; z-index: 45;
  width: var(--side-w); overflow-y: auto; overscroll-behavior: contain;
  background: var(--bg); border-right: 1px solid var(--line);
  scrollbar-width: thin;
}
body:has(.cookiebar:not([hidden])) .sidebar { top: calc(var(--header-h) + var(--cookie-h, 56px)); }
body:has(.cookiebar:not([hidden])) .header { top: var(--cookie-h, 56px); }
.sidebar__in { display: grid; gap: 14px; padding: 16px 12px 24px; }
.sidebar__group { display: grid; gap: 2px; }
.sidebar__label { padding: 8px 12px 4px; font-size: .64rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.sidebar__item {
  position: relative; display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 13px; background: none; color: var(--ink-soft);
  font-weight: 600; font-size: .9rem; text-align: left; cursor: pointer;
  transition: background-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease);
}
.sidebar__item:hover { background: var(--surface-2); color: var(--ink); transform: translateX(2px); }
.sidebar__icon {
  width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; flex: 0 0 auto;
  background: var(--surface); border: 1px solid var(--line); color: var(--accent);
  transition: background-color .16s var(--ease), color .16s var(--ease), border-color .16s var(--ease);
}
.sidebar__icon svg { width: 18px; height: 18px; }
.sidebar__text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar__badge { margin-left: auto; min-width: 20px; padding: 1px 6px; border-radius: var(--r-pill); background: var(--orchid); color: #fff; font-size: .68rem; text-align: center; }
.sidebar__item.is-active { color: var(--accent); background: var(--accent-wash); }
.sidebar__item.is-active .sidebar__icon { background: var(--grad); border-color: transparent; color: #fff; box-shadow: var(--glow); }
.sidebar__item.is-active::before { content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--grad); }

/* the page and the footer make room */
#app-page, #footer { margin-left: var(--side-w); }

/* Tablets keep the full desktop sidebar; the only breakpoint below is the
   phone one, where the sidebar becomes the burger drawer. */

/* phone: no sidebar — the burger opens a drawer; the logo stacks its mark
   over the word; only the search, the burger and the account stay up top */
@media (max-width: 900px) {
  :root { --side-w: 0px; }
  .sidebar { display: none; }
  #app-page, #footer { margin-left: 0; }
  .header__in { gap: 8px; padding-inline: 10px; }
  .header .brand { padding: 2px 4px; margin-left: 0; }
  .header .brand__mark { height: 34px; }
  .lysearch-wrap--top .lysearch input { font-size: .9rem; padding: 6px 2px; }
  .lysearch-wrap--top .lysearch__mark { width: 28px; height: 28px; }

  .mobilenav {
    position: fixed; inset: 0; top: var(--header-h); z-index: 70; display: block;
    padding: 0; border: 0; background: none;
  }
  body:has(.cookiebar:not([hidden])) .mobilenav { top: calc(var(--header-h) + var(--cookie-h, 56px)); }
  .mobilenav__back { position: absolute; inset: 0; background: rgba(14,12,32,.45); backdrop-filter: blur(3px); animation: fade .2s var(--ease); }
  .mobilenav__in {
    position: absolute; left: 0; top: 0; bottom: 0; width: min(330px, 88vw); overflow-y: auto;
    display: grid; gap: 14px; align-content: start; padding: 16px 12px calc(24px + env(safe-area-inset-bottom));
    background: var(--bg); border-right: 1px solid var(--line); box-shadow: var(--shadow-3);
    animation: slide-in .24s var(--ease);
  }
  @keyframes slide-in { from { transform: translateX(-100%); } to { transform: none; } }
  .mobilenav .sidebar__item.is-active::before { left: -12px; }
  body.has-mobilenav { overflow: hidden; }
}
@media (max-width: 420px) {
  .header .brand__mark { height: 29px; }
}

/* ==========================================================================
   Avatars with a photo, username fields, settings picture row
   ========================================================================== */

.avatar--photo { padding: 0; background: var(--surface-2); }
.avatar--photo.avatar--leveled {
  background: conic-gradient(from -90deg,
    var(--blue) 0%,
    var(--violet) calc(var(--ringpct, 100) * 0.5%),
    var(--orchid) calc(var(--ringpct, 100) * 1%),
    color-mix(in srgb, var(--line-strong) 65%, transparent) 0);
}
.avatar--photo img, .dv__avatar--photo img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.avatar--lg { width: 76px; height: 76px; flex: 0 0 auto; }
.dv__avatar--photo { background: var(--surface-2); }
.settings__pic { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.settings__picacts { display: grid; gap: 6px; justify-items: start; }
.settings__picacts .btn { cursor: pointer; }
.handlefield {
  display: flex; align-items: center; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2);
}
.handlefield > span { padding: 0 4px 0 12px; color: var(--muted); font-family: var(--font-mono); font-weight: 700; }
.handlefield input { flex: 1; min-width: 0; border: 0 !important; background: none !important; padding: 11px 12px 11px 0 !important; font-family: var(--font-mono); }
.handlefield:focus-within { border-color: var(--accent); }

/* the verified mark */
.dv__tick { display: inline-grid; place-items: center; width: 17px; height: 17px; margin-left: 5px; vertical-align: -3px; cursor: help; }
.dv__tick svg { width: 17px; height: 17px; display: block; filter: drop-shadow(0 1px 2px rgba(47,95,232,.3)); }
.dv__byname { display: inline-grid; gap: 0; }
.dv__byname > span { display: inline-flex; align-items: center; gap: 2px; }
.dv__byname > small { font-family: var(--font-mono); font-weight: 500; }
.dv__comment-head .dv__who--plain { display: inline-flex; align-items: center; gap: 6px; }
.dv__comment-head .dv__who--plain small { color: var(--muted); font-size: .72rem; font-weight: 500; }
.dv__profile-name .dv__tick { width: 24px; height: 24px; margin-left: 0; }
.dv__profile-name .dv__tick svg { width: 24px; height: 24px; }
.pk__meta .dv__byname > small { color: rgba(255,255,255,.75); }

/* ==========================================================================
   Peeks — arrows beside the frame, the panel joined to its right edge
   ========================================================================== */

.pk__item { display: flex; align-items: center; justify-content: center; gap: 0; }
.pk__nav { position: static; translate: none; display: grid; gap: 10px; margin-right: 14px; flex: 0 0 auto; }
.pk__navbtn:disabled { opacity: .35; cursor: default; }
.pk__navbtn:disabled:hover { background: var(--surface); color: var(--ink); transform: none; }
.pk__item.has-panel .pk__frame { border-radius: var(--r-lg) 0 0 var(--r-lg); }
.pk__panel {
  display: flex; flex-direction: column; width: min(360px, 40vw); height: 100%; max-height: 100%;
  background: var(--surface); border: 1px solid var(--line); border-left: 0;
  border-radius: 0 var(--r-lg) var(--r-lg) 0; box-shadow: var(--shadow-3); overflow: hidden;
  animation: vc-rise .2s var(--ease);
}
.pk__panel[hidden] { display: none; }
.pk__panel .dvdrawer__body { padding: 12px 14px; }
.pk__panel .dvdrawer__foot { padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }
.pk__panel .yc { padding: 14px; }

@media (max-width: 720px) {
  .pk__item { display: grid; place-items: center; }
  .pk__nav { position: absolute; margin: 0; }
  .pk__panel { display: none !important; }
}


/* Plain player (Discover): the right third carries five tools, so it gets
   the room it asks for and the scrubber takes what is left. */
.vc--plain .vc__cbar { grid-template-columns: minmax(0, 1fr) auto auto; }
.vc--plain .vc__right { flex-wrap: wrap; justify-content: flex-end; }
@media (max-width: 960px) {
  .dv__post--wide { gap: 20px; }
}

/* ==========================================================================
   Top bar, take two: YelAI in the corner, logo beside it, search centred
   ========================================================================== */

:root { --side-w: 170px; --dock-w: 84px; }

.header__in { grid-template-columns: 1fr minmax(0, 640px) 1fr; padding-inline: 16px; }
@media (min-width: 901px) { .header__right { display: none; } }
.header__lead { display: flex; align-items: center; gap: 4px; justify-self: start; min-width: 0; }
.header__search { justify-self: stretch; width: 100%; max-width: none; }
.header__right { justify-self: end; }
.lysearch__mark--ly { background: var(--surface); border: 1px solid var(--line); }
.lysearch__mark--ly svg { width: 20px; height: 20px; }
.lysearch:focus-within .lysearch__mark--ly { border-color: var(--line); }

/* the YelAI launcher lives in the top-left corner; its panel opens under it */
/* top-right, a little outside the bar: the circle hangs 6px below its edge */
/* The dock hangs from the top edge at --dock-top; the panel below it gets
   whatever height is left above the bottom of the screen (launcher + gaps
   subtracted), so its composer never slides off a short tablet. */
.yeldock { --dock-top: 8px; left: auto; bottom: auto; right: 14px; top: var(--dock-top); flex-direction: column-reverse; align-items: flex-end; gap: 10px; z-index: 85; }
.yeldock__panel { height: min(560px, calc(100dvh - var(--dock-top) - 66px - 10px - 14px)); }
body:has(.cookiebar:not([hidden])) .yeldock { --dock-top: calc(8px + var(--cookie-h, 56px)); }
body.vc-focus #yeldock, body.pk-focus #yeldock { display: flex; }

/* ==========================================================================
   Sidebar, take two: a still grid of tiles (like the home shelf, smaller),
   two rows of tools at the foot — nothing scrolls
   ========================================================================== */

.sidebar { overflow: hidden; }
.sidebar__in {
  display: flex; flex-direction: column; gap: 10px; height: 100%;
  padding: 12px 10px calc(10px + env(safe-area-inset-bottom));
}
.sidebar__grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 62px; align-content: start; gap: 8px; /* one column; each page button is as big as two foot buttons side by side */
}
.stile {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 4px;
  min-height: 0; padding: 9px 10px 8px; overflow: hidden; text-align: left;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); color: var(--ink);
  cursor: pointer;
  transition: transform .28s var(--ease-out-back), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.stile__wash {
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(90% 110% at 90% 8%, color-mix(in srgb, var(--tile-hue) 30%, transparent) 0%, transparent 62%),
    linear-gradient(155deg, color-mix(in srgb, var(--tile-hue) 12%, transparent) 0%, transparent 60%);
  transition: opacity .3s var(--ease);
}
.stile__icon {
  position: relative; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--tile-hue) 16%, var(--surface)); color: var(--tile-hue);
  transition: transform .4s var(--ease-out-back), background-color .25s var(--ease), color .25s var(--ease);
}
.stile__icon svg { width: 17px; height: 17px; }
.stile__name {
  position: relative; font-family: var(--font-display); font-weight: 600; font-size: .78rem; line-height: 1.15;
  letter-spacing: -.01em; overflow: hidden; max-width: 100%; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.stile:hover, .stile:focus-visible {
  transform: translateY(-4px) scale(1.04); z-index: 2;
  box-shadow: var(--shadow-2); border-color: color-mix(in srgb, var(--tile-hue) 50%, var(--line));
}
.stile:hover .stile__wash { opacity: 1.5; }
.stile:hover .stile__icon { transform: translateY(-3px) rotate(-8deg) scale(1.12); }
.stile:active { transform: translateY(-1px) scale(1.01); }
.stile.is-active { border-color: color-mix(in srgb, var(--tile-hue) 55%, var(--line)); }
.stile.is-active .stile__icon { background: var(--tile-hue); color: #fff; box-shadow: 0 8px 18px color-mix(in srgb, var(--tile-hue) 35%, transparent); }
.stile.is-active .stile__name { color: var(--tile-hue); }
.stile.is-active .stile__wash { opacity: 1.6; }

.sidebar__foot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; flex: 0 0 auto; }
.sidebar__foot > .menu { min-width: 0; display: block; }
.sidebar__foot > .menu > .sbtn { width: 100%; }
.sbtn {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 4px 6px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--ink-soft);
  cursor: pointer; min-width: 0; width: 100%; overflow: hidden;
  transition: transform .25s var(--ease-out-back), box-shadow .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.sbtn:hover, .sbtn:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent); color: var(--accent); z-index: 2; }
.sbtn.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.sbtn__icon { position: relative; width: 28px; height: 28px; display: grid; place-items: center; }
.sbtn__icon > svg { width: 20px; height: 20px; }
.sbtn__icon .flag { width: 24px; height: 16px; }
.sbtn__icon--avatar .avatar { width: 30px; height: 30px; box-shadow: 0 0 0 2px var(--accent); }
.sbtn__icon--avatar .avatar--leveled { box-shadow: none; }
.sbtn__icon .cart-count { top: -6px; right: -10px; }
.sbtn small { font-size: .64rem; font-weight: 700; letter-spacing: .02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Foot tools with a colour of their own: Archive amber, Favourites berry,
   My Courses teal, Upgrade violet. The icon sits in a tinted square; the
   active state fills it. */
.sbtn--hue { color: var(--ink-soft); }
.sbtn--hue .sbtn__icon { border-radius: 9px; background: color-mix(in srgb, var(--tile-hue) 16%, var(--surface)); color: var(--tile-hue); transition: transform .3s var(--ease-out-back), background-color .2s var(--ease), color .2s var(--ease); }
.sbtn--hue:hover, .sbtn--hue:focus-visible { border-color: color-mix(in srgb, var(--tile-hue) 55%, var(--line)); color: var(--tile-hue); }
.sbtn--hue:hover .sbtn__icon { transform: translateY(-2px) rotate(-8deg) scale(1.1); }
.sbtn--hue.is-active { color: var(--tile-hue); border-color: color-mix(in srgb, var(--tile-hue) 55%, var(--line)); background: color-mix(in srgb, var(--tile-hue) 10%, var(--surface)); }
.sbtn--hue.is-active .sbtn__icon { background: var(--tile-hue); color: #fff; box-shadow: 0 6px 14px color-mix(in srgb, var(--tile-hue) 35%, transparent); }

/* The sidebar toggle, right of the logo. Open by default; closing slides
   the sidebar off and the page takes the width. Desktop only — the phone
   has the burger drawer instead. */
.sidetoggle { width: 38px; height: 38px; min-width: 38px; border-radius: 10px; color: var(--ink-soft); border-color: var(--line); margin-left: 4px; }
.sidetoggle svg { width: 22px; height: 22px; }
.sidetoggle:hover { color: var(--accent); background: var(--accent-wash); border-color: transparent; }
.sidetoggle__arrow { transition: transform .25s var(--ease); transform-origin: 14.5px 12px; }
body.side-closed .sidetoggle__arrow { transform: rotate(180deg); }
.sidebar { transition: transform .28s var(--ease), visibility .28s; }
body.side-closed .sidebar { transform: translateX(-100%); visibility: hidden; }
body.side-closed { --side-w: 0px; }
#app-page, #footer { transition: margin-left .28s var(--ease); }
@media (max-width: 900px) { .sidetoggle { display: none; } }
@media (prefers-reduced-motion: reduce) { .sidebar, #app-page, #footer, .sidetoggle__arrow { transition: none; } }
/* menus at the foot open upwards, hugging the sidebar */
.menu--up { position: relative; }
.sidebar .menu--up .menu__panel, .mobilenav .menu--up .menu__panel {
  top: auto; bottom: calc(100% + 8px); left: 0; right: auto; transform-origin: bottom left; min-width: 236px;
}
.sidebar .menu--up .menu__panel { position: fixed; left: 12px; bottom: 96px; top: auto; }
.sidebar .menu--up:hover .menu__panel, .sidebar .menu--up.is-open .menu__panel,
.mobilenav .menu--up:hover .menu__panel, .mobilenav .menu--up.is-open .menu__panel { transform: translateY(0) scale(1); }
.sidebar .menu--up .menu__panel, .mobilenav .menu--up .menu__panel { transform: translateY(6px) scale(.98); }

/* Short screens (tablets in landscape, small laptops): the same two-column
   sidebar, but each tile becomes an icon + label row so fourteen of them and
   the foot tools fit the height with every label readable and no scrolling. */
@media (max-height: 860px) {
  .sidebar__in { gap: 8px; padding: 10px 8px calc(8px + env(safe-area-inset-bottom)); }
  .sidebar__grid { gap: 6px; }
  .stile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 7px; padding: 5px 7px; border-radius: 12px; }
  .stile__icon { width: 26px; height: 26px; border-radius: 8px; flex: 0 0 auto; }
  .stile__icon svg { width: 14px; height: 14px; }
  .stile__name { font-size: .68rem; line-height: 1.12; }
  .stile:hover .stile__icon { transform: rotate(-8deg) scale(1.12); }
  .sidebar__foot { gap: 6px; }
  .sbtn { padding: 5px 2px 4px; border-radius: 11px; gap: 2px; }
  .sbtn__icon { width: 24px; height: 24px; }
  .sbtn__icon > svg { width: 17px; height: 17px; }
  .sbtn__icon--avatar .avatar { width: 26px; height: 26px; }
  .sbtn small { font-size: .6rem; }
}

/* tablet: same sidebar as the desktop — two columns of tiles, full labels,
   the foot tools with their captions. Only the phone breakpoint changes it. */

/* phone: the drawer scrolls; the top bar is dock + logo + search + burger + account */
@media (max-width: 900px) {
  :root { --dock-w: 62px; }
  .header__in { grid-template-columns: auto minmax(0, 1fr); padding-inline: 6px var(--dock-w); gap: 6px; }
  .header__right { display: none; }
  .header__lead { gap: 0; }
  .header__search { width: 100%; }
  .yeldock { right: 8px; top: 9px; left: auto; bottom: auto; align-items: flex-end; }
  .yeldock__launch { width: 50px; height: 50px; }
  .yeldock__panel { width: min(380px, calc(100vw - 16px)); height: min(560px, calc(100dvh - var(--dock-top) - 50px - 10px - 12px)); }
  /* The drawer is the desktop sidebar, narrower: one column of page tiles (icon + label rows), the page context, the foot tools two to a row —
     all of it fits the screen, nothing scrolls. Row heights follow the screen height so a short phone still fits. */
  .mobilenav__in { width: min(236px, 78vw); height: 100%; display: flex; flex-direction: column; gap: 8px; align-content: normal; overflow: hidden; padding: 10px 8px calc(8px + env(safe-area-inset-bottom)); }
  .mobilenav .sidebar__grid { flex: 0 1 auto; min-height: 0; grid-template-columns: minmax(0, 1fr); grid-auto-rows: clamp(36px, 5.6vh, 50px); gap: 6px; }
  .mobilenav .stile { flex-direction: row; align-items: center; justify-content: flex-start; text-align: left; gap: 9px; padding: 4px 9px; border-radius: 12px; min-height: 0; }
  .mobilenav .stile__icon { width: 28px; height: 28px; border-radius: 9px; flex: 0 0 auto; }
  .mobilenav .stile__icon svg { width: 15px; height: 15px; }
  .mobilenav .stile__name { font-size: .8rem; line-height: 1.12; }
  .mobilenav .stile:hover, .mobilenav .stile:focus-visible { transform: none; }
  .mobilenav .sidebar__ctx { flex: 0 1 auto; min-height: 0; }
  .mobilenav .sidebar__foot { flex: 0 0 auto; margin-top: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); }
  .mobilenav .sbtn { padding: 5px 2px 4px; border-radius: 11px; gap: 2px; }
  .mobilenav .sbtn:hover, .mobilenav .sbtn:focus-visible { transform: none; }
  .mobilenav .sbtn__icon { width: 24px; height: 24px; }
  .mobilenav .sbtn__icon > svg { width: 17px; height: 17px; }
  .mobilenav .sbtn__icon--avatar .avatar { width: 26px; height: 26px; }
  .mobilenav .sbtn small { display: block; font-size: .62rem; }
  .mobilenav .menu--up .menu__panel { position: fixed; left: 12px; bottom: 90px; }
  .yeldock__launch { align-self: flex-end; }
}


/* the planner's corner button: manual <-> YelAI */
.planfab {
  position: fixed; right: 18px; bottom: 18px; z-index: 75;
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 8px;
  border: 0; border-radius: var(--r-pill); background: var(--grad); color: #fff;
  font-weight: 700; font-size: .92rem; box-shadow: var(--shadow-2), var(--glow); cursor: pointer;
  transition: transform .25s var(--ease-out-back), box-shadow .25s var(--ease);
}
.planfab:hover { transform: translateY(-3px) scale(1.03); }
.planfab > svg { width: 38px; height: 38px; border-radius: 50%; background: rgba(255,255,255,.18); padding: 3px; }
.planfab--manual > svg { padding: 9px; }
@media (max-width: 720px) { .planfab { right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); font-size: .84rem; padding: 6px 14px 6px 6px; } .planfab > svg { width: 34px; height: 34px; } }

/* ==========================================================================
   Cart — banner with the tote scene, richer line items
   ========================================================================== */

.carthero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); align-items: center; gap: 24px;
  padding: 26px 30px; margin-bottom: 22px; border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--line);
  background:
    radial-gradient(90% 100% at 90% 0%, color-mix(in srgb, var(--violet) 22%, transparent) 0%, transparent 60%),
    radial-gradient(70% 80% at 0% 100%, color-mix(in srgb, var(--blue) 14%, transparent) 0%, transparent 60%),
    var(--surface);
}
.carthero__title { font-size: clamp(1.8rem, 3.6vw, 2.6rem); margin-block: 8px 8px; }
.carthero__sub { color: var(--ink-soft); max-width: 46ch; }
.carthero__art svg { width: 100%; height: auto; display: block; overflow: visible; }
.cs-blob { animation: breathe 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cs-card, .cs-book, .cs-cap, .cs-tag { transform-box: fill-box; transform-origin: center; }
.cs-card--a { animation: float-tilt 6s ease-in-out infinite; }
.cs-card--b { animation: float-tilt-r 7s ease-in-out infinite .6s; }
.cs-book { animation: float-tilt-r 8s ease-in-out infinite 1.2s; }
.cs-cap { animation: float-tilt 7.5s ease-in-out infinite .3s; }
.cs-tag { animation: float-tilt-r 5.5s ease-in-out infinite 1s; }
.cs-spark { animation: twinkle 3s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.cs-spark--2 { animation-delay: .9s; }
.cs-spark--3 { animation-delay: 1.7s; }
.carthero:hover .cs-card, .carthero:hover .cs-cap { animation-duration: 3s; }
.emptycart--plain { border: 0; background: none; padding: 10px 0 30px; gap: 14px; }

.lineitem--rich { gap: 14px; padding: 12px 14px; border-radius: var(--r); }
.lineitem--rich + .lineitem--rich { margin-top: 10px; }
.lineitem__glyph {
  width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: 0 0 auto;
  background: color-mix(in srgb, var(--tile-hue) 14%, var(--surface)); color: var(--tile-hue);
}
.lineitem__glyph svg { width: 28px; height: 28px; }
.lineitem__body { display: grid; gap: 2px; min-width: 0; flex: 1; }
.lineitem--rich .lineitem__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lineitem--rich .lineitem__price { margin-left: 0; font-size: 1.05rem; }
.lineitem__x { min-width: 36px; height: 36px; color: var(--muted); }
.lineitem__x:hover { color: var(--berry); border-color: var(--berry-wash); background: var(--berry-wash); }

@media (max-width: 720px) {
  .carthero { grid-template-columns: 1fr; padding: 20px 18px 8px; gap: 8px; text-align: center; }
  .carthero__sub { margin-inline: auto; }
  .carthero__art { max-width: 260px; margin-inline: auto; }
  .lineitem--rich { flex-wrap: wrap; }
  .lineitem--rich .lineitem__name { white-space: normal; }
}

/* ==========================================================================
   YelAI program: the form's four-up row, the day-by-day plan, the strip on
   the home page, and the planner rows that open something
   ========================================================================== */

.field--row4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 720px) { .field--row4 { grid-template-columns: 1fr 1fr; } }
.pv-example-badge--ai { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.pv-open {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--accent); cursor: pointer; text-decoration: none;
  transition: transform .18s var(--ease), border-color .18s var(--ease);
}
.pv-open:hover { transform: translateX(2px); border-color: var(--accent); }
.pv-open svg { width: 16px; height: 16px; }
.pv-open--khan { color: var(--amber); }

.plan-summary { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.plan-summary .btn { margin-left: auto; }
.plan-note {
  display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0;
  padding: 10px 14px; border-radius: var(--r-sm); background: var(--accent-wash); color: var(--ink); font-size: .9rem; line-height: 1.45;
}
.plan-note__mark { width: 30px; height: auto; flex: 0 0 auto; margin-top: 1px; }
.plan-days { display: grid; gap: 14px; margin-top: 14px; }
.plan-day { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); padding: 12px 14px 8px; }
.plan-day.is-today { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: 0 0 0 3px var(--accent-wash); }
.plan-day__title { font-family: var(--font-display); font-weight: 700; font-size: .96rem; margin: 0 0 6px; display: flex; align-items: center; gap: 8px; text-transform: capitalize; }
.plan-day__today { font-family: var(--font-body); font-size: .66rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); background: var(--accent-wash); padding: 2px 8px; border-radius: var(--r-pill); }
.plan-session-list { list-style: none; margin: 0; padding: 0; display: grid; }
.plan-session {
  display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--line);
}
.plan-session:first-child { border-top: 0; }
.plan-session__time { flex: 0 0 auto; font-size: .76rem; color: var(--muted); padding-left: 10px; position: relative; }
.plan-session__time::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 4px; height: 18px; border-radius: 2px; background: var(--hue); }
.plan-session__main { min-width: 0; flex: 1; display: grid; gap: 1px; }
.plan-session__title { font-weight: 600; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-session__sub { font-size: .74rem; color: var(--amber); }
.plan-open {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; padding: 6px 11px; border-radius: var(--r-pill);
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--accent); font-size: .78rem; font-weight: 700; cursor: pointer; text-decoration: none;
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.plan-open:hover { border-color: var(--accent); background: var(--accent-wash); }
.plan-open svg { width: 14px; height: 14px; }
.plan-open--khan { color: var(--amber); }
.plan-open--khan:hover { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 12%, var(--surface)); }

/* the strip on the home page, right under the hero */
.home-today { padding-block: 22px 0; }
.home-today__card { border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line)); border-radius: var(--r-lg); background: var(--surface); padding: 16px 18px 10px; box-shadow: var(--shadow-1); }
.home-today__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.home-today__mark { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-wash); flex: 0 0 auto; }
.home-today__mark svg { width: 30px; height: auto; }
.home-today__id { min-width: 0; flex: 1; }
.home-today__title { font-size: 1.1rem; margin: 0; }
.home-today__sub { color: var(--muted); font-size: .84rem; margin: 2px 0 0; text-transform: capitalize; }
@media (max-width: 720px) {
  .plan-session { flex-wrap: wrap; }
  .plan-session__main { flex-basis: 100%; order: 3; }
  .plan-open { margin-left: auto; }
}

/* ==========================================================================
   Program, take two: two pinnable lists on the home page, YelAI's daily
   advice and encouragement, its follow-up questions, per-task reminders
   ========================================================================== */

/* --- the home card: one section per pinned list ------------------------- */
.home-today__card { display: grid; gap: 16px; }
.home-plan { display: grid; gap: 8px; }
.home-plan + .home-plan { border-top: 1px solid var(--line); padding-top: 14px; }
.home-plan__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.home-plan__mark {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: 0 0 auto;
  background: color-mix(in srgb, var(--tile-hue) 14%, var(--surface)); color: var(--tile-hue);
}
.home-plan__mark svg { width: 26px; height: auto; }
.home-plan__id { min-width: 0; flex: 1; }
.home-plan__title { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; margin: 0; }
.home-plan__sub { color: var(--muted); font-size: .84rem; margin: 2px 0 0; text-transform: capitalize; }
.home-plan__x {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line);
  background: var(--surface); color: var(--muted); display: grid; place-items: center; cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.home-plan__x:hover { color: var(--berry); border-color: var(--berry); }
.home-plan__x svg { width: 15px; height: 15px; }

/* --- a row you can tick off where it stands ---------------------------- */
.plan-tick {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; cursor: pointer;
  border: 2px solid var(--line-strong); background: var(--surface); color: var(--accent-ink);
  display: grid; place-items: center; padding: 0;
  transition: background-color .16s var(--ease), border-color .16s var(--ease);
}
.plan-tick:hover { border-color: var(--accent); }
.plan-tick.is-on { background: var(--accent); border-color: var(--accent); }
.plan-tick svg { width: 14px; height: 14px; }
.plan-session.is-done .plan-session__title { text-decoration: line-through; color: var(--muted); }

/* --- YelAI's line for the day, and the one that ends it ---------------- */
.plan-advice {
  display: flex; align-items: flex-start; gap: 8px; margin: 0 0 6px;
  font-size: .86rem; line-height: 1.45; color: var(--ink-soft);
}
.plan-advice svg { width: 15px; height: 15px; flex: 0 0 auto; margin-top: 3px; color: var(--muted); }
.plan-quote {
  position: relative;
  margin: 10px 0 2px; padding: 2px 0 0 30px;
  font-family: var(--font-hand); font-weight: 500; font-size: 1.28rem; line-height: 1.25;
  color: var(--ink-soft); text-wrap: balance;
}
.plan-quote::before {
  content: "\201C"; position: absolute; left: 2px; top: -6px;
  font-family: var(--font-hand); font-size: 2.3rem; line-height: 1; color: var(--line-strong);
}

/* --- the questions YelAI still has ------------------------------------- */
.plan-ask {
  margin-top: 14px; padding: 14px 16px; border-radius: var(--r);
  border: 1px dashed color-mix(in srgb, var(--accent) 45%, var(--line)); background: var(--surface-2);
  display: grid; gap: 10px;
}
.plan-ask__head { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: .92rem; }
.plan-ask__mark { width: 30px; height: auto; flex: 0 0 auto; }
.plan-ask__q { display: grid; gap: 6px; }
.plan-ask__q p { font-size: .88rem; color: var(--ink-soft); }
.plan-ask .btn { justify-self: start; }

.plan-summary__acts { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.plan-del { color: var(--berry); border-color: color-mix(in srgb, var(--berry) 40%, var(--line-strong)); }
.plan-del:hover { color: var(--berry); border-color: var(--berry); }

/* --- the bell on a planner row ----------------------------------------- */
.pv-bell {
  flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  border: 1px solid transparent; background: none; color: var(--accent); cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.pv-bell:hover { background: var(--surface-2); }
.pv-bell svg { width: 16px; height: 16px; }
.pv-bell.is-off { color: var(--muted); opacity: .65; }
.pv-bell.is-off::after {
  content: ""; position: absolute; width: 20px; height: 1.5px; background: currentColor; transform: rotate(-45deg);
}
.pv-bell { position: relative; }

@media (max-width: 720px) {
  .plan-summary__acts { margin-left: 0; width: 100%; }
  .plan-summary__acts .btn { flex: 1 1 auto; }
}

/* a typed minute field: the number, then its unit, inside one control */
.minfield { display: flex; align-items: center; gap: 8px; padding: 0 13px 0 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface-2); transition: border-color .16s var(--ease), background-color .16s var(--ease); }
.minfield:focus-within { border-color: var(--line-strong); background: var(--surface); }
.minfield input { flex: 1; min-width: 0; width: 100%; padding: 11px 0 11px 13px; border: 0; background: none; font: inherit; color: inherit; outline: none; font-variant-numeric: tabular-nums; }
.minfield span { flex: 0 0 auto; font-size: .82rem; color: var(--muted); }


/* --- "Build one with YelAI": the mark itself, in white on the gradient -- */
.planfab--yel > .planfab__mark { width: 40px; height: 40px; padding: 7px 8px; border-radius: 50%; background: rgba(255,255,255,.18); }
.planfab--yel:hover > .planfab__mark { background: rgba(255,255,255,.28); }
@media (max-width: 720px) { .planfab--yel > .planfab__mark { width: 34px; height: 34px; padding: 6px; } }


/* --- chips the reader wrote themselves, and the one that adds them ----- */
.chip--mine { display: inline-flex; align-items: center; gap: 4px; padding-right: 5px; background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.chip__x { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; opacity: .7; }
.chip__x:hover { opacity: 1; background: color-mix(in srgb, var(--accent) 18%, transparent); }
.chip__x svg { width: 12px; height: 12px; }
.chip--add { display: inline-flex; align-items: center; gap: 5px; border-style: dashed; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line-strong)); }
.chip--add:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.chip--add svg { width: 14px; height: 14px; }

/* --- a plan row wears its category: the planner's own colour and glyph -- */
.plan-session__glyph {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--hue) 16%, var(--surface)); color: var(--hue);
}
.plan-session__glyph svg { width: 17px; height: 17px; }
.plan-session.is-done .plan-session__glyph { opacity: .55; }
.plan-edit {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid transparent; background: none; color: var(--muted); cursor: pointer;
  transition: color .16s var(--ease), background-color .16s var(--ease);
}
.plan-edit:hover { color: var(--ink); background: var(--surface-2); }
.plan-edit svg { width: 16px; height: 16px; }
.plan-day__title { justify-content: flex-start; }
.plan-add {
  margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-pill); border: 1px dashed var(--line-strong);
  background: none; color: var(--muted); font-family: var(--font-body); font-size: .76rem; font-weight: 700; cursor: pointer;
  transition: color .16s var(--ease), border-color .16s var(--ease);
}
.plan-add:hover { color: var(--accent); border-color: var(--accent); }
.plan-add svg { width: 13px; height: 13px; }
@media (max-width: 720px) {
  .plan-session__glyph { width: 26px; height: 26px; border-radius: 9px; }
  .plan-session__glyph svg { width: 15px; height: 15px; }
}

/* ==========================================================================
   ExamRun — the new question-solving experience (draft, features/examrun.js)
   A pinned title strip, then two columns: the Question Solver on the left
   (steps + a half-transparent ask bar), the question in the middle with no
   box around it, the ink bar under it. One canvas covers the whole run
   page — everything but the site header and sidebar. Wrong picks are blue,
   never red.
   ========================================================================== */

.xr__draft { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 3px 9px; border-radius: var(--r-pill); background: var(--amber); color: #1C2033; font: 600 .68rem var(--font-body); letter-spacing: .04em; text-transform: uppercase; }
.xr--setup h3 { margin: 18px 0 8px; font-size: .95rem; }
.xr--setup h4 { margin: 14px 0 6px; font-size: .85rem; color: var(--muted); }
.xr__switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; color: var(--ink-soft); font-size: .9rem; max-width: 560px; }
.xr__switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.xr__knob { position: relative; flex: 0 0 auto; width: 42px; height: 24px; border-radius: var(--r-pill); background: var(--line-strong); transition: background-color .18s var(--ease); }
.xr__knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .18s var(--ease-out-back); }
.xr__switch input:checked + .xr__knob { background: var(--accent); }
.xr__switch input:checked + .xr__knob::after { transform: translateX(18px); }
.xr__switch input:focus-visible + .xr__knob { box-shadow: var(--ring); }
.xr__minutes { margin-top: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.xr__minutes .chip svg { width: 14px; height: 14px; vertical-align: -2px; }
.xr__chipinput { display: inline-flex; align-items: center; gap: 6px; }
.xr__chipinput input { width: 58px; padding: 3px 6px; border: 1px solid var(--line-strong); border-radius: var(--r-xs); background: var(--surface); font: inherit; color: var(--ink); }

/* ---- run ---- */
.xr--run { position: relative; padding-bottom: 40px; min-height: calc(100vh - var(--header-h)); }
.xr__top {
  position: sticky; top: var(--header-h); z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px;
  padding: 10px 20px; margin-bottom: 22px;
  background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.xr__top .crumb { margin: 0; justify-self: start; }
.xr__titles { text-align: center; display: flex; flex-direction: column; line-height: 1.2; }
.xr__titles b { font: 700 1rem var(--font-display); }
.xr__titles span { font-size: .8rem; color: var(--muted); font-weight: 600; }
.xr__badge { justify-self: end; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 10px; border-radius: var(--r-pill); background: var(--mint-soft); color: var(--navy); font-size: .74rem; font-weight: 700; }
.xr__badge.is-exam { background: var(--accent-wash); color: var(--accent); }
.xr__badge em { font-style: normal; opacity: .7; }

.xr__grid {
  width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); gap: 32px; align-items: start;
}
.xr__left { position: sticky; top: calc(var(--header-h) + 78px); }
.xr__center { min-width: 0; }

.xr__chrono { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 12px; padding: 6px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.xr__chrono svg { width: 16px; height: 16px; align-self: center; color: var(--muted); }
.xr__chrono b { font: 700 1.15rem var(--font-mono); }
.xr__chrono small { color: var(--muted); font-size: .72rem; }
.xr__chrono.is-low { border-color: var(--amber); background: color-mix(in srgb, var(--amber) 14%, var(--surface)); }
.xr__chrono.is-low b { color: var(--amber); }

/* the question itself — no box, just text on the page */
.xr__card { padding: 4px 0 0; }
.xr__texthead { margin-bottom: 2px !important; font-weight: 800; }
.xr__ul { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.xr__qhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.xr__qmeta { display: inline-flex; align-items: center; gap: 10px; }
.xr__qual { padding: 2px 8px; border: 1px dashed var(--line-strong); border-radius: var(--r-pill); color: var(--ink-soft); font-size: .7rem; font-weight: 700; white-space: nowrap; }
.xr__qno { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-wash); color: var(--accent); font: 700 .85rem var(--font-display); }
.xr__diff { display: inline-flex; align-items: center; gap: 3px; }
.xr__diff i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); }
.xr__diff i.is-on { background: var(--accent); }
.xr__diff small { margin-left: 6px; color: var(--muted); font-size: .72rem; font-weight: 600; }
.xr__q { font-size: 1.18rem; font-weight: 600; line-height: 1.5; margin: 0 0 18px; }
/* SAT Reading/Writing stimulus — sits above the prompt, visually distinct
   (panel, serif-ish line-height) from the bold question text below it. */
.xr__passage { padding: 16px 18px; margin-bottom: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); }
.xr__passage p { font-size: .96rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 10px; }
.xr__passage p:last-child { margin-bottom: 0; }
.xr__opts { display: flex; flex-direction: column; gap: 9px; }
.xr__opt {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface);
  text-align: left; font-weight: 600; cursor: pointer; color: var(--ink);
  transition: border-color .16s var(--ease), background-color .16s var(--ease);
}
.xr__opt:hover:not(:disabled) { border-color: var(--accent); }
.xr__opt:disabled { cursor: default; }
.xr__letter { display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--line-strong); font-size: .78rem; }
.xr__opt.is-picked { border-color: var(--accent); background: var(--accent-wash); }
.xr__opt.is-picked .xr__letter { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.xr__opt.is-right { border-color: #0F2D21; background: color-mix(in srgb, #0F2D21 14%, var(--surface)); }
.xr__opt.is-right .xr__letter { background: #0F2D21; border-color: #0F2D21; color: #fff; }
/* a miss is blue — softer than red, still unmistakable */
.xr__opt.is-miss { border-color: var(--blue); background: color-mix(in srgb, var(--blue) 12%, var(--surface)); }
.xr__opt.is-miss .xr__letter { background: var(--blue); border-color: var(--blue); color: #fff; }

/* ---- under the question ---- */
.xr__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.xr__mainrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.xr__nav { display: inline-flex; align-items: center; gap: 8px; }
.xr__navbtn { display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--ink-soft); cursor: pointer; transition: border-color .16s var(--ease), color .16s var(--ease), transform .16s var(--ease-out-back); }
.xr__navbtn svg { width: 20px; height: 20px; }
.xr__navbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.xr__navbtn:disabled { opacity: .35; cursor: default; }
.xr__check { position: relative; }
.xr__praise, .xr__miss { display: inline-flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; animation: rise .35s var(--ease-out-back); }
.xr__praise { color: #0F2D21; font-family: var(--font-display); font-size: 1.05rem; }
.xr__miss { color: var(--blue); font-weight: 600; }
.xr__praise svg, .xr__miss svg { width: 18px; height: 18px; }
.xr__actions > .btn { align-self: flex-start; }
.xr__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xr__favbtn {
  display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 20px;
  border: 1.5px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface);
  font: 700 .95rem var(--font-body); color: var(--ink); cursor: pointer;
  transition: border-color .16s var(--ease), transform .16s var(--ease-out-back), background-color .16s var(--ease);
}
.xr__favbtn svg { width: 24px; height: 24px; }
.xr__favbtn:hover { border-color: var(--d-language); transform: translateY(-1px); }
.xr__favbtn.is-on { border-color: var(--d-language); color: var(--d-language); background: color-mix(in srgb, var(--d-language) 10%, var(--surface)); }
.xr__row .iconbtn { border-color: var(--line-strong); }
.xr__row .iconbtn.is-on { background: var(--accent-wash); border-color: var(--accent); color: var(--accent); }
.xr__pop { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface-2); max-width: 520px; }
/* rises only when it opens — every later re-render of the page keeps it still */
.xr__pop.is-new { animation: rise .25s var(--ease); }
.xr__pop b { display: block; margin-bottom: 6px; }
.xr__pop p { margin: 0 0 6px; font-size: .9rem; }
.xr__rprows { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; }
.xr__pop textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font: inherit; color: var(--ink); resize: vertical; margin-bottom: 8px; }

/* ---- left column: the Question Solver ---- */
.xr__solver { display: flex; flex-direction: column; gap: 12px; }
.xr__solverhead { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: .8rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.xr__solverhead svg { width: 16px; height: 16px; }
.xr__solvernote { display: flex; align-items: flex-start; gap: 10px; margin: 0; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.xr__solvernote svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.xr__steps { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 10px; font-size: .95rem; line-height: 1.55; animation: rise .3s var(--ease-out-back); }
.xr__steps li::marker { color: var(--accent); font-weight: 700; }
.xr__solverans { padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2); font-size: .9rem; line-height: 1.55; }
.xr__solverans.is-busy { opacity: .8; }
.xr__solverans p { margin: 0; }
.xr__note { color: var(--muted); font-size: .8rem; margin-bottom: 6px !important; }
/* the ask bar sits quietly until it is needed */
.xr__solverbar { display: flex; gap: 6px; opacity: .55; transition: opacity .18s var(--ease); }
.xr__solverbar:hover, .xr__solverbar:focus-within { opacity: 1; }
.xr__solverbar input { flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid var(--line-strong); border-radius: var(--r-pill); background: var(--surface); font: inherit; color: var(--ink); }
.xr__solverbar input:disabled { background: var(--surface-2); }
.xr__send { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--accent); color: var(--accent-ink); cursor: pointer; }
.xr__send:disabled { opacity: .5; cursor: default; }
.xr__send svg { width: 18px; height: 18px; }

.xr__confetti { position: fixed; inset: 0; z-index: 999; pointer-events: none; }

/* ==========================================================================
   Ink — the shared pen layer and its bar (features/ink.js), used by the
   test runner and the SAT Learn lessons alike.
   ========================================================================== */

.ink-surface { position: relative; }
.ink-layer { position: absolute; left: 0; top: 0; pointer-events: none; -webkit-tap-highlight-color: transparent; }
.ink-layer--base { z-index: 4; }
/* A fingertip scrolls the page natively through the live layer (pan only:
   no pinch or double-tap zoom on paper); Ink cancels the touch events of a
   stylus, a palm and — with "draw with finger" on — every finger. While a
   pen is over the surface, or fingers draw, the layer takes every contact
   so no browser can turn a stroke into a scroll. */
.ink-layer--live { z-index: 5; touch-action: pan-x pan-y; }
.ink-surface.is-pen > .ink-layer--live, .ink-surface.is-finger > .ink-layer--live { touch-action: none; }
.ink-surface > .ink-layer--live { pointer-events: auto; cursor: crosshair; }
/* A finger dragging the page (and the fling after it) scrolls many times a
   second; the site's smooth scrolling would restart on each step and crawl —
   Safari especially — so the page scrolls instantly while Ink drives it. */
html.ink-panning { scroll-behavior: auto !important; }
.ink-surface[data-ink-tool="eraser"] > .ink-layer--live { cursor: cell; }
.ink-surface[data-ink-tool="lasso"] > .ink-layer--live { cursor: default; }

/* While a drawing tool is held the page is paper, not a document: no caret,
   no selection handles, no callout, no image drag. Fields stay typeable. */
html.ink-drawing .ink-surface,
html.ink-drawing .ink-surface * {
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none; -webkit-user-drag: none;
}
html.ink-drawing .ink-surface :is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; }

.ink-lasso { position: absolute; z-index: 6; display: flex; gap: 2px; padding: 4px; border-radius: var(--r-sm); background: var(--ink); box-shadow: var(--shadow-2); }
.ink-lasso[hidden] { display: none; }
.ink-lasso button { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 0; border-radius: var(--r-xs); background: transparent; color: var(--bg); font: 600 .76rem var(--font-body); cursor: pointer; }
.ink-lasso button:hover { background: rgba(255, 255, 255, .14); }
.ink-lasso svg { width: 14px; height: 14px; }

/* The bar docks to an edge: vertical on the left/right, horizontal on the
   top/bottom. Position is inline left/top from Ink's placeBar(). */
.ink-bar { position: fixed; left: 0; top: 0; z-index: 51; -webkit-user-select: none; user-select: none; }   /* above the calculator window, so its buttons stay reachable */
.ink-bar.is-snapping { transition: left .44s cubic-bezier(.3, 1.45, .45, 1), top .44s cubic-bezier(.3, 1.45, .45, 1); }
/* catching onto / pulling off an edge mid-drag: a quick magnetic glide */
.ink-bar.is-gliding { transition: left .22s cubic-bezier(.3, 1.45, .45, 1), top .22s cubic-bezier(.3, 1.45, .45, 1); }
.ink-bar__tools {
  display: flex; align-items: center; gap: 2px; padding: 6px;
  max-width: calc(100vw - 24px); max-height: calc(100dvh - 96px); overflow: auto; scrollbar-width: none;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: var(--shadow-2);
  scale: var(--sx, 1) var(--sy, 1);
  transition: box-shadow .16s var(--ease), scale .5s cubic-bezier(.3, 1.45, .45, 1);
}
.ink-bar__tools::-webkit-scrollbar { display: none; }
.ink-bar.is-vertical .ink-bar__tools { flex-direction: column; }
/* while dragging the pill follows the pointer's speed closely (short
   transition); letting go springs it back to round */
.ink-bar.is-dragging .ink-bar__tools { box-shadow: var(--shadow-3); transition: box-shadow .16s var(--ease), scale .12s linear; }
/* mid-morph the buttons fly across the pill's changing outline */
.ink-bar__tools.is-morphing { overflow: visible; }
.ink-bar__grip {
  display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 auto;
  border: 0; border-radius: var(--r-xs); background: transparent; color: var(--muted);
  cursor: grab; touch-action: none;
}
.ink-bar__grip:hover { background: var(--surface-2); color: var(--ink); }
.ink-bar.is-dragging .ink-bar__grip { cursor: grabbing; color: var(--accent); }
.ink-bar__grip svg { width: 18px; height: 18px; }
.ink-bar:not(.is-vertical) .ink-bar__grip svg { transform: rotate(90deg); }
.ink-tool {
  display: grid; place-items: center; flex: 0 0 auto; width: 42px; height: 42px;
  border: 0; border-radius: 50%; background: transparent; color: var(--ink-soft);
  cursor: pointer; touch-action: manipulation;
  transition: background-color .14s var(--ease), color .14s var(--ease);
}
.ink-tool svg { width: 21px; height: 21px; }
.ink-tool:hover { background: var(--surface-2); color: var(--ink); }
.ink-tool.is-on { background: var(--accent); color: var(--accent-ink); }
.ink-tool:focus-visible, .ink-bar__grip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ink-bar__dot { flex: 0 0 auto; width: 12px; height: 12px; margin: 0 4px 0 2px; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 2px var(--surface), 0 0 0 3px var(--line-strong); }
.ink-bar.is-vertical .ink-bar__dot { margin: 2px 0; }
.ink-bar__sep { flex: 0 0 auto; width: 1px; height: 24px; background: var(--line); margin: 0 4px; }
.ink-bar.is-vertical .ink-bar__sep { width: 24px; height: 1px; margin: 4px 0; }

/* Options open toward the page, away from the edge the bar sits on. */
.ink-pop {
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 10px;
  width: max-content; max-width: min(300px, calc(100vw - 32px)); padding: 12px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-2);
}
/* rises when it opens; picking a width or colour inside it rebuilds the bar but must not replay this */
.ink-pop.is-new { animation: rise .2s var(--ease-out-back); }
.ink-bar[data-edge="right"] .ink-pop { right: calc(100% + 10px); top: 50%; translate: 0 -50%; }
.ink-bar[data-edge="left"] .ink-pop { left: calc(100% + 10px); top: 50%; translate: 0 -50%; }
.ink-bar[data-edge="bottom"] .ink-pop { bottom: calc(100% + 10px); left: 50%; translate: -50% 0; }
.ink-bar[data-edge="top"] .ink-pop { top: calc(100% + 10px); left: 50%; translate: -50% 0; }
.ink-pop__row { display: flex; gap: 6px; }
.ink-width { display: grid; place-items: center; width: 44px; height: 36px; border: 0; border-radius: var(--r-sm); background: transparent; cursor: pointer; }
.ink-width i { width: var(--d); height: var(--d); border-radius: 50%; background: var(--c); }
.ink-width:hover { background: var(--surface-2); }
.ink-width.is-on { background: var(--accent-wash); box-shadow: inset 0 0 0 1.5px var(--accent); }
.ink-swatch { width: 26px; height: 26px; border: 2px solid transparent; border-radius: 50%; background: var(--c); cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); transition: transform .14s var(--ease-out-back); }
.ink-swatch.is-on { border-color: var(--ink); transform: scale(1.15); }
.ink-seg { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--surface-2); }
.ink-seg button { padding: 6px 14px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--muted); font: 600 .82rem var(--font-body); cursor: pointer; }
.ink-seg button.is-on { background: var(--surface); color: var(--ink); box-shadow: var(--shadow-1); }
.ink-switch { display: flex; align-items: flex-start; gap: 12px; max-width: 280px; cursor: pointer; color: var(--ink-soft); font-size: .86rem; }
.ink-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.ink-switch__knob { position: relative; flex: 0 0 auto; width: 42px; height: 24px; margin-top: 1px; border-radius: var(--r-pill); background: var(--line-strong); transition: background-color .18s var(--ease); }
.ink-switch__knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-1); transition: transform .18s var(--ease-out-back); }
.ink-switch input:checked + .ink-switch__knob { background: var(--accent); }
.ink-switch input:checked + .ink-switch__knob::after { transform: translateX(18px); }
.ink-switch input:focus-visible + .ink-switch__knob { box-shadow: var(--ring); }
.ink-switch__text { display: grid; gap: 3px; line-height: 1.35; }
.ink-switch__text b { color: var(--ink); font-size: .9rem; }
.ink-switch__text small { color: var(--muted); font-size: .78rem; }
.ink-switch--sm { align-items: center; font-size: .8rem; }
.ink-switch--sm .ink-switch__knob { width: 32px; height: 18px; margin-top: 0; }
.ink-switch--sm .ink-switch__knob::after { width: 14px; height: 14px; top: 2px; left: 2px; }
.ink-switch--sm input:checked + .ink-switch__knob::after { transform: translateX(14px); }

/* ==========================================================================
   Calculator — a floating window opened from the pen bar (features/calc.js)
   Every colour comes from the window's own theme (--calc-*), chosen in its
   settings; "lyeli" follows the site's light/dark colours.
   ========================================================================== */
.calc, .calc__themeprev {
  --calc-bg:
    radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--coral) 14%, transparent), transparent 55%),
    radial-gradient(120% 90% at 0% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 55%),
    var(--surface);
  --calc-line: var(--line); --calc-ink: var(--ink); --calc-ink-soft: var(--ink-soft); --calc-muted: var(--muted);
  --calc-tabs: color-mix(in srgb, var(--ink) 7%, transparent); --calc-tab-on: var(--surface);
  --calc-disp: var(--surface); --calc-disp-ink: var(--ink); --calc-disp-soft: var(--muted); --calc-disp-line: var(--line-strong);
  --calc-key: linear-gradient(180deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 90%, var(--line)) 100%); --calc-key-ink: var(--ink); --calc-key-edge: var(--line-strong);
  --calc-fn: linear-gradient(180deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), color-mix(in srgb, var(--accent) 18%, var(--surface))); --calc-fn-ink: color-mix(in srgb, var(--accent) 70%, var(--ink));
  --calc-op: linear-gradient(160deg, var(--accent), color-mix(in srgb, var(--accent) 65%, var(--blue))); --calc-op-edge: color-mix(in srgb, var(--accent) 55%, #000);
  --calc-eq: linear-gradient(160deg, var(--coral), var(--amber)); --calc-eq-edge: color-mix(in srgb, var(--coral) 55%, #000);
  --calc-warn: var(--coral); --calc-accent: var(--accent); --calc-on-ink: var(--accent-ink);
  --calc-plot: var(--surface); --calc-grid: var(--line); --calc-grid-strong: var(--line-strong); --calc-axis: var(--ink-soft); --calc-label: var(--muted);
  --calc-sheet: var(--surface);
}
.calc[data-theme="midnight"], .calc__themeprev[data-theme="midnight"] {
  --calc-bg: linear-gradient(160deg, #0f172a, #111827 60%, #1e1b4b);
  --calc-line: #273449; --calc-ink: #f1f5f9; --calc-ink-soft: #cbd5e1; --calc-muted: #94a3b8;
  --calc-tabs: rgba(255,255,255,.08); --calc-tab-on: #1f2a44;
  --calc-disp: #05070d; --calc-disp-ink: #ffffff; --calc-disp-soft: #94a3b8; --calc-disp-line: #273449;
  --calc-key: linear-gradient(180deg, #1e293b, #172033); --calc-key-ink: #e2e8f0; --calc-key-edge: #0b1220;
  --calc-fn: linear-gradient(180deg, #1d3b4f, #15303f); --calc-fn-ink: #7dd3fc;
  --calc-op: linear-gradient(160deg, #0ea5e9, #2563eb); --calc-op-edge: #0c3b73;
  --calc-eq: linear-gradient(160deg, #f43f5e, #f59e0b); --calc-eq-edge: #7a1f2b;
  --calc-warn: #fb7185; --calc-accent: #38bdf8; --calc-on-ink: #04121f;
  --calc-plot: #0b1220; --calc-grid: #1e2a3d; --calc-grid-strong: #2b3b55; --calc-axis: #cbd5e1; --calc-label: #94a3b8;
  --calc-sheet: #111827;
}
.calc[data-theme="paper"], .calc__themeprev[data-theme="paper"] {
  --calc-bg: linear-gradient(160deg, #fffaf0, #fdf3e3);
  --calc-line: #eadfc9; --calc-ink: #2b2418; --calc-ink-soft: #4a3f2f; --calc-muted: #8a7b64;
  --calc-tabs: rgba(80,60,20,.08); --calc-tab-on: #fffdf8;
  --calc-disp: #fffdf8; --calc-disp-ink: #1f1a12; --calc-disp-soft: #8a7b64; --calc-disp-line: #e0d2b6;
  --calc-key: linear-gradient(180deg, #fffdf8, #f6ecd9); --calc-key-ink: #2b2418; --calc-key-edge: #d9c9a9;
  --calc-fn: linear-gradient(180deg, #f3e7cf, #ead8b5); --calc-fn-ink: #7a5a1e;
  --calc-op: linear-gradient(160deg, #c2410c, #e36414); --calc-op-edge: #7a2a05;
  --calc-eq: linear-gradient(160deg, #15803d, #4ade80); --calc-eq-edge: #0c4a24;
  --calc-warn: #b91c1c; --calc-accent: #c2410c; --calc-on-ink: #fff;
  --calc-plot: #fffdf8; --calc-grid: #efe5d2; --calc-grid-strong: #dccbaa; --calc-axis: #5c4d35; --calc-label: #8a7b64;
  --calc-sheet: #fffaf0;
}
.calc[data-theme="reef"], .calc__themeprev[data-theme="reef"] {
  --calc-bg: linear-gradient(160deg, #e0f7f4, #fdf1e7 55%, #ffe4df);
  --calc-line: #cfe9e4; --calc-ink: #0f3b3a; --calc-ink-soft: #2a5a58; --calc-muted: #5f8584;
  --calc-tabs: rgba(14,140,125,.10); --calc-tab-on: #ffffff;
  --calc-disp: #0b2f33; --calc-disp-ink: #ffffff; --calc-disp-soft: #9fd3cc; --calc-disp-line: #0b2f33;
  --calc-key: linear-gradient(180deg, #ffffff, #eef9f6); --calc-key-ink: #0f3b3a; --calc-key-edge: #bfe2db;
  --calc-fn: linear-gradient(180deg, #d9f3ee, #bfe9e1); --calc-fn-ink: #0e8c7d;
  --calc-op: linear-gradient(160deg, #0e8c7d, #14b8a6); --calc-op-edge: #075e54;
  --calc-eq: linear-gradient(160deg, #ff6b57, #ffb347); --calc-eq-edge: #9c2f1f;
  --calc-warn: #e0434c; --calc-accent: #0e8c7d; --calc-on-ink: #fff;
  --calc-plot: #ffffff; --calc-grid: #e3f2ef; --calc-grid-strong: #c4e4de; --calc-axis: #2a5a58; --calc-label: #5f8584;
  --calc-sheet: #f4fbf9;
}
.calc[data-theme="lavender"], .calc__themeprev[data-theme="lavender"] {
  --calc-bg: linear-gradient(160deg, #f3eefe, #ece4ff 60%, #fbe7f3);
  --calc-line: #e2d8f8; --calc-ink: #2e1f5e; --calc-ink-soft: #4b3a84; --calc-muted: #7f6ea8;
  --calc-tabs: rgba(109,74,255,.10); --calc-tab-on: #ffffff;
  --calc-disp: #2a1b5c; --calc-disp-ink: #ffffff; --calc-disp-soft: #c7b8f5; --calc-disp-line: #2a1b5c;
  --calc-key: linear-gradient(180deg, #ffffff, #f3eefe); --calc-key-ink: #2e1f5e; --calc-key-edge: #d4c6f2;
  --calc-fn: linear-gradient(180deg, #e6dcff, #d9ccff); --calc-fn-ink: #5b3fd6;
  --calc-op: linear-gradient(160deg, #6d4aff, #9b6bff); --calc-op-edge: #3c23a3;
  --calc-eq: linear-gradient(160deg, #e0409a, #ff7ab8); --calc-eq-edge: #8c1f5c;
  --calc-warn: #d63f7a; --calc-accent: #6d4aff; --calc-on-ink: #fff;
  --calc-plot: #ffffff; --calc-grid: #ece6f8; --calc-grid-strong: #d8ccf0; --calc-axis: #4b3a84; --calc-label: #7f6ea8;
  --calc-sheet: #f7f3ff;
}
.calc[data-theme="forest"], .calc__themeprev[data-theme="forest"] {
  --calc-bg: linear-gradient(160deg, #0f2a1f, #14362a 60%, #1c3b2a);
  --calc-line: #24503c; --calc-ink: #ecfdf3; --calc-ink-soft: #bfe3cf; --calc-muted: #86b39b;
  --calc-tabs: rgba(255,255,255,.08); --calc-tab-on: #1f4a37;
  --calc-disp: #06130d; --calc-disp-ink: #f0fff6; --calc-disp-soft: #86b39b; --calc-disp-line: #24503c;
  --calc-key: linear-gradient(180deg, #1b4433, #163a2b); --calc-key-ink: #e6f7ec; --calc-key-edge: #0a2218;
  --calc-fn: linear-gradient(180deg, #245440, #1c4634); --calc-fn-ink: #9ae6b4;
  --calc-op: linear-gradient(160deg, #16a34a, #22c55e); --calc-op-edge: #0b4a23;
  --calc-eq: linear-gradient(160deg, #f59e0b, #fbbf24); --calc-eq-edge: #7a4b03;
  --calc-warn: #fca5a5; --calc-accent: #4ade80; --calc-on-ink: #04150b;
  --calc-plot: #0b1f16; --calc-grid: #1b3b2d; --calc-grid-strong: #2a553f; --calc-axis: #bfe3cf; --calc-label: #86b39b;
  --calc-sheet: #11301f;
}

.calc {
  position: fixed; left: 0; top: 0; z-index: 50;   /* over the sidebar (45), under the pen bar */
  display: flex; flex-direction: column;
  width: 400px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 24px);
  border: 1px solid var(--calc-line); border-radius: 24px;
  background: var(--calc-bg); color: var(--calc-ink);
  box-shadow: var(--shadow-3);
  -webkit-user-select: none; user-select: none;
  animation: rise .24s var(--ease-out-back);
}
.calc[hidden] { display: none; }
.calc.is-morph { overflow: hidden; }   /* mid mode-switch the box is animated by hand; nothing may spill */
.calc__info.is-off { opacity: .3; pointer-events: none; }
/* the site's soft scrollbar on everything that scrolls inside the window */
.calc__body, .calc__flist, .calc__sheet, .calc__anout { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--calc-muted) 45%, transparent) transparent; }
.calc__body::-webkit-scrollbar, .calc__flist::-webkit-scrollbar, .calc__sheet::-webkit-scrollbar, .calc__anout::-webkit-scrollbar { width: 6px; height: 6px; }
.calc__body::-webkit-scrollbar-track, .calc__flist::-webkit-scrollbar-track, .calc__sheet::-webkit-scrollbar-track, .calc__anout::-webkit-scrollbar-track { background: transparent; }
.calc__body::-webkit-scrollbar-thumb, .calc__flist::-webkit-scrollbar-thumb, .calc__sheet::-webkit-scrollbar-thumb, .calc__anout::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--calc-muted) 45%, transparent); border-radius: 999px; }
.calc__body::-webkit-scrollbar-thumb:hover, .calc__flist::-webkit-scrollbar-thumb:hover, .calc__sheet::-webkit-scrollbar-thumb:hover, .calc__anout::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--calc-muted) 65%, transparent); }
.calc--basic { width: 440px; }   /* wide enough for the tabs and the four controls on one row */
.calc--sci { width: 480px; }
.calc--graph { width: 640px; }
.calc--form { width: 620px; }
.calc.is-dragging { box-shadow: var(--shadow-3), 0 0 0 3px color-mix(in srgb, var(--calc-accent) 25%, transparent); }
@keyframes calc-out { to { opacity: 0; transform: translateY(10px) scale(.96); } }
.calc.is-closing { animation: calc-out .18s ease-in forwards; pointer-events: none; }
.calc__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; padding: 10px 10px 8px 12px; }
.calc__modes { display: inline-flex; padding: 3px; border-radius: var(--r-pill); background: var(--calc-tabs); }
.calc__mode { padding: 5px 9px; border: 0; border-radius: var(--r-pill); background: transparent; color: var(--calc-muted); font: 700 .78rem var(--font-body); white-space: nowrap; cursor: pointer; transition: color .14s var(--ease), background-color .14s var(--ease), transform .14s var(--ease-out-back); }
.calc__mode:hover { color: var(--calc-ink); }
.calc__mode.is-on { background: var(--calc-tab-on); color: var(--calc-ink); box-shadow: var(--shadow-1); }
.calc__ctl { display: inline-flex; gap: 2px; margin-left: auto; transition: opacity .16s var(--ease); }
.calc__ctl.is-out { opacity: 0; }
.calc__ctlbtn { display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--calc-ink-soft); cursor: pointer; transition: background-color .14s var(--ease), color .14s var(--ease), transform .14s var(--ease-out-back); }
.calc__ctlbtn:hover { background: var(--calc-tabs); color: var(--calc-ink); transform: scale(1.08); }
.calc__ctlbtn.is-on { background: var(--calc-accent); color: var(--calc-on-ink); }
.calc__ctlbtn svg { width: 18px; height: 18px; }
.calc__grip { cursor: grab; touch-action: none; }
.calc.is-dragging .calc__grip { cursor: grabbing; color: var(--calc-accent); }
.calc__close:hover { background: color-mix(in srgb, var(--calc-warn) 16%, transparent); color: var(--calc-warn); }
.calc__body { padding: 0 12px 16px; overflow: auto; scrollbar-width: thin; transition: opacity .16s var(--ease), transform .16s var(--ease); }
.calc__body.is-out { opacity: 0; transform: translateY(8px); }
.calc__fx { position: absolute; inset: 0; pointer-events: none; overflow: visible; z-index: 4; }

/* resize handles: a grip in each bottom corner and a bar at the bottom
   edge, drawn in the theme's muted ink so they sit on every theme. Pulling
   one gives the mode a size of its own; the content stretches to fill it. */
.calc__rz { position: absolute; z-index: 6; display: grid; place-items: center; color: color-mix(in srgb, var(--calc-muted) 70%, transparent); touch-action: none; -webkit-tap-highlight-color: transparent; transition: color .14s var(--ease), transform .14s var(--ease-out-back); }
.calc__rz:hover, .calc__rz.is-on { color: var(--calc-accent); transform: scale(1.15); }
.calc__rz svg { width: 12px; height: 12px; }
.calc__rz--bl, .calc__rz--br { bottom: 4px; width: 22px; height: 22px; }
.calc__rz--bl { left: 4px; cursor: nesw-resize; }
.calc__rz--br { right: 4px; cursor: nwse-resize; }
.calc__rz--b { left: 50%; bottom: 0; translate: -50% 0; width: 76px; height: 14px; cursor: ns-resize; }
.calc__rz--b:hover, .calc__rz--b.is-on { transform: scaleX(1.15); }
.calc__rz--b::before { content: ""; width: 40px; height: 4px; border-radius: 2px; background: currentColor; }
.calc.is-resizing { box-shadow: var(--shadow-3), 0 0 0 3px color-mix(in srgb, var(--calc-accent) 25%, transparent); }
/* A sized box (.is-sized, see Calc.applySize) never scrolls, in no
   direction: its content follows the box. The body is a size container and
   so is every key, so the display and the key labels scale with their own
   boxes (cq units), key rows share the height and the two pads the width.
   The keypads are laid out this way at every size; the plot and the formula
   lists only once pulled (or when the screen is shorter than they are), and
   a list longer than its box still scrolls on its own — the window does not. */
.calc.is-sized .calc__body { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; overflow: hidden; container-type: size; padding-bottom: 12px; }
.calc.is-sized .calc__display { flex: 0 0 auto; min-height: 0; margin-bottom: clamp(6px, 2.2cqh, 12px); padding: clamp(6px, 1.8cqh, 10px) clamp(10px, 3cqw, 16px) clamp(7px, 2.2cqh, 12px); border-radius: clamp(12px, 4cqh, 18px); }
.calc.is-sized .calc__expr { font-size: clamp(.68rem, 3.4cqh, 1rem); }
.calc.is-sized .calc__out { font-size: clamp(1.25rem, min(7cqh, 8cqw), 2.8rem); }
.calc.is-sized .calc__pads { flex: 1 1 auto; flex-wrap: nowrap; align-items: stretch; min-height: 0; gap: clamp(5px, 1.8cqw, 10px); }
.calc.is-sized .calc__keys { min-width: 0; min-height: 0; grid-auto-rows: minmax(0, 1fr); gap: clamp(3px, 1.5cqh, 8px) clamp(3px, 1.5cqw, 8px); }
.calc.is-sized .calc__keys--4 { flex: 4 1 0; }
.calc.is-sized .calc__keys--3 { flex: 3 1 0; }
.calc.is-sized .calc__key { height: auto; min-height: 0; min-width: 0; padding: 0; container-type: size; border-radius: clamp(8px, 3cqh, 16px); }
.calc.is-sized .calc__key > span { display: block; line-height: 1; white-space: nowrap; font-size: min(36cqh, 27cqw); }
.calc.is-sized .calc__key--fn > span, .calc.is-sized .calc__key--tog > span { font-size: min(38cqh, 26cqw); }
.calc.is-sized .calc__key--op > span { font-size: min(42cqh, 30cqw); }
.calc.is-sized .calc__key--eq > span { font-size: min(44cqh, 32cqw); }
.calc.is-sized .calc__key--del > span { font-size: min(40cqh, 30cqw); }
.calc.is-sized .calc__graph { flex: 1 1 auto; min-height: 0; grid-template-columns: clamp(150px, 34cqw, 240px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
.calc.is-sized .calc__fns { min-height: 0; overflow: auto; scrollbar-width: thin; }
.calc.is-sized .calc__plot { display: flex; flex-direction: column; min-height: 120px; }
.calc.is-sized .calc__plot canvas { flex: 1 1 auto; height: auto; min-height: 0; }
.calc.is-sized .calc__form { flex: 1 1 auto; min-height: 0; grid-template-columns: clamp(160px, 36cqw, 240px) minmax(0, 1fr); grid-template-rows: minmax(0, 1fr); }
.calc.is-sized .calc__fside { min-height: 0; }
.calc.is-sized .calc__flist { flex: 1 1 auto; max-height: none; min-height: 0; }
.calc.is-sized .calc__fcard { max-height: 100%; overflow: auto; scrollbar-width: thin; gap: clamp(4px, 1.8cqh, 8px); padding: clamp(6px, 2.2cqh, 10px) 12px; }
.calc.is-sized .calc__fvars { gap: clamp(2px, 1.1cqh, 5px); }
.calc.is-sized .calc__fvar { grid-template-columns: auto minmax(0, 1fr) clamp(64px, 28%, 112px) auto; }
.calc.is-sized .calc__fvar input, .calc.is-sized .calc__feq input { padding-top: clamp(2px, 1.1cqh, 5px); padding-bottom: clamp(2px, 1.1cqh, 5px); }

/* display: light theme = light paper and dark digits, dark theme the reverse */
.calc__display {
  display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  min-height: 84px; margin-bottom: 10px; padding: 10px 14px 12px; border-radius: 18px;
  background: var(--calc-disp); color: var(--calc-disp-ink); border: 1px solid var(--calc-disp-line);
  text-align: right; box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.calc__expr { min-height: 1.3em; font: 500 .95rem var(--font-mono); color: var(--calc-disp-soft); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.calc__expr::-webkit-scrollbar { display: none; }
.calc__out { font: 700 1.95rem var(--font-display); line-height: 1.15; letter-spacing: .3px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; min-height: 1.15em; }
.calc__out::-webkit-scrollbar { display: none; }
.calc__out.is-preview { color: var(--calc-disp-soft); font-weight: 600; }
.calc__out.is-err { color: var(--calc-warn); }

/* keys */
.calc__pads { display: flex; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.calc__keys { display: grid; gap: 7px; flex: 1 1 auto; }
.calc__keys--4 { grid-template-columns: repeat(4, 1fr); min-width: 232px; }
.calc__keys--3 { grid-template-columns: repeat(3, 1fr); min-width: 168px; }
.calc__key {
  position: relative; height: 46px; border: 0; border-radius: 14px;
  font: 700 1.05rem var(--font-body); color: var(--calc-key-ink);
  background: var(--calc-key);
  box-shadow: 0 1px 0 var(--calc-key-edge), 0 2px 6px rgba(0,0,0,.06);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .14s var(--ease-out-back), box-shadow .14s var(--ease), filter .14s var(--ease);
}
.calc__key:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--calc-key-edge), 0 10px 18px rgba(0,0,0,.1); filter: brightness(1.05); }
.calc__key:active, .calc__key.is-press { transform: translateY(1px) scale(.95); box-shadow: 0 0 0 var(--calc-key-edge), inset 0 2px 6px rgba(0,0,0,.12); filter: brightness(.98); }
.calc__key:focus-visible { outline: 2px solid var(--calc-accent); outline-offset: 2px; }
.calc__key--fn, .calc__key--tog { font: 700 .86rem var(--font-mono); background: var(--calc-fn); color: var(--calc-fn-ink); }
.calc__key--tog.is-on { background: var(--calc-op); color: #fff; box-shadow: 0 1px 0 var(--calc-op-edge); }
.calc__key--op { color: #fff; background: var(--calc-op); box-shadow: 0 1px 0 var(--calc-op-edge), 0 2px 8px color-mix(in srgb, var(--calc-accent) 35%, transparent); font-size: 1.2rem; }
.calc__key--op:hover { box-shadow: 0 3px 0 var(--calc-op-edge), 0 10px 18px color-mix(in srgb, var(--calc-accent) 40%, transparent); }
.calc__key--eq { color: #fff; background: var(--calc-eq); box-shadow: 0 1px 0 var(--calc-eq-edge), 0 2px 8px color-mix(in srgb, var(--calc-warn) 35%, transparent); font-size: 1.25rem; }
.calc__key--eq:hover { box-shadow: 0 3px 0 var(--calc-eq-edge), 0 10px 18px color-mix(in srgb, var(--calc-warn) 40%, transparent); }
.calc__key--clear { color: var(--calc-warn); }
.calc__key--del { font-size: 1.15rem; }
/* anything but a digit bounces like a tapped reaction */
@keyframes calc-pop { 0% { transform: scale(1); } 30% { transform: scale(1.24) rotate(-3deg); } 60% { transform: scale(.93) rotate(2deg); } 100% { transform: scale(1); } }
.calc__key.is-pop, .calc__sym.is-pop, .calc__fbtn.is-pop { animation: calc-pop .5s cubic-bezier(.2, 1.4, .4, 1); z-index: 1; }

/* sparks that fly out of a pressed key */
.calc-spark { position: absolute; z-index: 2; translate: -50% -50%; pointer-events: none; font: 800 .95rem var(--font-display); color: var(--c); text-shadow: 0 1px 2px rgba(0,0,0,.14); animation: calc-spark .62s cubic-bezier(.18, .7, .3, 1) forwards; }
@keyframes calc-spark {
  0% { opacity: 1; transform: translate(0, 0) scale(.45) rotate(0deg); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.3) rotate(var(--rot)); }
}
.calc-spark--big { font-size: 1.45rem; animation: calc-spark-big .95s cubic-bezier(.15, .75, .3, 1) forwards; }
@keyframes calc-spark-big {
  0% { opacity: 1; transform: translate(0, 0) scale(.3) rotate(0deg); }
  35% { opacity: 1; transform: translate(calc(var(--dx) * .6), calc(var(--dy) * .6 - 22px)) scale(1.55) rotate(calc(var(--rot) * .5)); }
  100% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) + 36px)) scale(1) rotate(var(--rot)); }
}

/* graph */
.calc__graph { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 10px; }
.calc__fns { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.calc__fn { display: flex; align-items: center; gap: 6px; padding: 5px 6px 5px 9px; border: 1px solid var(--calc-line); border-radius: 12px; background: var(--calc-tab-on); transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.calc__fn:focus-within { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.calc__fndot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; background: var(--c); }
.calc__fn.is-err .calc__fndot { background: transparent; box-shadow: inset 0 0 0 2.5px var(--calc-warn); }
.calc__fny { flex: 0 0 auto; color: var(--calc-muted); font: 600 .82rem var(--font-mono); }
.calc__fn input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; padding: 4px 0; font: 600 .95rem var(--font-mono); color: var(--calc-ink); outline: none; -webkit-user-select: text; user-select: text; }
.calc__fnrm { display: grid; place-items: center; flex: 0 0 auto; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--calc-muted); cursor: pointer; }
.calc__fnrm:hover { background: color-mix(in srgb, var(--calc-warn) 14%, transparent); color: var(--calc-warn); }
.calc__fnrm svg { width: 14px; height: 14px; }
.calc__addfn { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; padding: 7px 12px 7px 9px; border: 1.5px dashed var(--calc-key-edge); border-radius: var(--r-pill); background: transparent; color: var(--calc-ink-soft); font: 700 .8rem var(--font-body); cursor: pointer; transition: border-color .14s var(--ease), color .14s var(--ease), transform .14s var(--ease-out-back); }
.calc__addfn:hover { border-color: var(--calc-accent); color: var(--calc-accent); transform: translateY(-1px); }
.calc__addfn svg { width: 16px; height: 16px; }
.calc__plot { position: relative; min-width: 0; border: 1px solid var(--calc-line); border-radius: 16px; overflow: hidden; background: var(--calc-plot); }
.calc__plot canvas { display: block; width: 100%; height: 310px; touch-action: none; cursor: grab; }
.calc__plot canvas.is-grabbing { cursor: grabbing; }
.calc__zoom { position: absolute; right: 8px; bottom: 8px; display: flex; flex-direction: column; gap: 4px; }
.calc__zoom button { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--calc-line); border-radius: 10px; background: color-mix(in srgb, var(--calc-plot) 92%, transparent); color: var(--calc-ink-soft); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: transform .14s var(--ease-out-back), color .14s var(--ease), border-color .14s var(--ease); }
.calc__zoom button:hover { color: var(--calc-accent); border-color: var(--calc-accent); transform: scale(1.08); }
.calc__zoom button.is-press { transform: scale(.92); }
.calc__zoom svg { width: 16px; height: 16px; }
.calc__trace { position: absolute; left: 8px; top: 8px; display: flex; flex-wrap: wrap; gap: 4px 10px; max-width: calc(100% - 56px); padding: 6px 10px; border: 1px solid var(--calc-line); border-radius: 10px; background: color-mix(in srgb, var(--calc-plot) 94%, transparent); font: 600 .78rem var(--font-mono); color: var(--calc-ink-soft); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.calc__trace[hidden] { display: none; }
.calc__trace b { color: var(--calc-ink); }
.calc__trace span { color: var(--c); }
.calc__symrow { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 5px; }
.calc__sym, .calc__fbtn, .calc__anbtns button, .calc__anrow button { position: relative; padding: 6px 10px; border: 0; border-radius: 10px; background: var(--calc-fn); color: var(--calc-fn-ink); font: 700 .82rem var(--font-mono); cursor: pointer; box-shadow: 0 1px 0 var(--calc-key-edge); transition: transform .14s var(--ease-out-back), box-shadow .14s var(--ease); }
.calc__sym:hover, .calc__fbtn:hover, .calc__anbtns button:hover, .calc__anrow button:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--calc-key-edge), 0 8px 14px rgba(0,0,0,.08); }
.calc__sym:active, .calc__sym.is-press, .calc__fbtn:active, .calc__fbtn.is-press, .calc__anbtns button.is-press, .calc__anrow button.is-press { transform: translateY(1px) scale(.95); box-shadow: 0 0 0 var(--calc-key-edge); }
/* analysis */
.calc__an { border: 1px solid var(--calc-line); border-radius: 12px; padding: 6px 9px; background: var(--calc-tab-on); }
.calc__an summary { cursor: pointer; font: 700 .8rem var(--font-body); color: var(--calc-ink-soft); }
.calc__anbody { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.calc__anrow { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; font: 600 .76rem var(--font-mono); color: var(--calc-muted); }
.calc__anrow input { width: 52px; padding: 4px 6px; border: 1px solid var(--calc-line); border-radius: 8px; background: var(--calc-plot); color: var(--calc-ink); font: 600 .8rem var(--font-mono); -webkit-user-select: text; user-select: text; }
.calc__anrow select { flex: 1 1 auto; min-width: 0; padding: 4px 6px; border: 1px solid var(--calc-line); border-radius: 8px; background: var(--calc-plot); color: var(--calc-ink); font: 600 .78rem var(--font-mono); }
.calc__anbtns { display: flex; flex-wrap: wrap; gap: 4px; }
.calc__anbtns button, .calc__anrow button { padding: 5px 8px; font-size: .76rem; }
.calc__anout { font: 600 .78rem var(--font-mono); color: var(--calc-ink); line-height: 1.5; max-height: 110px; overflow: auto; }
.calc__anout.is-err { color: var(--calc-warn); }

/* formulas */
.calc__form { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 10px; }
.calc__fside { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.calc__fcats { display: flex; flex-wrap: wrap; gap: 4px; }
.calc__fcat { padding: 5px 10px; border: 0; border-radius: var(--r-pill); background: var(--calc-tabs); color: var(--calc-muted); font: 700 .74rem var(--font-body); cursor: pointer; transition: color .14s var(--ease), background-color .14s var(--ease); }
.calc__fcat:hover { color: var(--calc-ink); }
.calc__fcat.is-on { background: var(--calc-accent); color: var(--calc-on-ink); }
.calc__fsearch { width: 100%; padding: 7px 10px; border: 1px solid var(--calc-line); border-radius: 10px; background: var(--calc-tab-on); color: var(--calc-ink); font: 600 .84rem var(--font-body); outline: none; -webkit-user-select: text; user-select: text; }
.calc__fsearch:focus { border-color: var(--calc-accent); }
.calc__flist { display: flex; flex-direction: column; gap: 2px; max-height: 380px; overflow: auto; padding-right: 2px; scrollbar-width: thin; }
.calc__fgroup { margin: 6px 2px 2px; font: 700 .66rem var(--font-body); letter-spacing: .07em; text-transform: uppercase; color: var(--calc-muted); }
.calc__fitem { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; padding: 6px 9px; border: 1px solid transparent; border-radius: 10px; background: transparent; color: var(--calc-ink); font: 600 .82rem var(--font-body); cursor: pointer; transition: background-color .12s var(--ease), border-color .12s var(--ease); }
.calc__fitem small { font: 600 .74rem var(--font-mono); color: var(--calc-muted); }
.calc__fitem:hover { background: var(--calc-tabs); }
.calc__fitem.is-on { background: var(--calc-fn); border-color: color-mix(in srgb, var(--calc-accent) 40%, transparent); }
.calc__fitem.is-on small { color: var(--calc-fn-ink); }
.calc__fcard { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 10px 12px; border: 1px solid var(--calc-line); border-radius: 16px; background: var(--calc-tab-on); align-self: start; }
.calc__fname { font: 700 .98rem var(--font-display); color: var(--calc-ink); }
.calc__fhint { margin: 0; font: 600 .76rem var(--font-body); color: var(--calc-muted); line-height: 1.4; }
.calc__feq { display: flex; flex-direction: column; gap: 3px; font: 700 .68rem var(--font-body); letter-spacing: .06em; text-transform: uppercase; color: var(--calc-muted); }
.calc__feq input, .calc__fvar input { padding: 7px 9px; border: 1px solid var(--calc-line); border-radius: 10px; background: var(--calc-plot); color: var(--calc-ink); font: 600 1rem var(--font-mono); outline: none; -webkit-user-select: text; user-select: text; min-width: 0; }
.calc__feq input:focus, .calc__fvar input:focus { border-color: var(--calc-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--calc-accent) 18%, transparent); }
.calc__fvars { display: flex; flex-direction: column; gap: 5px; }
.calc__fvar { display: grid; grid-template-columns: 52px minmax(0, 1fr) 112px 58px; align-items: center; gap: 6px; }
.calc__fvar b { font: 700 .95rem var(--font-mono); color: var(--calc-ink); }
.calc__fdesc { font: 600 .74rem var(--font-body); color: var(--calc-muted); line-height: 1.25; }
.calc__fvar input { font-size: .9rem; padding: 5px 8px; }
.calc__fvar em { font: 600 .74rem var(--font-mono); font-style: normal; color: var(--calc-muted); }
.calc__fvar.is-solved input { border-color: var(--calc-accent); background: color-mix(in srgb, var(--calc-accent) 14%, var(--calc-plot)); font-weight: 800; }
.calc__fact { display: flex; flex-wrap: wrap; gap: 6px; }
.calc__fbtn--solve { background: var(--calc-op); color: #fff; box-shadow: 0 1px 0 var(--calc-op-edge); padding: 7px 16px; font-size: .88rem; }
.calc__fkeep { display: inline-flex; gap: 6px; margin-left: auto; }   /* Save + New stay together, at the right */
.calc__fbtn--save { background: var(--calc-tab-on); color: var(--calc-accent); box-shadow: inset 0 0 0 1.5px var(--calc-accent); }
/* a saved custom formula: the item plus its own delete button beside it */
.calc__frow { display: flex; align-items: center; gap: 2px; }
.calc__frow .calc__fitem { flex: 1 1 auto; min-width: 0; }
.calc__frow .calc__fitem span, .calc__frow .calc__fitem small { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc__fout { min-height: 1.3em; font: 600 .9rem var(--font-mono); color: var(--calc-ink); }
.calc__fout small { color: var(--calc-muted); font-weight: 600; }
.calc__fout.is-err { color: var(--calc-warn); }

/* settings sheet */
.calc__sheet { position: absolute; left: 0; right: 0; top: var(--calc-head, 52px); bottom: 0; z-index: 3; display: flex; flex-direction: column; gap: 12px; padding: 12px 14px 14px; border-top: 1px solid var(--calc-line); border-radius: 0 0 24px 24px; background: var(--calc-sheet); color: var(--calc-ink); overflow: auto; animation: calc-sheet .22s var(--ease-out-back); }
@keyframes calc-sheet { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
.calc__sheethead { display: flex; align-items: center; justify-content: space-between; font: 700 .95rem var(--font-display); }
.calc__sheet .ink-switch { color: var(--calc-ink-soft); }
.calc__sheet .ink-switch__text b { color: var(--calc-ink); }
.calc__sheet .ink-seg { background: var(--calc-tabs); }
.calc__sheet .ink-seg button { color: var(--calc-muted); }
.calc__sheet .ink-seg button.is-on { background: var(--calc-tab-on); color: var(--calc-ink); }
.calc__setrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 700 .84rem var(--font-body); color: var(--calc-ink); }   /* a narrow window drops the control under its label */
.calc__setrow > span { flex: 0 0 84px; }
.calc__setrow input[type="range"] { flex: 1 1 auto; accent-color: var(--calc-accent); }
.calc__setrow--themes { align-items: flex-start; }
.calc__themes { display: flex; flex-wrap: wrap; gap: 6px; }
.calc__theme { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 5px; border: 2px solid transparent; border-radius: 12px; background: transparent; color: var(--calc-ink-soft); font: 600 .68rem var(--font-body); cursor: pointer; transition: border-color .14s var(--ease), transform .14s var(--ease-out-back); }
.calc__theme:hover { transform: translateY(-2px); }
.calc__theme.is-on { border-color: var(--calc-accent); }
.calc__themeprev { position: relative; display: block; width: 58px; height: 40px; border-radius: 9px; border: 1px solid var(--calc-line); background: var(--calc-bg); overflow: hidden; }
.calc__themeprev b { position: absolute; left: 6px; right: 6px; top: 6px; height: 12px; border-radius: 4px; background: var(--calc-disp); border: 1px solid var(--calc-disp-line); }
.calc__themeprev em { position: absolute; left: 6px; bottom: 6px; width: 22px; height: 10px; border-radius: 3px; background: var(--calc-op); }
.calc__themeprev u { position: absolute; right: 6px; bottom: 6px; width: 16px; height: 10px; border-radius: 3px; background: var(--calc-eq); text-decoration: none; }

/* guided tour */
.calc__coach { position: absolute; inset: 0; z-index: 5; border-radius: inherit; overflow: hidden; pointer-events: none; }
.calc__coach[hidden] { display: none; }
.calc__ring { position: absolute; border-radius: 14px; box-shadow: 0 0 0 3px var(--calc-accent), 0 0 0 200vmax rgba(15, 23, 42, .34); transition: left .34s var(--ease-out-back), top .34s var(--ease-out-back), width .34s var(--ease-out-back), height .34s var(--ease-out-back); }
.calc__bubble { position: absolute; padding: 10px 12px 8px; border: 1px solid var(--calc-line); border-radius: 14px; background: var(--calc-sheet); color: var(--calc-ink); box-shadow: var(--shadow-3); pointer-events: auto; font: 500 .84rem var(--font-body); line-height: 1.45; transition: left .34s var(--ease-out-back), top .34s var(--ease-out-back); animation: rise .22s var(--ease-out-back); }
.calc__bubble.is-first { transition: none; }
.calc__bubtext { color: var(--calc-ink); }
.calc__bubnav { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.calc__bubstep { margin-right: auto; font: 700 .72rem var(--font-mono); color: var(--calc-muted); }
.calc__bubnav button { padding: 5px 11px; border: 0; border-radius: var(--r-pill); background: var(--calc-tabs); color: var(--calc-ink); font: 700 .76rem var(--font-body); cursor: pointer; }
.calc__bubnav button:disabled { opacity: .4; cursor: default; }
.calc__bubnav [data-calc="tourNext"] { background: var(--calc-accent); color: var(--calc-on-ink); }
.calc__bubarrow { position: absolute; width: 12px; height: 12px; background: var(--calc-sheet); border-left: 1px solid var(--calc-line); border-top: 1px solid var(--calc-line); }
.calc__bubble[data-side="bottom"] .calc__bubarrow { top: -7px; transform: rotate(45deg); }
.calc__bubble[data-side="top"] .calc__bubarrow { bottom: -7px; transform: rotate(225deg); }
.calc__bubble[data-side="none"] .calc__bubarrow { display: none; }

@media (max-width: 640px) {
  .calc, .calc--sci, .calc--graph, .calc--form { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto !important; height: auto !important; max-height: min(78dvh, 640px); }
  .calc__grip, .calc__rz { display: none; }   /* a bottom sheet is neither moved nor resized */
  .calc__graph, .calc__form { grid-template-columns: 1fr; }
  .calc__plot canvas { height: 230px; }
  .calc__flist { max-height: 200px; }
  .calc__key { height: 42px; }
  .calc__fvar { grid-template-columns: 44px minmax(0, 1fr) 96px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .calc, .calc__bubble { animation: none; }
  .calc-spark { display: none; }
}

/* Content keeps clear of wherever the bar is docked. */
@media (min-width: 961px) {
  body[data-ink-dock="right"] .xr__grid { padding-right: 88px; }
  body[data-ink-dock="left"] .xr__grid { padding-left: 88px; }
}
body[data-ink-dock="bottom"] .ink-surface { padding-bottom: 96px; }

@media (max-width: 640px) {
  .ink-bar__tools { gap: 0; padding: 4px; }
  .ink-tool { width: 36px; height: 36px; }
  .ink-tool svg { width: 19px; height: 19px; }
  .ink-bar__grip { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .ink-pop { animation: none; }
  .ink-bar.is-snapping { transition: none; }
}

/* ---- results ---- */
.xr__results { display: flex; flex-direction: column; gap: 8px; margin-top: 24px; }
.xr__res { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.xr__res summary { display: flex; align-items: center; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; }
.xr__res summary::-webkit-details-marker { display: none; }
.xr__restext { flex: 1; font-weight: 600; font-size: .92rem; }
.xr__resans { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pill); background: color-mix(in srgb, var(--blue) 12%, var(--surface)); color: var(--blue); font-weight: 700; font-size: .8rem; }
.xr__res.is-ok .xr__resans { background: color-mix(in srgb, #0F2D21 14%, var(--surface)); color: #0F2D21; }
.xr__resans svg { width: 14px; height: 14px; }
.xr__resbody { padding: 0 16px 16px 58px; font-size: .9rem; }

@media (max-width: 960px) {
  .xr__grid { grid-template-columns: 1fr; gap: 24px; }
  .xr__left { position: static; order: 2; }
  .xr__top { grid-template-columns: auto 1fr auto; }
}
@media (max-width: 640px) {
  .xr__top { padding-inline: 12px; }
  .xr__badge { display: none; }
}
@media (prefers-reduced-motion: reduce) { .xr__praise, .xr__miss, .xr__steps, .xr__pop { animation: none; } }

/* typed answers (vocabulary "write the word", grammar gaps) */
.xr__write { display: flex; flex-direction: column; gap: 10px; }
.xr__write input { width: 100%; max-width: 420px; padding: 12px 16px; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); font: 600 1rem var(--font-body); color: var(--ink); }
.xr__write input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.xr__typedans { margin: 0; font-size: .95rem; }
.xr__typedans.is-right { color: #0F2D21; }
.xr__typedans.is-miss { color: var(--blue); }

/* the AP-course picker in the YelAI planner's target row is a select
   dressed as a dashed "add" chip */
select#tutorSchedApAdd { appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; max-width: 200px; text-overflow: ellipsis; }

/* ==========================================================================
   #/yelai — the YelAI chat as a full page: the same dock panel (history,
   model/mode picker, mic, mascot), filling the whole content area beside
   the sidebar instead of floating in the corner. Content is centred in a
   comfortable reading column; the launcher hides while you're here.
   ========================================================================== */
body.is-yelpage { overflow: hidden; }
.yelpage { height: calc(100vh - var(--header-h)); }
.yeldock.is-page {
  position: fixed; top: var(--header-h); left: var(--side-w); right: 0; bottom: 0;
  z-index: 30; display: block;
}
body:has(.cookiebar:not([hidden])) .yeldock.is-page { top: calc(var(--header-h) + var(--cookie-h, 56px)); }
.yeldock.is-page .yeldock__launch { display: none; }
.yeldock.is-page .yeldock__panel {
  --col: max(20px, calc((100% - 880px) / 2));
  width: 100%; height: 100%; border: 0; border-radius: 0; box-shadow: none; animation: none;
  background:
    radial-gradient(90% 70% at 88% 0%, color-mix(in srgb, var(--ai-2) 12%, transparent), transparent 60%),
    radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--ai-1) 10%, transparent), transparent 60%),
    var(--bg);
}
.yeldock.is-page .yeldock__head { padding: 12px var(--col); background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(8px); }
.yeldock.is-page .yeldock__mark { height: 32px; }
.yeldock.is-page .yeldock__aiBtn { width: 170px; font-size: .82rem; padding: 7px 10px; }
.yeldock.is-page .yeldock__body { padding: 20px var(--col); }
.yeldock.is-page .yeldock__foot { border-top: 0; padding: 10px var(--col) 26px; }
.yeldock.is-page .yelbar { padding: 8px 8px 8px 10px; background: var(--surface); box-shadow: var(--shadow-2); }
.yeldock.is-page .yelbar__input { font-size: 1rem; padding: 10px 4px; }
.yeldock.is-page .yelbar__mic, .yeldock.is-page .yelbar__send { width: 42px; height: 42px; }
.yeldock.is-page .yelstage { width: min(300px, 60%); }
.yeldock.is-page .yelhello { font-size: clamp(1.3rem, 2.4vw, 1.8rem); }
.yeldock.is-page .yelticker span { max-width: 46ch; font-size: 1rem; }
.yeldock.is-page .chatbubble { font-size: .98rem; max-width: min(700px, 88%); }
.yeldock.is-page .yelhistory { inset: 0 0 0 auto; width: min(380px, 100%); border-left: 1px solid var(--line); box-shadow: var(--shadow-3); }
@media (max-width: 900px) { .yeldock.is-page { left: 0; } }

/* ==========================================================================
   Touch scroll performance
   backdrop-filter on a fixed/sticky element has to re-sample and re-blur
   everything underneath it on every scroll frame — tablets and phones (weak
   GPU, high-DPI backing store) choke on that far more than a laptop's
   compositor does, and it's the single biggest cause of scroll jank on the
   home page's brush story and the Learn page's floating pen bar. On a
   coarse pointer the blur is dropped and each background is pushed toward
   opaque instead, so the frosted look survives without the per-frame cost.
   ========================================================================== */
@media (pointer: coarse) {
  .header { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .xr__top { background: var(--bg); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .ink-bar__tools { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .yeldock__aiBtn { background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .yeldock__aiPop { background: color-mix(in srgb, var(--surface) 97%, transparent); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .yeldock.is-page .yeldock__head { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---- Makale kartı (ana sayfa kaydırmalı alan) ve makale sayfası ---- */
.article { max-width: 720px; padding-bottom: 48px; }
.article__cover { margin: 14px 0 22px; }
.article__cover--art { display: flex; justify-content: center; margin: 14px 0 22px; padding: 22px; border-radius: var(--r-lg); background: color-mix(in srgb, var(--d-science) 12%, var(--surface)); }
.article__cover--art svg { display: block; width: min(300px, 100%); height: auto; }
.article__kicker { font: 700 .75rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 8px; }
.article__title { font: 700 clamp(1.6rem, 4vw, 2.2rem) var(--font-display); color: var(--ink); line-height: 1.2; margin: 0 0 14px; }
.article__lede { font-size: 1.1rem; color: var(--ink-soft); margin: 0 0 24px; }
.article__body h2 { font: 700 1.25rem var(--font-display); color: var(--ink); margin: 28px 0 10px; }
.article__body p, .article__body li { color: var(--ink); line-height: 1.7; }
.article__body ol { padding-left: 22px; }
.article__note { font-size: .85rem; color: var(--ink-soft); margin-top: 22px; }
.article__cta { margin: 26px 0 18px; }
.article__refs { margin-top: 18px; }
.article__refs summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.article__refs summary::-webkit-details-marker { display: none; }
.article__chev { display: inline-flex; transition: transform .25s var(--ease); }
.article__chev svg { width: 16px; height: 16px; }
.article__refs[open] .article__chev { transform: rotate(180deg); }
.article__refs ol { margin-top: 12px; padding-left: 22px; font-size: .85rem; color: var(--ink-soft); line-height: 1.6; }

/* Makale içindekiler (SAT rehberi) ve bölüm başlıklarının sticky başlığın altında kalması */
.article__body h2 { scroll-margin-top: 96px; }
.article__toc { margin: 18px 0 8px; }
.article__toc-title { font: 700 .8rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin: 0 0 10px; }
.article__toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.article__tocbtn { width: 100%; text-align: left; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 9px 12px; cursor: pointer; transition: border-color .16s var(--ease), color .16s var(--ease); }
.article__tocbtn:hover { color: var(--accent); border-color: var(--accent); }

/* Fotoğraflı kapaklar: makale kartı, makale sayfası ve blog kartları */
.hcarousel__art--photo { width: 150px; align-self: stretch; }
.hcarousel__art--photo img { display: block; width: 100%; height: 100%; min-height: 170px; object-fit: cover; border-radius: var(--r-md); }
@media (max-width: 720px) { .hcarousel__art--photo { width: 100%; height: 150px; } .hcarousel__art--photo img { min-height: 0; } }
.article__cover--photo img { display: block; width: 100%; max-height: 420px; object-fit: cover; border-radius: var(--r-lg); }
.article__cover--photo figcaption { margin-top: 6px; font-size: .78rem; color: var(--ink-soft); }
.article__foot { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; margin-top: 18px; }
.article__foot .article__refs { margin-top: 0; }
.article__allblogs { display: inline-flex; align-items: center; gap: 8px; }
.article__allblogs svg { width: 16px; height: 16px; }
.coursecard--photo .coursecard__glyph { position: relative; right: auto; bottom: auto; width: calc(100% + 36px); height: 150px; margin: -18px -18px 6px; opacity: 1; overflow: hidden; }
.coursecard--photo:hover .coursecard__glyph { transform: none; opacity: 1; }


/* Blog kartları: sol çizgi yok; çizim bandı, sitenin kart zemininde */
.coursecard--photo { border-left: 1px solid var(--line); }
.coursecard--photo .coursecard__glyph { background: color-mix(in srgb, var(--d-history) 12%, var(--surface)); padding: 12px; display: flex; align-items: center; justify-content: center; }
.coursecard--photo .coursecard__glyph svg { width: auto; height: 100%; }

/* SAT dizüstü çizimi: fare kartın üzerine gelince etiketler kayarak girer, sütunlar sırayla yükselir */
.lap-pill, .lap-bar { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .tile:hover .lap-pill, .tile:focus-visible .lap-pill { animation: lapIn .55s var(--ease-out-back, ease-out) both; }
  .tile:hover .lap-pill--2, .tile:focus-visible .lap-pill--2 { animation-delay: .12s; }
  .tile:hover .lap-bar, .tile:focus-visible .lap-bar { animation: lapGrow .6s var(--ease, ease) both; }
  .tile:hover .lap-bar--1, .tile:focus-visible .lap-bar--1 { animation-delay: .25s; }
  .tile:hover .lap-bar--2, .tile:focus-visible .lap-bar--2 { animation-delay: .45s; }
  .tile:hover .lap-bar--3, .tile:focus-visible .lap-bar--3 { animation-delay: .65s; }
}
@keyframes lapIn { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }
@keyframes lapGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } }

/* English topic cards (src/lib/topic-scenes.js): every grammar topic, word
   pack and vocabulary family gets the AP-style photo band — its own moving
   scene on its own two-tint background, with --tile-hue as its accent.
   On hover the card lifts with a glow in its own colour, the scene zooms a
   touch, a light sweep crosses the band and the name takes the accent. */
.coursecard--photo.coursecard--scene { border-left: 1px solid var(--line); border-top: 3px solid var(--tile-hue); }
.coursecard--photo.coursecard--scene .coursecard__glyph {
  background: linear-gradient(135deg, var(--ap-a, var(--surface)), var(--ap-b, var(--surface)));
  padding: 0; display: block;
}
.coursecard--scene .coursecard__glyph svg { width: 100%; height: 100%; transition: transform .5s var(--ease-out-back); }
.coursecard--scene .coursecard__glyph::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-120%);
}
.coursecard--scene .coursecard__name { transition: color .25s var(--ease); }
.coursecard--scene:hover, .coursecard--scene:focus-visible {
  box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--tile-hue) 60%, transparent), var(--shadow-2);
}
.coursecard--scene:hover .coursecard__name, .coursecard--scene:focus-visible .coursecard__name { color: var(--tile-hue); }
.coursecard--scene:active { transform: translateY(-2px) scale(.98); }
@media (prefers-reduced-motion: no-preference) {
  .coursecard--scene:hover .coursecard__glyph svg, .coursecard--scene:focus-visible .coursecard__glyph svg { transform: scale(1.07); }
  .coursecard--scene:hover .coursecard__glyph::after, .coursecard--scene:focus-visible .coursecard__glyph::after { animation: scene-sweep .9s var(--ease) both; }
  .coursegrid > .coursecard--scene { animation: scene-in .55s var(--ease-out-back) backwards; }
  .coursegrid > .coursecard--scene:nth-child(2) { animation-delay: .04s; }
  .coursegrid > .coursecard--scene:nth-child(3) { animation-delay: .08s; }
  .coursegrid > .coursecard--scene:nth-child(4) { animation-delay: .12s; }
  .coursegrid > .coursecard--scene:nth-child(5) { animation-delay: .16s; }
  .coursegrid > .coursecard--scene:nth-child(6) { animation-delay: .2s; }
  .coursegrid > .coursecard--scene:nth-child(n+7) { animation-delay: .24s; }
}
@keyframes scene-sweep { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
@keyframes scene-in { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
/* Dark themes: the pastel band is toned down into the card surface */
:root[data-theme="dark"] .coursecard--photo.coursecard--scene .coursecard__glyph {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ap-a) 74%, var(--surface)), color-mix(in srgb, var(--ap-b) 84%, var(--surface)));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .coursecard--photo.coursecard--scene .coursecard__glyph {
    background: linear-gradient(135deg, color-mix(in srgb, var(--ap-a) 74%, var(--surface)), color-mix(in srgb, var(--ap-b) 84%, var(--surface)));
  }
}

/* Topic cards with an inner panel (topicCardHtml in app.js): the scene runs
   edge to edge on top, and the level, name and meta line sit in a rounded
   panel inside the card's bottom, tinted with the card's own hue. The
   "add to My Courses" toggle lives in the panel's bottom-right corner. */
.coursecard--panel { padding: 10px; gap: 0; }
.coursecard--panel.coursecard--photo .coursecard__glyph { width: calc(100% + 20px); margin: -10px -10px 10px; }
.coursecard__panel {
  position: relative;
  display: flex; flex-direction: column; gap: 6px;
  margin-top: auto;
  padding: 12px 12px 10px 14px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--tile-hue) 8%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--tile-hue) 20%, transparent);
  transition: background .25s var(--ease), border-color .25s var(--ease);
}
.coursecard--panel:hover .coursecard__panel, .coursecard--panel:focus-visible .coursecard__panel {
  background: color-mix(in srgb, var(--tile-hue) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--tile-hue) 38%, transparent);
}
.coursecard__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 34px; }
.coursecard__foot .coursecard__meta { margin-top: 0; }
.coursecard__add {
  flex: 0 0 auto;
  display: inline-grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  color: var(--tile-hue);
  background: var(--surface);
  border: 2px solid color-mix(in srgb, var(--tile-hue) 55%, transparent);
  box-shadow: 0 4px 10px -6px color-mix(in srgb, var(--tile-hue) 70%, transparent);
  cursor: pointer;
  transition: transform .3s var(--ease-out-back), background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.coursecard__add svg { width: 18px; height: 18px; stroke-width: 2.6; }
.coursecard__add:hover, .coursecard__add:focus-visible { background: var(--tile-hue); color: #fff; border-color: var(--tile-hue); transform: rotate(90deg) scale(1.1); outline: none; }
.coursecard__add.is-on { background: var(--tile-hue); color: #fff; border-color: var(--tile-hue); }
.coursecard__add.is-on:hover, .coursecard__add.is-on:focus-visible { transform: scale(1.1); }
@media (prefers-reduced-motion: no-preference) {
  .coursecard__add.is-on { animation: course-pop .45s var(--ease-out-back); }
  .coursebtn.is-on svg { animation: course-pop .45s var(--ease-out-back); }
}
@keyframes course-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.18); } 100% { transform: scale(1); } }

/* Panel cards, seamless: no frame of padding around the bottom panel — the
   scene and the panel are one surface in the card's own colours, the panel
   simply continuing the scene's background down to the card's edge. */
.coursecard--panel { padding: 0; }
.coursecard--panel.coursecard--photo .coursecard__glyph { width: 100%; margin: 0; }
.coursecard--panel .coursecard__panel,
.coursecard--panel:hover .coursecard__panel,
.coursecard--panel:focus-visible .coursecard__panel {
  margin-top: auto;
  padding: 10px 14px 14px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.coursecard--panel.coursecard--scene {
  background: linear-gradient(180deg, var(--ap-a) 0%, var(--ap-b) 100%);
}
.coursecard--panel.coursecard--photo.coursecard--scene .coursecard__glyph { background: transparent; }
.coursecard--panel:not(.coursecard--scene) { background: color-mix(in srgb, var(--tile-hue) 10%, var(--surface)); }
/* The panel sits on a light pastel in every theme, so its text stays dark */
.coursecard--panel.coursecard--scene .coursecard__name { color: #22303F; }
.coursecard--panel.coursecard--scene .coursecard__meta { color: #4C5674; }
.coursecard--panel.coursecard--scene:hover .coursecard__name,
.coursecard--panel.coursecard--scene:focus-visible .coursecard__name { color: var(--tile-hue); }
.coursecard--panel.coursecard--scene .coursecard__add:not(.is-on):not(:hover):not(:focus-visible) { background: #fff; }
:root[data-theme="dark"] .coursecard--panel.coursecard--scene {
  background: linear-gradient(180deg, color-mix(in srgb, var(--ap-a) 74%, var(--surface)), color-mix(in srgb, var(--ap-b) 84%, var(--surface)));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .coursecard--panel.coursecard--scene {
    background: linear-gradient(180deg, color-mix(in srgb, var(--ap-a) 74%, var(--surface)), color-mix(in srgb, var(--ap-b) 84%, var(--surface)));
  }
}
:root[data-theme="dark"] .coursecard--panel.coursecard--photo.coursecard--scene .coursecard__glyph { background: transparent; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .coursecard--panel.coursecard--photo.coursecard--scene .coursecard__glyph { background: transparent; }
}

/* The text area as a soft, rounded box of its own — sitting on the card's
   colour (no white frame around it), a frosted lighter shade of that same
   colour, so the card still reads as one piece. */
.coursecard--panel .coursecard__panel,
.coursecard--panel:hover .coursecard__panel,
.coursecard--panel:focus-visible .coursecard__panel {
  margin: auto 10px 10px;
  padding: 11px 10px 10px 14px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .5);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 6px 16px -10px color-mix(in srgb, var(--tile-hue) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .6);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.coursecard--panel:hover .coursecard__panel,
.coursecard--panel:focus-visible .coursecard__panel { background: rgba(255, 255, 255, .7); }
.coursecard--panel:not(.coursecard--scene) .coursecard__panel { background: color-mix(in srgb, var(--surface) 70%, transparent); border-color: color-mix(in srgb, var(--tile-hue) 20%, transparent); }

/* No outline or coloured top line on the panel cards — the card's own
   colour is its edge. */
.coursecard--panel, .coursecard--panel.coursecard--photo, .coursecard--panel.coursecard--photo.coursecard--scene { border: 0; }

/* Hover light: one sweep across the whole card, from the picture down
   through the text box. It runs between the two layers — over the scene,
   under the frosted text box — so it reads as one continuous beam shining
   through the box instead of stopping at its edge. */
.coursecard--panel .coursecard__glyph::after { display: none; }
.coursecard--panel .coursecard__glyph { z-index: 0; }
.coursecard--panel .coursecard__panel { z-index: 2; }
.coursecard--panel.coursecard--scene::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(110deg, transparent 28%, rgba(255, 255, 255, .35) 40%, rgba(255, 255, 255, .85) 50%, rgba(255, 255, 255, .35) 60%, transparent 72%);
  transform: translateX(-130%);
}
@media (prefers-reduced-motion: no-preference) {
  .coursecard--panel.coursecard--scene:hover::before,
  .coursecard--panel.coursecard--scene:focus-visible::before { animation: card-sweep 1.1s cubic-bezier(.45, .05, .55, .95) both; }
}
@keyframes card-sweep { from { transform: translateX(-130%); } to { transform: translateX(130%); } }

/* Topic page banner: the card's scene, large, with the add button in its
   bottom-right corner, tinted in the card's own hue. */
.topicbanner {
  position: relative;
  height: 220px;
  margin: 4px 0 20px;
  border-radius: 22px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ap-a), var(--ap-b));
}
.topicbanner .apscene { width: 100%; height: 100%; }
.topicbanner__add { position: absolute; right: 16px; bottom: 16px; }
.topicbanner .coursebtn { background: var(--tile-hue); border-color: var(--tile-hue); color: #fff; box-shadow: 0 10px 22px -12px var(--tile-hue); }
.topicbanner .coursebtn:hover { filter: brightness(1.06); transform: translateY(-1px); }
.topicbanner .coursebtn.is-on { background: #fff; color: var(--tile-hue); border-color: #fff; }
:root[data-theme="dark"] .topicbanner { background: linear-gradient(135deg, color-mix(in srgb, var(--ap-a) 74%, var(--surface)), color-mix(in srgb, var(--ap-b) 84%, var(--surface))); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .topicbanner { background: linear-gradient(135deg, color-mix(in srgb, var(--ap-a) 74%, var(--surface)), color-mix(in srgb, var(--ap-b) 84%, var(--surface))); }
}
@media (max-width: 640px) { .topicbanner { height: 170px; } }

/* English hub rails, take two. A sideways-scrolling box clips everything
   that leaves it — vertically too — so a hovered card that lifts and grows
   was being cut off at the top and its glow sliced off at the bottom, as if
   squeezed into a mould. The track now carries generous padding (pulled
   back out with negative margins, so the layout doesn't move) and that
   padding is the room the card grows into. No scrollbar: page dots below. */
.hrail__track {
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 18px 14px 40px;
  margin: -18px -14px -26px;
  scroll-padding-inline: 14px;
  outline: none;
}
.hrail__track::-webkit-scrollbar { display: none; }
.hrail__track:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 18px; }
.hrail__dots { display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 14px; margin-top: 4px; position: relative; z-index: 1; }
.hrail__dot {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 99px;
  background: color-mix(in srgb, var(--ink) 18%, transparent);
  cursor: pointer;
  transition: width .3s var(--ease-out-back), background .2s var(--ease), transform .2s var(--ease);
}
.hrail__dot:hover { background: color-mix(in srgb, var(--accent) 55%, transparent); transform: scale(1.25); }
.hrail__dot.is-on { width: 24px; background: var(--accent); transform: none; }
.hrail__nav { align-items: center; }
.hrail__allbtn {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px; border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface));
  color: var(--ink); font-weight: 700; font-size: .82rem; cursor: pointer;
  transition: background .2s var(--ease), transform .2s var(--ease-out-back);
}
.hrail__allbtn:hover { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); transform: translateY(-1px); }
.hrail__allbtn svg { width: 15px; height: 15px; }
.hrail.is-all .hrail__navbtn { display: none; }
.hrail__all { padding-top: 6px; }
.hrail__group { display: flex; align-items: center; gap: 8px; margin: 22px 0 12px; font-size: 1rem; }
.hrail__group:first-child { margin-top: 4px; }
.hrail__group span { font-size: .72rem; font-weight: 800; color: var(--muted); background: var(--surface-2); border-radius: 99px; padding: 2px 8px; }
@media (prefers-reduced-motion: no-preference) {
  .hrail__all > * { animation: scene-in .45s var(--ease-out-back) backwards; }
}
/* Keyboard focus on a rail: shown on its current dot, not as a box around
   the padded track (which would cross the heading above it). */
.hrail__track:focus-visible { box-shadow: none; }
.hrail__track:focus-visible + .hrail__dots .hrail__dot.is-on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }

/* Grammar topic rows: in place of "Open", the lesson's three steps as small
   numbered pills — 1 Watch, 2 Learn, 3 Tests — each a shortcut straight to
   that step (the row itself still opens Watch). */
.unit__steps { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; }
.unit__step {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 12px 0 5px;
  border-radius: 99px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, var(--line));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  color: var(--ink); font-weight: 700; font-size: .8rem; white-space: nowrap;
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease-out-back);
}
.unit__stepn {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 16%, var(--surface));
  color: var(--accent); font-size: .72rem; font-weight: 800;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.unit__step:hover, .unit__step:focus-visible { background: var(--accent); border-color: var(--accent); color: #fff; transform: translateY(-2px); outline: none; }
.unit__step:hover .unit__stepn, .unit__step:focus-visible .unit__stepn { background: rgba(255, 255, 255, .25); color: #fff; }
.unit__step.is-off { opacity: .45; cursor: not-allowed; }
.unit__step.is-off:hover { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); color: var(--ink); border-color: color-mix(in srgb, var(--accent) 30%, var(--line)); transform: none; }
.unit__step.is-off:hover .unit__stepn { background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--accent); }
/* A pill being hovered shouldn't also slide the whole row */
.unit--steps:has(.unit__step:hover) { transform: none; }
@media (max-width: 720px) {
  .unit--steps { flex-wrap: wrap; }
  .unit--steps .unit__steps { width: 100%; padding-left: 48px; }
}
@media (max-width: 420px) {
  .unit__step { padding: 0 9px 0 4px; font-size: .74rem; }
}
@media (max-width: 640px) {
  .topicbanner__add { right: 10px; bottom: 10px; }
  .topicbanner .coursebtn { padding: 7px 12px; font-size: .78rem; min-height: 0; }
  .topicbanner .coursebtn svg { width: 14px; height: 14px; }
}

/* English section breadcrumb: English › Vocabulary › Themes … */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; margin-bottom: 14px; }
.crumbs .crumb { margin-bottom: 0; }
.crumbs .crumb:last-child { color: var(--ink); }
.crumbs__sep { color: var(--muted); opacity: .6; font-weight: 700; }

/* ===================================================== word pages ===
   A "wordpage" pack (content/vocab/<id>.json layout) and its words:
   #/pack/<id> is a searchable word list, #/pack/<id>/word/<term> the
   word's own page — info card, word bar, sentence card, notes box. */

.modebar--search { align-items: center; }
.search--pack { flex: 1 1 260px; max-width: 440px; }

/* the play button that says a word (pack rows, word page, site search) */
.wplay {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: var(--accent-wash); color: var(--accent); cursor: pointer;
  transition: background-color .14s var(--ease), color .14s var(--ease), transform .14s var(--ease);
}
.wplay svg { width: 15px; height: 15px; margin-left: 2px; }
.wplay:hover { background: var(--accent); color: var(--accent-ink); }
.wplay:active { transform: scale(.92); }
.wplay--sm { width: 26px; height: 26px; }
.wplay--sm svg { width: 11px; height: 11px; }
.wplay--xs { width: 22px; height: 22px; }
.wplay--xs svg { width: 10px; height: 10px; }

.wordlist--rows { gap: 8px; }
.wrow {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: 16px;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  cursor: pointer; transition: border-color .14s var(--ease), box-shadow .14s var(--ease);
}
.wrow:hover, .wrow:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-1); outline: none; }
.wrow__en { display: grid; gap: 2px; min-width: 0; }
.wrow__line { display: inline-flex; align-items: center; gap: 8px; }
.wrow__line b { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.wrow__ipa { color: var(--muted); font-family: var(--font-mono); font-size: .78rem; }
.wrow__meaning { color: var(--ink-soft); min-width: 0; }
.wrow__actions { display: flex; align-items: center; gap: 2px; flex: none; }
.wrow__arch.is-on { color: var(--accent); }
.wrow__know.is-on { color: var(--mint); }

/* Confusing Words list rows: term(s) | this pair's own Archive/Know | meaning(s) */
.wrow--compare { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.3fr); }
.wrow__mid { display: flex; align-items: center; gap: 8px; flex: none; }
.wrow__mid .wmidbtn { width: 34px; height: 34px; }
.wrow__mid .wmidbtn svg { width: 15px; height: 15px; }

.wordpage__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(290px, 320px); gap: 20px; align-items: stretch; margin-top: 6px; }
.wordpage__main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.wcard {
  border: 1px solid var(--line); border-radius: 22px; background: var(--surface);
  box-shadow: var(--shadow-1); padding: 22px 24px;
}
.wcard--info { display: grid; grid-template-columns: minmax(min-content, .9fr) minmax(0, 1.4fr); gap: 26px; }
.wcard__left { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-right: 22px; border-right: 1px solid var(--line); }
.wcard__term { font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.3rem); font-weight: 700; line-height: 1.1; margin: 0; overflow-wrap: break-word; }
.wcard__sayrow { display: flex; align-items: center; gap: 10px; }
.wcard__ipa { font-family: var(--font-mono); font-size: 1.05rem; color: var(--ink-soft); }
.wcard__pos { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); padding: 3px 9px; border-radius: var(--r-pill); background: var(--surface-2); }
.wcard__right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
/* English ⇄ the account's language: one switch in the card's bottom-right corner */
.wcard--info { position: relative; }
.wcard--info:has(.wlangswap) { padding-bottom: 60px; }
.wlangswap {
  position: absolute; right: 16px; bottom: 14px;
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--line);
  border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-soft); font-weight: 600; font-size: .82rem; cursor: pointer;
  transition: border-color .14s var(--ease), background-color .14s var(--ease), color .14s var(--ease);
}
.wlangswap svg { width: 18px; height: 13px; border-radius: 2px; }
.wlangswap:hover { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.wcard__meaning { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--ink); margin: 4px 0 0; }
.wcard__explain { color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* Confusing Words only: a third column between term and meaning carrying
   this one word's own Archive / I-know-this buttons, separate from the
   pair-level pair in the wordbar below the two columns. */
.wcard--info.wcard--compare { grid-template-columns: minmax(min-content, .78fr) auto minmax(0, 1.3fr); }
.wcard--compare .wcard__left { border-right: 0; padding-right: 18px; }
.wcard__mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 0 18px; border-right: 1px solid var(--line); }
.wmidbtn {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; flex: none;
  border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); cursor: pointer;
  transition: background-color .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.wmidbtn svg { width: 17px; height: 17px; display: block; }
.wmidbtn:hover { border-color: var(--accent); background: var(--accent-wash); color: var(--accent); }
.wmidbtn--arch.is-on { color: var(--berry); border-color: color-mix(in srgb, var(--berry) 40%, var(--line)); background: var(--berry-wash); }
.wmidbtn--know.is-on { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, var(--line)); background: var(--accent-wash); }

/* Archive · previous word · flag · next word · Skip */
.wordbar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.wordbar__rail, .wordbar__nav {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line); background: var(--surface); color: var(--ink); font-weight: 600; font-size: .86rem; cursor: pointer; white-space: nowrap;
  transition: background-color .14s var(--ease), border-color .14s var(--ease), color .14s var(--ease);
}
.wordbar__rail svg, .wordbar__nav svg { width: 17px; height: 17px; }
.wordbar__nav:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); }
.wordbar__nav:disabled { opacity: .4; cursor: default; }
.wordbar__rail--arch { color: var(--berry); border-color: color-mix(in srgb, var(--berry) 35%, var(--line)); }
.wordbar__rail--arch:hover, .wordbar__rail--arch.is-on { background: var(--berry-wash); }
.wordbar__rail--skip { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }
.wordbar__rail--skip:hover { background: var(--accent-wash); }
.wordbar__flagwrap { position: relative; }
.wordbar__flag {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); cursor: pointer;
}
.wordbar__flag svg { width: 19px; height: 19px; }
.wordbar__flag:hover, .wordbar__flag.is-on { color: var(--berry); border-color: var(--berry); background: var(--berry-wash); }
.wreport {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 50%; translate: -50% 0;
  display: flex; flex-direction: column; gap: 6px; width: min(290px, calc(100vw - 32px)); padding: 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); box-shadow: var(--shadow-3);
  animation: rise .18s var(--ease-out-back);
}
.wreport__title { font-weight: 700; margin: 0 0 4px; }
.wreport__opt {
  text-align: left; padding: 8px 10px; border-radius: var(--r-xs); border: 1px solid var(--line);
  background: var(--surface); color: var(--ink); font-size: .86rem; cursor: pointer;
}
.wreport__opt:hover { background: var(--surface-2); }
.wreport__opt.is-on { border-color: var(--berry); background: var(--berry-wash); color: var(--berry); font-weight: 600; }
.wreport textarea {
  width: 100%; min-height: 64px; resize: vertical; padding: 8px 10px; border-radius: var(--r-xs);
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); font: inherit; font-size: .86rem;
}
.wreport .btn { align-self: flex-end; }

/* the sentence card: arrows on its sides, one sentence at a time */
.wcard--sent { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 12px; min-height: 230px; padding: 20px 14px; }
.warrow {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface-2); color: var(--ink); cursor: pointer;
}
.warrow svg { width: 18px; height: 18px; }
.warrow:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.warrow:disabled { opacity: .3; cursor: default; }
.wcard__sentbody { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.wcard__senthead { display: flex; align-items: center; gap: 10px; }
.wcard__sentlabel { font-size: .74rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.wcard__count { margin-left: auto; font-size: .8rem; color: var(--muted); }
.wlvl { font: 700 .72rem var(--font-mono); padding: 3px 8px; border-radius: var(--r-pill); color: #fff; background: var(--muted); }
.wlvl--a1 { background: #0F2D21; }
.wlvl--a2 { background: #0F2D21; }
.wlvl--b1 { background: #0F2D21; }
.wlvl--b2 { background: #6D4AFF; }
.wlvl--c1 { background: #C9821E; }
.wlvl--c2 { background: #D2455C; }
.wcard__sentence { font-size: 1.16rem; line-height: 1.8; color: var(--ink); margin: 0; }
.wcard__nosent { color: var(--muted); grid-column: 1 / -1; text-align: center; }
/* highlighter: a band behind the word, its colour set per sentence */
mark.whl {
  color: #1C2033; font-weight: 600; padding: 0 .16em; border-radius: .25em;
  background: linear-gradient(transparent 10%, var(--hl, #FFE96B) 10%, var(--hl, #FFE96B) 92%, transparent 92%);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.wdots { display: flex; flex-wrap: wrap; gap: 6px; }
.wdot { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 1.5px solid var(--line-strong); background: transparent; cursor: pointer; }
.wdot.is-on { background: var(--hl); border-color: color-mix(in srgb, var(--hl) 60%, #1C2033); transform: scale(1.2); }

/* notes: as tall as the two cards together; the pen case sits inside */
.wnote {
  display: flex; flex-direction: column; gap: 10px; min-height: 100%;
  border: 1px solid var(--line); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-1); padding: 16px;
}
.wnote__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.wnote__title { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 1.05rem; margin: 0; }
.wnote__title svg { width: 18px; height: 18px; color: var(--accent); }
.wnote__login { border: 0; background: none; padding: 0; color: var(--accent); font-size: .8rem; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.wnote__case:empty { display: none; }
.ink-bar--inline { position: relative; left: auto; top: auto; z-index: 6; }
.ink-bar--inline .ink-bar__tools {
  flex-wrap: wrap; justify-content: center; max-width: none; max-height: none; overflow: visible;
  border-radius: var(--r); box-shadow: none; background: var(--surface-2);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.ink-bar--inline .ink-tool { width: 36px; height: 36px; }
.ink-bar--inline .ink-tool svg { width: 18px; height: 18px; }
.ink-bar--inline .ink-pop { z-index: 30; }
.ink-tool.ink-tool--action { display: inline-flex; width: auto; gap: 6px; padding: 0 12px; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: .82rem; }
.ink-tool.ink-tool--action:hover { background: var(--accent-hover); color: var(--accent-ink); }
.wnote__paper {
  position: relative; flex: 1 1 auto; min-height: 340px; display: flex; overflow: hidden;
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface) repeating-linear-gradient(transparent 0 27px, var(--line) 27px 28px);
  background-position: 0 13px;
}

/* Wide variant: a full-width strip under the Confusing Words comparison
   grid, instead of the word page's tall side column — wide, not tall. */
.wnote--wide { min-height: 0; margin: 28px 0; }
.wnote--wide .wnote__paper { min-height: 150px; max-height: 220px; }
.wnote__text {
  flex: 1; width: 100%; resize: none; border: 0; outline: none; background: transparent; color: var(--ink);
  padding: 14px 16px; font: 1rem/28px var(--font-body);
}

@media (max-width: 960px) {
  .wordpage__grid { grid-template-columns: 1fr; }
  .wnote__paper { min-height: 300px; }
}
@media (max-width: 640px) {
  .wcard--info { grid-template-columns: 1fr; gap: 16px; }
  .wcard__left { padding-right: 0; padding-bottom: 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .wcard--compare .wcard__mid { flex-direction: row; padding: 0 0 14px; border-right: 0; border-bottom: 1px solid var(--line); }
  .wrow { grid-template-columns: minmax(0, 1fr) auto; }
  .wrow__meaning { grid-column: 1 / -1; grid-row: 2; }
  .wcard--sent { grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; padding: 16px 8px; }
  .warrow { width: 36px; height: 36px; }
  /* phone: previous · flag · next on top, Archive and Skip under them */
  .wordbar { display: grid; grid-template-columns: 1fr auto 1fr; grid-template-areas: "prev flag next" "arch arch2 skip"; }
  .wordbar > :nth-child(1) { grid-area: arch; }
  .wordbar > :nth-child(2) { grid-area: prev; }
  .wordbar > :nth-child(3) { grid-area: flag; }
  .wordbar > :nth-child(4) { grid-area: next; }
  .wordbar > :nth-child(5) { grid-area: skip; }
  .wordbar__rail, .wordbar__nav { padding: 9px 10px; }
}

/* site search: a word row — English, IPA, play | meaning, pack */
.lysearch__item--word { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; cursor: pointer; }
.lysearch__wen { display: grid; gap: 1px; min-width: 0; }
.lysearch__wline { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.lysearch__wline b { font-family: var(--font-display); font-weight: 600; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lysearch__ipa { color: var(--muted); font-family: var(--font-mono); font-size: .74rem; }
.lysearch__wmean { display: grid; gap: 1px; min-width: 0; text-align: right; }
.lysearch__wmean span { font-size: .88rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lysearch__wmean small { color: var(--muted); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Test setup: the saved-attempt panel (resume / start over / report) */
.xr__saved { margin: 16px 0 6px; padding: 16px 18px; border: 1px solid var(--line-strong); border-radius: var(--r-md, 14px); background: var(--surface); max-width: 620px; }
.xr__saved p { margin: 6px 0 12px; color: var(--ink-soft); font-size: .9rem; }
.xr__savedacts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Test report: round "go to question" arrow at the end of each row */
.xr__goq { flex: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--line-strong); border-radius: 50%; background: var(--surface); color: var(--accent); cursor: pointer; transition: background .15s, color .15s, transform .15s; }
.xr__goq svg { width: 16px; height: 16px; }
.xr__goq:hover, .xr__goq:focus-visible { background: var(--accent); color: #fff; transform: translateX(2px); }

/* Test report */
.xrr { position: relative; border-radius: var(--r-lg, 22px); padding: clamp(16px, 2.4vw, 28px); background: var(--rg); color: #fff; --card: color-mix(in srgb, var(--surface) 92%, transparent); }
.xrr__head { margin-bottom: 16px; }
.xrr__title { margin: 0; font-size: clamp(1.5rem, 2.6vw, 2rem); color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.25); }
.xrr__sub { margin: 4px 0 0; font-size: .9rem; color: rgba(255,255,255,.85); }
.xrr__main { display: grid; grid-template-columns: 190px minmax(280px, 1fr) minmax(300px, 1.05fr); gap: 16px; align-items: stretch; min-height: 520px; }
.xrr__left, .xrr__center, .xrr__right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xrr__left { justify-content: space-between; }
.xrr__stats { display: flex; flex-direction: column; gap: 12px; }
.xrr__stat, .xrr__time, .xrr__center, .xrr__ai { background: var(--card); color: var(--ink); border-radius: var(--r, 16px); box-shadow: 0 6px 22px rgba(0,0,0,.14); }
.xrr__stat { padding: 14px 16px; border-left: 6px solid var(--c); display: flex; flex-direction: column; gap: 2px; }
.xrr__stat span { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.xrr__stat b { font-size: 2.1rem; line-height: 1.1; color: var(--c); }
.xrr__time { padding: 14px 16px; }
.xrr__time span { display: block; font-size: .8rem; color: var(--muted); }
.xrr__time b { font-size: 1.25rem; }
.xrr__center { padding: 14px 16px 18px; align-items: stretch; }
.xrr__tabs { display: inline-flex; align-self: center; padding: 3px; border-radius: 999px; background: var(--line); }
.xrr__tabs button { border: 0; background: transparent; padding: 6px 20px; border-radius: 999px; font: inherit; font-size: .9rem; color: var(--ink-soft); cursor: pointer; }
.xrr__tabs button.is-on { background: var(--surface); color: var(--accent); font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.xrr__pievw, .xrr__linevw { display: flex; flex-direction: column; align-items: center; gap: 14px; flex: 1; justify-content: center; }
.xrr__pie { width: min(100%, 250px); height: auto; }
.xrr__pct { font-size: 28px; font-weight: 700; fill: var(--ink); }
.xrr__pctl { font-size: 11px; fill: var(--muted); }
.xrr__legend { list-style: none; margin: 0; padding: 0; width: 100%; max-width: 300px; display: grid; gap: 8px; }
.xrr__legend li { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.xrr__legend i { width: 14px; height: 14px; border-radius: 4px; flex: none; }
.xrr__legend span { flex: 1; color: var(--ink-soft); }
.xrr__line { width: 100%; height: auto; }
.xrr__ax { font-size: 10px; fill: var(--muted); }
.xrr__sers { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.xrr__ser { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface); font: inherit; font-size: .78rem; color: var(--ink-soft); cursor: pointer; }
.xrr__ser i { width: 10px; height: 10px; }
.xrr__ser.is-off { opacity: .4; text-decoration: line-through; }
.xrr__empty { margin: auto; text-align: center; color: var(--muted); font-size: .92rem; }
.xrr__ai { flex: 1; min-height: 160px; display: flex; flex-direction: column; overflow: hidden; }
.xrr__aihead { padding: 12px 16px 6px; color: var(--accent); }
.xrr__aibody { padding: 0 16px 14px; overflow-y: auto; max-height: 300px; font-size: .9rem; line-height: 1.5; color: var(--ink-soft); }
.xrr__aibody p { margin: 0 0 10px; }
.xrr__me { align-self: flex-end; background: var(--line); color: var(--ink); border-radius: 12px; padding: 6px 10px; width: fit-content; margin-left: auto !important; }
.xrr__muted { color: var(--muted); }
.xrr__actions { display: flex; flex-direction: column; gap: 10px; }
.xrr__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.xrr__chip { border: 1px solid rgba(255,255,255,.55); background: rgba(255,255,255,.16); color: #fff; padding: 5px 11px; border-radius: 999px; font: inherit; font-size: .78rem; cursor: pointer; transition: background .15s; text-align: left; }
.xrr__chip:hover, .xrr__chip:focus-visible { background: rgba(255,255,255,.32); }
.xrr__bar { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px 6px 16px; border-radius: 999px; background: var(--card); box-shadow: 0 6px 22px rgba(0,0,0,.14); box-sizing: border-box; }
.xrr__bar input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; color: var(--ink); padding: 8px 0; }
.xrr__btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.xrr__btns .btn { width: 100%; justify-content: center; padding-inline: 8px; font-size: .85rem; white-space: normal; text-align: center; background-clip: padding-box; }
.xrr__btns .btn--ghost { background: var(--card); color: var(--ink); }
.xrr .xr__results { margin-top: 20px; }
@media (max-width: 960px) {
  .xrr__main { grid-template-columns: 1fr; min-height: 0; }
  .xrr__left { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .xrr__stats { flex-direction: row; flex: 1 1 100%; }
  .xrr__stat { flex: 1; }
  .xrr__time { flex: 1 1 100%; }
}
.xrr .xr__res { color: var(--ink); }
.xrr__btns .btn:disabled { opacity: .6; cursor: not-allowed; }

/* Test report, round 2: gradient only on the top panel, themed scrollbar, quote */
.xrr__main { min-height: 540px; }
.xrr { box-shadow: 0 14px 40px rgba(20, 10, 60, .22); }
.xrr__left { gap: 14px; }
.xrr__quote { flex: 1; margin: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 6px 4px;
  font-family: var(--font-hand); font-weight: 500; font-size: 1.32rem; line-height: 1.25; color: #fff; text-wrap: balance; text-shadow: 0 1px 10px rgba(0,0,0,.3); }
.xrr__aibody { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; padding-right: 10px; }
.xrr__aibody::-webkit-scrollbar { width: 6px; }
.xrr__aibody::-webkit-scrollbar-track { background: transparent; }
.xrr__aibody::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 999px; }
.xrr__aibody::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--muted) 65%, transparent); }
.xrr__aibody { max-height: 340px; }
.xrr .xr__results { margin-top: 0; }
.xr--result > .xr__results { margin-top: 22px; }
.xrr__main { min-height: 500px; }
.xrr__aibody { max-height: 250px; }

/* test stopwatch in the run page's top bar */
.xr__watch { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--surface-2, var(--line)); color: var(--ink-soft); font-size: .85rem; font-variant-numeric: tabular-nums; }
.xr__watch svg { width: 15px; height: 15px; }

/* YelAI bar in the report: the focus glow wraps the whole bar, not just the input */
.xrr__bar input, .xrr__bar input:focus, .xrr__bar input:focus-visible { outline: 0 !important; box-shadow: none !important; border: 0 !important; background: transparent !important; }
.xrr__bar { transition: box-shadow .18s, border-color .18s; border: 1.5px solid transparent; }
.xrr__bar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 28%, transparent), 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent), 0 6px 22px rgba(0,0,0,.14); }



/* Sidebar: page buttons stacked one per row (each as big as two foot buttons side by side),
   tool buttons two per row below them */
.sidebar__foot { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sidebar .stile { flex-direction: row; align-items: center; justify-content: flex-start; gap: 9px; padding: 0 10px; }
.sidebar .stile__name { font-size: .82rem; line-height: 1.1; }

/* social buttons now sit inside the footer, left-aligned under the columns */
.footer__social { justify-content: flex-start; padding-block: 24px 8px; border-top: 0; gap: 10px; }
.footer__social a { width: 40px; height: 40px; }

/* Sidebar: the context strip under the page buttons */
.sidebar__grid { flex: 0 0 auto; }
.sidebar__ctx { flex: 1; min-height: 0; overflow-y: auto; margin-top: 4px; display: flex; flex-direction: column; gap: 6px;
  scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--muted) 45%, transparent) transparent; }
.sidebar__ctx::-webkit-scrollbar { width: 5px; }
.sidebar__ctx::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--muted) 45%, transparent); border-radius: 999px; }
.sidebar__ctxhead { padding: 4px 4px 0; font: 700 .62rem var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar__ctxgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.cbtn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 52px; padding: 4px 2px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--ink-soft); cursor: pointer;
  transition: transform .2s var(--ease-out-back), border-color .2s var(--ease), color .2s var(--ease), background .2s var(--ease); }
.cbtn:hover, .cbtn:focus-visible { transform: translateY(-2px); border-color: var(--accent); color: var(--accent); }
.cbtn.is-active { color: var(--accent); border-color: var(--accent); background: var(--accent-wash); }
.cbtn__icon { display: grid; place-items: center; width: 20px; height: 20px; }
.cbtn__icon svg { width: 17px; height: 17px; }
.cbtn__lbl { max-width: 100%; font-size: .58rem; line-height: 1.1; text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
.mobilenav .sidebar__ctx { flex: 0 0 auto; overflow: visible; margin: 8px 0; }
.mobilenav .cbtn { height: 60px; }
.mobilenav .cbtn__lbl { font-size: .66rem; }
.sidebar__ctxhead, .sidebar__ctxgrid { flex: 0 0 auto; }
.cbtn__lbl { font-size: .56rem; word-break: normal; overflow-wrap: break-word; hyphens: auto; }

/* Context strip: the buttons share the whole free area, no gap left under them */
.sidebar__ctxgrid { flex: 1 1 auto; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(52px, 1fr); }
.cbtn { height: auto; min-height: 52px; }
.cbtn__icon svg { width: 19px; height: 19px; }
.mobilenav .sidebar__ctxgrid { grid-auto-rows: 60px; }

/* Context strip: the buttons share the whole free area, no gap left under them */
.sidebar__ctxgrid { flex: 1 1 auto; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: minmax(52px, 1fr); }
.cbtn { height: auto; min-height: 52px; }
.cbtn__icon svg { width: 19px; height: 19px; }
.mobilenav .sidebar__ctxgrid { grid-auto-rows: 60px; }
.sidebar__ctxgrid { grid-auto-rows: minmax(40px, 1fr); }
.cbtn { min-height: 40px; gap: 2px; }
.cbtn__icon { height: 18px; }
.cbtn__icon svg { width: 17px; height: 17px; }


/* New logos: dark green on light, white on the dark themes */
.brand__mark { filter: none; }
.brand:hover .brand__mark { filter: none; }
.yelai-mark--mono { filter: brightness(0) invert(1); }
:root[data-theme="dark"] .brand__mark, :root[data-theme="dim"] .brand__mark,
:root[data-theme="dark"] .yelai-mark, :root[data-theme="dim"] .yelai-mark { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="dim"]) .brand__mark,
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="dim"]) .yelai-mark { filter: brightness(0) invert(1); }
}
:root[data-theme="dark"] .footer__brand img, :root[data-theme="dim"] .footer__brand img { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="dim"]) .footer__brand img { filter: brightness(0) invert(1); }
}

/* ==========================================================================
   Page buttons keep their look (white card + soft light in the corner); only
   the colour of that light changes per page: Home purple, Discover grey
   (dark in light themes, white in dark ones), SAT blue, English green,
   My Progress red, Schedule pink. Sidebar tiles and the big home tiles match.
   ========================================================================== */
:root { --hue-disc: #4B515C; }
:root[data-theme="dark"], :root[data-theme="dim"] { --hue-disc: #F1F2F5; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="dim"]) { --hue-disc: #F1F2F5; }
}
.stile[data-route="#/"]                 { --tile-hue: #7C4DDB !important; }
.stile[data-route="#/discover"], .shelf .tile[data-route="#/discover"]                 { --tile-hue: var(--hue-disc) !important; }
/* Discover's hue is near-white in dark themes, so its active icon needs a dark glyph */
:root { --hue-disc-ink: #fff; }
:root[data-theme="dark"], :root[data-theme="dim"] { --hue-disc-ink: #14161B; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="dim"]) { --hue-disc-ink: #14161B; }
}
.stile[data-route="#/discover"].is-active .stile__icon { color: var(--hue-disc-ink); }
.stile[data-route="#/sat"], .shelf .tile[data-route="#/sat"]                           { --tile-hue: #2F6BFF !important; }
.stile[data-route="#/english"], .shelf .tile[data-route="#/english"]                   { --tile-hue: #17A765 !important; }
.stile[data-route="#/planner/progress"], .shelf .tile[data-route="#/planner/progress"] { --tile-hue: #E5303B !important; }
.stile[data-route="#/planner"], .shelf .tile[data-route="#/planner"]                   { --tile-hue: #EC4899 !important; }
.stile[data-route] .stile__wash, .shelf .tile[data-route] .tile__wash {
  background:
    radial-gradient(90% 110% at 90% 8%, color-mix(in srgb, var(--tile-hue) 44%, transparent) 0%, transparent 62%),
    radial-gradient(70% 80% at 6% 100%, color-mix(in srgb, var(--tile-hue) 22%, transparent) 0%, transparent 65%),
    linear-gradient(155deg, color-mix(in srgb, var(--tile-hue) 14%, transparent) 0%, transparent 60%);
  opacity: 1;
}

/* SAT page: each section's corner light in its own colour */
.satgrid .tile[data-route="#/sat/digital-writing"] { --tile-hue: #2F6BFF !important; }
.satgrid .tile[data-route="#/sat/digital-reading"] { --tile-hue: #F28A1E !important; }
.satgrid .tile[data-route="#/sat/digital-math"]    { --tile-hue: #17A765 !important; }
.satgrid .tile[data-route="#/sat/vocabulary"]      { --tile-hue: #7C4DDB !important; }
.satgrid .tile[data-route="#/grammar/sat-grammar"] { --tile-hue: #0EA5B7 !important; }
.satgrid .tile[data-route="#/sat/videos"]          { --tile-hue: #EC4899 !important; }
.satgrid .tile[data-route] .tile__wash {
  background:
    radial-gradient(90% 110% at 90% 8%, color-mix(in srgb, var(--tile-hue) 44%, transparent) 0%, transparent 62%),
    radial-gradient(70% 80% at 6% 100%, color-mix(in srgb, var(--tile-hue) 22%, transparent) 0%, transparent 65%),
    linear-gradient(155deg, color-mix(in srgb, var(--tile-hue) 14%, transparent) 0%, transparent 60%);
}

/* Foot buttons: Upgrade purple, My Courses dark blue */
.sbtn[data-route="#/upgrade"]    { --tile-hue: #7C4DDB !important; }
.sbtn[data-route="#/my-courses"] { --tile-hue: #1E3A8A !important; }
:root[data-theme="dark"] .sbtn[data-route="#/my-courses"], :root[data-theme="dim"] .sbtn[data-route="#/my-courses"] { --tile-hue: #5B7FE0 !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]):not([data-theme="dim"]) .sbtn[data-route="#/my-courses"] { --tile-hue: #5B7FE0 !important; }
}

/* Content is chunked: a thin bar runs along the top while a route's chunks download. */
body.is-content-loading::after {
  content: ''; position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 9999;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  background-size: 40% 100%; background-repeat: no-repeat;
  animation: content-bar 1s ease-in-out infinite;
}
@keyframes content-bar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) { body.is-content-loading::after { animation: none; background-size: 100% 100%; opacity: .5; } }


/* ---- legal pages (src/content/legal.js) ---------------------------------- */
.prose--legal { max-width: 96ch; }
.legal-tablewrap { overflow-x: auto; margin: 4px 0; }
.legal-table { border-collapse: collapse; width: 100%; font-size: .92rem; }
.legal-table th, .legal-table td { border: 1px solid var(--line, rgba(127,127,127,.28)); padding: 7px 10px; text-align: left; vertical-align: top; color: var(--ink-soft); }
.legal-table th { background: var(--surface-2, rgba(127,127,127,.12)); color: var(--ink); }
.legal-table td:first-child { color: var(--ink); font-weight: 600; }
mark.legal-todo { background: #fde68a; color: #78350f; padding: 0 4px; border-radius: 4px; }
.legal-todo-note { border-color: #f59e0b; }
.footer__op { color: var(--muted); opacity: .85; }
.coconsent { display: flex; flex-direction: column; gap: 8px; margin: 14px 0 12px; font-size: .88rem; }
.coconsent .check { align-items: flex-start; }

/* ---- premium plans (pricing.js) ------------------------------------------ */
.planbar { display: flex; align-items: center; justify-content: space-between; gap: 12px 18px; flex-wrap: wrap; margin: 8px 0 14px; }
.seg { display: inline-flex; padding: 3px; border-radius: 999px; background: var(--surface-2, rgba(127,127,127,.14)); gap: 2px; }
.seg__b { border: 0; background: transparent; color: var(--ink-soft); font: inherit; font-weight: 600; padding: 7px 16px; border-radius: 999px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.seg__b.is-on { background: var(--accent); color: #fff; }
.seg__b em { font-style: normal; font-size: .7rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.22); }
.seg__b:not(.is-on) em { background: var(--mint, #2e8f45); color: #fff; }
.planregion { display: inline-flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); }
.planregion select { font: inherit; padding: 6px 10px; border-radius: 10px; border: 1px solid var(--line, rgba(127,127,127,.3)); background: var(--surface, transparent); color: var(--ink); }
.plangrid--premium { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.plancard__sub { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; min-height: 1.3em; font-size: .85rem; color: var(--muted); }
.plancard__sub s { opacity: .75; }
.plancard__sub em { font-style: normal; font-weight: 700; color: var(--accent); font-size: .74rem; text-transform: uppercase; letter-spacing: .03em; }
.plancard__fine { font-size: .75rem; color: var(--muted); margin: 2px 0 0; }
.plancard__feats { flex: 1; }
.plancard .btn--block { margin-top: auto; }
.plancard__was { font-size: .55em; font-weight: 500; color: var(--muted); margin-right: 8px; text-decoration: line-through; }
.plancard__price { white-space: nowrap; }
.plannote { margin-top: 10px; max-width: 80ch; }

/* ---- videos were removed from the site: the deck is just the card ---------- */
.vc:not(.vc--plain) .vc__pick,
.vc:not(.vc--plain) .vc__cbar,
.vc:not(.vc--plain) .vc__shelf,
.vc__novideo, .vc__skipintro, .vc__bigplay, .vc__spin { display: none !important; }
.vc__frame.is-novideo .vc__introcard { height: 100%; }
/* The card's front face is the (dark) mint; the old navy term was unreadable on it. */
.vc__introcard .card3d__face--front .vc__introterm { color: #fff; }
:root[data-theme="dark"] .vc__introcard .card3d__face--front .vc__introterm,
:root[data-theme="dim"] .vc__introcard .card3d__face--front .vc__introterm { color: var(--navy); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dim"]) .vc__introcard .card3d__face--front .vc__introterm { color: var(--navy); } }
.vc:not(.vc--plain) .vc__stage, .vc:not(.vc--plain) .vc__intro { background: transparent; box-shadow: none; }

/* ---- Support / Help Center (features/support.js) -------------------------- */
.sp { display: flex; flex-direction: column; gap: 4px; padding-bottom: 60px; }
.sp-hero { position: relative; padding: 30px 28px 30px; border-radius: var(--r-xl, 22px); margin-bottom: 10px;
  background: linear-gradient(135deg, var(--accent-wash, #E4ECE7), var(--surface-2, #f4f4f8)); border: 1px solid var(--line, rgba(127,127,127,.25)); }
.sp-hero .section__sub { max-width: 62ch; }
.sp-sbox { margin-top: 18px; max-width: 680px; }
.sp-sbox .lysearch { background: var(--surface); }
.sp-sbox .lysearch__drop { top: calc(100% + 6px); }
.sp-sbox .lysearch__item.is-active { background: var(--accent-wash); }
.sp-sbox .lysearch__tag { background: var(--accent-wash); color: var(--accent); }
.sp-searchslot .sp-sbox { margin: 4px 0 18px; }
.sp-notice { margin: 6px 0 4px; }
.sp-h2 { font-family: var(--font-display); font-size: 1.3rem; margin: 28px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }

/* topic cards + quick actions + popular */
.sp-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.sp-cats--small { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.sp-cat { text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 15px; border-radius: var(--r-lg, 16px); cursor: pointer; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); transition: transform .14s var(--ease), box-shadow .14s var(--ease), border-color .14s var(--ease); }
.sp-cat:hover, .sp-cat:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.sp-cat__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); margin-bottom: 4px; }
.sp-cat__ic svg { width: 20px; height: 20px; }
.sp-cat b { font-family: var(--font-display); } .sp-cat small { color: var(--muted); } .sp-cat em { font-style: normal; font-size: .74rem; font-weight: 700; color: var(--accent); margin-top: 4px; }
.sp-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.sp-qbtn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; font-size: .88rem; cursor: pointer; transition: border-color .14s var(--ease), background-color .14s var(--ease), transform .14s var(--ease); }
.sp-qbtn svg { width: 16px; height: 16px; color: var(--accent); }
.sp-qbtn:hover, .sp-qbtn:focus-visible { border-color: var(--accent); background: var(--accent-wash); transform: translateY(-1px); }
.sp-qbtn--danger svg { color: var(--berry); } .sp-qbtn--danger:hover { border-color: var(--berry); background: transparent; }
.sp-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 12px; }
.sp-stat { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg, 16px); background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: border-color .14s var(--ease), box-shadow .14s var(--ease); }
.sp-stat:hover { border-color: var(--accent); box-shadow: var(--shadow-1); }
.sp-stat__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); flex: 0 0 auto; }
.sp-stat__ic svg { width: 19px; height: 19px; }
.sp-stat > span:nth-child(2) { display: grid; min-width: 0; flex: 1; } .sp-stat small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-stat__go { display: inline-flex; align-items: center; gap: 4px; font-size: .78rem; font-weight: 700; color: var(--accent); flex: 0 0 auto; }
.sp-stat__go svg { width: 14px; height: 14px; }
.sp-pop { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 8px; }
.sp-pop__item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-radius: var(--r-md, 12px); background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-weight: 600; font-size: .92rem; transition: border-color .14s var(--ease), background-color .14s var(--ease); }
.sp-pop__item:hover { border-color: var(--accent); background: var(--accent-wash); }
.sp-pop__ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); flex: 0 0 auto; }
.sp-pop__ic svg { width: 16px; height: 16px; } .sp-pop__item > span:nth-child(2) { flex: 1; min-width: 0; }
.sp-pop__item > svg { width: 16px; height: 16px; color: var(--muted); flex: 0 0 auto; }

/* topic page: crumb, article, tip */
.sp-crumb { display: flex; align-items: center; gap: 8px; font-size: .86rem; color: var(--muted); margin-bottom: 6px; }
.sp-crumb a { display: inline-flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 600; }
.sp-crumb svg { width: 15px; height: 15px; }
.sp-arthead { display: flex; align-items: center; gap: 16px; padding: 22px 24px; border-radius: var(--r-xl, 22px); margin-bottom: 8px;
  background: linear-gradient(135deg, var(--accent-wash), var(--surface-2)); border: 1px solid var(--line); }
.sp-arthead__ic { width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink, #fff); flex: 0 0 auto; }
.sp-arthead__ic svg { width: 28px; height: 28px; }
.sp-arthead .section__sub { max-width: 64ch; margin: 2px 0 0; }
.sp-art { display: flex; flex-direction: column; gap: 22px; max-width: 78ch; margin-top: 8px; }
.sp-art__sec h2 { font-family: var(--font-display); font-size: 1.12rem; margin: 0 0 8px; }
.sp-art__sec p { margin: 0 0 10px; color: var(--ink-soft); line-height: 1.65; }
.sp-art a, .sp-faq__a a { color: var(--accent); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.sp-art code, .sp-faq__a code { background: var(--surface-2); padding: 0 5px; border-radius: 4px; font-family: var(--font-mono); font-size: .86em; }
.sp-tip { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--r-md, 12px); background: var(--accent-wash); color: var(--ink); font-size: .92rem; margin: 4px 0 10px; }
.sp-tip svg { width: 18px; height: 18px; color: var(--accent); flex: 0 0 auto; margin-top: 2px; }

/* cards / dashboard panels */
.sp-dash { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.sp-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg, 16px); padding: 18px 18px 16px; box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sp-card--wide { grid-column: 1 / -1; }
.sp-card h3 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 1.02rem; margin: 0; }
.sp-card h3 svg { width: 18px; height: 18px; color: var(--accent); }
.sp-guest { flex-direction: row; align-items: center; gap: 18px; grid-column: 1 / -1; }
.sp-guest h3 { margin: 0 0 4px; font-size: 1.1rem; } .sp-guest p { color: var(--muted); margin: 0 0 12px; max-width: 60ch; }
.sp-card__ic { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); flex: 0 0 auto; }
.sp-card__ic svg { width: 26px; height: 26px; }
.sp-id { display: flex; align-items: center; gap: 12px; } .sp-id b { display: block; } .sp-id small { color: var(--muted); }
.sp-avatar { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--accent), var(--mint)); }
.sp-dl { display: grid; gap: 8px; margin: 0; }
.sp-dl > div { display: flex; justify-content: space-between; gap: 14px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; font-size: .9rem; }
.sp-dl dt { color: var(--muted); } .sp-dl dd { margin: 0; font-weight: 600; text-align: right; }
.sp-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 2px; }
.sp-danger { border-color: var(--berry) !important; color: var(--berry) !important; }
.sp-badge { font-size: .72rem; font-weight: 700; padding: 2px 10px; border-radius: 999px; background: #dcfce7; color: #166534; }
.sp-badge--cancelled { background: #fef3c7; color: #92400e; } .sp-badge--withdrawn { background: #e5e7eb; color: #374151; }
.sp-empty { padding: 14px; border-radius: var(--r-md, 12px); background: var(--surface-2); } .sp-empty p { margin: 4px 0 0; color: var(--muted); font-size: .9rem; }
.sp-tablewrap { overflow-x: auto; }
.sp-table { border-collapse: collapse; width: 100%; font-size: .88rem; }
.sp-table th, .sp-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; } .sp-table th { color: var(--muted); font-weight: 600; }
.sp-switch { display: flex; align-items: center; gap: 10px; cursor: pointer; padding-top: 4px; }
.sp-switch input { width: 18px; height: 18px; accent-color: var(--accent); }
.sp-switch em { margin-left: auto; font-style: normal; font-weight: 700; font-size: .8rem; color: var(--muted); }

/* FAQ */
.sp-faqs { display: flex; flex-direction: column; gap: 8px; }
.sp-faq { border: 1px solid var(--line); border-radius: var(--r-md, 12px); background: var(--surface); overflow: hidden; }
.sp-faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 14px 16px; font-weight: 600; }
.sp-faq summary::-webkit-details-marker { display: none; }
.sp-faq summary::after { content: "+"; margin-left: auto; font-size: 1.3rem; color: var(--accent); line-height: 1; }
.sp-faq[open] summary::after { content: "\2013"; }
.sp-faq[open] { border-color: var(--accent); box-shadow: var(--shadow-1); }
.sp-faq__q { flex: 1; min-width: 0; }
.sp-faq__a { padding: 0 16px 14px; color: var(--ink-soft); display: flex; flex-direction: column; gap: 8px; } .sp-faq__a p { margin: 0; line-height: 1.6; }
.sp-stepsh { font-weight: 700; color: var(--ink); font-size: .85rem; }
.sp-steps { margin: 0 0 8px; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; color: var(--ink-soft); }
.sp-helpful { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: .85rem; color: var(--muted); }

/* diagnostics */
.sp-diag { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 6px 18px; }
.sp-diag li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: .88rem; }
.sp-diag li > span:last-child { grid-column: 2; color: var(--muted); overflow-wrap: anywhere; }
.sp-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: #16a34a; }
.sp-diag .is-warn .sp-dot { background: #f59e0b; } .sp-diag .is-bad .sp-dot { background: #dc2626; }

/* contact + custom topic select + legal buttons */
.sp-contactcard { max-width: 860px; }
.sp-contactgrid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; }
.sp-select { position: relative; }
.sp-select__btn { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 12px 7px 8px; border-radius: var(--r-md, 12px); border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink); cursor: pointer; text-align: left; transition: border-color .14s var(--ease), background-color .14s var(--ease); }
.sp-select__btn:hover, .sp-select__btn[aria-expanded="true"] { border-color: var(--accent); background: var(--surface); }
.sp-select__btn .lysearch__icon { width: 30px; height: 30px; border-radius: 9px; }
.sp-select__label { flex: 1; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-select__chev { width: 18px; height: 18px; color: var(--muted); flex: 0 0 auto; transition: transform .16s var(--ease); }
.sp-select__btn[aria-expanded="true"] .sp-select__chev { transform: rotate(180deg); }
.sp-select__list { top: calc(100% + 6px); max-height: 320px; }
.sp-select__list .lysearch__item { cursor: pointer; }
.sp-select__list .lysearch__item.is-picked { background: var(--accent-wash); }
.sp-select__list .lysearch__item.is-picked b { color: var(--accent); }
.sp-legal { margin-top: 8px; padding-top: 14px; border-top: 1px solid var(--line); }
.sp-legal h4 { margin: 0 0 2px; font-size: .95rem; } .sp-legal .hint { margin: 0 0 10px; }
.sp-legalbtns { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.sp-lbtn { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-md, 12px); background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); font-weight: 600; font-size: .86rem; transition: border-color .14s var(--ease), background-color .14s var(--ease), transform .14s var(--ease); }
.sp-lbtn:hover, .sp-lbtn:focus-visible { border-color: var(--accent); background: var(--accent-wash); transform: translateY(-1px); }
.sp-lbtn__ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); flex: 0 0 auto; }
.sp-lbtn__ic svg { width: 15px; height: 15px; }

/* all articles */
.sp-allart { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px 24px; }
.sp-allart__t { display: flex; align-items: center; gap: 8px; color: var(--ink); margin-bottom: 6px; }
.sp-allart__t svg { width: 18px; height: 18px; color: var(--accent); } .sp-allart__t:hover b { color: var(--accent); }
.sp-allart ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: .86rem; }
.sp-allart li a { color: var(--ink-soft); } .sp-allart li a:hover { color: var(--accent); text-decoration: underline; }

@media (max-width: 800px) { .sp-contactgrid { grid-template-columns: 1fr; } .sp-guest { flex-direction: column; align-items: flex-start; } .sp-hero { padding: 22px 18px; } .sp-arthead { padding: 16px; } }

/* ---- theme-matched scrollbars, site-wide ------------------------------------
   One soft, thin scrollbar for the page, the support centre, dropdown lists,
   modals and text areas (the message box) — brand green, never the OS grey.
   Components that hide their bar on purpose (.pk__feed, .ink-bar__tools…)
   keep doing so: their own rules are more specific than these. */
:root {
  --sb-thumb: color-mix(in srgb, var(--accent) 38%, var(--surface-2));
  --sb-thumb-hover: color-mix(in srgb, var(--accent) 70%, var(--surface-2));
}
* { scrollbar-width: thin; scrollbar-color: var(--sb-thumb) transparent; }
/* Chromium before the standard properties, and Safari */
@supports not (scrollbar-color: auto) {
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--sb-thumb); border-radius: 999px; border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-thumb:hover { background: var(--sb-thumb-hover); border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-corner { background: transparent; }
}
textarea { scrollbar-width: thin; resize: vertical; }
.lysearch__drop, .sp-select__list, .modal, .overlay { scrollbar-color: var(--sb-thumb) transparent; }

/* ---- Support & Legal: legal document grid ---- */
.sp-docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.sp-doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-lg, 16px); background: var(--surface); border: 1px solid var(--line); color: var(--ink); transition: border-color .14s var(--ease), box-shadow .14s var(--ease), transform .14s var(--ease); }
.sp-doc:hover, .sp-doc:focus-visible { border-color: var(--accent); box-shadow: var(--shadow-1); transform: translateY(-1px); }
.sp-doc__ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-wash); color: var(--accent); flex: 0 0 auto; }
.sp-doc__ic svg { width: 19px; height: 19px; }
.sp-doc__t { display: grid; gap: 2px; min-width: 0; flex: 1; } .sp-doc__t b { font-family: var(--font-display); font-weight: 600; font-size: .95rem; } .sp-doc__t small { color: var(--muted); font-size: .78rem; line-height: 1.35; }
.sp-doc__go { color: var(--muted); flex: 0 0 auto; } .sp-doc__go svg { width: 16px; height: 16px; }
.sp-doc:hover .sp-doc__go { color: var(--accent); }
.sp-subh { font-size: .95rem; margin: 16px 0 8px; color: var(--ink-soft); }
.sp-docs--regions { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

/* ---- Support: slow, soft entrances; Articles page ---------------------------- */
@keyframes sp-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes sp-rise { from { opacity: 0; transform: translateY(16px) scale(.985); } to { opacity: 1; transform: none; } }
.sp { animation: sp-in .6s cubic-bezier(.16, 1, .3, 1) backwards; }
.sp-hero, .sp-arthead, .sp-art__sec, .sp-card, .sp-cat, .sp-doc, .sp-pop__item, .sp-qbtn, .sp-stat, .sp-allart__col, .sp-faq, .sp-notice {
  animation: sp-rise .7s cubic-bezier(.16, 1, .3, 1) backwards; animation-delay: calc(var(--d, 0) * 1ms + 60ms);
}
.sp-cats > :nth-child(1), .sp-docs > :nth-child(1), .sp-pop > :nth-child(1), .sp-quick > :nth-child(1), .sp-strip > :nth-child(1), .sp-faqs > :nth-child(1), .sp-art > :nth-child(1), .sp-allart > :nth-child(1), .sp-dash > :nth-child(1) { --d: 40; }
.sp-cats > :nth-child(2), .sp-docs > :nth-child(2), .sp-pop > :nth-child(2), .sp-quick > :nth-child(2), .sp-strip > :nth-child(2), .sp-faqs > :nth-child(2), .sp-art > :nth-child(2), .sp-allart > :nth-child(2), .sp-dash > :nth-child(2) { --d: 110; }
.sp-cats > :nth-child(3), .sp-docs > :nth-child(3), .sp-pop > :nth-child(3), .sp-quick > :nth-child(3), .sp-strip > :nth-child(3), .sp-faqs > :nth-child(3), .sp-art > :nth-child(3), .sp-allart > :nth-child(3), .sp-dash > :nth-child(3) { --d: 180; }
.sp-cats > :nth-child(4), .sp-docs > :nth-child(4), .sp-pop > :nth-child(4), .sp-quick > :nth-child(4), .sp-faqs > :nth-child(4), .sp-art > :nth-child(4), .sp-allart > :nth-child(4) { --d: 250; }
.sp-cats > :nth-child(5), .sp-docs > :nth-child(5), .sp-pop > :nth-child(5), .sp-quick > :nth-child(5), .sp-faqs > :nth-child(5), .sp-art > :nth-child(5) { --d: 320; }
.sp-cats > :nth-child(6), .sp-docs > :nth-child(6), .sp-pop > :nth-child(6), .sp-quick > :nth-child(6), .sp-faqs > :nth-child(6) { --d: 390; }
.sp-cats > :nth-child(n+7), .sp-docs > :nth-child(n+7), .sp-pop > :nth-child(n+7), .sp-quick > :nth-child(n+7), .sp-faqs > :nth-child(n+7) { --d: 460; }
.sp-faq { transition: border-color .3s ease, box-shadow .3s ease; }
.sp-faq summary::after { transition: transform .45s cubic-bezier(.16, 1, .3, 1), color .3s ease; display: inline-block; }
.sp-faq[open] summary::after { transform: rotate(180deg); }
.sp-sbox .lysearch__drop, .sp-select__list { transform-origin: top center; animation: sp-drop .38s cubic-bezier(.16, 1, .3, 1); }
@keyframes sp-drop { from { opacity: 0; transform: translateY(-6px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sp, .sp-hero, .sp-arthead, .sp-art__sec, .sp-card, .sp-cat, .sp-doc, .sp-pop__item, .sp-qbtn, .sp-stat, .sp-allart__col, .sp-faq, .sp-notice, .sp-sbox .lysearch__drop, .sp-select__list { animation: none !important; }
}
.sp-jump { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 6px; }
.sp-jump > span { color: var(--muted); font-size: .86rem; margin-right: 2px; }
.sp-count { font-family: var(--font-body); font-size: .85rem; font-weight: 600; color: var(--muted); }

/* Articles page (footer: Makaleler) */
.artgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; margin-top: 8px; }
.artcard { display: flex; flex-direction: column; border-radius: var(--r-xl, 22px); overflow: hidden; background: var(--surface); border: 1px solid var(--line); color: var(--ink); box-shadow: var(--shadow-1);
  animation: sp-rise .7s cubic-bezier(.16, 1, .3, 1) backwards; transition: transform .2s var(--ease), box-shadow .2s var(--ease), border-color .2s var(--ease); }
.artgrid > :nth-child(2) { animation-delay: .08s; } .artgrid > :nth-child(3) { animation-delay: .16s; } .artgrid > :nth-child(4) { animation-delay: .24s; }
.artcard:hover, .artcard:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--accent); }
.artcard__cover { display: block; aspect-ratio: 16 / 9; background: var(--accent-wash); overflow: hidden; }
.artcard__cover svg { width: 100%; height: 100%; display: block; object-fit: cover; }
.artcard__body { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 18px; }
.artcard__body small { font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); }
.artcard__body b { font-family: var(--font-display); font-size: 1.12rem; line-height: 1.25; }
.artcard__body > span { color: var(--ink-soft); font-size: .9rem; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.artcard__body em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-weight: 700; font-size: .86rem; color: var(--accent); margin-top: 4px; }
.artcard__body em svg { width: 15px; height: 15px; transition: transform .2s var(--ease); } .artcard:hover em svg { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .artcard { animation: none !important; } }

/* ---- Footer: Parent Information System tile (separate site) ---------------- */
.parenttile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 5px; aspect-ratio: 1 / 1; width: 100%; max-width: 176px; justify-self: end; padding: 16px;
  border-radius: var(--r-xl, 22px); color: var(--accent-ink, #fff); overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, var(--accent), color-mix(in srgb, var(--accent) 55%, #12AEC4));
  box-shadow: var(--shadow-2); transition: transform .22s var(--ease), box-shadow .22s var(--ease); }
.parenttile::before { content: ""; position: absolute; inset: auto -30% -40% auto; width: 80%; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.12); z-index: -1; }
.parenttile:hover, .parenttile:focus-visible { transform: translateY(-3px) rotate(-.4deg); box-shadow: var(--shadow-3); }
.parenttile__ic { position: absolute; top: 14px; left: 14px; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: rgba(255,255,255,.18); }
.parenttile__ic svg { width: 30px; height: 30px; }
.parenttile b { font-family: var(--font-display); font-size: .98rem; line-height: 1.2; }
.parenttile small { font-size: .74rem; opacity: .92; line-height: 1.3; }
.parenttile__host { font-style: normal; font-size: .68rem; font-weight: 700; letter-spacing: .04em; opacity: .75; }
.parenttile__go { position: absolute; top: 16px; right: 16px; opacity: .85; transition: transform .22s var(--ease); }
.parenttile__go svg { width: 18px; height: 18px; transform: rotate(-45deg); }
.parenttile:hover .parenttile__go { transform: translate(2px, -2px); }
@media (max-width: 900px) { .parenttile { justify-self: start; } }
@media (prefers-reduced-motion: reduce) { .parenttile { transition: none; } }

/* ---- parent link: button under the parent tile + the link window ---- */
.parentcol { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 176px; justify-self: end; }
.parentcol .parenttile { max-width: none; }
.parentlink { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 14px; border: 1.5px solid var(--accent); background: transparent; color: var(--accent); font: 700 .86rem var(--font-body, inherit); cursor: pointer; transition: background .2s, color .2s, transform .2s; }
.parentlink svg { width: 16px; height: 16px; flex: none; }
.parentlink:hover, .parentlink:focus-visible { background: var(--accent); color: var(--accent-ink, #fff); transform: translateY(-1px); }
.parentlink--on { border-color: var(--line-strong, var(--line)); color: var(--ink-soft, inherit); }
.parentlink--on:hover, .parentlink--on:focus-visible { background: #B3402B; border-color: #B3402B; color: #fff; }
.parentlink__badge { display: flex; gap: 6px; align-items: flex-start; margin: 0; font-size: .74rem; line-height: 1.3; color: var(--muted); }
.parentlink__badge svg { width: 14px; height: 14px; flex: none; margin-top: 1px; color: var(--accent); }
@media (max-width: 900px) { .parentcol { justify-self: start; } }
.plbtns { display: flex; gap: 10px; flex-wrap: wrap; }
.plbtns .btn { flex: 1 1 140px; }
.plcode { font: 800 clamp(1.8rem, 7vw, 2.4rem) ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: .16em; text-align: center; padding: 18px 12px; margin: 12px 0 8px; border-radius: 16px; background: var(--accent-wash, var(--surface-2)); color: var(--accent); user-select: all; }
.plcode__meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; color: var(--muted); font-size: .9rem; }
.pllist { margin: 0 0 16px; padding: 0; list-style: none; display: grid; gap: 8px; }
.pllist li { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); font-weight: 650; }
@media (prefers-reduced-motion: reduce) { .parentlink { transition: none; } }
.btn--danger { background: #B3402B; color: #fff; border-color: #B3402B; }
.btn--danger:hover { filter: brightness(.92); }

/* Ink in calc-only mode (SAT exam rules): the drawing layers are switched off, so taps and text selection reach the page. */
.ink-surface[data-ink-calconly] > .ink-layer, .ink-surface[data-ink-calconly] > .ink-lasso { display: none; pointer-events: none; }

/* ==========================================================================
   SAT practice tests (features/satmock.js) — the hub, the Bluebook-style
   exam screen, the results. Exam screen = a fixed full-viewport layer: the
   site's chrome stays out of the room, exactly one tool (the calculator,
   Math only) floats above it (calc is z-index 50).
   ========================================================================== */
body.is-satmock { overflow: hidden; }
body.is-satmock #yeldock, body.is-satmock #cookiebar, body.is-satmock #header, body.is-satmock #sidebar, body.is-satmock #footer, body.is-satmock #mobilenav { display: none !important; }

.smbanner { display: flex; align-items: center; gap: 16px; width: 100%; margin: 0 0 22px; padding: 18px 22px; border-radius: 22px; text-align: left; text-decoration: none; cursor: pointer;
  background: linear-gradient(120deg, var(--brand, #0F2D21), color-mix(in srgb, var(--accent) 72%, #000)); color: #fff; box-shadow: var(--shadow-2, 0 6px 22px rgba(0,0,0,.15)); border: 0;
  transition: transform .2s var(--ease, ease), box-shadow .2s; }
.smbanner:hover, .smbanner:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-3, 0 12px 30px rgba(0,0,0,.2)); }
.smbanner__ic { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: 16px; background: rgba(255,255,255,.16); }
.smbanner__ic svg { width: 28px; height: 28px; }
.smbanner__t { display: grid; gap: 2px; flex: 1; min-width: 0; }
.smbanner__t b { font-size: 1.15rem; font-family: var(--font-display, inherit); }
.smbanner__t span { font-size: .9rem; opacity: .88; line-height: 1.35; }
.smbanner__go { font-weight: 800; white-space: nowrap; }
@media (max-width: 640px) { .smbanner__go { display: none; } }

.smhub { display: grid; gap: 22px; padding-bottom: 60px; }
.smhub__head h1 { margin: 6px 0 4px; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.smhub__sub { color: var(--muted); max-width: 60ch; margin: 0; }
.smcards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.smcard { display: grid; gap: 10px; padding: 22px; border-radius: 22px; background: var(--surface); border: 1.5px solid var(--line); align-content: start; }
.smcard:first-child { border-color: var(--accent); }
.smcard h3 { margin: 0; font-size: 1.2rem; } .smcard p { margin: 0; color: var(--muted); font-size: .94rem; }
.smcard__meta { display: flex; gap: 10px; font-weight: 700; font-size: .85rem; color: var(--ink-soft, var(--ink)); }
.smcard__meta span { padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.smresume { display: flex; gap: 14px; align-items: center; justify-content: space-between; padding: 16px 20px; border-radius: 18px; background: var(--accent-wash, var(--surface-2)); border: 1.5px solid var(--accent); flex-wrap: wrap; }
.smresume div { display: grid; } .smresume span { color: var(--muted); font-size: .9rem; }
.smgrid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.smbox { padding: 22px; border-radius: 22px; background: var(--surface); border: 1.5px solid var(--line); display: grid; gap: 12px; align-content: start; }
.smbox h2 { margin: 0; font-size: 1.15rem; }
.smrules { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.smnote { margin: 0; color: var(--muted); font-size: .86rem; line-height: 1.45; }
.smtable { width: 100%; border-collapse: collapse; font-size: .92rem; }
.smtable th, .smtable td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.smstats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.smstats div { display: grid; padding: 14px; border-radius: 16px; background: var(--surface-2); } .smstats b { font-size: 1.6rem; } .smstats span { font-size: .82rem; color: var(--muted); }
.smhist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.smhist li { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-radius: 14px; background: var(--surface-2); }
.smhist__d { color: var(--muted); font-size: .85rem; min-width: 96px; } .smhist__t { font-size: 1.3rem; } .smhist__p { flex: 1; font-size: .9rem; } .smhist__s { color: var(--muted); font-size: .85rem; }

/* ---- the exam room ---- */
.sm { position: fixed; inset: 0; z-index: 48; display: grid; grid-template-rows: auto 1fr auto; background: var(--surface); color: var(--ink); font-size: 1.02rem; }
.sm--center { grid-template-rows: 1fr; place-items: center; overflow: auto; padding: 24px; }
.sm-load { position: fixed; inset: 0; z-index: 48; display: grid; place-items: center; background: var(--surface); color: var(--muted); font-weight: 700; }
.smhead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 22px; border-bottom: 2px dashed var(--line-strong, var(--line)); }
.smhead__l { display: grid; justify-items: start; } .smhead__l b { font-size: 1rem; }
.smhead__c { display: grid; justify-items: center; gap: 2px; }
.smhead__r { display: flex; justify-content: flex-end; gap: 6px; align-items: center; }
.smclock { display: inline-flex; gap: 8px; align-items: center; font-size: 1.4rem; font-variant-numeric: tabular-nums; } .smclock svg { width: 22px; height: 22px; } .smclock.is-hidden { opacity: .5; }
.smlink { background: none; border: 0; padding: 2px 0; cursor: pointer; color: var(--ink); font: inherit; font-weight: 650; text-decoration: underline; text-underline-offset: 3px; } .smlink--sm { font-size: .8rem; font-weight: 600; }
.smtool { display: grid; justify-items: center; gap: 2px; min-width: 64px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; cursor: pointer; color: var(--ink); font-size: .74rem; font-weight: 650; }
.smtool svg { width: 22px; height: 22px; } .smtool:hover, .smtool.is-on { background: var(--surface-2); } .smtool.is-on { color: var(--accent); }
.smmore { position: relative; } .smmenu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; padding: 6px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-3, 0 10px 30px rgba(0,0,0,.2)); display: grid; z-index: 5; }
.smmenu button { text-align: left; padding: 10px 12px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--ink); font: inherit; } .smmenu button:hover { background: var(--surface-2); }

.smmain { min-height: 0; overflow: auto; }
.smsplit { height: 100%; display: grid; grid-template-columns: 1fr 1fr; }
.smsplit .smpane { overflow: auto; padding: 28px 36px; } .smpane--l { border-right: 2px solid var(--line-strong, var(--line)); }
.smsingle { height: 100%; overflow: auto; display: grid; justify-items: center; align-items: start; } .smsingle .smpane { width: min(760px, 100%); padding: 32px 28px; }
.smpassage p { margin: 0 0 1em; line-height: 1.7; font-size: 1.05rem; } .smpassage__head { font-weight: 800; }
.smfig { margin: 12px 0; }
.smq__bar { display: flex; align-items: center; gap: 12px; padding: 6px 0 10px; margin-bottom: 14px; border-bottom: 2px solid var(--ink); }
.smq__no { min-width: 34px; height: 34px; display: grid; place-items: center; padding: 0 8px; background: var(--ink); color: var(--surface); font-weight: 800; border-radius: 6px; }
.smmark { display: inline-flex; gap: 6px; align-items: center; margin-left: auto; padding: 4px 8px; border: 0; background: none; cursor: pointer; color: var(--ink); font: inherit; font-weight: 650; border-radius: 8px; } .smmark svg { width: 18px; height: 18px; } .smmark:hover { background: var(--surface-2); } .smmark.is-on { color: #B3402B; }
.smq__t { margin: 0 0 18px; line-height: 1.65; font-size: 1.05rem; }
.smopts { display: grid; gap: 12px; }
.smopt { display: flex; align-items: stretch; border: 2px solid var(--line-strong, var(--line)); border-radius: 12px; background: var(--surface); overflow: hidden; transition: border-color .12s; }
.smopt:hover { border-color: var(--ink-soft, var(--ink)); }
.smopt.is-picked { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; background: var(--accent-wash, var(--surface-2)); }
.smopt__main { flex: 1; display: flex; gap: 14px; align-items: center; padding: 12px 14px; border: 0; background: none; cursor: pointer; text-align: left; color: inherit; font: inherit; min-width: 0; }
.smopt__l { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; border: 2px solid currentColor; font-weight: 800; font-size: .9rem; }
.smopt.is-picked .smopt__l { background: var(--accent); border-color: var(--accent); color: var(--accent-ink, #fff); }
.smopt__t { line-height: 1.5; overflow-wrap: anywhere; }
.smopt__x { flex: none; width: 40px; border: 0; border-left: 1px solid var(--line); background: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; } .smopt__x svg { width: 15px; height: 15px; } .smopt__x:hover { background: var(--surface-2); color: var(--ink); }
.smopt.is-struck .smopt__t { text-decoration: line-through; } .smopt.is-struck { opacity: .55; }
.smspr { display: grid; gap: 10px; max-width: 340px; } .smspr label { font-weight: 700; }
.smspr input { font: 800 1.4rem ui-monospace, Menlo, Consolas, monospace; padding: 12px 14px; border: 2px solid var(--ink-soft, var(--ink)); border-radius: 10px; background: var(--surface); color: var(--ink); letter-spacing: .08em; width: 100%; }
.smspr input:focus { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); border-color: var(--accent); }
.smspr__prev { display: flex; gap: 10px; align-items: baseline; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); } .smspr__prev span { color: var(--muted); font-size: .85rem; } .smspr__prev b { font: 800 1.2rem ui-monospace, Menlo, Consolas, monospace; min-height: 1.4em; }

.smfoot { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px 22px; border-top: 2px dashed var(--line-strong, var(--line)); background: var(--surface-2); }
.smfoot__who { font-weight: 800; } .smfoot__c { position: relative; justify-self: center; } .smfoot__r { justify-self: end; display: flex; gap: 10px; }
.smnavbtn { display: inline-flex; gap: 10px; align-items: center; padding: 9px 18px; border: 0; border-radius: 999px; background: var(--ink); color: var(--surface); cursor: pointer; font: inherit; font-weight: 750; } .smnavbtn svg { width: 16px; height: 16px; }
.smstep { padding: 10px 26px; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-ink, #fff); cursor: pointer; font: inherit; font-weight: 750; } .smstep[disabled] { opacity: .4; cursor: not-allowed; } .smstep:hover:not([disabled]) { filter: brightness(1.08); }
.smnav { position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translateX(-50%); width: min(480px, 92vw); padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line-strong, var(--line)); box-shadow: var(--shadow-3, 0 14px 40px rgba(0,0,0,.25)); display: grid; gap: 12px; z-index: 6; }
.smnav__h { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .smnav__r { justify-self: center; }
.smx { border: 0; background: none; cursor: pointer; color: var(--muted); padding: 4px; border-radius: 8px; display: grid; } .smx svg { width: 18px; height: 18px; } .smx:hover { background: var(--surface-2); color: var(--ink); }
.smgridnav { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 10px; }
.smcell { position: relative; height: 42px; display: grid; place-items: center; border-radius: 8px; border: 2px dashed var(--ink-soft, var(--ink)); background: none; cursor: pointer; font-weight: 750; color: var(--accent); font-size: .95rem; }
.smcell--done { border-style: solid; border-color: var(--accent); background: var(--accent); color: var(--accent-ink, #fff); }
.smcell.is-cur { outline: 3px solid var(--ink); outline-offset: 2px; } .smcell svg { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; color: var(--ink); }
.smcell__f { position: absolute; top: -7px; right: -7px; width: 18px; height: 18px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: #B3402B; } .smcell__f svg { position: static; transform: none; width: 12px; height: 12px; color: #B3402B; }
.smlegend { display: flex; gap: 16px; flex-wrap: wrap; font-size: .82rem; color: var(--ink-soft, var(--ink)); } .smlegend span { display: inline-flex; gap: 6px; align-items: center; }
.smlegend i.smcell { width: 22px; height: 22px; border-width: 2px; display: inline-grid; cursor: default; } .smlegend i.smcell svg { position: static; transform: none; width: 12px; height: 12px; } .smcell--cur2 { border: 0 !important; } .smcell--flag { border: 0 !important; color: #B3402B; }
.smreview { width: min(760px, 100%); margin: 0 auto; padding: 36px 24px; display: grid; gap: 16px; justify-items: stretch; text-align: center; } .smreview h1 { margin: 0; } .smreview .smlegend { justify-content: center; } .smreview .smgridnav { text-align: center; }
.smdlg { position: absolute; inset: 0; background: rgba(10,20,15,.55); display: grid; place-items: center; z-index: 10; padding: 20px; }
.smdlg__box { width: min(640px, 100%); max-height: 86vh; overflow: auto; background: var(--surface); border-radius: 16px; padding: 22px 26px; box-shadow: var(--shadow-3, 0 20px 50px rgba(0,0,0,.4)); } .smdlg__box--wide { width: min(760px, 100%); }
.smdlg__h { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 12px; align-items: center; margin-bottom: 10px; }   /* the close button sits on the left: the calculator window floats over the right */ .smdlg__b p, .smdlg__b li { line-height: 1.6; }
.smref { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; } .smref__c { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); display: grid; gap: 4px; } .smref__c span { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .95rem; }
.smintro { width: min(720px, 100%); display: grid; gap: 14px; justify-items: start; }
.smintro__tag { padding: 6px 14px; border-radius: 999px; background: var(--accent-wash, var(--surface-2)); color: var(--accent); font-weight: 800; font-size: .85rem; }
.smintro h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); } .smintro__meta { margin: 0; color: var(--muted); } .smintro__dir { padding: 16px 20px; border-radius: 16px; background: var(--surface-2); font-size: .94rem; max-height: 38vh; overflow: auto; } .smintro__dir p { margin: 0 0 .7em; line-height: 1.55; }
.smbreak { display: flex; gap: 14px; align-items: baseline; padding: 14px 20px; border-radius: 16px; background: var(--surface-2); } .smbreak b { font-size: 2rem; font-variant-numeric: tabular-nums; }

@media (max-width: 860px) {
  .sm { font-size: 1rem; }
  .smhead { grid-template-columns: 1fr auto; padding: 8px 12px; } .smhead__r { grid-column: 1 / -1; justify-content: flex-start; }
  .smsplit { display: block; overflow: auto; } .smsplit .smpane { overflow: visible; padding: 18px 16px; } .smpane--l { border-right: 0; border-bottom: 2px solid var(--line-strong, var(--line)); }
  .smfoot { grid-template-columns: auto 1fr; padding: 8px 12px; } .smfoot__who { display: none; } .smfoot__c { grid-column: 1; justify-self: start; } .smfoot__r { grid-column: 2; }
  .smstep { padding: 9px 18px; }
}

/* ---- results ---- */
.smres { display: grid; gap: 18px; padding-bottom: 60px; }
.smres__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.smres__hero { display: grid; gap: 16px; grid-template-columns: minmax(220px, 1fr) 2fr; align-items: stretch; }
@media (max-width: 720px) { .smres__hero { grid-template-columns: 1fr; } }
.smres__tot { display: grid; gap: 4px; align-content: center; padding: 26px; border-radius: 24px; color: #fff; background: linear-gradient(135deg, var(--brand, #0F2D21), color-mix(in srgb, var(--accent) 70%, #000)); }
.smres__tot b { font-size: clamp(3rem, 8vw, 4.6rem); line-height: 1; font-family: var(--font-display, inherit); } .smres__tot span { opacity: .85; font-weight: 700; } .smres__tot small { opacity: .75; }
.smres__parts { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.smscore { display: grid; gap: 4px; align-content: center; padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1.5px solid var(--line); } .smscore span { color: var(--muted); font-weight: 700; } .smscore b { font-size: 2.4rem; line-height: 1; } .smscore small { color: var(--muted); }
.smbar { display: grid; grid-template-columns: minmax(120px, 230px) 1fr auto; gap: 12px; align-items: center; font-size: .92rem; }
.smbar__t { height: 12px; border-radius: 999px; background: var(--surface-2); overflow: hidden; } .smbar__f { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--accent); }
.smfilters { display: flex; gap: 8px; flex-wrap: wrap; }
.smlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.smitem { border: 1.5px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface); } .smitem.is-ok { border-left: 5px solid var(--accent); } .smitem.is-bad { border-left: 5px solid #B3402B; } .smitem.is-skip { border-left: 5px solid var(--muted); }
.smitem__h { width: 100%; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 0; background: none; cursor: pointer; font: inherit; color: inherit; text-align: left; } .smitem__h b { min-width: 28px; } .smitem__h span { flex: 1; color: var(--ink-soft, var(--ink)); } .smitem__h em { font-style: normal; font-weight: 800; } .smitem__f { color: #B3402B; display: inline-grid; } .smitem__f svg { width: 16px; height: 16px; }
.smitem__b { padding: 4px 18px 18px; display: grid; gap: 10px; } .smitem__o { margin: 0; padding-left: 1.6em; display: grid; gap: 4px; } .smitem__o .is-right { color: var(--accent); font-weight: 750; } .smitem__o .is-miss { color: #B3402B; text-decoration: line-through; }
.smsteps { padding: 12px 14px; border-radius: 12px; background: var(--surface-2); } .smsteps ol { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 4px; }
.smres__act { display: flex; justify-content: center; }
@media (prefers-reduced-motion: reduce) { .smbanner, .smopt { transition: none; } }
.smtable__g th { background: var(--surface-2); font-size: .8rem; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft, var(--ink)); }
@media (max-width: 860px) {
  .smnav { position: fixed; left: 10px; right: 10px; bottom: 66px; width: auto; transform: none; max-height: 70vh; overflow: auto; }
}

/* ---- SAT room: favourite + report buttons, report dialog (kept above the calculator window) ---- */
.smq__tools { display: inline-flex; gap: 2px; margin-left: 4px; }
.smicon { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; cursor: pointer; color: var(--muted); }
.smicon svg { width: 19px; height: 19px; } .smicon:hover { background: var(--surface-2); color: var(--ink); } .smicon.is-on { color: #C0392B; }
.smitem__tools { display: flex; gap: 4px; justify-content: flex-end; }
.smdlg { position: fixed; z-index: 60; }
.smrp { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.smrp__t { width: 100%; min-height: 80px; padding: 10px 12px; margin-bottom: 12px; border: 1.5px solid var(--line-strong, var(--line)); border-radius: 12px; background: var(--surface); color: var(--ink); font: inherit; resize: vertical; }
.smspark { margin: 0 0 14px; color: var(--accent); } .smspark svg { width: 100%; max-width: 360px; height: 64px; display: block; } .smspark figcaption { font-size: .82rem; color: var(--muted); margin-top: 4px; }

/* ---- ExamRun setup: what SAT exam mode is ---- */
.xr__satnote { margin: 12px 0 14px; padding: 14px 16px; border-radius: 14px; background: var(--accent-wash, var(--surface-2)); border: 1.5px solid color-mix(in srgb, var(--accent) 35%, var(--line)); }
.xr__satnote b { display: block; margin-bottom: 6px; }
.xr__satnote ul { margin: 0; padding-left: 1.2em; display: grid; gap: 5px; font-size: .92rem; line-height: 1.45; }
.ex__passage { margin: 0 0 8px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); font-size: .94rem; } .ex__passage p { margin: 0 0 .6em; } .ex__passage p:last-child { margin: 0; }

/* ---- My Progress > Error notebook ---- */
.eb { display: grid; gap: 14px; }
.eb__intro { margin: 0; color: var(--muted); font-size: .92rem; } .eb__count { display: inline-block; margin-left: 6px; font-weight: 700; color: var(--ink); }
.eb__bar { display: flex; gap: 10px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.eb__groups { flex-wrap: wrap; }
.eb__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.eb__item { border: 1.5px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; border-left: 5px solid #B3402B; } .eb__item.is-fixed { border-left-color: var(--accent); opacity: .8; }
.eb__head { width: 100%; display: grid; gap: 4px; padding: 12px 14px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; color: inherit; }
.eb__prompt { font-weight: 650; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.eb__meta { font-size: .8rem; color: var(--muted); }
.eb__body { padding: 2px 16px 16px; display: grid; gap: 10px; }
.eb__passage { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); } .eb__passage p { margin: 0 0 .6em; line-height: 1.6; } .eb__passage p:last-child { margin: 0; }
.eb__q { margin: 0; line-height: 1.6; }
.eb__opts { margin: 0; padding-left: 1.6em; display: grid; gap: 4px; } .eb__opts .is-right { color: var(--accent); font-weight: 750; } .eb__opts .is-miss { color: #B3402B; text-decoration: line-through; }
.eb__steps { padding: 10px 12px; border-radius: 10px; background: var(--surface-2); } .eb__steps ol { margin: 6px 0 0; padding-left: 1.3em; display: grid; gap: 4px; }
.eb__acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---- entrance: the daily greeting and the "Why lyeli?" sheet ---- */
.brush__hello { font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.1; margin: 4px 0 10px; }
.brush__why { margin-left: auto; }
@media (max-width: 640px) { .brush__why { margin-left: 0; } }
.why { list-style: none; margin: 8px 0 12px; padding: 0; display: grid; gap: 10px; max-height: min(62vh, 640px); overflow: auto; padding-right: 4px; }
.why__item { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-radius: 16px; background: var(--surface-2); border: 1.5px solid transparent; }
.why__item b { display: block; font-size: 1.02rem; } .why__item p { margin: 2px 0 0; color: var(--muted); font-size: .9rem; line-height: 1.45; }
.why__n { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--accent); color: var(--accent-ink, #fff); font-weight: 800; font-size: .85rem; }
.why__item--top { background: var(--accent-wash, var(--surface-2)); border-color: var(--accent); }
.why__item--top b { font-size: 1.25rem; }
.why__quality { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: var(--surface); font-size: .88rem; line-height: 1.5; color: var(--ink-soft, var(--ink)); }

/* ---- sheets that grow out of the button that opened them (Why lyeli?, the daily report) ---- */
.overlay--slow { animation-duration: .5s; }
.modal--grow { animation: modal-grow .68s cubic-bezier(.22, 1, .36, 1) both; transform-origin: center; }
@keyframes modal-grow {
  from { opacity: 0; transform: translate(var(--gx, 0), var(--gy, 0)) scale(.08); border-radius: 40px; }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; }
}
.drep--sheet { width: 100%; padding: 0; border: 0; box-shadow: none; background: transparent; font-size: .9rem; }
@media (prefers-reduced-motion: reduce) { .modal--grow { animation: none; } }


/* ---- Velinle paylasilanlar penceresi ---- */
.parentlink--share { margin-top: 6px; border-color: var(--line-strong, var(--line)); color: var(--ink-soft, inherit); }
.parentlink--share:hover, .parentlink--share:focus-visible { background: var(--accent-wash); color: var(--accent); border-color: var(--accent); }
.pshare__h { margin: 18px 0 8px; font: 800 .74rem var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pshare__h--yes { color: var(--accent); }
.pshare__h--no { color: var(--berry, #B3402B); }
.pshare { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pshare__row { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.pshare__row b { display: block; font-size: .92rem; }
.pshare__row small { display: block; color: var(--muted); font-size: .8rem; margin-top: 2px; }
.pshare__v { flex: 0 0 auto; max-width: 52%; text-align: right; font-weight: 800; color: var(--accent); font-size: .9rem; overflow-wrap: anywhere; }
.pshare__row--no { align-items: center; justify-content: flex-start; background: var(--berry-wash, #FBE6EA); border-color: transparent; }
.pshare__x { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--berry, #B3402B); color: #fff; }
.pshare__x svg { width: 12px; height: 12px; }
.pshare__how { margin: 0 0 14px; padding-left: 1.2em; display: grid; gap: 6px; color: var(--ink-soft); font-size: .88rem; }

/* solver-pro: kayıtlı detaylı çözüm (AI'siz) ve "neden anlamadın?" çipleri */
.xr__sol { margin: 0 0 14px; }
.xr__sol h4 { margin: 0 0 6px; font: 700 .92rem var(--font-display); color: var(--accent); }
.xr__sol p { margin: 0; font-size: .93rem; line-height: 1.5; color: var(--ink-soft); }
.xr__sollist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: .93rem; line-height: 1.45; color: var(--ink-soft); }
.xr__sollang { margin: 0 0 10px; }
.xr__note { margin: 0 0 10px; font-size: .86rem; color: var(--muted); }
.xr__why { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 12px 0 8px; }
.xr__why > span { font-size: .82rem; font-weight: 700; color: var(--muted); margin-right: 2px; }
.xr__chip { border: 1px solid var(--line); background: var(--surface); color: var(--ink-soft); border-radius: 999px; padding: 6px 11px; font: 600 .8rem var(--font-body); cursor: pointer; }
.xr__chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.xr__chip:disabled { opacity: .55; cursor: default; }

/* Tablet/phone: the YelAI mark's endless "breathe" keeps a layer animating (and repainting) all the time, which shows up as hitches while scrolling or writing */
@media (pointer: coarse) {
  .yeldock__stage > svg, .yelstage > svg, .yelai-mark { animation: none; }
}

/* Hand tool: the ink layer lets every touch through, so the page behaves as plain touch (taps press, fingers scroll) */
.ink-surface[data-ink-tool="hand"] > .ink-layer--live { pointer-events: none; }

/* credits row in the account menu: informational, not a button */
.menu__item--static { cursor: default; pointer-events: auto; }
.menu__item--static:hover { background: transparent; }
.menu__item--static b { margin-left: 2px; font-variant-numeric: tabular-nums; }

/* tablet and phone: the quick-links group (Continue / Today's plan / Ask YelAI) is not shown — the page context and the tiles are enough */
@media (max-width: 900px), (pointer: coarse) { .sidebar__ctx[data-ctx="shortcuts"] { display: none; } }

/* plans page: the extra-credits link sits next to the monthly / yearly switch */
.planbar .plantopup { margin-inline: 4px; }