:root { --paper:#f8fafd; --white:#fff; --ink:#202d40; --muted:#697789; --accent-blue:#285f9d; --accent-soft:#edf3fb; --line:#dbe3ef; --orange:#bb5536; --cyan:#dceff4; font-family:"Avenir Next","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; letter-spacing:0; scroll-behavior:smooth; scroll-padding-top:90px; color-scheme:light; }
* { box-sizing:border-box; }
body { margin:0; font-size:15px; line-height:1.8; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { cursor:pointer; }
a { color:inherit; text-underline-offset:4px; }
a,button { transition:color .18s,background .18s,border-color .18s; }
button:focus-visible,a:focus-visible,[tabindex]:focus-visible { outline:3px solid var(--accent-blue); outline-offset:5px; }
[hidden] { display:none !important; }
svg { width:19px; height:19px; flex-shrink:0; stroke-width:1.7; }
h1,h2,h3,h4,p,span { overflow-wrap:anywhere; }
h1,h2,h3,h4 { line-height:1.45; font-weight:600; margin:0; }
p { margin:0; }
.skip { position:fixed; left:16px; top:10px; z-index:80; transform:translateY(-160%); background:#fff; padding:10px 18px; }
.skip:focus { transform:translateY(0); }
.site-header { height:76px; padding:0 max(32px,calc((100% - 1240px)/2)); border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:center; gap:20px; background:var(--paper); position:sticky; top:0; z-index:30; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; font-size:14px; font-weight:750; line-height:1.3; white-space:nowrap; }
.brand-symbol { width:34px; height:34px; display:grid; place-items:center; background:var(--ink); color:#fff; border-radius:5px; }
.brand-secondary { display:block; font-size:8px; color:var(--muted); font-weight:500; margin-top:3px; }
.site-header nav { display:flex; gap:28px; align-items:center; }
.site-header nav a { display:inline-flex; gap:6px; align-items:center; text-decoration:none; min-height:44px; font-size:12px; }
.site-header nav a:hover { color:var(--accent-blue); }
.site-header .nav-question { color:var(--accent-blue); }
main { max-width:1240px; margin:auto; padding:0 0 80px; }
.masthead { padding:36px 0 30px; }
.edition { display:flex; justify-content:space-between; gap:16px; font-size:10px; color:var(--muted); margin-bottom:16px; }
.edition span:first-child { display:flex; align-items:center; gap:9px; }
.edition span:first-child::before { content:""; width:7px; height:7px; background:var(--orange); border-radius:50%; }
.masthead h1 { font-size:68px; font-weight:650; line-height:1.35; }
.masthead h1 > span:not(.title-period) { color:var(--accent-blue); }
.title-period { color:var(--orange); }
.masthead-bottom { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:12px; }
.masthead-bottom > p { font-size:19px; color:#53657d; }
.course-path { font-size:10px; white-space:nowrap; }
.course-path span { color:#a7b7cc; padding:0 9px; }
.event-meta { display:grid; grid-template-columns:1fr 1fr 1.35fr auto; border-block:1px solid var(--line); }
.event-meta > div { display:flex; gap:12px; align-items:center; padding:17px 20px; border-right:1px solid var(--line); }
.event-meta > div:first-child { padding-left:0; }
.event-meta svg { color:var(--accent-blue); }
.event-meta small { display:block; color:var(--muted); font-size:10px; line-height:1.5; }
.event-meta strong { display:block; font-size:14px; font-weight:550; }
.jump-in { display:flex; align-items:center; gap:20px; padding-left:28px; text-decoration:none; font-size:12px; }
.jump-in svg { width:25px; height:25px; }
.classroom { padding-top:34px; }
.section-kicker { display:flex; justify-content:space-between; gap:14px; align-items:baseline; margin-bottom:14px; }
.section-kicker h2 { font-size:10px; }
.section-kicker > span { color:var(--muted); font-size:12px; }
.session-tabs { display:grid; grid-template-columns:1fr 1fr; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:#fff; }
.session-tabs button { border:0; border-bottom:3px solid transparent; background:#fff; padding:20px 24px 17px; display:flex; align-items:center; gap:18px; color:var(--ink); text-align:left; min-width:0; }
.session-tabs button + button { border-left:1px solid var(--line); }
.session-tabs button[aria-selected="true"] { background:var(--accent-soft); border-bottom-color:var(--accent-blue); }
.session-tabs button:hover { background:#f0f5fc; }
.tab-number { font-size:30px; line-height:1.2; font-variant-numeric:tabular-nums; font-weight:500; color:var(--accent-blue); }
.tab-copy { min-width:0; }
.tab-copy strong { display:block; font-size:16px; font-weight:600; }
.tab-copy small { display:block; color:var(--muted); font-size:10px; margin-top:4px; }
.tab-copy small span { margin-left:12px; }
.tab-state { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:10px; margin-left:auto; white-space:nowrap; }
.tab-state svg { width:14px; height:14px; }
.session-panel { padding-top:28px; }
.session-heading { display:flex; justify-content:space-between; align-items:center; gap:28px; margin-bottom:22px; }
.overline { display:block; font-size:10px; font-weight:600; color:var(--accent-blue); margin-bottom:8px; }
.session-heading h3 { font-size:25px; }
.session-heading > p { color:var(--muted); font-size:12px; }
.resource-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.resource-card { display:flex; flex-direction:column; min-width:0; background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; }
.resource-card:hover { border-color:#99b5d6; }
.resource-visual { position:relative; height:216px; overflow:hidden; display:block; text-decoration:none; border-bottom:1px solid var(--line); }
.visual-label { position:relative; z-index:1; font-size:9px; display:block; }
.slide-cover { padding:20px 24px; color:#f5f8fd; background:#172b49; }
.slide-preview { padding:0; background:#080908; }
.slide-preview img { width:100%; height:100%; object-fit:contain; display:block; }
.slide-cover .visual-label { color:#b0c6e5; }
.slide-cover > strong { display:flex; flex-direction:column; font-size:23px; line-height:1.07; font-weight:500; margin-top:14px; }
.slide-cover > strong > span { color:#72c4df; font-size:14px; line-height:1.15; }
.cover-bottom { position:absolute; bottom:17px; left:24px; right:24px; display:flex; align-items:center; justify-content:space-between; font-size:9px; color:#bacde8; }
.screenshot-visual { background:#e9eff8; padding:18px 20px 0; }
.screenshot-visual .visual-label { color:#4b6387; margin-bottom:15px; }
.screenshot-visual img { display:block; width:100%; height:auto; transform:translateY(2px); border:1px solid #d0dced; box-shadow:0 6px 14px #172b4912; transition:transform .2s; }
.screenshot-visual:hover img { transform:translateY(-2px); }
.challenge-card .screenshot-visual { background:#f4ede7; }
.challenge-card .visual-label { color:#895540; }
.lab-stamp { position:absolute; bottom:14px; right:15px; display:flex; align-items:baseline; gap:6px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:4px; padding:4px 9px; font-size:9px; }
.lab-stamp span { font-size:21px; line-height:1.5; }
.resource-body { padding:20px 22px 0; display:flex; flex:1; flex-direction:column; }
.resource-meta { display:flex; justify-content:space-between; align-items:center; gap:12px; font-size:9px; color:var(--muted); margin-bottom:10px; }
.availability { color:var(--accent-blue); }
.availability.pending { color:var(--orange); }
.resource-body h4 { font-size:20px; margin-bottom:10px; }
.resource-body > p { color:var(--muted); font-size:13px; margin-bottom:22px; }
.resource-link { border-top:1px solid var(--line); padding:14px 0; text-decoration:none; display:flex; align-items:center; justify-content:space-between; gap:16px; font-size:12px; font-weight:600; margin-top:auto; }
.resource-link:hover { color:var(--accent-blue); }
.resource-link svg { width:18px; height:18px; }
.session-tools { display:flex; justify-content:space-between; gap:18px; font-size:11px; color:var(--muted); margin-top:16px; }
.session-tools span,.session-tools a { display:flex; align-items:center; gap:8px; }
.session-tools a { text-decoration:none; color:var(--accent-blue); min-height:36px; }
.session-tools svg { width:14px; height:14px; }
.materials-section { padding-top:62px; }
.section-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:22px; }
.section-heading h2 { font-size:25px; }
.section-heading > p { font-size:11px; color:var(--muted); }
.material-packs { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.material-pack { border-block:1px solid var(--line); padding:22px 0; display:flex; align-items:center; gap:20px; min-width:0; }
.pack-number { width:40px; height:50px; border:1px solid #b7cbe6; border-radius:3px; color:var(--accent-blue); font-size:22px; display:grid; place-items:center; flex-shrink:0; background:#eff5fc; }
.material-pack:nth-child(2) .pack-number { color:var(--orange); background:#f9f0e9; border-color:#e5caba; }
.material-pack h3 { font-size:14px; }
.material-pack p { font-size:11px; color:var(--muted); margin-top:4px; }
.pack-meta { color:var(--muted); font-size:9px; margin-top:8px; }
.pack-actions { margin-left:auto; display:flex; flex-direction:column; gap:5px; align-items:flex-start; flex-shrink:0; }
.pack-actions a { display:flex; align-items:center; gap:7px; font-size:11px; text-decoration:none; color:var(--accent-blue); min-height:32px; }
.pack-actions svg { width:14px; height:14px; }
.pack-actions a:last-child { font-size:10px; color:var(--muted); }
.questions-section { margin-top:60px; border-block:1px solid #c5d8ee; padding:40px 46px; display:flex; align-items:center; justify-content:space-between; gap:40px; background:var(--accent-soft); }
.questions-section h2 { font-size:35px; line-height:1.5; margin:14px 0; }
.question-copy > p { font-size:13px; color:#536a88; }
.primary-action { display:inline-flex; justify-content:center; align-items:center; gap:18px; margin-top:24px; padding:11px 18px; background:var(--accent-blue); color:#fff; border-radius:5px; text-decoration:none; font-size:12px; min-height:46px; }
.primary-action:hover { background:#204c7e; }
.question-qr { flex-shrink:0; width:192px; text-align:center; }
.question-qr a { display:block; padding:10px; border:1px solid #c8d8ec; border-radius:5px; background:#fff; }
.question-qr img { width:100%; height:auto; display:block; }
.question-qr > span { font-size:8px; color:#5b7292; display:block; margin-top:10px; }
.before-class { padding-top:56px; display:grid; grid-template-columns:1fr 1.6fr; gap:26px 32px; }
.before-class h2 { font-size:24px; }
.before-class ul { list-style:none; display:flex; justify-content:space-between; gap:20px; padding:0; margin:0; }
.before-class li { display:flex; align-items:flex-start; gap:10px; font-size:12px; }
.before-class li svg { color:var(--accent-blue); margin-top:3px; }
.before-class small { display:block; font-size:10px; color:var(--muted); margin-top:4px; }
.before-class > p { grid-column:2; color:var(--muted); font-size:11px; }
.site-footer { border-top:1px solid var(--line); max-width:1240px; margin:auto; padding:26px 0 32px; display:flex; gap:30px; align-items:center; justify-content:space-between; }
.footer-title { text-decoration:none; font-size:14px; font-weight:600; }
.footer-title span { display:block; font-size:8px; color:var(--muted); font-weight:400; margin-top:4px; }
.site-footer p { font-size:11px; color:var(--muted); }
.back-top { display:flex; align-items:center; gap:9px; font-size:11px; text-decoration:none; }
.back-top svg { width:15px; height:15px; }
.locked-session { display:flex; align-items:center; gap:26px; padding:34px; border-block:1px solid var(--line); background:#f0f4fa; }
.lock-symbol { width:64px; height:64px; display:grid; place-items:center; border:1px solid #c1cede; border-radius:50%; color:#627d9f; flex-shrink:0; }
.lock-symbol svg { width:26px; height:26px; }
.locked-session h4 { font-size:27px; margin-bottom:10px; }
.locked-session p { font-size:13px; color:var(--muted); }
.text-link { display:flex; align-items:center; gap:10px; color:var(--accent-blue); font-size:12px; text-decoration:none; }
.locked-session > a { margin-left:auto; flex-shrink:0; }
.coming-topics { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:30px; margin:28px 0; }
.coming-topics > div { padding-top:15px; border-top:1px solid var(--line); }
.coming-topics span { font-size:9px; color:var(--muted); }
.coming-topics h4 { font-size:16px; margin:9px 0; }
.coming-topics p { font-size:12px; color:var(--muted); }
.unlocked-resources { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.open-resource { display:flex; align-items:center; gap:18px; padding:28px; border:1px solid var(--line); border-radius:6px; text-decoration:none; background:#fff; }
.open-resource > svg:last-child { margin-left:auto; }
.open-resource strong { display:block; font-size:16px; }
.open-resource small { font-size:11px; color:var(--muted); }
.plain-note { padding:16px 0; color:var(--muted); font-size:12px; }
.placeholder-page { min-height:100dvh; display:flex; flex-direction:column; }
.placeholder-page main { width:100%; max-width:880px; padding:64px 32px; flex:1; }
.placeholder-page .site-footer { width:calc(100% - 64px); }
.placeholder-page h1 { font-size:44px; margin:18px 0; }
.placeholder-page .placeholder-message { font-size:17px; color:var(--muted); margin:16px 0 28px; max-width:600px; }
.placeholder-state { display:flex; align-items:center; gap:8px; color:var(--orange); font-size:12px; }
.placeholder-page .coming-topics { margin:42px 0; }
.placeholder-actions { display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-top:28px; }
.placeholder-actions .primary-action { margin-top:0; }
.placeholder-actions .text-link { min-height:46px; padding:0 10px; }
@media (max-width:1320px) { main,.site-footer { margin-left:36px; margin-right:36px; } .placeholder-page main { margin:0 auto; } }
@media (max-width:1080px) { .masthead h1 { font-size:58px; } .course-path { display:none; } .tab-state > span { display:none; } .session-tabs button { padding:18px; gap:12px; } .resource-grid { gap:14px; } .resource-visual { height:192px; } .resource-body { padding:18px 18px 0; } .resource-body h4 { font-size:18px; } .material-packs { gap:24px; } .material-pack { flex-wrap:wrap; gap:12px; } .pack-actions { flex-direction:row; width:100%; justify-content:flex-end; gap:16px; } .before-class { grid-template-columns:1fr; } .before-class ul { justify-content:flex-start; gap:34px; } .before-class > p { grid-column:1; } }
@media (max-width:760px) { :root { scroll-padding-top:80px; } .site-header { height:64px; padding:0 22px; } .site-header nav { gap:18px; } .site-header nav > a:not(.nav-question) { display:none; } main,.site-footer { margin-left:22px; margin-right:22px; } .masthead { padding:30px 0 24px; } .edition { font-size:8px; margin-bottom:20px; } .edition span:last-child { display:none; } .masthead h1 { font-size:44px; } .masthead-bottom > p { font-size:16px; } .event-meta { grid-template-columns:1fr 1fr; } .event-meta > div { padding:12px 14px; border:0; } .event-meta > div:nth-child(2) { border-left:1px solid var(--line); } .event-meta > div:nth-child(3) { grid-column:1/-1; border-top:1px solid var(--line); padding-left:0; } .event-meta > div:nth-child(3) small { display:inline; margin-right:10px; } .event-meta > div:nth-child(3) strong { display:inline; font-size:12px; } .jump-in { display:none; } .event-meta strong { font-size:13px; } .event-meta svg { width:17px; height:17px; } .section-kicker > span { display:none; } .session-tabs { grid-template-columns:1fr; } .session-tabs button + button { border-left:0; border-top:1px solid var(--line); } .session-tabs button { padding:15px 17px 12px; } .tab-copy strong { font-size:14px; } .tab-number { font-size:27px; } .tab-state > span { display:inline; } .session-heading { align-items:flex-start; flex-direction:column; gap:12px; } .session-heading h3 { font-size:23px; } .session-heading > p br { display:none; } .resource-grid { grid-template-columns:1fr; gap:18px; } .resource-visual { height:220px; } .screenshot-visual img { width:100%; } .resource-body { padding:20px 22px 0; } .resource-body h4 { font-size:21px; } .resource-body > p { max-width:440px; } .section-heading { flex-direction:column; align-items:flex-start; gap:12px; } .section-heading h2 { font-size:24px; } .material-packs { grid-template-columns:1fr; gap:0; } .material-pack + .material-pack { border-top:0; } .pack-actions { width:auto; flex-direction:column; gap:0; margin-left:auto; } .questions-section { margin-top:44px; padding:30px 24px; gap:30px; flex-wrap:wrap; } .questions-section h2 { font-size:29px; } .question-qr { width:142px; } .before-class { padding-top:42px; gap:20px; } .before-class ul { flex-direction:column; gap:18px; } .before-class > p { font-size:12px; } .site-footer { flex-wrap:wrap; gap:20px; } .site-footer > p { display:none; } .coming-topics { grid-template-columns:1fr; gap:20px; } .locked-session { padding:26px 20px; gap:18px; flex-wrap:wrap; } .locked-session h4 { font-size:24px; } .lock-symbol { width:44px; height:44px; } .locked-session > a { margin-left:0; } .unlocked-resources { grid-template-columns:1fr; } .placeholder-page main { padding:42px 24px; } .placeholder-page h1 { font-size:34px; } .placeholder-page .placeholder-message { font-size:15px; } }
@media (max-width:390px) { .masthead h1 { font-size:39px; } .tab-copy small span { margin-left:6px; } .tab-state > span { display:none; } .pack-actions { width:calc(100% - 52px); flex-direction:row; flex-wrap:wrap; justify-content:flex-start; margin-left:52px; gap:8px 18px; } .edition { font-size:7px; } .resource-visual { height:200px; } }
@media (prefers-reduced-motion:reduce) { :root { scroll-behavior:auto; } *,*::before,*::after { animation:none !important; transition:none !important; } }