/* YarvixLab app shell — 6 themes, shared with chapters via localStorage 'yarvix-theme' */
/* The six palettes are the chapters' own, copied from N-c11-01 (the canonical source) so the
   shell and a chapter show the same colours for the same theme name. Five of them used to be
   dark variants here while every chapter drew them on paper, so picking "cosmos" in the library
   and opening a chapter looked like two different products. --accent4, --correct and --warn are
   carried over too, and --shadow-c replaces the flat black shadows the dark shell relied on. */
:root, [data-theme="cosmos"]{
  --page:#f2e6cf; --bg:#fffaf0; --surface:#f7eedc; --card:#fffdf7; --border:#d8cdb9;
  --text:#12335c; --muted:#667080;
  --accent1:#1769d2; --accent2:#0e9f99; --accent3:#e3990e; --accent4:#ec684f;
  --correct:#18865e; --wrong:#d7463d; --warn:#e1990a;
  --shadow-c:rgba(45,44,34,.16); --radius:14px;
}
[data-theme="chalk"]{
  --page:#e2ebe3; --bg:#fbfbf7; --surface:#eef3ed; --card:#ffffff; --border:#c8d5ca;
  --text:#173f35; --muted:#62756e;
  --accent1:#28745d; --accent2:#d27b33; --accent3:#b95752; --accent4:#446a9b;
  --correct:#18865e; --wrong:#d7463d; --warn:#e1990a; --shadow-c:rgba(30,45,40,.14);
}
[data-theme="neon"]{
  --page:#d8eff6; --bg:#f2fbff; --surface:#e1f4f8; --card:#ffffff; --border:#9dcbd4;
  --text:#133b58; --muted:#577281;
  --accent1:#116dc0; --accent2:#008f87; --accent3:#e36c35; --accent4:#8c5db7;
  --correct:#18865e; --wrong:#d7463d; --warn:#e1990a; --shadow-c:rgba(25,55,75,.14);
}
[data-theme="ember"]{
  --page:#f9dcc5; --bg:#fff6ee; --surface:#fce5d3; --card:#fffdf9; --border:#e3baa2;
  --text:#542b27; --muted:#7e6258;
  --accent1:#d6533f; --accent2:#98762a; --accent3:#bd6a22; --accent4:#496d78;
  --correct:#18865e; --wrong:#d7463d; --warn:#e1990a; --shadow-c:rgba(70,40,30,.15);
}
[data-theme="aurora"]{
  --page:#e3daf7; --bg:#f7f3ff; --surface:#ebe5fa; --card:#fffdff; --border:#c9bae4;
  --text:#352a5c; --muted:#716889;
  --accent1:#7150b3; --accent2:#0e918d; --accent3:#dc8b20; --accent4:#d35b75;
  --correct:#18865e; --wrong:#d7463d; --warn:#e1990a; --shadow-c:rgba(45,35,80,.14);
}
[data-theme="midnight"]{
  --page:#0c1524; --bg:#0c1524; --surface:#152338; --card:#111d2f; --border:#33445d;
  --text:#edf4ff; --muted:#a9b7ca;
  --accent1:#69a7ff; --accent2:#37c7bc; --accent3:#ffc857; --accent4:#ff7a66;
  --correct:#4bd7a3; --wrong:#ff786f; --warn:#ffc857; --shadow-c:rgba(0,0,0,.38);
}

/* theme swatches — same gradient-pill style used inside every chapter, for a consistent look */
.swatches{display:flex;gap:7px;align-items:center}
.swatch{width:22px;height:22px;border-radius:50%;cursor:pointer;flex-shrink:0;position:relative;
  border:2px solid transparent;transition:transform .15s,border-color .15s,box-shadow .15s;
  box-shadow:0 1px 5px var(--shadow-c)}
