*{box-sizing:border-box}body{margin:0;background:#edf2ef;color:#18372e;font-family:system-ui,-apple-system,sans-serif}header{background:#174d3e;color:white;padding:16px 20px}h1{font-size:clamp(1.05rem,2.5vw,1.5rem);margin:0 0 5px}header p{margin:0;color:#d5e5dc;font-size:.9rem}.switch{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:12px}.switch a{color:#fff;border:1px solid #b5d3c3;border-radius:6px;padding:8px 12px;text-decoration:none}.switch a:hover{background:#286350}.toolbar{position:sticky;top:0;z-index:2;background:#fff;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;padding:10px;box-shadow:0 2px 8px #163d2e22}button,input{font:inherit;border:1px solid #9cb7a8;border-radius:6px;padding:7px 10px;background:white;color:#18372e}button{cursor:pointer}button:hover{background:#e4f1e9}button:disabled{opacity:.4}input{width:64px;text-align:center}.context{text-align:center;font-size:.95rem;font-weight:600;padding:12px 12px 0}main{overflow:auto;padding:12px;min-height:50vh}.frame{width:min(100%,1280px);margin:auto}.frame img{display:block;width:100%;height:auto;box-shadow:0 4px 20px #112b2040}.hint{text-align:center;font-size:.85rem;color:#557268;margin:10px}.sources{max-width:1000px;margin:0 auto 20px;padding:0 16px}.sources a{color:#174d3e}footer{text-align:center;padding:15px;color:#557268;font-size:.8rem}@media(max-width:600px){header{padding:12px}.toolbar{gap:5px;padding:8px}button,input{padding:6px}main{padding:12px 0}.frame img{box-shadow:none}.switch a{min-height:44px;display:inline-flex;align-items:center}}

.frame img[hidden],.chapter-card[hidden]{display:none}.chapter-card{aspect-ratio:16/9;background:#174d3e;color:#fff;display:flex;flex-direction:column;justify-content:center;padding:8%;box-shadow:0 4px 20px #112b2040}.chapter-card p{margin:0;color:#d5e5dc;font-size:clamp(.75rem,2vw,1.4rem)}.chapter-card h2{margin:.35em 0;font-size:clamp(1.5rem,5vw,4rem);letter-spacing:.03em}.chapter-card h2:after{content:"";display:block;width:2em;height:4px;background:#c8dcae;margin-top:.5em}

.history-card[hidden]{display:none}.history-card{aspect-ratio:16/9;background:#f7f4ec;color:#174d3e;padding:5% 7%;box-shadow:0 4px 20px #112b2040}.history-card h2{font-size:clamp(1.2rem,3.2vw,2.8rem);margin:0 0 4%}.history-card table{width:100%;border-collapse:collapse;font-size:clamp(.7rem,2vw,1.6rem)}.history-card th,.history-card td{padding:1.3% 2%;text-align:left;border-bottom:1px solid #bac9bf}.history-card th{background:#174d3e;color:white}.history-card td:last-child,.history-card th:last-child{text-align:right;width:25%}

.history-card h2{margin-bottom:.2em}.history-year{margin:0 0 2%;color:#547066;font-size:clamp(.7rem,1.4vw,1.1rem)}.history-card tbody th{background:#e4ebe4;color:#174d3e}.history-card .score-group{vertical-align:middle;line-height:1.5;width:25%}

.case-card[hidden]{display:none}.case-card{min-height:min(56.25vw,720px);background:#f7f4ec;color:#18372e;padding:5% 6%;box-shadow:0 4px 20px #112b2040}.case-card h2{font-size:clamp(1.35rem,3vw,2.7rem);line-height:1.25;margin:.25em 0 .85em}.case-eyebrow{color:#527466;font-size:clamp(.9rem,1.4vw,1.15rem);font-weight:600;margin:0}.case-columns{display:grid;grid-template-columns:1fr 1.25fr;gap:5%;align-items:stretch}.case-columns h3{margin:0 0 .8em;font-size:clamp(1.05rem,1.65vw,1.5rem)}.case-columns ul{padding-left:1.2em;margin:0}.case-columns li{font-size:clamp(1rem,1.8vw,1.55rem);line-height:1.55;margin:.35em 0}.case-step{padding:1.3em 0}.case-example{padding:1.3em;background:#174d3e;color:white;border-radius:2px}.case-references{display:flex;gap:1em;flex-wrap:wrap;margin:1em 0 0;font-size:1rem}.case-references a{color:#e0f0da}.case-overview{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55em 2em}.case-overview li{border-bottom:1px solid #cbd8cf;padding:.4em 0;font-size:clamp(1rem,1.8vw,1.45rem);line-height:1.35}.case-overview li:last-child{grid-column:1/-1}@media(max-width:650px){.case-card{padding:22px 18px;min-height:0}.case-card h2{font-size:1.45rem}.case-columns{grid-template-columns:1fr;gap:4px}.case-columns li{font-size:1.05rem}.case-overview{grid-template-columns:1fr;gap:0}.case-overview li:last-child{grid-column:auto}}

.case-switch{display:flex;flex-wrap:wrap;gap:.55rem;margin:0 0 1rem}.case-switch button{font-size:clamp(.9rem,1.2vw,1.05rem);padding:.5rem .85rem;border-color:#749886}.case-switch button[aria-pressed="true"]{background:#174d3e;color:#fff;border-color:#174d3e}.case-switch button:focus-visible{outline:3px solid #b8913e;outline-offset:2px}@media(max-width:650px){.case-switch button{min-height:44px}}

.task-path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2%;margin-top:clamp(2.5rem,5vw,4.5rem)}.task-stage{position:relative;border-top:3px solid #96b1a2;padding:1.6rem .5rem 0 0}.task-stage:before{content:"";position:absolute;top:-.48rem;left:0;width:.8rem;height:.8rem;border-radius:50%;background:#174d3e}.task-stage h3{font-size:clamp(1.15rem,2vw,1.8rem);color:#174d3e;margin:0 0 1.1rem}.task-stage ol{list-style:none;margin:0;padding:0}.task-stage li{display:flex;align-items:baseline;gap:.6rem;font-size:clamp(1rem,1.65vw,1.4rem);line-height:1.35;margin:.8rem 0;font-weight:600}.task-number{font-size:1.05em;color:#78978a;font-weight:700;font-variant-numeric:tabular-nums}@media(max-width:800px){.task-path{grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 1.2rem;margin-top:2.3rem}}@media(max-width:500px){.task-path{grid-template-columns:1fr;gap:1.15rem}.task-stage{border-top:0;border-left:2px solid #96b1a2;padding:.15rem 0 .15rem 1.25rem}.task-stage:before{top:.35rem;left:-.46rem}.task-stage h3{margin:0 0 .3rem}.task-stage li{margin:.35rem 0}}

.skill-download{margin-top:2.5rem}.skill-download a{display:inline-block;padding:.8rem 1.2rem;background:#174d3e;color:white;border-radius:.5rem;font-weight:700;text-decoration:none;font-size:clamp(1rem,1.5vw,1.3rem)}.skill-download a:hover,.skill-download a:focus-visible{background:#26715b}.skill-download p{font-size:clamp(1rem,1.2vw,1.2rem);margin-top:1rem}.skill-download[hidden]{display:none}

.demo-page{background:#f5f2e9;color:#173d30;min-height:600px;padding:3rem}.demo-page[hidden]{display:none}.demo-page h2{font-size:clamp(1.6rem,3vw,2.6rem);margin:.4rem 0 1.5rem}.demo-page video{width:min(100%,1000px);display:block;background:#17251f}.pdf-gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.4rem}.pdf-gallery figure{margin:0}.pdf-gallery img{width:100%;height:280px;object-fit:cover;object-position:top;background:white;border:1px solid #d5ddd5}.pdf-gallery figcaption{line-height:1.5;margin-top:.6rem}@media(max-width:700px){.demo-page{min-height:0;padding:1.3rem}.pdf-gallery{grid-template-columns:1fr}.pdf-gallery img{height:230px}}

.transcript-list{max-width:1000px}.transcript-list details{margin:1rem 0;background:white;border:1px solid #ccdacf;border-radius:.6rem;padding:1rem}.transcript-list summary{font-weight:700;cursor:pointer;color:#174d3e}.transcript-list p,.transcript-list pre{white-space:pre-wrap;overflow-wrap:anywhere;font:inherit;line-height:1.6}.transcript-list pre{border-top:1px solid #dbe4de;padding-top:1rem}

/* 保持導覽可見，同時減少播放時占用的空間。 */
header{display:flex;align-items:center;gap:.8rem;min-height:42px;padding:6px 14px}header h1{font-size:clamp(.9rem,1.4vw,1.05rem);line-height:1.3;margin:0}header p{display:none}.switch{margin:0 0 0 auto;white-space:nowrap;font-size:.85rem}.switch a{padding:4px 8px}.toolbar{gap:6px;padding:5px 10px;z-index:5}.toolbar button,.toolbar input{padding:4px 8px}.context{padding:5px 10px 0;font-size:.85rem}.chapter-menu{position:relative}.chapter-menu-panel{position:absolute;top:calc(100% + 5px);left:0;display:grid;gap:2px;min-width:14rem;max-height:min(70vh,32rem);overflow:auto;padding:6px;background:white;border:1px solid #9cb7a8;border-radius:8px;box-shadow:0 5px 20px #163d2e33}.chapter-menu-panel[hidden]{display:none}.chapter-menu-panel button,.chapter-menu-panel a{display:block;text-align:left;padding:7px 10px;border:0;border-radius:4px;background:white;color:#18372e;font:inherit;text-decoration:none}.chapter-menu-panel button:hover,.chapter-menu-panel a:hover{background:#e4f1e9}.chapter-menu-panel button:focus-visible,.chapter-menu-panel a:focus-visible,#menu-toggle:focus-visible{outline:3px solid #b8913e;outline-offset:1px}@media(max-width:600px){header{padding:5px 10px;gap:4px;flex-wrap:wrap}header h1{font-size:.87rem}.switch{font-size:.8rem}.toolbar{gap:4px;padding:4px}.toolbar button,.toolbar input{min-height:40px;padding:5px 7px}.toolbar input{width:48px}.chapter-menu-panel{max-height:65vh}}

.getting-started{max-width:1000px;margin:0 0 2rem;padding:1.25rem 1.5rem;background:#fff;border:1px solid #cbd8cf;border-radius:.65rem}.getting-started h3{margin:0 0 .8rem;font-size:1.2rem}.getting-started ol{margin:.5rem 0 1rem;padding-left:1.5rem;line-height:1.7}.getting-started li{margin:.3rem 0}.getting-started label{display:block;font-weight:700;margin-bottom:.5rem}.getting-started textarea{display:block;width:100%;min-height:5rem;resize:vertical;padding:.75rem;border:1px solid #9cb7a8;border-radius:.4rem;font:inherit;line-height:1.5;color:#18372e;background:#f8faf8}.getting-started-actions{display:flex;align-items:center;flex-wrap:wrap;gap:.6rem;margin:.75rem 0}.getting-started-actions button{min-height:44px}.getting-started p{margin:.6rem 0 0;color:#4b675b;font-size:.95rem}@media(max-width:700px){.getting-started{padding:1rem}.getting-started-actions{align-items:stretch}.getting-started-actions button{flex:1 1 auto}}

/* 第22頁：示範與可編輯的一頁構想 */
.brief-title{background:#174d3e;color:#fff;font-size:clamp(1rem,1.5vw,1.3rem);font-weight:700;padding:.75em 1em;margin:.6em 0}.brief-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.brief-item{background:white;border:1px solid #d5e0d7;border-radius:.45rem;padding:.9rem 1rem}.brief-item h3{margin:0 0 .45rem;color:#174d3e;font-size:1.05rem}.brief-item p{margin:0;line-height:1.55;font-size:1rem}.brief-template{margin:1.2rem 0 0;background:#e7eee8;border-radius:.45rem;padding:1rem}.brief-template summary{cursor:pointer;font-weight:700;color:#174d3e}.brief-template p{line-height:1.5}.brief-template label{display:block;font-weight:700;margin:.5rem 0}.brief-template textarea{width:100%;min-height:12rem;resize:vertical;padding:.75rem;border:1px solid #9cb7a8;border-radius:.4rem;background:white;color:#18372e;font:inherit;line-height:1.6}.brief-template button{min-height:44px;margin-top:.6rem}.brief-status{margin-left:.75rem}.brief-template summary:focus-visible,.brief-template button:focus-visible,.brief-template textarea:focus-visible{outline:3px solid #b8913e;outline-offset:2px}@media(max-width:800px){.brief-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:550px){.brief-grid{grid-template-columns:1fr}.brief-item{padding:.75rem}.brief-status{display:block;margin:.5rem 0 0}}
.brief-references{display:flex;flex-wrap:wrap;gap:.25rem .7rem;margin-top:.6rem;font-size:.9rem}.brief-references a{color:#174d3e;text-decoration:underline}

.literature-goal,.literature-sample,.literature-exercise{margin:1rem 0}.literature-goal{background:#174d3e;color:#fff;padding:.85rem 1rem;border-radius:.35rem}.literature-goal h3,.literature-sample h3,.literature-exercise h3{margin:0 0 .45rem;font-size:1.1rem}.literature-goal p,.literature-exercise p{margin:.35rem 0;line-height:1.5}.literature-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.literature-cards h4{margin:0 0 .45rem;color:#174d3e;font-size:1rem}.literature-cards p{font-size:1rem;line-height:1.5}.literature-cards a{display:inline-block;color:#174d3e;margin-top:.7rem}.literature-exercise{background:#e7eee8;padding:1rem;border-radius:.4rem}.literature-exercise label{display:block;font-weight:700;margin:.8rem 0 .35rem}.literature-exercise textarea{width:100%;padding:.7rem;border:1px solid #9cb7a8;border-radius:.4rem;font:inherit;line-height:1.5;resize:vertical}.literature-exercise .literature-note{font-size:.9rem;color:#496457}.literature-exercise button{min-height:44px;margin-top:.4rem}@media(max-width:650px){.literature-cards{grid-template-columns:1fr}}

.literature-exercise summary{cursor:pointer;font-size:1.1rem;font-weight:700;color:#174d3e}.literature-exercise summary:focus-visible{outline:3px solid #b8913e;outline-offset:3px}.literature-exercise[open] summary{margin-bottom:.6rem}

/* 放大七項任務的內容，兼顧投影與窄螢幕閱讀 */
.literature-goal h3,.literature-sample h3,.literature-exercise summary,.brief-item h3,.literature-cards h4{font-size:clamp(1.12rem,1.4vw,1.35rem)}
.literature-goal p,.literature-cards p,.literature-exercise p,.literature-exercise label,.literature-exercise textarea,.brief-item p{font-size:clamp(1.08rem,1.35vw,1.3rem);line-height:1.5}
.literature-cards a,.brief-references,.brief-template summary{font-size:clamp(1.02rem,1.18vw,1.16rem)}
.literature-exercise .literature-note{font-size:1rem}

.brief-template p,.brief-template label,.brief-template textarea{font-size:clamp(1.08rem,1.35vw,1.3rem)}
@media (min-width:651px) and (max-width:800px){.literature-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* 封面網站入口 */
.frame{position:relative}.cover-qr[hidden]{display:none}.cover-qr{position:absolute;top:24%;right:4%;width:17%;display:flex;flex-direction:column;align-items:center;gap:.24em;padding:.65% .5%;background:#fff;border:1px solid #d1ddd5;border-radius:.4em;color:#174d3e;text-decoration:none;text-align:center;box-shadow:0 3px 12px #173f3220;font-size:clamp(.46rem,1.05vw,.9rem);font-weight:700;line-height:1.25}.frame .cover-qr img{width:73%;height:auto;box-shadow:none}.cover-qr small{font-size:.77em;font-weight:500;letter-spacing:-.02em}.cover-qr:focus-visible{outline:3px solid #b8913e;outline-offset:3px}