/* EnglishTarget.com
   Layout concept: an English exercise book. Ruled blue paper, a red margin line,
   picture flashcards on the page, and the four-line copybook ruling under every word. */

@font-face { font-family: "Lexend"; src: url(../fonts/lexend-var.woff2) format("woff2"); font-weight: 300 800; font-display: swap; }
@font-face { font-family: "Andika"; src: url(../fonts/andika-400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Andika"; src: url(../fonts/andika-700.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* paper and ink */
  --paper: #F4F7FC; --sheet: #FFFFFF; --sheet-2: #ECF1FA; --ink: #16213B; --ink-2: #4A5574; --ink-3: #75809E;
  --rule: #D7E1F2; --rule-2: #B4C5E4; --margin: #E5484D; --margin-d: #C2353A; --pen: #2453C7; --pen-soft: #E2EAFC;
  --pencil: #FFC83D; --marker: #FFE48A; --ok: #13804F; --ok-soft: #DCF3E6; --bad: #C2353A; --bad-soft: #FBE2E3;
  /* picture tiles stay light in both themes so the drawings read */
  --tile-1: #FFF0CE; --tile-2: #DCE9FF; --tile-3: #DBF2E2; --tile-4: #FFE0E6; --tile-5: #EBE3FF; --tile-6: #D7F1F1;
  /* CEFR levels */
  --lv-s: #D9488A; --lv-a1: #1C8F5A; --lv-a2: #0C8189; --lv-b1: #2D5FCF; --lv-b2: #6A4ACB; --lv-c1: #C9661A; --lv-c2: #C2353A; --lv-ink: #FFFFFF;
  /* the 12 parts of the grammar book */
  --p1: #E5484D; --p2: #D9488A; --p3: #C9661A; --p4: #A27100; --p5: #1C8F5A; --p6: #0C8189; --p7: #1F7AB8; --p8: #2D5FCF; --p9: #6A4ACB; --p10: #9A3FB0; --p11: #B4364F; --p12: #46597F;
  --shadow: 0 1px 2px rgb(22 33 59 / .06), 0 4px 14px rgb(22 33 59 / .07);
  --shadow-lg: 0 2px 6px rgb(22 33 59 / .07), 0 18px 42px rgb(22 33 59 / .13);
  --f-ui: "Lexend", system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", sans-serif;
  --f-learn: "Andika", "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r: 18px; --r-sm: 12px; --top-h: 62px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0D1322; --sheet: #151D32; --sheet-2: #1C2640; --ink: #E7ECF7; --ink-2: #AEB8D0; --ink-3: #8390AE;
    --rule: #263250; --rule-2: #3A4A70; --margin: #FF6A6F; --margin-d: #E2484E; --pen: #8DAEFF; --pen-soft: #22305A;
    --pencil: #FFD25E; --marker: #6B5414; --ok: #52D3A0; --ok-soft: #133A2C; --bad: #FF8A90; --bad-soft: #43202A;
    --tile-1: #F2E5C4; --tile-2: #D2DFF5; --tile-3: #D1E8D8; --tile-4: #F1D6DC; --tile-5: #DFD7F3; --tile-6: #CDE6E6;
    --lv-s: #FF7DB5; --lv-a1: #47C98A; --lv-a2: #3CC0C6; --lv-b1: #7EA2FF; --lv-b2: #A88EFF; --lv-c1: #F5A15A; --lv-c2: #FF7A85; --lv-ink: #0D1322;
    --p1: #FF6A6F; --p2: #FF7DB5; --p3: #F5A15A; --p4: #E8C04A; --p5: #47C98A; --p6: #3CC0C6; --p7: #5EB6F0; --p8: #7EA2FF; --p9: #A88EFF; --p10: #D58BEA; --p11: #FF8FA6; --p12: #A9B8DA;
    --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 14px rgb(0 0 0 / .25); --shadow-lg: 0 2px 6px rgb(0 0 0 / .3), 0 18px 42px rgb(0 0 0 / .45);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: #0D1322; --sheet: #151D32; --sheet-2: #1C2640; --ink: #E7ECF7; --ink-2: #AEB8D0; --ink-3: #8390AE;
  --rule: #263250; --rule-2: #3A4A70; --margin: #FF6A6F; --margin-d: #E2484E; --pen: #8DAEFF; --pen-soft: #22305A;
  --pencil: #FFD25E; --marker: #6B5414; --ok: #52D3A0; --ok-soft: #133A2C; --bad: #FF8A90; --bad-soft: #43202A;
  --tile-1: #F2E5C4; --tile-2: #D2DFF5; --tile-3: #D1E8D8; --tile-4: #F1D6DC; --tile-5: #DFD7F3; --tile-6: #CDE6E6;
  --lv-s: #FF7DB5; --lv-a1: #47C98A; --lv-a2: #3CC0C6; --lv-b1: #7EA2FF; --lv-b2: #A88EFF; --lv-c1: #F5A15A; --lv-c2: #FF7A85; --lv-ink: #0D1322;
  --p1: #FF6A6F; --p2: #FF7DB5; --p3: #F5A15A; --p4: #E8C04A; --p5: #47C98A; --p6: #3CC0C6; --p7: #5EB6F0; --p8: #7EA2FF; --p9: #A88EFF; --p10: #D58BEA; --p11: #FF8FA6; --p12: #A9B8DA;
  --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 4px 14px rgb(0 0 0 / .25); --shadow-lg: 0 2px 6px rgb(0 0 0 / .3), 0 18px 42px rgb(0 0 0 / .45);
  color-scheme: dark;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
/* Every letter on its own: learners read letter by letter, and a coloured first letter must not drag the next one with it (fi, fl, ff). !important because the font shorthand resets this. */
*, *::before, *::after { font-variant-ligatures: no-common-ligatures !important; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--top-h) + 16px); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 1rem/1.6 var(--f-ui); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--sheet); }
img, svg { max-width: 100%; }
a { color: var(--pen); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { line-height: 1.2; text-wrap: balance; letter-spacing: -.01em; margin: 0; }
h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); font-weight: 800; }
h2 { font-size: clamp(1.35rem, 2.6vw, 1.75rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 700; }
p { margin: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--pen); outline-offset: 2px; border-radius: 6px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 50; background: var(--ink); color: var(--paper); padding: .5em 1em; border-radius: 8px; }
.skip:focus { left: 16px; }
.wrap { max-width: 1160px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.muted { color: var(--ink-2); }
.small { font-size: .88rem; }
.ic { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.22em; }
main { display: block; min-height: 60vh; padding-bottom: 48px; }
mark { background: var(--marker); color: inherit; padding: 0 .15em; border-radius: 3px; }
s { color: var(--bad); text-decoration-thickness: 2px; }
b.k { color: var(--ink); font-weight: 700; background: linear-gradient(transparent 58%, var(--marker) 58%); padding: 0 .08em; }

/* ---------- header ---------- */
.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: color-mix(in srgb, var(--sheet) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
.top-in { max-width: 1160px; margin: 0 auto; height: var(--top-h); display: flex; align-items: center; gap: 12px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.logo { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); flex: none; }
.logo-mark { width: 36px; height: 36px; }
.logo-word { font-weight: 800; font-size: 1.2rem; letter-spacing: -.02em; }
.logo-word b { color: var(--margin); font-weight: 800; }
.nav { display: flex; gap: 2px; margin-left: 12px; }
.nav a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: .95rem; position: relative; }
.nav a:hover { background: var(--sheet-2); color: var(--ink); }
.nav a[aria-current] { color: var(--ink); font-weight: 700; }
.nav a[aria-current]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 1px; height: 3px; border-radius: 3px; background: var(--margin); }
.top-tools { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; border: 0; background: transparent; color: var(--ink-2); text-decoration: none; }
.icon-btn:hover { background: var(--sheet-2); color: var(--ink); }
.icon-btn .ic { width: 22px; height: 22px; }
.xp-pill { position: absolute; top: 2px; right: -4px; background: var(--pencil); color: #16213B; font-size: .62rem; font-weight: 800; padding: 1px 5px; border-radius: 99px; line-height: 1.4; }
.menu-btn { display: none; }
@media (max-width: 1060px) { .nav span { display: none; } .nav a { padding: 8px 10px; } }
@media (max-width: 860px) {
  .nav, .me-btn { display: none; }
  .logo-word { font-size: 1.12rem; }
  main { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); }
}

/* phone tab bar */
.tabbar { display: none; }
@media (max-width: 860px) {
  .tabbar { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: var(--sheet); border-top: 1px solid var(--rule); padding: 4px max(6px, env(safe-area-inset-right, 0px)) calc(4px + env(safe-area-inset-bottom, 0px)) max(6px, env(safe-area-inset-left, 0px)); box-shadow: 0 -6px 20px rgb(22 33 59 / .06); }
  .tabbar a, .tabbar button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; background: none; color: var(--ink-3); text-decoration: none; font-size: .7rem; font-weight: 600; border-radius: 10px; }
  .tabbar .ic { width: 24px; height: 24px; }
  .tabbar [aria-current] { color: var(--margin); }
}