.swatch:hover{transform:scale(1.18)}
.swatch.active{border-color:var(--text);box-shadow:0 0 0 2px var(--bg),0 0 10px color-mix(in srgb,var(--accent1) 60%,transparent)}
.swatch[data-t="cosmos"]{background:#2c73d2}
.swatch[data-t="chalk"]{background:#23a7a1}
.swatch[data-t="neon"]{background:#ec684f}
.swatch[data-t="ember"]{background:#f4ad19}
.swatch[data-t="aurora"]{background:#7950ae}
.swatch[data-t="midnight"]{background:#111827}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* The page sits a shade deeper than the chapters' paper so that switching theme is visible
   out here, where most of the screen is background and near-white cards. The cards, the
   header and every accent stay exactly the chapters' colours. */
body{background:var(--page,var(--bg));color:var(--text);font-family:Inter,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}

/* dev ribbon */
.dev-ribbon{position:fixed;top:0;left:0;right:0;z-index:999;background:#7c2d12;color:#fdba74;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;text-align:center;padding:3px 0;text-transform:uppercase}
body.has-ribbon{padding-top:22px}

/* header */
.hdr{display:flex;align-items:center;gap:14px;padding:14px 22px;background:var(--surface);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:50}
.logo{position:relative;display:inline-flex;align-items:baseline;white-space:nowrap;
  font-size:1.25rem;font-weight:900;letter-spacing:-.02em;padding-bottom:6px}
.logo .lg-l,.logo .lg-r{display:inline-block;color:var(--text);font-weight:900}
.logo .lg-bar{position:absolute;left:1px;right:1px;bottom:-1px;height:3px;border-radius:3px;
  background:linear-gradient(95deg,var(--accent1),var(--accent2) 55%,var(--accent3));transform-origin:center}
@keyframes lgL{0%{opacity:0;transform:translateX(-28px)}55%{opacity:1;transform:translateX(3px)}100%{opacity:1;transform:translateX(0)}}
@keyframes lgR{0%{opacity:0;transform:translateX(28px)}55%{opacity:1;transform:translateX(-3px)}100%{opacity:1;transform:translateX(0)}}
@keyframes lgBar{0%{opacity:0;transform:translateY(-16px) scaleX(.35)}60%{opacity:1;transform:translateY(2px) scaleX(1.06)}100%{opacity:1;transform:translateY(0) scaleX(1)}}
.logo .lg-l{animation:lgL 1.3s cubic-bezier(.22,1,.36,1) both}
.logo .lg-r{animation:lgR 1.3s cubic-bezier(.22,1,.36,1) both}
.logo .lg-bar{animation:lgBar 1.1s cubic-bezier(.34,1.56,.64,1) .32s both}
@media (prefers-reduced-motion: reduce){
  .logo .lg-l,.logo .lg-r,.logo .lg-bar{animation:none!important;opacity:1!important;transform:none!important}
}
.hdr .spacer{flex:1}
.hdr .who{font-size:.8rem;color:var(--muted);max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.btn{display:inline-block;background:var(--accent1);color:#fff;border:none;border-radius:9px;
  padding:10px 22px;font-size:.92rem;font-weight:700;cursor:pointer;transition:.15s}
.btn:hover{opacity:.88;transform:translateY(-1px)}
.btn.ghost{background:transparent;border:1px solid var(--border);color:var(--text)}
.btn.small{padding:6px 14px;font-size:.8rem}

/* landing */
@keyframes lpIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes lpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.hero{position:relative;max-width:980px;margin:0 auto;padding:48px 24px 20px;text-align:center;overflow:hidden}
.hero::before{content:"";position:absolute;top:-140px;left:50%;transform:translateX(-50%);
  width:640px;height:340px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent1) 26%,transparent),transparent);filter:blur(20px)}
.hero-badge{position:relative;display:inline-block;font-size:.76rem;font-weight:700;letter-spacing:.05em;
  color:var(--accent3);border:1px solid var(--border);background:var(--card);border-radius:30px;padding:6px 16px;margin-bottom:22px;animation:lpIn .5s both}
.hero h1{position:relative;font-size:clamp(2.1rem,5.6vw,3.5rem);font-weight:900;line-height:1.12;animation:lpIn .5s .05s both}
.hero h1 em{color:var(--accent2);font-style:normal;position:relative}
.hero h1 em::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:.28em;border-radius:6px;
  background:color-mix(in srgb,var(--accent2) 26%,transparent);z-index:-1}
.hero p.sub{position:relative;color:var(--muted);font-size:1.1rem;margin:20px auto 28px;max-width:660px;line-height:1.75;animation:lpIn .5s .1s both}
.hero-cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* hero mascots — boy left, girl right, dropping in from the sides; free space only */
.hero-stage{position:relative;overflow:visible;min-height:min(50vh,500px)}
.hero-char{position:absolute;bottom:6px;height:min(46vh,460px);width:auto;
  pointer-events:none;user-select:none;z-index:0;
  filter:drop-shadow(0 18px 26px var(--shadow-c))}
.hero-char-l{left:clamp(4px,3.4vw,64px)}
.hero-char-r{right:clamp(4px,3.4vw,64px)}
@keyframes charInL{0%{opacity:0;transform:translateX(-170px) rotate(-5deg)}
  60%{opacity:1;transform:translateX(16px) rotate(1.5deg)}
  100%{opacity:1;transform:translateX(0) rotate(0)}}
@keyframes charInR{0%{opacity:0;transform:translateX(170px) rotate(5deg)}
  60%{opacity:1;transform:translateX(-16px) rotate(-1.5deg)}
  100%{opacity:1;transform:translateX(0) rotate(0)}}
.hero-char-l{animation:charInL 1.7s cubic-bezier(.22,1,.36,1) both}
.hero-char-r{animation:charInR 1.7s cubic-bezier(.22,1,.36,1) .1s both}
@keyframes ctaDrop{0%{opacity:0;transform:translateY(-46px) scale(.94)}
  55%{opacity:1;transform:translateY(6px) scale(1.03)}
  100%{opacity:1;transform:translateY(0) scale(1)}}
.hero-cta{animation:ctaDrop 1s cubic-bezier(.34,1.56,.64,1) .75s both}
.hero{position:relative;z-index:1}
@media (max-width:1180px){.hero-char{display:none}}
@media (prefers-reduced-motion: reduce){
  .hero-char,.hero-cta{animation:none!important;opacity:1!important;transform:none!important}
}
.hero-free{position:relative;margin-top:16px;font-size:.84rem;color:var(--muted);animation:lpIn .5s .2s both}
.btn.big{font-size:1.05rem;padding:13px 32px;border-radius:12px}
.btn.big:hover{transform:translateY(-2px);box-shadow:0 12px 28px color-mix(in srgb,var(--accent1) 30%,transparent)}

/* single rotating quote — compact, eye-level */
.quote-solo{max-width:760px;margin:6px auto 8px;padding:18px 24px;text-align:center}
.quote-solo blockquote{margin:0;transition:opacity .45s ease}
.quote-solo blockquote.fade{opacity:0}
.quote-solo .q-text{display:block;font-size:clamp(1.05rem,2.4vw,1.4rem);line-height:1.55;font-weight:600;color:var(--text)}
.quote-solo .q-cite{display:block;margin-top:10px;font-size:.85rem;font-style:normal;font-weight:700;color:var(--accent3);letter-spacing:.03em}
/* final CTA — one clean button */
.final-cta{text-align:center;margin:14px auto 40px}

/* feature section */
.feat-head{max-width:760px;margin:22px auto 4px;padding:0 24px;text-align:center}
.feat-head h2{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:800;line-height:1.25}
.feat-head h2 em{color:var(--accent1);font-style:italic}
.feat-head p{color:var(--muted);font-size:.98rem;line-height:1.7;margin-top:12px}
.feat-grid{max-width:1080px;margin:24px auto 40px;padding:0 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feat{position:relative;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:24px;text-align:left;
  transition:transform .25s,box-shadow .25s,border-color .25s;overflow:hidden}
.feat::before{content:"";position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent1) 14%,transparent),transparent);pointer-events:none;transition:opacity .25s;opacity:0}
.feat:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--accent1) 45%,var(--border));
  box-shadow:0 16px 38px var(--shadow-c)}
.feat:hover::before{opacity:1}
.feat:hover .ic-orb{animation:lpFloat 2.4s ease-in-out infinite}
.ic-orb{width:56px;height:56px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.7rem;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent1) 22%,var(--card)),color-mix(in srgb,var(--accent2) 18%,var(--card)));
  border:1px solid var(--border);box-shadow:0 6px 16px color-mix(in srgb,var(--accent1) 18%,transparent)}
.feat h3{font-size:1.05rem;margin:14px 0 7px;font-weight:800}
.feat p{font-size:.87rem;color:var(--muted);line-height:1.62}
.feat-hero{background:linear-gradient(150deg,color-mix(in srgb,var(--accent3) 14%,var(--card)),var(--card));
  border-color:color-mix(in srgb,var(--accent3) 40%,var(--border))}
.feat-hero .ic-orb{background:linear-gradient(135deg,var(--accent3),var(--accent1));box-shadow:0 6px 20px color-mix(in srgb,var(--accent3) 40%,transparent)}
.feat-tag{display:inline-block;margin-top:12px;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--accent3);border:1px solid var(--accent3);border-radius:20px;padding:3px 10px}

/* stats band */
.stats{max-width:940px;margin:18px auto 8px;padding:26px 24px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px;text-align:center}
.stat b{display:block;font-size:clamp(1.8rem,4vw,2.6rem);font-weight:900;color:var(--accent1);line-height:1}
.stat span{display:block;margin-top:6px;font-size:.82rem;color:var(--muted)}

/* closing CTA */
.cta{max-width:720px;margin:24px auto 56px;padding:44px 28px;text-align:center;
  background:linear-gradient(150deg,color-mix(in srgb,var(--accent1) 12%,var(--card)),var(--card));
  border:1px solid var(--border);border-radius:24px}
