/* ---------------------------------------------------------------------------
   Design tokens — the single place colours are defined.
   Component stylesheets must reference var(--name), never a hex code.

   Long sessions strain eyes through large BRIGHT SURFACES, not through text
   contrast. That's why --paper (text on the dark field) stays bright while
   --card (the big card surface) is a softer parchment, and why the field is
   desaturated: a saturated purple behind a bright card makes the pupil keep
   readjusting. All text pairings clear WCAG AA.
--------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Baloo+2:wght@500;600;700;800&family=Literata:wght@500;600&display=swap');

.ld * { box-sizing:border-box; min-width:0; }
.ld {
  /* Long play sessions strain eyes through large BRIGHT SURFACES, not through
     text contrast. So --paper (text on the dark field) stays bright, while
     --card (the big card surface) drops to a softer, warmer parchment.
     The field is desaturated too: a saturated purple behind a bright card
     makes the pupil keep readjusting. */
  /* One spacing contract for every Study destination and its shared header. */
  --study-gutter:clamp(10px,1vw,16px);
  --study-panel-padding:clamp(10px,1vw,14px);
  --study-gap:12px;
  --study-edge-gap:8px;
  --header-avatar-size:36px;
  --ink:#251B3B; --ink2:#3B2C60;
  /* Reading text changes independently of dark chrome and gold controls. */
  --surface-text:var(--ink); --surface-text-secondary:var(--ink2);
  --discovery-text:var(--discovery-navy); --on-dark:#FFFFFF;
  --on-vivid:var(--paper);
  --on-vivid-white:var(--on-dark); --on-vivid-card:var(--arcade-paper);
  --study-rule-fill:var(--study-rule-blue);
  --theme-preview-default:#F4F1E9; --theme-preview-dark:#191827;
  --dialogue-warm-ink:#865526; --dialogue-warm-paper:#FFF6E3;
  --dialogue-blue-ink:#286F87; --speaker-foreground:var(--on-dark);
  --paper:#F8EDD9;                        /* text and icons on dark */
  --card:#F1E3C8; --card2:#E6D4AC;        /* card and button surfaces */
  --gold:#F2AE33; --jade:#17A07C; --rosa:#DB4A63; --azul:#3689CE; --lila:#8A6BD4;
  --shade:rgba(37,27,59,.22);             /* rules and borders on light surfaces */
  --panel-bg:#302543;
  --dialog-backdrop:rgba(37,27,59,.7);
  --control-bg:rgba(248,237,217,.035);
  --control-hover:rgba(248,237,217,.09);
  --control-border:rgba(248,237,217,.2);
  --toolbar-surface:linear-gradient(180deg,var(--control-hover),transparent 65%),var(--panel-bg);
  --toolbar-shadow:inset 0 1px 0 var(--control-border),0 4px 12px var(--arcade-shadow);
  --toolbar-button:linear-gradient(180deg,var(--control-hover),var(--control-bg));
  --text-muted:#C9BFD5;
  --home-coral:#B64535; --home-peach:#FAE0CD; --home-sun:#F5D778;
  --home-glow-lilac:rgba(138,107,212,.38);
  --home-glow-jade:rgba(23,160,124,.24);
  --home-glow-rose:rgba(219,74,99,.18);
  --home-field:#302342;
  --home-field-light:#49345F;
  --home-header:#392B4D;
  --home-header-line:rgba(233,224,242,.22);
  --home-lime:#E6EDBA; --home-blue:#DEEAF1;
  --study-rule-blue:#2F58E8; --study-rule-soft:#E0E8FF; --study-sheet:#FFFFFF;
  --discovery-navy:#20233F; --discovery-muted:#555D80;
  --discovery-hero:#3535AD; --discovery-hero-end:#7943C1; --discovery-yellow:#F7CC49; --discovery-gold:#876100;
  --study-canvas:#F4F1E9; --study-success:#12805B; --study-extra:#6844BB; --study-key-soft:#FFF1BF;
  --practice-coral:#C0452B; --practice-coral-soft:#FBE3D6;
  --practice-green:#168A5B; --practice-green-soft:#E3F4EB;
  --arcade-paper:#FFF9EC;
  --arcade-surface:#F5EDD9;
  --arcade-line:#DDD2BB;
  --arcade-muted:#72687B;
  --arcade-green:#27644F;
  --arcade-green-soft:#DCEDE0;
  --arcade-pink-soft:#F5DFE4;
  --arcade-purple-soft:#E9E0F2;
  --arcade-shadow:rgba(22,14,36,.15);
  font-family:'Baloo 2',system-ui,sans-serif; font-weight:600;
  color:var(--paper);
  /* an app shell: the page itself never scrolls, only the content inside it */
  box-sizing:border-box;
  height:100vh; height:100dvh;
  display:flex; flex-direction:column; overflow:hidden;
  padding-inline:env(safe-area-inset-left, 0px) env(safe-area-inset-right, 0px);
  background:
    radial-gradient(900px 520px at 50% -8%, #3B2A5E 0%, transparent 64%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.022) 0 2px, transparent 2px 10px),
    var(--ink);
  /* native-feeling chrome */
  -webkit-tap-highlight-color:transparent;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
}
.ld input, .ld textarea, .ld select { user-select:text; -webkit-user-select:text; }
.ld h1,.ld h2,.ld .slab { font-family:'Alfa Slab One',Georgia,serif; font-weight:400; letter-spacing:-.015em; }
.ld button { font-family:inherit; font-weight:800; cursor:pointer; }
.ld button:focus-visible, .ld input:focus-visible { outline:3px solid var(--gold); outline-offset:3px; }

