:root { --ink:#17242a; --muted:#5d6c70; --paper:#fffaf2; --tint:#eef3ef; --line:#d5dfda; --brand:#2f5b5f; --accent:#d99260; --dark:#172e35; --radius:20px; --content:1180px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:"Noto Sans TC","PingFang TC",system-ui,sans-serif; line-height:1.75; }
a { color:inherit; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:20; padding:.7rem 1rem; color:#fff; background:var(--dark); }
.skip-link:focus { top:1rem; }
.project-header { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:min(var(--content),calc(100% - 2rem)); margin:0 auto; padding:1.25rem 0; border-bottom:1px solid var(--line); }
.project-brand { color:var(--dark); font-weight:900; text-decoration:none; }
.project-nav { display:flex; flex-wrap:wrap; gap:.65rem; }
.project-nav a { padding:.35rem .65rem; color:var(--brand); font-size:.9rem; font-weight:800; text-decoration:none; border-radius:999px; }
.project-nav a:hover, .project-nav a:focus-visible { background:var(--tint); }
.project-main { width:min(var(--content),calc(100% - 2rem)); margin:0 auto; }
.project-hero { padding:clamp(3rem,7vw,7rem) 0 3rem; }
.eyebrow { margin:0 0 .65rem; color:var(--accent); font-size:.75rem; font-weight:900; letter-spacing:.14em; }
h1,h2,h3 { line-height:1.15; }
h1 { max-width:15ch; margin:.2rem 0 1rem; font-size:clamp(2.5rem,6vw,5.5rem); }
h2 { margin:0 0 1.25rem; font-size:clamp(1.8rem,3vw,3rem); }
h3 { margin:.2rem 0 .5rem; font-size:1.2rem; }
.lead { max-width:48rem; color:var(--muted); font-size:1.15rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1.5rem; }
.button { display:inline-flex; align-items:center; justify-content:center; min-height:2.9rem; padding:.65rem 1rem; border:2px solid var(--brand); border-radius:999px; font-weight:900; text-decoration:none; }
.button--primary { color:#fff; background:var(--brand); }
.button--secondary { color:var(--brand); background:transparent; }
.button--light { color:var(--dark); background:#fffaf2; border-color:#fffaf2; }
.button:focus-visible, a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
.project-callout, .teacher-callout { padding:1.25rem 1.5rem; background:#f0e2d0; border-left:5px solid var(--accent); border-radius:0 var(--radius) var(--radius) 0; }
.project-section { padding:clamp(3rem,7vw,6rem) 0; border-top:1px solid var(--line); }
.project-section--dark { padding-inline:clamp(1.25rem,5vw,4rem); color:#fffaf2; background:var(--dark); border-radius:var(--radius); }
.project-section--dark .eyebrow { color:#f2c78c; }
.schedule-list, .task-stack { display:grid; gap:1rem; }
.schedule-item, .task-card, .stage-task { padding:1.25rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.schedule-item { display:grid; grid-template-columns:9rem 1fr; gap:1.25rem; }
.schedule-time { color:var(--brand); font-weight:900; }
.schedule-item p, .task-card p, .stage-task p { color:var(--muted); }
.schedule-item details, .stage-task details { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--line); }
summary { cursor:pointer; color:var(--brand); font-weight:900; }
.task-card header { display:flex; align-items:baseline; gap:.75rem; }
.task-card header span { color:var(--accent); font-weight:900; }
.task-card dl { display:grid; grid-template-columns:8rem 1fr; gap:.5rem 1rem; margin:1rem 0 0; }
.task-card dt { color:var(--brand); font-weight:900; }
.task-card dd { margin:0; }
.chapter-map { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.chapter-map article, .file-map > div { padding:1.1rem; background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.chapter-map span { color:var(--accent); font-weight:900; }
.chapter-map p, .chapter-map a, .file-map p { color:var(--muted); }
.chapter-map a { font-weight:900; }
.check-list { display:grid; gap:.75rem; padding-left:1.4rem; }
.wide-table { overflow-x:auto; }
table { width:100%; min-width:760px; border-collapse:collapse; background:#fff; }
th,td { padding:.75rem; border:1px solid var(--line); text-align:left; vertical-align:top; }
th { color:var(--brand); background:var(--tint); }
.project-footer { display:flex; justify-content:space-between; gap:1rem; width:min(var(--content),calc(100% - 2rem)); margin:0 auto; padding:2rem 0; color:var(--muted); font-size:.9rem; }
.stage-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.75rem; margin-bottom:3rem; }
.stage-link { padding:1rem; color:var(--brand); background:#fff; border:1px solid var(--line); border-radius:var(--radius); font-weight:900; text-decoration:none; }
.stage-link.is-current { color:#fff; background:var(--brand); border-color:var(--brand); }
.stage-status { padding:1.5rem; background:var(--tint); border-radius:var(--radius); }
.task-list { display:grid; gap:.5rem; padding:0; list-style:none; }
.task-row { display:grid; grid-template-columns:7rem 1fr auto; align-items:center; gap:.75rem; padding:.75rem 1rem; background:#fff; border-radius:12px; }
.task-row span { color:var(--accent); font-weight:900; }
.task-row small { color:var(--muted); }
.task-row.is-done { border-left:5px solid #4f8a6e; }
.task-row.is-open { border-left:5px solid var(--accent); }
.stage-task-stack { display:grid; gap:1rem; }
.stage-task ol { padding-left:1.4rem; }
.stage-goal { max-width:52rem; padding:1rem 1.25rem; color:var(--brand); background:var(--tint); border-left:4px solid var(--accent); border-radius:0 12px 12px 0; }
.stage-gap-notice { max-width:52rem; margin-top:1rem; padding:1rem 1.25rem; color:var(--brand); background:#fff; border:1px solid var(--line); border-radius:var(--radius); }
.stage-gap-notice ul { margin-bottom:0; }
.file-map { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.file-map code { color:var(--brand); font-weight:900; }
.stage-footer-nav { display:flex; justify-content:space-between; gap:1rem; padding:2rem 0 4rem; }
.stage-footer-nav a { color:var(--brand); font-weight:900; }
.file-preview { margin-top:1rem; padding:1rem; background:#f7f4ed; border:1px solid var(--line); border-radius:var(--radius); }
.file-preview h3 { margin-top:1.25rem; color:var(--brand); }
.code-copy-area { display:block; width:100%; min-height:18rem; padding:1rem; color:#f8ead5; background:#172e35; border:0; border-radius:12px; font: .78rem/1.6 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; resize:vertical; white-space:pre; overflow:auto; }
.submission-prompts { display:grid; gap:.75rem; padding-left:1.5rem; }
@media (max-width:800px) { .project-header { display:block; } .project-nav { margin-top:1rem; } .chapter-map, .file-map { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px) { .schedule-item { grid-template-columns:1fr; } .task-card dl { grid-template-columns:1fr; gap:.15rem; } .chapter-map, .file-map, .stage-nav { grid-template-columns:1fr; } .task-row { grid-template-columns:5.5rem 1fr; } .task-row small { grid-column:2; } .project-footer, .stage-footer-nav { display:block; } .project-footer a, .stage-footer-nav a { display:block; margin-top:1rem; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }