/* ───────────────────────────────────────────── Shared theme: Light mode overrides The default styles in each page are DARK mode. When , this file inverts to a warm-paper light palette. ───────────────────────────────────────────── */ html[data-theme="light"] { --bg: #f5f0e8; --bg2: #ede5d4; --bg3: #e3d8c2; --ink: #1a1510; --accent: #b04a15; --gold: #8a6f08; --muted: #8a7e6e; --border: rgba(26,21,16,0.14); } html[data-theme="light"] body { color: var(--ink); } html[data-theme="light"] body::before { opacity: 0.45; mix-blend-mode: multiply; } /* progress bar */ html[data-theme="light"] .progress-bar { background: var(--accent); } /* TOP BAR */ html[data-theme="light"] #top-bar { background: rgba(245,240,232,0.92); border-bottom-color: rgba(26,21,16,0.1); } html[data-theme="light"] #top-title .zh { color: var(--ink); } html[data-theme="light"] .nav-btn, html[data-theme="light"] .back-btn { color: var(--muted); border-color: rgba(26,21,16,0.15); } html[data-theme="light"] .nav-btn:hover, html[data-theme="light"] .back-btn:hover { color: var(--ink); border-color: rgba(26,21,16,0.35); } /* HERO */ html[data-theme="light"] .lesson-hero { background: var(--bg); } html[data-theme="light"] .lesson-hero h1 { color: var(--ink); } html[data-theme="light"] .lesson-hero .lead { color: rgba(26,21,16,0.68); } html[data-theme="light"] .lesson-hero .lead strong { color: var(--ink); } html[data-theme="light"] .lesson-hero::after { opacity: 0.5; filter: hue-rotate(0deg) saturate(0.9); } /* INDEX hero */ html[data-theme="light"] .hero h1 { color: var(--ink); } html[data-theme="light"] .hero-sub { color: rgba(26,21,16,0.6); } html[data-theme="light"] .hero-sub strong { color: var(--ink); } html[data-theme="light"] .hero::after { opacity: 0.5; } html[data-theme="light"] .hero-meta { border-color: var(--border); background: rgba(255,253,247,0.5); } html[data-theme="light"] .meta-val { color: var(--ink); } /* TOC */ html[data-theme="light"] .lesson-toc { background: rgba(255,253,247,0.55); border-color: var(--border); } html[data-theme="light"] .toc-list a { color: rgba(26,21,16,0.72); } html[data-theme="light"] .toc-list a:hover { color: var(--accent); } /* CONTENT */ html[data-theme="light"] .lesson-content { color: var(--ink); } html[data-theme="light"] .lesson-content p { color: rgba(26,21,16,0.84); } html[data-theme="light"] .lesson-content li { color: rgba(26,21,16,0.84); } html[data-theme="light"] .lesson-content p strong, html[data-theme="light"] .lesson-content li strong { color: var(--ink); } html[data-theme="light"] .lesson-content h2, html[data-theme="light"] .lesson-content h3, html[data-theme="light"] .lesson-content h4 { color: var(--ink); } html[data-theme="light"] .lesson-content h2 { border-top-color: var(--border); } /* BLOCKQUOTES */ html[data-theme="light"] .lesson-content blockquote { background: rgba(184,150,12,0.08); color: rgba(26,21,16,0.78); border-left-color: var(--gold); } html[data-theme="light"] .lesson-content blockquote strong { color: var(--ink); } /* CALLOUTS */ html[data-theme="light"] .callout { background: rgba(255,253,247,0.7); border-color: var(--border); } html[data-theme="light"] .callout::before { background: var(--bg); } html[data-theme="light"] .callout p { color: rgba(26,21,16,0.76); } html[data-theme="light"] .callout p strong { color: var(--ink); } html[data-theme="light"] .callout.idea { background: rgba(184,150,12,0.07); } html[data-theme="light"] .callout.story { background: linear-gradient(180deg, rgba(176,74,21,0.08), rgba(176,74,21,0.03)); } html[data-theme="light"] .callout.book { background: rgba(255,253,247,0.7); } html[data-theme="light"] .callout hr { border-top-color: var(--border); } /* QUOTE-ASIDE (used in lesson 8, 10) */ html[data-theme="light"] .quote-aside { background: linear-gradient(180deg, rgba(176,74,21,0.08), rgba(176,74,21,0.03)); border-color: var(--border); } html[data-theme="light"] .quote-aside::before { background: var(--bg); } html[data-theme="light"] .quote-aside p { color: rgba(26,21,16,0.74); } html[data-theme="light"] .quote-aside p strong { color: var(--ink); } /* ACTION BLOCK */ html[data-theme="light"] .action-block { background: rgba(176,74,21,0.06); border-color: var(--accent); } html[data-theme="light"] .action-block::before { background: var(--bg); } html[data-theme="light"] .action-block p { color: rgba(26,21,16,0.82); } /* SIGN OFF */ html[data-theme="light"] .sign-off { border-top-color: var(--border); } /* FOOTER */ html[data-theme="light"] .footer { background: var(--bg); border-top-color: var(--border); } html[data-theme="light"] .footer-left { color: rgba(26,21,16,0.55); } /* LESSON FOOTER NAV */ html[data-theme="light"] .lesson-footer-nav { border-top-color: var(--border); } html[data-theme="light"] .footer-nav-card { border-color: var(--border); background: rgba(255,253,247,0.5); } html[data-theme="light"] .footer-nav-card:hover { background: rgba(255,253,247,0.9); } html[data-theme="light"] .footer-nav-card.next { border-color: var(--accent); background: rgba(176,74,21,0.05); } html[data-theme="light"] .fn-title { color: var(--ink); } /* INDEX MAP */ html[data-theme="light"] .map-grid { border-color: var(--border); } html[data-theme="light"] .map-cell { border-right-color: var(--border); } html[data-theme="light"] .map-cell .letter { color: rgba(26,21,16,0.05); } html[data-theme="light"] .map-cell:hover .letter { color: rgba(26,21,16,0.1); } html[data-theme="light"] .map-desc { color: rgba(26,21,16,0.65); } /* INDEX LESSON GRID */ html[data-theme="light"] .lesson-grid { border-color: var(--border); } html[data-theme="light"] .lesson-card { border-color: var(--border); } html[data-theme="light"] .lesson-card:hover { background: rgba(255,253,247,0.7); } html[data-theme="light"] .lesson-card .big-num { color: rgba(26,21,16,0.05); } html[data-theme="light"] .lesson-card:hover .big-num { color: rgba(176,74,21,0.15); } html[data-theme="light"] .lesson-card .lesson-title { color: var(--ink); } html[data-theme="light"] .lesson-desc { color: rgba(26,21,16,0.66); } html[data-theme="light"] .lesson-keywords { border-top-color: var(--border); } /* SECTION ALT BACKGROUNDS */ html[data-theme="light"] .section.alt { background: var(--bg2); } html[data-theme="light"] .section.alt2 { background: var(--bg3); } html[data-theme="light"] .section-lead { color: rgba(26,21,16,0.7); } html[data-theme="light"] .section-lead strong { color: var(--ink); } html[data-theme="light"] .section-title { color: var(--ink); } /* PRINCIPLE STRIP */ html[data-theme="light"] .principle-strip { background: var(--bg); border-bottom-color: var(--border); } html[data-theme="light"] .principle-text { color: rgba(26,21,16,0.78); } html[data-theme="light"] .principle-text strong { color: var(--ink); } /* LESSON 02 highlight box */ html[data-theme="light"] .highlight-box { background: rgba(255,253,247,0.7); border-color: var(--border); color: var(--ink); } /* LESSON 04 rules + meta-info + step */ html[data-theme="light"] .rules-box { background: rgba(184,150,12,0.08); color: var(--ink); } html[data-theme="light"] .meta-info { border-color: var(--border); background: rgba(255,253,247,0.5); } html[data-theme="light"] .meta-info .item { border-right-color: var(--border); } html[data-theme="light"] .meta-info .v { color: var(--ink); } html[data-theme="light"] .step { background: rgba(255,253,247,0.5); border-color: var(--border); } html[data-theme="light"] .step:hover { background: rgba(184,150,12,0.06); } html[data-theme="light"] .step-title { color: var(--ink); } html[data-theme="light"] .step-desc { color: rgba(26,21,16,0.7); } /* LESSON 05 pyramid + biz-flow */ html[data-theme="light"] .pyramid { border-color: var(--border); } html[data-theme="light"] .pyramid-level { border-bottom-color: var(--border); } html[data-theme="light"] .pyramid-level.l1 { background: rgba(255,253,247,0.6); } html[data-theme="light"] .pyramid-level.l2 { background: rgba(184,150,12,0.08); } html[data-theme="light"] .pyramid-level.l3 { background: rgba(184,150,12,0.14); } html[data-theme="light"] .pyramid-level.l4 { background: rgba(176,74,21,0.1); } html[data-theme="light"] .pyramid-level.l5 { background: rgba(176,74,21,0.16); } html[data-theme="light"] .pyramid-level .lv-name { color: var(--ink); } html[data-theme="light"] .biz-flow { background: rgba(184,150,12,0.08); color: rgba(26,21,16,0.85); border-color: var(--gold); } /* LESSON 06 anchor list / big question / example block */ html[data-theme="light"] .anchor-list { background: rgba(255,253,247,0.6); border-color: var(--border); } html[data-theme="light"] .anchor-list li { color: rgba(26,21,16,0.78); } html[data-theme="light"] .big-question { background: linear-gradient(180deg, rgba(184,150,12,0.1), rgba(184,150,12,0.03)); } html[data-theme="light"] .big-question .q-text { color: var(--ink); } html[data-theme="light"] .big-question .q-note { color: rgba(26,21,16,0.65); } html[data-theme="light"] .example-block { background: rgba(255,253,247,0.6); border-color: var(--border); } html[data-theme="light"] .example-block p { color: rgba(26,21,16,0.75); } /* LESSON 07 prompt + sigma + alpha-list */ html[data-theme="light"] .prompt-box { background: rgba(50,150,100,0.04); border-color: rgba(50,150,100,0.3); } html[data-theme="light"] .prompt-box .prompt-header { background: rgba(50,150,100,0.1); border-bottom-color: rgba(50,150,100,0.2); color: rgba(50,150,100,1); } html[data-theme="light"] .prompt-box pre { color: rgba(26,21,16,0.88); } html[data-theme="light"] .prompt-box pre strong { color: rgba(50,130,80,1); } html[data-theme="light"] .sigma-table { border-color: var(--border); } html[data-theme="light"] .sigma-row { border-bottom-color: var(--border); } html[data-theme="light"] .sigma-row .method { color: rgba(26,21,16,0.82); } html[data-theme="light"] .sigma-row.head { background: rgba(26,21,16,0.04); } html[data-theme="light"] .sigma-row.best { background: rgba(176,74,21,0.08); } html[data-theme="light"] .sigma-row.best .method { color: var(--ink); } html[data-theme="light"] .alpha-list { border-color: var(--border); } html[data-theme="light"] .alpha-item { border-bottom-color: var(--border); background: rgba(255,253,247,0.5); } html[data-theme="light"] .alpha-item .title { color: var(--ink); } html[data-theme="light"] .alpha-item .desc { color: rgba(26,21,16,0.7); } /* LESSON 08 bayes-chain + compare-grid + formula-block */ html[data-theme="light"] .bayes-chain { background: rgba(176,74,21,0.06); color: var(--ink); border-color: var(--accent); } html[data-theme="light"] .compare-grid { border-color: var(--border); } html[data-theme="light"] .compare-col { border-right-color: var(--border); } html[data-theme="light"] .compare-col p { color: rgba(26,21,16,0.78); } html[data-theme="light"] .compare-col.right p { color: rgba(26,21,16,0.9); } html[data-theme="light"] .formula-block { background: rgba(184,150,12,0.1); border-color: var(--gold); } html[data-theme="light"] .formula-block li { color: rgba(26,21,16,0.85); border-bottom-color: var(--border); } /* LESSON 09 lighthouse-list + book-list */ html[data-theme="light"] .lighthouse-list { border-color: var(--border); } html[data-theme="light"] .lh-item { border-bottom-color: var(--border); background: rgba(255,253,247,0.4); } html[data-theme="light"] .lh-text { color: rgba(26,21,16,0.82); } html[data-theme="light"] .book-item { border-color: var(--border); background: rgba(255,253,247,0.5); } html[data-theme="light"] .book-item .title { color: rgba(26,21,16,0.82); } html[data-theme="light"] .book-item .title strong { color: var(--ink); } /* LESSON 10 formula-hero + closing-strip */ html[data-theme="light"] .formula-hero { background: rgba(176,74,21,0.07); border-color: var(--accent); } html[data-theme="light"] .formula-hero .eq { color: var(--ink); } html[data-theme="light"] .closing-strip { background: var(--bg3); border-color: var(--border); } html[data-theme="light"] .closing-strip::after { opacity: 0.4; } html[data-theme="light"] .closing-title { color: var(--ink); } html[data-theme="light"] .closing-body { color: rgba(26,21,16,0.75); } html[data-theme="light"] .closing-body strong { color: var(--ink); } /* WELCOME PAGE - writing rules block */ html[data-theme="light"] .writing-rules { background:rgba(184,150,12,0.06); border-color:var(--gold); } html[data-theme="light"] .writing-rules::before { background:var(--bg); color:var(--gold); } html[data-theme="light"] .writing-rules ol > li { color:rgba(26,21,16,0.82); } html[data-theme="light"] .writing-rules ol > li strong { color:var(--ink); } /* WELCOME PAGE - sign-off */ html[data-theme="light"] .sign-off .by { color:var(--muted); } html[data-theme="light"] .sign-off .refs p { color:rgba(26,21,16,0.45); } /* ─── THEME TOGGLE BUTTON (shared on every page) ─── */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: transparent; border: 1px solid rgba(245,240,232,0.18); border-radius: 50%; cursor: pointer; transition: all 0.2s; color: var(--muted); flex-shrink: 0; } .theme-toggle:hover { color: var(--ink); border-color: rgba(245,240,232,0.4); } .theme-toggle svg { width: 14px; height: 14px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } html[data-theme="light"] .theme-toggle { border-color: rgba(26,21,16,0.2); } html[data-theme="light"] .theme-toggle:hover { border-color: rgba(26,21,16,0.45); } html[data-theme="light"] .theme-toggle .icon-sun { display: block; } html[data-theme="light"] .theme-toggle .icon-moon { display: none; } /* ─── FIGURE / IMAGE STYLES ─── */ .lesson-figure { margin: 2.2rem -1.5rem; position: relative; } .lesson-figure img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 2px; background: var(--bg2); } .lesson-figure figcaption { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.1em; color: var(--muted); margin-top: 0.7rem; text-align: center; line-height: 1.6; } .lesson-figure.narrow { margin: 2.2rem 0; } .lesson-figure.narrow img { max-width: 540px; margin: 0 auto; } .lesson-figure.small { margin: 2.2rem 0; } .lesson-figure.small img { max-width: 380px; margin: 0 auto; } .lesson-figure.poem-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.8rem; margin: 2.2rem 0; } .lesson-figure.poem-grid img { width: 100%; } .lesson-hero-image { margin: 2.5rem auto 0; max-width: 840px; padding: 0 2rem; } .lesson-hero-image img { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 2px; } html[data-theme="light"] .lesson-figure img, html[data-theme="light"] .lesson-hero-image img { background: rgba(255,253,247,0.5); } @media (max-width: 720px) { .lesson-figure { margin: 2rem 0; } .lesson-figure.poem-grid { grid-template-columns: 1fr; } }