@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&display=swap');

:root { --ink:#17212b; --muted:#687681; --line:#d9e0df; --paper:#f7f8f5; --white:#fff; --amber:#f4a340; --amber-pale:#fff1dc; --teal:#2d8179; --teal-pale:#e1f1ee; --blue:#416c98; --blue-pale:#e8eff8; --rose:#a65a61; --rose-pale:#f6e8e9; --shadow:0 14px 40px rgba(23,33,43,.08); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Noto Sans TC',system-ui,sans-serif; line-height:1.65; }
a { color:inherit; text-decoration:none; }
.shell { width:min(1160px,calc(100% - 48px)); margin:0 auto; }
.site-header { height:76px; padding:0 max(24px,calc((100% - 1160px)/2)); display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); background:rgba(247,248,245,.94); position:sticky; top:0; z-index:10; backdrop-filter:blur(14px); }
.brand { display:flex; gap:11px; align-items:center; letter-spacing:.02em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; border-radius:10px; background:var(--ink); color:#fff; font:700 12px 'Space Grotesk',sans-serif; letter-spacing:.06em; }
.brand strong,.brand small { display:block; line-height:1.25; }
.brand strong { font-size:15px; }
.brand small { color:var(--muted); font-size:11px; margin-top:2px; }
.top-nav { display:flex; gap:26px; align-items:center; font-size:13px; color:var(--muted); }
.top-nav a:hover,.top-nav a.active { color:var(--ink); }
.top-nav a.active { font-weight:700; }
.hero { min-height:440px; display:grid; grid-template-columns:1.3fr .7fr; gap:60px; align-items:center; padding:70px 0 74px; }
.eyebrow { color:var(--teal); font:700 11px 'Space Grotesk','Noto Sans TC',sans-serif; letter-spacing:.13em; margin:0 0 16px; }
.eyebrow span { color:var(--amber); }
h1,h2,h3,p { margin-top:0; }
h1,h2,h3 { letter-spacing:-.04em; line-height:1.25; }
.hero h1 { font-size:clamp(40px,6vw,68px); margin-bottom:22px; }
.hero h1 em { color:var(--teal); font-style:normal; }
.lede { max-width:610px; color:var(--muted); font-size:17px; line-height:1.9; }
.hero-actions { display:flex; gap:24px; align-items:center; margin-top:30px; }
.button { display:inline-flex; gap:24px; align-items:center; padding:12px 17px; border-radius:8px; font-weight:700; font-size:13px; }
.button-primary { color:#fff; background:var(--ink); }
.button-primary:hover { background:var(--teal); }
.button-secondary { color:var(--teal); background:#fff; border:1px solid #a8d1cc; }
.button-secondary:hover,.button-secondary:focus-visible { color:#1f625d; background:var(--teal-pale); border-color:var(--teal); }
.text-link { font-size:13px; font-weight:700; border-bottom:1px solid var(--ink); padding-bottom:2px; }
.hero-note { border-left:3px solid var(--amber); padding:10px 0 10px 26px; }
.note-label,.side-label { display:block; font:700 11px 'Space Grotesk','Noto Sans TC',sans-serif; color:var(--muted); letter-spacing:.12em; text-transform:uppercase; }
.note-row { display:grid; grid-template-columns:34px 1fr; gap:10px; align-items:start; padding:18px 0; border-bottom:1px solid var(--line); }
.note-row:last-child { border-bottom:0; }
.note-row span { color:var(--amber); font:700 13px 'Space Grotesk',sans-serif; }
.note-row p { margin:0; font-size:14px; font-weight:600; line-height:1.6; }
.project-strip { padding:50px 0 62px; border-top:1px solid var(--line); }
.compact-heading { max-width:620px; }
h2 { font-size:clamp(26px,3.4vw,38px); margin-bottom:28px; }
.project-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.project-grid article { padding:24px; background:var(--white); border:1px solid var(--line); border-radius:12px; }
.number { color:var(--amber); font:700 14px 'Space Grotesk',sans-serif; }
.project-grid h3 { margin:14px 0 10px; font-size:19px; }
.project-grid p { color:var(--muted); margin-bottom:0; font-size:13px; }
.case-section { padding:48px 0 58px; border-top:1px solid var(--line); }
.case-lede { max-width:700px; color:var(--muted); font-size:14px; line-height:1.8; }
.case-feature { display:grid; grid-template-columns:76px minmax(0,1fr) auto; gap:22px; align-items:center; margin:28px 0 0; padding:24px; background:linear-gradient(135deg,#edf3fa 0%,#fff 72%); border:1px solid #b9cde1; border-top:4px solid var(--blue); border-radius:13px; box-shadow:0 10px 26px rgba(65,108,152,.09); }
.case-feature-mark { display:grid; place-items:center; width:76px; min-height:76px; color:#fff; background:var(--blue); border-radius:10px; font:700 14px/1.45 'Noto Sans TC',sans-serif; text-align:center; letter-spacing:.05em; }
.case-feature-label { margin:0 0 6px; color:var(--blue); font-size:13px; font-weight:800; letter-spacing:.04em; }
.case-feature h3 { margin:0 0 7px; font-size:23px; }
.case-feature p:not(.case-feature-label) { max-width:660px; margin:0; color:var(--muted); font-size:14px; line-height:1.75; }
.case-feature-link { flex:0 0 auto; padding:12px 15px; color:#fff; background:var(--blue); border:1px solid var(--blue); border-radius:8px; font-size:14px; font-weight:800; white-space:nowrap; }
.case-feature-link:hover,.case-feature-link:focus-visible { color:#fff; background:#31597f; border-color:#31597f; }
.case-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:28px; }
.case-card { padding:22px; background:#fff; border:1px solid var(--line); border-radius:11px; }
.case-number { display:inline-block; margin-right:9px; color:var(--amber); font:700 13px 'Space Grotesk',sans-serif; }
.case-label { color:var(--teal); font-size:11px; font-weight:800; letter-spacing:.05em; }
.case-card h3 { margin:13px 0 9px; font-size:18px; }
.case-card p { margin:0 0 16px; color:var(--muted); font-size:13px; line-height:1.75; }
.case-card a { color:var(--teal); font-size:12px; font-weight:800; border-bottom:1px solid rgba(45,129,121,.35); }
.case-bridge { margin-top:18px; padding:19px 22px; border-left:3px solid var(--teal); background:var(--teal-pale); }
.case-bridge strong { color:var(--teal); font-size:12px; }
.case-bridge p { margin:5px 0 0; font-size:13px; }
.weeks-section { padding:48px 0 72px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:28px; }
.section-heading h2 { margin-bottom:0; }
.section-hint { color:var(--muted); margin:0 0 5px; font-size:13px; }
.weeks-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.week-card { min-height:228px; padding:20px; border:1px solid var(--line); border-radius:11px; background:var(--white); display:flex; flex-direction:column; transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.week-card:hover { transform:translateY(-4px); box-shadow:var(--shadow); border-color:var(--ink); }
.week-card-top { display:flex; justify-content:space-between; align-items:center; }
.week-number { font:700 16px 'Space Grotesk',sans-serif; }
.week-date { color:var(--muted); font-size:11px; }
.week-phase { display:inline-block; align-self:flex-start; padding:3px 8px; margin:18px 0 11px; border-radius:4px; font-size:10px; font-weight:700; }
.phase-start .week-phase,.phase-start .phase-badge { background:var(--teal-pale); color:var(--teal); }
.phase-plan .week-phase,.phase-plan .phase-badge { background:var(--blue-pale); color:var(--blue); }
.phase-do .week-phase,.phase-do .phase-badge { background:var(--amber-pale); color:#9a5d07; }
.phase-learn .week-phase,.phase-learn .phase-badge { background:#eee8f6; color:#705392; }
.phase-close .week-phase,.phase-close .phase-badge { background:var(--rose-pale); color:var(--rose); }
.week-card h3 { font-size:16px; margin-bottom:8px; }
.week-card p { color:var(--muted); font-size:12px; line-height:1.65; margin-bottom:13px; }
.card-arrow { margin-top:auto; color:var(--teal); font-size:11px; font-weight:700; }
.card-arrow b { font-size:15px; margin-left:6px; }
.assessment { border-top:1px solid var(--line); padding:50px 0 70px; display:grid; grid-template-columns:.8fr 1.2fr; gap:50px; }
.assessment-head h2 { margin-bottom:13px; }
.assessment-head > p:not(.eyebrow) { color:var(--muted); font-size:13px; }
.assessment-list { display:grid; grid-template-columns:repeat(3,1fr); align-self:center; gap:10px; }
.assessment-list div { padding:18px; border-left:3px solid var(--amber); background:#fff; }
.assessment-list span,.assessment-list strong,.assessment-list small { display:block; }
.assessment-list span { color:var(--amber); font:700 27px 'Space Grotesk',sans-serif; }
.assessment-list strong { font-size:13px; margin:5px 0; }
.assessment-list small { color:var(--muted); font-size:11px; line-height:1.55; }
.assessment-footnote { grid-column:1 / -1; color:var(--muted); border-top:1px solid var(--line); padding-top:15px; margin:0; font-size:11px; }
.site-footer { padding:24px 0 34px; border-top:1px solid var(--line); display:flex; justify-content:space-between; color:var(--muted); font-size:11px; }
.week-detail { padding:42px 0 70px; }
.week-breadcrumb { display:flex; gap:10px; color:var(--muted); font-size:12px; margin-bottom:26px; }
.week-breadcrumb a:hover { color:var(--ink); }
.week-hero { padding:38px 42px; border-radius:14px; display:flex; justify-content:space-between; align-items:end; gap:40px; background:var(--white); border:1px solid var(--line); border-top:5px solid var(--teal); }
.week-hero.phase-plan { border-top-color:var(--blue); }.week-hero.phase-do { border-top-color:var(--amber); }.week-hero.phase-learn { border-top-color:#8065a0; }.week-hero.phase-close { border-top-color:var(--rose); }
.week-kicker { color:var(--muted); font:700 11px 'Space Grotesk','Noto Sans TC',sans-serif; letter-spacing:.1em; }.week-kicker i { color:var(--amber); font-style:normal; margin:0 4px; }
.week-hero h1 { margin:15px 0 12px; font-size:clamp(28px,4vw,46px); }.week-hero p { color:var(--muted); margin:0; font-size:15px; }
.phase-badge { min-width:144px; padding:15px 17px; border-radius:8px; }.phase-badge span,.phase-badge strong { display:block; }.phase-badge span { font-size:10px; opacity:.75; }.phase-badge strong { margin-top:3px; font-size:14px; }
.week-question { margin:22px 0; padding:22px 28px; background:var(--ink); color:#fff; border-radius:10px; }.week-question span { color:var(--amber); font-size:11px; font-weight:700; }.week-question blockquote { margin:8px 0 0; font-size:21px; font-weight:600; line-height:1.5; }
.week-layout { display:grid; grid-template-columns:1fr 310px; gap:22px; align-items:start; }.week-main { background:var(--white); border:1px solid var(--line); border-radius:12px; padding:10px 34px; }.content-block { padding:28px 0; border-bottom:1px solid var(--line); }.content-block:last-child { border-bottom:0; }.block-label { color:var(--amber); font:700 13px 'Space Grotesk',sans-serif; }.block-label span { color:var(--muted); font:700 10px 'Noto Sans TC',sans-serif; margin-left:7px; }.content-block h2 { font-size:22px; margin:10px 0 13px; }.content-block ul,.side-card ul { padding-left:20px; margin:0; }.content-block li,.side-card li { margin:6px 0; font-size:13px; }.content-block li::marker,.side-card li::marker { color:var(--amber); }.evidence { margin-top:18px; padding:14px 16px; background:var(--teal-pale); border-radius:7px; }.evidence strong { color:var(--teal); font-size:11px; }.evidence p { margin:4px 0 0; font-size:12px; }.bridge p { margin:0; font-size:14px; color:var(--muted); }
.week-sidebar { display:flex; flex-direction:column; gap:12px; }.side-card { background:var(--white); border:1px solid var(--line); border-radius:10px; padding:20px; }.side-card .side-label { margin-bottom:12px; color:var(--teal); }.side-card p { color:var(--muted); font-size:12px; margin:0; line-height:1.75; }.accent-card { background:var(--amber-pale); border-color:#f2d5aa; }.accent-card .side-label { color:#9a5d07; }
.week-nav { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:22px; }.week-nav a { padding:17px 20px; border:1px solid var(--line); background:var(--white); border-radius:9px; }.week-nav a:hover { border-color:var(--ink); }.week-nav a.next { text-align:right; }.week-nav small,.week-nav strong { display:block; }.week-nav small { color:var(--muted); font-size:10px; }.week-nav strong { font-size:12px; margin-top:4px; }
@media (max-width:900px) { .hero { grid-template-columns:1fr; gap:25px; padding-top:52px; }.hero-note { max-width:560px; }.weeks-grid { grid-template-columns:repeat(3,1fr); }.assessment { grid-template-columns:1fr; gap:28px; }.week-layout { grid-template-columns:1fr; }.week-sidebar { display:grid; grid-template-columns:repeat(3,1fr); }.week-hero { align-items:start; flex-direction:column; } }
@media (max-width:640px) { .shell { width:min(100% - 32px,1160px); }.site-header { height:68px; padding:0 16px; }.top-nav a:not(.active) { display:none; }.brand small { display:none; }.hero { min-height:auto; padding:46px 0 55px; }.hero h1 { font-size:42px; }.lede { font-size:15px; }.hero-actions { align-items:flex-start; flex-direction:column; gap:18px; }.project-grid,.weeks-grid,.assessment-list,.week-sidebar { grid-template-columns:1fr; }.project-grid { gap:10px; }.project-grid article { padding:18px; }.section-heading { align-items:start; flex-direction:column; gap:5px; }.weeks-section { padding-bottom:52px; }.week-card { min-height:190px; }.assessment { padding-bottom:50px; }.site-footer { flex-direction:column; gap:5px; }.week-detail { padding-top:28px; }.week-hero { padding:28px 22px; }.week-hero h1 { font-size:30px; }.week-question { padding:19px 21px; }.week-question blockquote { font-size:17px; }.week-main { padding:8px 20px; }.week-nav { grid-template-columns:1fr; }.week-nav a.next { text-align:left; } }

/* Course navigation layout */
.app-layout { display:grid; grid-template-columns:250px minmax(0,1fr); gap:52px; align-items:start; padding:38px 0 70px; }
.content-column { min-width:0; }
.week-sidebar { position:sticky; top:101px; padding:20px 16px 18px; background:var(--ink); color:#fff; border-radius:12px; box-shadow:0 12px 28px rgba(23,33,43,.12); }
.sidebar-head { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; padding:2px 5px 16px; border-bottom:1px solid rgba(255,255,255,.18); }
.sidebar-kicker { display:block; color:var(--amber); font:700 10px 'Space Grotesk','Noto Sans TC',sans-serif; letter-spacing:.12em; }
.sidebar-head strong { display:block; margin-top:5px; font-size:14px; }
.sidebar-toggle { display:none; border:0; background:transparent; color:#fff; font:600 12px 'Noto Sans TC',sans-serif; padding:0; cursor:pointer; }
.sidebar-toggle span { color:var(--amber); margin-left:4px; font-size:16px; }
.week-menu { padding-top:12px; }
.home-menu-link,.menu-week-link { display:flex; align-items:flex-start; gap:9px; border-radius:6px; transition:background .16s ease,color .16s ease; }
.home-menu-link { padding:9px 9px 11px; color:#fff; font-size:13px; font-weight:700; border-bottom:1px solid rgba(255,255,255,.14); }
.home-menu-link:hover,.home-menu-link[aria-current="page"] { color:var(--amber); }
.menu-home-mark { width:18px; color:var(--amber); font-size:16px; line-height:1.35; }
.menu-group { padding-top:14px; }
.menu-group-label { display:block; padding:0 9px 5px; color:rgba(255,255,255,.56); font-size:10px; }
.menu-week-link { padding:7px 9px; color:rgba(255,255,255,.82); }
.menu-week-link:hover { background:rgba(255,255,255,.09); color:#fff; }
.menu-week-link.current { background:var(--amber); color:var(--ink); font-weight:700; }
.menu-week-number { flex:0 0 25px; font:700 11px 'Space Grotesk',sans-serif; padding-top:2px; }
.menu-week-topic { font-size:11px; line-height:1.45; }
.course-intro { display:grid; grid-template-columns:1.25fr .75fr; gap:42px; align-items:center; padding:20px 0 52px; border-bottom:1px solid var(--line); }
.course-intro h1 { font-size:clamp(40px,5vw,62px); margin:0 0 20px; }
.course-intro h1 em { color:var(--teal); font-style:normal; }
.course-intro .lede { max-width:690px; }
.intro-actions { display:flex; align-items:center; gap:20px; margin-top:28px; }
.intro-note { color:var(--muted); font-size:12px; }
.how-section { padding:48px 0 54px; border-bottom:1px solid var(--line); }
.how-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.how-grid > div { padding:20px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.how-grid span { color:var(--amber); font:700 14px 'Space Grotesk',sans-serif; }
.how-grid h3 { margin:13px 0 7px; font-size:18px; }
.how-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.content-column .project-strip { padding:48px 0 54px; }
.content-column .assessment { padding:48px 0 0; display:grid; }
.week-detail { padding:0 0 70px; }
.week-sidecards { display:flex; flex-direction:column; gap:12px; }

@media (max-width:900px) {
  .app-layout { grid-template-columns:205px minmax(0,1fr); gap:28px; }
  .menu-week-topic { font-size:10px; }
  .sidebar-head strong { font-size:13px; }
  .content-column .project-grid,.case-grid { grid-template-columns:1fr; }
  .case-feature { grid-template-columns:76px minmax(0,1fr); }
  .case-feature-link { grid-column:2; justify-self:start; }
  .content-column .assessment { grid-template-columns:1fr; }
}
@media (max-width:760px) {
  .app-layout { display:block; padding-top:24px; }
  .week-sidebar { position:static; margin-bottom:28px; padding:15px 16px; }
  .sidebar-head { align-items:center; border-bottom:0; padding-bottom:0; }
  .sidebar-toggle { display:block; }
  .week-menu { max-height:58vh; overflow-y:auto; }
  .week-menu.collapsed { display:none; }
  .course-intro { display:block; padding-top:12px; }
  .hero-actions { align-items:flex-start; flex-wrap:wrap; gap:12px; }
  .how-grid { grid-template-columns:1fr; }
  .content-column .project-strip { padding-top:40px; }
  .case-feature { grid-template-columns:1fr; gap:15px; padding:20px; }
  .case-feature-mark { width:68px; min-height:42px; padding:7px 12px; }
  .case-feature-link { grid-column:auto; width:100%; text-align:center; }
  .week-detail { padding-top:0; }
}

/* W01 pre-class learning experience */
.preclass-section { margin:22px 0; padding:28px; background:#fff; border:1px solid var(--line); border-radius:14px; }
.quick-challenge { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:22px 0; padding:22px 24px; background:#fff; border:1px solid #d8d2c6; border-left:4px solid var(--amber); border-radius:12px; }.quick-challenge h2 { margin:7px 0 6px; font-size:22px; }.quick-challenge p { max-width:760px; margin:0; color:var(--muted); font-size:14px; line-height:1.75; }.quick-challenge a { flex:0 0 auto; padding:11px 14px; color:#714d16; background:var(--amber-pale); border:1px solid #e2bd79; border-radius:8px; font-size:14px; font-weight:800; }.quick-challenge a:hover { color:#51360e; border-color:var(--amber); }
.collab-activity { margin:22px 0; padding:28px; background:#f3f8f7; border:1px solid #c5ded9; border-radius:14px; }
.collab-heading { display:grid; grid-template-columns:1fr .9fr; gap:30px; align-items:end; padding-bottom:20px; }
.collab-heading h2 { margin:10px 0 0; font-size:28px; }
.collab-heading > p { margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.collab-launch { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:0 0 18px; padding:18px 20px; color:var(--ink); background:#fff; border:1px solid #b5d4cf; border-left:4px solid var(--teal); border-radius:9px; }
.collab-launch:hover { border-color:var(--teal); box-shadow:0 7px 18px rgba(23,33,43,.08); }
.collab-launch span,.collab-launch small { display:block; }.collab-launch strong { font-size:16px; }.collab-launch small { margin-top:5px; color:var(--muted); font-size:13px; }.collab-launch b { flex:0 0 auto; color:var(--teal); font-size:13px; }
.collab-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.collab-steps article { padding:18px; background:#fff; border:1px solid var(--line); border-radius:9px; }.collab-steps article > span { color:var(--amber); font:700 16px 'Space Grotesk',sans-serif; }.collab-steps h3 { margin:9px 0 7px; font-size:17px; }.collab-steps p { margin:0; color:var(--muted); font-size:13px; line-height:1.75; }
.collab-discussion { display:grid; grid-template-columns:1.25fr .75fr; gap:18px; margin-top:18px; padding-top:20px; border-top:1px solid #c5ded9; }.collab-discussion h3 { margin:8px 0 10px; font-size:19px; }.collab-discussion ul { margin:0; padding-left:20px; }.collab-discussion li { margin:6px 0; font-size:14px; line-height:1.6; }.collab-discussion li::marker { color:var(--teal); }.collab-output { padding:17px 18px; background:#fff; border-radius:9px; }.collab-output strong { color:var(--teal); font-size:13px; }
.charter-template { margin:22px 0; padding:28px; background:#fff; border:1px solid #cbd9e5; border-top:4px solid var(--blue); border-radius:14px; }
.charter-heading { display:grid; grid-template-columns:1fr .9fr; gap:30px; align-items:end; padding-bottom:18px; }
.charter-heading h2 { margin:8px 0 0; font-size:28px; }.charter-heading > p { margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.charter-note { display:flex; gap:12px; align-items:baseline; margin:0 0 18px; padding:13px 16px; border-left:3px solid var(--amber); background:var(--amber-pale); }.charter-note strong { flex:0 0 auto; color:#8e590d; font-size:13px; }.charter-note span { font-size:14px; line-height:1.7; }
.charter-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }.charter-card { min-height:150px; padding:18px; background:var(--paper); border:1px solid var(--line); border-radius:9px; }.charter-number { color:var(--blue); font:700 16px 'Space Grotesk',sans-serif; }.charter-card h3 { margin:8px 0 8px; font-size:17px; }.charter-card ul { margin:0; padding-left:20px; }.charter-card li { margin:4px 0; color:var(--muted); font-size:13px; line-height:1.65; }.charter-card li::marker { color:var(--blue); }
.charter-example { margin-top:18px; padding:16px 18px; border:1px solid #bfd7e1; border-radius:9px; background:var(--blue-pale); }.charter-example strong { color:var(--blue); font-size:13px; }.charter-example p { margin:5px 0 0; color:var(--ink); font-size:14px; line-height:1.75; }
.charter-case-link { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:14px; padding:18px 20px; color:var(--ink); background:#f3f8f7; border:1px solid #b5d4cf; border-left:4px solid var(--teal); border-radius:9px; }.charter-case-link:hover { border-color:var(--teal); box-shadow:0 7px 18px rgba(23,33,43,.08); }.charter-case-link span,.charter-case-link small,.charter-case-link strong,.charter-case-link em { display:block; }.charter-case-link small { color:var(--teal); font-size:12px; font-weight:800; letter-spacing:.08em; }.charter-case-link strong { margin-top:4px; color:var(--ink); font-size:16px; }.charter-case-link em { margin-top:5px; color:var(--muted); font-size:13px; font-style:normal; line-height:1.65; }.charter-case-link b { flex:0 0 auto; color:var(--teal); font-size:13px; }
.preclass-heading { display:grid; grid-template-columns:1fr .9fr; gap:30px; align-items:end; padding-bottom:22px; }
.preclass-label { display:inline-flex; align-items:center; gap:10px; color:var(--teal); font-size:13px; font-weight:800; letter-spacing:.04em; }
.preclass-label b { padding:4px 9px; border-radius:999px; background:var(--teal-pale); font-size:12px; }
.preclass-heading h2 { margin:10px 0 0; font-size:28px; }
.preclass-heading > p { margin:0; color:var(--muted); font-size:14px; line-height:1.8; }
.preclass-question { padding:22px 24px; border-radius:10px; background:var(--amber-pale); border-left:4px solid var(--amber); }
.preclass-question > span { color:#8e590d; font-size:13px; font-weight:800; }
.preclass-question blockquote { margin:7px 0 0; font-size:22px; font-weight:700; line-height:1.55; }
.reading-callout { display:grid; grid-template-columns:auto 1fr; gap:5px 14px; margin:0 0 18px; padding:16px 18px; border:1px solid #bfd7e1; border-left:4px solid var(--blue); border-radius:9px; background:var(--blue-pale); }
.reading-callout > span { color:var(--blue); font-size:12px; font-weight:800; letter-spacing:.08em; }
.reading-callout strong { font-size:15px; }
.reading-callout p { grid-column:2; margin:0; color:var(--ink); font-size:14px; line-height:1.7; }
.reading-callout small { grid-column:2; color:var(--muted); font-size:12px; }
.reading-sheet { margin:24px 0 26px; padding-top:26px; border-top:1px solid var(--line); }
.reading-sheet-head { margin-bottom:20px; }
.reading-sheet-head h2 { margin:8px 0 0; font-size:25px; }
.reading-sections { display:grid; gap:0; }
.reading-section,.reading-example { display:grid; grid-template-columns:44px 1fr; gap:16px; padding:21px 0; border-bottom:1px solid var(--line); }
.reading-section > div,.reading-example > div { min-width:0; }
.reading-number { color:var(--amber); font:700 16px 'Space Grotesk',sans-serif; padding-top:3px; }
.reading-section h3,.reading-example h3 { margin:0 0 10px; font-size:19px; }
.reading-section p,.reading-example p { margin:0 0 10px; color:var(--ink); font-size:15px; line-height:1.9; }
.reading-section p:last-of-type,.reading-example p:last-of-type { margin-bottom:0; }
.reading-highlight { display:flex; gap:10px; align-items:baseline; margin-top:14px; padding:11px 13px; border-left:3px solid var(--teal); background:var(--teal-pale); }
.reading-highlight strong { flex:0 0 auto; color:var(--teal); font-size:12px; }
.reading-highlight span { font-size:14px; line-height:1.7; }
.reading-example { background:linear-gradient(90deg,rgba(255,241,220,.7),transparent); }
.reading-example ol { margin:12px 0 0; padding-left:22px; }
.reading-example li { margin:7px 0; font-size:14px; line-height:1.7; }
.reading-check { margin-top:19px; padding:17px 20px; border:1px solid #f2d5aa; border-radius:9px; background:var(--amber-pale); }
.reading-check strong { color:#9a5d07; font-size:13px; }
.reading-check ul { margin:8px 0 0; padding-left:20px; }
.reading-check li { margin:4px 0; font-size:14px; }
.reading-bullets { margin:14px 0 0; padding:14px 18px 14px 36px; border:1px solid var(--line); border-radius:9px; background:#fbfcfa; }
.reading-bullets li { margin:7px 0; font-size:15px; line-height:1.75; }
.reading-bullets li::marker { color:var(--teal); }
.reading-mini-example { margin-top:14px; padding:14px 16px; border:1px solid #bfd7e1; border-radius:9px; background:var(--blue-pale); }
.reading-mini-example strong { color:var(--blue); font-size:13px; }
.reading-mini-example p { margin:5px 0 0; font-size:15px; line-height:1.75; }
.comparison-wrap { width:100%; max-width:100%; overflow-x:auto; margin-top:18px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.comparison-wrap:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
.comparison-table { width:100%; min-width:820px; border-collapse:collapse; font-size:14px; line-height:1.65; }
.lesson-table { min-width:740px; }
.comparison-table th,.comparison-table td { padding:13px 14px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.comparison-table th:last-child,.comparison-table td:last-child { border-right:0; }
.comparison-table tbody tr:last-child th,.comparison-table tbody tr:last-child td { border-bottom:0; }
.comparison-table thead th { color:#fff; background:var(--ink); font-size:13px; }
.comparison-table tbody th { width:118px; color:var(--blue); background:var(--blue-pale); font-size:13px; }
.reading-resources { margin-top:24px; padding:22px; border:1px solid #b5d4cf; border-top:4px solid var(--teal); border-radius:12px; background:#f3f8f7; }
.reading-resources h3 { margin:7px 0 6px; font-size:22px; }
.reading-resources > div > p { margin:0 0 16px; color:var(--muted); font-size:14px; line-height:1.75; }
.resource-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.resource-grid a { display:flex; flex-direction:column; min-height:164px; padding:17px; border:1px solid #b9d5d0; border-radius:9px; background:#fff; transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease; }
.resource-grid a:hover { border-color:var(--teal); box-shadow:0 8px 20px rgba(23,33,43,.08); transform:translateY(-2px); }
.resource-grid a:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
.resource-grid small { color:var(--teal); font-size:12px; font-weight:800; letter-spacing:.06em; }
.resource-grid strong { margin-top:5px; font-size:16px; line-height:1.45; }
.resource-grid span { margin:6px 0 13px; color:var(--muted); font-size:13px; line-height:1.65; }
.resource-grid b { margin-top:auto; color:var(--teal); font-size:12px; }
.must-know-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:18px 0 24px; }
.must-know-grid article { padding:18px; border:1px solid var(--line); border-radius:9px; background:var(--paper); }
.must-know-grid article > span { color:var(--teal); font:700 12px 'Space Grotesk',sans-serif; }
.must-know-grid h3 { margin:9px 0 6px; font-size:16px; }
.must-know-grid p { margin:0; color:var(--muted); font-size:13px; line-height:1.7; }
.game-shell { overflow:hidden; border-radius:12px; background:var(--ink); color:#fff; }
.game-header { display:flex; justify-content:space-between; gap:28px; padding:24px 26px 20px; }
.game-label { color:var(--amber); font:700 11px 'Space Grotesk',sans-serif; letter-spacing:.12em; }
.game-header h2 { margin:7px 0 5px; font-size:24px; }
.game-header p { margin:0; color:rgba(255,255,255,.68); font-size:13px; }
.game-score { min-width:70px; text-align:center; padding:8px 12px; border:1px solid rgba(255,255,255,.17); border-radius:9px; }
.game-score strong,.game-score span { display:block; }
.game-score strong { color:var(--amber); font:700 24px 'Space Grotesk',sans-serif; }
.game-score span { color:rgba(255,255,255,.66); font-size:11px; }
.game-progress { padding:0 26px 18px; }
.game-progress > span { color:rgba(255,255,255,.68); font-size:12px; }
.game-progress > div { height:5px; margin-top:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.13); }
.game-progress i { display:block; height:100%; width:20%; border-radius:inherit; background:var(--amber); transition:width .25s ease; }
.game-stage { min-height:310px; padding:26px; background:#222e39; border-top:1px solid rgba(255,255,255,.1); }
.question-number { color:var(--amber); font:700 12px 'Space Grotesk',sans-serif; letter-spacing:.1em; }
.game-stage > h3 { max-width:700px; margin:8px 0 20px; font-size:20px; line-height:1.55; }
.game-options { display:grid; gap:10px; }
.game-options button { width:100%; display:flex; align-items:center; gap:13px; padding:13px 15px; color:#fff; text-align:left; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); border-radius:8px; font:500 14px 'Noto Sans TC',sans-serif; cursor:pointer; }
.game-options button:hover:not(:disabled),.game-options button:focus-visible { border-color:var(--amber); background:rgba(244,163,64,.12); outline:none; }
.game-options button span { width:27px; height:27px; display:grid; place-items:center; flex:0 0 27px; border-radius:50%; background:rgba(255,255,255,.12); font:700 11px 'Space Grotesk',sans-serif; }
.game-options button.correct { border-color:#72cfb8; background:rgba(45,129,121,.36); }
.game-options button.wrong { border-color:#e98b94; background:rgba(166,90,97,.34); }
.game-options button:disabled { color:rgba(255,255,255,.72); cursor:default; }
.game-feedback { margin-top:16px; padding:16px 18px; border-radius:8px; background:#fff; color:var(--ink); }
.game-feedback strong { color:var(--teal); font-size:14px; }
.game-feedback p { margin:5px 0 12px; color:var(--muted); font-size:13px; }
.game-feedback button,.game-result button { padding:9px 13px; border:0; border-radius:6px; background:var(--amber); color:var(--ink); font-weight:800; cursor:pointer; }
.game-result { max-width:620px; margin:22px auto; text-align:center; }
.game-result > span { color:var(--amber); font-size:12px; font-weight:800; letter-spacing:.1em; }
.game-result > strong { display:block; margin:8px 0; color:var(--amber); font:700 48px 'Space Grotesk',sans-serif; }
.game-result h3 { margin:0 0 8px; font-size:24px; }
.game-result p { color:rgba(255,255,255,.72); font-size:14px; line-height:1.8; }
.flashcard-section { margin-top:32px; padding-top:30px; border-top:1px solid var(--line); }
.flashcard-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:18px; }
.flashcard-heading h2 { margin:8px 0 0; font-size:26px; }
.flashcard-heading > p { margin:0; color:var(--muted); font-size:13px; }
.flashcard-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.flashcard { min-height:190px; padding:0; border:0; border-radius:11px; background:transparent; perspective:900px; cursor:pointer; text-align:left; }
.flashcard:focus-visible { outline:3px solid var(--amber); outline-offset:3px; }
.flashcard-inner { position:relative; display:block; width:100%; height:190px; transition:transform .45s ease; transform-style:preserve-3d; }
.flashcard.flipped .flashcard-inner { transform:rotateY(180deg); }
.flashcard-face { position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:20px; border-radius:11px; backface-visibility:hidden; border:1px solid var(--line); box-shadow:0 8px 22px rgba(23,33,43,.06); }
.flashcard-front { background:#fff; }
.flashcard-back { color:#fff; background:var(--teal); border-color:var(--teal); transform:rotateY(180deg); }
.flashcard-face small { color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.08em; }
.flashcard-back small { color:rgba(255,255,255,.72); }
.flashcard-front strong { font-size:18px; line-height:1.45; }
.flashcard-back > span { font-size:14px; line-height:1.75; }
.flashcard-face em { color:var(--teal); font-size:11px; font-style:normal; font-weight:700; }
.flashcard-back em { color:#fff; opacity:.75; }
@media (max-width:640px) {
  .reading-section,.reading-example { grid-template-columns:1fr; gap:6px; }
  .reading-number { padding-top:0; }
  .reading-highlight { display:block; }
  .reading-highlight strong,.reading-highlight span { display:block; }
  .reading-highlight strong { margin-bottom:4px; }
  .reading-callout { grid-template-columns:1fr; gap:5px; }
  .reading-callout p,.reading-callout small { grid-column:auto; }
}

@media (max-width:900px) {
  .preclass-heading,.charter-heading { grid-template-columns:1fr; gap:10px; }
  .quick-challenge { align-items:flex-start; flex-direction:column; }
  .charter-grid { grid-template-columns:1fr; }
  .collab-heading,.collab-discussion { grid-template-columns:1fr; gap:10px; }
  .must-know-grid,.flashcard-grid,.resource-grid { grid-template-columns:1fr; }
  .flashcard,.flashcard-inner { min-height:160px; height:160px; }
}
@media (max-width:640px) {
  .preclass-section { padding:20px 16px; }
  .charter-template { padding:20px 16px; }
  .charter-note { display:block; }.charter-note span { display:block; margin-top:5px; }
  .collab-activity { padding:20px 16px; }.collab-launch { display:block; }.collab-launch b { display:block; margin-top:12px; }.collab-steps { grid-template-columns:1fr; }
  .preclass-heading h2 { font-size:23px; }
  .preclass-question { padding:18px; }
  .preclass-question blockquote { font-size:19px; }
  .reading-bullets { padding-left:32px; }
  .reading-resources { padding:18px 14px; }
  .resource-grid a { min-height:auto; }
  .game-header { padding:20px; }
  .game-progress { padding:0 20px 16px; }
  .game-stage { min-height:340px; padding:20px; }
  .flashcard-heading { display:block; }
  .flashcard-heading > p { margin-top:8px; }
}
/* W04 learning route: wraps on phones and links to existing lesson blocks. */
.learning-nav { display: flex; flex-wrap: wrap; gap: 10px; margin: 20px 0; }
.learning-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 14px; border: 1px solid #cbdde7; border-radius: 10px; color: #165b70; background: #fff; font-weight: 700; text-decoration: none; }
.learning-nav a:hover { background: #edf6f7; }
.learning-nav a:focus-visible { outline: 3px solid #dc9700; outline-offset: 3px; }
#reading-title, #preclass-game, #challenge-title, #week-tasks, #flashcard-title { scroll-margin-top: 24px; }
@media (max-width: 760px) {
  .week-detail:has(.learning-nav) .comparison-wrap::before { content: "表格可左右滑動，查看完整欄位 →"; display: block; padding: 8px 0; color: #456478; font-size: .85rem; }
}

/* 週頁最後的思考提問 */
.reflection-block { margin:34px 0 10px; padding:28px; background:#fff; border:1px solid var(--line); border-top:4px solid var(--teal); border-radius:14px; box-shadow:var(--shadow); }
.reflection-block h2 { margin:8px 0 14px; }
.reflection-question { margin:0; padding:16px 20px; background:var(--teal-pale); border-left:4px solid var(--teal); font-size:17px; line-height:1.85; }
@media (max-width:640px) { .reflection-block { padding:20px 16px; } }

/* 首頁醒目的課堂拷問入口 */
.grill-banner { display:flex; align-items:center; gap:18px; margin:0 0 26px; padding:18px 22px; background:var(--amber-pale); border:2px solid var(--amber); border-radius:14px; color:var(--ink); text-decoration:none; box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s; }
.grill-banner:hover,.grill-banner:focus-visible { transform:translateY(-2px); box-shadow:0 18px 44px rgba(23,33,43,.14); }
.grill-banner:focus-visible { outline:3px solid var(--teal); outline-offset:3px; }
.grill-tag { flex:none; padding:6px 12px; border-radius:999px; background:var(--amber); color:#fff; font-size:13px; font-weight:800; letter-spacing:.04em; }
.grill-text { flex:1; display:grid; gap:4px; }
.grill-text strong { font-size:19px; line-height:1.4; }
.grill-text small { font-size:14px; color:var(--muted); }
.grill-go { flex:none; padding:10px 18px; border-radius:10px; background:var(--ink); color:#fff; font-weight:800; white-space:nowrap; }
.grill-banner:hover .grill-go { background:var(--teal); }
@media (max-width:640px) { .grill-banner { flex-direction:column; align-items:flex-start; gap:10px; padding:16px; } .grill-go { align-self:stretch; text-align:center; } }
@media (prefers-reduced-motion:reduce) { .grill-banner { transition:none; } .grill-banner:hover { transform:none; } }

/* 首頁 Buy Nothing Day 時程 */
.bnd-timeline { margin-top:34px; }
.bnd-timeline h3 { font-size:22px; margin:0 0 10px; }
.bnd-timeline > p { max-width:820px; color:var(--muted); }
.bnd-table { min-width:640px; }
.bnd-table th[scope="row"] { white-space:nowrap; font-weight:800; }
.bnd-table tr.is-key { background:var(--amber-pale); }
.bnd-table tr.is-key th[scope="row"] { color:#9a5b0c; }
.bnd-notes { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:18px; }
.bnd-notes div { padding:16px 18px; border:1px solid var(--line); border-radius:10px; background:#fff; }
.bnd-notes p { margin:6px 0 0; font-size:14px; color:var(--muted); }
.bnd-report { margin-top:14px; padding:18px 20px; border-left:4px solid var(--teal); background:var(--teal-pale); border-radius:0 10px 10px 0; }
.bnd-report ol { margin:8px 0 0; padding-left:1.3em; }
.bnd-report li { margin:6px 0; }
@media (max-width:640px) { .bnd-notes { grid-template-columns:1fr; } }