/* sheets (dialogs) */
dialog.sheet { border: 0; padding: 0; width: min(560px, calc(100% - 32px)); max-height: min(80vh, 720px); border-radius: 22px; background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-lg); overflow: auto; }
dialog.sheet::backdrop { background: rgb(10 16 32 / .45); backdrop-filter: blur(2px); }
@media (max-width: 600px) {
  dialog.sheet { width: 100%; max-width: none; margin: auto 0 0; border-radius: 22px 22px 0 0; max-height: 86vh; padding-bottom: env(safe-area-inset-bottom, 0px); }
}
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 6px 20px; position: sticky; top: 0; background: var(--sheet); }
.sheet-head b { font-size: 1.15rem; }
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; padding: 6px 12px 16px; }
.menu-grid a { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; text-decoration: none; color: var(--ink); }
.menu-grid a:hover { background: var(--sheet-2); }
.menu-grid .ic { width: 26px; height: 26px; color: var(--margin); }
.menu-grid span { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.menu-grid small { color: var(--ink-3); font-size: .78rem; }
.search-bar { display: flex; align-items: center; gap: 8px; padding: 12px 12px 12px 18px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--sheet); }
.search-bar > .ic { color: var(--ink-3); }
.search-bar input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 1.1rem; padding: 8px 0; outline: none; }
.search-res { list-style: none; margin: 0; padding: 6px; }
.search-res a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 12px; text-decoration: none; color: var(--ink); }
.search-res a:hover, .search-res a.on { background: var(--sheet-2); }
.search-res .se { width: 30px; font-size: 1.35rem; text-align: center; flex: none; }
.search-res b { font-weight: 600; }
.search-res small { margin-left: auto; color: var(--ink-3); font-size: .75rem; white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.search-hint { padding: 4px 20px 18px; color: var(--ink-3); font-size: .9rem; }
.search-hint button { border: 1px solid var(--rule-2); background: none; border-radius: 99px; padding: 2px 10px; margin: 2px; color: var(--pen); }
.set-body { padding: 4px 20px 20px; display: grid; gap: 14px; }
.set-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.set-row > span { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.set-row select { max-width: 100%; min-width: 0; flex: 1 1 200px; padding: 8px 10px; border-radius: 10px; border: 1.5px solid var(--rule-2); background: var(--sheet); }
.seg { display: inline-flex; background: var(--sheet-2); border-radius: 12px; padding: 3px; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 9px; font-size: .9rem; color: var(--ink-2); }
.seg button[aria-checked="true"] { background: var(--sheet); color: var(--ink); font-weight: 700; box-shadow: var(--shadow); }
.set-note { font-size: .85rem; color: var(--ink-3); }

/* ---------- buttons, chips, badges ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .62em 1.05em; border-radius: 12px; border: 2px solid transparent; font-weight: 600; font-size: .95rem; text-decoration: none; line-height: 1.2; transition: transform .08s, background .15s; }
.btn:active { transform: translateY(2px); }
.btn-go { background: var(--margin); color: #fff; box-shadow: 0 3px 0 var(--margin-d); }
.btn-go:hover { background: var(--margin-d); }
.btn-soft { background: var(--pen-soft); color: var(--pen); }
.btn-soft:hover { border-color: var(--pen); }
.btn-ghost { background: transparent; border-color: var(--rule-2); color: var(--ink); }
.btn-ghost:hover, .btn-ghost[aria-pressed="true"] { border-color: var(--ink-2); background: var(--sheet-2); }
.btn-bad { background: var(--bad); color: #fff; }
.btn-lg { font-size: 1.05rem; padding: .8em 1.3em; border-radius: 14px; }
.btn .ic { width: 1.15em; height: 1.15em; }
.chip { display: inline-flex; align-items: center; gap: .4em; padding: .35em .8em; border-radius: 99px; background: var(--sheet); border: 1.5px solid var(--rule-2); color: var(--ink); text-decoration: none; font-size: .9rem; font-weight: 500; }
.chip:hover { border-color: var(--pen); color: var(--pen); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.lv { display: inline-flex; align-items: center; padding: .1em .55em; border-radius: 7px; font-size: .75rem; font-weight: 800; letter-spacing: .03em; color: var(--lv-ink); background: var(--lv-a1); line-height: 1.5; vertical-align: .1em; white-space: nowrap; }
.lv-s { background: var(--lv-s); } .lv-a1 { background: var(--lv-a1); } .lv-a2 { background: var(--lv-a2); } .lv-b1 { background: var(--lv-b1); }
.lv-b2 { background: var(--lv-b2); } .lv-c1 { background: var(--lv-c1); } .lv-c2 { background: var(--lv-c2); }
.lv-big { font-size: 1.05rem; padding: .3em .7em; border-radius: 10px; }
.say { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 0; background: var(--pen-soft); color: var(--pen); }
.say:hover { background: var(--pen); color: var(--sheet); }
.say .ic { width: 18px; height: 18px; }
.mic-btn { display: inline-grid; place-items: center; width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1.5px solid var(--rule-2); background: transparent; color: var(--ink-2); margin-left: auto; }
.mic-btn:hover { border-color: var(--margin); color: var(--margin); }
.mic-btn .ic { width: 18px; height: 18px; }
.mic-btn.on { background: var(--margin); color: #fff; border-color: var(--margin); animation: pulse 1s infinite; }
.speaking { outline: 3px solid var(--pencil) !important; outline-offset: 2px; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgb(229 72 77 / .2); } }

/* ---------- pictures ---------- */
.pic { --ps: var(--ps-max); display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--ps) * .1); line-height: 1; vertical-align: middle; flex-wrap: nowrap; max-width: 100%; }
.pic-in { --ps-max: 1.35em; vertical-align: -.3em; }
.pic-sm { --ps-max: 28px; } .pic-md { --ps-max: 46px; } .pic-lg { --ps-max: 66px; } .pic-xl { --ps-max: 104px; } .pic-xxl { --ps-max: 150px; }
.tile { container-type: inline-size; }
.tile .pic { --ps: min(var(--ps-max), calc(86cqw / var(--u, 1)), calc(var(--hcap, 62cqw) / var(--kh, 1))); }
.sw-pic, .pair button > span, .fc-face, .ph-pic, .sec-pic, .unit-pic, .litem-pic, .phr-pic, .pv-pic, .v-pic > span, .step-pic, .wotd-pic, .mw-pic, .frac > span:first-child { --hcap: 80cqw; }
.deck-card { --hcap: 100cqw; }
.pa { display: inline-block; flex: none; position: relative; width: calc(var(--ps) * var(--ar, 1) * var(--k, 1)); height: calc(var(--ps) * var(--k, 1)); background: center / contain no-repeat; }
.pa-s { --k: .62; } .pa-l { --k: 1.3; }
.pa-f { opacity: .3; filter: grayscale(1); }
.pa-dim { opacity: .42; filter: grayscale(.7); }
.pa-hl { border-radius: 50%; background-color: #FFF4C7; box-shadow: 0 0 0 calc(var(--ps) * .045) #F5B400, 0 0 0 calc(var(--ps) * .1) rgb(255 200 61 / .35); }
.pa-x::after { content: ""; position: absolute; inset: -8%; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M6 6L34 34M34 6L6 34' stroke='%23fff' stroke-width='9' stroke-linecap='round'/%3E%3Cpath d='M6 6L34 34M34 6L6 34' stroke='%23DD2E44' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.pa-me::before { content: "ME"; position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 55%); z-index: 1; font: 800 max(9px, calc(var(--ps) * .22))/1 var(--f-ui); background: var(--margin); color: #fff; padding: .2em .45em; border-radius: 99px; letter-spacing: .04em; }
.pg { display: inline-flex; flex: none; }
.pg .pa + .pa { margin-left: calc(var(--ps) * -.18); }
.prep { display: inline-flex; gap: calc(var(--ps) * .05); flex: none; }
.pgap { display: inline-block; width: calc(var(--ps) * .6); flex: none; }
.pop { font: 800 calc(var(--ps) * .44)/1 var(--f-ui); color: var(--pic-ink, var(--ink)); padding: 0 .05em; flex: none; }
.plabel { flex: none; font: 700 max(11px, calc(var(--ps) * .25))/1.15 var(--f-ui); background: #fff; color: #16213B; border: 2px solid #16213B; border-radius: 8px; padding: .25em .45em; white-space: nowrap; }
.fam { position: relative; display: inline-block; flex: none; width: calc(var(--ps) * 2.6); aspect-ratio: 210 / 160; max-width: 100%; background: center / 100% 100% no-repeat; }
.fam .pa { position: absolute; width: 14.3%; height: 18.75%; }
.tile { --pic-ink: #16213B; display: grid; place-items: center; border-radius: 16px; background: var(--tile-1); }
.tc1 { background: var(--tile-1); } .tc2 { background: var(--tile-2); } .tc3 { background: var(--tile-3); }
.tc4 { background: var(--tile-4); } .tc5 { background: var(--tile-5); } .tc6 { background: var(--tile-6); }

/* four-line copybook ruling: ascender line, dashed middle line, red base line, descender line */
.ruled {
  display: inline-block; font-family: var(--f-learn); font-weight: 700; line-height: 1.9; padding: 0 .3em;
  background:
    linear-gradient(var(--rule-2), var(--rule-2)) 0 calc(50% - .5em) / 100% 1px no-repeat,
    linear-gradient(90deg, var(--rule-2) 55%, transparent 0) 0 calc(50% - .1em) / 7px 1px repeat-x,
    linear-gradient(var(--margin), var(--margin)) 0 calc(50% + .43em) / 100% 1.6px no-repeat,
    linear-gradient(var(--rule-2), var(--rule-2)) 0 calc(50% + .72em) / 100% 1px no-repeat;
}

/* ---------- page header ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; color: var(--ink-3); padding-top: 18px; }
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--pen); text-decoration: underline; }
.ph { display: flex; gap: 20px; align-items: center; padding: 14px 0 22px; }
.ph-pic { width: 112px; height: 112px; flex: none; border-radius: 26px; transform: rotate(-3deg); box-shadow: var(--shadow); }
.ph-text { min-width: 0; display: grid; gap: 8px; }
.ph-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; color: var(--ink-3); font-size: .9rem; font-weight: 500; }
.lead { font-size: 1.12rem; color: var(--ink-2); max-width: 62ch; }
@media (max-width: 600px) { .ph { gap: 14px; align-items: flex-start; } .ph-pic { width: 76px; height: 76px; border-radius: 20px; } .lead { font-size: 1rem; } }
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 20px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.toc a { padding: .35em .8em; border-radius: 99px; background: var(--sheet); border: 1.5px solid var(--rule); color: var(--ink-2); text-decoration: none; font-size: .88rem; font-weight: 500; display: inline-flex; gap: 6px; align-items: center; }
.toc a:hover { border-color: var(--pen); color: var(--pen); }
.lv-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; }
.lv-jump a { display: inline-flex; gap: 8px; align-items: center; padding: 6px 12px 6px 8px; border-radius: 12px; background: var(--sheet); border: 1.5px solid var(--rule); text-decoration: none; color: var(--ink); font-weight: 600; font-size: .9rem; }
.lv-jump a:hover { border-color: var(--pen); }
.not-sure { display: flex; gap: 8px; align-items: center; color: var(--ink-2); margin: 0 0 8px; }

/* ---------- words ---------- */
.words-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 14px; }
.wc { background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--shadow); min-width: 0; }
.wc-pic { display: grid; place-items: center; aspect-ratio: 4 / 3; width: 100%; border: 0; border-radius: 14px; padding: 6px; overflow: hidden; min-height: 0; }
.wc-pic:hover .pic { transform: scale(1.06); }
.wc-pic .pic { transition: transform .15s; }
.wc-w { font-size: 1.45rem; text-align: center; font-weight: 700; overflow-wrap: anywhere; }
.wc-w .ruled { max-width: 100%; }
.wc-s { display: flex; gap: 8px; align-items: flex-start; font-size: .9rem; color: var(--ink-2); line-height: 1.45; }
.wc-s .say { width: 28px; height: 28px; }
.wc-s .say .ic { width: 15px; height: 15px; }
.wc-pair { grid-column: span 2; }
.wc-halves { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; }
.wc-half { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.wc-or { color: var(--ink-3); }
@media (max-width: 420px) { .words-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wc-w { font-size: 1.2rem; } .wc { padding: 8px; } }
.hide-words .wc-w, .hide-words .wc-s span { filter: blur(7px); user-select: none; }
.hide-words .wc-w:hover, .hide-words .wc.peek .wc-w, .hide-words .wc.peek .wc-s span { filter: none; }

.cat { margin: 8px 0 34px; }
.cat > h2 { margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
.tgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.tcard { position: relative; display: flex; flex-direction: column; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); overflow: hidden; text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.tcard:hover { border-color: var(--pen); transform: translateY(-2px); }
.tcard-pics { display: flex; gap: 6px; padding: 14px; border-radius: 0; height: 74px; place-items: unset; justify-content: center; align-items: center; }
.tcard-pics .pic { --ps: 40px; }
.tcard-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px 12px; }
.tcard-body b { font-size: 1.05rem; }
.tcard-body small { color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.done-mark { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--ok); color: #fff; }
.done-mark .ic { width: 16px; height: 16px; stroke-width: 3; }
.llist { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.litem { position: relative; display: flex; gap: 12px; align-items: center; padding: 10px 40px 10px 10px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 16px; text-decoration: none; color: var(--ink); }
.litem:hover { border-color: var(--pen); }
.litem-pic { width: 64px; height: 64px; flex: none; border-radius: 14px; }
.litem-body { display: flex; flex-direction: column; min-width: 0; }
.litem-body small { color: var(--ink-3); font-size: .85rem; line-height: 1.35; }
.litem .done-mark { top: 50%; transform: translateY(-50%); }
@media (max-width: 400px) { .llist, .tgrid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- lessons ---------- */
.lesson { max-width: 860px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
.lesson > p, .lesson .box p, .model-paper p { overflow-wrap: anywhere; }
.lesson > h2 { margin-top: 18px; display: flex; gap: 10px; align-items: center; }
.lesson > h2::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; background: radial-gradient(circle, var(--margin) 0 22%, var(--sheet) 23% 48%, var(--margin) 49%); }
.lesson > p, .prose p { max-width: 68ch; font-size: 1.05rem; }
.exs { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.ex { display: flex; flex-direction: column; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.ex-pic { height: 150px; border-radius: 0; padding: 8px; }
.ex > p, .vs p { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; font-family: var(--f-learn); font-size: 1.15rem; line-height: 1.4; }
.big { margin: 0; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.big-pic { min-height: 190px; padding: 14px; border-radius: 0; }
.big figcaption { display: flex; gap: 12px; align-items: center; padding: 14px 18px; font-family: var(--f-learn); font-size: 1.35rem; }
.lone { margin: 0; display: grid; justify-items: center; gap: 8px; background: #FFFFFF; border-radius: var(--r); padding: 16px; border: 1.5px solid var(--rule); --pic-ink: #16213B; }
.lone figcaption { color: #4A5574; font-size: .95rem; }
.lone .pic { max-width: 100%; }
.lone { container-type: inline-size; }
.lone .pic { --ps: min(var(--ps-max), calc(96cqw / var(--u, 1) / var(--kh, 1))); }
.lone-chart .pic { --ps-max: 230px; }
.says { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.says li { display: flex; gap: 12px; align-items: center; padding: 10px 14px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 14px; font-family: var(--f-learn); font-size: 1.15rem; }
.says li.ans { margin-left: 28px; background: var(--sheet-2); }
.rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.rules li { display: flex; gap: 10px; align-items: flex-start; font-size: 1.05rem; }
.rules .ic { color: var(--ok); margin-top: .2em; stroke-width: 3; }
.box { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: 14px; font-size: 1.02rem; }
.box > .ic { margin-top: .15em; }
.box-tip { background: color-mix(in srgb, var(--pencil) 22%, var(--sheet)); }
.box-tip > .ic { color: #B07D00; }
.box-note { background: var(--pen-soft); }
.box-note > .ic { color: var(--pen); }
.box-warn { background: var(--bad-soft); }
.box-warn > .ic { color: var(--bad); stroke-width: 3; }
.form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.form span { padding: .45em .8em; background: var(--sheet); border: 2px solid var(--ink); border-radius: 10px; box-shadow: 3px 3px 0 var(--rule-2); }
.form i { font-style: normal; font-weight: 800; color: var(--margin); font-size: 1.3rem; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: stretch; }
.vs > div { background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); overflow: hidden; display: flex; flex-direction: column; min-width: 0; }
.vs-mid { align-self: center; color: var(--ink-3); font-weight: 800; }
@media (max-width: 560px) { .vs { grid-template-columns: minmax(0, 1fr); } .vs-mid { justify-self: center; } }
.tbl-wrap { overflow-x: auto; border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--sheet); }
.tbl { border-collapse: collapse; width: 100%; font-size: 1rem; }
.tbl caption { text-align: left; padding: 10px 14px 0; color: var(--ink-2); font-weight: 600; }
.tbl th, .tbl td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.tbl thead th { background: var(--sheet-2); font-size: .85rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl tbody th { font-weight: 700; }
.rel-links { display: flex; flex-wrap: wrap; gap: 8px; }
.mini-words { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.mw { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 8px 12px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 16px; text-align: center; min-width: 0; }
.mw:hover { border-color: var(--pen); }
.mw-pic { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; }
.mw-w { font-family: var(--f-learn); font-size: 1.15rem; }
.mw small { color: var(--ink-3); font-size: .82rem; line-height: 1.3; }
.phr { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.phr li { display: flex; gap: 12px; align-items: center; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 16px; padding: 8px 12px 8px 8px; }
.phr-pic { width: 64px; height: 64px; flex: none; border-radius: 12px; }
.phr p { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
.phr p > span { display: flex; flex-direction: column; min-width: 0; }
.phr b { font-family: var(--f-learn); font-size: 1.18rem; font-weight: 700; }
.phr small { color: var(--ink-3); }

/* stories */
.story { display: grid; gap: 12px; }
.sl { display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: center; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 10px; }
.sl-pic { height: 112px; border-radius: 12px; }
.sl-text { font-family: var(--f-learn); font-size: 1.35rem; line-height: 1.55; }
.sl.reading { border-color: var(--pencil); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pencil) 40%, transparent); }
.tw { font-style: normal; cursor: pointer; border-radius: 4px; }
.tw:hover { background: var(--marker); }
.tw.hit { background: var(--pencil); color: #16213B; }
@media (max-width: 560px) { .sl { grid-template-columns: minmax(0, 1fr); } .sl-pic { height: 120px; } .sl-text { font-size: 1.22rem; } }

/* dialogues */
.dlg { display: grid; gap: 12px; padding: 16px; background: var(--sheet-2); border-radius: var(--r); }
.dlg-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.dlg-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.dl { display: flex; gap: 10px; align-items: flex-end; }
.dl-r { flex-direction: row-reverse; }
.dl-av { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; width: 58px; }
.dl-av small { font-size: .72rem; color: var(--ink-3); font-weight: 600; text-align: center; line-height: 1.2; }
.dl-b { display: flex; gap: 10px; align-items: center; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 18px 18px 18px 6px; padding: 10px 14px; font-family: var(--f-learn); font-size: 1.15rem; max-width: 78%; }
.dl-r .dl-b { background: var(--pen-soft); border-color: transparent; border-radius: 18px 18px 6px 18px; }
.dl.speaking { outline: 0 !important; }
.dl.speaking .dl-b { box-shadow: 0 0 0 3px var(--pencil); }
.dl.your-turn .dl-b { box-shadow: 0 0 0 3px var(--margin); }
@media (max-width: 480px) { .dl-b { max-width: none; font-size: 1.05rem; } .dl-av { width: 46px; } }

/* lesson navigation */
.lesson-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; flex-wrap: wrap; }
.lesson-nav a { display: inline-flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 16px; text-decoration: none; color: var(--ink); max-width: 100%; }
.lesson-nav a:hover { border-color: var(--pen); }
.lesson-nav span { display: flex; flex-direction: column; font-weight: 600; min-width: 0; }
.lesson-nav small { color: var(--ink-3); font-weight: 500; font-size: .8rem; }
.lesson-nav .next { margin-left: auto; text-align: right; }

/* ---------- games and quizzes ---------- */
.practice, .quiz-sec { margin-top: 36px; display: grid; gap: 12px; }
.practice > h2, .quiz-sec > h2 { display: flex; gap: 10px; align-items: center; }
.practice > h2 .ic, .quiz-sec > h2 .ic { color: var(--margin); }
.game-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.game-tabs button { display: inline-flex; gap: 8px; align-items: center; padding: 9px 14px; border-radius: 12px; border: 1.5px solid var(--rule-2); background: var(--sheet); font-weight: 600; font-size: .92rem; color: var(--ink-2); }
.game-tabs button[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.game, .quiz, .test { background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 22px; padding: 18px; min-height: 160px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.game-empty { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 120px; color: var(--ink-3); }
.quiz-start { margin: 18px auto; display: flex; }
.g-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.g-bar { flex: 1; height: 10px; background: var(--sheet-2); border-radius: 99px; overflow: hidden; }
.g-bar i { display: block; height: 100%; width: 0; background: var(--ok); border-radius: 99px; transition: width .3s; }
.g-count { font-size: .85rem; color: var(--ink-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.g-stage { display: grid; justify-items: center; gap: 14px; text-align: center; }
.g-pic { width: min(280px, 100%); aspect-ratio: 4 / 3; border-radius: 18px; }
@media (max-width: 600px) { .g-pic { width: min(230px, 74%); } }
.g-q { font-size: 1.3rem; font-weight: 600; max-width: 34ch; }
.g-q.learn { font-family: var(--f-learn); font-size: 1.45rem; }
.g-q .blank { display: inline-block; min-width: 3.2em; border-bottom: 3px solid var(--margin); margin: 0 .15em; }
.g-q .blank.filled { border-color: var(--ok); color: var(--ok); font-weight: 700; padding: 0 .2em; min-width: 0; }
.g-hint { color: var(--ink-3); font-size: .95rem; display: inline-flex; gap: 8px; align-items: center; }
.g-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: min(560px, 100%); }
.g-opts.cols-1 { grid-template-columns: minmax(0, 1fr); }
.g-opt { border: 2px solid var(--rule-2); background: var(--sheet); border-radius: 14px; padding: 12px; font-family: var(--f-learn); font-weight: 700; font-size: 1.25rem; min-height: 58px; box-shadow: 0 3px 0 var(--rule-2); transition: transform .06s; overflow-wrap: anywhere; }
.g-opt:hover:not(:disabled) { border-color: var(--pen); }
.g-opt:active:not(:disabled) { transform: translateY(2px); box-shadow: 0 1px 0 var(--rule-2); }
.g-opt.pic-opt { padding: 6px; aspect-ratio: 4 / 3; display: grid; place-items: center; background: var(--tile-2); }
.g-opt.pic-opt:nth-child(2) { background: var(--tile-1); } .g-opt.pic-opt:nth-child(3) { background: var(--tile-3); } .g-opt.pic-opt:nth-child(4) { background: var(--tile-4); }
.g-pic .pic { --ps-max: 150px; } .fc-face .pic { --ps-max: 190px; } .pic-opt .pic { --ps-max: 112px; }
.g-opt.ok { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); box-shadow: 0 3px 0 var(--ok); }
.g-opt.no { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); box-shadow: 0 3px 0 var(--bad); animation: shake .3s; }
.g-opt:disabled { cursor: default; }
.g-opt.dim { opacity: .5; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
.g-feed { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 16px; padding: 12px 14px; border-radius: 14px; font-weight: 600; }
.g-feed.ok { background: var(--ok-soft); color: var(--ok); }
.g-feed.no { background: var(--bad-soft); color: var(--bad); }
.g-feed p { display: flex; gap: 8px; align-items: center; min-width: 0; }
.g-feed small { display: block; font-weight: 400; color: var(--ink-2); margin-top: 2px; }
.g-end { display: grid; justify-items: center; gap: 12px; text-align: center; padding: 10px 0; }
.g-end h3 { font-size: 1.6rem; }
.g-score { width: 150px; height: 150px; }
.g-end .btns { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.g-xp { font-weight: 700; color: #9A6B00; background: color-mix(in srgb, var(--pencil) 30%, var(--sheet)); padding: 4px 12px; border-radius: 99px; }
.g-type { display: flex; gap: 8px; width: min(420px, 100%); }
.g-type input { flex: 1; min-width: 0; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--rule-2); background: var(--sheet); font-family: var(--f-learn); font-size: 1.3rem; }
.g-type input:focus { border-color: var(--pen); outline: none; }
.or-ans { min-height: 64px; width: min(620px, 100%); display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; border: 2px dashed var(--rule-2); border-radius: 14px; align-content: flex-start; }
.or-bank { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; width: min(620px, 100%); }
.or-w { border: 2px solid var(--rule-2); background: var(--sheet); border-radius: 10px; padding: 8px 12px; font-family: var(--f-learn); font-weight: 700; font-size: 1.15rem; box-shadow: 0 2px 0 var(--rule-2); }
.or-w.used { visibility: hidden; }
.sp-slots { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.sp-slots span { width: 40px; height: 50px; border-bottom: 3px solid var(--ink-2); display: grid; place-items: center; font-family: var(--f-learn); font-weight: 700; font-size: 1.6rem; }
.sp-slots span.sp-gap { border: 0; width: 16px; }
.sp-slots.ok span { color: var(--ok); border-color: var(--ok); }
.sp-slots.no span { color: var(--bad); border-color: var(--bad); }
.sp-tiles { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; max-width: 520px; }
.sp-tiles button { width: 46px; height: 50px; border: 2px solid var(--rule-2); border-radius: 12px; background: var(--sheet); font-family: var(--f-learn); font-weight: 700; font-size: 1.4rem; box-shadow: 0 3px 0 var(--rule-2); }
.sp-tiles button:disabled { opacity: .25; }
.sp-tools { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.fc-wrap { perspective: 1000px; width: min(360px, 100%); }
.fc { position: relative; width: 100%; aspect-ratio: 1 / 1; border: 0; padding: 0; background: none; transform-style: preserve-3d; transition: transform .45s; }
.fc.flip { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 2px solid var(--rule); box-shadow: var(--shadow); }
.fc-back { transform: rotateY(180deg); background: var(--sheet); align-content: center; gap: 10px; padding: 16px; }
.fc-back b { font-size: 2.2rem; }
.fc-back small { color: var(--ink-2); font-size: 1rem; font-family: var(--f-learn); }
.fc-tap { position: absolute; bottom: 10px; left: 0; right: 0; text-align: center; font-size: .8rem; color: #4A5574; display: flex; gap: 6px; justify-content: center; align-items: center; }
.test-intro { display: grid; gap: 14px; }
.test-level { font-size: 3rem; font-weight: 800; }
@media (max-width: 480px) { .game, .quiz, .test { padding: 14px; border-radius: 18px; } .g-opt { font-size: 1.1rem; min-height: 52px; } .g-q { font-size: 1.15rem; } }

/* ---------- alphabet, sounds, numbers, time ---------- */
.abc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.abc-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 10px 10px 14px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); box-shadow: var(--shadow); min-width: 0; }
.abc-card:hover { border-color: var(--pen); }
.abc-l { font-size: 2.6rem; color: var(--ink); padding: 0 .4em; }
.abc-card.is-v .abc-l { color: var(--margin); }
.abc-pic { width: 100%; aspect-ratio: 5 / 3; border-radius: 12px; }
.abc-w { font-family: var(--f-learn); font-size: 1.2rem; font-weight: 700; }
.abc-w b, .abc-more b:not(.more-l) { color: var(--margin); }
.key-v { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-2); font-size: .92rem; }
.key-v i { width: 14px; height: 14px; border-radius: 4px; background: var(--margin); }
.abc-more { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.abc-more li { display: flex; gap: 8px; align-items: center; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 14px; padding: 6px 10px; flex-wrap: wrap; }
.more-l { font-family: var(--f-learn); font-size: 1.4rem; width: 2.2em; }
.more-w { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 4px 6px; border-radius: 10px; font-family: var(--f-learn); font-size: 1.05rem; }
.more-w:hover { background: var(--sheet-2); }
@media (max-width: 400px) { .abc-more { grid-template-columns: minmax(0, 1fr); } }
.trace { background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; }
.trace-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.trace-now { font-family: var(--f-learn); font-size: 1.6rem; min-width: 2.2em; text-align: center; }
.trace canvas { width: 100%; max-width: 640px; height: auto; aspect-ratio: 640 / 300; touch-action: none; border-radius: 12px; background: #FFFFFF; justify-self: center; cursor: crosshair; }
.ph-sec { margin: 8px 0 30px; }
.ph-sec > h2 { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.ph-sec > p { margin-bottom: 14px; }
.snd-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.snd { background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 12px; display: grid; gap: 10px; min-width: 0; }
.snd-head { display: flex; align-items: baseline; gap: 10px; }
.snd-head b { font-family: var(--f-learn); font-size: 1.8rem; color: var(--margin); line-height: 1; }
.ipa { color: var(--ink-3); font-size: .95rem; }
.snd-words { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 8px; }
.sw { display: flex; flex-direction: column; align-items: center; gap: 4px; border: 0; background: none; padding: 0; min-width: 0; }
.sw-pic { width: 100%; aspect-ratio: 1; border-radius: 12px; }
.sw-w { font-family: var(--f-learn); font-size: 1.1rem; font-weight: 700; }
.sw-w b { color: var(--margin); }
@media (max-width: 400px) { .snd-grid { grid-template-columns: minmax(0, 1fr); } }
.pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; align-items: center; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 10px; }
.pair button { display: flex; flex-direction: column; gap: 6px; align-items: center; border: 0; background: none; padding: 0; font-family: var(--f-learn); font-size: 1.2rem; min-width: 0; }
.pair button > span { width: 100%; aspect-ratio: 1; border-radius: 12px; }
.pair-mid { font-size: .78rem; color: var(--ink-3); text-align: center; max-width: 64px; }
.ipa-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 10px 0 22px; }
.ipa-grid .ipa { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1.5px solid var(--rule); background: var(--sheet); border-radius: 14px; color: var(--ink); }
.ipa-grid .ipa:hover { border-color: var(--pen); }
.ipa-grid b { font-size: 1.5rem; font-family: "Andika", "Lexend", "Segoe UI", "Noto Sans", sans-serif; color: var(--pen); font-weight: 700; }
.ipa-grid u { text-decoration-color: var(--margin); text-decoration-thickness: 3px; }
.stress { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.say-word { display: inline-flex; align-items: center; gap: 10px; border: 1.5px solid var(--rule); background: var(--sheet); border-radius: 14px; padding: 8px 14px 8px 8px; font-family: var(--f-learn); font-size: 1.25rem; }
.say-word b { color: var(--margin); font-size: 1.4em; }
.say-word i { color: var(--ink-3); font-style: normal; margin: 0 2px; }
.num-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 26px; }
.num-card { display: grid; grid-template-rows: auto 84px auto; justify-items: center; align-items: center; gap: 4px; padding: 10px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); min-width: 0; }
.num-card:hover { border-color: var(--pen); }
.num-d { font-size: 2rem; font-weight: 800; line-height: 1; }
.num-pic { width: 100%; height: 100%; display: grid; place-items: center; --pic-ink: #16213B; }
.num-pic .pic { display: flex; width: 100%; height: 100%; }
.num-pic .pa { width: 100%; height: 100%; }
.num-w { font-family: var(--f-learn); font-weight: 700; font-size: 1.1rem; }
.hundred-wrap { display: grid; grid-template-columns: minmax(0, 520px) 1fr; gap: 16px; align-items: start; margin-bottom: 26px; }
.hundred { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; }
.hundred button { aspect-ratio: 1; border: 1.5px solid var(--rule); background: var(--sheet); border-radius: 8px; font-weight: 700; font-size: clamp(.75rem, 2.4vw, 1rem); padding: 0; font-variant-numeric: tabular-nums; }
.hundred button:nth-child(10n) { background: var(--pen-soft); }
.hundred button.on { background: var(--margin); color: #fff; border-color: var(--margin); }
.hundred-out { position: sticky; top: calc(var(--top-h) + 20px); display: grid; gap: 4px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 18px; text-align: center; }
.hundred-out b { font-size: 3.4rem; line-height: 1; }
.hundred-out span { font-family: var(--f-learn); font-size: 1.5rem; font-weight: 700; }
@media (max-width: 700px) { .hundred-wrap { grid-template-columns: minmax(0, 1fr); } .hundred-out { position: static; order: -1; } }
.bign { list-style: none; padding: 0; margin: 10px 0 18px; display: grid; gap: 8px; }
.bign li, .how li { display: flex; gap: 12px; align-items: center; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 14px; padding: 8px 10px 8px 14px; flex-wrap: wrap; }
.bign b, .how b { font-variant-numeric: tabular-nums; min-width: 7.5em; font-size: 1.1rem; }
.bign span, .how span { font-family: var(--f-learn); font-size: 1.1rem; flex: 1; min-width: 12em; }
.ords { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; margin-bottom: 26px; }
.ord { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 14px; min-width: 0; }
.ord b { font-size: 1.5rem; }
.ord span { font-family: var(--f-learn); font-size: 1.05rem; font-weight: 700; }
.ord .pic { --ps: 22px; background: #FFFFFF; border-radius: 8px; padding: 2px 6px; }
.fracs { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 26px; }
.frac { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); min-width: 0; }
.frac > span:first-child { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; }
.frac b { font-size: 1.3rem; }
.frac span { font-family: var(--f-learn); }
.hows { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.how ul { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
@media (max-width: 400px) { .hows { grid-template-columns: minmax(0, 1fr); } }
.clock-grid, .cal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }
.clock-card, .cal-card { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 10px 14px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); text-align: center; min-width: 0; }
.clock-card:hover, .cal-card:hover { border-color: var(--pen); }
.clock-card > span:first-child, .cal-card > span:first-child { width: 100%; aspect-ratio: 4 / 3; border-radius: 12px; }
.clock-card b, .cal-card b { font-family: var(--f-learn); font-size: 1.2rem; }
.clock-card small, .cal-card small { color: var(--ink-3); }
.cal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

/* verbs, phrasal verbs, idioms */
.filter { display: inline-flex; align-items: center; gap: 8px; background: var(--sheet); border: 1.5px solid var(--rule-2); border-radius: 12px; padding: 0 12px; flex: 1 1 220px; max-width: 360px; }
.filter input { border: 0; background: transparent; padding: 10px 0; outline: none; min-width: 0; flex: 1; }
.verbs td, .verbs th { padding: 8px 12px; }
.verbs button { border: 0; background: none; padding: 2px 4px; border-radius: 6px; font-family: var(--f-learn); font-size: 1.15rem; font-weight: 700; color: var(--ink); }
.verbs button:hover { background: var(--pen-soft); color: var(--pen); }
.verbs td:nth-child(3) button { color: var(--pen); }
.verbs td:nth-child(4) button { color: var(--margin); }
.v-pic > span { display: grid; place-items: center; width: 64px; height: 54px; border-radius: 12px; }
.v-pic .pic { --ps: min(38px, calc(58px / var(--u, 1))); }
.v-ex { min-width: 260px; color: var(--ink-2); }
.v-ex > div { display: flex; gap: 8px; align-items: center; }
.pv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.pv { display: flex; gap: 14px; align-items: flex-start; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 12px; min-width: 0; }
.pv-pic { width: 96px; height: 96px; flex: none; border-radius: 14px; }
.pv > div { display: grid; gap: 6px; min-width: 0; }
.pv h3 button { border: 0; background: none; padding: 0; font-family: var(--f-learn); font-size: 1.35rem; font-weight: 700; text-align: left; color: var(--ink); }
.pv h3 button:hover { color: var(--pen); }
.pv-mean { color: var(--ink-2); }
.pv-ex { display: flex; gap: 8px; align-items: flex-start; font-family: var(--f-learn); font-size: 1.05rem; }
@media (max-width: 400px) { .pv-grid { grid-template-columns: minmax(0, 1fr); } .pv-pic { width: 72px; height: 72px; } }

/* ---------- learning path ---------- */
.lvl-sec { margin: 26px 0 36px; }
.lvl-head { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.lvl-head p { color: var(--ink-2); }
.lvl-count { margin-left: auto; color: var(--ink-3); font-weight: 600; font-size: .9rem; white-space: nowrap; }
.units { list-style: none; margin: 0; padding: 0 0 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; counter-reset: u; }
.unit a { position: relative; display: flex; gap: 12px; align-items: center; padding: 8px 40px 8px 8px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 16px; text-decoration: none; color: var(--ink); min-height: 72px; }
.unit a:hover { border-color: var(--pen); }
.unit-n { position: absolute; top: -8px; left: -6px; min-width: 24px; height: 24px; padding: 0 5px; display: grid; place-items: center; border-radius: 99px; background: var(--ink); color: var(--paper); font-size: .72rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.unit-pic { width: 56px; height: 56px; flex: none; border-radius: 12px; }
.unit-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.unit-body small { color: var(--ink-3); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.unit .done-mark { top: 50%; transform: translateY(-50%); }
@media (max-width: 400px) { .units { grid-template-columns: minmax(0, 1fr); } }

/* ---------- home ---------- */
.hero { position: relative; background: var(--sheet); border-bottom: 1px solid var(--rule); overflow: hidden;
  background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--rule) 35px 36px); background-position: 0 18px; }
.hero::before { content: ""; position: absolute; top: 0; bottom: 0; left: max(28px, calc(50% - 600px)); width: 2px; background: var(--margin); opacity: .55; }
.hero-in { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 32px; align-items: center; padding-block: 48px 56px; }
.hero-copy { display: grid; gap: 18px; padding-left: 26px; }
.eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--margin); }
.hero h1 { font-size: clamp(2.3rem, 6vw, 4.1rem); line-height: 1.04; letter-spacing: -.03em; }
.u-red { color: var(--margin); background: linear-gradient(transparent 70%, color-mix(in srgb, var(--pencil) 60%, transparent) 70%); }
.hero .lead { font-size: 1.2rem; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { list-style: none; padding: 0; margin: 4px 0 0; display: flex; gap: 8px 22px; flex-wrap: wrap; color: var(--ink-2); font-size: .95rem; }
.hero-stats b { color: var(--ink); font-size: 1.15rem; }
.hero-deck { position: relative; height: 360px; }
.deck-card { position: absolute; top: 50%; left: 50%; width: 230px; height: 290px; margin: -145px 0 0 -115px; border-radius: 24px; border: 0; padding: 18px 14px; display: grid; grid-template-rows: 1fr auto; justify-items: center; align-items: center; box-shadow: var(--shadow-lg); background-clip: padding-box; transform: rotate(calc((var(--i) - 2) * 7deg)) translate(calc((var(--i) - 2) * 26px), calc(var(--i) * -3px)); transition: transform .35s; }
.deck-card b { font-size: 2.2rem; color: #16213B; --rule-2: #9DB2D8; }
.deck-card:hover { transform: rotate(calc((var(--i) - 2) * 7deg)) translate(calc((var(--i) - 2) * 26px), -14px); }
.deck-card.front { z-index: 5; }
@media (max-width: 860px) {
  .hero-in { grid-template-columns: minmax(0, 1fr); padding-block: 30px 34px; gap: 6px; }
  .hero-copy { padding-left: 18px; }
  .hero::before { left: 16px; }
  .hero-deck { height: 236px; order: -1; }
  .deck-card { width: 156px; height: 196px; margin: -98px 0 0 -78px; padding: 12px 10px; border-radius: 20px; transform: rotate(calc((var(--i) - 2) * 7deg)) translate(calc((var(--i) - 2) * 18px), calc(var(--i) * -3px)); }
  .deck-card .pic { --ps-max: 104px; }
  .deck-card b { font-size: 1.55rem; }
}
.home-sec { margin: 42px 0; display: grid; gap: 16px; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; counter-reset: step; }
.steps li { display: grid; gap: 4px; align-content: start; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 16px; }
.step-pic { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 16px; background: var(--sheet-2); margin-bottom: 6px; }
.step-pic .pic { --ps: 40px; }
.steps li b { font-size: 1.15rem; counter-increment: step; }
.steps li b::before { content: counter(step) ". "; color: var(--margin); }
.steps li small { color: var(--ink-2); font-size: .92rem; line-height: 1.45; }
@media (max-width: 860px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.sec-card { display: flex; gap: 14px; align-items: center; padding: 10px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); text-decoration: none; color: var(--ink); transition: border-color .15s, transform .15s; }
.sec-card:hover { border-color: var(--pen); transform: translateY(-2px); }
.sec-pic { width: 72px; height: 72px; flex: none; border-radius: 16px; }
.sec-card > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.sec-card b { font-size: 1.08rem; }
.sec-card small { color: var(--ink-3); font-size: .88rem; }
@media (max-width: 400px) { .sec-grid { grid-template-columns: minmax(0, 1fr); } }
.lv-steps { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.lv-step { display: grid; gap: 2px; align-content: start; padding: 12px; border-radius: 16px; text-decoration: none; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--rule); border-top: 6px solid var(--lvc, var(--lv-a1)); }
.lv-step:hover { border-color: var(--lvc); }
.lv-step b { font-size: 1.4rem; color: var(--lvc); }
.lv-step span { font-weight: 700; font-size: .92rem; }
.lv-step small { color: var(--ink-3); font-size: .82rem; line-height: 1.35; }
.lv-step.lv-s { --lvc: var(--lv-s); } .lv-step.lv-a1 { --lvc: var(--lv-a1); } .lv-step.lv-a2 { --lvc: var(--lv-a2); } .lv-step.lv-b1 { --lvc: var(--lv-b1); }
.lv-step.lv-b2 { --lvc: var(--lv-b2); } .lv-step.lv-c1 { --lvc: var(--lv-c1); } .lv-step.lv-c2 { --lvc: var(--lv-c2); }
.lv-step { background-color: var(--sheet); }
@media (max-width: 960px) { .lv-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 520px) { .lv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wotd-card { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: center; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 22px; padding: 14px; box-shadow: var(--shadow); }
.wotd-pic { aspect-ratio: 1; border-radius: 18px; border: 0; padding: 0; }
.wotd-body { display: grid; gap: 10px; justify-items: start; }
.wotd-body .ruled { font-size: 2.6rem; }
.wotd-body p { display: flex; gap: 10px; align-items: center; font-family: var(--f-learn); font-size: 1.2rem; }
.wotd-date { color: var(--ink-3); font-size: .85rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 560px) { .wotd-card { grid-template-columns: 120px 1fr; gap: 12px; } .wotd-body .ruled { font-size: 1.8rem; } .wotd-body p { font-size: 1rem; } }
.me-strip { display: flex; gap: 10px 22px; flex-wrap: wrap; align-items: center; margin-top: 22px; padding: 12px 14px 12px 18px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 18px; }
.me-strip span { display: inline-flex; gap: 6px; align-items: center; color: var(--ink-2); }
.me-strip b { color: var(--ink); }
.me-strip .ic { color: var(--margin); }
.me-strip .btn { margin-left: auto; }
.me-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 26px; }
.me-stats div { background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 16px; display: grid; gap: 4px; }
.me-stats b { font-size: 2.2rem; line-height: 1; font-variant-numeric: tabular-nums; }
.me-stats span { color: var(--ink-2); display: flex; gap: 6px; align-items: center; font-size: .9rem; }
.me-stats .ic { color: var(--margin); }
@media (max-width: 700px) { .me-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.me-list { list-style: none; padding: 0; margin: 10px 0 26px; display: grid; gap: 6px; }
.me-list li { display: flex; gap: 10px; align-items: center; padding: 8px 12px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 12px; }
.me-list .ic { color: var(--ok); stroke-width: 3; }
.me-list small { margin-left: auto; color: var(--ink-3); }
.reset { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.reset-confirm { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.prose { max-width: 760px; display: grid; gap: 14px; }
.prose h2 { margin-top: 14px; }
.nf { text-align: center; display: grid; justify-items: center; gap: 14px; padding-block: 60px; }
.nf-pic { width: 200px; height: 160px; }

/* ---------- footer ---------- */
.foot { margin-top: 30px; background: var(--sheet); border-top: 1px solid var(--rule); padding-block: 36px 24px; }
.foot-in { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; }
.foot-brand p { color: var(--ink-2); margin-top: 10px; max-width: 32ch; font-size: .95rem; }
.foot h2 { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ink-3); margin-bottom: 10px; }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.foot ul a { color: var(--ink); text-decoration: none; font-size: .95rem; }
.foot ul a:hover { color: var(--pen); text-decoration: underline; }
.foot-base { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--rule); color: var(--ink-3); font-size: .85rem; }
.foot-base a { color: var(--ink-2); }
@media (max-width: 860px) { .foot { padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); } .foot-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .foot-brand { grid-column: 1 / -1; } }

.toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 60; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 12px; font-weight: 600; box-shadow: var(--shadow-lg); max-width: calc(100% - 32px); }
@media (max-width: 860px) { .toast { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }
/* ---------- charts: key charts (trees), yes/no flowcharts, step flows ---------- */
.chart { margin: 0; container-type: inline-size; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); padding: 14px 16px 18px; }
.chart > figcaption, .model > figcaption { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.chart > figcaption { margin-bottom: 14px; }
.chart-tag { display: inline-flex; font: 700 .7rem/1 var(--f-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--margin); background: color-mix(in srgb, var(--margin) 11%, var(--sheet)); padding: .5em .75em; border-radius: 99px; }
.chart-title { font-weight: 700; font-size: 1.08rem; line-height: 1.3; }
.chart small { display: block; font-family: var(--f-learn); font-size: .92rem; line-height: 1.35; color: var(--ink-2); font-weight: 400; }
/* light picture-card colours stay light in dark mode, so their text stays dark */
.tr-head { color: #16213B; --ink: #16213B; --ink-2: #4A5574; --marker: #FFE48A; }

.tr { display: grid; justify-items: start; }
.tr-root { position: relative; padding: .5em 1.1em; border-radius: 14px; background: var(--ink); color: var(--sheet); font-weight: 800; font-size: 1.12rem; line-height: 1.25; text-align: center; max-width: 100%; }
.tr-root b.k { color: inherit; background: none; }
.tr-branches { list-style: none; margin: 0 0 0 22px; padding: 12px 0 0; display: grid; width: calc(100% - 22px); }
.tr-branch { position: relative; padding: 0 0 12px 26px; min-width: 0; }
.tr-branch:last-child { padding-bottom: 0; }
.tr-branch::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; border-left: 2.5px solid var(--rule-2); }
.tr-branch:first-child::before { top: -12px; }
.tr-branch:last-child::before { bottom: auto; height: 1.3em; }
.tr-branch:first-child:last-child::before { height: calc(12px + 1.3em); }
.tr-branch::after { content: ""; position: absolute; left: 0; top: 1.3em; width: 22px; border-top: 2.5px solid var(--rule-2); }
.tr-head { display: inline-block; padding: .4em .8em; border-radius: 12px; background: var(--tile-1); max-width: 100%; line-height: 1.35; }
.tr-head b { font-size: 1.02rem; }
.tr-head small { color: #4A5574; }
.tb2 .tr-head { background: var(--tile-2); } .tb3 .tr-head { background: var(--tile-3); } .tb4 .tr-head { background: var(--tile-4); }
.tb5 .tr-head { background: var(--tile-5); } .tb6 .tr-head { background: var(--tile-6); }
.tr-sub { list-style: none; margin: 8px 0 0 12px; padding: 0 0 0 16px; border-left: 2px dashed var(--rule-2); display: grid; gap: 7px; }
.tr-sub > li { position: relative; line-height: 1.4; }
.tr-sub > li::before { content: ""; position: absolute; left: -23px; top: calc(.7em - 6px); width: 8px; height: 8px; border-radius: 50%; background: var(--sheet); border: 2px solid var(--rule-2); }
.tr-leaf { font-weight: 600; }
@container (min-width: 620px) {
  .tr-h { justify-items: center; }
  .tr-h .tr-root::after { content: ""; position: absolute; left: 50%; top: 100%; height: 14px; border-left: 2.5px solid var(--rule-2); }
  .tr-h .tr-branches { margin: 0; width: 100%; padding-top: 28px; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
  .tr-h .tr-branch { padding: 0 6px; }
  .tr-h .tr-branch::before, .tr-h .tr-branch:first-child::before, .tr-h .tr-branch:last-child::before { top: -14px; bottom: auto; height: 0; left: 0; right: 0; border-left: 0; border-top: 2.5px solid var(--rule-2); }
  .tr-h .tr-branch:first-child::before { left: 50%; }
  .tr-h .tr-branch:last-child::before { right: 50%; }
  .tr-h .tr-branch:first-child:last-child::before { display: none; }
  .tr-h .tr-branch::after { left: 50%; top: -14px; width: 0; height: 14px; border-top: 0; border-left: 2.5px solid var(--rule-2); }
  .tr-h .tr-head { display: block; text-align: center; }
}

@container (min-width: 620px) {
  .tr-g { justify-items: center; }
  .tr-g .tr-root { z-index: 1; margin-bottom: -20px; padding: .6em 1.4em; box-shadow: 0 0 0 6px var(--sheet); }
  .tr-g .tr-branches { margin: 0; width: 100%; padding: 36px 14px 14px; border: 2px dashed var(--rule-2); border-radius: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .tr-g .tr-branch { padding: 0; }
  .tr-g .tr-branch::before, .tr-g .tr-branch::after { display: none; }
  .tr-g .tr-head { display: block; text-align: center; }
  .tr-g .tr-sub { margin-left: 8px; }
}
@container (min-width: 780px) {
  .tr-g .tr-branches { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
}

.dc { list-style: none; margin: 0; padding: 0; display: grid; }
.dc > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); }
.dc-start span { grid-column: 1 / -1; justify-self: start; padding: .3em .9em; border-radius: 99px; background: var(--ink); color: var(--sheet); font-weight: 700; font-size: .85rem; }
.dc-link { height: 32px; }
.dc-link::before, .dc-link::after { content: ""; grid-row: 1; grid-column: 1; justify-self: center; }
.dc-link::before { border-left: 2.5px solid var(--ink-3); margin-bottom: 4px; }
.dc-link::after { align-self: end; border: 6px solid transparent; border-top: 8px solid var(--ink-3); border-bottom: 0; }
.dc-link span { grid-row: 1; grid-column: 2; align-self: center; padding-left: 4px; font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--margin); }
.dc-row::before { content: ""; grid-column: 1; grid-row: 2 / 4; justify-self: center; border-left: 2.5px solid var(--ink-3); }
.dc-row.dc-last::before { display: none; }
.dc-q { grid-column: 1 / -1; display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 14px; border: 2px solid var(--pen); background: var(--pen-soft); font-weight: 600; line-height: 1.35; }
.dc-q .ic { color: var(--pen); margin-top: .05em; }
.dc-yes { grid-column: 2; position: relative; height: 30px; display: flex; align-items: center; padding-left: 30px; }
.dc-yes::before { content: ""; position: absolute; left: 16px; top: 0; bottom: 6px; border-left: 2.5px solid var(--ok); }
.dc-yes::after { content: ""; position: absolute; left: 11.5px; bottom: 0; border: 6px solid transparent; border-top: 8px solid var(--ok); border-bottom: 0; }
.dc-yes span { font-size: .78rem; font-weight: 800; letter-spacing: .04em; color: var(--ok); }
.dc-a { grid-column: 2; padding: 9px 14px; border-radius: 14px; background: var(--ok-soft); border: 2px solid var(--ok); line-height: 1.35; min-width: 0; }
.dc-a > b { font-family: var(--f-learn); font-size: 1.12rem; }
.dc-end .dc-a { grid-column: 1 / -1; }
.dc-a .dc-pre { font-family: var(--f-ui); font-size: .78rem; font-weight: 700; letter-spacing: .02em; color: var(--ink-2); margin-bottom: 2px; }
.dc-a-end { background: color-mix(in srgb, var(--pencil) 24%, var(--sheet)); border-color: color-mix(in srgb, var(--pencil) 80%, var(--ink-3)); }
@container (min-width: 560px) {
  .dc > li { grid-template-columns: minmax(0, 1.15fr) 76px minmax(0, 1fr); }
  .dc-start span { grid-column: 1; justify-self: center; }
  .dc-link span { grid-column: 1; justify-self: center; transform: translateX(24px); padding: 0; }
  .dc-row { align-items: center; }
  .dc-row::before { display: none; }
  .dc-q { grid-column: 1; }
  .dc-yes { grid-column: 2; height: 100%; min-height: 30px; padding: 0; justify-content: center; }
  .dc-yes::before { left: 6px; right: 12px; top: 50%; bottom: auto; border-left: 0; border-top: 2.5px solid var(--ok); }
  .dc-yes::after { left: auto; right: 4px; top: 50%; bottom: auto; transform: translateY(-50%); border: 6px solid transparent; border-left: 8px solid var(--ok); border-right: 0; }
  .dc-yes span { transform: translateY(-13px); background: var(--sheet); padding: 0 4px; }
  .dc-a { grid-column: 3; }
  .dc-end .dc-a { grid-column: 1; }
}

.sf { list-style: none; margin: 0; padding: 0; display: grid; }
.sf > li { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 12px; align-content: start; padding-bottom: 14px; }
.sf > li:last-child { padding-bottom: 0; }
.sf > li::after { content: ""; position: absolute; left: 16px; top: 38px; bottom: 4px; border-left: 2.5px dashed var(--rule-2); }
.sf > li:last-child::after { display: none; }
.sf-n { grid-row: span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--margin); color: #fff; font-weight: 800; }
.sf b { line-height: 1.35; padding-top: 5px; }
.sf small { grid-column: 2; }
@container (min-width: 600px) {
  .sf:not(.sf-v) { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 30px; }
  .sf:not(.sf-v) > li { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 6px; padding: 14px 10px; background: var(--sheet-2); border-radius: 14px; }
  .sf:not(.sf-v) > li::after { display: block; left: calc(100% + 8px); top: 50%; bottom: auto; width: 12px; height: 12px; border: 0; border-top: 3px solid var(--margin); border-right: 3px solid var(--margin); transform: translateY(-50%) rotate(45deg); }
  .sf:not(.sf-v) > li:last-child::after { display: none; }
  .sf:not(.sf-v) .sf-n { grid-row: auto; }
  .sf:not(.sf-v) b { padding-top: 0; }
  .sf:not(.sf-v) small { grid-column: auto; }
}

/* model texts (letters, emails, reports) on ruled paper */
.model { margin: 0; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); overflow: hidden; }
.model > figcaption { padding: 10px 14px; background: var(--sheet-2); border-bottom: 1.5px solid var(--rule); }
.model > figcaption .btn { margin-left: auto; padding: .45em .8em; }
.model-paper { --lh: 32px; padding: 14px 18px 18px 54px; font-family: var(--f-learn); font-size: 1.08rem; line-height: var(--lh);
  background-image: linear-gradient(90deg, transparent 38px, color-mix(in srgb, var(--margin) 60%, transparent) 38px 39.5px, transparent 39.5px), repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh));
  background-origin: padding-box, content-box; }
.model-paper p { margin: 0; cursor: pointer; border-radius: 4px; }
.model-paper p:hover { background: color-mix(in srgb, var(--marker) 40%, transparent); }
.model-paper p.gap { height: var(--lh); cursor: default; background: none; }
@media (max-width: 560px) {
  .model-paper { padding-left: 34px; padding-right: 12px; font-size: 1rem; --lh: 30px;
    background-image: linear-gradient(90deg, transparent 22px, color-mix(in srgb, var(--margin) 60%, transparent) 22px 23.5px, transparent 23.5px), repeating-linear-gradient(transparent 0 calc(var(--lh) - 1px), var(--rule) calc(var(--lh) - 1px) var(--lh)); }
}

/* ---------- the grammar book ---------- */
.pt1 { --pc: var(--p1); } .pt2 { --pc: var(--p2); } .pt3 { --pc: var(--p3); } .pt4 { --pc: var(--p4); } .pt5 { --pc: var(--p5); } .pt6 { --pc: var(--p6); }
.pt7 { --pc: var(--p7); } .pt8 { --pc: var(--p8); } .pt9 { --pc: var(--p9); } .pt10 { --pc: var(--p10); } .pt11 { --pc: var(--p11); } .pt12 { --pc: var(--p12); }
.bar { display: block; width: 100%; max-width: 220px; height: 7px; border-radius: 99px; background: var(--rule); overflow: hidden; }
.bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--pc, var(--ok)); }

.book-front { display: grid; grid-template-columns: minmax(0, 270px) minmax(0, 1fr); gap: 48px; align-items: center; padding: 22px 0 40px; }
.cover { position: relative; aspect-ratio: 3 / 4; display: flex; flex-direction: column; gap: 10px; padding: 28px 22px 20px 40px; border-radius: 6px 18px 18px 6px; color: #fff; text-decoration: none;
  background: radial-gradient(circle at 92% 8%, rgb(255 255 255 / .16) 0 22%, transparent 22.5%), linear-gradient(155deg, #3563D8, #1A3A94 70%);
  box-shadow: inset 11px 0 0 rgb(0 0 0 / .22), inset 13px 0 0 rgb(255 255 255 / .14), 7px 7px 0 -1px #FFFFFF, 7px 7px 0 0 #C9D5EA, 13px 13px 0 -1px #FFFFFF, 13px 13px 0 0 #C9D5EA, var(--shadow-lg);
  transform: rotate(-2.5deg); transition: transform .25s; }
.cover:hover { transform: rotate(-1deg) translateY(-4px); }
.cv-brand { font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: .85; }
.cv-title { font: 800 2.45rem/1.02 var(--f-ui); letter-spacing: -.02em; margin-top: 8px; text-wrap: balance; }
.cv-sub { font-family: var(--f-learn); font-size: 1.08rem; opacity: .92; }
.cv-target { margin-top: auto; align-self: flex-end; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #E5484D 0 15%, #fff 16% 32%, #E5484D 33% 49%, #fff 50% 66%, transparent 67%); }
.cv-foot { font-size: .76rem; font-weight: 600; opacity: .88; border-top: 1px solid rgb(255 255 255 / .3); padding-top: 10px; }
.cv-ribbon { position: absolute; top: -7px; right: 30px; width: 22px; height: 74px; background: var(--margin); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); }
.bf-text { display: grid; gap: 14px; min-width: 0; }
.bf-text h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.bf-stats { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; color: var(--ink-2); }
.bf-stats b { display: block; font-size: 1.5rem; line-height: 1.1; color: var(--ink); }
.bf-progress { display: flex; align-items: center; gap: 12px; color: var(--ink-3); font-size: .9rem; }
.bf-progress b { color: var(--ink); }
.bf-progress .bar { max-width: 200px; }
@media (max-width: 760px) {
  .book-front { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-top: 18px; }
  .cover { width: min(230px, 68vw); justify-self: center; }
  .cv-title { font-size: 2.1rem; }
}

.parts-sec > h2, .contents > h2 { margin: 0 0 14px; }
.parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-bottom: 44px; }
.part-card { position: relative; display: flex; gap: 12px; align-items: center; padding: 12px 46px 12px 12px; background: var(--sheet); border: 1.5px solid var(--rule); border-left: 6px solid var(--pc); border-radius: 14px; text-decoration: none; color: var(--ink); }
.part-card:hover { border-color: var(--pc); }
.pc-pic { width: 52px; height: 52px; flex: none; border-radius: 12px; }
.pc-body { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pc-body small { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pc); }
.pc-body span { font-size: .84rem; color: var(--ink-3); }
.pc-count { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); min-width: 28px; height: 28px; padding: 0 6px; display: grid; place-items: center; border-radius: 99px; background: var(--sheet-2); color: var(--ink-2); font-size: .8rem; font-weight: 700; }

.contents { max-width: 900px; }
.book-filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.book-filter .chip { cursor: pointer; }
.book-filter .chip[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--sheet); }
.toc-part { margin-bottom: 30px; }
.tp-head { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-radius: 16px; background: color-mix(in srgb, var(--pc) 13%, var(--sheet)); border-left: 6px solid var(--pc); }
.tp-n { flex: none; padding: .35em .7em; border-radius: 10px; background: var(--pc); color: var(--lv-ink); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.tp-head h3 { font-size: 1.3rem; }
.tp-head p { color: var(--ink-2); font-size: .92rem; }
.tp-pic { margin-left: auto; flex: none; }
.toc-ch { padding: 16px 0 0 4px; }
.toc-ch h4 { margin: 0 0 6px; font-size: 1.08rem; display: flex; gap: 10px; align-items: baseline; }
.tc-n { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pc); }
.toc-list { list-style: none; margin: 0; padding: 0; }
.toc-list li { position: relative; }
.toc-list a { display: flex; align-items: center; gap: 10px; padding: 7px 44px 7px 8px; border-radius: 10px; color: var(--ink); text-decoration: none; }
.toc-list a:hover { background: var(--sheet); box-shadow: inset 0 0 0 1.5px var(--rule); }
.tl-n { flex: none; min-width: 2.9em; font-weight: 700; color: var(--pc); font-variant-numeric: tabular-nums; }
.tl-pic { flex: none; display: inline-grid; width: 30px; }
.tl-t { min-width: 0; font-weight: 500; }
.tl-dots { flex: 1 1 24px; min-width: 18px; align-self: flex-end; margin-bottom: .55em; border-bottom: 2px dotted var(--rule-2); }
.tl-pg { flex: none; min-width: 2em; text-align: right; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.toc-list .done-mark { top: 50%; right: 6px; transform: translateY(-50%); width: 24px; height: 24px; }
.toc-list li:has(.done-mark:not([hidden])) .tl-pg { visibility: hidden; }
@media (max-width: 560px) {
  .toc-list a { gap: 8px; padding-left: 4px; }
  .toc-list .lv { display: none; }
  .tl-pic { display: none; }
  .tp-pic { display: none; }
}

.book-page { --pc: var(--p1); }
.run-head { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; margin: 12px 0 0; padding-bottom: 8px; border-bottom: 3px double var(--rule-2); font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.run-head a { color: inherit; text-decoration: none; }
.run-head a:hover { color: var(--pc); }
.run-head .rh-part { color: var(--pc); }
.bp-head { display: flex; gap: 20px; align-items: center; padding: 22px 0 24px; }
.bp-num { flex: none; display: grid; place-items: center; align-content: center; min-width: 92px; height: 92px; padding: 0 12px; border-radius: 24px; background: var(--pc); color: var(--lv-ink); font: 800 2.1rem/1 var(--f-ui); letter-spacing: -.02em; box-shadow: var(--shadow); transform: rotate(-3deg); font-variant-numeric: tabular-nums; }
.bp-num small { font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; opacity: .85; margin-bottom: 4px; }
.bp-head .ph-pic { margin-left: auto; }
.bp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 272px; gap: 36px; align-items: start; }
.bp-layout > .lesson { max-width: none; }
.bp-side { position: sticky; top: calc(var(--top-h) + 16px); display: grid; gap: 4px; padding: 14px; background: var(--sheet); border: 1.5px solid var(--rule); border-top: 6px solid var(--pc); border-radius: 16px; max-height: calc(100vh - var(--top-h) - 32px); overflow: auto; }
.bp-side-k { font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--pc); }
.bp-side h2 { font-size: 1.05rem; margin-bottom: 6px; }
.bp-side ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.bp-side li a { position: relative; display: flex; gap: 8px; align-items: baseline; padding: 6px 34px 6px 8px; border-radius: 10px; color: var(--ink-2); text-decoration: none; font-size: .9rem; line-height: 1.3; }
.bp-side li a:hover { background: var(--sheet-2); color: var(--ink); }
.bp-side li a[aria-current] { background: color-mix(in srgb, var(--pc) 15%, var(--sheet)); color: var(--ink); font-weight: 700; }
.bp-side .sn { flex: none; min-width: 2.7em; font-weight: 700; color: var(--pc); font-variant-numeric: tabular-nums; }
.bp-side .done-mark { top: 50%; right: 6px; transform: translateY(-50%); width: 22px; height: 22px; }
.bp-all { display: inline-flex; gap: 6px; align-items: center; margin-top: 8px; font-size: .88rem; font-weight: 600; text-decoration: none; }
.bp-foot { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; align-items: center; margin-top: 44px; padding-top: 18px; border-top: 3px double var(--rule-2); }
.bp-foot > a { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 16px; text-decoration: none; color: var(--ink); min-width: 0; }
.bp-foot > a:hover { border-color: var(--pc); }
.bp-foot > a span { display: flex; flex-direction: column; font-weight: 600; min-width: 0; line-height: 1.3; }
.bp-foot small { color: var(--ink-3); font-weight: 500; font-size: .8rem; }
.bp-foot .bp-next { justify-content: flex-end; text-align: right; }
.bp-pn { display: grid; gap: 7px; justify-items: center; color: var(--ink-3); font-size: .85rem; }
.bp-pn b { color: var(--ink); font-size: 1rem; }
.bp-pn .bar { width: 130px; }
@media (max-width: 1020px) {
  .bp-layout { grid-template-columns: minmax(0, 1fr); }
  .bp-side { position: static; max-height: none; }
}
@media (max-width: 640px) {
  .book-page .toc { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; padding: 2px 16px 6px 0; scrollbar-width: none; }
  .book-page .toc a { flex: none; }
  .bp-head { gap: 14px; padding: 16px 0 18px; align-items: flex-start; flex-wrap: wrap; }
  .bp-num { min-width: 70px; height: 70px; font-size: 1.6rem; border-radius: 20px; }
  .bp-head .ph-text { flex: 1 1 200px; }
  .bp-head .ph-pic { display: none; }
  .bp-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bp-pn { grid-column: 1 / -1; order: -1; }
  .bp-foot > a { padding: 10px 12px; gap: 8px; }
}
/* ---------- picture book (PDF to print) ---------- */
.pb-hero { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 44px; align-items: center; padding: 14px 0 6px; }
.pb-cover { display: block; border-radius: 8px; overflow: hidden; background: #FFFFFF; box-shadow: var(--shadow-lg); transform: rotate(-2deg); transition: transform .2s; }
.pb-cover:hover { transform: rotate(0) translateY(-4px); }
.pb-cover img, .pb-page img, .pb-promo img { display: block; width: 100%; height: auto; }
.pb-copy { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }
.pb-copy h1 { font-size: clamp(2.1rem, 5vw, 3.3rem); line-height: 1.04; letter-spacing: -.02em; }
.pb-read { margin: 34px 0 10px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.pbr { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; justify-items: center; padding: 16px; background: var(--sheet-2); border: 1.5px solid var(--rule); border-radius: 22px; }
.pbr-bar { display: flex; gap: 10px; align-items: center; justify-content: center; width: min(100%, 794px); }
.pbr-bar select { flex: 1 1 auto; min-width: 0; max-width: 420px; padding: .6em .8em; border: 2px solid var(--rule-2); border-radius: 12px; background: var(--sheet); color: var(--ink); font: inherit; font-weight: 600; }
.pbr-bar .btn[disabled] { opacity: .4; pointer-events: none; }
.pbr-now { flex: 1 1 auto; text-align: center; color: var(--ink-2); font-weight: 600; }
.pbr-stage { width: min(100%, 794px); scroll-margin-top: calc(var(--top-h) + 16px); }
.pbr-stage img { display: block; width: 100%; height: auto; border-radius: 6px; background: #FFFFFF; box-shadow: var(--shadow-lg); touch-action: pan-y pinch-zoom; }
.pb-part-do { grid-column: 1 / -1; display: flex; gap: 8px; }
.pb-part-do .btn { flex: 1 1 auto; }
.pb-page > a { display: block; border-radius: 6px; transition: transform .15s; }
.pb-page > a:hover { transform: translateY(-3px); }
.pb-parts { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.pb-part { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 10px 14px; align-items: center; padding: 12px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: var(--r); scroll-margin-top: calc(var(--top-h) + 16px); }
.pb-part:target { border-color: var(--pen); box-shadow: 0 0 0 3px var(--pen-soft); }
.pb-part-pic { width: 64px; height: 64px; border-radius: 16px; }
.pb-part-text { display: grid; gap: 2px; min-width: 0; }
.pb-part-text small { color: var(--margin); font-weight: 700; font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; }
.pb-part-text h3 { margin: 0; font-size: 1.08rem; }
.pb-part-text p { margin: 0; color: var(--ink-2); font-size: .9rem; line-height: 1.4; }
.pb-part .btn small { font-weight: 500; opacity: .8; }
.pb-pages { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px 16px; }
.pb-page { margin: 0; display: grid; gap: 8px; align-content: start; }
.pb-page img { border-radius: 6px; border: 1px solid var(--rule); box-shadow: var(--shadow); background: #FFFFFF; }
.pb-page figcaption { color: var(--ink-2); font-size: .92rem; line-height: 1.4; }
.pb-page figcaption b { display: block; color: var(--ink-3); font-size: .78rem; }
.pb-promo { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 26px; align-items: center; padding: 20px 26px; background: var(--sheet); border: 1.5px solid var(--rule); border-radius: 22px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: border-color .15s; }
.pb-promo:hover { border-color: var(--pen); }
.pb-promo img { border-radius: 5px; box-shadow: var(--shadow-lg); transform: rotate(-3deg); background: #FFFFFF; }
.pb-promo-text { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.pb-promo-text b { font-size: 1.55rem; line-height: 1.15; }
.pb-promo-text small { color: var(--ink-2); font-size: 1rem; line-height: 1.45; }
@media (max-width: 760px) {
  .pb-hero { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pb-cover { width: min(168px, 46%); justify-self: center; }
  .pb-copy { gap: 12px; }
  .pb-pages { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; }
  .pb-promo { grid-template-columns: 92px minmax(0, 1fr); gap: 16px; padding: 16px; }
  .pb-promo-text b { font-size: 1.2rem; }
  .pb-promo-text small { font-size: .92rem; }
  .pbr { padding: 10px; gap: 10px; border-radius: 16px; }
  .pbr-bar .btn { padding-inline: .8em; }
  .pbr-bar .btn span { display: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }