@font-face { font-family: "Poppins"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/poppins-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/poppins-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Poppins"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/poppins-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/outfit-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/outfit-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Outfit"; font-style: normal; font-weight: 800; font-display: swap; src: url("../fonts/outfit-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans TC"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/noto-sans-tc-chinese-traditional-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans TC"; font-style: normal; font-weight: 700 900; font-display: swap; src: url("../fonts/noto-sans-tc-chinese-traditional-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Yellowtail"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/yellowtail-latin-400-normal.woff2") format("woff2"); }

:root {
  --ww-blue: #6183FC;
  --ww-blue-strong: #3F63E8;
  --ww-link: #3654C7;
  --ww-blue-soft: #EEF2FF;
  --ww-gray-soft: #EFF1F5;
  --ww-gray: #646262;
  --ww-ink: #212121;
  --surface: #FFFFFF;
  --line: #DDE2EC;
  --surface-accent-border: #DCE3FF;
  --surface-warning-border: #F0C7B8;
  --danger-soft: #FFF5F1;
  --danger: #9B3515;
  --space-section: 28px;
  --space-major: 96px;
  --radius-sm: 12px;
  --radius-md: 20px;
  --radius-lg: 28px;
  --radius-pill: 999px;
  --font-title: "Poppins", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-body: "Outfit", "Noto Sans TC", -apple-system, BlinkMacSystemFont, "PingFang TC", "Microsoft JhengHei", sans-serif;
  --font-accent: "Yellowtail", "Noto Sans TC", cursive;
  --motion-duration: 220ms;
  --motion-easing: cubic-bezier(.4, 0, .2, 1);
  --shadow-raised: 0 14px 32px rgba(33, 33, 33, .1);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { background: var(--ww-gray-soft); scroll-behavior: smooth; }
body { margin: 0; color: var(--ww-ink); background: var(--ww-gray-soft); font-family: var(--font-body); font-size: 16px; line-height: 1.7; }
main { width: min(100% - 32px, 780px); margin: 0 auto; padding: 48px 0; }
h1, h2, h3, h4, .brand, .hub-brand, .global-brand { font-family: var(--font-title); }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 12px; font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.18; }
h2 { font-size: 1.35rem; line-height: 1.3; }
a { color: var(--ww-link); text-decoration: underline; text-underline-offset: .16em; }
:not(pre) > code, .technical-value { overflow-wrap: anywhere; word-break: break-word; }
a, button, summary { transition-duration: var(--motion-duration); transition-property: color, background-color, border-color, box-shadow, transform; transition-timing-function: var(--motion-easing); }
a:active, button:active, summary:active { transform: scale(.97); }
a:focus-visible, button:focus-visible, summary:focus-visible, .skip-link:focus-visible { outline: 3px solid var(--ww-blue); outline-offset: 3px; }
.eyebrow { color: var(--ww-blue-strong); font-weight: 700; letter-spacing: .06em; }
.lead { margin-bottom: 0; font-size: 1.1rem; }
.brand-accent { font-family: var(--font-accent); }
.skip-link { position: fixed; top: 12px; left: 12px; z-index: 100; min-height: 44px; padding: 9px 14px; border-radius: var(--radius-sm); color: #FFFFFF; background: var(--ww-blue-strong); transform: translateY(-220%); }
.skip-link:focus-visible { transform: translateY(0); }

/* Pinned local MDI assets; names and provenance live in scripts/lib/icon_registry.js. */
.mdi-icon { display: inline-block; width: 24px; height: 24px; flex: 0 0 auto; background-color: currentColor; -webkit-mask-image: var(--mdi-icon); mask-image: var(--mdi-icon); -webkit-mask-position: center; mask-position: center; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; }
[data-icon="home"] { --mdi-icon: url("../icons/home.svg"); }
[data-icon="book-open-page-variant"], [data-icon="chapter"] { --mdi-icon: url("../icons/book-open-page-variant.svg"); }
[data-icon="clipboard-check"], [data-icon="evidence"] { --mdi-icon: url("../icons/clipboard-check.svg"); }
[data-icon="message-text"] { --mdi-icon: url("../icons/message-text.svg"); }
[data-icon="shield-outline"], [data-icon="boundary"] { --mdi-icon: url("../icons/shield-outline.svg"); }
[data-icon="link-variant"], [data-icon="source"] { --mdi-icon: url("../icons/link-variant.svg"); }
[data-icon="lightbulb-outline"], [data-icon="concept"] { --mdi-icon: url("../icons/lightbulb-outline.svg"); }
[data-icon="clipboard-text-outline"], [data-icon="prepare"] { --mdi-icon: url("../icons/clipboard-text-outline.svg"); }
[data-icon="arrow-right"], [data-icon="steps"] { --mdi-icon: url("../icons/arrow-right.svg"); }
[data-icon="check"] { --mdi-icon: url("../icons/check.svg"); }
[data-icon="alert-circle-outline"], [data-icon="troubleshoot"] { --mdi-icon: url("../icons/alert-circle-outline.svg"); }
[data-icon="help-circle-outline"], [data-icon="faq"] { --mdi-icon: url("../icons/help-circle-outline.svg"); }

/* Canonical global navigation */
.global-header { position: sticky; top: 0; z-index: 20; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .97); }
.global-header__inner { display: flex; width: min(100% - 40px, 1280px); min-height: 72px; margin: 0 auto; align-items: center; justify-content: space-between; gap: 24px; }
.global-brand { display: inline-flex; min-height: 44px; align-items: center; color: var(--ww-ink); font-size: 1.05rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.global-brand .brand-accent { margin-right: 8px; color: var(--ww-blue-strong); font-size: 1.3rem; font-weight: 400; }
.global-nav { display: flex; max-width: 100%; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: thin; }
.global-nav a, .global-nav__pending { display: inline-flex; min-height: 44px; padding: 9px 12px; align-items: center; border-radius: var(--radius-pill); color: var(--ww-gray); font-weight: 700; text-decoration: none; white-space: nowrap; }
.global-nav a:hover, .global-nav a[aria-current] { color: #FFFFFF; background: var(--ww-blue-strong); }
.global-nav__pending { color: var(--ww-gray); opacity: .62; cursor: not-allowed; }

.catalog > .site-header, .chapter-content > section, .hub-shell > .hub-section, .resource-page > .content-panel { margin-bottom: 24px; padding: var(--space-section); border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }

/* Generated chapter platform */
.layout { display: grid; grid-template-columns: minmax(240px, 288px) minmax(0, 1fr); min-height: calc(100vh - 72px); }
.sidebar { position: sticky; top: 72px; max-height: calc(100vh - 72px); padding: 28px 22px; align-self: start; overflow: auto; border-right: 1px solid var(--line); background: var(--surface); }
.sidebar .brand { display: flex; min-height: 44px; align-items: center; color: var(--ww-ink); font-size: 1.25rem; font-weight: 700; text-decoration: none; }
.sidebar .brand-sub { color: var(--ww-gray); font-size: .9rem; }
.sidebar h2 { margin: 24px 0 8px; font-size: .9rem; letter-spacing: .05em; }
.sidebar ol { margin: 0; padding: 0; list-style: none; }
.sidebar li a, .toc-in-chapter a { display: flex; min-height: 44px; padding: 8px 10px; align-items: center; border-radius: var(--radius-sm); text-decoration: none; }
.sidebar li a:hover, .toc-in-chapter a:hover { background: var(--ww-blue-soft); }
.sidebar a.active, .sidebar a[aria-current="page"], .toc-in-chapter a[aria-current="location"] { color: #FFFFFF; background: var(--ww-blue-strong); }
.sidebar .part-label { margin-top: 14px; color: var(--ww-gray); font-size: .78rem; font-weight: 700; }
.nav-toggle { display: none; width: 100%; min-height: 44px; padding: 9px 14px; border: 1px solid var(--ww-blue); border-radius: var(--radius-sm); color: var(--ww-blue-strong); background: var(--ww-blue-soft); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
.chapter-content { width: min(100% - 48px, 920px); padding: 48px 0 72px; }
.chapter-header { margin-bottom: 24px; padding: 32px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--surface) 20%, var(--ww-blue-soft) 100%); }
.chapter-header .kicker { color: var(--ww-blue-strong); font-weight: 700; }
.status-badge { display: inline-block; margin: 10px 0 0; padding: 4px 12px; border-radius: var(--radius-pill); color: var(--ww-gray); background: var(--ww-gray-soft); font-size: .85rem; }
.planned-note { margin-bottom: 0; color: var(--ww-gray); }
.chapter-content > section[id] { scroll-margin-top: calc(72px + 16px); }
.chapter-content > section h2[data-icon] { display: flex; align-items: center; gap: 10px; }
.chapter-content > section h2[data-icon]::before { width: 40px; height: 40px; flex: 0 0 auto; border-radius: var(--radius-sm); background-color: var(--ww-blue-soft); background-image: var(--mdi-icon); background-position: center; background-repeat: no-repeat; background-size: 22px; content: ""; }
.source-chrome { border-left: 4px solid var(--ww-blue); }
.source-chrome a { overflow-wrap: anywhere; word-break: break-word; }
.evidence-boundary { color: var(--ww-gray); font-size: .92rem; }
.pager { display: grid; margin: var(--space-section) 0; grid-template-columns: 1fr 1fr; gap: 16px; }
.pager a { display: flex; min-height: 44px; padding: 18px; flex-direction: column; justify-content: center; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); text-decoration: none; }
.pager a:hover { border-color: var(--ww-blue); box-shadow: var(--shadow-raised); }
.pager .next { text-align: right; }
.pager .label { color: var(--ww-gray); font-size: .82rem; }
.pager .title { font-weight: 700; }
.site-footer { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ww-gray); font-size: .86rem; }
.site-footer a { overflow-wrap: anywhere; }
.catalog { width: min(100% - 32px, 1120px); }
.catalog-part { padding: 0; border: 0; background: transparent; }
.chapter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 16px; }
.chapter-card { display: block; min-height: 220px; padding: 22px; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ww-ink); background: var(--surface); text-decoration: none; }
.chapter-card:hover { border-color: var(--ww-blue); box-shadow: var(--shadow-raised); transform: translateY(-3px); }
.chapter-card .num { color: var(--ww-blue-strong); font-weight: 700; }
.chapter-card h3 { margin: 6px 0; }
.chapter-card p { color: var(--ww-gray); }
.chapter-example { margin: 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ww-gray-soft); }
.task-summary { display: grid; margin: 18px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.task-summary > div { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ww-blue-soft); }
.task-summary dt { color: var(--ww-blue-strong); font-weight: 800; }
.task-summary dd { margin: 3px 0 0; }
.plain-language-track { margin-top: 16px; }
.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.analogy-term { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ww-blue-soft); }
.analogy-term h3 { margin-top: 0; }
.analogy-term p:last-child { margin-bottom: 0; }
.advanced-note, .faq { margin-top: 16px; border: 1px solid var(--surface-accent-border); border-radius: var(--radius-sm); background: var(--ww-blue-soft); }
.advanced-note summary, .faq summary { display: flex; min-height: 44px; padding: 10px 14px; align-items: center; color: var(--ww-blue-strong); font-weight: 800; cursor: pointer; }
.advanced-note > p, .faq > p { margin: 0; padding: 0 14px 14px; }
.completion-checklist { padding-left: 1.4rem; }
.completion-checklist li + li { margin-top: 8px; }
.next-step { margin: 18px 0 0; padding: 14px 16px; border-left: 4px solid var(--ww-blue); border-radius: var(--radius-sm); background: var(--ww-blue-soft); }
.responsibility-flow { margin: 20px 0 0; padding: 18px; border: 1px solid var(--surface-accent-border); border-radius: var(--radius-md); background: var(--surface); }
.responsibility-flow figcaption { color: var(--ww-blue-strong); font-size: 1.05rem; font-weight: 800; }
.responsibility-flow figcaption + p { color: var(--ww-gray); }
.flow-list { display: grid; margin: 18px 0; padding: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; list-style: none; }
.flow-list li { position: relative; display: flex; min-width: 0; padding: 14px; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ww-blue-soft); overflow-wrap: anywhere; }
.flow-list li:not(:last-child)::after { position: absolute; top: calc(50% - 6px); right: -19px; width: 10px; height: 10px; border-top: 2px solid var(--ww-blue-strong); border-right: 2px solid var(--ww-blue-strong); content: ""; transform: rotate(45deg); }
.flow-list span { color: var(--ww-gray); font-size: .9rem; }
.flow-boundary { margin-bottom: 0; }
.table-scroll { max-width: 100%; margin: 18px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface); }
.table-scroll:focus-visible { outline: 3px solid var(--ww-blue); outline-offset: 3px; }
.table-scroll table { width: 100%; min-width: 640px; border-collapse: collapse; }
.table-scroll caption { padding: 12px 14px; color: var(--ww-blue-strong); font-weight: 700; text-align: left; }
.table-scroll th, .table-scroll td { padding: 10px 12px; border-top: 1px solid var(--line); overflow-wrap: anywhere; text-align: left; vertical-align: top; }
.table-scroll th { background: var(--ww-gray-soft); }