.cta h2{font-size:clamp(1.4rem,3.4vw,2rem);font-weight:800;line-height:1.25}
.cta p{color:var(--muted);font-size:1rem;line-height:1.7;margin:14px auto 24px;max-width:520px}
.cta em,.cta h2 em{color:var(--accent2);font-style:normal}
.badge-free{display:inline-block;background:var(--accent2);color:#04120c;font-size:.66rem;font-weight:800;
  border-radius:20px;padding:2px 9px;letter-spacing:.04em;vertical-align:middle}

/* auth card */
.auth-wrap{min-height:calc(100vh - 60px);display:flex;align-items:center;justify-content:center;padding:24px}
.auth-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:34px}
.auth-card h2{margin-bottom:6px}
.auth-card p.hint{color:var(--muted);font-size:.84rem;margin-bottom:22px;line-height:1.6}
.field{margin-bottom:16px}
.field label{display:block;font-size:.78rem;color:var(--muted);margin-bottom:6px;font-weight:600}
.field input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:9px;
  color:var(--text);padding:11px 13px;font-size:.95rem;outline:none}
.field input:focus{border-color:var(--accent1)}
.field input[type=checkbox],.field input[type=radio]{width:16px;height:16px;padding:0;flex:0 0 auto}
.auth-err{color:var(--wrong);font-size:.82rem;min-height:18px;margin-bottom:10px}

/* library */
.lib{max-width:1120px;margin:0 auto;padding:28px 24px 80px}
.lib h2.cls{font-size:1.15rem;color:var(--accent3);margin:34px 0 16px;display:flex;align-items:center;gap:10px}
.lib h2.cls::after{content:"";flex:1;height:1px;background:var(--border)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.chap{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:18px;cursor:pointer;transition:.15s;position:relative;display:block}
.chap:hover{border-color:var(--accent1);transform:translateY(-2px)}
.chap .top{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.chap .ic{font-size:1.5rem}
.chap .num{font-size:.7rem;color:var(--muted);font-weight:700;letter-spacing:.06em}
.chap h3{font-size:.97rem;line-height:1.4}
.chap .foot{margin-top:10px;font-size:.76rem;color:var(--muted);line-height:1.5;min-height:2.2em}
.chap .lock{position:absolute;top:12px;right:12px;font-size:.85rem}

/* reader — no duplicate chrome, the chapter has its own header. Just a small back button. */
.reader-wrap{position:fixed;inset:0;display:flex;flex-direction:column}
body.has-ribbon .reader-wrap{top:22px}
/* Bottom-left, away from every chapter's own header controls (sidebar toggle, theme
   swatches etc. all live top-left/top-right) so this never overlaps chapter UI. */
.reader-back{position:fixed;bottom:16px;left:16px;z-index:1000;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;
  background:var(--surface);color:var(--text);border:1px solid var(--border);
  box-shadow:0 4px 14px var(--shadow-c);transition:.15s}
.reader-back:hover{transform:scale(1.1);border-color:var(--accent1)}
#frame{flex:1;border:0;width:100%;background:#0b0f1c}
.loading{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-size:.95rem;pointer-events:none}

footer{padding:34px 24px;text-align:center;color:var(--muted);font-size:.78rem;border-top:1px solid var(--border)}

/* subject picker — three cards in the hero, between the mascots */
.subj-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:660px;margin:0 auto;text-align:center}
.subj{--c:var(--accent1);position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:20px 14px 16px;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--c) 16%,var(--card)),var(--card) 70%);
  border:1px solid color-mix(in srgb,var(--c) 38%,var(--border));
  transition:transform .25s,box-shadow .25s,border-color .25s}
.subj::before{content:"";position:absolute;top:-50px;left:50%;width:150px;height:110px;transform:translateX(-50%);
  border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 30%,transparent),transparent)}
.subj-chem{--c:var(--accent2)}
.subj-math{--c:var(--accent3)}
a.subj:hover{transform:translateY(-6px);border-color:var(--c);
  box-shadow:0 18px 40px color-mix(in srgb,var(--c) 28%,transparent)}
.subj-ic{position:relative;width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;
  background:color-mix(in srgb,var(--c) 14%,var(--surface));border:1px solid color-mix(in srgb,var(--c) 35%,var(--border));margin-bottom:8px}
.subj-ic svg{width:44px;height:44px;overflow:visible;fill:none;stroke:var(--c);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.subj-name{position:relative;font-size:1.12rem;font-weight:800;color:var(--text)}
.subj-meta{position:relative;font-size:.76rem;color:var(--muted)}
.subj-go{position:relative;margin-top:10px;font-size:.8rem;font-weight:800;color:#fff;background:var(--c);
  border-radius:20px;padding:6px 16px}
.subj-go b{display:inline-block;transition:transform .2s}
a.subj:hover .subj-go b{transform:translateX(4px)}
.subj-soon{position:relative;margin-top:10px;font-size:.68rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:var(--c);border:1px dashed color-mix(in srgb,var(--c) 70%,transparent);border-radius:20px;padding:5px 12px}
.subj.is-soon{cursor:default}
.subj.is-soon .subj-ic svg,.subj.is-soon .subj-name{opacity:.8}
/* icon motion */
.subj svg .nuc{fill:var(--c);stroke:none}
.subj svg .e{fill:var(--c);stroke:none}
.subj svg .orb{transform-origin:32px 32px}
.subj svg .o1{animation:orbSpin 6s linear infinite}
.subj svg .o2{animation:orbSpin 8s linear infinite reverse}
.subj svg .o3{animation:orbSpin 10s linear infinite}
@keyframes orbSpin{to{transform:rotate(360deg)}}
.subj svg .liquid{fill:color-mix(in srgb,var(--c) 45%,transparent);stroke:none}
.subj svg .bub{fill:var(--c);stroke:none;animation:bubUp 2.6s ease-in infinite}
.subj svg .b2{animation-delay:.9s}.subj svg .b3{animation-delay:1.7s}
@keyframes bubUp{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translateY(-34px);opacity:0}}
.subj svg .axis{stroke:var(--muted);stroke-width:1.6}
.subj svg .curve{stroke-dasharray:80;stroke-dashoffset:80;animation:drawC 3.2s ease-in-out infinite}
@keyframes drawC{0%{stroke-dashoffset:80}45%,80%{stroke-dashoffset:0}100%{stroke-dashoffset:-80}}
.subj svg .sym{fill:var(--c);stroke:none;font:800 17px Inter,sans-serif}
@media (max-width:560px){
  .subj-row{grid-template-columns:1fr;max-width:380px}
  .subj{display:grid;grid-template-columns:52px minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;
    align-items:center;text-align:left;padding:14px 16px}
  .subj-ic{grid-row:1/3;margin:0;width:52px;height:52px}
  .subj-name{grid-column:2;grid-row:1;align-self:end}
  .subj-meta{grid-column:2;grid-row:2;align-self:start}
  .subj-go,.subj-soon{grid-column:3;grid-row:1/3;margin:0;white-space:nowrap}
  .subj-name{font-size:1rem}
  .subj-soon{font-size:.6rem;padding:5px 9px;letter-spacing:.05em}
}
@media (prefers-reduced-motion: reduce){.subj svg *{animation:none!important}.subj svg .curve{stroke-dashoffset:0}}

