:root {
  color-scheme: dark;
  --ink: #edf2ee;
  --muted: #bac7be;
  --dim: #87958c;
  --panel: #1b2420;
  --panel-raised: #202b26;
  --line: #34423a;
  --mint: #a9ddc0;
  --warm: #e6bf91;
  --reader-font-size: 16px;
  --reader-background: #1b2420;
  --reader-text: #edf2ee;
  --reader-muted: rgba(237, 242, 238, .86);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Noto Sans TC", sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; max-width: 100%; overflow-x: hidden; background: radial-gradient(ellipse at 15% 0%, #1a2620 0, #121916 34rem, #101512 72rem); color: var(--ink); font-size: 15px; line-height: 1.7; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: clamp(27px, 3.3vw, 38px); line-height: 1.3; letter-spacing: -.035em; }
h2 { font-size: 21px; line-height: 1.45; }
h3 { font-size: 16px; line-height: 1.5; }
a { color: var(--mint); text-underline-offset: 4px; overflow-wrap: anywhere; }
button, input, textarea, select { font: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--mint); outline-offset: 4px; }
button, a { touch-action: manipulation; }
.skip-link { position: fixed; top: -70px; left: 16px; z-index: 20; padding: 10px 14px; border-radius: 7px; background: var(--panel-raised); color: var(--ink); }
.skip-link:focus { top: 10px; }
.site-header, main, footer { width: min(1200px, calc(100% - 48px)); margin-inline: auto; }
.site-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 22px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; flex: 0 0 auto; }
.brand-mark { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid #567361; border-radius: 12px; color: var(--mint); font-size: 23px; background: #1c2a22; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: 15px; }
.brand small { color: var(--dim); font-size: 9px; letter-spacing: .2em; }
.site-header nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; font-size: 12px; }
.site-header nav a { color: var(--muted); text-decoration: none; }
.site-header nav a:hover { color: var(--warm); }
.board-menu { position: relative; flex: 0 0 auto; }
.board-menu summary { cursor: pointer; list-style: none; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; color: var(--muted); font-size: 11px; }
.board-menu summary::-webkit-details-marker { display: none; }
.board-menu summary::after { content: '⌄'; margin-left: 8px; color: var(--mint); }
.board-menu[open] summary { border-color: #607a68; background: #202d25; color: var(--ink); }
.board-menu:not([open]) > .project-switcher { display: none; }
.board-menu .project-switcher { position: absolute; z-index: 12; top: calc(100% + 7px); right: 0; display: grid; width: min(320px, calc(100vw - 28px)); gap: 5px; padding: 8px; border: 1px solid #4b5d50; border-radius: 10px; background: #18211b; box-shadow: 0 16px 40px #050906bb; }
.project-switcher .project-link { display: block; max-width: none; padding: 8px 10px; border: 1px solid transparent; border-radius: 7px; color: var(--muted); font-size: 11px; text-align: left; }
.project-switcher .project-link:hover, .project-switcher .project-link[aria-current] { border-color: #526c59; background: #202d25; color: var(--mint); }
main { min-width: 0; }
.home-view { padding: 28px 0 8px; }
.home-hero { padding: clamp(25px, 5vw, 54px); border: 1px solid #45594b; border-radius: 19px; background: linear-gradient(128deg, rgba(36, 54, 43, .96), rgba(25, 35, 29, .94) 55%, rgba(39, 42, 33, .95)); box-shadow: 0 22px 65px #05090640; }
.eyebrow { color: var(--mint); font-size: 10px; font-weight: 750; letter-spacing: .16em; }
.home-hero h1 { max-width: 850px; margin-top: 10px; font-size: clamp(31px, 5vw, 52px); line-height: 1.22; }
.home-hero > p:not(.eyebrow):not(.global-search-status) { max-width: 720px; margin-top: 13px; color: var(--muted); font-size: 15px; }
.home-quick-links { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px; }
.global-search-form { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: end; gap: 10px; max-width: 850px; margin-top: 25px; }
.search-field { display: block; min-width: 0; width: 100%; }
.search-field > span, .filter-field > span { display: block; margin-bottom: 6px; color: var(--muted); font-size: 11px; }
input, textarea, select { width: 100%; min-width: 0; color: var(--ink); background: #111815; border: 1px solid #405047; border-radius: 8px; padding: 10px 12px; font-size: 13px; }
input::placeholder, textarea::placeholder { color: #84928a; }
input:hover, textarea:hover, select:hover { border-color: #65796c; }
textarea { resize: vertical; }
.button { display: inline-flex; min-height: 39px; align-items: center; justify-content: center; border: 1px solid #4b5b51; border-radius: 8px; padding: 8px 13px; background: #26322b; color: var(--ink); text-decoration: none; cursor: pointer; white-space: nowrap; font-size: 12px; font-weight: 650; }
.button:hover { border-color: var(--mint); background: #304036; }
.button:disabled { opacity: .45; cursor: default; }
.button.primary { border-color: #a9c5ad; background: #b7d6bf; color: #16231a; }
.button.primary:hover { border-color: #d4ead8; background: #cde7d2; }
.global-search-status { min-height: 24px; margin-top: 12px; color: var(--muted); font-size: 12px; }
.global-search-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 4px; }
.global-result-card { min-width: 0; padding: 16px; border: 1px solid #43544a; border-radius: 10px; background: #17211b; color: inherit; text-decoration: none; }
.global-result-card:hover { border-color: #8eb59a; background: #202d25; }
.global-result-card .topic-category { display: block; }
.global-result-card h3 { margin-top: 4px; color: var(--ink); }
.global-result-card p { margin-top: 5px; color: var(--muted); font-size: 12px; }
.global-result-arrow { display: block; margin-top: 10px; color: var(--mint); font-size: 11px; }
.home-section { margin-top: 39px; }
.home-section-heading { display: flex; justify-content: space-between; align-items: end; gap: 18px; margin-bottom: 16px; }
.home-section-heading h2 { margin-top: 4px; font-size: 24px; }
.home-section-heading > div > p:not(.eyebrow) { margin-top: 5px; color: var(--muted); font-size: 13px; }
.text-link { display: inline-block; font-size: 12px; white-space: nowrap; }
.home-board-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.home-board-card { position: relative; min-width: 0; min-height: 185px; display: flex; flex-direction: column; align-items: flex-start; padding: 18px; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, #1c2620, #171e1a); color: inherit; text-decoration: none; transition: border-color .15s, transform .15s, background .15s; }
.home-board-card:hover { transform: translateY(-2px); border-color: #718f7a; background: #202b24; }
.home-board-code { color: var(--warm); font-size: 11px; font-weight: 750; letter-spacing: .12em; }
.home-board-index { position: absolute; top: 17px; right: 17px; color: var(--dim); font-size: 10px; }
.home-board-card h3 { max-width: 95%; margin-top: 7px; }
.home-board-card p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.home-board-count { margin-top: auto; padding-top: 14px; color: var(--mint); font-size: 11px; }
.learning-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.learning-path-card { display: flex; flex-direction: column; min-width: 0; padding: 19px; border: 1px solid #4a594c; border-radius: 12px; background: linear-gradient(155deg, #202c24, #1a211d); }
.learning-path-card > .eyebrow { color: var(--warm); }
.learning-path-card h3 { margin-top: 4px; font-size: 18px; }
.path-description { margin-top: 7px; color: var(--muted); font-size: 12px; }
.path-step-list { display: grid; gap: 5px; margin: 15px 0 18px; padding-left: 21px; color: var(--dim); font-size: 11px; }
.path-step-list a { color: var(--muted); text-decoration: none; }
.path-step-list a:hover { color: var(--mint); text-decoration: underline; }
.learning-path-card .button { align-self: flex-start; margin-top: auto; }
.model-learning-details { padding: 15px 17px; border: 1px solid var(--line); border-radius: 11px; background: #171f1a; }
.model-learning-details summary { cursor: pointer; color: var(--mint); font-size: 13px; font-weight: 700; }
.model-learning-details summary:focus-visible { outline-offset: 5px; }
.model-learning-details > p { margin-top: 8px; color: var(--muted); font-size: 12px; }
.model-learning-details[open] #model-learning-paths { margin-top: 14px; }
.concept-home-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .55fr); align-items: center; gap: 18px; padding: 20px; border: 1px solid #73634c; border-radius: 13px; background: linear-gradient(125deg, #292a21, #20271f 70%, #23291f); }
.concept-home-course-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.concept-home-course-grid .concept-home-card { min-width: 0; grid-template-columns: minmax(0, 1fr); }
.concept-map-home-card { border-color: #536c58; background: linear-gradient(125deg, #202e27, #20271f 70%, #222b23); }
.concept-video-home-card { border-color: #6d5551; background: linear-gradient(125deg, #302624, #232521 70%, #292821); }
.concept-home-card .eyebrow { color: var(--warm); }
.concept-home-card h2 { margin-top: 4px; font-size: 21px; }
.concept-home-card p:not(.eyebrow) { max-width: 650px; margin-top: 6px; color: var(--muted); font-size: 12px; }
.concept-home-actions { min-width: 0; display: grid; justify-items: start; gap: 8px; }
.concept-home-actions > p { margin: 0 !important; color: var(--dim) !important; font-size: 10px !important; }
.concept-home-actions .text-link { white-space: normal; }
.prompt-workshop { padding: clamp(20px, 3.5vw, 32px); border: 1px solid #5e5342; border-radius: 14px; background: linear-gradient(130deg, #272820, #20231d 60%, #24251f); }
.prompt-workshop .home-section-heading { margin-bottom: 20px; }
.prompt-workshop .eyebrow { color: var(--warm); }
.prompt-workshop-layout { display: grid; grid-template-columns: minmax(220px, .78fr) minmax(0, 1.22fr); gap: 20px; }
.prompt-controls, .prompt-output-wrap { min-width: 0; }
.field-label { display: block; margin: 0 0 6px; color: var(--ink); font-size: 12px; font-weight: 700; }
.prompt-controls select { margin-bottom: 17px; }
.prompt-controls textarea { min-height: 100px; }
.field-help { margin-top: 8px; color: var(--dim); font-size: 11px; }
.prompt-output { min-height: 300px; color: #e8ede6; background: #151b16; font: 12px/1.8 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre-wrap; }
.prompt-output-actions { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
#prompt-copy-status { color: var(--mint); font-size: 11px; }
.concept-view-shell { min-width: 0; width: min(100%, 1000px); margin: 0 auto; padding: 31px 0 12px; }
.concept-view-header { max-width: 790px; margin-bottom: 17px; }
.concept-view-header h1 { margin-top: 5px; }
.concept-view-header > p:not(.eyebrow) { margin-top: 8px; color: var(--muted); font-size: 13px; }
.concept-storage-status, .concept-route-notice { margin: 12px 0; padding: 10px 12px; border: 1px solid #46594b; border-radius: 8px; color: var(--muted); background: #1a241d; font-size: 11px; overflow-wrap: anywhere; }
.concept-course-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.concept-course-card { min-width: 0; padding: 20px; border: 1px solid #4b5d50; border-radius: 12px; background: linear-gradient(140deg, #202b24, #1a211d); }
.concept-course-card h2 { margin-top: 4px; color: var(--ink); font-size: 21px; }
.concept-course-card > p { max-width: 760px; margin-top: 7px; color: var(--muted); font-size: 12px; }
.concept-course-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.concept-course-facts span { padding: 3px 8px; border: 1px solid #506052; border-radius: 99px; color: #e2c9a4; background: #28291f; font-size: 10px; }
.concept-phase-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 16px; }
.concept-phase-card { min-width: 0; padding: 11px; border: 1px solid #37483c; border-radius: 8px; background: #18211b; }
.concept-phase-card strong { display: block; color: var(--mint); font-size: 11px; }
.concept-phase-card span { display: block; margin-top: 4px; color: var(--dim); font-size: 10px; }
.concept-course-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 16px; }
.concept-breadcrumbs { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 13px; color: var(--dim); font-size: 11px; }
.concept-breadcrumbs a { text-decoration: none; }
.concept-day-header { margin-bottom: 14px; }
.concept-day-header h1 { font-size: clamp(25px, 3vw, 34px); }
.concept-day-time { color: var(--warm) !important; font-size: 11px !important; }
.concept-day-navigation { margin: 15px 0; padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: #171f1a; }
.concept-day-navigation > p { margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.concept-day-number-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.concept-day-number { display: grid; min-width: 0; min-height: 34px; place-items: center; border: 1px solid #3d4c41; border-radius: 6px; color: var(--muted); background: #1b251f; font-size: 10px; text-decoration: none; }
.concept-day-number.is-complete { border-color: #6d8d72; color: #cce8d2; background: #233329; }
.concept-day-number[aria-current="step"] { border-color: var(--mint); color: #142019; background: var(--mint); font-weight: 800; }
.concept-day-content { min-width: 0; padding: clamp(18px, 3.5vw, 30px); border: 1px solid var(--line); border-radius: 12px; background: #1b2420; }
.concept-day-content > .eyebrow { color: var(--warm); }
.concept-day-content h2 { margin-top: 21px; color: var(--ink); font-size: 17px; }
.concept-day-content h3 { color: #dce9df; font-size: 13px; }
.concept-day-content p, .concept-day-content li { color: var(--muted); font-size: 12px; line-height: 1.8; overflow-wrap: anywhere; }
.concept-day-content ul, .concept-day-content ol { display: grid; gap: 5px; margin: 8px 0 0; padding-left: 22px; }
.concept-concept-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin-top: 10px; }
.concept-concept-card, .concept-practice, .concept-pitfalls, .concept-reading { min-width: 0; padding: 13px; border: 1px solid #34453a; border-radius: 8px; background: #17201a; }
.concept-concept-card p { margin-top: 5px; }
.concept-practice > p, .concept-pitfalls > p, .concept-reading > p { margin-top: 6px; }
.concept-deliverable { margin-top: 12px; padding: 9px 11px; border-left: 2px solid var(--warm); background: #24251f; }
.concept-checks { margin-top: 12px; }
.concept-reading a { display: inline-block; margin: 5px 10px 0 0; }
.concept-official-sources { margin-top: 14px; padding-top: 12px; border-top: 1px solid #34453a; }
.concept-official-sources h3 { font-size: 12px; }
.concept-official-sources > p { margin-top: 4px; color: var(--dim); font-size: 10px; }
.concept-official-source-list { display: grid; gap: 4px; margin: 8px 0 0; padding-left: 20px; }
.concept-official-source-list li { color: var(--muted); font-size: 11px; }
.concept-official-source-list a { overflow-wrap: anywhere; }
.concept-quiz { margin-top: 19px; padding: 15px; border: 1px solid #586a50; border-radius: 9px; background: #202820; }
.concept-quiz fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.concept-quiz legend { color: var(--ink); font-size: 13px; font-weight: 750; }
.concept-quiz-options { display: grid; gap: 7px; margin-top: 10px; }
.concept-quiz-option { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border: 1px solid #3e5043; border-radius: 7px; color: var(--muted); cursor: pointer; }
.concept-quiz-option:has(input:checked) { border-color: #85ae8d; background: #27362b; color: var(--ink); }
.concept-quiz-option input { flex: 0 0 auto; width: auto; margin-top: 4px; accent-color: var(--mint); }
.concept-quiz-feedback { min-height: 1.7em; margin-top: 8px; color: var(--mint) !important; }
.concept-completion { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 15px; margin-top: 17px; padding: 16px; border: 1px solid #586a50; border-radius: 10px; background: #202820; }
.concept-completion h2 { margin-top: 3px; font-size: 16px; }
.concept-completion p:not(.eyebrow) { margin-top: 5px; color: var(--muted); font-size: 11px; }
.concept-day-advance { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 13px; }
.concept-not-found { padding: 60px 0; }
.concept-not-found h1 { margin-top: 6px; }
.concept-not-found > p:not(.eyebrow) { margin: 8px 0 15px; color: var(--muted); font-size: 12px; }
.board-banner { display: flex; align-items: center; gap: 16px; margin: 25px 0; padding: 21px 23px; border: 1px solid #3d5144; border-radius: 13px; background: linear-gradient(112deg, #202d24, #1a211c 68%, #26261e); }
.board-symbol { display: grid; place-items: center; flex: 0 0 54px; height: 54px; border: 1px solid #7f7158; border-radius: 14px; color: var(--warm); background: #28271f; font-size: 13px; font-weight: 800; letter-spacing: .03em; }
.board-banner h2 { font-size: 22px; }
#source-title { color: var(--muted); font-size: 12px; }
.sync-state { margin-left: auto; color: #a9d2b4; font-size: 11px; text-align: right; }
.forum-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 28px; align-items: start; min-width: 0; }
.board-sidebar { position: sticky; top: 20px; min-width: 0; }
.category-list { display: grid; gap: 4px; margin-top: 12px; }
.category-link { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 10px; border: 1px solid transparent; border-radius: 8px; color: var(--muted); text-decoration: none; font-size: 12px; }
.category-link:hover { background: #1b251f; }
.category-link[aria-current] { border-color: #516b58; background: #212e24; color: var(--mint); }
.category-count { min-width: 22px; padding: 0 5px; border-radius: 5px; background: #121a15; text-align: center; font-size: 10px; }
.sidebar-note { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--dim); font-size: 11px; }
.sidebar-note strong { color: var(--muted); }
.sidebar-note p { margin: 7px 0 10px; }
.sidebar-note a { font-size: 11px; }
.board-content { min-width: 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.section-heading h1, .section-heading h2 { margin-top: 3px; }
.section-heading > div > p:not(.eyebrow) { margin-top: 5px; color: var(--muted); font-size: 12px; }
.generation-guide, .model-3d-guide, .map-design-guide { margin-top: 19px; padding: 20px; border: 1px solid #59694f; border-radius: 12px; background: linear-gradient(130deg, #242c22, #1d2721 58%, #2b2920); }
.generation-guide h2, .model-3d-guide h2, .map-design-guide h2 { margin-top: 4px; color: #ead0a7; font-size: 21px; }
.generation-guide p:not(.eyebrow), .model-3d-guide p:not(.eyebrow), .map-design-guide p:not(.eyebrow) { max-width: 640px; margin-top: 5px; color: var(--muted); font-size: 12px; }
.generation-guide .text-link, .model-3d-guide .text-link, .map-design-guide .text-link { margin-top: 9px; }
.generation-guide-steps, .model-3d-steps, .map-design-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 17px; }
.generation-guide-steps a, .model-3d-steps a, .map-design-steps a { min-width: 0; display: block; padding: 9px 10px; border: 1px solid #4d6050; border-radius: 8px; background: #1a251d; color: #d5eadb; text-decoration: none; font-size: 11px; }
.generation-guide-steps a:hover, .generation-guide-steps a:focus-visible, .model-3d-steps a:hover, .model-3d-steps a:focus-visible, .map-design-steps a:hover, .map-design-steps a:focus-visible { border-color: var(--mint); background: #27362b; }
.generation-workflow-lab { min-width: 0; margin-top: 18px; padding: 16px; border: 1px solid #465b4c; border-radius: 10px; background: #17211b; }
.generation-workflow-heading h3 { margin-top: 3px; color: var(--ink); font-size: 16px; }
.generation-workflow-heading p:not(.eyebrow) { margin-top: 4px; color: var(--muted); font-size: 11px; }
.generation-provider-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
.generation-provider-notes p { min-width: 0; margin: 0 !important; padding: 10px; border: 1px solid #37473c; border-radius: 7px; background: #1d2921; }
.generation-provider-notes strong, .generation-provider-notes span { display: block; overflow-wrap: anywhere; }
.generation-provider-notes strong { color: var(--warm); font-size: 11px; }
.generation-provider-notes span { margin-top: 4px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.generation-demo-stages { display: flex; flex-wrap: wrap; gap: 7px; margin: 14px 0 0; padding: 0; list-style: none; }
.generation-demo-stages li { padding: 4px 8px; border: 1px solid #47584c; border-radius: 999px; color: #d9e2da; background: #202a23; font: 10px/1.4 ui-monospace, monospace; }
.generation-demo-stages li.is-current { border-color: var(--mint); color: #15221a; background: var(--mint); }
.generation-demo-status { min-width: 0; margin-top: 12px; padding: 12px; border-left: 3px solid var(--mint); border-radius: 0 8px 8px 0; background: #202b24; }
.generation-demo-status > p:first-child { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin: 0 !important; }
.generation-demo-status .eyebrow { color: var(--warm); }
#generation-demo-state { color: var(--mint); font: 750 13px/1.5 ui-monospace, monospace; }
.generation-demo-status > p:not(:first-child) { margin-top: 6px; color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.generation-demo-id code { color: var(--ink); font: 10px ui-monospace, monospace; }
.generation-demo-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.generation-demo-result { margin-top: 11px; padding: 12px; border: 1px dashed #72826a; border-radius: 8px; background: #242a20; }
.generation-demo-result strong { color: var(--warm); font-size: 12px; }
.generation-demo-result p { margin-top: 4px; color: var(--muted); font-size: 11px; }
.generation-demo-caution { max-width: none !important; margin-top: 10px !important; color: var(--dim) !important; font-size: 10px !important; }
.map-grid-demo { margin-top: 18px; padding: 16px; border: 1px solid #43564a; border-radius: 10px; background: #18221c; }
.map-demo-heading h3 { margin-top: 3px; color: var(--ink); font-size: 16px; }
.map-demo-heading p:not(.eyebrow) { max-width: 650px; margin-top: 4px; color: var(--muted); font-size: 11px; }
.map-view-switch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.map-view-switch button[aria-pressed="true"] { border-color: #a9ddc0; background: #294334; color: #e2f5e7; }
.map-demo-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: center; gap: 17px; margin-top: 13px; }
.map-demo-board-wrap { min-width: 0; width: 100%; max-width: 390px; margin-inline: auto; }
.map-demo-svg { display: block; width: 100%; height: auto; border: 1px solid #34453a; border-radius: 8px; background: radial-gradient(ellipse at center, #202d24, #121a15 78%); }
.map-demo-tile { cursor: pointer; outline: none; }
.map-demo-cell { fill: #2a4937; stroke: #779581; stroke-width: 1.4; vector-effect: non-scaling-stroke; transition: fill .14s, stroke .14s; }
.map-demo-tile.is-wall .map-demo-cell { fill: #574b3a; stroke: #b4966e; }
.map-demo-tile[aria-pressed="true"] .map-demo-cell { stroke: #d5f0dc; stroke-width: 3; }
.map-demo-tile:focus-visible .map-demo-cell { stroke: #fff0c6; stroke-width: 4; }
.map-demo-cell-label { fill: #f1f5ef; font: 700 8px/1 ui-sans-serif, system-ui, sans-serif; pointer-events: none; }
.map-demo-info { min-width: 0; display: grid; gap: 10px; color: var(--muted); font-size: 11px; }
.map-demo-legend { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 9px; }
.map-demo-legend span { display: flex; align-items: center; gap: 7px; min-width: 0; }
.map-demo-legend i { display: inline-block; flex: 0 0 11px; width: 11px; height: 11px; border: 1px solid #96b39d; border-radius: 3px; background: #2a4937; }
.map-demo-legend .legend-wall { border-color: #b4966e; background: #574b3a; }
.map-demo-legend .legend-start { border-color: #a9ddc0; border-radius: 50%; background: #426c50; }
.map-demo-legend .legend-goal { border-color: #e6bf91; border-radius: 50%; background: #725639; }
#map-demo-selection { min-height: 3.4em; padding: 9px 10px; border-left: 2px solid var(--mint); border-radius: 0 6px 6px 0; background: #202b24; color: var(--ink); font-variant-numeric: tabular-nums; }
.map-demo-coordinate-note, .map-demo-boundary-note { color: var(--muted); }
.map-demo-info a { justify-self: start; }
.list-toolbar, .code-toolbar { display: flex; justify-content: space-between; align-items: end; gap: 12px; margin: 19px 0 14px; }
.list-toolbar .search-field { flex: 1 1 300px; max-width: 510px; }
.filter-field { flex: 0 0 150px; }
.filter-field select { padding: 9px 10px; }
.reset-filters { flex: 0 0 auto; }
#topic-count, #code-load-state { padding-bottom: 9px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.list-columns { display: flex; justify-content: space-between; padding: 9px 34px 9px 55px; border-bottom: 1px solid var(--line); color: var(--dim); font-size: 10px; }
.topic-list { overflow: hidden; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 11px 11px; }
.topic-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) 112px 14px; align-items: center; gap: 12px; padding: 18px 15px; border-bottom: 1px solid var(--line); background: #19221d; color: inherit; text-decoration: none; transition: background .15s; }
.topic-row:last-child { border-bottom: 0; }
.topic-row:hover { background: #222e26; }
.topic-marker { color: var(--mint); font-size: 18px; }
.topic-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.topic-category { color: var(--mint); font-size: 10px; }
.learning-level { display: inline-flex; align-items: center; border: 1px solid #526653; border-radius: 100px; padding: 1px 7px; color: #d4c09d; background: #2a2a20; font-size: 9px; line-height: 1.6; white-space: nowrap; }
.topic-copy h2 { margin-top: 3px; font-size: 15px; line-height: 1.5; }
.topic-copy p { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.6; }
.topic-meta { display: grid; gap: 3px; color: var(--muted); font-size: 10px; text-align: right; }
.topic-meta .file-count { color: var(--dim); font-size: 9px; }
.topic-arrow { color: var(--warm); }
.list-note, .code-policy { margin-top: 12px; color: var(--dim); font-size: 10px; }
.empty-state { padding: 28px 18px; color: var(--muted); text-align: center; }
.board-empty-state { display: grid; justify-items: center; gap: 12px; }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; color: var(--dim); font-size: 11px; }
.breadcrumbs a { text-decoration: none; }
.reading-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 15px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 10px; background: #171f1a; }
.reading-controls > strong { font-size: 12px; white-space: nowrap; }
.reading-controls label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.reading-font-control input { width: 115px; padding: 0; accent-color: var(--mint); cursor: pointer; }
.reading-font-control output { min-width: 34px; color: var(--ink); font-variant-numeric: tabular-nums; }
.reading-color-control input { width: 36px; height: 29px; padding: 2px; cursor: pointer; }
.reading-color-presets { display: flex; gap: 7px; }
.reading-swatch { width: 23px; height: 23px; padding: 0; border: 2px solid #91a197; border-radius: 50%; background: var(--swatch-color); cursor: pointer; }
.reading-swatch[aria-pressed="true"] { outline: 2px solid var(--mint); outline-offset: 2px; }
.reading-reset { min-height: 32px; margin-left: auto; padding: 5px 9px; }
.article-card, .panel { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); }
.article-card { padding: clamp(20px, 3.5vw, 38px); border-color: color-mix(in srgb, var(--reader-text) 20%, var(--reader-background)); background: var(--reader-background); color: var(--reader-text); }
.article-card a, .article-card .eyebrow, .article-card .article-body h2 { color: var(--reader-text); }
.article-header { padding-bottom: 22px; border-bottom: 1px solid color-mix(in srgb, var(--reader-text) 20%, var(--reader-background)); }
.article-header h1 { margin-top: 8px; font-size: clamp(24px, 3vw, 33px); }
.article-header > p:last-child { margin-top: 12px; color: var(--reader-muted); font-size: var(--reader-font-size); line-height: 1.85; }
.article-learning { margin-top: 21px; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--reader-text) 19%, var(--reader-background)); border-radius: 10px; background: color-mix(in srgb, var(--reader-text) 4%, var(--reader-background)); }
.article-learning-top { display: flex; align-items: center; gap: 9px; color: var(--reader-muted); font-size: 10px; }
.article-learning .learning-level { color: #dec49c; }
.article-learning h2 { margin-top: 9px; font-size: 15px; }
.article-learning > p { margin-top: 3px; color: var(--reader-muted); font-size: var(--reader-font-size); line-height: 1.75; }
.prerequisite-row { display: flex; flex-wrap: wrap; gap: 5px 10px; margin-top: 11px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--reader-text) 14%, var(--reader-background)); color: var(--reader-muted); font-size: 11px; }
.prerequisite-row a { text-decoration: underline; text-underline-offset: 3px; }
.article-toc { margin-top: 17px; padding: 15px 18px; border: 1px solid color-mix(in srgb, var(--reader-text) 19%, var(--reader-background)); border-radius: 10px; background: color-mix(in srgb, var(--reader-text) 3%, var(--reader-background)); }
.article-toc h2 { font-size: 14px; }
.article-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 18px; margin: 9px 0 0; padding-left: 20px; color: var(--reader-muted); font-size: 12px; }
.article-toc a { color: var(--reader-muted); text-decoration: none; }
.article-toc a:hover { color: var(--reader-text); text-decoration: underline; }
.article-body .article-section { margin-top: 26px; scroll-margin-top: 16px; }
.article-body h2 { margin-bottom: 8px; font-size: calc(var(--reader-font-size) * 1.25); }
.article-body p { margin-top: 10px; color: var(--reader-muted); font-size: var(--reader-font-size); line-height: 1.88; white-space: pre-wrap; overflow-wrap: anywhere; }
.article-points { display: grid; gap: 6px; margin: 12px 0 0; padding-left: 25px; color: var(--reader-muted); font-size: var(--reader-font-size); line-height: 1.8; }
.article-points li { padding-left: 3px; }
.article-table-wrap { max-width: 100%; margin-top: 15px; overflow-x: auto; border: 1px solid color-mix(in srgb, var(--reader-text) 19%, var(--reader-background)); border-radius: 8px; }
.article-table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.article-table th, .article-table td { padding: 9px 10px; border-right: 1px solid color-mix(in srgb, var(--reader-text) 13%, var(--reader-background)); border-bottom: 1px solid color-mix(in srgb, var(--reader-text) 13%, var(--reader-background)); overflow-wrap: anywhere; vertical-align: top; text-align: left; }
.article-table th { color: var(--reader-text); background: color-mix(in srgb, var(--reader-text) 9%, var(--reader-background)); }
.article-table tr:last-child td { border-bottom: 0; }
.article-table th:last-child, .article-table td:last-child { border-right: 0; }
.article-code-example { min-width: 0; margin: 16px 0 0; border: 1px solid color-mix(in srgb, var(--reader-text) 20%, var(--reader-background)); border-radius: 9px; overflow: hidden; background: color-mix(in srgb, #090d0a 75%, var(--reader-background)); }
.article-code-example figcaption { display: flex; justify-content: space-between; gap: 12px; padding: 8px 11px; border-bottom: 1px solid color-mix(in srgb, var(--reader-text) 14%, var(--reader-background)); color: var(--reader-muted); font-size: 10px; }
.code-example-label { color: var(--warm); font-weight: 700; }
.article-code-example pre { max-width: 100%; max-height: 430px; margin: 0; padding: 13px; overflow: auto; color: var(--reader-text); font: 12px/1.7 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.article-code-example code { white-space: pre; }
.article-card .code-context-link { margin: 0; padding: 0 11px 10px; font-size: 11px; }
.article-callout { margin-top: 15px; padding: 13px 15px; border-left: 3px solid var(--warm); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--warm) 8%, var(--reader-background)); }
.article-callout strong { color: var(--warm); font-size: 12px; }
.article-callout p { margin-top: 3px; font-size: calc(var(--reader-font-size) * .92); }
.learning-next { margin-top: 27px; padding: 16px 18px; border: 1px solid #647455; border-radius: 10px; background: linear-gradient(120deg, #263126, #222820); }
.learning-next .eyebrow { color: var(--warm); }
.learning-next h2 { margin-top: 3px; font-size: 16px; }
.learning-next > p:not(.eyebrow) { margin-top: 4px; color: var(--reader-muted); font-size: 13px; }
.learning-next .button { margin-top: 11px; }
.article-files-section, .article-sources-section { margin-top: 26px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--reader-text) 19%, var(--reader-background)); }
.article-files-section h2, .article-sources-section h2 { font-size: 16px; }
.article-files-section p { margin-top: 6px; color: var(--reader-muted); font-size: 11px; }
.file-links, .topic-references { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.file-link { border: 1px solid #536358; border-radius: 7px; padding: 6px 9px; background: color-mix(in srgb, var(--reader-text) 7%, var(--reader-background)); font: 11px/1.6 ui-monospace, monospace; overflow-wrap: anywhere; text-decoration: none; }
.file-link:hover { border-color: var(--mint); }
.topic-references a { font-size: 11px; }
.code-browser, .source-connectors { margin-top: 20px; padding: 19px; scroll-margin-top: 16px; }
.readonly-badge { flex-shrink: 0; border: 1px solid #536e5b; border-radius: 20px; padding: 4px 9px; color: #b5dfc1; font-size: 10px; }
.code-layout { display: grid; grid-template-columns: minmax(170px, .42fr) minmax(0, 1fr); gap: 10px; }
.code-files, .code-pane { min-width: 0; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: #111815; }
.code-files { max-height: 460px; overflow: auto; padding: 5px; }
.code-file { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 6px; padding: 9px 5px; border: 1px solid transparent; border-radius: 6px; color: var(--muted); text-decoration: none; }
.code-file:hover, .code-file[aria-current] { border-color: #526759; background: #202b24; color: var(--ink); }
.file-kind { color: var(--warm); font: 9px/1.8 ui-monospace, monospace; }
.file-label { font: 10px/1.7 ui-monospace, monospace; overflow-wrap: anywhere; }
.code-file small { grid-column: 2; color: var(--dim); font-size: 9px; }
.code-pane-head { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; gap: 7px; padding: 10px; border-bottom: 1px solid var(--line); font-size: 10px; }
#code-path { min-width: 0; flex: 1; overflow-wrap: anywhere; }
#code-role { flex-basis: 100%; color: var(--dim); font-size: 9px; overflow-wrap: anywhere; }
#copy-status { color: var(--mint); }
.code-content { width: 100%; height: 430px; margin: 0; padding: 14px; overflow: auto; tab-size: 2; color: var(--reader-text); background: var(--reader-background); font: var(--reader-font-size)/1.8 ui-monospace, Consolas, monospace; }
.connector-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.connector-card { min-width: 0; padding: 13px; border: 1px solid var(--line); border-radius: 8px; }
.connector-status { color: #b7ddc1; font-size: 9px; }
.connector-card h3 { margin-top: 7px; font-size: 13px; }
.connector-card p { margin: 6px 0 10px; color: var(--muted); font-size: 10px; }
.connector-card a { font-size: 11px; }
.related-section { margin-top: 25px; }
.related-section h2 { font-size: 16px; }
#related-topics { display: grid; gap: 7px; margin-top: 10px; }
#related-topics a { padding: 9px 12px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; text-decoration: none; }
.back-link { display: inline-block; margin: 22px 0 6px; font-size: 12px; }
.topic-dialog { width: min(520px, calc(100% - 28px)); border: 1px solid #526857; border-radius: 13px; padding: 27px; color: var(--ink); background: #1b2420; }
.topic-dialog::backdrop { background: #070b08d9; }
.topic-dialog h2 { margin-top: 7px; }
.topic-dialog p:not(.eyebrow) { margin-top: 9px; color: var(--muted); font-size: 11px; }
.topic-dialog label { display: block; margin-top: 15px; font-size: 12px; }
.topic-dialog input, .topic-dialog textarea { display: block; margin-top: 6px; }
.topic-dialog textarea { resize: vertical; }
.dialog-close { position: absolute; top: 9px; right: 13px; border: 0; background: none; color: var(--muted); font-size: 25px; cursor: pointer; }
.dialog-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 19px; }
#draft-error { color: #ffbda8; }
footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 45px; padding: 20px 0; border-top: 1px solid var(--line); color: var(--dim); font-size: 10px; }

@media (max-width: 1000px) {
  .forum-layout { grid-template-columns: 160px minmax(0, 1fr); gap: 20px; }
  .code-layout { grid-template-columns: 1fr; }
  .code-files { max-height: 210px; }
  .topic-row { grid-template-columns: 22px minmax(0, 1fr) 90px 12px; gap: 9px; }
  .generation-guide-steps, .model-3d-steps, .map-design-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-board-grid, .learning-path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concept-phase-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .concept-day-number-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .forum-layout { grid-template-columns: minmax(0, 1fr); }
  .board-sidebar { position: static; }
  .category-list { display: flex; max-width: 100%; gap: 5px; overflow-x: auto; padding: 0 2px 6px; margin-top: 8px; }
  .category-link { flex: 0 0 auto; gap: 9px; white-space: nowrap; }
  .sidebar-note { display: none; }
  .connector-list { grid-template-columns: 1fr; }
  .prompt-workshop-layout { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .prompt-output { min-height: 250px; }
  .global-search-results { grid-template-columns: minmax(0, 1fr); }
  .map-demo-layout { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .map-demo-board-wrap { max-width: 350px; }
  .generation-provider-notes { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .site-header, main, footer { width: calc(100% - 28px); }
  .site-header { align-items: flex-start; flex-direction: column; gap: 13px; }
  .site-header nav { gap: 8px 13px; }
  .board-menu { align-self: flex-start; }
  .board-menu .project-switcher { right: auto; left: 0; }
  .project-switcher .project-link { max-width: none; font-size: 10px; }
  .home-view { padding-top: 17px; }
  .home-hero { padding: 22px 18px; border-radius: 14px; }
  .home-hero h1 { font-size: 31px; }
  .global-search-form { grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
  .global-search-form .search-field { grid-column: 1 / -1; }
  .home-section { margin-top: 30px; }
  .home-section-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .home-section-heading h2 { font-size: 21px; }
  .home-board-grid, .learning-path-grid { grid-template-columns: minmax(0, 1fr); }
  .home-board-card { min-height: 150px; }
  .concept-home-card { grid-template-columns: minmax(0, 1fr); gap: 13px; padding: 17px; }
  .concept-home-course-grid { grid-template-columns: minmax(0, 1fr); }
  .concept-view-shell { padding-top: 20px; }
  .concept-course-card { padding: 16px; }
  .concept-phase-grid { grid-template-columns: minmax(0, 1fr); }
  .concept-concept-list { grid-template-columns: minmax(0, 1fr); }
  .concept-day-number-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .prompt-workshop { padding: 18px 15px; }
  .map-grid-demo { padding: 12px; }
  .map-demo-board-wrap { max-width: 330px; }
  .map-demo-legend { grid-template-columns: minmax(0, 1fr); }
  .board-banner { align-items: flex-start; flex-wrap: wrap; gap: 10px; padding: 16px; }
  .board-symbol { flex-basis: 44px; height: 44px; }
  .board-banner h2 { font-size: 19px; }
  .sync-state { flex-basis: 100%; margin-left: 54px; text-align: left; }
  .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
  .generation-guide-steps, .model-3d-steps, .map-design-steps { grid-template-columns: minmax(0, 1fr); }
  .list-toolbar, .code-toolbar { align-items: stretch; flex-direction: column; gap: 8px; }
  .filter-field { flex-basis: auto; }
  #topic-count, #code-load-state { padding: 0; }
  .reset-filters { align-self: flex-start; }
  .list-columns { padding: 9px 13px; }
  .list-columns span:last-child { display: none; }
  .topic-row { grid-template-columns: 19px minmax(0, 1fr) 11px; gap: 8px; padding: 15px 11px; }
  .topic-meta { grid-column: 2; grid-row: 2; display: flex; flex-wrap: wrap; gap: 7px; text-align: left; font-size: 9px; }
  .topic-arrow { grid-column: 3; grid-row: 1; }
  .topic-copy h2 { font-size: 14px; }
  .article-card { padding: 19px 15px; }
  .article-toc ol { grid-template-columns: minmax(0, 1fr); }
  .article-table { font-size: 10px; }
  .article-table th, .article-table td { padding: 7px; }
  .reading-font-control { flex-basis: 100%; }
  .reading-font-control input { flex: 1; min-width: 90px; }
  .reading-reset { margin-left: 0; }
  .code-browser, .source-connectors { padding: 14px; }
  .code-content { height: 350px; }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }

/* Shared reading preferences apply regardless of the active forum route. */
body {
  background: var(--reader-background);
  color: var(--reader-text);
  font-size: var(--reader-font-size);
}
a { color: var(--reader-link); }
.site-header { border-color: var(--reader-border); }
.brand { color: var(--reader-text); }
.site-header nav a, .board-menu summary { color: var(--reader-muted); }
.site-header .board-menu .project-link { color: var(--muted); }
.board-menu[open] > summary { color: var(--ink); }
.reading-controls { margin: 14px 0 0; background: #171f1a; }
.reading-controls label, .reading-controls > strong { color: #e2ebe4; }
.reader-settings-status { flex-basis: 100%; margin: 0; color: #c7d2ca; font-size: 11px; line-height: 1.55; }
.home-hero > p:not(.eyebrow):not(.global-search-status),
.home-section-heading > div > p:not(.eyebrow),
.home-board-card p,
.path-description,
.path-step-list,
.concept-home-card p:not(.eyebrow),
.concept-view-header > p:not(.eyebrow),
.concept-course-card > p,
.concept-phase-card span,
.concept-day-content p,
.concept-day-content li,
.concept-day-navigation > p,
.concept-completion p:not(.eyebrow),
.concept-quiz-option,
.concept-official-source-list li,
.concept-reading a,
.topic-copy > p,
.section-heading > div > p:not(.eyebrow),
.board-banner > div > p:not(.eyebrow),
.sidebar-note p,
.generation-guide p:not(.eyebrow),
.map-design-guide p:not(.eyebrow),
.model-3d-guide p:not(.eyebrow) {
  font-size: var(--reader-font-size);
}
.home-hero > p:not(.eyebrow):not(.global-search-status),
.home-section-heading > div > p:not(.eyebrow),
.home-board-card p,
.path-description,
.path-step-list,
.concept-home-card p:not(.eyebrow),
.concept-view-header > p:not(.eyebrow),
.concept-course-card > p,
.concept-phase-card span,
.concept-day-content p,
.concept-day-content li,
.concept-day-navigation > p,
.concept-completion p:not(.eyebrow),
.concept-quiz-option,
.concept-official-source-list li,
.topic-copy > p,
.section-heading > div > p:not(.eyebrow),
.board-banner > div > p:not(.eyebrow),
.sidebar-note p,
.generation-guide p:not(.eyebrow),
.map-design-guide p:not(.eyebrow),
.model-3d-guide p:not(.eyebrow) {
  line-height: 1.75;
  overflow-wrap: anywhere;
}
.home-board-card, .learning-path-card, .global-result-card,
.model-learning-details, .concept-home-card, .concept-course-card,
.concept-day-navigation, .concept-day-content, .topic-row, .board-banner {
  border-color: var(--reader-border);
  background: var(--reader-surface);
  color: var(--reader-text);
}
.home-board-card:hover, .global-result-card:hover, .topic-row:hover {
  background: var(--reader-background);
}
.home-board-card p, .learning-path-card p, .global-result-card p,
.model-learning-details > p, .concept-home-card p:not(.eyebrow),
.concept-course-card > p, .concept-phase-card span, .concept-day-content p,
.concept-day-content li, .concept-day-navigation > p, .concept-completion p:not(.eyebrow),
.concept-quiz-option, .concept-official-source-list li,
.topic-copy > p, .board-banner > div > p:not(.eyebrow), .sidebar-note p,
.home-section-heading > div > p:not(.eyebrow), .path-step-list {
  color: var(--reader-muted);
}
.concept-home-actions > p { color: var(--reader-muted) !important; font-size: var(--reader-font-size) !important; }
.concept-home-card .eyebrow, .concept-course-card .eyebrow,
.concept-day-content > .eyebrow, .learning-path-card > .eyebrow,
.model-learning-details summary, .home-board-code, .home-board-index,
.home-board-count, .topic-category, .global-result-arrow,
.concept-course-facts span, .concept-phase-card strong { color: var(--reader-text); }
.concept-course-facts span, .concept-phase-card { border-color: var(--reader-border); background: var(--reader-background); }
.path-step-list a { color: var(--reader-text); }
.category-link { border-color: var(--reader-border); color: var(--reader-text); }
.category-link:hover, .category-link[aria-current] { background: var(--reader-background); color: var(--reader-text); }
.category-count { color: #ffffff; }
.board-sidebar > .eyebrow, .breadcrumbs, .concept-breadcrumbs, .back-link, footer { color: var(--reader-text); }
.concept-day-number { border-color: var(--reader-border); color: var(--reader-text); background: var(--reader-background); }
.concept-day-number.is-complete { color: var(--reader-text); background: var(--reader-background); }
.concept-day-content h2, .concept-day-content h3, .concept-course-card h2,
.concept-home-card h2, .board-banner h2, .topic-copy h2,
.global-result-card h3, .concept-quiz legend, .concept-quiz-feedback,
.concept-completion h2, .concept-completion .eyebrow { color: var(--reader-text) !important; }
.concept-day-content h2 { font-size: calc(var(--reader-font-size) * 1.2); }
.concept-day-content h3 { font-size: calc(var(--reader-font-size) * .95); }
.concept-day-content { border-color: var(--reader-border); }
.concept-concept-card, .concept-practice, .concept-pitfalls, .concept-reading,
.concept-deliverable, .concept-quiz, .concept-completion,
.concept-storage-status, .concept-route-notice {
  border-color: var(--reader-border);
  background: var(--reader-background);
  color: var(--reader-text);
}
.concept-quiz-option { border-color: var(--reader-border); }
.concept-quiz-option:has(input:checked) {
  background: var(--reader-background);
  color: var(--reader-text);
}
.concept-day-content a, .concept-reading a { color: var(--reader-link); }
.topic-list { border-color: var(--reader-border); }
.topic-copy h2 { overflow-wrap: anywhere; }
.board-banner { background: var(--reader-surface); }
.article-card { color: var(--reader-text); }
.article-body p, .article-points, .article-header > p:last-child,
.article-learning > p, .article-learning, .article-toc,
.article-toc ol, .article-toc a, .article-callout p, .learning-next > p:not(.eyebrow) {
  color: var(--reader-muted);
}
.article-card h1, .article-card h2, .article-card h3,
.article-card .article-body h2, .article-card a { color: var(--reader-text); }
.article-card .article-learning, .article-card .article-toc,
.article-card .learning-next, .article-card .article-callout {
  border-color: var(--reader-border);
  background: var(--reader-surface);
}
.article-callout strong { color: var(--reader-text); }
.article-table th { background: var(--reader-background); }
.article-code-example figcaption { color: #c7d2ca; }
.article-code-example pre { color: #f3f6f3; }
.concept-view-shell .eyebrow,
.concept-view-header > p:not(.eyebrow),
.concept-day-time,
.concept-official-sources > p,
.concept-day-navigation > p { color: var(--reader-text) !important; }
@media (max-width: 560px) {
  .reading-controls { align-items: flex-start; gap: 10px 13px; }
  .reader-settings-status { flex-basis: 100%; }
  .concept-day-content { overflow-wrap: anywhere; }
}

/* The reading preference panel stays compact until a visitor opens it. */
.reading-settings {
  margin-top: 14px;
  border: 1px solid var(--reader-border);
  border-radius: 10px;
  background: var(--reader-surface);
}
.reading-settings > summary {
  display: flex;
  min-height: 44px;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  color: var(--reader-text);
  cursor: pointer;
  font-size: calc(var(--reader-font-size) * .9);
  font-weight: 700;
  list-style: none;
}
.reading-settings > summary::-webkit-details-marker { display: none; }
.reading-settings > summary::after { content: '＋'; color: var(--reader-text); }
.reading-settings[open] > summary::after { content: '−'; }
.reading-settings .reading-controls {
  margin: 0;
  border: 0;
  border-top: 1px solid var(--reader-border);
  border-radius: 0 0 9px 9px;
  background: transparent;
}
.reading-settings .reading-controls label,
.reading-settings .reading-controls output { color: var(--reader-text) !important; }
.reader-settings-status {
  margin: 6px 0 13px;
  color: var(--reader-muted);
  font-size: clamp(12px, calc(var(--reader-font-size) * .78), 18px);
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.concept-learning-approach {
  grid-column: 1 / -1;
  color: var(--reader-muted);
  font-size: var(--reader-font-size);
  line-height: 1.75;
  overflow-wrap: anywhere;
}

/* Keep custom reading colors legible across cards, controls, and navigation. */
:root {
  --reader-raised: color-mix(in srgb, var(--reader-background) 90%, var(--reader-text) 10%);
  --reader-raised-hover: color-mix(in srgb, var(--reader-background) 84%, var(--reader-text) 16%);
}
body { color: var(--reader-text); }
:focus-visible { outline-color: var(--reader-text); }
a { color: var(--reader-link); }
.eyebrow,
.home-hero .eyebrow,
.concept-home-card .eyebrow,
.concept-course-card .eyebrow,
.learning-path-card > .eyebrow,
.concept-day-content > .eyebrow,
.prompt-workshop .eyebrow,
.home-board-code,
.home-board-index,
.home-board-count { color: var(--reader-text) !important; }
.site-header nav a,
.brand,
.brand small,
.board-menu summary,
.board-menu summary::after,
.site-header .board-menu .project-link,
.search-field > span,
.filter-field > span,
.global-search-status,
.reader-settings-status,
.home-hero > p:not(.eyebrow):not(.global-search-status),
.concept-learning-approach { color: var(--reader-muted) !important; }
.search-field > span,
.filter-field > span,
.global-search-status { font-size: calc(var(--reader-font-size) * .84); line-height: 1.55; }
input, textarea, select {
  border-color: var(--reader-border);
  background: var(--reader-raised);
  color: var(--reader-text);
}
input::placeholder, textarea::placeholder { color: var(--reader-text); }
select option { color: var(--reader-text); background: var(--reader-raised); }
.button, button {
  border-color: var(--reader-border);
  background-color: var(--reader-raised);
  color: var(--reader-text);
}
.button:hover, button:hover { border-color: var(--reader-text); background-color: var(--reader-raised-hover); }
.button.primary, .button.primary:hover {
  border-color: var(--reader-text);
  background: #b7d6bf;
  color: #16231a;
}
.reading-swatch { background: var(--swatch-color); }
.reading-swatch:hover { border-color: var(--reader-text); background: var(--swatch-color); }
.reading-swatch[aria-pressed="true"] { outline-color: var(--reader-text); }
.home-hero,
.reading-settings,
.reading-controls,
.home-board-card,
.learning-path-card,
.global-result-card,
.model-learning-details,
.concept-home-card,
.concept-course-card,
.concept-phase-card,
.concept-day-navigation,
.concept-day-content,
.concept-concept-card,
.concept-practice,
.concept-pitfalls,
.concept-reading,
.concept-deliverable,
.concept-quiz,
.concept-completion,
.concept-storage-status,
.concept-route-notice,
.prompt-workshop,
.board-banner,
.topic-row,
.article-card,
.article-card .article-learning,
.article-card .article-toc,
.article-card .learning-next,
.article-card .article-callout {
  border-color: var(--reader-border);
  background: var(--reader-raised);
  color: var(--reader-text);
}
.home-board-card p,
.learning-path-card p,
.global-result-card p,
.model-learning-details > p,
.concept-home-card p:not(.eyebrow),
.concept-course-card > p,
.concept-phase-card span,
.concept-day-content p,
.concept-day-content li,
.concept-day-navigation > p,
.concept-completion p:not(.eyebrow),
.concept-quiz-option,
.concept-official-source-list li,
.topic-copy > p,
.board-banner > div > p:not(.eyebrow),
.sidebar-note p,
.home-section-heading > div > p:not(.eyebrow),
.path-step-list,
.global-search-status,
.reader-settings-status { color: var(--reader-muted) !important; }
.home-board-card:hover,
.global-result-card:hover,
.topic-row:hover { background: var(--reader-raised-hover); }
.concept-day-number {
  min-width: 0;
  border-color: var(--reader-border);
  background: var(--reader-raised);
  color: var(--reader-text);
  font-size: clamp(12px, calc(var(--reader-font-size) * .84), 20px);
  font-weight: 650;
  line-height: 1.1;
}
.concept-day-number.is-complete { border-color: var(--reader-border); background: var(--reader-raised); color: var(--reader-text); }
.concept-day-number[aria-current="step"] {
  border: 2px solid var(--reader-text) !important;
  background: var(--reader-raised-hover);
  color: var(--reader-text);
  font-weight: 800;
}
.concept-day-number[aria-current="step"]::after {
  content: "目前";
  font-size: .72em;
  line-height: 1;
}
.global-result-card { min-width: 0; }
.global-result-card .topic-category,
.global-result-kind,
.global-result-arrow,
.global-result-card .global-result-meta,
.global-result-card small {
  color: var(--reader-text) !important;
  font-size: clamp(12px, calc(var(--reader-font-size) * .8), 18px);
  line-height: 1.45;
  overflow-wrap: anywhere;
}
.global-result-card .global-result-meta { color: var(--reader-muted) !important; }
.global-result-kind {
  display: inline-block;
  margin-bottom: 5px;
  padding: 2px 7px;
  border: 1px solid var(--reader-border);
  border-radius: 99px;
  background: var(--reader-raised);
}
.global-result-card h3 { color: var(--reader-text) !important; font-size: calc(var(--reader-font-size) * 1.08); overflow-wrap: anywhere; }
.global-result-card p { color: var(--reader-muted) !important; font-size: calc(var(--reader-font-size) * .92); line-height: 1.7; overflow-wrap: anywhere; }
.global-result-arrow { display: inline-block; }
.search-more.button { grid-column: 1 / -1; justify-self: center; min-width: min(100%, 260px); margin-top: 5px; white-space: normal; }
.board-menu .project-switcher {
  border-color: var(--reader-border);
  background: var(--reader-raised);
  color: var(--reader-text);
}
.board-menu[open] > summary {
  border-color: var(--reader-border);
  background: var(--reader-raised-hover);
  color: var(--reader-text);
}
.board-menu .project-switcher .project-link {
  border-color: transparent;
  background: var(--reader-background);
  color: var(--reader-text) !important;
}
.board-menu .project-switcher .project-link:hover,
.board-menu .project-switcher .project-link[aria-current] {
  border-color: var(--reader-text);
  background: var(--reader-raised-hover);
  color: var(--reader-text) !important;
}
.board-menu .project-switcher .project-link[aria-current] {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 560px) {
  .site-header,
  main,
  footer,
  .home-view,
  .home-hero,
  .home-section,
  .concept-home-course-grid,
  .global-search-results,
  .global-result-card,
  .forum-layout,
  .board-content,
  .article-body { min-width: 0; }
  .site-header > .main-navigation {
    display: flex;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 2px 5px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
  }
  .site-header > .main-navigation a {
    display: inline-flex;
    min-height: 44px;
    flex: 0 0 auto;
    align-items: center;
    padding: 7px 10px;
    border: 1px solid var(--reader-border);
    border-radius: 8px;
    background: var(--reader-raised);
    color: var(--reader-text);
    scroll-snap-align: start;
    white-space: nowrap;
  }
  .site-header > .main-navigation a:focus-visible { outline-offset: -2px; }
  summary,
  .board-menu summary,
  .reading-settings > summary,
  .model-learning-details summary { min-height: 44px; }
  button,
  .button,
  .category-link,
  .concept-day-number,
  .filter-field select,
  #learning-level,
  .reading-swatch { min-height: 44px; }
  .category-link { align-items: center; padding-block: 8px; }
  .concept-day-number-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .search-more.button { width: 100%; max-width: 360px; }
}

@media (max-width: 560px), (pointer: coarse) {
  .reading-controls { min-width: 0; }
  .reading-color-control input[type="color"] {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
  }
  .reading-color-presets { gap: 7px; }
  .reading-swatch {
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    flex: 0 0 44px;
  }
  .reading-font-control { min-width: 0; }
  .reading-font-control input[type="range"] {
    width: auto;
    max-width: 280px;
    min-width: 100px;
    height: 44px;
    min-height: 44px;
    flex: 1 1 120px;
  }
}

/* Optional course code examples stay text-only and scroll inside their own panel. */
.concept-code-examples,
.concept-code-example,
.concept-source-snapshot { min-width: 0; max-width: 100%; }
.concept-code-example,
.concept-source-snapshot {
  margin-top: 13px;
  padding: 13px;
  border: 1px solid var(--reader-border);
  border-radius: 9px;
  background: var(--reader-background);
  color: var(--reader-text);
}
.concept-code-example .eyebrow { color: var(--reader-text) !important; }
.concept-code-example-pre,
.concept-source-pre {
  max-width: 100%;
  max-height: 65vh;
  margin-top: 9px;
  padding: 12px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--reader-border);
  border-radius: 7px;
  background: var(--reader-background);
  color: var(--reader-text);
  font: var(--reader-font-size)/1.7 ui-monospace, SFMono-Regular, Consolas, monospace;
  tab-size: 2;
}
.concept-code-example-pre code,
.concept-source-pre code { color: inherit; background: transparent; font: inherit; white-space: pre; }
.concept-source-meta,
.concept-code-source-label { overflow-wrap: anywhere; }
.concept-source-snapshot h3 { color: var(--reader-text); }
.concept-source-snapshot .concept-source-state,
.concept-source-snapshot .concept-source-meta { color: var(--reader-muted); }
.concept-code-example a.text-link,
.concept-source-snapshot a.text-link {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  min-height: 44px;
  padding: 6px 10px;
  color: var(--reader-text);
  font-size: var(--reader-font-size);
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}
@media (max-width: 560px) {
  .concept-code-example,
  .concept-source-snapshot { padding: 10px; }
  .concept-code-example-pre,
  .concept-source-pre { max-height: 58vh; padding: 9px; }
}