@import url('./tokens.8da292581914.css');
@import url('./base.6d98a548cd38.css');

:root {
  --font-display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
  --font-body: var(--font-display);
  --color-soft-accent: #eef2ff;
  --color-soft-success: #edf8f2;
  --color-gold-paper: #fff5e7;
  --color-gold: #96541c;
  --color-preview-clear: rgb(255 255 255 / 0);
  --shadow-card: 0 5px 24px rgb(30 48 90 / .055);
  --shadow-dialog: 0 24px 80px rgb(20 30 55 / .2);
  --header-height: 76px;
}
body { font-size: 15px; line-height: 1.75; }
a { text-decoration: none; transition: color .2s, background-color .2s; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .6; }
svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
h1, h2, h3 { max-width: none; letter-spacing: -.025em; line-height: 1.5; }
h1 { font-size: 32px; font-weight: 750; }
h2 { font-size: 24px; font-weight: 700; }
h3 { font-size: 18px; font-weight: 650; }
p { margin: 10px 0 18px; }
.small, small { color: var(--color-muted); font-size: 12px; }
.text-link, .inline-button { color: var(--color-accent-2); font-size: 13px; }
.text-link:hover, .inline-button:hover { text-decoration: underline; text-underline-offset: 4px; }
.inline-button { display: inline-flex; align-items: center; min-height: 32px; }
.btn { display: inline-flex; justify-content: center; align-items: center; gap: 9px; min-height: 42px; padding: 9px 22px; border: 1px solid transparent; border-radius: 999px; background: var(--color-board); color: white; font-size: 14px; font-weight: 600; line-height: 1.5; transition: background .2s, transform .2s; }
.btn:hover { background: #28449e; transform: translateY(-1px); }
.btn.quiet { background: #f0f1f5; border-color: #eceef3; color: #454b5d; }
.btn.quiet:hover { background: #e6e9f1; }
.btn.orange { background: #e97c27; color: white; }
.btn.orange:hover { background: #d66717; }
.btn svg { width: 17px; height: 17px; }
.icon-button { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; font-size: 28px; color: var(--color-muted); }
.icon-button:hover { background: var(--color-paper-3); }
.eyebrow { display: block; color: var(--color-accent-2); font-size: 12px; font-weight: 650; letter-spacing: .12em; margin: 0 0 12px; }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }

/* Shared navigation; the reading sidebar stays out of the home hero. */
.site-header { position: sticky; top: 0; z-index: 300; height: var(--header-height); border-bottom: 1px solid var(--color-rule); background: rgb(255 255 255 / .96); backdrop-filter: blur(14px); }
.header-inner { max-width: 1440px; height: 100%; padding: 0 40px; margin: auto; display: flex; align-items: center; gap: 30px; }
.brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.brand-logo { width: 42px; height: 42px; object-fit: contain; border-radius: 50%; }
.brand-name { font-size: 17px; font-weight: 700; white-space: nowrap; line-height: 1.5; }
.brand-name small { display: block; font-size: 10px; font-weight: 400; letter-spacing: .04em; }
#global-search { margin-right: auto; }
.search-wrap { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid #eceef3; border-radius: 8px; background: #f6f7f9; }
.search-wrap:focus-within { border-color: #8ea1e1; }
.search-wrap svg { width: 16px; height: 16px; color: var(--color-muted); display: block; }
.search-wrap input { width: 112px; min-width: 0; padding: 0; border: 0; outline: none; background: transparent; font-size: 12px; min-height: 22px; }
.search-wrap kbd { border: 1px solid #dcdfe8; border-radius: 3px; width: 18px; text-align: center; font: inherit; font-size: 11px; color: var(--color-muted); }
.header-nav { display: flex; align-items: center; gap: 24px; }
.header-nav a { white-space: nowrap; font-size: 13px; font-weight: 550; line-height: var(--header-height); }
.header-nav a:hover, [data-page="home"] [data-page-link="home"], [data-page="practice"] [data-page-link="practice"], [data-page="essay"] [data-page-link="essay"], [data-page="interview"] [data-page-link="interview"], [data-page="resources"] [data-page-link="resources"], [data-page="read"] [data-page-link="resources"], [data-page="guide"] [data-page-link="guide"] { color: var(--color-accent-2); }
.header-follow { white-space: nowrap; padding-left: 24px; border-left: 1px solid var(--color-rule); font-size: 13px; color: var(--color-accent-2); }
.header-follow span { margin-left: 4px; }
.menu-toggle, .nav-scrim { display: none; }
.app-shell { max-width: 1440px; margin: auto; display: grid; grid-template-columns: 244px minmax(0, 1fr); min-height: calc(100dvh - var(--header-height)); }
.sidebar { display: flex; flex-direction: column; position: sticky; top: var(--header-height); height: calc(100dvh - var(--header-height)); padding: 32px 24px; background: #f8f9fc; border-right: 1px solid var(--color-rule); overflow-y: auto; }
.nav-label { color: #424b62; font-size: 13px; font-weight: 650; padding: 0 12px 18px; }
.nav-label span { display: block; margin-top: 3px; color: #9299ab; font-size: 9px; font-weight: 500; letter-spacing: .14em; }
#nav { display: grid; gap: 5px; }
.nav-item { display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 13px; border-radius: 8px; color: #646d81; font-size: 13px; }
.nav-item svg { width: 18px; height: 18px; }
.nav-item:hover { color: var(--color-accent-2); background: #eef1f8; }
.nav-item.active { color: var(--color-accent-2); background: #e9eefa; font-weight: 600; }
.sidebar-foot { margin-top: auto; padding: 48px 12px 0; }
.sidebar-foot p { font-size: 14px; line-height: 2; }
.sidebar-foot .small { font-size: 11px; }
.site-note { margin: 24px 12px 0; padding-top: 20px; border-top: 1px solid var(--color-rule); font-size: 11px; color: var(--color-muted); }
.site-note small { display: block; margin-top: 6px; font-size: 10px; }
.workspace { min-width: 0; display: flex; flex-direction: column; }
.topbar { display: flex; justify-content: space-between; gap: 16px; padding: 22px 48px 0; color: #8990a0; font-size: 11px; }
.topbar .text-link { font-size: 11px; }
#main { padding: 32px 48px 64px; min-height: calc(100dvh - 225px); outline: none; flex: 1; min-width: 0; }
.footer { padding: 26px 48px; border-top: 1px solid var(--color-rule); display: flex; justify-content: space-between; align-items: center; gap: 20px; color: #7a8191; font-size: 10px; }
.footer a { font-weight: 600; }
.footer a span { display: block; font-weight: 400; margin-top: 3px; }
[data-page="home"] .app-shell { display: block; max-width: none; }
[data-page="home"] .sidebar, [data-page="home"] .topbar { display: none; }
[data-page="home"] #main { width: 100%; max-width: 1200px; margin: auto; padding: 0 40px 64px; }
[data-page="home"] .footer { justify-content: center; text-align: center; flex-direction: column; gap: 8px; }
[data-page="home"] .footer a span { display: inline; margin-left: 14px; }

/* Home: a reading portal inspired by the reference site's VitePress layout. */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: center; gap: 50px; padding: 68px 0 58px; }
.home-hero h1 { font-size: clamp(34px, 3.5vw, 49px); line-height: 1.4; letter-spacing: -.04em; font-weight: 780; }
.hero-brand { display: block; color: #3451b2; font-size: 1.03em; margin-bottom: 7px; }
.hero-content > p:not(.eyebrow) { color: var(--color-muted); font-size: 16px; line-height: 1.9; margin: 22px 0 26px; }
.hero-content .btn { min-height: 46px; padding-inline: 24px; }
.hero-note { display: flex; gap: 18px; margin-top: 22px; color: #7c8494; font-size: 11px; }
.hero-note span { display: inline-flex; align-items: center; gap: 6px; }
.hero-note span::before { content: ""; width: 4px; height: 4px; background: #91a3d8; border-radius: 50%; }
.hero-visual { justify-self: center; text-align: center; }
.hero-visual img { width: 310px; height: 310px; border-radius: 50%; object-fit: contain; box-shadow: 0 12px 50px rgb(52 81 178 / .08); }
.hero-visual p { margin: 20px 0 0; font-size: 12px; color: #8a91a0; letter-spacing: .3em; }
.home-section { margin-top: 46px; }
.section-title { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 24px; }
.section-title h2 { font-size: 25px; }
.section-title p { font-size: 13px; color: var(--color-muted); margin: 8px 0 0; }
.section-title > a { white-space: nowrap; color: var(--color-accent-2); font-size: 12px; }
.section-title .eyebrow { margin-bottom: 8px; font-size: 10px; }
.study-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.study-card { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; border: 1px solid var(--color-rule); border-radius: 16px; background: white; box-shadow: var(--shadow-card); transition: transform .25s, box-shadow .25s, border-color .25s; }
.study-card:hover { transform: translateY(-5px); box-shadow: 0 14px 30px rgb(30 48 90 / .09); border-color: #ccd6ef; }
.card-top { width: 100%; display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.card-top > span:last-child { color: #8b93a2; font-size: 10px; letter-spacing: .05em; }
.card-icon { width: 43px; height: 43px; display: grid; place-items: center; border-radius: 12px; background: #eef2ff; color: #4964b9; }
.card-icon svg { width: 23px; height: 23px; }
.study-card.purple .card-icon { color: #8763b5; background: #f4effa; }
.study-card.orange .card-icon { color: #c3763c; background: #fff3e8; }
.study-card.green .card-icon { color: #368b73; background: #edf8f3; }
.study-card.gold .card-icon { color: #a38135; background: #fbf5e8; }
.study-card h3 { font-size: 20px; }
.study-card p { font-size: 13px; color: var(--color-muted); line-height: 1.85; margin: 9px 0 22px; flex: 1; }
.card-button { display: inline-flex; align-items: center; gap: 20px; padding: 7px 13px; border: 1px solid #f7d4ac; border-radius: 7px; background: #fff1df; color: #95591f; font-size: 12px; font-weight: 600; }
.card-button svg { width: 15px; height: 15px; }
.card-button:hover { background: #ffe4c0; }
.home-highlights { display: grid; grid-template-columns: 1.1fr 1fr; gap: 22px; margin-top: 44px; }
.word-preview { display: flex; flex-direction: column; background: #f5f7fd; border: 1px solid #e8ecf7; border-radius: 16px; padding: 28px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.word-pair { font-size: 29px; font-weight: 700; margin: 17px 0 8px; }
.word-pair span { font-size: 13px; color: #9099af; font-weight: 400; margin-inline: 16px; }
.word-preview p { color: var(--color-muted); font-size: 13px; line-height: 1.9; }
.word-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: #8790a5; padding-top: 16px; margin-top: auto; border-top: 1px solid #e2e7f3; }
.tip-block { padding: 28px; border: 1px solid var(--color-rule); border-radius: 16px; }
.tip-block .eyebrow { font-size: 10px; }
.tip-block h2 { font-size: 22px; }
.tip-block > p { font-size: 13px; color: var(--color-muted); line-height: 1.9; margin: 12px 0 22px; }
.study-path { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 12px; color: #727c91; margin-bottom: 18px; }
.study-path b { color: #3451b2; margin-right: 5px; font-size: 10px; }
.study-path > span { color: #c1c8d8; }
.follow-banner { display: flex; justify-content: space-between; align-items: center; gap: 24px; margin-top: 48px; padding: 30px 34px; border: 1px solid #e6ebf9; background: #f7f9ff; border-radius: 16px; }
.follow-banner h2 { font-size: 21px; }
.follow-banner p { font-size: 13px; color: var(--color-muted); margin: 8px 0 0; }
.follow-banner .btn { flex-shrink: 0; }

/* Resource lists and reading surfaces. */
.page-title { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; margin: 0 0 30px; padding-bottom: 26px; border-bottom: 1px solid var(--color-rule); }
.page-title p { font-size: 13px; color: var(--color-muted); margin: 12px 0 0; line-height: 1.9; }
.page-title > .btn { flex-shrink: 0; font-size: 12px; min-height: 36px; padding: 8px 16px; }
.resource-section { margin-top: 36px; }
.resource-section > h2 { margin-bottom: 22px; }
.resource-list { border: 1px solid var(--color-rule); border-radius: 14px; overflow: hidden; }
.resource-row { display: grid; grid-template-columns: 40px minmax(0,1fr) auto auto; align-items: center; gap: 18px; padding: 22px; border-bottom: 1px solid var(--color-rule); background: white; }
.resource-row:last-child { border-bottom: 0; }
.resource-row:hover { background: #fafbfe; }
.file-mark { display: grid; place-items: center; width: 38px; height: 44px; border: 1px solid #e1e7f5; border-radius: 8px; color: #7081ae; background: #f4f6fc; font-size: 10px; }
.resource-row h3 { font-size: 14px; letter-spacing: 0; }
.resource-row h3 a:hover { color: var(--color-accent-2); }
.resource-row p { font-size: 11px; color: #80889a; margin: 5px 0 0; line-height: 1.8; }
.resource-row > .inline-button { font-size: 12px; white-space: nowrap; }
.tag { display: inline-block; padding: 3px 9px; color: #66718b; background: #f0f3fa; border-radius: 5px; font-size: 10px; white-space: nowrap; }
.tag.free { color: #37755c; background: #edf7f1; }
.tag.paid { color: #956527; background: #fff4e2; }
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0; }
.toolbar input { flex: 1; min-width: 160px; }
.field { display: flex; flex-direction: column; font-size: 13px; gap: 8px; }
.field-input, select, textarea { border: 1px solid var(--color-rule-2); background: white; border-radius: 8px; padding: 10px 13px; font-size: 13px; min-height: 42px; max-width: 100%; }
.filters { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.filters select { margin-left: auto; }
.chip { display: inline-flex; align-items: center; min-height: 36px; border: 1px solid var(--color-rule); border-radius: 7px; padding: 6px 15px; font-size: 12px; background: white; color: #70798a; }
.chip:hover { background: #f3f5fc; }
.chip.active { color: #3451b2; background: #edf1ff; border-color: #dce3fb; }
.notice { border-left: 3px solid #9bafe5; padding: 16px 18px; margin: 24px 0; border-radius: 0 8px 8px 0; background: #f6f8ff; font-size: 13px; color: #66708b; }
.article { max-width: 76ch; font-size: 15px; line-height: 2; color: #414958; overflow-wrap: anywhere; }
.article h2 { font-size: 22px; margin: 34px 0 16px; color: #252d40; padding-bottom: 12px; border-bottom: 1px solid var(--color-rule); }
.article h3 { font-size: 18px; margin: 24px 0 12px; color: #343b4d; }
.article p { margin: 14px 0 20px; max-width: none; }
.article li { margin: 7px 0; }
.article strong { font-weight: 650; color: #2e3b60; }
.article blockquote { border-left: 3px solid #c8d3f2; padding: 10px 20px; margin: 24px 0; color: #68748b; background: #f7f9fd; }
.article pre { overflow-x: auto; padding: 18px; background: #f6f7f9; border-radius: 8px; font-size: 13px; }
.reading-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; border-bottom: 1px solid var(--color-rule); padding-bottom: 24px; margin-bottom: 28px; }
.reading-detail { border-top: 1px solid var(--color-rule); padding-top: 15px; margin-top: 22px; font-size: 14px; }
.reading-detail summary { cursor: pointer; min-height: 34px; color: #3451b2; font-size: 13px; }
.reading-detail[open] > summary { margin-bottom: 16px; }
.reading-detail p { line-height: 2; }
.word-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
.word-entry { min-width: 0; padding: 26px; border: 1px solid var(--color-rule); border-radius: 14px; background: white; }
.word-entry h2 { font-size: 22px; color: #354671; }
.word-entry p { color: var(--color-muted); font-size: 13px; }
.word-entry .pair-detail { color: #414b60; line-height: 1.95; }
.answer-details { margin: 0; }
.answer-details dt { color: #3451b2; margin-top: 20px; font-size: 12px; font-weight: 600; }
.answer-details dd { margin: 6px 0 0; font-size: 14px; line-height: 2; }
.question-article, .static-essay, .interview-entry { padding: 28px 0; border-top: 1px solid var(--color-rule); max-width: 80ch; }
.question-article .quiz-stem { font-size: 17px; line-height: 1.95; margin: 20px 0; letter-spacing: 0; }
.static-options { list-style-type: upper-alpha; padding-left: 28px; font-size: 14px; line-height: 2; }
.static-options li { padding-left: 8px; margin: 8px 0; }
.static-essay h3, .interview-entry h3 { font-size: 18px; }
.static-essay > .small { display: block; margin: 8px 0 16px; }
.material { padding: 24px; background: #f8f9fc; border: 1px solid var(--color-rule); border-radius: 12px; font-size: 14px; line-height: 2; }
.material h3 { margin-top: 22px; }
.interview-entry p { color: var(--color-muted); font-size: 14px; line-height: 2; }
.catalog-list { padding: 0; list-style: none; font-size: 13px; }
.catalog-list li { padding: 10px 0; border-bottom: 1px solid var(--color-rule); }
.brand-story { display: flex; align-items: center; gap: 28px; margin-bottom: 32px; padding: 28px; border: 1px solid var(--color-rule); border-radius: 16px; }
.brand-story img { width: 140px; height: 140px; object-fit: contain; border-radius: 50%; }
.brand-story h2 { font-size: 23px; }
.brand-story p { font-size: 13px; color: var(--color-muted); margin-bottom: 0; }
.guide-article > a { display: inline-block; margin-bottom: 12px; }
.empty { padding: 48px 24px; text-align: center; border: 1px dashed var(--color-rule-2); border-radius: 14px; }
.empty h2 { font-size: 23px; }
.empty p { font-size: 14px; color: var(--color-muted); }

/* Follow and unlock share the new typography, without changing the gate. */
.follow-panel { display: grid; grid-template-columns: minmax(0,1fr) 240px; align-items: center; gap: 32px; padding: 32px; border: 1px solid #e4e9f6; border-radius: 16px; background: #fbfcff; }
.follow-panel h2 { font-size: 26px; color: #3451b2; }
.follow-lead { font-size: 14px; color: var(--color-muted); }
.follow-steps { padding-left: 20px; font-size: 14px; line-height: 2; margin: 24px 0; }
.follow-steps li { margin-bottom: 10px; }
.follow-qr { margin: 0; text-align: center; }
.follow-qr img { width: 240px; height: auto; background: white; border: 1px solid var(--color-rule); border-radius: 12px; padding: 8px; }
.follow-qr figcaption { color: var(--color-muted); font-size: 11px; margin-top: 10px; }
.reading-preview { max-width: 84ch; margin: 28px 0; }
.preview-content { position: relative; max-height: 430px; overflow: clip; user-select: text; }
.preview-content::after { content: ""; position: absolute; inset: auto 0 0; height: 115px; pointer-events: none; background: linear-gradient(to bottom,var(--color-preview-clear),var(--color-paper)); }
.read-more-panel { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 24px 0 32px; text-align: center; }
.read-more-panel p { font-size: 13px; color: var(--color-muted); margin: 0; }
.read-more-button { min-width: 172px; min-height: 48px; font-size: 16px; box-shadow: 0 5px 18px rgb(52 81 178 / .16); }
.read-more-panel .small { font-size: 11px; }
.unlock-dialog { width: min(480px,calc(100% - 32px)); max-height: 90dvh; overflow-y: auto; border: 1px solid #e1e6f2; border-radius: 18px; padding: 0; background: white; color: var(--color-ink); box-shadow: var(--shadow-dialog); }
.unlock-dialog::backdrop { background: rgb(25 35 60 / .48); backdrop-filter: blur(3px); }
.unlock-dialog-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 26px; border-bottom: 1px solid var(--color-rule); }
.dialog-eyebrow { color: #8e98b1; font-size: 10px; letter-spacing: .08em; }
.unlock-dialog-header h2 { font-size: 19px; margin-top: 3px; }
.unlock-dialog-content { padding: 24px 30px; text-align: center; }
.unlock-dialog-content > p { font-size: 14px; line-height: 2; margin: 0; }
.unlock-keyword { display: inline-block; padding: 0 8px; margin-inline: 3px; color: #3451b2; border-radius: 5px; background: #edf1ff; font-weight: 700; }
.unlock-dialog-qr { width: 218px; height: 218px; max-width: 100%; margin: 18px auto 10px; object-fit: contain; }
.unlock-dialog .unlock-qr-caption { color: var(--color-muted); font-size: 11px; margin-bottom: 22px; }
.unlock-entry-row { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: 10px; }
.unlock-entry-row .field { margin: 0; }
.unlock-entry-row input { width: 100%; min-width: 0; min-height: 44px; background: #f9faff; }
.unlock-entry-row .btn { min-height: 44px; border-radius: 8px; padding-inline: 23px; }
.unlock-feedback { min-height: 22px; color: var(--color-error); font-size: 12px; margin: 8px 0 0; text-align: left; }
.unlock-dialog .unlock-help { color: #969eaf; font-size: 10px; margin-top: 6px; }
body:has(.unlock-dialog[open]) { overflow-y: hidden; }
.skip { position: fixed; left: 16px; top: -100px; z-index: 600; padding: 12px 20px; background: #3451b2; color: white; border-radius: 8px; }
.skip:focus-visible { top: 12px; }
.sr-only { position: absolute; clip-path: inset(50%); width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1200px) {
  .header-inner { padding-inline: 28px; gap: 22px; }
  .header-nav { gap: 18px; }
  .header-follow { padding-left: 18px; }
  .search-wrap input { width: 80px; }
  .app-shell { grid-template-columns: 218px minmax(0,1fr); }
  .sidebar { padding-inline: 16px; }
  #main { padding-inline: 32px; }
  .topbar, .footer { padding-inline: 32px; }
}
@media (max-width: 1000px) {
  .header-nav { gap: 16px; }
  .header-nav a { font-size: 12px; }
  .header-follow { display: none; }
  .header-inner { gap: 20px; }
  .home-hero { gap: 28px; }
  .hero-visual img { width: 260px; height: 260px; }
  .study-cards { gap: 16px; }
  .study-card { padding: 22px; }
  .resource-row { grid-template-columns: 36px minmax(0,1fr) auto; gap: 14px; padding: 20px; }
  .resource-row > .tag { display: none; }
  .follow-panel { grid-template-columns: minmax(0,1fr) 200px; padding: 26px; }
}
@media (max-width: 800px) {
  :root { --header-height: 68px; }
  .header-inner { padding-inline: 22px; gap: 16px; }
  .brand-name { font-size: 16px; }
  .brand-logo { width: 36px; height: 36px; }
  .header-nav { display: none; }
  .menu-toggle { display: inline-grid; flex-shrink: 0; }
  #global-search { margin-left: auto; margin-right: 0; }
  .search-wrap input { width: 140px; }
  .app-shell { display: block; }
  .sidebar, [data-page="home"] .sidebar { display: none; position: fixed; top: var(--header-height); bottom: 0; height: auto; width: 274px; z-index: 250; padding: 26px 20px; box-shadow: 10px 0 40px rgb(20 30 55 / .12); }
  .sidebar.open, [data-page="home"] .sidebar.open { display: flex; }
  .app-shell:has(.sidebar.open) > .nav-scrim { display: block; position: fixed; inset: var(--header-height) 0 0; width: 100%; height: calc(100dvh - var(--header-height)); border: 0; background: rgb(25 35 60 / .3); z-index: 240; }
  .home-hero { padding-top: 48px; }
  .hero-visual img { width: 230px; height: 230px; }
  .home-hero h1 { font-size: 36px; }
  .hero-content > p:not(.eyebrow) { font-size: 14px; }
  [data-page="home"] #main { padding-inline: 28px; }
  .study-cards { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; }
  .home-highlights { grid-template-columns: minmax(0,1fr); }
  .word-grid { gap: 16px; }
  .page-title h1 { font-size: 28px; }
  .footer { font-size: 10px; flex-wrap: wrap; }
}
@media (max-width: 560px) {
  .header-inner { padding-inline: 16px; gap: 10px; }
  .brand { gap: 8px; }
  .brand-name { font-size: 14px; }
  .brand-name small { font-size: 9px; }
  .brand-logo { width: 33px; height: 33px; }
  .search-wrap { padding: 7px 8px; gap: 6px; }
  .search-wrap input { width: 65px; font-size: 11px; }
  .search-wrap kbd { display: none; }
  .menu-toggle { width: 32px; }
  .home-hero { grid-template-columns: minmax(0,1fr); gap: 0; text-align: center; padding: 36px 0 28px; }
  .hero-visual { grid-row: 1; margin-bottom: 26px; }
  .hero-visual img { width: 152px; height: 152px; }
  .hero-visual p { display: none; }
  .hero-content .eyebrow { font-size: 10px; letter-spacing: .1em; margin-bottom: 12px; }
  .home-hero h1 { font-size: 34px; line-height: 1.45; }
  .hero-brand { font-size: 34px; margin-bottom: 5px; }
  .hero-content > p:not(.eyebrow) { font-size: 13px; margin: 18px auto 22px; }
  .hero-content .actions, .hero-note { justify-content: center; }
  .hero-content .btn { font-size: 12px; padding-inline: 18px; min-height: 43px; }
  .hero-note { gap: 14px; font-size: 10px; margin-top: 19px; }
  [data-page="home"] #main { padding: 0 20px 36px; }
  .home-section { margin-top: 30px; }
  .section-title { gap: 10px; margin-bottom: 18px; }
  .section-title h2 { font-size: 21px; }
  .section-title p { font-size: 12px; }
  .section-title > a { font-size: 11px; }
  .study-cards { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .study-card { padding: 22px; }
  .card-top { margin-bottom: 12px; }
  .study-card p { margin-bottom: 18px; }
  .home-highlights { margin-top: 28px; gap: 16px; }
  .word-preview, .tip-block { padding: 24px; }
  .word-pair { font-size: 26px; }
  .word-pair span { margin-inline: 10px; }
  .word-bottom { font-size: 10px; gap: 8px; }
  .word-bottom .inline-button { font-size: 11px; }
  .tip-block h2 { font-size: 20px; }
  .resource-section { margin-top: 28px; }
  .resource-row { grid-template-columns: 30px minmax(0,1fr); gap: 12px; padding: 18px; }
  .file-mark { width: 30px; height: 38px; font-size: 9px; }
  .resource-row h3 { font-size: 13px; }
  .resource-row p { font-size: 10px; }
  .resource-row > .inline-button { grid-column: 2; min-height: 24px; font-size: 11px; margin-top: -3px; }
  .follow-banner { align-items: flex-start; flex-direction: column; padding: 24px; margin-top: 30px; gap: 18px; }
  .follow-banner h2 { font-size: 20px; }
  .follow-banner p { font-size: 12px; }
  .topbar { padding: 18px 20px 0; font-size: 10px; }
  .topbar .text-link { font-size: 10px; }
  #main { padding: 26px 20px 40px; }
  .page-title { flex-wrap: wrap; gap: 16px; padding-bottom: 22px; margin-bottom: 24px; }
  .page-title h1 { font-size: 25px; }
  .page-title p { font-size: 12px; }
  .page-title > .btn { font-size: 11px; min-height: 34px; }
  .word-grid { grid-template-columns: minmax(0,1fr); }
  .word-entry { padding: 20px; }
  .word-entry h2 { font-size: 21px; }
  .filters { gap: 6px; }
  .chip { font-size: 11px; padding-inline: 12px; }
  .filters select { margin-left: 0; min-height: 36px; font-size: 11px; }
  .article { font-size: 14px; }
  .article h2 { font-size: 20px; }
  .brand-story { flex-direction: column; align-items: flex-start; padding: 22px; gap: 18px; }
  .brand-story img { width: 100px; height: 100px; }
  .brand-story h2 { font-size: 21px; }
  .follow-panel { grid-template-columns: minmax(0,1fr); padding: 24px; }
  .follow-qr { grid-row: 1; justify-self: center; }
  .follow-qr img { width: 220px; }
  .follow-panel h2 { font-size: 24px; }
  .follow-steps { font-size: 13px; }
  .preview-content { max-height: 390px; }
  .preview-content .word-grid { grid-template-columns: minmax(0,1fr); }
  .read-more-panel p { font-size: 12px; }
  .read-more-panel .small { font-size: 10px; }
  .unlock-dialog-header { padding: 16px 20px; }
  .unlock-dialog-content { padding: 20px; }
  .unlock-dialog-qr { width: 200px; height: 200px; }
  .unlock-dialog-content > p { font-size: 13px; }
  .unlock-entry-row input { font-size: 12px; }
  .footer { padding: 24px 20px; flex-direction: column; align-items: flex-start; gap: 8px; }
  [data-page="home"] .footer { align-items: center; }
  [data-page="home"] .footer a span { display: block; margin: 4px 0 0; }
}
@media (max-width: 360px) {
  .brand-name small { display: none; }
  .header-inner { gap: 7px; }
  .search-wrap input { width: 48px; }
  .home-hero h1, .hero-brand { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}