/* Preserve brand artwork and bright actions; dim the large reading surfaces. */
html[data-theme="default"] { color-scheme:light; }
html[data-theme="dark"] { color-scheme:dark; background:#191827; }
html[data-theme="dark"] .ld {
  --on-vivid:var(--ink); --on-vivid-white:var(--ink); --on-vivid-card:var(--ink);
  --study-rule-fill:#303E70;
  --dialogue-warm-ink:#E0B67D; --dialogue-warm-paper:#493B28;
  --dialogue-blue-ink:#91C7DD; --speaker-foreground:var(--ink);
  --surface-text:#F1EAF9; --surface-text-secondary:#D6C9EA;
  --discovery-text:#F1EAF9; --discovery-muted:#C0B9D2;
  --card:#292638; --card2:#353044;
  --study-canvas:#191827; --study-sheet:#252334;
  --panel-bg:#211E30; --home-field:#211E30; --home-field-light:#37304A;
  --shade:rgba(224,213,245,.22);
  --arcade-paper:#292638; --arcade-surface:#211F30;
  --arcade-line:#51495F; --arcade-muted:#BEB5CE;
  --arcade-green:#89DAB6; --arcade-green-soft:#203F36;
  --arcade-pink-soft:#452B3C; --arcade-purple-soft:#37304F;
  --arcade-shadow:rgba(0,0,0,.3);
  --home-peach:#45302D; --home-lime:#353D2C; --home-blue:#293B4B;
  --study-rule-blue:#A9BDFF; --study-rule-soft:#2B3558;
  --study-success:#85DAB2; --study-extra:#C6AEFF; --study-key-soft:#453B24;
  --discovery-gold:#F5D778;
  --practice-coral:#FFAA90; --practice-coral-soft:#492F2B;
  --practice-green:#85DAB2; --practice-green-soft:#243D34; --home-coral:#FFA897;
}

/* Standalone public reading pages reuse Vane's tokens without the app viewport shell. */
body.learn-page { height:auto; min-height:100dvh; display:block; overflow:visible; margin:0;
  color:var(--discovery-navy); background:var(--study-canvas); user-select:text; }
.learn-page a { color:inherit; text-decoration-thickness:2px; text-underline-offset:4px; }
.learn-page a:focus-visible { outline:3px solid var(--study-rule-blue); outline-offset:4px; }
.learn-page .learn-header a:focus-visible,.learn-page .learn-primary:focus-visible { outline-color:var(--discovery-yellow); }
.learn-skip { position:absolute; top:8px; left:8px; padding:12px; z-index:2; background:var(--study-sheet); transform:translateY(-160%); }
.learn-skip:focus { transform:none; }
.learn-header { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px max(20px,calc((100% - 1120px)/2)); color:var(--on-dark); background:var(--discovery-navy); }
.learn-header a { display:inline-flex; align-items:center; min-height:44px; padding:6px 10px; text-decoration:none; border-radius:10px; }
.learn-header a:hover { background:var(--control-hover); }
.learn-brand { gap:8px; font-family:'Alfa Slab One',Georgia,serif; font-size:24px; }
.learn-header nav { display:flex; gap:8px; flex-wrap:wrap; }
.learn-header [aria-current] { color:var(--discovery-yellow); }
.learn-header-practice { border:1px solid var(--control-border); }
.learn-page main { max-width:1120px; margin:auto; padding:16px 24px 32px; }
.learn-breadcrumb { display:flex; flex-wrap:wrap; gap:6px; color:var(--discovery-muted); font-size:14px; margin:0 0 16px; }
.learn-breadcrumb a { display:inline-flex; align-items:center; min-height:44px; }
.learn-breadcrumb > span { display:inline-flex; align-items:center; }
.learn-hero { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:24px; align-items:center;
  padding:28px; border-radius:24px; color:var(--on-dark); background:linear-gradient(120deg,var(--discovery-hero),var(--discovery-hero-end)); }
.learn-page h1 { font-family:'Baloo 2',system-ui,sans-serif; font-size:clamp(28px,3.5vw,44px); font-weight:800;
  line-height:1.12; margin:8px 0 16px; text-wrap:balance; }
.learn-page h2 { font-family:'Baloo 2',system-ui,sans-serif; font-weight:800; font-size:24px; margin:0 0 12px; line-height:1.25; }
.learn-page h3 { font-size:20px; margin:0 0 8px; }
.learn-page h4 { font-size:18px; margin:0 0 8px; }
.learn-page p,.learn-page li { font-size:18px; line-height:1.55; }
.learn-page p { margin:0 0 12px; }
.learn-page .learn-eyebrow { font-size:14px; letter-spacing:.025em; }
.learn-page .learn-primary { display:inline-flex; align-items:center; justify-content:center; gap:12px;
  min-height:48px; padding:10px 18px; border-radius:12px; color:var(--discovery-navy);
  background:var(--discovery-yellow); font-weight:800; text-decoration:none; text-align:center; }
.learn-page .learn-primary:hover { color:var(--discovery-navy); background:var(--home-sun); }
.learn-first-words { background:var(--study-sheet); color:var(--discovery-navy); padding:20px; border-radius:18px; }
.learn-first-words img { float:right; margin:0 0 8px 12px; }
.learn-first-words h2 { font-size:20px; }
.learn-directory,.learn-next,.learn-related { margin:28px 0; }
.learn-directory > p { color:var(--discovery-muted); }
.learn-game-skills { clear:both; padding-left:20px; margin:16px 0 0; }
.learn-game-skills li { font-size:16px; margin:8px 0; }
.learn-game-list { list-style:none; padding:0; margin:16px 0; border-top:1px solid var(--arcade-line); }
.learn-game-list > li { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:20px 8px; border-bottom:1px solid var(--arcade-line); }
.learn-game-list > li > div { max-width:720px; }
.learn-game-list p { font-size:16px; margin:0; }
.learn-game-list .learn-eyebrow { color:var(--discovery-muted); font-size:13px; margin-bottom:4px; }
.learn-game-action { display:inline-flex; align-items:center; gap:12px; min-height:44px; padding:8px 12px; border-radius:10px; flex-shrink:0; max-width:280px; font-weight:800; }
.learn-game-action:hover { background:var(--study-sheet); }
.learn-game-faq { max-width:860px; margin:28px 0; }
.learn-game-faq > section { margin:20px 0; }
.learn-game-faq p { font-size:17px; }
.learn-guide-list { list-style:none; padding:0; margin:12px 0; border-top:1px solid var(--arcade-line); }
.learn-guide-list li { border-bottom:1px solid var(--arcade-line); }
.learn-guide-list a { display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:64px; padding:16px 8px; text-decoration:none; border-radius:8px; }
.learn-guide-list a:hover { background:var(--study-sheet); }
.learn-guide-list strong { display:block; font-size:20px; line-height:1.35; }
.learn-guide-list a > span > span { display:block; margin-top:4px; color:var(--discovery-muted); font-size:16px; }
.learn-guide-list a > span:last-child { flex-shrink:0; font-size:24px; }
.learn-practice { display:flex; align-items:center; justify-content:space-between; gap:24px;
  background:var(--discovery-navy); color:var(--on-dark); border-radius:18px; padding:24px; margin:28px 0; }
.learn-practice div { max-width:620px; }
.learn-practice p { font-size:16px; margin:0; }
.learn-practice .learn-primary { flex-shrink:0; max-width:260px; }
.learn-article { max-width:860px; margin:auto; }
.learn-article-header { padding:24px; border-radius:20px; background:var(--study-rule-soft); margin-bottom:24px; }
.learn-article-header > p { max-width:660px; }
.learn-goal { color:var(--study-rule-blue); font-weight:800; }
.learn-reading { max-width:740px; margin:auto; }
.learn-reading section { margin:24px 0; }
.learn-examples { margin:12px 0 0; }
.learn-examples > div { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px;
  padding:12px 0; border-bottom:1px solid var(--arcade-line); }
.learn-examples dt { font-size:20px; font-weight:800; }
.learn-examples dd { font-size:18px; margin:0; color:var(--discovery-muted); align-self:center; }
.learn-compare { display:grid; grid-template-columns:1fr 1fr; gap:16px; background:var(--study-sheet); padding:18px; border-radius:14px; }
.learn-compare ul { padding-left:20px; margin:0; }
.learn-table-wrap { overflow-x:auto; max-width:100%; border:1px solid var(--arcade-line); border-radius:12px; }
.learn-table-wrap table { width:100%; border-collapse:collapse; background:var(--study-sheet); font-size:17px; }
.learn-table-wrap caption { position:absolute; width:1px; height:1px; overflow:hidden;
  clip-path:inset(50%); padding:0; }
.learn-table-wrap td,.learn-table-wrap th { padding:10px 12px; text-align:left; border-bottom:1px solid var(--arcade-line); }
.learn-table-wrap thead { background:var(--study-rule-soft); }
.learn-pattern { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.learn-pattern > span:nth-child(odd) { padding:10px 14px; border-radius:10px; background:var(--study-rule-soft); font-weight:800; }
.learn-pattern small { display:block; font-size:14px; font-weight:600; }
.learn-mistakes { padding:0; list-style:none; }
.learn-mistakes li { padding:16px; margin:12px 0; background:var(--study-sheet); border-radius:12px; }
.learn-mistakes li p:last-child { margin:0; }
.learn-dialogue { list-style:none; padding:0; }
.learn-dialogue li { padding:14px 16px; margin:10px 0; border-radius:12px; background:var(--study-sheet); }
.learn-dialogue li p { margin:0; }
.learn-dialogue li p[lang]:last-child { color:var(--discovery-muted); font-size:16px; }
.learn-speaker { font-size:14px; color:var(--discovery-muted); }
.learn-all { display:inline-flex; min-height:44px; align-items:center; font-weight:800; }
.learn-footer { max-width:1120px; padding:20px 24px; margin:auto; border-top:1px solid var(--arcade-line); }
.learn-footer p { font-size:16px; color:var(--discovery-muted); }
.learn-footer a { display:inline-flex; min-height:44px; align-items:center; }
.learn-not-found nav { display:flex; flex-wrap:wrap; align-items:center; gap:16px; }
.learn-hero,.learn-article-header { animation:learn-arrive 220ms ease-out both; }
@keyframes learn-arrive { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
@media (max-width:800px) {
  .learn-game-list > li { align-items:flex-start; flex-direction:column; gap:8px; }
  .learn-game-list .learn-game-action { padding-left:0; max-width:100%; }
  .learn-hero { grid-template-columns:1fr; padding:24px; }
  .learn-first-words { display:grid; grid-template-columns:auto 1fr; gap:12px; }
  .learn-first-words img { float:none; grid-row:span 2; margin:0; width:48px; height:48px; }
  .learn-first-words .learn-examples { margin:0; }
  .learn-practice { flex-direction:column; align-items:flex-start; gap:16px; }
}
@media (max-width:540px) {
  .learn-header { flex-wrap:wrap; gap:4px; padding:8px 12px; }
  .learn-brand { font-size:20px; }
  .learn-header nav { width:100%; gap:4px; justify-content:space-between; font-size:14px; }
  .learn-header a { padding:6px; }
  .learn-page main { padding:12px 16px 24px; }
  .learn-hero,.learn-article-header { padding:20px 16px; border-radius:16px; }
  .learn-hero { gap:20px; }
  .learn-first-words { display:block; padding:16px; }
  .learn-first-words img { float:right; margin-left:8px; }
  .learn-first-words h2 { font-size:18px; }
  .learn-compare { grid-template-columns:1fr; }
  .learn-examples > div { grid-template-columns:1fr; gap:2px; }
  .learn-first-words .learn-examples > div { grid-template-columns:1fr 1fr; gap:8px; }
  .learn-page .learn-primary { max-width:100%; }
  .learn-practice { padding:20px 16px; }
  .learn-guide-list strong { font-size:18px; }
}
@media (prefers-reduced-motion:reduce) { .learn-hero,.learn-article-header { animation:none; } }