/* WoowTech resource hub */
.hub-shell, .resource-page { width: min(100% - 40px, 1120px); }
.hub-shell { padding-bottom: 28px; }
.hub-hero, .page-hero { position: relative; margin-bottom: var(--space-section); padding: clamp(30px, 6vw, 68px); overflow: hidden; border: 1px solid var(--surface-accent-border); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--surface) 20%, var(--ww-blue-soft) 100%); }
.hub-hero::after, .page-hero::after { position: absolute; right: -75px; bottom: -110px; width: 260px; height: 260px; border-radius: 50%; background: rgba(97, 131, 252, .12); content: ""; }
.hub-hero > *, .page-hero > * { position: relative; z-index: 1; }
.hub-hero h1, .page-hero h1 { max-width: 840px; }
.hub-hero .lead, .page-hero .lead { max-width: 780px; }
.boundary-note { margin: 20px 0 0; padding: 14px 16px; border-left: 4px solid var(--ww-blue); border-radius: var(--radius-sm); color: var(--ww-gray); background: var(--ww-blue-soft); }
.hub-section { margin-bottom: var(--space-section); padding: 30px; }
.section-heading { margin-bottom: 22px; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.resource-card { position: relative; display: flex; min-height: 280px; padding: 26px; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); color: var(--ww-ink); background: #FFFFFF; text-decoration: none; }
.resource-card:hover { border-color: var(--ww-blue); box-shadow: var(--shadow-raised); transform: translateY(-3px); }
.resource-card:focus-visible { outline: 3px solid var(--ww-blue); outline-offset: 3px; }
.card-icon { width: 48px; height: 48px; margin-bottom: 24px; border-radius: var(--radius-sm); background-color: var(--ww-blue-soft); background-image: var(--mdi-icon); background-position: center; background-repeat: no-repeat; background-size: 26px; -webkit-mask-image: none; mask-image: none; }
.card-type { color: var(--ww-blue-strong); font-size: .82rem; font-weight: 800; letter-spacing: .08em; }
.resource-card h3 { margin: 5px 0 8px; font-size: 1.4rem; }
.resource-card p { color: var(--ww-gray); }
.resource-metadata { margin: 12px 0 22px; font-size: .9rem; }
.resource-metadata div { padding: 8px 0; border-top: 1px solid var(--line); }
.resource-metadata dt { color: var(--ww-gray); font-size: .8rem; font-weight: 700; }
.resource-metadata dd { margin: 2px 0 0; overflow-wrap: anywhere; }
.resource-metadata ul { margin: 0; padding-left: 1.2rem; }
.card-action { margin-top: auto; color: var(--ww-blue-strong); font-weight: 700; }
.compact-section { display: grid; grid-template-columns: minmax(180px, .6fr) minmax(0, 1.4fr); gap: 30px; }
.steps-list { margin: 0; padding-left: 1.4rem; }
.steps-list li + li { margin-top: 10px; }
.hub-footer { width: min(100% - 40px, 1120px); margin: 0 auto; padding: 20px 0; color: var(--ww-gray); font-size: .9rem; }
.hub-footer p { margin-bottom: 4px; }
.hub-topbar { display: flex; width: min(100% - 40px, 1120px); margin: 0 auto; padding: 14px 0; align-items: center; justify-content: space-between; gap: 24px; }
.hub-brand { display: inline-flex; min-height: 44px; align-items: center; color: var(--ww-ink); font-weight: 800; text-decoration: none; }
.hub-brand span { margin-left: 8px; color: var(--ww-gray); font-weight: 500; }
.hub-nav { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-nav a { display: inline-flex; min-height: 44px; padding: 8px 12px; align-items: center; border-radius: var(--radius-pill); text-decoration: none; }
.hub-nav a:hover, .hub-nav a[aria-current="page"] { color: #FFFFFF; background: var(--ww-blue-strong); }
.resource-page { padding-top: 14px; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
.hero-actions { display: flex; margin-top: 26px; flex-wrap: wrap; gap: 12px; }
.button { display: inline-flex; min-height: 44px; padding: 10px 18px; align-items: center; justify-content: center; border: 2px solid var(--ww-blue-strong); border-radius: var(--radius-sm); color: #FFFFFF; background: var(--ww-blue-strong); font-weight: 700; text-decoration: none; }
.button.secondary { color: var(--ww-blue-strong); background: #FFFFFF; }
.button:hover { box-shadow: 0 7px 18px rgba(33, 33, 33, .16); }
.content-panel { margin-bottom: 24px; padding: clamp(24px, 4vw, 38px); }
.content-panel h2 { font-size: clamp(1.45rem, 3vw, 2rem); }
.learning-stage { margin-bottom: var(--space-section); }
.stage-outcome { max-width: 760px; margin-top: -8px; color: var(--ww-gray); }
.route-grid, .shared-records { display: grid; margin-bottom: var(--space-section); grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.route-card, .help-record, .glossary-record { padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.help-record, .glossary-record { scroll-margin-top: calc(72px + 16px); }
.route-card h2, .help-record h2, .glossary-record h2 { margin-top: 0; font-size: 1.35rem; overflow-wrap: anywhere; }
.route-card p, .help-record p, .glossary-record p { color: var(--ww-gray); }
.pilot-pending-notice { padding: 12px 14px; border-left: 4px solid var(--ww-blue); border-radius: var(--radius-sm); color: var(--ww-ink) !important; background: var(--ww-blue-soft); }
.help-actions { margin: 16px 0 0; }
.help-actions div { padding: 10px 0; border-top: 1px solid var(--line); }
.help-actions dt { color: var(--ww-ink); font-weight: 800; }
.help-actions dd { margin: 3px 0 0; color: var(--ww-gray); }
.button-link { display: inline-flex; min-height: 44px; padding: 9px 16px; align-items: center; border: 2px solid var(--ww-blue-strong); border-radius: var(--radius-sm); color: #FFFFFF; background: var(--ww-blue-strong); font-weight: 700; text-decoration: none; }
.glossary-list { grid-template-columns: 1fr; }
.help-record:target, .glossary-record:target { border-color: var(--ww-blue); box-shadow: var(--shadow-raised); }
.check-grid, .decision-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.check-grid article, .decision-grid > div { padding: 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ww-blue-soft); }
.check-grid h3, .decision-grid h3 { margin: 0 0 6px; }
.check-grid p, .decision-grid p { margin: 0; color: var(--ww-gray); }
.warning-panel, .stop-panel { border-color: var(--surface-warning-border); background: var(--danger-soft); }
.rule-list { margin-bottom: 0; padding-left: 1.3rem; }
.rule-list li + li { margin-top: 10px; }
.prompt-structure { display: grid; margin: 0; padding: 0; counter-reset: prompt; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; list-style: none; }
.prompt-structure li { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ww-blue-soft); }
.prompt-structure li::before { margin-right: 7px; color: var(--ww-blue-strong); content: counter(prompt, decimal-leading-zero); counter-increment: prompt; font-weight: 800; }
.prompt-panel blockquote { margin: 18px 0; padding: 20px; border: 1px solid #CDD7FF; border-left: 5px solid var(--ww-blue); border-radius: var(--radius-sm); background: var(--ww-blue-soft); }
.prompt-panel blockquote p { margin: 0; }
.skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.stop-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.stop-list article { padding: 20px; border: 1px solid #EFC9BA; border-radius: var(--radius-sm); background: #FFFFFF; }
.stop-label { color: var(--danger); font-size: .8rem; font-weight: 900; letter-spacing: .08em; }
.stop-list h3 { margin: 6px 0; }
.stop-list p { margin: 0; }
.page-next { display: flex; margin: 28px 0 6px; padding: 20px 24px; align-items: center; justify-content: space-between; gap: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #FFFFFF; }
.page-next span { color: var(--ww-gray); font-size: .85rem; }
.page-next a { display: inline-flex; min-height: 44px; align-items: center; font-weight: 800; text-decoration: none; }
.page-footer { border-top: 1px solid var(--line); }
.not-found { display: flex; width: min(100% - 32px, 720px); min-height: 90vh; flex-direction: column; justify-content: center; }
.error-code { margin: 0; color: #DFE5FF; font-size: clamp(5rem, 20vw, 10rem); font-weight: 900; line-height: .8; }
.error-nav { display: flex; margin-top: 24px; flex-wrap: wrap; gap: 12px; }

@media (min-width: 821px) {
  .hub-hero, .hub-shell > .page-hero, .hub-shell > .hub-section, .resource-page > .page-hero, .resource-page > .content-panel, .catalog > .site-header, .catalog > .catalog-part, .resource-page > .shared-records { margin-bottom: var(--space-major); }
}

@media (max-width: 820px) {
  .global-header { position: static; }
  .global-header__inner { width: min(100% - 24px, 1280px); padding: 10px 0; align-items: flex-start; flex-direction: column; gap: 4px; }
  .global-nav { width: 100%; padding-bottom: 3px; }
  .layout { display: block; min-height: 0; }
  .sidebar { position: static; max-height: none; padding: 18px 12px; border-right: 0; border-bottom: 1px solid var(--line); }
  .sidebar > .brand, .sidebar > .brand-sub { display: none; }
  .js .nav-toggle { display: block; }
  .js .sidebar.is-collapsed .chapter-navigation-panel { display: none; }
  .chapter-content { width: min(100% - 24px, 920px); padding-top: 24px; }
  .pager { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .resource-grid, .route-grid, .shared-records, .check-grid, .decision-grid, .prompt-structure, .skill-grid, .stop-list, .compact-section, .task-summary, .role-grid { grid-template-columns: 1fr; }
  .flow-list { grid-template-columns: 1fr; }
  .flow-list li:not(:last-child)::after { top: auto; right: calc(50% - 6px); bottom: -19px; transform: rotate(135deg); }
  .hub-topbar { align-items: flex-start; flex-direction: column; }
  .hub-nav { width: 100%; }
  .hub-brand span { display: block; margin-left: 0; }
  .page-next { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 480px) {
  main { width: min(100% - 24px, 780px); padding: 24px 0; }
  .catalog > .site-header, .chapter-content > section { padding: 20px; }
  .hub-shell, .resource-page, .hub-topbar, .hub-footer { width: min(100% - 24px, 1120px); }
  .hub-hero, .page-hero, .hub-section, .content-panel { padding: 22px; border-radius: var(--radius-md); }
  .resource-card { min-height: 240px; padding: 21px; }
  .hub-nav a { padding: 8px 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}