/* Nation1, v3: a product, not a poster. White, one brand violet, soft elevation,
   real app chrome around the generator. Taken from Mobbin: Canva for Education
   (rounded tinted hero panel with a device mockup, the editor's app bar, side
   panel, gray canvas and status bar), Uxcel (lavender panel with stacked white
   cards), Loom and Deel (bordered cards with tinted media areas), and on phones
   the bottom sheet of Speak/Forest and the snap carousels of Speechify/Quizlet. */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/jakarta-normal-latin.woff2) format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: italic;
  font-weight: 200 800;
  font-display: swap;
  src: url(/fonts/jakarta-italic-latin.woff2) format("woff2");
}

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f6f6fb;
  --surface-2: #eeeef8;
  --text: #101223;
  --muted: #5f6378;
  --border: #e4e5f0;
  --border-strong: #cfd1e2;
  --brand: #5b3df5;
  --brand-dark: #4a2fd6;
  --brand-soft: #ebe6ff;
  --brand-tint: #f4f1ff;
  --brand-ink: #3b259e;
  --math: #2d6bff;
  --math-tint: #e7efff;
  --handwriting: #e0840a;
  --handwriting-tint: #fff2dc;
  --english: #0f9d6e;
  --english-tint: #e1f6ec;
  --success: #16a34a;
  --sans: "Plus Jakarta Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --shadow-sm: 0 1px 2px rgba(16, 18, 35, 0.06), 0 1px 1px rgba(16, 18, 35, 0.04);
  --shadow-md: 0 2px 6px rgba(16, 18, 35, 0.05), 0 10px 28px rgba(16, 18, 35, 0.09);
  --shadow-lg: 0 10px 20px rgba(16, 18, 35, 0.06), 0 34px 70px rgba(16, 18, 35, 0.16);
  --gutter: 18px;
}
@media (min-width: 720px) { :root { --gutter: 32px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); color: var(--text); font: 16px/1.6 var(--sans); overflow-x: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 12px; background: var(--text); color: #fff; padding: 8px 12px; z-index: 100; border-radius: 8px; }
.wrap { max-width: 1200px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

h1, h2, h3 { font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
h1 { font-size: clamp(34px, 5vw, 58px); letter-spacing: -0.028em; }
h2 { font-size: clamp(26px, 3vw, 36px); }
h3 { font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; }
.dek, .lede { font-size: clamp(17px, 1.4vw, 19px); line-height: 1.55; color: var(--muted); margin: 14px 0 0; max-width: 40em; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 16px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); border: 1px solid rgba(91, 61, 245, 0.18); color: var(--brand-ink); font-size: 13px; font-weight: 700; }
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 22px; }
.section-head p { margin: 0; color: var(--muted); max-width: 36em; }

/* ---------- buttons, chips, switches ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 700 15px/1 var(--sans); padding: 12px 18px; border-radius: 10px; border: 1px solid var(--border-strong); background: #fff; color: var(--text); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease; }
.btn:hover { background: var(--surface); border-color: #b9bcd3; }
.btn:focus-visible { outline: 3px solid rgba(91, 61, 245, 0.35); outline-offset: 2px; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 1px 2px rgba(91, 61, 245, 0.3); }
.btn-primary:hover { background: var(--brand-dark); border-color: var(--brand-dark); color: #fff; }
.btn-secondary { background: #fff; }
.btn-lg { padding: 15px 22px; font-size: 16px; border-radius: 12px; }
.btn-sm { padding: 9px 13px; font-size: 14px; }
.btn-bar { background: rgba(255, 255, 255, 0.14); border-color: rgba(255, 255, 255, 0.28); color: #fff; }
.btn-bar:hover { background: rgba(255, 255, 255, 0.24); border-color: rgba(255, 255, 255, 0.4); }
.btn-bar-primary { background: #fff; border-color: #fff; color: var(--brand-ink); }
.btn-bar-primary:hover { background: #f1edff; }

.chip, .pill { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1 var(--sans); padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s; }
.chip-sm { padding: 6px 10px; font-size: 12.5px; }
.chip-math { background: var(--math-tint); border-color: transparent; color: #1c48b8; }
.chip-handwriting { background: var(--handwriting-tint); border-color: transparent; color: #9a5600; }
.chip-english { background: var(--english-tint); border-color: transparent; color: #0a6b4b; }
.pill:hover { border-color: var(--border-strong); background: var(--surface); }
.pill[aria-current="page"] { background: var(--brand-tint); border-color: rgba(91, 61, 245, 0.3); color: var(--brand-ink); }

.switch { display: inline-flex; align-items: center; gap: 12px; cursor: pointer; font-weight: 600; font-size: 14.5px; user-select: none; position: relative; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track { position: relative; width: 44px; height: 26px; border-radius: 999px; background: #cfd1e2; transition: background 0.15s; flex: none; }
.switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25); transition: transform 0.18s ease; }
.switch input:checked + .switch-track { background: var(--brand); }
.switch input:checked + .switch-track::after { transform: translateX(18px); }
.switch input:focus-visible + .switch-track { outline: 3px solid rgba(91, 61, 245, 0.35); outline-offset: 2px; }

/* ---------- header ---------- */
.site-head { border-bottom: 1px solid var(--border); background: #fff; }
.head-row { display: flex; align-items: center; gap: 24px; min-height: 68px; }
.logo { display: inline-flex; align-items: center; gap: 7px; text-decoration: none; font-weight: 800; font-size: 22px; letter-spacing: -0.03em; }
.logo-one { display: block; width: 30px; height: 30px; border-radius: 8px; }
.site-nav { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin-left: 8px; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav .pill { border-color: transparent; background: transparent; padding: 9px 12px; font-size: 14.5px; color: var(--muted); }
.site-nav .pill:hover { background: var(--surface); color: var(--text); }
.site-nav .pill[aria-current="page"] { background: var(--brand-tint); color: var(--brand-ink); border-color: transparent; }
.head-cta { margin-left: auto; }
@media (max-width: 719px) {
  .head-row { flex-wrap: wrap; gap: 10px 16px; padding-top: 12px; padding-bottom: 12px; }
  .head-cta { display: none; }
  .site-nav { order: 3; width: calc(100% + 2 * var(--gutter)); margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter) 2px; }
}

/* ---------- hero (home) ---------- */
.hero { padding: 28px 0 10px; }
@media (min-width: 1000px) { .hero { padding: 40px 0 16px; } }
.hero-panel { position: relative; display: grid; gap: 28px; padding: 36px 24px 28px; border-radius: var(--r-xl); background: linear-gradient(135deg, #efeaff 0%, #e3dcff 100%); overflow: hidden; }
.hero-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 100% 0%, rgba(255, 255, 255, 0.55), transparent 60%); pointer-events: none; }
.hero-panel > * { position: relative; }
@media (min-width: 1000px) { .hero-panel { grid-template-columns: 1fr 1.1fr; align-items: center; gap: 40px; padding: 56px 56px 56px 64px; min-height: 560px; } }
.hero h1 { max-width: 9em; }
.hero .lede { color: #3f3a66; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; font-weight: 600; color: #4b4572; }
.hero-facts li { display: inline-flex; align-items: center; gap: 7px; }
.hero-facts li::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); }

/* the browser-window mockup of the generator */
.hero-mock { display: flex; justify-content: center; }
.mock-window { width: 100%; max-width: 620px; background: #fff; border-radius: 14px; box-shadow: var(--shadow-lg); border: 1px solid rgba(16, 18, 35, 0.08); overflow: hidden; }
.mock-chrome { display: flex; align-items: center; gap: 6px; padding: 10px 12px; background: #f3f3f8; border-bottom: 1px solid var(--border); }
.mock-chrome span { width: 10px; height: 10px; border-radius: 50%; background: #d6d7e3; }
.mock-url { margin-left: 10px; flex: 1; font-size: 12px; color: var(--muted); background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 14px; background: linear-gradient(90deg, var(--brand), #7c5cff); color: #fff; font-size: 13.5px; }
.mock-bar b { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mock-btn { font: 700 12.5px/1 var(--sans); padding: 8px 11px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.35); background: rgba(255, 255, 255, 0.16); color: #fff; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;  white-space: nowrap; flex: none; }
.mock-btn svg { width: 14px; height: 14px; }
.mock-btn:hover { background: rgba(255, 255, 255, 0.28); }
.mock-pill { font-size: 12.5px; font-weight: 700; padding: 8px 11px; border-radius: 8px; background: #fff; color: var(--brand-ink); white-space: nowrap; flex: none; }
.mock-body { display: grid; grid-template-columns: 150px 1fr; }
@media (max-width: 560px) { .mock-body { grid-template-columns: 1fr; } .mock-side { display: none; } }
.mock-side { border-right: 1px solid var(--border); padding: 14px 12px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.mock-field label { display: block; font-size: 10.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px; }
.mock-field span { display: block; font-size: 12px; font-weight: 600; padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: #fff; }
.mock-toggle { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; margin-top: 4px; }
.mock-toggle i { width: 28px; height: 16px; border-radius: 999px; background: var(--brand); position: relative; }
.mock-toggle i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; }
.mock-canvas { background: var(--surface); padding: 18px 16px 20px; display: flex; justify-content: center; }

/* the live sheet */
.live { width: 100%; max-width: 400px; }
.live-paper { background: #fff; color: #17192b; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-md); padding: 18px 20px 14px; font-family: "Andika", var(--sans); }
.live-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; border-bottom: 2px solid #17192b; padding-bottom: 7px; margin-bottom: 12px; }
.live-head b { font: 800 17px/1.1 var(--sans); letter-spacing: -0.02em; }
.live-head span { font-size: 11px; color: #666; white-space: nowrap; }
.live-head span i { display: inline-block; width: 60px; border-bottom: 1px solid #333; height: 0.8em; margin-left: 4px; }
.live-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 9px 16px; font-size: 15px; }
.live-grid li { display: flex; align-items: center; gap: 7px; }
.live-grid .n { font-size: 11px; color: #7a7f8c; font-weight: 700; min-width: 1.4em; }
.live-q { display: inline-block; min-width: 4.2em; transform-origin: center; }
.live-q.roll { animation: roll 0.42s ease; }
@keyframes roll { 0% { transform: rotateX(0); } 45% { transform: rotateX(90deg); opacity: 0.2; } 55% { transform: rotateX(-90deg); opacity: 0.2; } 100% { transform: rotateX(0); opacity: 1; } }
.live-grid i { flex: 1; border-bottom: 1.5px solid #a5a9b3; height: 1em; }
.live-foot { display: flex; justify-content: space-between; font-size: 9.5px; color: #9aa0ab; border-top: 1px solid #e5e5e5; margin-top: 12px; padding-top: 5px; }
.live-key, .live-badge { display: none; }

/* ---------- subject cards ---------- */
.subjects { padding-top: 48px; padding-bottom: 8px; }
.tiles { display: grid; gap: 18px; }
@media (min-width: 720px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s; }
.tile:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); border-color: var(--border-strong); }
.tile-fan { order: -1; position: relative; height: 190px; overflow: hidden; }
.tile-math .tile-fan { background: var(--math-tint); }
.tile-handwriting .tile-fan { background: var(--handwriting-tint); }
.tile-english .tile-fan { background: var(--english-tint); }
.tile-fan img { position: absolute; width: 150px; border: 1px solid var(--border); border-radius: 6px; box-shadow: var(--shadow-md); background: #fff; transition: transform 0.3s ease; }
.tile-fan img:nth-child(1) { left: 8%; top: 34px; transform: rotate(-8deg); }
.tile-fan img:nth-child(2) { left: 34%; top: 20px; transform: rotate(0deg); z-index: 1; }
.tile-fan img:nth-child(3) { left: 60%; top: 36px; transform: rotate(8deg); }
.tile:hover .tile-fan img:nth-child(1) { transform: rotate(-11deg) translateY(-6px); }
.tile:hover .tile-fan img:nth-child(2) { transform: translateY(-10px); }
.tile:hover .tile-fan img:nth-child(3) { transform: rotate(11deg) translateY(-6px); }
.tile-kicker { font-size: 12.5px; font-weight: 700; color: var(--muted); margin: 20px 22px 0; }
.tile-name { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 4px 22px 8px; }
.tile-desc { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 22px; }
.tile-cta { margin: 16px 22px 22px; font-weight: 700; font-size: 14.5px; display: inline-flex; align-items: center; gap: 6px; color: var(--brand-ink); }
.tile-cta svg { width: 16px; height: 16px; }
@media (max-width: 719px) {
  .tiles { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
  .tiles::-webkit-scrollbar { display: none; }
  .tile { flex: 0 0 82%; scroll-snap-align: start; }
}

/* ---------- worksheet cards ---------- */
.block { padding-top: 44px; padding-bottom: 8px; }
.tgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
@media (min-width: 720px) { .tgrid { grid-template-columns: repeat(3, 1fr); gap: 24px 20px; } }
@media (min-width: 1000px) { .tgrid { grid-template-columns: repeat(4, 1fr); } }
.tcard { display: flex; flex-direction: column; gap: 10px; text-decoration: none; color: var(--text); }
.tcard-paper { display: block; aspect-ratio: 8.5 / 11; background: #fff; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s; }
.tcard-paper img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.tcard:hover .tcard-paper { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--border-strong); }
.tcard:focus-visible { outline: 3px solid rgba(91, 61, 245, 0.35); outline-offset: 4px; border-radius: 10px; }
.tcard-body { display: flex; flex-direction: column; gap: 3px; }
.tcard-name { font-size: 15.5px; font-weight: 700; line-height: 1.3; }
.tcard-grade { font-size: 13px; color: var(--muted); }
@media (max-width: 719px) {
  .tgrid.scroll { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 14px; scrollbar-width: none; }
  .tgrid.scroll::-webkit-scrollbar { display: none; }
  .tgrid.scroll .tcard { flex: 0 0 46%; scroll-snap-align: start; }
}
.tgroup { margin: 0 0 36px; }
.tgroup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin: 0 0 14px; }
.tgroup-head h2, .tgroup-head h3 { font-size: 20px; }
.tgroup-head .count { font-size: 13px; color: var(--muted); font-weight: 600; white-space: nowrap; }

/* ---------- how it works ---------- */
.steps { padding-top: 36px; padding-bottom: 64px; }
.steps-grid { display: grid; gap: 16px; }
@media (min-width: 720px) { .steps-grid { grid-template-columns: repeat(3, 1fr); } }
.step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 22px 24px; }
.step-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand); color: #fff; font-weight: 800; font-size: 15px; margin-bottom: 14px; }
.step h3 { margin: 0 0 6px; }
.step p { margin: 0; color: var(--muted); font-size: 15px; }

/* ---------- category hero ---------- */
.cat-hero { margin: 28px 0 36px; padding: 36px 24px; border-radius: var(--r-xl); }
@media (min-width: 1000px) { .cat-hero { padding: 48px 56px; } }
.cat-math { background: var(--math-tint); }
.cat-handwriting { background: var(--handwriting-tint); }
.cat-english { background: var(--english-tint); }
.cat-hero .dek { color: #3d4160; }
.cat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.cat-chips a { background: rgba(255, 255, 255, 0.85); border-color: transparent; }
.cat-chips a:hover { background: #fff; border-color: var(--border-strong); }
@media (max-width: 719px) { .cat-chips { flex-wrap: nowrap; overflow-x: auto; margin: 22px -24px 0; padding: 0 24px 4px; scrollbar-width: none; } .cat-chips::-webkit-scrollbar { display: none; } }
.crumbs { display: flex; gap: 8px; font-size: 13.5px; color: var(--muted); margin-bottom: 16px; font-weight: 600; }
.crumbs a { color: var(--muted); text-decoration: none; }
.crumbs a:hover { color: var(--text); text-decoration: underline; }
.page-head { padding: 28px 0 24px; }

/* ---------- tool page: the editor ---------- */
.tool-page { padding-top: 24px; }
.tool-head { max-width: 860px; margin-bottom: 24px; }
.tool-head h1 { font-size: clamp(30px, 3.8vw, 44px); margin-top: 14px; }
.tool { position: relative; margin: 0 calc(-1 * var(--gutter)); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--surface); }
@media (min-width: 1240px) { .tool { margin: 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-md); } }
.tool-bar { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: linear-gradient(90deg, var(--brand), #7c5cff); color: #fff; }
.tool-title { flex: 1; min-width: 0; text-align: center; line-height: 1.2; }
.tool-title b { display: block; font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tool-title span { font-size: 12px; opacity: 0.85; }
.tool-body { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1000px) { .tool-body { grid-template-columns: 300px minmax(0, 1fr); } }
.tool-opts { padding: 18px var(--gutter) 22px; background: #fff; }
@media (min-width: 1000px) { .tool-opts { border-right: 1px solid var(--border); padding: 20px 22px 24px; } }
.opts-head { display: none; }
.opts-label { margin: 0 0 14px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.field { margin: 0 0 14px; }
.field[hidden] { display: none; }
.field label { display: block; font-size: 13px; font-weight: 700; margin: 0 0 6px; }
.field select, .field input, .field textarea { width: 100%; font: 500 14.5px/1.35 var(--sans); padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--r-sm); background: #fff; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6378' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: calc(100% - 12px) 50%; padding-right: 34px; }
.field textarea { resize: vertical; min-height: 110px; }
.field select:hover, .field input:hover, .field textarea:hover { border-color: #b4b7cf; }
.field select:focus, .field input:focus, .field textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(91, 61, 245, 0.18); }
.opts-note, .opts-none { font-size: 13px; color: var(--muted); line-height: 1.45; margin: 14px 0 0; }
.opts-key { margin: 6px 0 2px; }
.tool-stage { padding: 22px var(--gutter) 26px; min-width: 0; }
@media (min-width: 1000px) { .tool-stage { padding: 28px 32px 30px; } }
.ws-scaler { width: 100%; max-width: 816px; margin: 0 auto; overflow: hidden; }
.ws-print-area .ws-page { border: 1px solid var(--border); border-radius: 4px; box-shadow: var(--shadow-md) !important; }
.ws-print-area.shuffle { animation: shuffle 0.45s ease; }
@keyframes shuffle { 0% { opacity: 0.4; } 100% { opacity: 1; } }
.tool-status { display: flex; align-items: center; gap: 18px; padding: 9px 16px; background: #fff; border-top: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--muted); }
.tool-status span + span::before { content: "\00b7"; margin-right: 18px; color: var(--border-strong); }
.drawer-backdrop { display: none; }
.mobile-bar { display: none; }
.tool-text { display: grid; gap: 16px; margin: 32px 0 0; }
@media (min-width: 900px) { .tool-text { grid-template-columns: repeat(3, 1fr); } }
.note { border: 1px solid var(--border); border-radius: var(--r-lg); padding: 22px 22px 24px; background: #fff; }
.note h2 { font-size: 18px; margin: 0 0 8px; }
.note p { margin: 0; font-size: 15px; line-height: 1.55; color: #3d4160; }
.note-yellow { background: var(--handwriting-tint); border-color: transparent; }
.note-blue { background: var(--math-tint); border-color: transparent; }
.note-lilac { background: var(--brand-tint); border-color: transparent; }
.related { margin: 44px 0 0; }

/* phones: the settings become a bottom sheet, the actions a bar */
@media (max-width: 999px) {
  body.has-bar { padding-bottom: 86px; }
  .tool-bar { display: none; }
  .tool-status { display: none; }
  .tool-opts { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; max-height: 84vh; overflow: auto; border-radius: 20px 20px 0 0; box-shadow: 0 -10px 40px rgba(16, 18, 35, 0.22); transform: translateY(104%); transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1); padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
  .tool-opts.open { transform: none; }
  .opts-head { display: flex; align-items: center; justify-content: space-between; margin: 6px 0 14px; font-size: 18px; font-weight: 800; }
  .opts-head::before { content: ""; position: absolute; top: 8px; left: 50%; width: 40px; height: 5px; border-radius: 3px; background: var(--border-strong); transform: translateX(-50%); }
  .opts-label { display: none; }
  .drawer-backdrop { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(16, 18, 35, 0.45); opacity: 0; pointer-events: none; transition: opacity 0.3s; }
  .drawer-backdrop[hidden] { display: block; }
  body.drawer-open .drawer-backdrop { opacity: 1; pointer-events: auto; }
  body.drawer-open { overflow: hidden; }
  .mobile-bar { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 8px; position: fixed; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 50; padding: 8px; background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg); }
  .mobile-bar .btn { padding: 12px 8px; font-size: 14px; }
  .tool-stage { padding: 16px 12px 22px; }
}
.shot .mobile-bar, .shot .drawer-backdrop { display: none !important; }

/* ---------- prose pages ---------- */
.post { padding: 28px 0 60px; }
.prose { font-size: 17px; line-height: 1.65; }
.prose h2 { font-size: 24px; margin: 1.6em 0 0.5em; }
.prose p { margin: 0 0 1em; }
.prose a { color: var(--brand-ink); }
.notfound { padding: 80px 0 100px; }

/* ---------- footer ---------- */
.site-foot { margin-top: 60px; background: var(--surface); border-top: 1px solid var(--border); padding: 40px 0 28px; color: var(--muted); font-size: 14px; }
.foot-grid { display: grid; gap: 26px; }
@media (min-width: 720px) { .foot-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 36px; } }
.foot-mission { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; color: var(--text); max-width: 18em; }
.foot-small { margin: 10px 0 0; max-width: 30em; }
.foot-col { display: flex; flex-direction: column; gap: 8px; }
.foot-col a { color: var(--muted); text-decoration: none; }
.foot-col a:hover { color: var(--text); text-decoration: underline; }
.foot-label { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text); }
.foot-wordmark { display: none; }
.foot-note { margin: 30px 0 0; padding-top: 16px; border-top: 1px solid var(--border); font-size: 13px; }
.foot-note a { color: inherit; }

/* ---------- reveal on scroll ---------- */
.js [data-reveal] { opacity: 0; transform: translateY(12px); transition: opacity 0.5s ease, transform 0.5s ease; transition-delay: calc(var(--i, 0) * 50ms); }
.js [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .live-q.roll, .ws-print-area.shuffle { animation: none !important; }
}

/* ======================================================================
   v4: a world around the product. Floating classroom objects with parallax,
   notebook-paper band, patterned subject panels, navy footer, load
   choreography, marker highlights, a phone tab bar. */

/* floating objects */
.art-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.art-pos { position: absolute; display: block; transform: translate3d(0, var(--py, 0px), 0); will-change: transform; }
.art { display: block; width: 100%; height: 100%; font-family: var(--sans); transform: rotate(var(--r, 0deg)); animation: floaty var(--dur, 6s) ease-in-out var(--delay, 0s) infinite alternate; }
@keyframes floaty { from { transform: translateY(0) rotate(var(--r, 0deg)); } to { transform: translateY(-14px) rotate(calc(var(--r, 0deg) + 4deg)); } }

/* hero: mesh gradient + grid, text and mockup above the objects */
.hero-panel { background: radial-gradient(60% 70% at 88% 8%, #d6c8ff 0%, rgba(214, 200, 255, 0) 60%), radial-gradient(45% 55% at 8% 95%, #ffe4ee 0%, rgba(255, 228, 238, 0) 60%), linear-gradient(135deg, #f2eeff 0%, #e6dfff 100%); }
.hero-panel::before { background: linear-gradient(rgba(91, 61, 245, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 61, 245, 0.1) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%); }
.hero-panel > .art-field { position: absolute; }
.hero-text, .hero-mock { z-index: 1; }
.hero-text { padding: 8px 0; }

/* load choreography */
.js .hero-text > * { opacity: 0; animation: rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
.js .hero-text > :nth-child(1) { animation-delay: 0.05s; }
.js .hero-text > :nth-child(2) { animation-delay: 0.15s; }
.js .hero-text > :nth-child(3) { animation-delay: 0.25s; }
.js .hero-text > :nth-child(4) { animation-delay: 0.35s; }
.js .hero-text > :nth-child(5) { animation-delay: 0.45s; }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.js .mock-window { opacity: 0; animation: popin 0.8s 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes popin { from { opacity: 0; transform: translateY(26px) scale(0.96); } to { opacity: 1; transform: none; } }
.js .mock-side { animation: slidein 0.6s 0.75s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes slidein { from { transform: translateX(-18px); opacity: 0; } to { transform: none; opacity: 1; } }
.js .live-paper { animation: print 0.9s 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes print { from { transform: translateY(-30px); opacity: 0; clip-path: inset(0 0 100% 0); } 55% { opacity: 1; clip-path: inset(0 0 0 0); } to { transform: none; opacity: 1; clip-path: inset(0 0 0 0); } }

/* marker highlight on headings */
mark.hl { background: linear-gradient(120deg, #ffe57a, #ffd34d) no-repeat 0 64% / 0% 42%; color: inherit; padding: 0 0.06em; margin: 0 -0.06em; border-radius: 3px; transition: background-size 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.25s; }
.in mark.hl, html:not(.js) mark.hl { background-size: 100% 42%; }
.js mark.hl-now { animation: sweep 0.8s 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) forwards; }
@keyframes sweep { to { background-size: 100% 42%; } }

/* subject panels: pattern + objects */
.cat-hero { position: relative; overflow: hidden; }
.cat-hero > * { position: relative; z-index: 1; }
.cat-hero > .art-field { position: absolute; z-index: 0; }
.cat-hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cat-math::before { background-image: linear-gradient(rgba(45, 107, 255, 0.11) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 107, 255, 0.11) 1px, transparent 1px); background-size: 26px 26px; }
.cat-handwriting::before { background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(224, 132, 10, 0.22) 27px 28px, transparent 28px 41px, rgba(224, 132, 10, 0.1) 41px 42px); }
.cat-english::before { background-image: radial-gradient(rgba(15, 157, 110, 0.2) 1.4px, transparent 1.4px); background-size: 18px 18px; }
.cat-hero h1 { max-width: 15em; }
.cat-hero .dek { max-width: 34em; }

/* notebook-paper band for the steps */
.steps-band { position: relative; margin-top: 44px; padding: 52px 0 60px; background-color: #fff; background-image: repeating-linear-gradient(180deg, transparent 0 31px, #dbe3ff 31px 32px); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); overflow: hidden; }
.steps-band::before { content: ""; position: absolute; top: 0; bottom: 0; left: max(22px, calc(50% - 600px + 14px)); width: 2px; background: #ffb3c7; }
.steps-band .steps { padding-top: 0; padding-bottom: 0; }
.steps-band .step { background: rgba(255, 255, 255, 0.92); box-shadow: var(--shadow-sm); }

/* cards: a touch of 3D under the mouse */
.tgrid, .tiles { perspective: 1000px; }
.tcard-paper, .tile { transform-style: preserve-3d; }

/* footer: navy, with a pencil in the corner */
.site-foot { position: relative; overflow: hidden; background: #14162b; color: #c9cbe0; border-top: 0; }
.site-foot .wrap { position: relative; z-index: 1; }
.site-foot .logo { color: #fff; }
.site-foot .foot-small { color: #b4b7d0; }
.site-foot .foot-label { color: #fff; }
.site-foot .foot-col a { color: #c9cbe0; }
.site-foot .foot-col a:hover { color: #fff; }
.site-foot .foot-note { border-top-color: rgba(255, 255, 255, 0.14); color: #9a9db8; }
.site-foot::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 28px 28px; pointer-events: none; }
.art-foot { z-index: 0; }

/* phones: a tab bar instead of the top navigation */
.tabbar { display: none; }
@media (max-width: 719px) {
  body.has-tabs { padding-bottom: 78px; }
  body.has-tabs .site-nav { display: none; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--border); padding: 6px 8px calc(8px + env(safe-area-inset-bottom)); }
  .tabbar a { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 6px; border-radius: 12px; font-size: 11px; font-weight: 700; color: var(--muted); text-decoration: none; }
  .tabbar a svg { width: 22px; height: 22px; }
  .tabbar a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-tint); }
}

@media (prefers-reduced-motion: reduce) {
  .art, .js .hero-text > *, .js .mock-window, .js .mock-side, .js .live-paper, .js mark.hl-now { animation: none !important; opacity: 1 !important; transform: none !important; clip-path: none !important; }
  mark.hl { background-size: 100% 42%; transition: none; }
  .art-pos { transform: none !important; }
}

/* v4b: separate object layouts for desktop and phones; phone mockup without the
   side panel; the footer objects only on desktop. */
@media (max-width: 719px) {
  .art-desk { display: none; }
  .art-pos { width: auto; max-width: none; }
  .mock-side { display: none; }
  .mock-body { grid-template-columns: 1fr; }
}
@media (min-width: 720px) { .art-mob { display: none; } }

/* The hero column must never grow to the mockup's min-content width (the
   nowrap bar stretched it past the phone viewport and clipped the lede). */
.hero-panel { grid-template-columns: minmax(0, 1fr); }
.hero-panel > * { min-width: 0; }
@media (min-width: 1000px) { .hero-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
@media (max-width: 560px) { .mock-bar b { display: none; } .mock-bar { justify-content: space-between; } }

/* ======================================================================
   v5: the world continues under the hero. A fixed wash of colour behind every
   page, full-bleed tinted bands for the home sections (each subject in its own
   paper), objects in the page margins on wide screens. */

/* prose pages: air between the title and the first paragraph */
.post h1 { margin-bottom: 22px; }
.prose > :first-child { margin-top: 0; }

/* the wash: three soft blobs and a faded grid, fixed, drifting slowly */
.world { position: fixed; left: 0; right: 0; top: -80px; bottom: -80px; z-index: -1; pointer-events: none; background: radial-gradient(760px 520px at 6% 16%, rgba(91, 61, 245, 0.11), transparent 66%), radial-gradient(680px 560px at 96% 56%, rgba(224, 132, 10, 0.1), transparent 66%), radial-gradient(620px 460px at 42% 108%, rgba(15, 157, 110, 0.1), transparent 66%); }
.world::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(91, 61, 245, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 61, 245, 0.07) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(85% 85% at 50% 50%, #000 0%, transparent 78%); mask-image: radial-gradient(85% 85% at 50% 50%, #000 0%, transparent 78%); }
.js .world { animation: drift 26s ease-in-out infinite alternate; }
@keyframes drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(0, 60px, 0); } }
.site-head { position: relative; z-index: 2; }

/* bands */
.band { position: relative; overflow: hidden; }
.band > .wrap { position: relative; z-index: 1; }
.band-art { z-index: 0; }
.band::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.band-brand { margin-top: 48px; padding-bottom: 40px; background: linear-gradient(180deg, #f3f0ff 0%, #ebe5ff 100%); }
.band-brand::before { background-image: linear-gradient(rgba(91, 61, 245, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 61, 245, 0.09) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 90% at 50% 50%, #000 30%, transparent 85%); mask-image: radial-gradient(70% 90% at 50% 50%, #000 30%, transparent 85%); }
.band-math { padding-bottom: 20px; background: #f1f5ff; }
.band-math::before { background-image: linear-gradient(rgba(45, 107, 255, 0.09) 1px, transparent 1px), linear-gradient(90deg, rgba(45, 107, 255, 0.09) 1px, transparent 1px); background-size: 26px 26px; }
.band-handwriting { padding-bottom: 20px; background: #fff7e8; }
.band-handwriting::before { background-image: repeating-linear-gradient(180deg, transparent 0 27px, rgba(224, 132, 10, 0.16) 27px 28px, transparent 28px 41px, rgba(224, 132, 10, 0.07) 41px 42px); }
.band-english { padding-bottom: 20px; background: #eef9f3; }
.band-english::before { background-image: radial-gradient(rgba(15, 157, 110, 0.18) 1.4px, transparent 1.4px); background-size: 18px 18px; }
.band .tgroup:last-child { margin-bottom: 24px; }
.band .tgroup-head .count, .band .section-head p { color: #4b4a66; }
.band .tcard-paper { box-shadow: var(--shadow-md); }
.band-brand + .band, .band-math + .band, .band-handwriting + .band { border-top: 1px solid rgba(20, 22, 43, 0.06); }
.band-english + .steps-band { margin-top: 0; border-top: 1px solid rgba(20, 22, 43, 0.06); }
.band-canvas .subjects { padding-bottom: 12px; }

/* margin objects only where the margins exist */
.art-wide { display: none; }
@media (min-width: 1600px) { .art-wide { display: block; } }

@media (prefers-reduced-motion: reduce) { .js .world { animation: none; } }

/* ======================================================================
   v6: the blog. Index: a tinted panel, one featured guide (text left, picture
   right), a grid of cards. Article: subject-tinted head panel with the subject's
   objects, a wide cover, the prose with a contents list and a generator card
   beside it (the side column scrolls with the page, nothing sticky). */
.head-blog { display: none; }
@media (max-width: 719px) {
  body.has-tabs .head-blog { display: inline-flex; margin-left: auto; align-items: center; padding: 8px 13px; border-radius: 999px; background: var(--brand-tint); color: var(--brand-ink); font-weight: 700; font-size: 14px; text-decoration: none; }
  body.has-tabs .head-blog[aria-current="page"] { background: var(--brand); color: #fff; }
}
.pill-xs { padding: 3px 9px; font-size: 12px; }

/* index */
.blog-hero { position: relative; overflow: hidden; margin: 28px 0 28px; padding: 40px 24px; border-radius: var(--r-xl); background: radial-gradient(60% 70% at 88% 8%, #d6c8ff 0%, rgba(214, 200, 255, 0) 60%), linear-gradient(135deg, #f2eeff 0%, #e6dfff 100%); }
.blog-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(91, 61, 245, 0.1) 1px, transparent 1px), linear-gradient(90deg, rgba(91, 61, 245, 0.1) 1px, transparent 1px); background-size: 28px 28px; -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 20%, transparent 80%); }
.blog-hero > .art-field { position: absolute; }
.blog-hero-text { position: relative; z-index: 1; max-width: 34em; }
.blog-hero h1 { max-width: 11em; }
.blog-hero .dek { color: #3f3a66; }
@media (min-width: 1000px) { .blog-hero { padding: 56px 64px; } }
.post-grid { display: grid; gap: 22px 18px; }
@media (min-width: 720px) { .post-grid { grid-template-columns: repeat(3, 1fr); } }
.pcard { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); transition: box-shadow 0.2s ease, transform 0.2s ease; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.pcard-img { display: block; aspect-ratio: 4 / 3; background: var(--surface); overflow: hidden; }
.pcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.pcard:hover .pcard-img img { transform: scale(1.03); }
.pcard-body { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 20px; }
.pcard-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; font-size: 13px; color: var(--muted); font-weight: 600; }
.pcard-title { font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; }
.pcard-desc { font-size: 14.5px; line-height: 1.5; color: var(--muted); }
.pcard-cta { margin-top: 6px; font-weight: 700; color: var(--brand-ink); display: inline-flex; align-items: center; gap: 6px; }
.pcard-cta svg { width: 16px; height: 16px; }
.pcard-feat { margin-bottom: 36px; }
@media (min-width: 900px) {
  .pcard-feat { display: grid; grid-template-columns: 1fr 1.15fr; align-items: stretch; }
  .pcard-feat .pcard-img { order: 1; aspect-ratio: auto; height: 100%; min-height: 340px; }
  .pcard-feat .pcard-body { padding: 40px 44px; gap: 12px; justify-content: center; }
  .pcard-feat .pcard-title { font-size: 30px; }
  .pcard-feat .pcard-desc { font-size: 16px; }
}

/* article */
.post-page { padding-bottom: 60px; }
.post-head { margin: 28px 0 24px; }
.post-head h1 { max-width: 15em; }
.post-head .crumbs { margin-bottom: 14px; }
.post-head .crumbs span { color: var(--muted); }
.post-kicker { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13.5px; font-weight: 700; color: var(--muted); }
.post-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 20px 0 0; font-size: 14px; font-weight: 600; color: #4b4a66; }
.post-avatar { width: 28px; height: 28px; border-radius: 8px; }
.post-cover { margin: 0 0 28px; }
.post-cover img { width: 100%; height: auto; border-radius: var(--r-xl); box-shadow: var(--shadow-md); }
.post-grid-2 { display: grid; gap: 36px; }
@media (min-width: 1000px) { .post-grid-2 { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; align-items: start; } }
.post-prose { font-size: 18px; line-height: 1.7; max-width: 44em; }
.post-prose > p:first-child { font-size: 20px; line-height: 1.6; color: #2f2c52; }
.post-prose h2 { font-size: 27px; margin: 1.5em 0 0.55em; scroll-margin-top: 24px; }
.post-prose h3 { font-size: 20px; margin: 1.3em 0 0.4em; }
.post-prose p { margin: 0 0 1.1em; }
.post-prose ul, .post-prose ol { margin: 0 0 1.1em; padding-left: 1.3em; }
.post-prose li { margin: 0.3em 0; }
.post-prose a { color: var(--brand-ink); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.post-prose blockquote { margin: 0 0 1.1em; padding: 4px 0 4px 18px; border-left: 3px solid var(--brand); color: #3f3a66; }
.side-label { margin: 0 0 10px; font-size: 12.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.3em; display: grid; gap: 6px; font-size: 14.5px; font-weight: 600; }
.toc a { color: var(--text); text-decoration: none; }
.toc a:hover { color: var(--brand-ink); text-decoration: underline; }
.post-side { display: grid; gap: 22px; align-content: start; }
.post-side > * { background: #fff; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 20px 22px; }
.post-side .side-cta { background: linear-gradient(135deg, #f2eeff, #e6dfff); border-color: transparent; }
.side-cta img { width: 40px; height: 40px; border-radius: 10px; }
.side-cta-title { margin: 12px 0 6px; font-size: 18px; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; }
.side-cta p { margin: 0 0 14px; font-size: 14.5px; color: #4b4a66; }
.side-cta .btn { width: 100%; }
.side-tools { display: grid; gap: 12px; }
.side-tool { display: flex; gap: 12px; align-items: center; text-decoration: none; color: var(--text); }
.side-tool img { width: 56px; height: 72px; object-fit: cover; object-position: top; border: 1px solid var(--border); border-radius: 6px; background: #fff; flex: none; }
.side-tool b { display: block; font-size: 14.5px; line-height: 1.3; }
.side-tool small { color: var(--muted); font-size: 12.5px; }
.side-tool:hover b { color: var(--brand-ink); }
.toc-top { display: none; }
@media (max-width: 999px) {
  .post-side .toc { display: none; }
  .toc-top { display: block; margin: 0 0 24px; border: 1px solid var(--border); border-radius: var(--r-lg); padding: 14px 18px; background: #fff; }
  .toc-top summary { cursor: pointer; font-weight: 800; }
  .toc-top ol { margin-top: 10px; }
}
.post-more { margin-top: 56px; }
.band-blog { padding-bottom: 28px; background: #f6f5ff; }
.band-english + .band-blog { border-top: 1px solid rgba(20, 22, 43, 0.06); }
.band-blog + .steps-band { margin-top: 0; border-top: 1px solid rgba(20, 22, 43, 0.06); }
@media (max-width: 719px) { .post-page .section-head .pill { display: none; } }