/* library — chapters a logged-out visitor can see but not open yet */
.chap.locked{opacity:.72}
.chap.locked:hover{opacity:1;border-color:var(--accent3)}
.chap-hint{margin-top:8px;font-size:.7rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--accent3)}

/* ---- library: one subject per page, with a tab bar to switch (14 Oct 2026) ---- */
.subj-tabs{max-width:1120px;margin:22px auto 0;padding:0 24px;display:flex;gap:10px;flex-wrap:wrap}
.subj-tab{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:999px;
  border:1px solid var(--border);background:var(--card);color:var(--muted);
  font-weight:800;font-size:.88rem;text-decoration:none;transition:.15s}
.subj-tab:hover{border-color:var(--accent1);color:var(--text);transform:translateY(-1px)}
.subj-tab.on{background:var(--accent1);border-color:var(--accent1);color:#fff}
.subj-tab .st-ic{font-size:1.05rem;line-height:1}
.subj-tab .st-n{font-size:.72rem;font-weight:900;padding:2px 8px;border-radius:999px;
  background:color-mix(in srgb,currentColor 16%,transparent)}
.lib h2.subj-h{font-size:1.6rem;font-weight:900;color:var(--text);margin:4px 0 2px;letter-spacing:-.01em}
.lib h3.cls{font-size:.95rem;color:var(--accent3);margin:26px 0 14px;display:flex;
  align-items:center;gap:10px;font-weight:800}
.lib h3.cls::after{content:"";flex:1;height:1px;background:var(--border)}
@media(max-width:600px){
  .subj-tabs{padding:0 16px;gap:7px}
  .subj-tab{padding:9px 13px;font-size:.82rem}
  .lib h2.subj-h{font-size:1.3rem}
}

/* ===== Light / Dark (test). The six old themes above are kept, only hidden. ===== */
:root,[data-theme="school"]{
  --page:#e8f1fc; --bg:#f6faff; --surface:#e9f2fd; --card:#ffffff; --border:#c9daf0;
  --text:#12335c; --muted:#5b6f8d;
  --accent1:#1769d2; --accent2:#0e9f99; --accent3:#e3990e; --accent4:#ec684f;
  --correct:#18865e; --wrong:#d7463d; --warn:#e1990a; --shadow-c:rgba(25,60,110,.14); --radius:14px;
}
[data-theme="crystal"]{
  --page:#05080c; --bg:#0b0f14; --surface:#121821; --card:#0f151d; --border:#263040;
  --text:#eaf1fb; --muted:#9fb0c6;
  --accent1:#5bb4ff; --accent2:#34d3c6; --accent3:#ffc857; --accent4:#ff7a66;
  --correct:#4bd7a3; --wrong:#ff786f; --warn:#ffc857; --shadow-c:rgba(0,0,0,.6);
}
.mode-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);background:var(--card);color:var(--text);font:700 .82rem Inter,system-ui,sans-serif;cursor:pointer;padding:5px 12px 5px 10px;border-radius:999px;box-shadow:0 1px 5px var(--shadow-c)}
.mode-toggle .sw{position:relative;width:38px;height:22px;border-radius:999px;background:var(--surface);border:1px solid var(--border);flex:none}
.mode-toggle .sw::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:var(--accent3);transition:transform .2s,background .2s}
[data-theme="crystal"] .mode-toggle .sw::after{transform:translateX(16px);background:var(--accent1)}
.mode-toggle:focus-visible{outline:2px solid var(--accent1);outline-offset:2px}

