/* Shared finishing details; story palettes remain the source of colour. */
[data-page] { --space-1:8px; --space-2:16px; --space-3:24px; --space-4:32px; --space-6:48px; }
[data-page] button, [data-page] select { min-height:44px; }
[data-page] .bar { padding-inline:clamp(16px,4vw,48px); }
[data-page="library"] .hero { padding-block:48px 64px; }
[data-page="library"] .hero .wrap { min-height:520px; }
[data-page="library"] .intro { max-width:49ch; line-height:1.7; }
[data-page="library"] .hero-cta { border-radius:8px; padding:16px 24px; }
[data-page="library"] .how-grid { gap:32px; padding-top:32px; }
[data-page="library"] .step .n { margin-bottom:8px; }
[data-page="library"] .lib { scroll-margin-top:88px; }
[data-page="library"] .shelf { gap:24px; }
[data-page="library"] .book { border-radius:16px; box-shadow:0 8px 24px #0002; }
[data-page="library"] .book .meta { padding:24px 32px 32px; gap:12px; }
[data-page="library"] .book .enter { display:flex; justify-content:space-between; padding-top:16px; border-top:1px solid var(--line); }
[data-page="library"] .book .enter::after { content:"↗"; font-size:18px; }
[data-page="library"] .book:hover .enter::after { transform:translate(2px,-2px); }
[data-page="library"] .langpick { gap:8px; }
[data-page="book"] .hero-copy { max-width:1440px; margin-inline:auto; gap:24px; }
[data-page="book"] .sub { line-height:1.65; }
[data-page="book"] .cta { padding:16px 32px; border-radius:12px; }
[data-page="book"] .ghost { border-radius:8px; padding:12px 16px; }
[data-page="book"] .langpick { gap:8px; }
[data-page="book"] .pillars { gap:24px; }
[data-page="reader"] .bar { min-height:72px; }
[data-page="reader"] .bar .brand { min-width:0; }
[data-page="reader"] #brand { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
[data-page="reader"] .iconbtn { flex-shrink:0; width:44px; height:44px; border-radius:12px; border-color:var(--control-edge); }
[data-page="reader"] main.reading { max-width:1040px; padding:48px 24px 88px; }
[data-page="reader"] .reading .card { border-radius:24px; box-shadow:0 24px 64px #0003; }
[data-page="reader"] .reading .body, [data-page="reader"] .reading .end { padding:32px; border-top:0; }
[data-page="reader"] .reading .para { font-size:20px; line-height:1.85; }
[data-page="reader"] .reading .pnum { font-size:48px; font-weight:300; margin-bottom:12px; }
[data-page="reader"] .reading .srule { width:48px; height:2px; margin-bottom:24px; }
[data-page="reader"] .choices-lead { margin:32px 0 16px; }
[data-page="reader"] .choices { gap:12px; }
[data-page="reader"] .choices button { padding:16px 64px 16px 48px; font-family:var(--grot); font-size:16px; border-color:var(--control-edge); border-radius:12px; }
[data-page="reader"] .choices button .k { display:grid; place-items:center; position:absolute; left:12px; top:50%; transform:translateY(-50%); width:24px; height:24px; border:1px solid var(--line); border-radius:8px; font:12px var(--mono); color:var(--muted); }
[data-page="reader"] .choices button:hover, [data-page="reader"] .choices button:focus-visible { border-color:var(--accent); }
[data-page="reader"] .choices button:hover .k { border-color:var(--accent); color:var(--accent); }
[data-page="reader"] .cover h1 { font-size:clamp(40px,5vw,64px); }
[data-page="reader"] .cover p { font-family:var(--grot); font-size:16px; line-height:1.65; }
[data-page="reader"] .cover .body { display:flex; flex-direction:column; justify-content:center; padding:48px; }
[data-page="reader"] .cover .start { margin-top:8px; }
[data-page="reader"] .reading .art { height:144px; }
[data-page="reader"] .reading .art.ph .emblem svg { height:80px; }
[data-page="reader"] .reading .art.ph.endscene .emblem svg { height:120px; }
[data-page="reader"] .reading .end h2 { font:400 32px/1.15 var(--serif); margin:16px 0; }
[data-page="reader"] .reading .end .para { font-size:20px!important; text-align:left; }
[data-page="reader"] .stamps { gap:8px; margin:24px 0 16px; }
[data-page="reader"] .stamps i { width:36px; height:36px; }
[data-page="reader"] .again { margin-top:24px; }
[data-page="reader"] .gloss-word { display:inline; min-height:0; margin:0; padding:0; border:0; border-radius:0; font:inherit; line-height:inherit; color:inherit; background:transparent; text-align:inherit; cursor:pointer; }
[data-page="reader"] .gloss-word.hl { border-bottom:2px dotted var(--accent); }
[data-page="reader"] .gloss-word:hover { background:var(--accent-soft); }
[data-page="reader"] .gloss { padding:24px; border:1px solid var(--accent); border-radius:20px; max-height:50svh; overflow:auto; }
[data-page="reader"] .gloss .hw { font:400 28px var(--serif); }
[data-page="reader"] .gloss .en { line-height:1.6; }
[data-page="reader"] .gloss .tr { margin-top:16px; padding-top:16px; }
[data-page="reader"] .close-gloss { float:right; width:44px; height:44px; border:1px solid var(--line); border-radius:12px; background:transparent; color:var(--fg); font:24px var(--grot); cursor:pointer; margin:-8px -8px 0 16px; }
[data-page="reader"] .sheet { visibility:hidden; border:1px solid var(--line); max-height:calc(100svh - 24px); overflow:auto; padding:24px; }
[data-page="reader"] .sheet.on { visibility:visible; }
[data-page="reader"] .sheet-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }
[data-page="reader"] .sheet-head h2 { font:400 28px var(--serif); margin:0; }
[data-page="reader"] .sheet .grab { display:none; }
[data-page="reader"] .sheet .row { padding-block:16px; }
[data-page="reader"] .sheet .row .sel { max-width:55%; }
[data-page="reader"] .scrim { backdrop-filter:blur(6px); }
[data-page="reader"] .loading-state { text-align:center; padding:48px 24px; font-family:var(--grot); }
[data-page="reader"] .loading-state h1 { font:400 32px var(--serif); }
@media(min-width:800px) {
  [data-page="reader"] .reading .card { display:grid; grid-template-columns:minmax(240px,.65fr) minmax(0,1.35fr); }
  [data-page="reader"] .reading .art, [data-page="reader"] .reading .art.ph.endscene { height:100%; min-height:440px; }
  [data-page="reader"] .reading .art.ph .emblem svg { height:128px; max-width:85%; margin:auto; }
  [data-page="reader"] .reading .art.ph.endscene .emblem svg { height:180px; }
  [data-page="reader"] .art .tag { left:24px; bottom:24px; }
  [data-page="reader"] .reading .cover { grid-template-columns:1fr 1.1fr; }
  [data-page="reader"] .reading .cover-art { height:100%; min-height:520px; }
  [data-page="reader"] .sheet { left:50%; right:auto; top:50%; bottom:auto; width:min(480px,calc(100vw - 48px)); margin:0; border-radius:24px; transform:translate(-50%,-45%); opacity:0; }
  [data-page="reader"] .sheet.on { transform:translate(-50%,-50%); opacity:1; }
}
@media(max-width:799px) {
  [data-page="reader"] main.reading { padding:24px 16px 48px; }
  [data-page="reader"] .cover-art { height:240px; }
  [data-page="reader"] .reading .body, [data-page="reader"] .reading .end, [data-page="reader"] .cover .body { padding:24px; }
  [data-page="reader"] .reading .para { font-size:19px; line-height:1.8; }
  [data-page="reader"] .reading .pnum { font-size:40px; }
}
@media(max-width:700px) {
  [data-page="library"] .hero { padding:32px 0 48px; }
  [data-page="library"] .hero .wrap { min-height:0; }
  [data-page="library"] .hero-art { height:280px; margin-top:24px; }
  [data-page="library"] .book .meta { padding:24px; }
  [data-page="book"] .hero-copy { gap:16px; }
}
@media(max-width:380px) {
  [data-page="reader"] .bar { gap:8px; padding:12px; }
  [data-page="reader"] .bar .brand { font-size:15px; gap:8px; }
  [data-page="reader"] .bar .brand .dot { display:none; }
  [data-page="reader"] main.reading { padding:16px 8px 32px; }
  [data-page="reader"] .reading .body, [data-page="reader"] .reading .end, [data-page="reader"] .cover .body { padding:24px 16px; }
  [data-page="reader"] .sheet { padding:24px 16px; }
  [data-page="reader"] .seg { gap:4px; }
  [data-page="reader"] .seg button { padding-inline:10px; }
}
@media(prefers-reduced-motion:reduce) {
  [data-page] *, [data-page] *::before, [data-page] *::after { scroll-behavior:auto!important; transition:none!important; animation:none!important; }
}

[data-page="reader"] .intro-levels { border:0; padding:0; margin:0 0 24px; min-width:0; }
[data-page="reader"] .intro-levels legend { font:12px var(--grot); color:var(--muted); margin-bottom:12px; }
[data-page="reader"] .intro-levels > div { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
[data-page="reader"] .intro-levels button { background:var(--bg); color:var(--fg); border:1px solid var(--control-edge); border-radius:12px; padding:12px 4px; cursor:pointer; }
[data-page="reader"] .intro-levels button strong { font:500 18px var(--grot); }
[data-page="reader"] .intro-levels button span { display:block; margin-top:4px; font:11px var(--grot); }
[data-page="reader"] .intro-levels button[aria-pressed="true"] { background:var(--accent); color:var(--accent-ink); }


/* The library and book details use the same paper-and-teal collection identity. */
body[data-page="library"] {--ink:#f6f3ee;--card:#fffdf9;--fg:#1d1b19;--muted:#6b6560;--line:#e4dfd8;--amber:#2f5d50;--amber-hot:#244b40;--dawn:#2f5d50;background-image:none;}
body[data-page="library"] .bar {background:#f6f3eef0;border-bottom:1px solid var(--line);backdrop-filter:blur(12px);}
body[data-page="library"] .mark {box-shadow:none;border-radius:3px;}
body[data-page="library"] h1,body[data-page="library"] .step h3 {color:var(--fg);}
body[data-page="library"] .tagline {color:var(--amber);}
body[data-page="library"] .intro,body[data-page="library"] .mobile-summary,body[data-page="library"] .step p,body[data-page="library"] .book p {color:var(--muted);}
body[data-page="library"] .hero-cta {color:#fff;}
body[data-page="library"] .book {border-color:var(--line);box-shadow:0 4px 8px #14231c03,0 24px 64px #14231c0d;}
body[data-page="library"] .book:hover {box-shadow:0 24px 60px -18px #14231c2a;}
body[data-page="library"] .book .enter {color:#2f5d50;}
body[data-page="library"] .hero-art::after {background:#14231c33;filter:blur(24px);}
body[data-page="library"] .hero-book {filter:drop-shadow(24px 32px 24px #14231c26);}
body[data-page="library"] .hero-art::before {border-color:#2f5d5020;background:radial-gradient(circle,#2f5d5010,transparent 70%);}
body[data-page="library"] .hero::before {background:radial-gradient(circle,#2f5d5012,transparent 68%);}
body[data-page="book"] {background:#f6f3ee;color:#1d1b19;}
body[data-page="book"] .beat {background:#f6f3ee;}
body[data-page="book"] .beat .body,body[data-page="book"] .pillar p {color:#6b6560;}
body[data-page="book"] .statement em,body[data-page="book"] .close h2 em {color:#2f5d50;}
body[data-page="book"] .beat .klabel,body[data-page="book"] .pillar .n {color:#985031;}
body[data-page="book"] .pillar,body[data-page="book"] .ep {background:#fffdf9;}
body[data-page="book"] .pillar h3 {color:#1d1b19;}
body[data-page="book"] .pillar .chip,body[data-page="book"] .pillar .pgo {color:#2f5d50;}
body[data-page="book"] .close {background:radial-gradient(ellipse at top,#eaf1ee,#f6f3ee 70%);}
body[data-page="book"] .close .libbtn {color:#2f5d50;border-color:#2f5d50;}
body[data-page="book"] .close .textlink {color:#6b6560;}
/* Keep the over-art book hero legible while its language control has a clear surface. */
body[data-page] .langpick {display:flex;align-items:center;gap:8px;width:100%;max-width:600px;padding:16px;margin:20px 0 16px;border:1px solid #d1dcd6;border-radius:16px;background:#fffdf9;box-shadow:0 4px 16px #14231c08;}
body[data-page] .langpick .lbl,body[data-page] .langpick .lp-lbl {display:flex;align-items:center;gap:8px;width:100%;margin:0 0 4px;font:600 13px/1.4 var(--grot);letter-spacing:0;text-transform:none;color:#2f5d50;}
body[data-page] .langpick button {min-height:44px;padding:10px 14px;border:1px solid #d9ded8;border-radius:8px;background:#fffdf9;color:#4c534e;font:500 14px/1.4 var(--grot);transition:background .15s,border-color .15s;}
body[data-page] .langpick button:hover {background:#eaf1ee;border-color:#2f5d50;color:#2f5d50;}
body[data-page] .langpick button.on {background:#2f5d50;border-color:#2f5d50;color:#fff;box-shadow:none;}
body[data-page] .langpick button:focus-visible {outline:3px solid #2f5d50;outline-offset:3px;}
body[data-page="book"] .hero-copy .langpick {max-width:640px;background:#fffdf9f5;box-shadow:0 8px 32px #0002;}
@media(max-width:700px) {
 body[data-page="library"] .hero-copy #heroMorph {order:0;}
 body[data-page="library"] .langpick {order:1;}
 body[data-page="library"] .mobile-summary {order:2;}
 body[data-page="library"] .hero-cta {order:3;}
 body[data-page] .langpick {padding:16px;gap:8px;margin-block:20px 16px;}
 body[data-page] .langpick button {flex:1 0 calc(33.33% - 8px);padding:10px 4px;font-size:13px;}
 body[data-page="book"] .hero-copy {padding-top:156px;} /* clears the fixed bar + header */
}

body[data-page] .langpick .lbl,body[data-page] .langpick .lp-lbl {font-size:15px;}
body[data-page] .langpick button {min-height:48px;font-size:16px;}
@media(max-width:700px){
 /* Phones: "Explore the books" and the cover come first, so the first screen
    leads to the stories; the language picker follows the copy it translates. */
 body[data-page="library"] .hero-cta {order:1;}
 body[data-page="library"] .hero-art {order:2;}
 body[data-page="library"] .hero-copy #heroMorph {order:3;}
 body[data-page="library"] .hero-copy .langpick {order:4;}
 body[data-page="library"] .mobile-summary {display:none;}
 body[data-page] .langpick button {font-size:14px;}
}

body[data-page] .langpick .lbl svg,body[data-page] .langpick .lp-lbl svg {width:20px;height:20px;color:#2f5d50;flex-shrink:0;}
body[data-page="book"] .bar {color:#f4efe6;}
body[data-page="book"] .beat .libbtn {color:#2f5d50;border-color:#2f5d50;}
body[data-page="book"] .beat .textlink {color:#6b6560;}
body[data-page="book"] .beat a:focus-visible,body[data-page="book"] .close a:focus-visible {outline-color:#2f5d50;}
body[data-page="book"] .beat .ep .tag,body[data-page="book"] .footline,body[data-page="book"] .footline b {color:#6b6560;}

/* "Prefer to learn with a real trainer?" card at the end of the library and
   of each book page. Inherits the page's text colour so it works on both the
   light library and the darker book pages. */
.trainer-cta{padding:8px 0 48px}
.trainer-cta-box{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:24px;border:1px solid color-mix(in srgb,currentColor 22%,transparent);border-radius:16px}
.trainer-cta-box>div{flex:1 1 320px;min-width:0}
.trainer-cta h2{margin:0;font:400 1.4rem/1.25 var(--serif,Georgia,serif);letter-spacing:-.01em}
.trainer-cta p{margin:8px 0 0;max-width:60ch;font-size:.95rem;line-height:1.55;opacity:.85}
.trainer-cta a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 20px;border-radius:8px;background:#2f5d50;color:#fff;font:600 15px/1 var(--grot,system-ui,sans-serif);text-decoration:none}
.trainer-cta a:hover{background:#244a3f}
.trainer-cta a:focus-visible{outline:3px solid #2f5d50;outline-offset:3px}