:root {
  color-scheme: light;
  --paper: #f8f1f0;
  --paper-deep: #efe2e1;
  --card: #fffaf9;
  --ink: #46363a;
  --muted: #806e72;
  --line: #dbc7ca;
  --accent: #c38791;
  --accent-dark: #855660;
  --accent-soft: #f1dfe1;
  --accent-ink: #573c42;
  --warm: #b99a7c;
  --shadow: 0 20px 50px rgba(24, 47, 46, .09);
  --serif: 'Noto Serif TC', 'Songti TC', 'Microsoft JhengHei', serif;
  --sans: 'Segoe UI', 'Noto Sans TC', 'Microsoft JhengHei', sans-serif;
}
html[data-theme="rose"],html[data-theme="teal"],html[data-theme="indigo"],html[data-theme="violet"] { --accent:#c38791; --accent-dark:#855660; --accent-soft:#f1dfe1; --accent-ink:#573c42; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); line-height:1.6; }
button,a { font:inherit; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible { outline:3px solid var(--warm); outline-offset:3px; }
.is-hidden { display:none !important; }
.eyebrow,.section-count,.route-number,.paragraph-number,.section-label { font:500 .72rem/1.3 'DM Mono',monospace; letter-spacing:.12em; }
.site-header { width:min(1180px,calc(100% - 48px)); height:82px; margin:auto; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.wordmark { display:flex; flex-direction:column; font:600 .78rem/1.2 'DM Mono',monospace; letter-spacing:.09em; }
.wordmark span { margin-top:5px; font:400 .75rem/1 var(--sans); letter-spacing:.04em; color:var(--muted); }
.header-course-link { color:var(--accent-dark); font-size:.88rem; font-weight:600; }
.landing-main,.course-main { width:min(1180px,calc(100% - 48px)); margin:auto; }
.landing-hero { min-height:425px; padding:72px 8% 72px 7%; margin-top:28px; position:relative; overflow:hidden; display:flex; flex-direction:column; justify-content:center; color:#f9f8f0; background:#122b2d; border-radius:18px; }
.landing-hero::before,.landing-hero::after { content:""; position:absolute; border:1px solid rgba(215,235,216,.15); border-radius:50%; pointer-events:none; }
.landing-hero::before { width:570px;height:570px;right:-95px;top:-150px; }
.landing-hero::after { width:390px;height:390px;right:-3px;top:-59px; }
.landing-hero .eyebrow { color:#b5d4cc; }
.landing-hero h1,.course-hero h1 { margin:21px 0 14px; max-width:700px; font:600 clamp(2.3rem,5.2vw,4.5rem)/1.24 var(--serif); letter-spacing:.02em; }
.landing-hero h1 em,.course-hero h1 em { color:#e4bd6b; font-style:normal; }
.hero-copy { max-width:545px; margin:3px 0 28px; color:#c5d3cf; font-size:1.02rem; }
.primary-link { align-self:flex-start; min-width:175px; padding:12px 16px; display:flex; justify-content:space-between; gap:30px; border:1px solid rgba(250,249,240,.36); border-radius:5px; color:#fff; font-size:.92rem; }
.primary-link:hover { background:rgba(255,255,255,.08); }
.hero-stamp { position:absolute; right:13%; top:31%; width:132px;height:132px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(227,190,104,.72); border-radius:50%; color:#e7c675; transform:rotate(9deg); }
.hero-stamp span,.hero-stamp small { font:500 .67rem 'DM Mono',monospace; letter-spacing:.12em; }
.hero-stamp b { font:500 3.1rem/.95 var(--serif); }
.story-grid-section { padding:81px 0 74px; }
.section-heading,.focus-heading,.ending-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; }
.section-heading h2,.focus-heading h2,.start-section h2,.ending-heading h2 { margin:8px 0 0; font:600 clamp(1.55rem,3vw,2.25rem)/1.3 var(--serif); }
.section-heading .eyebrow,.focus-heading .eyebrow,.start-section .eyebrow,.ending-heading .eyebrow,.how-section .eyebrow { margin:0; color:var(--accent-dark); }
.section-count { padding-bottom:9px; color:var(--muted); }
.story-grid { margin-top:26px; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.story-card { min-height:290px; position:relative; overflow:hidden; display:grid; grid-template-columns:34% 1fr; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 7px 22px rgba(20,38,38,.035); transition:transform .2s ease,box-shadow .2s ease; }
.story-card:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.card-art { position:relative; min-height:100%; overflow:hidden; display:grid; place-items:center; background:var(--accent-soft); color:var(--accent); }
.art-orbit { width:150px;height:150px; position:absolute; border:1px solid currentColor; border-radius:50%; opacity:.48; }
.art-orbit::before,.art-orbit::after { content:""; position:absolute; border:1px solid currentColor; border-radius:50%; inset:14px; }
.art-orbit::after { inset:33px; }
.art-glyph { position:relative; z-index:1; font:400 4rem/1 var(--serif); }
.art-dot { position:absolute; width:10px;height:10px; border-radius:50%; background:var(--warm); transform:translate(47px,-55px); }
.story-card-content { position:relative; padding:25px 28px 22px; }
.genre-label { display:inline-flex; padding:4px 9px; border:1px solid color-mix(in srgb,var(--accent) 28%, transparent); border-radius:999px; color:var(--accent-dark); font-size:.72rem; font-weight:600; }
.story-card h2 { margin:13px 0 2px; font:600 1.3rem/1.45 var(--serif); }
.english-title { margin:0; color:var(--muted); font-size:.85rem; }
.card-description { min-height:48px; margin:12px 0 14px; color:#586563; font-size:.88rem; }
.card-meta { display:flex; gap:13px; color:var(--muted); font-size:.72rem; }
.card-link { width:calc(100% - 56px); position:absolute; bottom:17px; left:28px; padding-top:9px; display:flex; justify-content:space-between; border-top:1px solid var(--line); color:var(--accent-dark); font-size:.84rem; font-weight:700; }
.how-section { padding:43px 0 78px; border-top:1px solid var(--line); }
.how-section h2 { margin:8px 0 30px; font:600 clamp(1.4rem,3vw,2.1rem)/1.4 var(--serif); }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.how-grid div { border-left:2px solid var(--accent); padding:4px 18px 7px; }
.how-grid b { color:var(--accent); font:500 .8rem 'DM Mono',monospace; }
.how-grid h3 { margin:10px 0 5px; font:600 1.1rem var(--serif); }
.how-grid p { margin:0; color:var(--muted); font-size:.9rem; }
.site-footer,.reader-footer { width:min(1180px,calc(100% - 48px)); margin:auto; padding:21px 0 25px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 20px; border-top:1px solid var(--line); color:var(--muted); font-size:.72rem; }

/* Course chooser */
.course-main { min-height:calc(100vh - 160px); padding:28px 0 70px; }
.back-link { color:var(--accent-dark); font-size:.84rem; }
.course-hero { margin:54px 0 42px; padding:48px 6%; display:grid; grid-template-columns:minmax(0,1fr) 250px; align-items:center; gap:30px; background:#122b2d; color:#f9f8f0; border-radius:15px; }
.course-hero .eyebrow { margin:0; color:#b5d4cc; }
.course-hero h1 { margin:15px 0 12px; font-size:clamp(2rem,4vw,3.35rem); }
.course-hero p:not(.eyebrow) { max-width:650px; color:#cad8d2; }
.course-stats { display:flex; flex-wrap:wrap; gap:26px; margin-top:24px; color:#b7c9c3; font-size:.82rem; }
.course-stats b { display:block; color:#e7c675; font:500 1.42rem 'DM Mono',monospace; }
.route-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:13px; }
.route-card { min-height:158px; position:relative; padding:23px 60px 20px 25px; display:flex; flex-direction:column; align-items:flex-start; gap:6px; background:var(--card); border:1px solid var(--line); border-radius:10px; transition:transform .18s ease,border-color .18s ease; }
.route-card:hover { transform:translateY(-2px); border-color:var(--accent); }
.route-card .route-number { position:absolute; top:23px; right:22px; color:var(--muted); }
.route-card b { margin-top:6px; font:600 1.24rem var(--serif); }
.route-card small { color:var(--muted); }
.route-arrow { position:absolute; right:23px; bottom:22px; color:var(--accent); }

/* Reader intro and reading views */
.reader-header { height:67px; position:sticky; z-index:20; top:0; padding:0 max(22px,calc((100% - 1120px)/2)); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:15px; background:color-mix(in srgb,var(--paper) 91%,transparent); border-bottom:1px solid var(--line); backdrop-filter:blur(15px); }
.reader-back,.back-to-intro { border:0; background:none; color:var(--accent-dark); cursor:pointer; font-size:.85rem; }
.reader-back { justify-self:start; }
.reader-back:first-letter { font-size:1.35rem; }
.reader-brand { display:flex; align-items:center; gap:9px; font-weight:700; letter-spacing:.04em; }
.reader-brand small { padding:3px 6px; background:var(--accent-soft); border-radius:4px; color:var(--accent-dark); font:500 .63rem 'DM Mono',monospace; }
.theme-toggle { width:34px;height:34px; justify-self:end; border:1px solid var(--line); border-radius:50%; background:var(--card); cursor:pointer; }
.reader-main { width:min(1000px,calc(100% - 36px)); margin:30px auto 55px; }
.intro-card { min-height:305px; position:relative; overflow:hidden; padding:34px clamp(23px,5vw,52px); display:grid; grid-template-columns:minmax(0,1.3fr) minmax(180px,.7fr); align-items:center; gap:20px; color:#f8f7ef; background:#142e30; border-radius:15px; }
.intro-copy { position:relative; z-index:2; }
.intro-badge { padding:4px 9px; border:1px solid rgba(255,255,255,.3); border-radius:5px; font-size:.72rem; }
.compat-pill { margin:18px 0 12px; color:#c6dbd4; font-size:.78rem; }
.intro-copy .genre-label { border-color:rgba(255,255,255,.29); color:#e7c675; }
.intro-copy h1 { margin:12px 0 2px; font:600 clamp(1.7rem,4vw,2.75rem)/1.35 var(--serif); letter-spacing:.015em; }
.intro-subtitle { margin:0; color:#cfdbd5; font-size:1rem; }
.intro-description { max-width:570px; margin:11px 0 16px; color:#b9c9c3; font-size:.9rem; }
.intro-meta { display:flex; flex-wrap:wrap; gap:8px 18px; color:#f0deb4; font-size:.73rem; }
.intro-art { width:235px;height:235px; position:relative; justify-self:center; display:grid; place-items:center; color:#dfbd71; }
.art-ring { position:absolute; border:1px solid rgba(224,190,113,.57); border-radius:50%; }
.ring-one { inset:10px; }
.ring-two { inset:31px; border-style:dashed; opacity:.85; }
.art-core { width:98px;height:98px; display:grid; place-items:center; border:1px solid rgba(255,255,255,.25); border-radius:50%; background:rgba(231,198,117,.1); font:500 2.5rem var(--serif); }
.art-spark { position:absolute; font-size:1.3rem; }
.spark-one { right:22px; top:37px; }
.spark-two { left:20px; bottom:45px; }
.art-caption { position:absolute; bottom:3px; font:500 .61rem 'DM Mono',monospace; letter-spacing:.12em; text-transform:uppercase; }
.focus-section { padding:37px 0 33px; }
.focus-heading { align-items:center; margin-bottom:17px; }
.focus-heading h2 { margin-top:5px; font-size:1.56rem; }
.focus-heading p { margin:6px 0 0; color:var(--muted); font-size:.85rem; }
.focus-total { color:var(--accent); font:500 1.55rem 'DM Mono',monospace; }
.focus-total small { display:block; text-align:center; font-size:.57rem; letter-spacing:.1em; }
.intro-vocab-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.vocab-pill { min-height:59px; padding:9px 10px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; border:1px solid var(--line); border-radius:7px; background:var(--card); text-align:left; cursor:pointer; transition:background .15s,border-color .15s,transform .15s; }
.vocab-pill:hover { transform:translateY(-1px); border-color:var(--accent); background:var(--accent-soft); }
.vocab-pill span { color:var(--accent-dark); font-size:.86rem; font-weight:700; }
.vocab-pill small { margin-top:2px; color:var(--muted); font-size:.7rem; }
.start-section { padding:27px 0 6px; border-top:1px solid var(--line); }
.start-section h2 { margin-top:5px; font-size:1.48rem; }
.start-buttons { margin-top:16px; display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.mode-launch { min-height:115px; position:relative; padding:16px 18px; display:flex; flex-direction:column; align-items:flex-start; text-align:left; border:1px solid var(--line); border-radius:8px; background:var(--card); cursor:pointer; transition:transform .15s,border-color .15s,background .15s; }
.mode-launch:hover { transform:translateY(-2px); border-color:var(--accent); background:var(--accent-soft); }
.mode-launch span { color:var(--accent); font:500 .65rem 'DM Mono',monospace; letter-spacing:.1em; }
.mode-launch b { margin-top:3px; font:600 1.08rem var(--serif); }
.mode-launch small { margin-top:4px; color:var(--muted); font-size:.75rem; }
.mode-launch i { position:absolute; top:16px; right:17px; color:var(--accent); font-style:normal; }
.reader-footer { padding-top:18px; font-size:.69rem; }
.reading-view { min-height:75vh; }
.reading-nav { min-height:70px; display:grid; grid-template-columns:1fr minmax(220px,auto) 1fr; align-items:center; gap:14px; border-bottom:1px solid var(--line); }
.reading-title { display:flex; flex-direction:column; text-align:center; }
.reading-title b { font:600 1.1rem var(--serif); }
.reading-title span { color:var(--muted); font-size:.74rem; }
.reading-controls { justify-self:end; display:flex; gap:5px; }
.round-control { width:34px;height:34px; border:1px solid var(--line); border-radius:50%; background:var(--card); cursor:pointer; font-size:.82rem; }
.mode-tabs { margin:17px 0 0; display:flex; justify-content:center; border-bottom:1px solid var(--line); }
.mode-tabs button { padding:10px 17px; border:0; border-bottom:2px solid transparent; background:transparent; color:var(--muted); cursor:pointer; font-size:.82rem; }
.mode-tabs button.is-active { border-color:var(--accent); color:var(--accent-dark); font-weight:700; }
.review-toolbar,.speech-toolbar { min-height:55px; margin:14px 0 0; padding:9px 11px; display:flex; justify-content:center; align-items:center; gap:8px; border:1px solid var(--line); border-radius:8px; background:var(--card); }
.review-toolbar button,.speech-toolbar button { padding:7px 11px; border:1px solid var(--line); border-radius:5px; background:var(--paper); cursor:pointer; font-size:.78rem; }
.review-toolbar button[aria-pressed="true"] { color:var(--accent-dark); border-color:var(--accent); background:var(--accent-soft); }
.speech-toolbar { justify-content:space-between; padding-inline:16px; color:var(--muted); font-size:.78rem; }
.speech-toolbar div { display:flex; gap:7px; }
.speech-toolbar button:first-child { color:var(--accent-dark); font-weight:700; }
.mode-hint { margin:17px 0 12px; color:var(--muted); text-align:center; font-size:.82rem; }
.passage-content { max-width:810px; margin:0 auto; padding:7px 0 23px; font-size:calc(1rem * var(--reading-scale,1)); }
.story-paragraph { padding:17px 11px; display:grid; grid-template-columns:34px minmax(0,1fr); gap:12px; border-bottom:1px solid color-mix(in srgb,var(--line) 65%, transparent); animation:fade-up .38s both; animation-delay:calc(var(--paragraph-order) * 18ms); }
@keyframes fade-up { from {opacity:0;transform:translateY(6px)} to {opacity:1;transform:translateY(0)} }
.paragraph-number { padding-top:7px; color:#a4aaa1; font-size:.63rem; }
.paragraph-text p { margin:0; }
.paragraph-zh { color:var(--ink); font:400 1em/1.95 var(--serif); }
.paragraph-en { margin-top:8px !important; padding-left:12px; border-left:2px solid var(--accent-soft); color:#526160; font:400 .94em/1.8 var(--sans); }
.passage-content.hide-chinese .paragraph-zh { display:none; }
.vocab-token { padding:0 3px 1px; border:0; border-bottom:1px dashed color-mix(in srgb,var(--accent) 55%,transparent); border-radius:2px; background:var(--accent-soft); color:var(--accent-ink); font-weight:600; cursor:pointer; }
.vocab-token:hover { background:color-mix(in srgb,var(--accent-soft) 65%,var(--warm)); }
.vocab-token.is-blank { min-width:58px; border:1px solid #c7c9c1; border-radius:4px; background:#e8e8e2; color:#65706e; }
.blank-line { letter-spacing:.08em; }
.ending-section { margin:30px 0 12px; padding:29px clamp(17px,4vw,35px) 31px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.ending-heading { align-items:center; }
.ending-heading h2 { margin:7px 0 3px; font-size:1.5rem; }
.ending-heading p:not(.eyebrow) { margin:0; color:var(--muted); font-size:.83rem; }
.ending-mark { color:color-mix(in srgb,var(--accent) 38%,transparent); font:500 clamp(1.2rem,3vw,1.7rem) 'DM Mono',monospace; letter-spacing:.1em; }
.ending-choices { margin-top:18px; display:grid; gap:8px; }
.ending-choice { min-height:74px; padding:12px 14px; display:grid; grid-template-columns:33px 1fr 25px; align-items:center; gap:12px; border:1px solid var(--line); border-radius:7px; background:var(--paper); text-align:left; cursor:pointer; transition:border-color .15s,background .15s; }
.ending-choice:hover,.ending-choice.is-selected { border-color:var(--accent); background:var(--accent-soft); }
.ending-letter { width:31px;height:31px; display:grid; place-items:center; border-radius:50%; background:var(--accent); color:#fff; font:500 .82rem 'DM Mono',monospace; }
.ending-choice b { display:block; font:600 .96rem var(--serif); }
.ending-choice small { display:block; margin-top:2px; color:var(--muted); font-size:.72rem; }
.ending-arrow { justify-self:end; color:var(--accent); }
.ending-result { margin-top:14px; padding:22px; border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line)); border-radius:8px; background:color-mix(in srgb,var(--accent-soft) 53%,var(--card)); }
.ending-result-head { display:flex; justify-content:space-between; align-items:center; }
.ending-result .eyebrow { color:var(--accent-dark); }
.ending-result h3 { margin:11px 0 9px; font:600 1.22rem var(--serif); }
.ending-zh { margin:0; line-height:1.9; }
.ending-en { margin:10px 0 0; color:var(--muted); line-height:1.8; }
.ending-result blockquote { margin:17px 0 0; padding:11px 15px; display:flex; flex-direction:column; gap:4px; border-left:3px solid var(--accent); background:rgba(255,255,255,.43); font-weight:700; }
.ending-result blockquote small { color:var(--muted); font-weight:400; }
.text-toggle { border:0; background:none; color:var(--accent-dark); cursor:pointer; font-size:.78rem; }
.word-drawer { position:fixed; inset:0; z-index:60; visibility:hidden; pointer-events:none; }
.word-drawer.is-open { visibility:visible; pointer-events:auto; }
.drawer-scrim { position:absolute; inset:0; background:rgba(11,27,28,.48); opacity:0; transition:opacity .24s; }
.word-drawer.is-open .drawer-scrim { opacity:1; }
.drawer-panel { width:min(445px,100%); height:100%; position:absolute; top:0; right:0; overflow:auto; padding:24px 25px 34px; background:var(--card); box-shadow:-18px 0 48px rgba(0,0,0,.14); transform:translateX(102%); transition:transform .28s ease; }
.word-drawer.is-open .drawer-panel { transform:translateX(0); }
.drawer-topline,.drawer-heading { display:flex; justify-content:space-between; align-items:center; }
.drawer-topline .eyebrow { color:var(--accent-dark); }
.icon-button,.sound-button { width:36px;height:36px; border:1px solid var(--line); border-radius:50%; background:var(--paper); cursor:pointer; }
.drawer-heading { align-items:flex-start; margin:23px 0 13px; }
.drawer-heading h2 { margin:0; color:var(--accent-dark); font:600 2rem/1.2 'DM Sans',var(--sans); }
.drawer-pronunciation { margin:5px 0 0; color:var(--muted); font:400 .84rem 'DM Mono',monospace; }
.level-chip { display:inline-flex; padding:4px 9px; border-radius:999px; background:var(--accent-soft); color:var(--accent-dark); font-size:.72rem; font-weight:700; }
.drawer-definition { margin-top:17px; padding:15px 16px; border-left:3px solid var(--accent); background:var(--paper); }
.drawer-definition strong { font:600 1.08rem var(--serif); }
.drawer-definition p { margin:8px 0 0; color:var(--muted); font-size:.9rem; line-height:1.7; }
.drawer-example { margin-top:19px; }
.section-label { color:var(--muted); font-size:.65rem; }
.drawer-example p { margin:9px 0 5px; line-height:1.7; }
.example-translation { color:var(--muted); font-size:.87rem; }
.drawer-tags { margin-top:17px; display:grid; gap:0; border-top:1px solid var(--line); }
.drawer-tags div { padding:10px 0; display:grid; grid-template-columns:78px 1fr; gap:8px; border-bottom:1px solid var(--line); font-size:.79rem; }
.drawer-tags b { color:var(--accent-dark); }
.drawer-tags span { color:var(--muted); }
.star-word { width:100%; margin-top:19px; padding:11px; border:1px solid var(--accent); border-radius:6px; background:transparent; color:var(--accent-dark); cursor:pointer; font-weight:700; }
.star-word.is-starred { background:var(--accent); color:white; }
.celebration-layer { position:fixed; inset:0; z-index:58; overflow:hidden; pointer-events:none; }
.confetti-piece { width:8px;height:14px; position:absolute; left:var(--x); top:-20px; background:hsl(var(--hue) 70% 60%); animation:confetti-fall 1.4s ease-in var(--delay) forwards; }
@keyframes confetti-fall { to { transform:translateY(105vh) rotate(720deg); opacity:.1; } }
body.dark-theme { --paper:#182627; --paper-deep:#233536; --card:#203031; --ink:#eef1e8; --muted:#aab9b4; --line:#3a4a49; --accent-soft:#2f4946; --accent-ink:#e2efe4; --shadow:0 18px 50px rgba(0,0,0,.25); }
body.dark-theme .story-card,body.dark-theme .route-card,body.dark-theme .vocab-pill,body.dark-theme .mode-launch { background:var(--card); }
body.dark-theme .reader-header { background:rgba(24,38,39,.91); }
body.dark-theme .paragraph-en { color:#c0cac6; }
body.dark-theme .review-toolbar button,body.dark-theme .speech-toolbar button,body.dark-theme .round-control { background:#263839; color:var(--ink); }
body.dark-theme .drawer-panel { background:var(--card); }
body.dark-theme .ending-result blockquote { background:rgba(0,0,0,.14); }
body.drawer-open { overflow:hidden; }

@media (max-width:760px) {
  .site-header,.landing-main,.course-main,.site-footer,.reader-footer { width:calc(100% - 32px); }
  .site-header { height:68px; }
  .landing-hero { min-height:390px; margin-top:16px; padding:53px 24px; }
  .hero-stamp { width:95px;height:95px; right:7%; top:9%; opacity:.72; }
  .hero-stamp b { font-size:2.3rem; }
  .landing-hero h1 { font-size:clamp(2.2rem,10vw,3.4rem); }
  .hero-copy { max-width:430px; font-size:.92rem; }
  .story-grid { grid-template-columns:1fr; }
  .story-card { min-height:270px; grid-template-columns:28% 1fr; }
  .card-art { min-height:270px; }
  .art-orbit { width:115px;height:115px; }
  .art-glyph { font-size:3rem; }
  .story-card-content { padding:20px 19px 18px; }
  .card-link { width:calc(100% - 38px); left:19px; }
  .how-grid { grid-template-columns:1fr; gap:18px; }
  .course-hero { grid-template-columns:1fr; margin:34px 0 27px; padding:31px 24px; }
  .course-hero h1 { font-size:2.4rem; }
  .course-stats { gap:18px; }
  .route-grid { grid-template-columns:1fr; }
  .reader-main { width:calc(100% - 28px); margin-top:17px; }
  .reader-header { height:59px; padding:0 14px; grid-template-columns:1fr auto 1fr; }
  .reader-back span { font-size:.75rem; }
  .intro-card { grid-template-columns:1fr; min-height:0; padding:25px 21px 19px; }
  .intro-art { width:118px;height:118px; position:absolute; right:10px; top:18px; opacity:.35; }
  .art-core { width:52px;height:52px; font-size:1.5rem; }
  .intro-art .art-caption { display:none; }
  .compat-pill { max-width:calc(100% - 60px); font-size:.68rem; }
  .intro-description { max-width:100%; }
  .intro-meta { display:grid; grid-template-columns:1fr; gap:4px; font-size:.7rem; }
  .focus-section { padding:28px 0 26px; }
  .intro-vocab-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
  .vocab-pill { min-height:54px; }
  .start-buttons { grid-template-columns:1fr; }
  .mode-launch { min-height:88px; }
  .reading-nav { min-height:62px; grid-template-columns:1fr auto; }
  .reading-title { grid-column:1/-1; grid-row:2; padding:0 0 10px; text-align:left; align-items:flex-start; }
  .back-to-intro { grid-column:1; grid-row:1; justify-self:start; padding:12px 0; }
  .reading-controls { grid-column:2; grid-row:1; }
  .mode-tabs { justify-content:flex-start; overflow:auto; }
  .mode-tabs button { flex:0 0 auto; padding:10px 12px; font-size:.74rem; }
  .review-toolbar { flex-wrap:wrap; }
  .review-toolbar button { font-size:.7rem; }
  .speech-toolbar { align-items:flex-start; flex-direction:column; }
  .story-paragraph { grid-template-columns:24px minmax(0,1fr); gap:8px; padding:14px 0; }
  .paragraph-zh { line-height:1.85; }
  .paragraph-en { padding-left:9px; line-height:1.75; }
  .ending-heading { align-items:flex-start; }
  .ending-mark { font-size:1rem; padding-top:10px; }
  .site-footer,.reader-footer { flex-direction:column; }
}
@media (max-width:410px) {
  .story-card { grid-template-columns:24% 1fr; }
  .art-orbit { width:93px;height:93px; }
  .art-glyph { font-size:2.5rem; }
  .story-card h2 { font-size:1.12rem; }
  .card-description { font-size:.81rem; }
  .genre-label { font-size:.65rem; }
  .intro-meta { font-size:.65rem; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

/* Laney's Novel Time: powder-rose palette and square-grid layout */
body {
  background-color:var(--paper);
  background-image:linear-gradient(to right,rgba(145,94,104,.09) 1px,transparent 1px),linear-gradient(to bottom,rgba(145,94,104,.09) 1px,transparent 1px);
  background-size:28px 28px;
}
.landing-hero,.course-hero,.intro-card {
  color:var(--ink) !important;
  background-color:#f0dfe0 !important;
  background-image:linear-gradient(to right,rgba(135,86,96,.13) 1px,transparent 1px),linear-gradient(to bottom,rgba(135,86,96,.13) 1px,transparent 1px) !important;
  background-size:28px 28px !important;
  border:1px solid var(--line);
  border-radius:2px !important;
  box-shadow:none;
}
.landing-hero h1,.course-hero h1,.intro-copy h1 { color:var(--ink); }
.landing-hero h1 em,.course-hero h1 em { color:var(--accent-dark); }
.landing-hero .eyebrow,.course-hero .eyebrow,.compat-pill { color:var(--accent-dark) !important; }
.hero-copy,.course-hero p:not(.eyebrow),.intro-subtitle,.intro-description { color:#6c575c !important; }
.intro-badge,.intro-copy .genre-label { border-color:var(--accent); color:var(--accent-dark) !important; }
.intro-meta { color:var(--accent-dark) !important; font-weight:600; }
.primary-link { border-color:var(--accent-dark); border-radius:0; color:var(--accent-dark); }
.hero-stamp { border-radius:0 !important; border-color:var(--accent-dark); color:var(--accent-dark); background:rgba(255,250,249,.35); transform:none; }
.landing-hero::before {
  width:310px;height:310px;right:9%;top:48px;border:0;border-radius:0;
  background-image:linear-gradient(to right,rgba(133,86,96,.17) 1px,transparent 1px),linear-gradient(to bottom,rgba(133,86,96,.17) 1px,transparent 1px);
  background-size:28px 28px;
}
.landing-hero::after { width:196px;height:196px;right:14%;top:106px;border-radius:0;border-color:rgba(133,86,96,.32); }
.story-grid,.route-grid { gap:1px; padding:1px; background:var(--line); }
.story-card,.route-card { border:0; border-radius:0 !important; box-shadow:none; }
.story-card:hover,.route-card:hover { transform:translateY(-1px); box-shadow:0 8px 22px rgba(88,54,62,.1); }
.card-art {
  background-color:#f1dfe1;
  background-image:linear-gradient(to right,rgba(133,86,96,.17) 1px,transparent 1px),linear-gradient(to bottom,rgba(133,86,96,.17) 1px,transparent 1px);
  background-size:22px 22px;
}
.art-orbit,.art-orbit::before,.art-orbit::after,.art-ring { border-radius:0 !important; }
.art-dot { border-radius:0 !important; }
.genre-label,.reader-brand small,.intro-badge,.level-chip { border-radius:0 !important; }
.header-course-link,.genre-label,.reader-back,.back-to-intro { color:var(--accent-dark); }
.course-hero { border-radius:2px !important; }
.reader-header { background:color-mix(in srgb,var(--paper) 94%,transparent); }
.reader-brand { color:var(--accent-dark); font-size:.87rem; }
.intro-card { border-radius:2px !important; }
.intro-art { color:var(--accent-dark); }
.art-ring { border-color:rgba(133,86,96,.38); }
.art-core { border-radius:0 !important; border-color:rgba(133,86,96,.38); background:rgba(255,250,249,.4); }
.art-caption,.art-spark { color:var(--accent-dark); }
.intro-vocab-grid { gap:1px; padding:1px; background:var(--line); }
.vocab-pill { border:0; border-radius:0 !important; background:var(--card); }
.vocab-pill:hover { background:#f1dfe1; }
.start-buttons { gap:1px; padding:1px; background:var(--line); }
.mode-launch { border:0; border-radius:0 !important; background:var(--card); }
.mode-tabs button { border-radius:0; }
.review-toolbar,.speech-toolbar,.review-toolbar button,.speech-toolbar button,.round-control { border-radius:0 !important; }
.story-paragraph { border-bottom-color:rgba(145,94,104,.18); }
.paragraph-en { border-left-color:var(--accent-soft); }
.vocab-token { border-radius:0 !important; }
.ending-section,.ending-choice,.ending-result { border-radius:0 !important; }
.ending-choice { background:var(--paper); }
.word-drawer .drawer-panel,.drawer-definition,.icon-button,.sound-button,.star-word { border-radius:0 !important; }
.drawer-definition { background:#f8efee; }
.reader-footer,.site-footer { border-top-color:var(--line); }
.reader-footer span:first-child,.site-footer span:first-child { color:var(--accent-dark); font-weight:700; }
body.dark-theme {
  --paper:#32282d; --paper-deep:#3e3238; --card:#44363d; --ink:#fff3f2; --muted:#d0bfc2; --line:#654f57;
  --accent:#d99ca7; --accent-dark:#f0c5cc; --accent-soft:#614850; --accent-ink:#fff0f1; --warm:#d1b294;
  background-image:linear-gradient(to right,rgba(240,197,204,.08) 1px,transparent 1px),linear-gradient(to bottom,rgba(240,197,204,.08) 1px,transparent 1px);
}
body.dark-theme .landing-hero,body.dark-theme .course-hero,body.dark-theme .intro-card {
  background-color:#4a3940 !important;
  background-image:linear-gradient(to right,rgba(240,197,204,.12) 1px,transparent 1px),linear-gradient(to bottom,rgba(240,197,204,.12) 1px,transparent 1px) !important;
  color:var(--ink) !important;
}
body.dark-theme .landing-hero h1,body.dark-theme .course-hero h1,body.dark-theme .intro-copy h1,
body.dark-theme .hero-copy,body.dark-theme .course-hero p:not(.eyebrow),body.dark-theme .intro-subtitle,body.dark-theme .intro-description { color:var(--ink) !important; }
body.dark-theme .card-art { background-color:#58434b; }
body.dark-theme .drawer-definition { background:#392e33; }

@media (max-width:760px) {
  .landing-hero::before { right:-90px; top:52px; }
  .landing-hero::after { right:-28px; top:112px; }
  .story-grid,.route-grid,.intro-vocab-grid,.start-buttons { gap:1px; }
  .reader-brand { font-size:.7rem; }
}