/* ===========================================================================
   Debate — stylesheet
   Design language carried over from Yalla (same iOS-native look, tokens, and
   components), with new pieces for the knowledge card player, quiz, debate mode,
   and the field-mastery dashboards. Single stylesheet, no build step.
   =========================================================================== */

  :root{
    color-scheme: light;
    --bg:#f2f2f7; --bg2:#e9ebf1; --card:#ffffff; --row:#f4f4f8; --field:#eff0f5;
    --ink:#1c1c1e; --l2:#6e6e73; --l3:#a6a6ac;
    --sep:rgba(60,60,67,.11);
    --accent:#e8551c; --accent-soft:rgba(232,85,28,.10);
    --grad:linear-gradient(180deg,#f0641f 0%,#e8551c 100%);
    --segtrack:#e8e8ee; --segthumb:#ffffff;
    --track:#e6e6eb; --grabber:#c7c7cc; --sheetbg:#ffffff; --chartbg:#f4f4f8;
    --shadow:0 1px 2px rgba(17,17,26,.03), 0 6px 20px -16px rgba(17,17,26,.10);
    --line:rgba(17,17,26,.045);
    --hi:rgba(255,255,255,.65);
    --accent-glow:rgba(255,90,40,.40);
    --red:#ff3b30; --green:#2f9e44; --blue:#1d72c2;
    --r-lg:22px; --r-md:14px; --r-sm:10px;
    /* one spacing scale — every margin/padding routes through these seven steps */
    --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
    --gutter:var(--sp-4);   /* page horizontal inset + block rhythm */
    /* ---- type system: eight roles, three weights (theme-independent, inherited into dark) ---- */
    --fw-reg:400; --fw-med:600; --fw-bold:700;
    --fs-display:31px; --fs-title:21px; --fs-headline:17px; --fs-body:16px; --fs-callout:15px; --fs-foot:13px; --fs-label:12px;
    --lh-display:1.05; --lh-title:1.18; --lh-headline:1.3; --lh-body:1.6;
    --tr-display:-.02em; --tr-title:-.015em; --tr-headline:-.01em; --tr-label:.1em;
  }
  html.dark{
    color-scheme: dark;
    --bg:#000000; --bg2:#0a0a0c; --card:#1c1c1e; --row:#2a2a2c; --field:#2c2c2e;
    --ink:#ffffff; --l2:#98989e; --l3:#636366;
    --sep:rgba(84,84,88,.45);
    --accent:#ff7a3a; --accent-soft:rgba(255,122,58,.16);
    --grad:linear-gradient(180deg,#ff8a4d 0%,#ff6a2a 100%);
    --segtrack:#0e0e10; --segthumb:#3a3a3c;
    --track:#0e0e10; --grabber:#48484a; --sheetbg:#1c1c1e; --chartbg:#222226;
    --shadow:0 1px 1px rgba(0,0,0,.35), 0 8px 24px -18px rgba(0,0,0,.7);
    --line:rgba(255,255,255,.06);
    --hi:rgba(255,255,255,.055);
    --accent-glow:rgba(255,122,58,.38);
    --red:#ff453a; --green:#51cf66; --blue:#4dabf7;
    --r-lg:22px; --r-md:14px; --r-sm:10px;
  }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; text-size-adjust:100%;}
  html,body{ touch-action:manipulation; }
  html,body{ color:var(--ink);
    font-family:-apple-system,"SF Pro Text","SF Pro Display","Helvetica Neue",system-ui,sans-serif;
    font-variant-numeric:tabular-nums; }
  html{ background:var(--bg); transition:background .25s ease; }
  body{ max-width:540px; margin:0 auto; padding:0 16px calc(80px + env(safe-area-inset-bottom)); min-height:100vh; }
  html, body{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
  input, textarea, select, [contenteditable]{ -webkit-user-select:text; user-select:text; -webkit-touch-callout:default; }
  body::before{ content:""; position:fixed; top:0; left:0; right:0; height:100vh; z-index:-1; pointer-events:none;
    background:
      radial-gradient(120% 46% at 50% -6%, color-mix(in srgb, var(--accent) 6%, transparent) 0%, transparent 58%),
      var(--bg);
    transition:background .25s ease; }

  /* ===== launch splash ===== */
  .splash{ position:fixed; top:0; left:0; right:0; height:100vh; z-index:9999; pointer-events:none;
    display:flex; align-items:center; justify-content:center;
    background:linear-gradient(165deg,#f0641f 0%,#e8551c 100%);
    opacity:1; transition:opacity .42s ease; }
  .splash.gone{ opacity:0; }
  .splashInner{ display:flex; flex-direction:column; align-items:center; gap:18px;
    transform:translateY(-4%); animation:splashRise .5s ease both; }
  .splashLogo{ filter:drop-shadow(0 6px 18px rgba(0,0,0,.18)); }
  .splashWord{ color:#fff; font-size:30px; font-weight:800; letter-spacing:.5px; }
  @keyframes splashRise{ from{ opacity:0; transform:translateY(2%) scale(.96); } to{ opacity:1; transform:translateY(-4%) scale(1); } }
  .wordmark{ font-size:17px; font-weight:800; letter-spacing:.4px; background:var(--grad); -webkit-background-clip:text; background-clip:text; color:transparent; }

  .statusbar-bg{ position:fixed; top:0; left:0; right:0; height:env(safe-area-inset-top); z-index:40; pointer-events:none;
    background:color-mix(in srgb, var(--bg) 88%, transparent); }

  /* ===== header / nav chrome ===== */
  .iconbtn{ background:none; border:none; color:var(--accent); cursor:pointer; padding:12px; display:flex; align-items:center; transition:transform .12s, opacity .12s; }
  .iconbtn:active{ transform:scale(.86); opacity:.7; }
  .iconbtn svg{ width:25px; height:25px; }
  .titleBtn{ cursor:pointer; -webkit-tap-highlight-color:transparent; }
  .titleBtn:active{ opacity:.6; }
  .titleBtn .tchev{ width:22px; height:22px; color:var(--l3); vertical-align:-3px; margin-left:4px; }
  .largeTitle{ font-size:var(--fs-display); font-weight:var(--fw-bold); letter-spacing:var(--tr-display); line-height:var(--lh-display); padding: calc(env(safe-area-inset-top) + 14px) 0 16px; }
  .largeTitle .ltmain{ display:flex; align-items:center; gap:12px; }
  .largeTitle .ltmain .titleBtn{ flex:1; min-width:0; line-height:1.08; }
  .largeTitle .ltmain .iconbtn{ flex:0 0 auto; align-self:flex-start; margin-top:2px; }
  .largeTitle small{ display:block; font-size:15px; font-weight:500; color:var(--l2); letter-spacing:0; margin-top:8px; }
  .modebtn{ flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; gap:6px; background:var(--accent-soft); color:var(--accent); border:none; font-family:inherit; font-size:13px; font-weight:600; padding:6px 11px; border-radius:16px; cursor:pointer; line-height:1; transition:transform .12s; }
  .modebtn:active{ transform:scale(.95); }
  .ic{ width:16px; height:16px; vertical-align:-3px; }
  .btn .ic{ margin-right:8px; }

  /* ===== pages + swipe pager + tab bar ===== */
  .page{ display:none; }
  .page.active{ display:block; animation:pagein .26s ease; }
  @keyframes pagein{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
  #shell{ position:fixed; top:0; left:0; right:0; height:100vh; max-width:540px; margin:0 auto; overflow:hidden; z-index:1; }
  #pager{ position:absolute; inset:0; overflow:hidden; }
  #track{ display:flex; height:100%; }
  #track.anim{ transition:transform .3s cubic-bezier(.22,.61,.36,1); }
  #pager .page, #pager .page.active{ display:block; animation:none; flex:0 0 100%; width:100%; height:100%;
    overflow-y:auto; overscroll-behavior-y:contain; padding:0 16px calc(72px + env(safe-area-inset-bottom)); }
  #pager .page, .sheetbody{ scrollbar-width:none; -ms-overflow-style:none; }
  #pager .page::-webkit-scrollbar, .sheetbody::-webkit-scrollbar{ width:0; height:0; display:none; }
  .tabbar{ position:absolute; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center;
    padding:9px 8px calc(9px + env(safe-area-inset-bottom)); border-top:.5px solid var(--sep);
    background:color-mix(in srgb, var(--bg) 88%, transparent);
    transition:transform .3s cubic-bezier(.4,0,.2,1); will-change:transform; }
  .tabitem{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; background:none; border:none; cursor:pointer;
    color:var(--l3); transition:color .15s; -webkit-tap-highlight-color:transparent; }
  .tabitem svg{ width:26px; height:26px; transition:transform .12s; }
  .tabitem span{ display:block; font-size:10px; font-weight:600; letter-spacing:.01em; }
  .tabitem.active{ color:var(--accent); }
  .tabitem .on{ display:none; }              /* active tab fills in (weight, not just tint) */
  .tabitem.active .off{ display:none; }
  .tabitem.active .on{ display:block; }
  .tabitem:active svg{ transform:scale(.9); }
  body.kb .tabbar{ display:none; }

  /* ===== cards / blocks ===== */
  .group{ background:var(--card); border:.5px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:var(--sp-4); box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); }
  .pad{ padding:20px; }
  .row{ display:flex; gap:10px; }
  .ed-label{ font-size:var(--fs-label); color:var(--l3); font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); margin:var(--sp-5) 0 var(--sp-2); }
  .subhint{ font-weight:500; color:var(--l3); }
  .mezone{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--l2); text-transform:uppercase; letter-spacing:var(--tr-label); margin:var(--sp-6) 2px var(--sp-3); padding-bottom:var(--sp-2); border-bottom:.5px solid var(--line); }
  .mezone:first-child{ margin-top:4px; }
  .ovk{ font-size:var(--fs-label); color:var(--l3); font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); }
  .ovbig{ font-size:24px; font-weight:var(--fw-med); letter-spacing:var(--tr-title); margin-top:4px; line-height:1.1; }
  .ovmeta{ font-size:14px; color:var(--l2); margin-top:8px; font-weight:500; }

  .bar{ height:5px; background:var(--track); border-radius:10px; overflow:hidden; margin:12px 0 2px; }
  .bar > i{ display:block; height:100%; background:var(--grad); border-radius:10px; transition:width .6s cubic-bezier(.2,.8,.2,1); }
  canvas{ max-width:100%; display:block; }

  input{ background:var(--field); border:none; color:var(--ink); border-radius:var(--r-md);
    padding:16px 16px; font-size:17px; font-weight:500; width:100%; outline:none; font-family:inherit; transition:box-shadow .15s; }
  input::placeholder{ color:var(--l3); font-weight:400; }
  input:focus{ box-shadow:0 0 0 2px var(--accent) inset; }

  .btn{ background:var(--grad); color:#fff; border:none; border-radius:var(--r-md); padding:16px 20px;
    font-size:17px; font-weight:600; cursor:pointer; font-family:inherit;
    box-shadow:0 4px 16px -10px var(--accent-glow);
    transition:transform .14s ease, filter .15s, box-shadow .2s, opacity .12s; }
  .btn:active{ transform:scale(.975); filter:brightness(.96); opacity:.96; }
  .btn.sm{ padding:12px 16px; font-size:16px; }
  .btn.tinted{ background:var(--accent-soft); color:var(--accent); box-shadow:none; }
  .btn.plain{ background:transparent; color:var(--l2); font-weight:500; box-shadow:none; }
  .btn.red{ background:transparent; color:var(--red); box-shadow:none; }
  .btn.wide{ width:100%; }
  .btn.dim{ opacity:.45; }

  .stats{ display:flex; border-top:.5px solid var(--sep); }
  .stat{ flex:1; padding:16px 8px; text-align:center; border-right:.5px solid var(--sep); }
  .stat:last-child{ border-right:none; }
  .stat .n{ font-size:24px; font-weight:600; letter-spacing:-.4px; }
  .stat .n.due{ color:var(--accent); }
  .stat .k{ font-size:12px; color:var(--l2); margin-top:4px; font-weight:500; }

  /* ===== segmented control + chips ===== */
  .seg{ display:flex; background:var(--segtrack); border:.5px solid var(--line); border-radius:12px; padding:4px; overflow-x:auto; scrollbar-width:none; margin-bottom:var(--sp-4); }
  .seg::-webkit-scrollbar{ display:none; }
  .seg .s{ flex:1 0 auto; text-align:center; padding:14px 18px; font-size:16px; font-weight:600; color:var(--l2);
    border-radius:8px; cursor:pointer; white-space:nowrap; transition:background .15s,color .15s; }
  .seg .s.active{ background:var(--segthumb); color:var(--ink); box-shadow:0 1px 2px rgba(0,0,0,.10); }
  html.dark .seg .s.active{ box-shadow:none; border:.5px solid rgba(255,255,255,.08); }
  .seg.compact .s{ padding:10px 14px; font-size:14px; }

  /* horizontal scrollers bleed to the page edge: negative inline margin = gutter, padding = gutter,
     so the first chip lines up with the 16px page inset and box-shadows still clear. */
  .chips{ display:flex; gap:7px; overflow-x:auto; -webkit-overflow-scrolling:touch; padding:var(--sp-3) var(--gutter) var(--sp-1); margin-inline:calc(-1*var(--gutter)); scrollbar-width:none; }
  .chips.wrap{ flex-wrap:wrap; overflow-x:visible; margin:0; padding:var(--sp-2) 0 var(--sp-1); }
  .chips::-webkit-scrollbar{ display:none; }
  .chip{ flex:0 0 auto; display:inline-flex; align-items:center; gap:6px; padding:12px 16px; border-radius:20px; font-size:13px; font-weight:600;
    background:var(--row); color:var(--ink); border:.5px solid var(--line); cursor:pointer; white-space:nowrap;
    transition:transform .12s cubic-bezier(.2,.72,.3,1), background .15s, color .15s, border-color .15s; }
  .chip:active{ transform:scale(.94); }
  .chip.on{ background:var(--accent); color:#fff; border-color:var(--accent); }
  .chip.back{ background:var(--field); color:var(--l2); border-color:transparent; font-weight:700; padding-inline:13px; }
  .cdot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }

  /* ===== panels (Me dashboards) ===== */
  .panel{ background:var(--card); border:.5px solid var(--line); border-radius:var(--r-lg); overflow:hidden; margin-bottom:var(--sp-4); box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); }
  .panelhd{ display:flex; align-items:center; justify-content:space-between; padding:16px 18px 4px; }
  .panelt{ display:flex; align-items:center; gap:8px; font-size:var(--fs-headline); font-weight:var(--fw-med); letter-spacing:var(--tr-headline); }
  .panelt svg{ width:19px; height:19px; color:var(--accent); }
  .panelfoot{ padding:6px 18px 16px; font-size:13px; color:var(--l2); line-height:1.4; }
  /* feed status toggle (matches Yalla's segmented control) */
  #feedStatus{ margin:var(--sp-2) 0 var(--sp-4); }
  #feedStatus .s{ flex:1 1 0; min-width:0; }   /* equal thirds, not ragged content-width segments */

  /* field-balance breakdown rows (tap radar to open) */
  .fieldrow{ display:flex; align-items:center; gap:13px; width:100%; padding:12px 4px; background:none; border:none; border-bottom:.5px solid var(--line); text-align:left; cursor:pointer; }
  .fieldrow:last-child{ border-bottom:none; }
  .fieldrow:active{ opacity:.6; }
  .fieldrow .frico{ flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:17px; border-radius:9px; background:color-mix(in srgb, var(--fc) 16%, transparent); }
  .fieldrow .frmain{ flex:1; min-width:0; }
  .fieldrow .frtop{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; margin-bottom:6px; }
  .fieldrow .frlabel{ font-size:15px; font-weight:600; color:var(--ink); }
  .fieldrow .frcount{ font-size:13px; color:var(--l2); flex:0 0 auto; }
  .fieldrow .frbar{ display:block; height:6px; border-radius:3px; background:var(--track); overflow:hidden; }
  .fieldrow .frbar i{ display:block; height:100%; border-radius:3px; background:var(--fc); }

  .insight{ border:.5px solid var(--line); border-left-width:3px; border-radius:12px; padding:16px; background:var(--card); }
  .insight .ititle{ font-size:15px; font-weight:var(--fw-med); letter-spacing:var(--tr-headline); }
  .insight .itext{ font-size:15px; color:var(--l2); line-height:1.5; margin-top:8px; }

  .profcard{ display:flex; align-items:center; gap:14px; padding:16px; background:var(--card); border:.5px solid var(--line); border-radius:var(--r-lg); margin-bottom:var(--sp-4); box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); cursor:pointer; transition:opacity .12s; }
  .profcard:active{ opacity:.7; }
  .profcard .pcav{ width:54px; height:54px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:800; color:#fff; background:var(--grad); }
  .profcard .pcname{ font-size:19px; font-weight:700; letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .profcard .pchint{ font-size:13px; color:var(--l2); margin-top:4px; }
  /* generated-art badge: clip the SVG to the circle, drop the monogram gradient/padding */
  .pcav.art{ background:none; padding:0; overflow:hidden; }
  .pcav.art svg{ width:100%; height:100%; border-radius:50%; }

  /* ===== avatar picker (Profile settings card) ===== */
  .avedit{ display:flex; gap:14px; align-items:flex-start; margin-top:14px; }
  .avedit .avpreview .pcav{ width:64px; height:64px; border-radius:50%; flex:0 0 auto; display:flex; align-items:center; justify-content:center; font-size:26px; font-weight:800; color:#fff; background:var(--grad); }
  .avedit-main{ flex:1; min-width:0; }
  .avedit-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .avedit-top .avlab{ font-size:14px; font-weight:600; color:var(--l2); }
  .avgrid{ display:grid; grid-template-columns:repeat(6,1fr); gap:7px; }
  .avgrid .artbtn{ padding:0; border:1.5px solid transparent; border-radius:11px; overflow:hidden; background:none; cursor:pointer; aspect-ratio:1; line-height:0; transition:transform .1s; }
  .avgrid .artbtn:active{ transform:scale(.92); }
  .avgrid .artbtn.sel{ border-color:var(--accent); box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 30%, transparent); }
  .avgrid .artbtn svg{ width:100%; height:100%; border-radius:9px; }
  .avreset{ margin-top:10px; padding:6px 12px; font-size:13px; font-weight:600; color:var(--l2); background:var(--sep); border:.5px solid var(--line); border-radius:999px; cursor:pointer; }
  .avreset.on{ color:var(--accent); border-color:var(--accent); }

  /* ===== settings disclosure cards ===== */
  .setcard{ background:var(--row); border:.5px solid var(--line); border-radius:14px; margin:0 0 12px; overflow:hidden; }
  .setcard > summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:12px; padding:15px 16px; font-size:16px; font-weight:600; color:var(--ink); }
  .setcard > summary::-webkit-details-marker{ display:none; }
  .setcard > summary:active{ background:var(--sep); }
  .setcard > summary .scicon{ width:21px; height:21px; flex:0 0 auto; color:var(--accent); }
  .setcard > summary .sctitle{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .setcard > summary .scsub{ font-size:13px; font-weight:500; color:var(--l3); }
  .setcard > summary::after{ content:"⌄"; font-size:18px; line-height:1; color:var(--l3); flex:0 0 auto; transition:transform .2s; }
  .setcard[open] > summary{ border-bottom:.5px solid var(--sep); }
  .setcard[open] > summary::after{ transform:rotate(180deg); }
  .setcard .scbody{ padding:2px 16px 16px; }
  .setcard .scbody > .ed-label:first-child{ margin-top:14px; }
  .merow{ display:flex; align-items:center; justify-content:space-between; padding:12px 2px; border-top:.5px solid var(--sep); }
  .merow:first-of-type{ border-top:none; }
  .merow label{ font-size:15px; }
  .meinput{ display:flex; align-items:center; gap:6px; }
  .meinput input{ width:120px; text-align:right; }
  .navlink{ display:flex; align-items:center; justify-content:space-between; width:100%; background:var(--row); border:none; color:var(--ink); cursor:pointer; padding:14px 16px; border-radius:12px; font-size:16px; font-weight:600; transition:opacity .12s; margin-bottom:8px; }
  .navlink:active{ opacity:.6; }
  .navlink .nlsub{ color:var(--l2); font-weight:500; font-size:14px; margin-left:8px; }

  /* ===== achievements ===== */
  .achgrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
  .ach{ background:var(--row); border:.5px solid var(--line); border-radius:var(--r-md); padding:16px 8px 12px; text-align:center; opacity:.5; transition:opacity .2s, transform .12s; }
  .ach:active{ transform:scale(.95); }
  .ach.on{ opacity:1; border-color:var(--accent-soft); }
  .ach .achi{ font-size:24px; line-height:1; }
  .ach .acht{ font-size:13px; font-weight:700; margin-top:8px; letter-spacing:-.1px; }
  .ach .achd{ font-size:11px; color:var(--l2); margin-top:4px; line-height:1.3; }
  .achcap{ font-size:14px; color:var(--l2); margin:2px 0 12px; }
  .achcap b{ color:var(--accent); font-weight:700; }

  /* =========================================================================
     KNOWLEDGE CARD PLAYER  (Learn tab)
     ========================================================================= */
  .sessbar{ display:flex; align-items:center; gap:10px; margin:-2px 0 16px; }
  .sessbar .pbar{ flex:1; height:6px; background:var(--track); border-radius:6px; overflow:hidden; }
  .sessbar .pbar > i{ display:block; height:100%; background:var(--grad); border-radius:6px; transition:width .4s cubic-bezier(.2,.8,.2,1); }
  .sessbar .pcount{ font-size:13px; font-weight:700; color:var(--l2); flex:0 0 auto; min-width:42px; text-align:right; }
  .sessphase{ font-size:var(--fs-label); font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); color:var(--accent); margin:0 2px 10px; }

  .cardstage{ position:relative; }
  .kcard{ background:var(--card); border:.5px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow), inset 0 .5px 0 var(--hi);
    padding:22px 20px; margin-bottom:var(--sp-4); animation:kcardin .3s cubic-bezier(.2,.8,.2,1) both; }
  @keyframes kcardin{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
  .ktop{ display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap; }
  .kfieldtag{ display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; padding:6px 11px; border-radius:14px; color:#fff; }
  .kdepth{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--l3); border:.5px solid var(--line); border-radius:12px; padding:5px 9px; }
  .klevel{ margin-left:auto; font-size:11px; color:var(--l3); font-weight:700; letter-spacing:.5px; }
  .kfact{ font-size:23px; font-weight:var(--fw-med); letter-spacing:var(--tr-title); line-height:1.25; }
  .kyear{ font-size:13px; font-weight:700; color:var(--accent); margin-top:10px; letter-spacing:.3px; }
  .kreveal{ margin-top:18px; }

  /* revealed back of the card */
  .kback{ margin-top:18px; padding-top:18px; border-top:.5px solid var(--sep); animation:fadeup .3s ease both; }
  @keyframes fadeup{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
  .kdetail{ font-size:16px; color:var(--ink); line-height:1.6; }
  .ksource{ display:flex; gap:8px; align-items:flex-start; margin-top:14px; font-size:13px; color:var(--l2); line-height:1.4; }
  .ksource svg{ width:15px; height:15px; flex:0 0 auto; color:var(--l3); margin-top:1px; }
  .ksource a{ color:var(--accent); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:2px; }
  .ksource .ksrcstr{ color:var(--l3); font-style:italic; }
  .kdebate{ margin-top:16px; border-radius:14px; overflow:hidden; border:.5px solid var(--line); }
  .karg{ padding:14px 16px; }
  .karg + .karg{ border-top:.5px solid var(--sep); }
  .karg .klabel{ display:flex; align-items:center; gap:7px; font-size:var(--fs-label); font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); margin-bottom:6px; }
  .karg .klabel svg{ width:14px; height:14px; }
  .karg.deploy{ border-left:3px solid var(--green); }
  .karg.deploy .klabel{ color:var(--green); }
  .karg.counter{ border-left:3px solid var(--blue); }
  .karg.counter .klabel{ color:var(--blue); }
  .karg p{ font-size:15px; color:var(--ink); line-height:1.5; }

  /* recall grade buttons (Review phase) */
  .grades{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:4px; }
  .grade{ border:none; border-radius:12px; padding:14px 6px 11px; cursor:pointer; font-family:inherit; text-align:center; transition:transform .12s, filter .12s; }
  .grade:active{ transform:scale(.94); }
  .grade b{ display:block; font-size:15px; font-weight:700; }
  .grade span{ display:block; font-size:11px; font-weight:600; margin-top:2px; opacity:.8; }
  .grade.again{ background:rgba(255,59,48,.14); color:var(--red); }
  .grade.hard{ background:rgba(240,180,0,.16); color:#9a6a00; }
  html.dark .grade.hard{ color:#ffc566; }
  .grade.good{ background:var(--accent-soft); color:var(--accent); }
  .grade.easy{ background:rgba(47,158,68,.16); color:var(--green); }

  /* ===== quiz ===== */
  .quizq{ font-size:20px; font-weight:var(--fw-med); letter-spacing:var(--tr-headline); line-height:1.3; margin-bottom:var(--sp-4); }
  .quizopts{ display:flex; flex-direction:column; gap:10px; }
  .quizopt{ text-align:left; background:var(--row); border:1.5px solid var(--line); border-radius:14px; padding:16px; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; font-family:inherit; transition:transform .1s, border-color .15s, background .15s; }
  .quizopt:active{ transform:scale(.99); }
  .quizopt.correct{ border-color:var(--green); background:rgba(47,158,68,.12); }
  .quizopt.wrong{ border-color:var(--red); background:rgba(255,59,48,.10); }
  .quizopt.muted{ opacity:.55; }
  .quizopt .qmark{ float:right; font-weight:800; }
  /* typed-answer quizzes (num / detail) */
  .quiztype{ display:flex; flex-direction:column; gap:10px; }
  .qzin{ width:100%; box-sizing:border-box; background:var(--row); border:1.5px solid var(--line); border-radius:14px; padding:15px 16px; font-size:17px; font-weight:600; color:var(--ink); font-family:inherit; }
  .qzin:focus{ outline:none; border-color:var(--accent); }
  .quiztype.done .qzin{ display:flex; align-items:center; justify-content:space-between; }
  .quiztype.done .qzin.correct{ border-color:var(--green); background:rgba(47,158,68,.12); color:var(--ink); }
  .quiztype.done .qzin.wrong{ border-color:var(--red); background:rgba(255,59,48,.10); color:var(--ink); }
  .quiztype.done .qzin .qmark{ font-weight:800; }
  .qzsol{ font-size:14px; color:var(--l2); padding:2px 2px 0; }
  .qzsol b{ color:var(--ink); }

  /* empty / done states */
  .emptystate{ text-align:center; padding:48px 24px; }
  .emptystate .ei{ font-size:46px; }
  .emptystate h3{ font-size:20px; font-weight:750; letter-spacing:-.3px; margin:14px 0 6px; }
  .emptystate p{ font-size:15px; color:var(--l2); line-height:1.5; max-width:300px; margin:0 auto 18px; }

  /* =========================================================================
     TODAY dashboard
     ========================================================================= */
  .streakrow{ display:flex; align-items:center; gap:18px; padding:20px; }
  .streakring{ position:relative; width:88px; height:88px; flex:0 0 auto; }
  .streakring canvas{ width:88px; height:88px; }
  .streakring .srnum{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
  .streakring .srn{ font-size:28px; font-weight:800; letter-spacing:-1px; line-height:1; }
  .streakring .srk{ font-size:10px; font-weight:700; color:var(--l2); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
  .streakinfo{ flex:1; min-width:0; }
  .streakinfo .sit{ font-size:var(--fs-headline); font-weight:var(--fw-med); letter-spacing:var(--tr-headline); }
  .streakinfo .sis{ font-size:14px; color:var(--l2); margin-top:4px; line-height:1.4; }

  .daytiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-2); margin-bottom:var(--sp-4); }
  .daytile{ background:var(--card); border:.5px solid var(--line); border-radius:var(--r-md); padding:16px 8px; text-align:center; box-shadow:var(--shadow); }
  .daytile .dtn{ font-size:22px; font-weight:750; letter-spacing:-.4px; }
  .daytile .dtn.hot{ color:var(--accent); }
  .daytile .dtk{ font-size:11px; color:var(--l2); margin-top:4px; font-weight:600; }

  .fotd{ border-left:3px solid var(--accent); }
  .fotd .fk{ font-size:var(--fs-label); font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); color:var(--accent); }
  .fotd .ft{ font-size:var(--fs-headline); font-weight:var(--fw-med); line-height:1.4; margin-top:8px; }
  .fotd .fm{ font-size:13px; color:var(--l2); margin-top:10px; }

  /* recently learned list */
  .learnlist{ display:flex; flex-direction:column; }
  .lrow{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-top:.5px solid var(--sep); }
  .lrow:first-child{ border-top:none; }
  .lrow .ldot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
  .lrow .lnm{ flex:1; min-width:0; font-size:15px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lrow .lfield{ font-size:12px; color:var(--l3); flex:0 0 auto; }

  /* =========================================================================
     LIBRARY (explore)
     ========================================================================= */
  .libcard{ display:flex; align-items:center; gap:12px; padding:14px 16px; background:var(--row); border:.5px solid var(--line); border-radius:var(--r-md); margin-bottom:8px; cursor:pointer; transition:transform .12s; }
  .libcard:active{ transform:scale(.99); }
  .libcard .lcdot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto; }
  .libcard .lcinfo{ flex:1; min-width:0; }
  .libcard .lctitle{ font-size:15px; font-weight:var(--fw-med); line-height:1.25; }
  .libcard .lcmeta{ font-size:12px; color:var(--l2); margin-top:3px; }
  .libcard .lcstate{ flex:0 0 auto; font-size:11px; font-weight:700; padding:4px 9px; border-radius:10px; }
  .libcard .lcstate.new{ background:var(--accent-soft); color:var(--accent); }
  .libcard .lcstate.learned{ background:rgba(47,158,68,.16); color:var(--green); }
  .libcard .lcstate.due{ background:rgba(255,59,48,.14); color:var(--red); }
  .libcard .lcstate.locked{ background:var(--field); color:var(--l3); }
  .libcard.islocked{ opacity:.62; }
  .libcard.islocked .lcmeta{ color:var(--l3); }

  /* =========================================================================
     DEBATE mode
     ========================================================================= */
  .motioncard{ background:var(--grad); color:#fff; border-radius:var(--r-lg); padding:22px 20px; margin-bottom:var(--sp-4); box-shadow:0 14px 36px -16px var(--accent-glow); }
  .motioncard .mk{ font-size:var(--fs-label); font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); opacity:.85; }
  .motioncard .mt{ font-size:var(--fs-title); font-weight:var(--fw-med); letter-spacing:var(--tr-title); line-height:1.3; margin-top:8px; }
  .motionpick{ display:flex; align-items:flex-start; gap:12px; padding:16px; background:var(--row); border:.5px solid var(--line); border-radius:var(--r-md); margin-bottom:var(--sp-2); cursor:pointer; transition:transform .12s, background .15s; }
  .motionpick:active{ transform:scale(.99); background:var(--accent-soft); }
  .motionpick .mpt{ flex:1; font-size:16px; font-weight:600; line-height:1.35; }
  .motionpick .mpchev{ color:var(--l3); font-size:20px; flex:0 0 auto; }

  .argcard{ background:var(--card); border:.5px solid var(--line); border-left-width:3px; border-radius:var(--r-md); padding:16px; margin-bottom:var(--sp-2); box-shadow:var(--shadow); }
  .argcard.for{ border-left-color:var(--green); }
  .argcard.against{ border-left-color:var(--blue); }
  .argcard .actitle{ font-size:16px; font-weight:700; letter-spacing:-.2px; line-height:1.3; }
  .argcard .acbody{ font-size:15px; color:var(--ink); line-height:1.5; margin-top:8px; }
  .argcard .acsrc{ font-size:12px; color:var(--l2); margin-top:10px; }
  .argcard .aclock{ font-size:13px; color:var(--l3); margin-top:8px; display:flex; align-items:center; gap:6px; }
  .argcard .aclock svg{ width:14px; height:14px; }
  .steelman{ background:var(--accent-soft); border-radius:14px; padding:16px; margin:6px 0 18px; }
  .steelman .smk{ font-size:11px; font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); color:var(--accent); }
  .steelman p{ font-size:15px; color:var(--ink); line-height:1.5; margin-top:8px; }

  /* ----- motion row "Spar" badge ----- */
  .motionpick .mpspar{ flex:0 0 auto; align-self:center; font-size:11px; font-weight:var(--fw-med); letter-spacing:.2px;
    color:#e8590c; background:color-mix(in srgb,#e8590c 14%,transparent); padding:3px 8px; border-radius:999px; }

  /* ----- motion hub: choose how to take the motion on ----- */
  .dbhub{ display:flex; align-items:center; gap:13px; width:100%; text-align:left; cursor:pointer;
    background:var(--card); border:.5px solid var(--line); border-radius:var(--r-md); padding:15px 16px;
    margin-bottom:var(--sp-2); box-shadow:var(--shadow); transition:transform .12s, background .15s; font-family:inherit; }
  .dbhub:active{ transform:scale(.99); }
  .dbhub.spar{ border-color:color-mix(in srgb,#e8590c 45%,var(--line)); box-shadow:0 12px 30px -16px color-mix(in srgb,#e8590c 60%,transparent); }
  .dbhubic{ flex:0 0 auto; width:42px; height:42px; border-radius:12px; display:flex; align-items:center; justify-content:center;
    font-size:22px; background:var(--field); }
  .dbhub.spar .dbhubic{ background:color-mix(in srgb,#e8590c 16%,transparent); }
  .dbhub.hard .dbhubic{ background:color-mix(in srgb,var(--ink) 8%,transparent); }
  .dbhubmain{ flex:1; min-width:0; }
  .dbhubt{ font-size:var(--fs-headline); font-weight:var(--fw-med); letter-spacing:var(--tr-headline); color:var(--ink); }
  .dbhardtag{ margin-left:8px; font-size:10px; font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:.4px; vertical-align:middle;
    color:var(--l2); background:var(--field); border:.5px solid var(--line); border-radius:999px; padding:2px 7px; }
  .dbhubd{ font-size:13px; color:var(--l2); line-height:1.4; margin-top:3px; }
  .sparhard{ font-size:11px; font-weight:var(--fw-med); letter-spacing:.3px; color:#e8590c; background:color-mix(in srgb,#e8590c 14%,transparent); border-radius:999px; padding:2px 8px; }

  /* ----- sparring ring ----- */
  .sparhead{ display:flex; align-items:center; gap:12px; padding:4px 2px 14px; }
  .sparav{ flex:0 0 auto; width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:26px; background:color-mix(in srgb,#e8590c 16%,transparent); border:1px solid color-mix(in srgb,#e8590c 35%,transparent); }
  .sparname{ font-size:var(--fs-headline); font-weight:var(--fw-med); color:var(--ink); }
  .sparrole{ font-size:12px; color:var(--l3); margin-top:1px; }

  .sparlog{ display:flex; flex-direction:column; gap:9px; padding:2px 0 4px; }
  .sparbub{ max-width:86%; padding:11px 14px; border-radius:15px; font-size:14.5px; line-height:1.45; box-shadow:var(--shadow); }
  .sparbub p{ margin:0; }
  .sparbub.opp{ align-self:flex-start; background:var(--card); border:.5px solid var(--line); border-bottom-left-radius:5px; color:var(--ink); }
  .sparbub.opp.intro{ font-style:italic; color:var(--l2); }
  .sparbub.opp.jab{ background:color-mix(in srgb,var(--red,#e03131) 12%,var(--card)); border-color:color-mix(in srgb,var(--red,#e03131) 35%,var(--line)); }
  .sparbub.opp.concede{ background:color-mix(in srgb,var(--green) 13%,var(--card)); border-color:color-mix(in srgb,var(--green) 38%,var(--line)); }
  .sparbub.me{ align-self:flex-end; background:var(--accent-soft); color:var(--ink); border-bottom-right-radius:5px; }
  .sparbub.me.wrong-pick{ background:var(--field); color:var(--l3); text-decoration:line-through; box-shadow:none; }
  .sparbub.me.land-pick{ background:color-mix(in srgb,var(--green) 20%,transparent); font-weight:700; }
  .sparbub.me.land{ background:color-mix(in srgb,var(--green) 14%,var(--card)); border:.5px solid color-mix(in srgb,var(--green) 40%,var(--line));
    animation:sparpop .28s ease-out; }
  @keyframes sparpop{ from{ transform:scale(.94); opacity:0; } to{ transform:scale(1); opacity:1; } }
  .blandchip{ display:inline-flex; align-items:center; gap:5px; margin-top:9px; font-family:inherit; cursor:pointer;
    font-size:11.5px; font-weight:700; color:var(--green); background:color-mix(in srgb,var(--green) 12%,transparent);
    border:none; border-radius:999px; padding:4px 9px; }
  .blandchip svg{ width:12px; height:12px; }

  .sparmovetip{ font-size:var(--fs-label); font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); color:var(--l3); margin:18px 0 9px; }
  .sparmoves{ display:flex; flex-direction:column; gap:9px; }
  .sparmove{ width:100%; text-align:left; font-family:inherit; cursor:pointer; font-size:14.5px; font-weight:600; line-height:1.4;
    color:var(--ink); background:var(--card); border:.5px solid var(--line); border-radius:13px; padding:14px 15px;
    transition:transform .1s, border-color .15s, background .15s; }
  .sparmove:active{ transform:scale(.99); }
  .sparmove:hover{ border-color:var(--accent); background:var(--accent-soft); }

  .sparverdict{ margin-top:18px; background:var(--card); border:.5px solid var(--line); border-radius:var(--r-lg); padding:20px 18px; box-shadow:var(--shadow); }
  .sparverdict.flawless{ border-color:#f2a93b; box-shadow:0 14px 36px -18px #f2a93b; }
  .sparverdict.failed{ border-color:color-mix(in srgb,var(--red,#e03131) 45%,var(--line)); }
  .sparverdict .svk{ font-size:18px; font-weight:var(--fw-med); letter-spacing:var(--tr-headline); color:var(--ink); }
  .sparverdict p{ font-size:14.5px; color:var(--l2); line-height:1.5; margin:9px 0 0; }
  .svhits{ font-size:12.5px; color:var(--l3); margin-top:8px; }
  .svtactics{ margin-top:16px; }
  .svtk{ font-size:11px; font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); color:var(--l3); margin-bottom:8px; }
  .svtac{ display:inline-block; margin:0 6px 6px 0; font-family:inherit; cursor:pointer; font-size:13px; font-weight:700;
    color:var(--accent); background:var(--accent-soft); border:none; border-radius:999px; padding:6px 12px; }
  .sparbtns{ display:flex; gap:9px; margin-top:18px; }
  .sparbtn{ flex:1; font-family:inherit; cursor:pointer; font-size:14px; font-weight:700; color:var(--ink);
    background:var(--field); border:.5px solid var(--line); border-radius:12px; padding:12px; }
  .sparbtn.primary{ background:var(--accent); color:#fff; border-color:transparent; }
  .sparbtn:active{ opacity:.8; }

  /* recall beat: cite the fact (typed, with reveal-to-choices fallback) */
  .sparrc{ margin-top:14px; padding:14px; background:var(--accent-soft); border-radius:14px; }
  .sparrc .sparmovetip{ margin:0 0 10px; }
  .sparrc .qzin{ background:var(--card); }
  .rcreveal{ display:block; width:100%; margin-top:10px; font-family:inherit; cursor:pointer; font-size:13px; font-weight:600;
    color:var(--l2); background:none; border:none; text-decoration:underline; text-underline-offset:3px; }
  .rcreveal:active{ opacity:.6; }

  /* ===== radar / charts wrappers ===== */
  .radarwrap{ display:block; padding:4px 2px 8px; }
  .radarwrap canvas{ width:260px; height:260px; }
  .fblist{ display:flex; flex-direction:column; gap:9px; }
  .fbrow{ display:flex; align-items:center; gap:9px; }
  .fbrow .fbic{ flex:0 0 auto; width:20px; text-align:center; font-size:15px; }
  .fbrow .fblab{ flex:0 0 38%; min-width:0; font-size:13px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fbrow .fbbar{ flex:1 1 auto; height:8px; border-radius:6px; background:var(--field); overflow:hidden; }
  .fbrow .fbfill{ display:block; height:100%; border-radius:6px; min-width:2px; }
  .fbrow .fbnum{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--l2); font-variant-numeric:tabular-nums; min-width:42px; text-align:right; }
  .fbempty{ font-size:13px; color:var(--l3); text-align:center; padding:8px 0; }
  /* per-field degrees list (You page) */
  .petitle{ font-size:14px; font-weight:var(--fw-med); color:var(--ink); letter-spacing:var(--tr-headline); }
  .deglist{ display:flex; flex-direction:column; }
  .degrow{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 4px; background:none; border:none; border-bottom:.5px solid var(--line); text-align:left; cursor:pointer; transition:opacity .12s; }
  .degrow:last-child{ border-bottom:none; }
  .degrow:active{ opacity:.6; }
  .degrow .degic{ flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:16px; border-radius:9px; background:color-mix(in srgb, var(--fc) 16%, transparent); }
  .degrow .degmain{ flex:1; min-width:0; }
  .degrow .degtop{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
  .degrow .deglab{ font-size:15px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .degrow .degstar{ color:#f2a93b; font-size:12px; }
  .degbadge{ flex:0 0 auto; font-size:11px; font-weight:var(--fw-med); letter-spacing:.2px; padding:2px 8px; border-radius:999px; color:#fff; background:var(--dc,#888); box-shadow:inset 0 .5px 0 rgba(255,255,255,.25); }
  .degbadge.none{ color:var(--l3); background:var(--field); box-shadow:none; }
  .degpips{ display:flex; gap:4px; margin-top:6px; }
  .degpip{ width:18px; height:16px; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:9px; font-weight:800; font-style:normal; color:var(--l3); background:var(--field); border:1px solid transparent; font-variant-numeric:tabular-nums; }
  .degpip.half{ color:var(--fc); background:color-mix(in srgb, var(--fc) 22%, transparent); }
  .degpip.on{ color:#fff; background:var(--fc); }
  .degrow .degnum{ flex:0 0 auto; font-size:12px; font-weight:700; color:var(--l2); font-variant-numeric:tabular-nums; min-width:42px; text-align:right; align-self:flex-start; margin-top:2px; }
  .progwrap{ padding:8px 0 4px; }
  .progwrap canvas{ width:100%; aspect-ratio:11/4; }

  /* ===== the web (knowledge map: next threads + field paths) ===== */
  .webpage{ width:100%; padding-bottom:24px; }
  .websearch{ position:relative; margin:2px 0 14px; }
  .websearch input{ width:100%; box-sizing:border-box; background:var(--row); border:1px solid var(--line); border-radius:13px;
    padding:11px 14px; font-size:15px; color:var(--ink); font-family:inherit; -webkit-appearance:none; }
  .websearch input:focus{ outline:none; border-color:var(--accent); }
  .webresults{ display:flex; flex-direction:column; gap:8px; }
  .wres{ display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; text-align:left;
    background:var(--card); border:.5px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; transition:opacity .12s; }
  .wres:active{ opacity:.6; }
  .wres-t{ font-size:15px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .wres-f{ flex:0 0 auto; font-size:11px; font-weight:var(--fw-med); color:var(--fc,#888); }
  .wres.learned .wres-t{ color:var(--l2); }
  .wres.locked{ opacity:.5; }

  /* the living web — a growth chord: fields grow outward as dated tree-ring bands; ribbons = shared ideas */
  .chordhero{ position:relative; margin:2px 0 18px; border-radius:20px; overflow:hidden;
    background:radial-gradient(85% 85% at 50% 48%, var(--card) 0%, var(--bg2) 100%);
    border:.5px solid var(--line); box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); }
  .chordhero canvas{ display:block; width:100%; height:min(92vw,420px); touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
  .chordhud{ position:absolute; left:16px; top:15px; pointer-events:none; }
  .ch-n{ font-size:40px; font-weight:800; line-height:.9; letter-spacing:-1.4px; color:var(--ink); font-variant-numeric:tabular-nums; }
  .ch-k{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.7px; color:var(--l2); margin-top:5px; }
  .ch-sub{ font-size:12px; font-weight:600; color:var(--l3); margin-top:5px; font-variant-numeric:tabular-nums; }
  .ch-replay{ position:absolute; right:14px; top:14px; display:inline-flex; align-items:center; gap:6px; border:0; cursor:pointer;
    font-family:inherit; font-size:12px; font-weight:700; color:var(--accent); background:var(--accent-soft);
    padding:7px 12px; border-radius:999px; -webkit-tap-highlight-color:transparent; }
  .ch-replay:active{ transform:translateY(1px); }
  .ch-cue{ position:absolute; right:16px; top:52px; font-size:11px; font-weight:600; color:var(--l3); pointer-events:none; }
  .ch-legend{ display:flex; flex-wrap:wrap; gap:9px 14px; padding:4px 16px 16px; }
  .ch-legend:empty{ display:none; }
  .ch-legend span{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:650; color:var(--l2); }
  .ch-legend i{ width:9px; height:9px; border-radius:2px; flex:0 0 auto; }
  .chordhero-empty{ display:flex; align-items:center; justify-content:center; min-height:220px; padding:28px 32px;
    text-align:center; font-size:14px; color:var(--l2); line-height:1.55; }

  .webhd{ font-size:var(--fs-label); font-weight:var(--fw-med); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--l3); margin:0 0 10px; }
  .webhd2{ margin-top:20px; }
  .webcount{ color:var(--accent); font-weight:700; text-transform:none; letter-spacing:0; }

  /* "pull a thread" — the frontier cards */
  .frontier{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .fcx{ display:flex; flex-direction:column; gap:5px; text-align:left; cursor:pointer; min-height:96px;
    background:var(--card); border:.5px solid var(--line); border-left:3px solid var(--fc,#888); border-radius:14px;
    padding:12px 13px; box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); transition:transform .1s, opacity .12s; }
  .fcx:active{ transform:scale(.98); opacity:.85; }
  .fcx-field{ font-size:11px; font-weight:var(--fw-med); color:var(--fc,#888); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fcx-title{ font-size:15px; font-weight:var(--fw-med); line-height:1.25; color:var(--ink); }
  .fcx-builds{ margin-top:auto; font-size:11.5px; color:var(--l3); line-height:1.3; }
  .fcx-builds b{ color:var(--l2); font-weight:var(--fw-med); }
  @media (max-width:340px){ .frontier{ grid-template-columns:1fr; } }

  .webdue{ display:block; width:100%; margin-top:12px; background:var(--accent-soft); color:var(--accent); border:none;
    border-radius:13px; padding:13px; font-size:14px; font-weight:700; font-family:inherit; cursor:pointer; }
  .webdue:active{ opacity:.7; }
  .webempty{ font-size:13.5px; color:var(--l3); line-height:1.5; padding:14px; background:var(--row); border-radius:13px; }

  /* per-field paths */
  .fieldpaths{ display:flex; flex-direction:column; gap:8px; }
  .fpath{ background:var(--card); border:.5px solid var(--line); border-radius:14px; overflow:hidden; }
  .fpath-hd{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:12px 13px; }
  .fpath-hd:active{ opacity:.6; }
  .fpath .fp-ic{ flex:0 0 auto; width:30px; height:30px; display:flex; align-items:center; justify-content:center; font-size:16px; border-radius:9px; background:color-mix(in srgb, var(--fc) 16%, transparent); }
  .fpath .fp-main{ flex:1; min-width:0; }
  .fpath .fp-top{ display:flex; align-items:center; gap:8px; }
  .fpath .fp-lab{ font-size:15px; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .fpath .degpips{ margin-top:6px; }
  .fpath .fp-right{ flex:0 0 auto; display:flex; flex-direction:column; align-items:flex-end; gap:3px; }
  .fpath .fp-num{ font-size:12px; font-weight:700; color:var(--l2); font-variant-numeric:tabular-nums; }
  .fpath .fp-ready{ font-size:10.5px; font-weight:var(--fw-med); color:var(--accent); background:var(--accent-soft); padding:1px 7px; border-radius:999px; }
  .fpath .fp-chev{ flex:0 0 auto; color:var(--l3); font-size:20px; line-height:1; transition:transform .18s; }
  .fpath.open .fp-chev{ transform:rotate(90deg); }
  .fpath-body{ padding:2px 13px 13px; }
  .fp-lvlrow{ display:flex; align-items:flex-start; gap:9px; padding:5px 0; border-top:.5px solid var(--line); }
  .fp-lvl{ flex:0 0 auto; width:22px; font-size:10px; font-weight:800; color:var(--l3); padding-top:6px; font-variant-numeric:tabular-nums; }
  .fp-chips{ flex:1; display:flex; flex-wrap:wrap; gap:6px; }
  .chipx{ max-width:100%; font-size:12px; font-weight:600; font-family:inherit; padding:5px 10px; border-radius:999px; cursor:pointer;
    border:1px solid transparent; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; transition:opacity .12s; }
  .chipx:active{ opacity:.6; }
  .chipx.learned{ background:var(--fc,#888); color:#fff; border-color:transparent; }
  .chipx.due{ background:color-mix(in srgb, var(--fc) 18%, transparent); color:var(--fc,#888); border-color:var(--fc,#888); }
  .chipx.ready{ background:transparent; color:var(--fc,#888); border-color:var(--fc,#888); border-style:dashed; font-weight:700; }
  .chipx.locked{ background:var(--field); color:var(--l3); border-color:transparent; }

  /* topic (domain) sections on the Web page: domain → field → cards */
  .topics{ display:flex; flex-direction:column; gap:9px; }
  .topic{ background:var(--card); border:.5px solid var(--line); border-radius:14px; overflow:hidden; }
  .topic-hd{ display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:none; border:none; cursor:pointer; padding:13px; }
  .topic-hd:active{ opacity:.6; }
  .topic-ic{ flex:0 0 auto; width:32px; height:32px; display:flex; align-items:center; justify-content:center; font-size:17px; border-radius:9px; background:color-mix(in srgb, var(--dc, var(--accent)) 18%, transparent); }
  .topic-main{ flex:1; min-width:0; }
  .topic-lab{ display:block; font-size:15.5px; font-weight:700; color:var(--ink); letter-spacing:-.2px; }
  .topic-bar{ display:block; height:5px; border-radius:3px; background:var(--track); overflow:hidden; margin-top:7px; }
  .topic-bar i{ display:block; height:100%; border-radius:3px; background:var(--dc, var(--grad)); }
  .topic .fp-chev{ flex:0 0 auto; color:var(--l3); font-size:20px; line-height:1; transition:transform .18s; }
  .topic.open .fp-chev{ transform:rotate(90deg); }
  .topic-body{ padding:0 9px 10px; display:flex; flex-direction:column; gap:7px; }
  .topic-body .fpath{ background:var(--row); }
  /* discipline sub-header inside an expanded division (Library) */
  .topsub{ display:flex; align-items:center; gap:8px; padding:6px 4px 1px; }
  .topsub .tsub-ic{ font-size:12px; }
  .topsub .tsub-lab{ flex:1; font-size:11px; font-weight:var(--fw-med); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--l3); }
  .topsub .tsub-num{ font-size:11px; font-weight:700; color:var(--l3); font-variant-numeric:tabular-nums; }

  /* domain headers on the You page degree list */
  .degroup{ margin-bottom:6px; }
  .degroup-hd{ display:flex; align-items:center; gap:9px; padding:14px 2px 7px; }
  .degroup-hd .dgh-ic{ font-size:14px; }
  .degroup-hd .dgh-lab{ flex:1; font-size:var(--fs-label); font-weight:var(--fw-med); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--l3); }
  .degroup-hd .dgh-num{ font-size:12px; font-weight:700; color:var(--l3); font-variant-numeric:tabular-nums; }
  .degroup:first-child .degroup-hd{ padding-top:2px; }
  /* discipline sub-header within a division (You page degree list) */
  .degsub{ display:flex; align-items:center; gap:8px; padding:8px 4px 3px 8px; }
  .degsub .dgs-ic{ font-size:12px; }
  .degsub .dgs-lab{ flex:1; font-size:11px; font-weight:700; letter-spacing:.3px; color:var(--l2); }
  .degsub .dgs-num{ font-size:11px; font-weight:700; color:var(--l3); font-variant-numeric:tabular-nums; }

  /* domain headers in the Fields browser sheet */
  .fsgroup{ display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:none; cursor:pointer;
    padding:14px 4px 8px; }
  .fsgroup:active{ opacity:.6; }
  .fsgroup .fsg-ic{ font-size:15px; }
  .fsgroup .fsg-lab{ flex:1; font-size:var(--fs-label); font-weight:var(--fw-med); letter-spacing:var(--tr-label); text-transform:uppercase; color:var(--l2); }
  .fsgroup .fsg-num{ font-size:12px; font-weight:700; color:var(--l3); font-variant-numeric:tabular-nums; }
  .fsgroup .fsg-go{ color:var(--l3); font-size:18px; }
  /* discipline sub-header (indented) inside a division in the Fields sheet */
  .fsgroup.fssub{ padding:9px 4px 5px 16px; }
  .fsgroup.fssub .fsg-lab{ font-size:11.5px; font-weight:700; letter-spacing:.2px; text-transform:none; color:var(--l2); }
  .fsgroup.fssub .fsg-ic{ font-size:13px; }

  /* ===== onboarding ===== */
  #onboardWrap{ position:fixed; inset:0; z-index:320; display:none; align-items:center; justify-content:center; padding:24px;
    background:rgba(0,0,0,.5); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  #onboardWrap.show{ display:flex; }
  .obcard{ background:var(--sheetbg); border-radius:22px; max-width:380px; width:100%; padding:24px; box-shadow:0 20px 60px rgba(0,0,0,.45); max-height:90vh; overflow-y:auto; scrollbar-width:none; }
  .obcard::-webkit-scrollbar{ display:none; }
  .obbrand{ font-size:24px; margin-bottom:8px; }
  .obtag{ font-size:15px; color:var(--l2); line-height:1.45; margin:0 0 20px; }
  .oblabel{ font-size:13px; font-weight:700; color:var(--l2); text-transform:uppercase; letter-spacing:.4px; margin-bottom:8px; }
  .obtitle{ font-size:24px; font-weight:750; letter-spacing:-.4px; }
  .obp{ font-size:14px; color:var(--l2); line-height:1.5; margin:8px 0 18px; }
  .obopts{ display:flex; flex-direction:column; gap:10px; }
  .obopt{ text-align:left; background:var(--row); border:.5px solid var(--line); border-radius:14px; padding:16px; cursor:pointer; color:var(--ink); transition:transform .1s, background .15s; }
  .obopt:active,.obopt.on{ transform:scale(.99); background:var(--accent-soft); border-color:var(--accent); }
  .obopt b{ display:block; font-size:16px; font-weight:650; }
  .obopt span{ display:block; font-size:13px; color:var(--l2); margin-top:2px; }

  /* ===== exam / placement-test overlay ===== */
  #examWrap{ position:fixed; inset:0; z-index:330; display:none; align-items:center; justify-content:center; padding:20px;
    background:rgba(0,0,0,.55); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  #examWrap.show{ display:flex; }
  .examcard{ background:var(--sheetbg); border-radius:22px; max-width:440px; width:100%; padding:22px; box-shadow:0 20px 60px rgba(0,0,0,.45); max-height:92vh; overflow-y:auto; scrollbar-width:none; }
  .examcard::-webkit-scrollbar{ display:none; }
  .exhd{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
  .extitle{ font-size:15px; font-weight:750; letter-spacing:-.2px; color:var(--ink); }
  .exx{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:none; background:var(--row); color:var(--l2); font-size:15px; cursor:pointer; }
  .exbar{ height:6px; border-radius:3px; background:var(--track); overflow:hidden; margin-bottom:12px; }
  .exbar i{ display:block; height:100%; border-radius:3px; background:var(--grad); transition:width .25s; }
  .exmeta{ font-size:12px; color:var(--l3); margin-bottom:14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .exq{ font-size:19px; margin-bottom:16px; }
  .exresult{ text-align:center; padding:14px 6px 6px; }
  .exresult .exbig{ font-size:52px; line-height:1; }
  .exresult h3{ font-size:22px; font-weight:750; letter-spacing:-.3px; margin:10px 0 6px; }
  .exresult p{ font-size:14px; color:var(--l2); line-height:1.5; margin:0 auto; max-width:340px; }
  .exscore{ font-size:14px; font-weight:800; color:var(--accent); margin-top:14px; font-variant-numeric:tabular-nums; }

  /* exam button inside a degree row */
  .degexam{ align-self:flex-start; margin-top:9px; background:color-mix(in srgb, var(--fc) 14%, transparent); color:var(--fc); border:none; border-radius:999px; padding:6px 12px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; transition:transform .1s; }
  .degexam:active{ transform:scale(.97); }

  /* ===== coach hint, toast, confetti ===== */
  .coach{ position:fixed; left:50%; bottom:calc(72px + env(safe-area-inset-bottom)); transform:translate(-50%,16px); z-index:120;
    width:calc(100% - 32px); max-width:380px; display:none; align-items:center; gap:10px;
    background:rgba(28,28,30,.96); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); color:#fff;
    padding:12px 12px 12px 16px; border-radius:16px; box-shadow:0 10px 36px rgba(0,0,0,.4); opacity:0; transition:opacity .3s, transform .3s; }
  .coach.show{ display:flex; opacity:1; transform:translate(-50%,0); }
  .coachbody{ flex:1; font-size:14px; line-height:1.4; }
  .coachx{ flex:0 0 auto; background:var(--accent); color:#fff; border:none; border-radius:10px; padding:8px 12px; font-size:13px; font-weight:700; cursor:pointer; }

  .toast{ position:fixed; left:50%; bottom:calc(90px + env(safe-area-inset-bottom)); transform:translate(-50%,20px); z-index:300;
    background:rgba(28,28,30,.96); color:#fff; padding:13px 20px; border-radius:14px; font-size:14px; font-weight:600;
    max-width:calc(100% - 40px); text-align:center; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s;
    backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); box-shadow:0 10px 30px rgba(0,0,0,.35); }
  .toast.show{ opacity:1; transform:translate(-50%,0); }
  .toast.big{ font-size:16px; font-weight:700; padding:16px 24px; }

  .confetti{ position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden; }
  .confetti i{ position:absolute; top:-14px; width:calc(9px*var(--sz,1)); height:calc(14px*var(--sz,1)); border-radius:2px; opacity:.95;
    animation:fall var(--dur,1.5s) cubic-bezier(.18,.7,.4,1) forwards; }
  @keyframes fall{ to{ transform:translate(var(--dx,0), 110vh) rotate(620deg); opacity:.85; } }

  /* ===== sheets ===== */
  .scrim{ position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none; transition:opacity .3s; z-index:90; }
  .scrim.show{ opacity:1; pointer-events:auto; }
  .sheet{ position:fixed; left:0; right:0; bottom:0; max-width:540px; margin:0 auto; z-index:100;
    background:var(--sheetbg); border-radius:22px 22px 0 0; transform:translateY(102%);
    transition:transform .34s cubic-bezier(.2,.8,.2,1); max-height:92vh; display:flex; flex-direction:column; overflow:hidden; }
  .sheet.show{ transform:translateY(0); box-shadow:0 -1px 0 var(--hi), 0 -20px 50px -20px rgba(0,0,0,.4); }
  .grabber{ width:36px; height:5px; background:var(--grabber); border-radius:3px; margin:8px auto 2px; flex:0 0 auto; }
  .sheethdr{ display:flex; align-items:center; justify-content:space-between; padding:12px 16px 8px; flex:0 0 auto; }
  .sheethdr .t{ font-size:20px; font-weight:650; letter-spacing:-.5px; }
  .sheetbody{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; padding:8px 16px calc(28px + env(safe-area-inset-bottom)); }

  .foot{ text-align:center; font-size:13px; color:var(--l3); margin:18px 0 4px; line-height:1.5; }

  /* press feel */
  .btn:active{ transform:scale(.975); opacity:.94; }

  @media (prefers-reduced-motion: reduce){
    *,*::before,*::after{ animation-duration:.001s!important; transition-duration:.05s!important; }
    .confetti{ display:none!important; }
  }

  /* ===== portrait-only guard ===== */
  .rotateGuard{ position:fixed; inset:0; z-index:500; flex-direction:column;
    align-items:center; justify-content:center; gap:10px; text-align:center; padding:24px;
    background:var(--bg); color:var(--ink); }
  .rotateGuard svg{ width:46px; height:46px; color:var(--accent); animation:rgturn 2.4s ease-in-out infinite; }
  .rotateGuard .rgmsg{ font-size:18px; font-weight:700; letter-spacing:-.3px; }
  .rotateGuard .rgsub{ font-size:14px; color:var(--l2); }
  @keyframes rgturn{ 0%,55%,100%{ transform:rotate(0deg); } 75%,90%{ transform:rotate(-90deg); } }

  /* =========================================================================
     FEED (explore) — playful, social, field-coloured
     ========================================================================= */
  .storystrip{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding:6px 2px 4px; margin:0 -2px 6px; }
  .storystrip::-webkit-scrollbar{ display:none; }
  .story{ flex:0 0 auto; width:86px; display:flex; flex-direction:column; align-items:center; gap:2px;
    padding:14px 8px 12px; background:var(--card); border:.5px solid var(--line); border-radius:20px; cursor:pointer;
    box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); transition:transform .12s cubic-bezier(.2,.72,.3,1); }
  .story:active{ transform:scale(.93); }
  .story .storyio{ font-size:25px; line-height:1; }
  .story .storybig{ font-size:19px; font-weight:var(--fw-med); letter-spacing:var(--tr-title); margin-top:5px; }
  .story .storysub{ font-size:10px; font-weight:var(--fw-med); color:var(--l2); text-transform:uppercase; letter-spacing:var(--tr-label); }
  .story.s-session{ background:var(--grad); border-color:transparent; box-shadow:0 8px 22px -10px var(--accent-glow); }
  .story.s-session .storybig{ color:#fff; }
  .story.s-session .storysub{ color:#fff; opacity:.92; }
  /* the other three tiles: soft per-tile tint (hues borrowed from the field palette) so the strip isn't flat */
  .story.s-streak{ --th:#f59f00; } .story.s-surprise{ --th:#7048e8; } .story.s-saved{ --th:#0ca678; }
  .story.s-streak, .story.s-surprise, .story.s-saved{
    background:color-mix(in srgb, var(--th) 11%, var(--card)); border-color:color-mix(in srgb, var(--th) 24%, transparent); }
  .story.s-streak .storybig, .story.s-surprise .storybig, .story.s-saved .storybig{ color:var(--th); }
  .story.s-streak .storysub, .story.s-surprise .storysub, .story.s-saved .storysub{ color:color-mix(in srgb, var(--th) 55%, var(--l2)); }

  .fcard{ display:block; width:100%; text-align:left; background:var(--card); border:.5px solid var(--line);
    border-radius:20px; padding:18px 18px 16px; margin-bottom:var(--sp-4); cursor:pointer; position:relative; overflow:hidden;
    box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); transition:transform .14s cubic-bezier(.34,1.3,.6,1); font-family:inherit; color:var(--ink); }
  .fcard:active{ transform:scale(.985); }
  .fcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--fc,var(--accent)); }
  .fctop{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
  .fcfield{ font-size:var(--fs-label); font-weight:var(--fw-med); color:var(--fc,var(--accent)); letter-spacing:0; }
  /* feed quiz item: looks like a card, no loud banner — a quiet inline retrieval prompt */
  .fqitem{ display:block; width:100%; background:var(--card); border:.5px solid var(--line); border-radius:20px;
    padding:18px 18px 16px; margin-bottom:var(--sp-4); position:relative; overflow:hidden;
    box-shadow:var(--shadow), inset 0 .5px 0 var(--hi); color:var(--ink); }
  .fqitem::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--fc,var(--accent)); opacity:.5; }
  .fqhint{ margin-left:auto; font-size:10.5px; font-weight:600; color:var(--l3); letter-spacing:.2px; }
  .fqq{ font-size:18px; font-weight:var(--fw-med); letter-spacing:var(--tr-headline); line-height:1.28; margin-bottom:var(--sp-4); }
  .fqitem .quizopt{ font-size:15px; padding:13px 15px; }
  .fqopen{ display:block; width:100%; text-align:left; margin-top:13px; background:none; border:none; padding:0;
    font-family:inherit; font-size:13px; font-weight:700; color:var(--l2); cursor:pointer; }
  .fqopen:active{ opacity:.6; }
  .fctag{ font-size:9.5px; font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:.6px; color:var(--l3);
    border:.5px solid var(--line); border-radius:8px; padding:3px 7px; }
  .fcsaved{ margin-left:auto; font-size:14px; }
  .fctitle{ font-size:19px; font-weight:var(--fw-med); letter-spacing:var(--tr-title); line-height:1.2; }
  .fchook{ font-size:var(--fs-callout); color:var(--l2); line-height:1.46; margin-top:7px; }
  .fcdate{ display:inline-block; margin:4px 0 2px; font-size:var(--fs-foot); font-weight:var(--fw-med); letter-spacing:.2px; color:var(--fc,var(--accent)); }
  .fcard.feat .fcdate{ color:rgba(255,255,255,.96); }
  .fcard.islocked{ opacity:.66; }
  .fclock{ display:flex; align-items:center; gap:5px; margin-top:9px; font-size:12px; font-weight:600; color:var(--l3); }
  .fclock svg{ width:13px; height:13px; flex:0 0 auto; }
  .fcard.feat .fclock{ color:rgba(255,255,255,.9); }
  .fcfoot{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
  .fcdepth{ font-size:12px; font-weight:var(--fw-med); color:var(--fc,var(--accent)); }
  .fcstate{ font-size:11px; font-weight:700; padding:4px 9px; border-radius:10px; }
  .fcstate.new{ background:var(--accent-soft); color:var(--accent); }
  .fcstate.learned{ background:rgba(47,158,68,.16); color:var(--green); }
  .fcstate.due{ background:rgba(255,59,48,.14); color:var(--red); }
  .fcstate.locked{ background:var(--field); color:var(--l3); }

  /* featured hero card — vivid field colour, white text */
  .fcard.feat{ color:#fff; border-color:transparent; padding:22px 20px 18px;
    background:linear-gradient(150deg, color-mix(in srgb, var(--fc,var(--accent)) 80%, #fff) 0%, var(--fc,var(--accent)) 50%, color-mix(in srgb, var(--fc,var(--accent)) 78%, #000) 100%);
    box-shadow:0 16px 40px -18px var(--fc,var(--accent-glow)); }
  .fcard.feat::before{ display:none; }
  .fcard.feat .fcfield{ color:rgba(255,255,255,.95); }
  .fcard.feat .fctag{ color:#fff; border-color:rgba(255,255,255,.55); }
  .fcard.feat .fctitle{ font-size:25px; letter-spacing:-.7px; }
  .fcard.feat .fchook{ color:rgba(255,255,255,.94); font-size:16px; }
  .fcard.feat .fcdepth{ color:#fff; }
  .fcard.feat .fcstate{ background:rgba(255,255,255,.24); color:#fff; }

  /* =========================================================================
     IMMERSIVE READER — peel-to-deepen
     ========================================================================= */
  body.reading{ overflow:hidden; }
  .reader{ position:fixed; inset:0; z-index:300; display:flex; flex-direction:column; background:var(--bg);
    transform:translateY(100%); visibility:hidden; transition:transform .36s cubic-bezier(.2,.8,.2,1), visibility 0s linear .36s; }
  .reader.show{ transform:none; visibility:visible; transition:transform .36s cubic-bezier(.2,.8,.2,1); }
  .readerHead{ flex:0 0 auto; position:relative; display:flex; align-items:center; gap:12px;
    padding:calc(env(safe-area-inset-top) + 10px) 14px 14px; }
  .readerHead::before{ content:""; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(180deg, color-mix(in srgb, var(--fc,#888) 26%, transparent), transparent); }
  .rdIcon{ position:relative; z-index:1; flex:0 0 auto; width:38px; height:38px; border-radius:50%; cursor:pointer;
    display:flex; align-items:center; justify-content:center; background:var(--card); border:.5px solid var(--line);
    color:var(--ink); box-shadow:var(--shadow); transition:transform .12s, background .15s, color .15s; }
  .rdIcon:active{ transform:scale(.88); }
  .rdIcon svg{ width:19px; height:19px; }
  .rdIcon.on{ background:var(--accent); border-color:var(--accent); color:#fff; }
  .rdProg{ position:relative; z-index:1; flex:1; display:flex; align-items:center; gap:5px; }
  .rddot{ flex:1 1 0; max-width:64px; height:4px; border-radius:4px; background:var(--track); transition:background .3s; }
  .rddot.on{ background:var(--fc,var(--accent)); }
  .rdActs{ position:relative; z-index:1; display:flex; gap:8px; }
  .readerBody{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
    padding:4px 22px 24px; scrollbar-width:none; }
  .readerBody::-webkit-scrollbar{ display:none; }
  .rdField{ display:inline-flex; align-items:center; gap:6px; font-size:var(--fs-label); font-weight:var(--fw-med);
    text-transform:uppercase; color:var(--fc,var(--accent)); letter-spacing:var(--tr-label); }
  .rddate{ font-size:40px; font-weight:var(--fw-bold); letter-spacing:-1.4px; line-height:1; color:var(--fc,var(--accent)); margin:14px 0 2px; }
  .rdTitle{ font-size:28px; font-weight:720; letter-spacing:-.7px; line-height:1.14; margin:10px 0 4px; }
  .rdLayer{ animation:fadeup .32s ease both; padding-top:16px; border-top:.5px solid var(--sep); margin-top:16px; }
  .rdLayer:first-of-type{ border-top:none; margin-top:10px; padding-top:6px; }
  .rdLabel{ font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.6px;
    color:var(--fc,var(--accent)); margin-bottom:9px; }
  .rdLayer.d-gist .rdLabel{ color:var(--l3); }
  .rdLayer.d-debate .rdLabel{ color:var(--blue); }
  .rdLayer p{ font-size:17px; font-weight:400; line-height:1.6; color:var(--ink); margin-bottom:13px; }
  .rdLayer p:last-child{ margin-bottom:0; }
  .rdLayer.d-gist p{ font-size:19px; font-weight:480; letter-spacing:-.2px; line-height:1.45; color:var(--ink); }
  .rdEnd{ margin-top:18px; }
  .rdEnd .kdebate{ margin-top:14px; }
  /* media slots (schema v3): figures / maps / equations */
  .kmedia{ margin:16px 0; }
  .kmedia img{ display:block; width:100%; height:auto; border-radius:14px; border:.5px solid var(--line); }
  .kmedia figcaption, .kmedia .kmcap{ font-size:13px; color:var(--l2); line-height:1.4; margin-top:8px; text-align:center; }
  .kmedia.eq{ background:var(--field); border:.5px solid var(--line); border-radius:14px; padding:18px 18px; overflow-x:auto; text-align:center; }
  .kmedia.eq code{ font-family:ui-monospace,"SF Mono",Menlo,monospace; font-size:15px; color:var(--ink); white-space:pre; }
  .kmedia.eq .katex{ font-size:1.18em; }
  .kmedia.eq .kmsay{ font-size:13px; color:var(--ink); line-height:1.45; margin-top:12px; padding-top:11px; border-top:.5px solid var(--line); text-align:center; }
  .kmedia.eq .kmsay span{ display:inline-block; font-size:10px; font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); color:var(--accent); margin-right:6px; vertical-align:1px; }
  .kdetail .katex{ font-size:1.05em; }
  /* dynamic SVG graphs (viz engine) — calm, card-like, theme-aware */
  .kviz{ background:transparent; border:none; padding:0; margin:18px 0; }
  .kviz .kvizsvg{ display:block; width:100%; height:auto; touch-action:pan-y;
    background:var(--row); border:.5px solid var(--line); border-radius:16px; padding:8px; box-sizing:border-box; }
  .kviz .kvizread{ font-size:13px; color:var(--l2); text-align:center; margin-top:10px; font-variant-numeric:tabular-nums; min-height:1.1em; line-height:1.4; }
  .kviz .kvizread b, .kviz .kvizcv{ color:var(--accent); }
  .kviz .kvizctrls{ display:flex; flex-direction:column; gap:13px; margin-top:14px; padding:0 2px; }
  .kviz .kvizctrl{ display:flex; align-items:center; gap:12px; }
  .kviz .kvizcn{ flex:0 0 auto; min-width:58px; font-size:11px; font-weight:700; color:var(--l2); text-transform:uppercase; letter-spacing:.4px; }
  .kviz .kvizcv{ flex:0 0 auto; min-width:42px; text-align:right; font-size:14px; font-weight:700; font-variant-numeric:tabular-nums; }
  /* custom range slider: hairline track, accent thumb, generous touch target */
  .kviz input[type=range]{ -webkit-appearance:none; appearance:none; flex:1 1 auto; width:auto; height:22px; margin:0; padding:0; background:transparent; box-shadow:none; cursor:pointer; }
  .kviz input[type=range]:focus{ box-shadow:none; outline:none; }
  .kviz input[type=range]:focus-visible::-webkit-slider-thumb{ box-shadow:0 0 0 4px var(--accent-soft); }
  .kviz input[type=range]::-webkit-slider-runnable-track{ height:4px; border-radius:3px; background:var(--line); }
  .kviz input[type=range]::-moz-range-track{ height:4px; border-radius:3px; background:var(--line); }
  .kviz input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; margin-top:-8px; border-radius:50%; background:var(--accent); border:2px solid var(--card); box-shadow:0 1px 4px rgba(0,0,0,.28); }
  .kviz input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--accent); border:2px solid var(--card); box-shadow:0 1px 4px rgba(0,0,0,.28); }
  .kviz .kvizbtn{ align-self:flex-start; display:inline-flex; align-items:center; gap:7px; background:var(--accent); color:#fff; border:none; font-family:inherit; font-size:13px; font-weight:700; padding:9px 16px; border-radius:16px; cursor:pointer; margin-top:2px; box-shadow:0 4px 12px -5px var(--accent-glow); transition:transform .12s; }
  .kviz .kvizbtn:active{ transform:scale(.96); }
  .kviz figcaption{ margin-top:11px; }
  @media (prefers-reduced-motion: reduce){ .kviz .kvizbtn{ transition:none; } }
  /* cross-reference web: "Builds on" / "Connects to" chips */
  .rdrelblock{ margin-top:18px; }
  .rdrelh{ font-size:var(--fs-label); font-weight:var(--fw-med); text-transform:uppercase; letter-spacing:var(--tr-label); color:var(--l3); margin-bottom:9px; }
  .rdrelrow{ display:flex; flex-wrap:wrap; gap:8px; }
  .rdrel{ display:inline-flex; align-items:center; gap:6px; max-width:100%; padding:9px 13px; border-radius:13px; cursor:pointer;
    font-size:14px; font-weight:600; text-align:left; color:var(--ink); font-family:inherit;
    background:color-mix(in srgb, var(--fc,var(--accent)) 9%, var(--card)); border:.5px solid color-mix(in srgb, var(--fc,var(--accent)) 26%, transparent); }
  .rdrel:active{ transform:scale(.96); }
  .rdrel .rdrelmark{ font-size:12px; opacity:.95; }
  .rdrel.met .rdrelmark{ color:var(--green); }
  .rdrel.unmet{ opacity:.92; }
  /* "builds on" lock banner shown when an advanced card is opened before its prerequisites */
  .rdlocked{ display:flex; gap:11px; align-items:flex-start; margin:4px 0 18px; padding:13px 15px;
    background:var(--field); border:.5px solid var(--line); border-left:3px solid var(--accent); border-radius:13px; }
  .rdlocked > svg{ width:18px; height:18px; flex:0 0 auto; color:var(--accent); margin-top:2px; }
  .rdlocked .rdlockedtxt{ min-width:0; }
  .rdlocked .rdlockedrow{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:7px; }
  .rdlocked .rdlockednote{ font-size:13px; color:var(--l2); line-height:1.4; }
  /* reader prev/next navigation row */
  .rdnav{ display:flex; gap:10px; margin-top:8px; }
  .rdnav .btn{ flex:1; }
  /* glossary terms + definition popover (Phase 2) */
  /* inline links share the accent colour; dotted = tap-for-definition, solid = open a source */
  .glossterm{ font:inherit; color:var(--accent); background:none; border:none; padding:0; cursor:pointer;
    border-bottom:1.5px dotted color-mix(in srgb, var(--accent) 55%, transparent); }
  .glossterm:active{ background:var(--accent-soft); border-radius:3px; }
  .glosspop{ position:fixed; z-index:9998; display:none; background:var(--sheetbg); color:var(--ink);
    border:.5px solid var(--line); border-left:3px solid var(--fc,var(--accent)); border-radius:14px;
    padding:13px 15px; box-shadow:0 10px 34px -10px rgba(0,0,0,.4); }
  .glosspop .gpterm{ font-size:15px; font-weight:700; letter-spacing:-.2px; margin-bottom:5px; }
  .glosspop .gpsym{ display:inline-block; margin-right:7px; color:var(--fc,var(--accent)); font-weight:800; }
  .glosspop .gpdef{ font-size:14px; line-height:1.5; color:var(--l2); }
  .rddone{ text-align:center; font-size:14px; font-weight:700; color:var(--green); padding:10px 0 4px; }
  .rdquiz{ margin-top:6px; }
  .readerFoot{ flex:0 0 auto; padding:12px 22px calc(16px + env(safe-area-inset-bottom));
    border-top:.5px solid var(--sep); background:var(--bg); }
  .readerFoot:empty{ display:none; }
  .rddeeper{ display:flex; flex-direction:column; gap:2px; align-items:center; }
  .rddeeper .rddsub{ font-size:12px; font-weight:600; opacity:.85; }

  /* ===== account & sync (Me → settings) ===== */
  .acctp{ font-size:14px; color:var(--l2); line-height:1.55; margin:14px 0 4px; }
  .acctp b{ color:var(--ink); font-weight:700; }
  #acctBody input{ font-size:16px; padding:14px 16px; }