/* ===== Exam Hub ===== */
.exam-grid{max-width:1080px;margin:24px auto 18px;padding:0 24px;display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
a.exam-card{display:block;text-decoration:none;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:18px;padding:22px;transition:transform .2s,border-color .2s,box-shadow .2s}
a.exam-card:hover{transform:translateY(-4px);border-color:color-mix(in srgb,var(--accent1) 50%,var(--border));box-shadow:0 12px 28px var(--shadow-c)}
a.exam-card .ex-ic{font-size:1.7rem}
a.exam-card h3{font-size:1.05rem;font-weight:800;margin:10px 0 6px}
a.exam-card p{font-size:.86rem;color:var(--muted);line-height:1.6}
a.exam-card .ex-go{display:inline-block;margin-top:12px;font-size:.8rem;font-weight:800;color:var(--accent1)}
.exam-note{max-width:760px;margin:0 auto 34px;padding:0 24px;text-align:center;font-size:.8rem;color:var(--muted);line-height:1.6}
.ex-wrap{max-width:900px;margin:0 auto;padding:26px 22px 40px}
.ex-crumb{font-size:.82rem;margin-bottom:14px}.ex-crumb a{color:var(--accent1);text-decoration:none;font-weight:700}
.ex-wrap h1{font-size:clamp(1.6rem,4vw,2.3rem);font-weight:900;line-height:1.15}
.ex-tag{color:var(--muted);margin:8px 0 20px;font-size:1rem}
.ex-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 20px;margin:14px 0}
.ex-box h2{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--accent2);font-weight:800;margin-bottom:8px}
.ex-box p,.ex-box li{font-size:.95rem;line-height:1.7}
.ex-box ul{padding-left:20px}
.ex-links a.exl{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:12px 14px;margin:8px 0;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);text-decoration:none}
.ex-links a.exl:hover{border-color:var(--accent1)}
.ex-links a.exl b{display:block;font-size:.95rem}.ex-links a.exl span{display:block;font-size:.8rem;color:var(--muted);margin-top:2px}
.ex-links a.exl i{font-style:normal;font-weight:800;color:var(--accent1);white-space:nowrap}
.ex-chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
.ex-chips a{padding:9px 16px;border-radius:999px;background:var(--accent1);color:#fff;font-weight:700;font-size:.86rem;text-decoration:none}
.ex-upd{border-left:3px solid var(--accent3);padding:6px 12px;margin:8px 0;background:var(--surface);border-radius:0 10px 10px 0}
.ex-upd small{color:var(--muted)}
.ex-empty{color:var(--muted);font-size:.9rem}
.ex-disc{font-size:.78rem;color:var(--muted);line-height:1.6;margin-top:18px}

/* ===== fourth tile: what comes after 12 ===== */
.subj-row.hero-cta{grid-template-columns:repeat(4,minmax(0,1fr));max-width:800px}
@media (max-width:1360px){.hero-char{display:none}}
.subj-after{--c:var(--accent4)}
.subj-after .subj-name{font-size:1rem;line-height:1.2}
.subj{justify-content:flex-start}
.subj-go{margin-top:auto!important}
.subj-meta{margin-bottom:10px}
.subj svg .path{stroke:var(--c);stroke-width:2.6;stroke-dasharray:90;stroke-dashoffset:90;animation:drawC 3.2s ease-in-out infinite}
.subj svg .arrow{stroke:var(--c);stroke-width:2.6}
.subj svg .dot{fill:var(--c);stroke:none}
@media (max-width:980px){.subj-row.hero-cta{grid-template-columns:repeat(2,minmax(0,1fr));max-width:520px}}
@media (max-width:640px){.subj-row.hero-cta{grid-template-columns:1fr;max-width:380px}}
@media (max-width:560px){.subj-go{margin-top:0!important}.subj-meta{margin-bottom:0}.subj-after .subj-name{font-size:1rem}}
@media (prefers-reduced-motion: reduce){.subj svg .path{stroke-dashoffset:0}}

/* Study Abroad: set apart from the exam grid, in its own band */
.abroad-wrap{max-width:1080px;margin:34px auto 18px;padding:0 24px}
.abroad-label{display:flex;align-items:center;gap:12px;margin-bottom:14px;font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.abroad-label::before,.abroad-label::after{content:"";flex:1;height:1px;background:var(--border)}
a.abroad-card{display:flex;align-items:center;gap:22px;text-decoration:none;color:var(--text);padding:26px 30px;border-radius:22px;border:1.5px solid color-mix(in srgb,var(--accent1) 45%,var(--border));background:linear-gradient(120deg,color-mix(in srgb,var(--accent1) 14%,var(--card)),color-mix(in srgb,var(--accent2) 14%,var(--card)));transition:transform .2s,box-shadow .2s}
a.abroad-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px var(--shadow-c)}
a.abroad-card .ab-ic{font-size:3rem;line-height:1;flex:none}
a.abroad-card .ab-tx{flex:1;min-width:0}
a.abroad-card h3{font-size:1.25rem;font-weight:800;margin:0 0 6px}
a.abroad-card p{font-size:.92rem;color:var(--muted);line-height:1.6;margin:0}
a.abroad-card .ab-go{flex:none;padding:10px 18px;border-radius:999px;background:var(--accent1);color:#fff;font-size:.85rem;font-weight:800;white-space:nowrap}
@media(max-width:640px){a.abroad-card{flex-direction:column;align-items:flex-start;gap:12px;padding:22px}}

/* ---- 23 Oct 2026: biology joins the picker; a little life on the landing page ---- */
.subj-row.hero-cta{grid-template-columns:repeat(6,minmax(0,1fr));max-width:700px}
.subj-row.hero-cta .subj{grid-column:span 2}
.subj-row.hero-cta .subj-bio,.subj-row.hero-cta .subj-after{grid-column:span 3}
.subj-bio{--c:var(--correct)}
.subj svg .strand{stroke-dasharray:6 5;animation:helixFlow 2.4s linear infinite}
.subj svg .strand.s2{animation-direction:reverse;stroke:color-mix(in srgb,var(--c) 55%,var(--accent1))}
.subj svg .rung{stroke:var(--c);stroke-width:2;opacity:.25;animation:rungPulse 2.4s ease-in-out infinite}
.subj svg .r2{animation-delay:.3s}.subj svg .r3{animation-delay:.6s}.subj svg .r4{animation-delay:.9s}
@keyframes helixFlow{to{stroke-dashoffset:-22}}
@keyframes rungPulse{0%,100%{opacity:.2}50%{opacity:1}}
/* subject tiles rise in one after another */
.subj-row.hero-cta .subj{animation:tileRise .6s cubic-bezier(.22,1,.36,1) both}
.subj-row.hero-cta .subj:nth-child(2){animation-delay:.08s}.subj-row.hero-cta .subj:nth-child(3){animation-delay:.16s}
.subj-row.hero-cta .subj:nth-child(4){animation-delay:.24s}.subj-row.hero-cta .subj:nth-child(5){animation-delay:.32s}
@keyframes tileRise{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
/* faint science glyphs drifting behind the hero */
.hero-glyphs{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.hero-glyphs span{position:absolute;font-size:clamp(1.6rem,3vw,2.6rem);opacity:.13;color:var(--accent1);font-weight:800;animation:glyphDrift 14s ease-in-out infinite}
.hero-glyphs .g1{left:8%;top:12%}.hero-glyphs .g2{left:22%;top:70%;animation-delay:-3s;color:var(--correct)}
.hero-glyphs .g3{left:36%;top:6%;animation-delay:-6s;color:var(--accent3)}.hero-glyphs .g4{left:62%;top:78%;animation-delay:-2s;color:var(--accent2)}
.hero-glyphs .g5{left:78%;top:10%;animation-delay:-8s}.hero-glyphs .g6{left:90%;top:62%;animation-delay:-5s;color:var(--correct)}
.hero-glyphs .g7{left:50%;top:88%;animation-delay:-9s;color:var(--accent3)}.hero-glyphs .g8{left:4%;top:48%;animation-delay:-11s;color:var(--accent2)}
@keyframes glyphDrift{0%,100%{transform:translate(0,0) rotate(-6deg)}50%{transform:translate(10px,-18px) rotate(8deg)}}
/* "three moves" strip */
.how{max-width:900px;margin:30px auto 8px;padding:0 24px;text-align:center}
.how-h{font-size:clamp(1.3rem,3vw,1.8rem);font-weight:800}
.how-h em{color:var(--accent2);font-style:italic}
.how-row{display:flex;align-items:stretch;justify-content:center;gap:10px;margin-top:20px}
.how-step{flex:1;max-width:250px;background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 16px;text-align:left;position:relative;transition:transform .25s,border-color .25s}
.how-step:hover{transform:translateY(-4px);border-color:var(--accent1)}
.how-n{display:inline-flex;width:30px;height:30px;border-radius:50%;align-items:center;justify-content:center;font-weight:900;font-size:.9rem;color:#fff;background:linear-gradient(135deg,var(--accent1),var(--accent2))}
.how-step h3{margin:10px 0 4px;font-size:1.05rem;font-weight:800}
.how-step p{margin:0;font-size:.85rem;color:var(--muted);line-height:1.55}
.how-arrow{align-self:center;color:var(--accent3);font-style:normal;font-weight:900;font-size:1.4rem}
@media (max-width:720px){.how-row{flex-direction:column;align-items:center}.how-step{max-width:380px;width:100%}.how-arrow{transform:rotate(90deg)}.hero-glyphs{display:none}}
@media (max-width:560px){.subj-row.hero-cta{grid-template-columns:1fr}.subj-row.hero-cta .subj,.subj-row.hero-cta .subj-bio,.subj-row.hero-cta .subj-after{grid-column:auto}}
@media (prefers-reduced-motion: reduce){.hero-glyphs span,.subj-row.hero-cta .subj,.subj svg .strand,.subj svg .rung{animation:none!important}.subj svg .rung{opacity:.7}}

/* ---- 23 Oct 2026 (2): PCMB in one row, "after 12" as a slim full-width bar, richer landing ---- */
.hero{padding-top:34px;max-width:1040px}
.hero::before{width:900px;height:420px;background:radial-gradient(closest-side,color-mix(in srgb,var(--accent1) 30%,transparent),transparent 70%)}
.hero h1{font-size:clamp(2.2rem,6vw,4rem);letter-spacing:-.02em}
.hero h1 em{background:linear-gradient(100deg,var(--accent1),var(--accent2) 55%,var(--correct));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero h1 em::after{display:none}
.hero-stage::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:
   radial-gradient(520px 260px at 12% 18%,color-mix(in srgb,var(--accent2) 16%,transparent),transparent 70%),
   radial-gradient(520px 280px at 90% 30%,color-mix(in srgb,var(--accent3) 15%,transparent),transparent 70%),
   linear-gradient(color-mix(in srgb,var(--border) 45%,transparent) 1px,transparent 1px) 0 0/44px 44px,
   linear-gradient(90deg,color-mix(in srgb,var(--border) 45%,transparent) 1px,transparent 1px) 0 0/44px 44px;
  -webkit-mask-image:radial-gradient(ellipse 70% 80% at 50% 38%,#000 30%,transparent 78%);mask-image:radial-gradient(ellipse 70% 80% at 50% 38%,#000 30%,transparent 78%);opacity:.8}
.subj-row.hero-cta{grid-template-columns:repeat(4,minmax(0,1fr));max-width:780px;gap:12px}
.subj-row.hero-cta .subj,.subj-row.hero-cta .subj-bio{grid-column:auto}
.subj-row.hero-cta .subj-after{grid-column:1/-1}
.subj-row.hero-cta .subj{padding:14px 10px 12px;gap:2px;border-radius:16px}
.subj-row.hero-cta .subj-ic{width:50px;height:50px;border-radius:15px;margin-bottom:5px}
.subj-row.hero-cta .subj-ic svg{width:36px;height:36px}
.subj-row.hero-cta .subj-name{font-size:1.02rem}
.subj-row.hero-cta .subj-go{margin-top:7px;padding:4px 13px;font-size:.74rem}
.subj-row.hero-cta .subj::before{top:-62px}
.subj-row.hero-cta .subj-after{flex-direction:row;justify-content:center;gap:14px;padding:9px 18px;border-radius:14px;--c:var(--accent4)}
.subj-row.hero-cta .subj-after .subj-ic{width:38px;height:38px;margin:0;border-radius:12px}
.subj-row.hero-cta .subj-after .subj-ic svg{width:26px;height:26px}
.subj-row.hero-cta .subj-after .subj-name{font-size:1rem}
.subj-row.hero-cta .subj-after .subj-meta{margin-right:auto}
.subj-row.hero-cta .subj-after .subj-go{margin:0}
.subj-row.hero-cta .subj-after::before{display:none}
@media (max-width:720px){
  .subj-row.hero-cta{grid-template-columns:repeat(2,minmax(0,1fr));max-width:420px}
  .subj-row.hero-cta .subj{display:flex;flex-direction:column;align-items:center;text-align:center;padding:14px 10px 12px;grid-template-columns:none}
  .subj-row.hero-cta .subj-ic{margin:0 0 5px;width:50px;height:50px}
  .subj-row.hero-cta .subj-name,.subj-row.hero-cta .subj-meta,.subj-row.hero-cta .subj-go{grid-column:auto;grid-row:auto}
  .subj-row.hero-cta .subj-after{flex-direction:row;text-align:left;gap:10px;padding:10px 14px}
  .subj-row.hero-cta .subj-after .subj-meta{display:none}
}
.trust{list-style:none;display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin:14px 0 0;padding:0}
.trust li{font-size:.74rem;font-weight:700;color:var(--muted);border:1px solid var(--border);background:var(--card);border-radius:999px;padding:5px 12px}
.trust li::before{content:"✓";color:var(--correct);margin-right:6px;font-weight:900}
/* chapter-name ticker */
.marq{overflow:hidden;margin:22px 0 4px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marq-track{display:flex;gap:10px;width:max-content;animation:marqMove 60s linear infinite}
.marq-track span{white-space:nowrap;font-size:.82rem;font-weight:700;color:var(--muted);border:1px solid var(--border);background:var(--card);border-radius:999px;padding:7px 16px}
.marq-track span:nth-child(4n+1){color:var(--accent1)}.marq-track span:nth-child(4n+2){color:var(--accent2)}.marq-track span:nth-child(4n+3){color:var(--accent3)}.marq-track span:nth-child(4n){color:var(--correct)}
.marq:hover .marq-track{animation-play-state:paused}
@keyframes marqMove{to{transform:translateX(-50%)}}
/* try-it card */
.tryit{max-width:1000px;margin:36px auto 10px;padding:0 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:34px;align-items:center}
.tryit-kick{display:inline-block;font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent2);border:1px solid color-mix(in srgb,var(--accent2) 45%,var(--border));border-radius:999px;padding:5px 12px}
.tryit-txt h2{font-size:clamp(1.5rem,3.6vw,2.3rem);font-weight:900;line-height:1.15;margin:14px 0 12px;letter-spacing:-.01em}
.tryit-txt h2 em{color:var(--accent1);font-style:italic}
.tryit-txt p{color:var(--muted);line-height:1.7;margin:0 0 18px}
.tryit-card{background:var(--card);border:1px solid var(--border);border-radius:18px;box-shadow:0 24px 60px color-mix(in srgb,var(--accent1) 14%,transparent);overflow:hidden}
.tryit-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--surface);border-bottom:1px solid var(--border)}
.tryit-bar i{width:10px;height:10px;border-radius:50%;background:var(--border)}
.tryit-bar i:nth-child(1){background:#ef6f6c}.tryit-bar i:nth-child(2){background:#f2c14e}.tryit-bar i:nth-child(3){background:#5fc17b}
.tryit-bar b{margin-left:10px;font-size:.76rem;color:var(--muted);font-weight:700}
.tryit-card canvas{display:block;width:100%;height:auto;background:linear-gradient(180deg,color-mix(in srgb,var(--accent1) 6%,var(--card)),var(--card))}
.tryit-ctl{display:flex;gap:18px;flex-wrap:wrap;padding:12px 16px 2px}
.tryit-ctl label{display:flex;flex-direction:column;gap:4px;font-size:.74rem;font-weight:800;color:var(--muted);flex:1;min-width:130px}
.tryit-ctl input{accent-color:var(--accent1)}
.tryit-read{margin:0;padding:6px 16px 14px;font-size:.78rem;color:var(--muted)}
.tryit-read b{color:var(--accent2)}
@media (max-width:820px){.tryit{grid-template-columns:1fr;gap:22px}}
/* closing band */
.final-band{max-width:880px;margin:30px auto 44px;padding:38px 24px;border-radius:24px;border:1px solid color-mix(in srgb,var(--accent1) 35%,var(--border));
  background:radial-gradient(500px 220px at 15% 0%,color-mix(in srgb,var(--accent1) 20%,transparent),transparent 70%),radial-gradient(500px 220px at 90% 100%,color-mix(in srgb,var(--correct) 18%,transparent),transparent 70%),var(--card)}
.final-band h2{font-size:clamp(1.6rem,4vw,2.4rem);font-weight:900;margin:0 0 8px;letter-spacing:-.01em}
.final-band h2 em{color:var(--accent2);font-style:italic}
.final-band p{color:var(--muted);margin:0 0 20px}
.stats .stat b{background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
@media (prefers-reduced-motion: reduce){.marq-track{animation:none}}

.subj-row.hero-cta .subj-after{align-items:center}
.subj-row.hero-cta .subj-after>*{margin-top:0!important;margin-bottom:0!important;line-height:1.2}
.subj-row.hero-cta .subj-after .subj-go{align-self:center}

@media (max-width:720px){.subj-row.hero-cta .subj:not(.subj-after) .subj-name,.subj-row.hero-cta .subj:not(.subj-after) .subj-meta,.subj-row.hero-cta .subj:not(.subj-after) .subj-go{align-self:center;text-align:center}
  .subj-row.hero-cta .subj-after .subj-name{align-self:center}}

/* "after 12" bar: two-line text block so Study Abroad shows on phones too */
.subj-row.hero-cta .subj-after .subj-txt{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;margin-right:auto}
.subj-row.hero-cta .subj-after .subj-meta{display:block!important;margin-right:0;font-size:.74rem}
.subj-after .abroad{color:var(--accent3);font-weight:800}
@media (max-width:720px){.subj-row.hero-cta .subj-after .subj-name{font-size:.98rem}.subj-row.hero-cta .subj-after .subj-meta{font-size:.68rem}}

/* ---- landing v2: four-subject tabs, subject panels, exams band (8 Nov 2026) ---- */
.tryit-card{--tc:var(--accent1);box-shadow:0 24px 60px color-mix(in srgb,var(--tc) 16%,transparent)}
.tt-tabs{display:flex;gap:6px;padding:10px 12px 0;background:var(--surface);overflow-x:auto;scrollbar-width:none}
.tt-tabs::-webkit-scrollbar{display:none}
.tt-tab{flex:1 0 auto;font:800 .78rem Inter,system-ui,sans-serif;padding:8px 12px;border-radius:10px 10px 0 0;border:1px solid var(--border);border-bottom:none;background:transparent;color:var(--muted);cursor:pointer;white-space:nowrap;transition:background .2s,color .2s}
.tt-tab:hover{color:var(--text)}
.tt-tab.on{background:var(--card);color:var(--tc);border-color:color-mix(in srgb,var(--tc) 50%,var(--border))}
.tryit-ctl input{accent-color:var(--tc)}
.tryit-read b{color:var(--tc)}
.tryit-card canvas{background:linear-gradient(180deg,color-mix(in srgb,var(--tc) 8%,var(--card)),var(--card))}
.tryit-read{min-height:3.2em}

.pc{max-width:1080px;margin:56px auto 10px;padding:0 24px;text-align:center}
.pc-head h2{font-size:clamp(1.5rem,3.8vw,2.4rem);font-weight:900;line-height:1.15;margin:14px 0 10px;letter-spacing:-.01em}
.pc-head h2 em{color:var(--accent2);font-style:italic}
.pc-head p{color:var(--muted);max-width:600px;margin:0 auto;line-height:1.7}
.pc-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:28px;text-align:left}
.pc-card{--c:var(--accent1);position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 20px 18px;border-radius:20px;background:var(--card);border:1px solid var(--border);color:var(--text);text-decoration:none;overflow:hidden;transition:transform .25s,border-color .25s,box-shadow .25s}
.pc-card::before{content:"";position:absolute;inset:0 0 auto 0;height:5px;background:var(--c)}
.pc-card::after{content:"";position:absolute;top:-60px;right:-60px;width:170px;height:170px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--c) 22%,transparent),transparent);pointer-events:none}
.pc-card:hover{transform:translateY(-6px);border-color:color-mix(in srgb,var(--c) 55%,var(--border));box-shadow:0 18px 40px color-mix(in srgb,var(--c) 20%,transparent)}
.pc-phy{--c:var(--accent1)}.pc-chem{--c:var(--accent2)}.pc-math{--c:var(--accent3)}.pc-bio{--c:var(--correct)}
.pc-top{display:flex;align-items:center;gap:12px;position:relative;z-index:1}
.pc-ic{width:46px;height:46px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:900;color:#fff;background:var(--c);box-shadow:0 6px 16px color-mix(in srgb,var(--c) 40%,transparent)}
.pc-top h3{margin:0;font-size:1.2rem;font-weight:900}
.pc-top small{color:var(--muted);font-weight:700;font-size:.78rem}
.pc-card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.6;position:relative;z-index:1}
.pc-chips{display:flex;flex-wrap:wrap;gap:6px;position:relative;z-index:1}
.pc-chips span{font-size:.7rem;font-weight:700;padding:4px 9px;border-radius:999px;border:1px solid color-mix(in srgb,var(--c) 40%,var(--border));color:var(--text);background:color-mix(in srgb,var(--c) 8%,var(--card))}
.pc-go{margin-top:auto;padding-top:6px;font-size:.84rem;font-weight:800;color:var(--c);position:relative;z-index:1}
.pc-card:hover .pc-go{text-decoration:underline}
@media (max-width:980px){.pc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pc-grid{grid-template-columns:1fr}.pc{margin-top:40px}}

.exm{max-width:1000px;margin:46px auto 6px;padding:0 24px;text-align:center}
.exm h2{font-size:clamp(1.3rem,3vw,1.9rem);font-weight:900;margin:0 0 20px}
.exm h2 em{color:var(--accent1);font-style:italic}
.exm-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.exm-box{background:var(--card);border:1px solid var(--border);border-radius:16px;padding:18px 14px;text-align:center}
.exm-box b{display:block;font-size:1.35rem;font-weight:900;background:linear-gradient(135deg,var(--accent1),var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.exm-sub{display:block;margin:4px 0 8px;font-size:.72rem;font-weight:800;color:var(--accent3);letter-spacing:.02em}
.exm-box p{margin:0;font-size:.82rem;color:var(--muted);line-height:1.55}
@media (max-width:820px){.exm-row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.exm-row{grid-template-columns:1fr}}

.fc-subj{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:0 0 18px}
.fc-subj a{font-size:.84rem;font-weight:800;padding:7px 15px;border-radius:999px;border:1px solid var(--border);color:var(--text);text-decoration:none;background:var(--card);transition:transform .2s,border-color .2s}
.fc-subj a:nth-child(1){border-color:var(--accent1)}.fc-subj a:nth-child(2){border-color:var(--accent2)}.fc-subj a:nth-child(3){border-color:var(--accent3)}.fc-subj a:nth-child(4){border-color:var(--correct)}
.fc-subj a:hover{transform:translateY(-2px)}
@media (prefers-reduced-motion: reduce){.pc-card,.fc-subj a{transition:none}}
@media (max-width:430px){.tt-tab{padding:8px 8px;font-size:.7rem}.tt-tabs{gap:4px;padding:10px 8px 0}}

/* ---- library v2 (8 Nov 2026): subject colour, header band, search ---- */
.lib{--sc:var(--accent1)}
.subj-tabs{--sc:var(--accent1)}
.subj-tab.on{background:var(--sc);border-color:var(--sc)}
.lib-hero{display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center;justify-content:space-between;padding:22px 24px;border-radius:20px;border:1px solid color-mix(in srgb,var(--sc) 35%,var(--border));background:radial-gradient(420px 180px at 0% 0%,color-mix(in srgb,var(--sc) 20%,transparent),transparent 70%),var(--card);margin-bottom:6px}
.lh-txt{display:flex;align-items:center;gap:14px;min-width:0}
.lh-ic{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;font-size:1.6rem;background:color-mix(in srgb,var(--sc) 18%,var(--card));border:1px solid color-mix(in srgb,var(--sc) 40%,var(--border));flex:none}
.lib-hero h2.subj-h{margin:0}
.lib-hero p{margin:3px 0 0;color:var(--muted);font-size:.92rem;line-height:1.5}
.lh-stats{display:flex;gap:18px;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.lh-stats b{font-size:1.25rem;font-weight:900;color:var(--sc);margin-right:4px}
.lh-tools{display:flex;gap:10px;flex:1 1 100%;align-items:center}
.lh-tools input{flex:1;min-width:0;padding:11px 14px;border-radius:12px;border:1px solid var(--border);background:var(--bg);color:var(--text);font:600 .9rem Inter,system-ui,sans-serif}
.lh-tools input:focus{outline:none;border-color:var(--sc);box-shadow:0 0 0 3px color-mix(in srgb,var(--sc) 20%,transparent)}
.lh-chip{padding:10px 16px;border-radius:999px;border:1px solid var(--border);background:transparent;color:var(--text);font:800 .8rem Inter,system-ui,sans-serif;cursor:pointer;white-space:nowrap}
.lh-chip[aria-pressed="true"]{background:var(--sc);border-color:var(--sc);color:#fff}
.lib-none{text-align:center;color:var(--muted);padding:40px 0}
.lib .chap{position:relative;overflow:hidden}
.lib .chap::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--sc);opacity:.75}
.lib .chap:hover{border-color:color-mix(in srgb,var(--sc) 60%,var(--border));box-shadow:0 12px 28px color-mix(in srgb,var(--sc) 16%,transparent)}
.lib .chap .num{margin-left:auto;margin-right:34px;color:var(--sc)}
.lib h3.cls{color:var(--sc)}
@media (min-width:821px){.lib-hero{flex-wrap:nowrap}.lh-tools{flex:0 0 340px}}
@media (max-width:560px){.lib-hero{padding:18px 16px}.lh-stats{gap:12px}.lh-tools{flex-wrap:wrap}.lh-chip{flex:1}}

/* ---- login v2: value panel beside the form (8 Nov 2026) ---- */
.auth-wrap{gap:48px;flex-wrap:wrap}
.auth-side{max-width:420px;flex:1 1 320px}
.auth-side h1{font-size:clamp(1.6rem,3.4vw,2.3rem);font-weight:900;line-height:1.15;margin:14px 0 16px;letter-spacing:-.01em}
.auth-side h1 em{color:var(--accent2);font-style:italic}
.auth-side ul{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:9px;color:var(--muted);font-size:.94rem}
.auth-side li::before{content:"✓";color:var(--correct);font-weight:900;margin-right:9px}
.auth-side li b{color:var(--text)}
.auth-subj{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.auth-subj span{font-size:.76rem;font-weight:800;padding:5px 12px;border-radius:999px;border:1px solid var(--c);color:var(--text);background:color-mix(in srgb,var(--c) 10%,var(--card))}
.auth-lib{font-size:.86rem;font-weight:800;color:var(--accent1);text-decoration:none}
.auth-lib:hover{text-decoration:underline}
@media (max-width:760px){.auth-side{display:none}}

/* ---- inner pages: small shared touches ---- */
.ex-subj{display:inline-flex;gap:4px;margin:8px 0 2px}
.ex-subj i{font-style:normal;font-size:.66rem;font-weight:900;padding:2px 7px;border-radius:6px;color:#fff}
.back-lnk{display:inline-block;margin:18px 24px 0;font-size:.84rem;font-weight:800;color:var(--accent1);text-decoration:none}
.back-lnk:hover{text-decoration:underline}
.lib [hidden],.lib-none[hidden]{display:none!important}
@media (max-width:560px){.lh-tools input{flex:1 1 100%}.lh-tools .lh-chip{flex:1 1 100%}}
@media (max-width:560px){.hero-badge{font-size:.66rem;letter-spacing:.03em;padding:6px 12px}.hero-badge .hb-cls{display:none}}

/* reader: labelled way out of a chapter (8 Nov 2026) */
.reader-nav{position:fixed;bottom:16px;left:16px;z-index:1000;display:flex;gap:8px}
.reader-nav a,.reader-nav .reader-back{position:static;width:auto;height:38px;padding:0 14px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;letter-spacing:.01em;text-decoration:none;white-space:nowrap;background:var(--surface);color:var(--text);border:1px solid var(--border);box-shadow:0 4px 14px var(--shadow-c);transition:.15s}
.reader-nav a:hover{transform:translateY(-2px);border-color:var(--accent1)}
.reader-nav .reader-home{background:var(--accent1);border-color:var(--accent1);color:#fff}
@media (max-width:560px){.reader-nav{bottom:12px;left:10px;gap:6px}.reader-nav a{height:34px;padding:0 11px;font-size:.74rem}}

/* ---- one-line "three moves" strip under the hero; cursive try-it heading (10 Nov 2026) ---- */
.moves{max-width:1080px;margin:6px auto 18px;padding:0 24px;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.moves::-webkit-scrollbar{display:none}
.mv-lead{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);flex:none}
.mv{display:inline-flex;align-items:center;gap:8px;flex:none;font-weight:800;font-size:.92rem;padding:7px 14px 7px 8px;border-radius:999px;border:1px solid var(--border);background:var(--card)}
.mv b{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;font-size:.78rem;color:#fff;background:linear-gradient(135deg,var(--accent1),var(--accent2))}
.mv small{font-weight:600;font-size:.76rem;color:var(--muted)}
.moves i{font-style:normal;font-weight:900;color:var(--accent3);flex:none}
@media (max-width:860px){.mv small{display:none}.mv-lead{display:none}.moves{padding:0 16px;gap:8px}}
.tryit-txt h2{font-family:'Caveat','Segoe Script','Bradley Hand','Comic Sans MS',cursive;font-weight:700;font-size:clamp(2.3rem,5.4vw,3.5rem);line-height:1.05;letter-spacing:0}
.tryit-txt h2 em{font-style:normal}
.moves{margin:12px auto 0;padding-bottom:2px}
.moves{justify-content:safe center}
@media (max-width:1180px){.mv small{display:none}}
@media (max-width:1000px){.mv-lead{display:none}}
.exm h2{font-family:'Caveat','Segoe Script','Bradley Hand','Comic Sans MS',cursive;font-weight:700;font-size:clamp(2rem,4.6vw,3rem);line-height:1.1;letter-spacing:0}
.exm h2 em{font-style:normal}