:root {
  --ink: #2b211d; --muted: #6d5f58; --paper: #fffaf2; --sand: #f4e6cf;
  --red: #8f2d2d; --red-dark: #641f20; --gold: #d69a35; --jade: #28736a;
  --line: rgba(73, 43, 31, .16); --radius: 22px; --pad: clamp(1rem, 4vw, 2rem);
  --shadow: 0 16px 38px rgba(74, 39, 26, .12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", "Noto Sans TC", "Noto Sans JP", "Noto Sans KR", Arial, sans-serif; line-height: 1.65; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, select { font: inherit; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: .5rem; left: .5rem; padding: .75rem 1rem; background: #fff; transform: translateY(-160%); border-radius: 10px; }
.skip-link:focus { transform: none; }
.site-header { position: sticky; z-index: 20; top: 0; min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .6rem var(--pad); color: #fff; background: rgba(65, 25, 23, .94); backdrop-filter: blur(12px); }
.brand { max-width: 58%; font-weight: 800; text-decoration: none; letter-spacing: .04em; }
.language-control select { min-height: 44px; max-width: 150px; padding: .45rem 2rem .45rem .75rem; color: var(--ink); background: #fff; border: 0; border-radius: 999px; }
.hero { position: relative; min-height: min(680px, 78svh); display: grid; align-items: end; overflow: hidden; color: #fff; background: #3b231f; }
.hero__image, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__image { object-fit: cover; }
.hero__veil { background: linear-gradient(180deg, rgba(28,15,12,.08) 10%, rgba(35,18,15,.45) 55%, rgba(35,18,15,.94)); }
.hero__content { position: relative; z-index: 1; width: min(100%, 1200px); margin: 0 auto; padding: clamp(4rem, 12vw, 8rem) var(--pad) clamp(2.5rem, 8vw, 5rem); }
.eyebrow { margin: 0 0 .6rem; color: #ffda8a; font-size: .85rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.hero h1 { max-width: 12ch; margin: 0; font-size: clamp(2.7rem, 13vw, 6.5rem); line-height: 1.04; letter-spacing: -.04em; }
.hero__content > p:not(.eyebrow) { max-width: 38rem; margin: 1rem 0 1.4rem; font-size: clamp(1.05rem, 4.6vw, 1.45rem); }
.hero__cta { display: inline-grid; min-height: 48px; place-items: center; padding: .7rem 1.15rem; color: var(--red-dark); background: #ffe1a3; border-radius: 999px; font-weight: 800; text-decoration: none; }
.topic-nav { position: sticky; z-index: 15; top: 64px; padding: .35rem 0; background: rgba(255,250,242,.95); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.topic-nav__track { display: flex; gap: .55rem; width: min(100%, 1200px); margin: auto; padding: .4rem var(--pad) .55rem; overflow-x: auto; scrollbar-width: thin; }
.topic-nav a { flex: 0 0 auto; min-height: 44px; display: grid; place-items: center; padding: .55rem .9rem; color: var(--red-dark); background: #fff; border: 1px solid var(--line); border-radius: 999px; font-weight: 700; text-decoration: none; }
.topic-section { padding: clamp(3.75rem, 13vw, 7rem) 0; overflow: hidden; }
.topic-section--heritage { background: #fbf2e4; }
.topic-section--craft { background: #e8f2ef; }
.topic-section--craft .section-kicker { color: var(--jade); }
.topic-section--craft .card-number,
.topic-section--craft .slider-button { background: var(--jade); }
.section-header { width: min(100%, 1200px); margin: 0 auto 1.5rem; padding: 0 var(--pad); }
.section-kicker { margin: 0 0 .4rem; color: var(--red); font-weight: 900; letter-spacing: .12em; }
.section-header h2 { margin: 0; font-size: clamp(1.85rem, 8vw, 3.8rem); line-height: 1.15; }
.section-header > p:last-child { max-width: 54rem; margin: .75rem 0 0; color: var(--muted); }
.slider-shell { position: relative; width: min(100%, 1200px); margin: auto; }
.card-slider { display: flex; gap: 1rem; padding: .5rem var(--pad) 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); overscroll-behavior-inline: contain; }
.lesson-card { flex: 0 0 min(82vw, 350px); scroll-snap-align: start; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-media { position: relative; aspect-ratio: 1 / 1; overflow: hidden; background: var(--sand); }
.card-media img { width: 100%; height: 100%; object-fit: contain; }
.card-number { position: absolute; top: .75rem; left: .75rem; min-width: 48px; min-height: 48px; display: grid; place-items: center; color: #fff; background: var(--red); border: 3px solid rgba(255,255,255,.75); border-radius: 50%; font-weight: 900; }
.card-copy { padding: 1.1rem; }
.card-copy p { margin: 0; font-size: 1.05rem; font-weight: 650; }
.source-link { display: inline-block; margin-top: .75rem; color: var(--jade); font-size: .82rem; font-weight: 700; }
.swipe-hint { display: flex; align-items: center; gap: .5rem; width: min(100%, 1200px); margin: 0 auto; padding: 0 var(--pad); color: var(--muted); font-size: .88rem; }
.slider-button { display: none; }
.site-footer { padding: 2.5rem var(--pad); text-align: center; color: #f8e9d2; background: #321d19; }
.site-footer p { margin: .25rem; }
.status { position: fixed; z-index: 50; right: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); padding: .65rem .9rem; color: #fff; background: #222; border-radius: 10px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.status.is-visible { opacity: 1; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
@media (min-width: 760px) {
  .lesson-card { flex-basis: min(42vw, 380px); }
  .slider-button { position: absolute; z-index: 3; top: 42%; display: grid; width: 48px; height: 48px; place-items: center; border: 0; border-radius: 50%; color: #fff; background: var(--red); box-shadow: var(--shadow); cursor: pointer; }
  .slider-button--prev { left: .5rem; } .slider-button--next { right: .5rem; }
  .slider-button:disabled { opacity: .4; }
}
@media (min-width: 1100px) { .lesson-card { flex-basis: 360px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }
[data-theme="琥珀暖陽"]{--theme-primary:#a86418;--theme-dark:#60370f;--theme-accent:#f1ba55;--theme-soft:#fff2d5;--theme-text:#392719;--theme-muted:#755f4b;--theme-veil-top:rgba(71,43,12,.08);--theme-veil-bottom:rgba(53,30,8,.94)}
[data-theme="朱砂映霞"]{--theme-primary:#a6333d;--theme-dark:#671c27;--theme-accent:#f2a49d;--theme-soft:#fbe3df;--theme-text:#3b2024;--theme-muted:#76575a;--theme-veil-top:rgba(86,22,32,.08);--theme-veil-bottom:rgba(61,15,24,.94)}
[data-theme="櫻粉晨霧"]{--theme-primary:#b25d78;--theme-dark:#71364d;--theme-accent:#f2b8c9;--theme-soft:#fff0f4;--theme-text:#442d35;--theme-muted:#7a6069;--theme-veil-top:rgba(91,40,60,.06);--theme-veil-bottom:rgba(67,32,46,.9)}
[data-theme="葡萄暮紫"]{--theme-primary:#79538f;--theme-dark:#432955;--theme-accent:#c7a2dc;--theme-soft:#f2e9f7;--theme-text:#33263a;--theme-muted:#6d5c76;--theme-veil-top:rgba(55,32,70,.08);--theme-veil-bottom:rgba(39,21,52,.94)}
[data-theme="靛藍星夜"]{--theme-primary:#385b91;--theme-dark:#1c335b;--theme-accent:#91b5eb;--theme-soft:#e8f0fb;--theme-text:#202d42;--theme-muted:#58677c;--theme-veil-top:rgba(20,45,82,.06);--theme-veil-bottom:rgba(14,30,58,.95)}
[data-theme="海灣青碧"]{--theme-primary:#23858b;--theme-dark:#14565c;--theme-accent:#79d1cf;--theme-soft:#e1f5f3;--theme-text:#183839;--theme-muted:#537172;--theme-veil-top:rgba(14,70,73,.06);--theme-veil-bottom:rgba(11,50,53,.94)}
[data-theme="松林深翠"]{--theme-primary:#36714e;--theme-dark:#1c482f;--theme-accent:#8fc89e;--theme-soft:#e5f2e8;--theme-text:#21372a;--theme-muted:#587060;--theme-veil-top:rgba(23,67,42,.06);--theme-veil-bottom:rgba(16,47,29,.95)}
[data-theme="苔蘚清晨"]{--theme-primary:#718044;--theme-dark:#465426;--theme-accent:#bdce82;--theme-soft:#f0f4df;--theme-text:#343a25;--theme-muted:#6b7358;--theme-veil-top:rgba(61,72,30,.06);--theme-veil-bottom:rgba(43,51,22,.93)}
[data-theme="麥穗金秋"]{--theme-primary:#b17c22;--theme-dark:#6e4912;--theme-accent:#efd083;--theme-soft:#fff5d9;--theme-text:#40331e;--theme-muted:#786b53;--theme-veil-top:rgba(91,57,12,.06);--theme-veil-bottom:rgba(61,39,10,.93)}
[data-theme="陶土微光"]{--theme-primary:#a85e43;--theme-dark:#6a3828;--theme-accent:#dda188;--theme-soft:#f8e8df;--theme-text:#402c25;--theme-muted:#755f56;--theme-veil-top:rgba(83,42,27,.07);--theme-veil-bottom:rgba(58,29,20,.94)}
[data-theme="墨灰雅韻"]{--theme-primary:#596168;--theme-dark:#30363b;--theme-accent:#aeb6bc;--theme-soft:#edf0f2;--theme-text:#292d30;--theme-muted:#666c70;--theme-veil-top:rgba(38,43,47,.06);--theme-veil-bottom:rgba(27,30,33,.94)}
[data-theme="雪白極簡"]{--theme-primary:#65727a;--theme-dark:#354047;--theme-accent:#c9d3d8;--theme-soft:#f7f9fa;--theme-text:#252c30;--theme-muted:#667177;--theme-veil-top:rgba(34,42,47,.04);--theme-veil-bottom:rgba(29,36,40,.88)}
body[data-theme]{color:var(--theme-text);background:var(--theme-soft)}body[data-theme] .site-header{background:var(--theme-dark)}body[data-theme] .hero{background:var(--theme-dark)}body[data-theme] .hero__veil{background:linear-gradient(180deg,var(--theme-veil-top) 10%,rgba(0,0,0,.42) 55%,var(--theme-veil-bottom))}body[data-theme] .eyebrow{color:var(--theme-accent)}body[data-theme] .topic-nav a{color:var(--theme-dark)}.topic-section[data-theme]{color:var(--theme-text);background:var(--theme-soft)}.topic-section[data-theme] .section-kicker{color:var(--theme-primary)}.topic-section[data-theme] .section-header>p:last-child,.topic-section[data-theme] .swipe-hint{color:var(--theme-muted)}.topic-section[data-theme] .card-number,.topic-section[data-theme] .slider-button{background:var(--theme-primary)}.topic-section[data-theme] .source-link{color:var(--theme-primary)}
.topic-nav a.is-active,body[data-theme] .topic-nav a.is-active{color:#fff;background:var(--theme-primary,var(--red));border:3px solid #fff;box-shadow:0 0 0 3px var(--theme-primary,var(--red)),0 6px 18px rgba(34,22,18,.2);transform:translateY(-1px)}
[data-theme="珊瑚夕照"]{--theme-primary:#c65f55;--theme-dark:#78332f;--theme-accent:#f3ad91;--theme-soft:#fff0e9;--theme-text:#452824;--theme-muted:#7c5d58;--theme-veil-top:rgba(105,42,37,.06);--theme-veil-bottom:rgba(67,25,23,.94)}
[data-theme="薰衣晚風"]{--theme-primary:#8870ad;--theme-dark:#4d3b70;--theme-accent:#cbbbe5;--theme-soft:#f3effb;--theme-text:#342d42;--theme-muted:#6e647d;--theme-veil-top:rgba(62,44,91,.06);--theme-veil-bottom:rgba(39,28,60,.94)}
[data-theme="天空晴藍"]{--theme-primary:#3f82bd;--theme-dark:#24517b;--theme-accent:#9dd1f2;--theme-soft:#eaf5ff;--theme-text:#23384a;--theme-muted:#5b7183;--theme-veil-top:rgba(31,78,119,.05);--theme-veil-bottom:rgba(20,50,78,.93)}
[data-theme="湖水晨光"]{--theme-primary:#2f8fa2;--theme-dark:#175c69;--theme-accent:#8bd5dc;--theme-soft:#e5f7f8;--theme-text:#1e3d42;--theme-muted:#58777b;--theme-veil-top:rgba(17,77,88,.05);--theme-veil-bottom:rgba(11,51,59,.93)}
[data-theme="翡翠新芽"]{--theme-primary:#288569;--theme-dark:#145643;--theme-accent:#83ceb1;--theme-soft:#e6f6ee;--theme-text:#1d3b31;--theme-muted:#557369;--theme-veil-top:rgba(15,72,54,.05);--theme-veil-bottom:rgba(10,48,37,.94)}
[data-theme="薄荷微風"]{--theme-primary:#4c9b86;--theme-dark:#276555;--theme-accent:#a6dfcd;--theme-soft:#edfaf5;--theme-text:#29413a;--theme-muted:#627c74;--theme-veil-top:rgba(34,82,68,.04);--theme-veil-bottom:rgba(21,55,46,.91)}
[data-theme="奶茶午後"]{--theme-primary:#9b7658;--theme-dark:#604631;--theme-accent:#d9bd9f;--theme-soft:#f8f0e7;--theme-text:#3d3027;--theme-muted:#76685e;--theme-veil-top:rgba(75,52,34,.05);--theme-veil-bottom:rgba(51,35,23,.92)}
[data-theme="石墨冷調"]{--theme-primary:#4b5865;--theme-dark:#27323c;--theme-accent:#a8b7c4;--theme-soft:#e9eef2;--theme-text:#252d34;--theme-muted:#626d76;--theme-veil-top:rgba(30,40,49,.05);--theme-veil-bottom:rgba(20,27,33,.94)}
.card-media__text{display:none}.card-media.is-text-fallback{display:grid;place-items:center;padding:2.25rem 1.5rem;background:linear-gradient(145deg,var(--theme-dark),var(--theme-primary));color:#fff}.card-media.is-text-fallback .card-media__text{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:7;font-size:clamp(1.3rem,6vw,2rem);font-weight:850;line-height:1.42;text-align:center;text-wrap:balance}.lesson-card.is-text-fallback .card-copy>p{display:none}.lesson-card.is-text-fallback .card-copy--fallback-empty{display:none}