:root{--orange:#e96822;--deep:#923810;--ink:#30362f;--muted:#637068;--paper:#fffaf3;--line:#e4dfd3;--green:#244c43;--yellow:#ffe7a5}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:var(--paper);font:18px/1.8 system-ui,-apple-system,"Microsoft JhengHei",sans-serif}button,a{touch-action:manipulation}button{font:inherit;cursor:pointer}a{color:var(--deep)}button:focus-visible,a:focus-visible{outline:3px solid #1e6f8e;outline-offset:4px}header{padding:22px 5%;display:flex;align-items:center;justify-content:space-between;gap:25px;border-bottom:1px solid var(--line);background:#fff} .brand{text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:14px;font-size:24px;font-weight:800;line-height:1.4}.brand small{display:block;font-size:16px;font-weight:500;color:var(--muted);margin-top:5px}.mark{background:var(--orange);color:white;display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:22px;line-height:1.15;border-radius:16px 16px 16px 4px;width:65px;height:68px;transform:rotate(-5deg)}.mark span{font-size:24px}.headernote{font-size:16px;color:var(--muted)}main{max-width:1240px;margin:auto;padding:36px 36px 70px;outline:none}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(30px,4vw,44px);line-height:1.45;letter-spacing:.02em;margin-bottom:10px}h2{font-size:26px;line-height:1.5}h3{font-size:22px;line-height:1.5}p{margin-bottom:18px}.eyebrow{font-size:16px;color:var(--deep);font-weight:700;letter-spacing:.08em}.intro{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:26px}.intro p{color:var(--muted);margin:0}.total{font-size:18px;white-space:nowrap;background:var(--yellow);padding:10px 20px;border-radius:50px}.total strong{font-size:28px;color:var(--deep);margin-right:8px}.groups{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px}.groups button,.control{padding:10px 22px;border-radius:12px;background:white;color:var(--ink);border:1px solid var(--line)}.groups button[aria-pressed=true]{background:var(--green);color:white;border-color:var(--green)}.sectionhead{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:15px}.sectionhead h2{margin:0}.sectionhead span{color:var(--muted);font-size:16px}.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.topiccard{background:#fff;border:1px solid var(--line);border-radius:20px;padding:24px;text-align:left;display:flex;flex-direction:column;position:relative;transition:transform .18s,box-shadow .18s;border-top:5px solid var(--orange);min-height:240px;color:var(--ink)}.topiccard:nth-child(3n+2){border-top-color:#d6ac35}.topiccard:nth-child(3n+3){border-top-color:#4d7c6d}.topiccard:hover{transform:translateY(-4px);box-shadow:0 9px 26px #28392712}.topicmeta{display:flex;justify-content:space-between;gap:10px;font-size:16px;color:var(--muted);margin-bottom:16px}.topiccard h3{margin-bottom:10px}.topiccard p{font-size:16px;color:var(--muted);line-height:1.8;margin-bottom:22px}.cardbottom{display:flex;gap:8px;margin-top:auto;flex-wrap:wrap}.cardbottom span{font-size:16px;background:#f6f3ed;border-radius:8px;padding:3px 10px}.back{background:none;border:0;color:var(--deep);padding:0;margin-bottom:24px;text-decoration:underline;text-underline-offset:5px}.detailtop{display:flex;align-items:flex-end;justify-content:space-between;gap:15px;margin-bottom:25px}.detailtop h1{font-size:clamp(28px,4vw,40px)}.detailtop p{color:var(--muted);margin-bottom:0}.tabs{display:flex;background:#eee9df;padding:6px;border-radius:15px;gap:6px;margin-bottom:30px}.tabs button{flex:1;padding:13px 10px;border:0;border-radius:11px;color:var(--muted);background:transparent;font-weight:700}.tabs button[aria-selected=true]{background:white;color:var(--deep);box-shadow:0 2px 6px #2424240a}.guidegrid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:25px}.panel{background:white;border:1px solid var(--line);padding:30px;border-radius:22px;margin-bottom:24px}.brief{background:#fff0d9;border:0;border-left:5px solid var(--orange);padding:22px 28px;border-radius:12px;margin-bottom:24px}.brief p{margin:0}.outline{list-style:none;margin:0;padding:0}.outline li{display:flex;gap:17px;padding:18px 0;border-bottom:1px dashed var(--line)}.outline li:last-child{border:0}.num{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;background:var(--orange);color:white;border-radius:10px;font-weight:800;line-height:1}.outline strong{display:block;margin-bottom:4px}.chips{display:flex;flex-wrap:wrap;gap:10px}.chip{font-size:18px;background:#f3f6ed;color:var(--green);border:1px solid #dce7d6;padding:4px 12px;border-radius:8px}.quote{border-left:3px solid #dfb545;padding-left:15px;font-size:18px}.source{font-size:16px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px;line-height:1.9}.source a{display:inline-block}.note{font-size:16px;color:var(--muted)}.sample{max-width:850px;margin:0 auto}.sampletitle{display:flex;justify-content:space-between;gap:20px;align-items:center;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:28px}.sampletitle h2{margin:0}.samplearticle{font-family:"Microsoft JhengHei",system-ui,sans-serif;font-size:21px;line-height:2.05}.samplearticle p{text-indent:2em;margin-bottom:26px}.samplearticle.application p{text-indent:0;white-space:pre-line}.samplelabel{font-size:16px;color:var(--deep);display:block;margin-bottom:12px;font-family:system-ui}.mapping{border-top:1px dashed var(--line);padding-top:22px}.mapping div{font-size:18px;margin-bottom:12px}.animation{max-width:980px;margin:auto}.animintro{display:flex;align-items:center;justify-content:space-between;gap:15px}.animintro p{margin:0}.stage{background:var(--green);color:white;border-radius:26px;padding:32px;margin:24px 0;min-height:440px;overflow:hidden}.stage .scenehead{display:flex;align-items:center;gap:14px;margin-bottom:20px}.scenehead .num{background:var(--yellow);color:var(--green);width:50px;height:50px;font-size:28px;border-radius:14px}.scenehead span{color:#d7e9df;font-size:16px}.scenehead h2{font-size:25px;margin:0;color:white}.thought{background:#ffffff13;border:1px solid #ffffff30;border-radius:14px;padding:16px 22px;margin-bottom:20px;font-size:21px;line-height:1.8}.thought small{display:block;color:#ffdfa6;font-size:16px;font-weight:700;margin-bottom:4px}.examplebubble{background:#fff9ec;color:var(--ink);border-radius:16px;padding:24px;font-size:21px;line-height:1.9}.examplebubble small{font-size:16px;color:var(--deep);display:block;font-weight:700;margin-bottom:8px}.reveal{animation:cardin .55s ease both}.reveal2{animation:cardin .55s .55s ease both}.reveal3{animation:cardin .55s 1.1s ease both}@keyframes cardin{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}.timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:22px}.timeline button{background:white;border:1px solid var(--line);padding:12px 5px;border-radius:12px;font-size:16px}.timeline button[aria-current=step]{background:var(--yellow);border:2px solid var(--orange);font-weight:700}.timeline button b{display:block;font-size:21px}.controls{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.control.primary{background:var(--orange);border-color:var(--orange);color:white;min-width:125px}.control:disabled{opacity:.45;cursor:default}.controls .cluster{display:flex;gap:10px;flex-wrap:wrap}.track{height:7px;background:#e5decc;border-radius:10px;overflow:hidden;margin:18px 0}.fill{height:100%;background:var(--orange);width:0;transition:width .25s}.animstatus{font-size:16px;color:var(--muted);margin:0}.finish{padding:16px;background:#fff0d9;border-radius:14px;margin-top:20px}.loading{text-align:center;padding:70px}.retry{display:block;margin:20px auto}.noscript{padding:30px}footer{border-top:1px solid var(--line);padding:26px 5%;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;font-size:16px;color:var(--muted);background:white}footer strong{color:var(--ink)}@media(max-width:920px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.headernote{display:none}.guidegrid{grid-template-columns:1fr}.intro{align-items:start}.panel{padding:24px}}@media(max-width:600px){body{font-size:18px}header{padding:16px 20px}.brand{font-size:20px}.brand small{font-size:16px}.mark{width:53px;height:59px;font-size:20px;flex-shrink:0}main{padding:25px 18px 45px}.intro{display:block}.total{display:inline-block;margin-top:15px;padding:5px 17px}.groups{gap:8px}.groups button{font-size:16px;padding:9px 12px;flex:1}.grid{grid-template-columns:1fr}.topiccard{min-height:0;padding:22px}.detailtop{display:block}.tabs{gap:2px;padding:4px}.tabs button{font-size:16px;padding:13px 4px}.brief{padding:20px}.panel{padding:22px 18px}.stage{padding:22px 18px;min-height:460px}.thought,.examplebubble{font-size:19px;padding:17px}.scenehead h2{font-size:22px}.timeline{gap:5px}.timeline button{font-size:16px;padding:8px 0}.controls{justify-content:center}.samplearticle{font-size:20px}.sampletitle{display:block}.sampletitle .note{display:block;margin-top:12px}.sectionhead{align-items:flex-start}.sectionhead span{white-space:nowrap}.animintro{display:block}.animintro .note{margin-top:10px}.detailtop h1{font-size:30px}footer{display:block}footer span{display:block;margin-top:10px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}@media print{header,footer,.back,.tabs,.controls,.groups{display:none}body{background:white}main{padding:0;max-width:none}.panel{border:0}.samplearticle{font-size:16px}.note{color:#333}}
.stage[data-phase=think] .examplebubble,.stage[data-phase=outline] .examplebubble{visibility:hidden}.stage[data-phase=think] .scenehead h2{opacity:.5}.stage[data-phase=outline] .scenehead h2{animation:keyfocus .7s ease both}.stage[data-phase=example] .examplebubble{animation:cardin .6s ease both}.stage[data-phase=example] .sentence{animation:sentencein .8s var(--delay) both}.stage.paused .sentence,.stage.paused .reveal,.stage.paused .reveal2,.stage.paused .reveal3,.stage.paused .examplebubble{animation-play-state:paused}.stage[data-phase=full] .sentence{animation:none}.stage[data-phase=full] .reveal,.stage[data-phase=full] .reveal2,.stage[data-phase=full] .reveal3{animation:none}@keyframes sentencein{from{opacity:0;background:#ffe5a2}to{opacity:1;background:transparent}}@keyframes keyfocus{from{transform:translateX(8px);color:#ffdfa6}to{transform:translateX(0);color:white}}

/* Topic categories: one category panel at a time. */
.category-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:26px 0 30px}.category-tabs button{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:60px;padding:13px 18px;background:#fff;border:1px solid var(--line);border-radius:14px;font-size:1.05rem;font-weight:700;color:var(--ink);text-align:left;transition:background .15s,border-color .15s}.category-tabs button:hover{border-color:var(--orange);background:#fff3e8}.category-tabs button[aria-selected=true]{background:var(--green);border-color:var(--green);color:#fff}.category-count{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 5px;border-radius:8px;background:#f0ede5;color:var(--muted);font-size:1rem;font-weight:600;flex-shrink:0}.category-tabs button[aria-selected=true] .category-count{background:#ffffff24;color:#fff}.category-description{color:var(--muted);margin-bottom:24px;font-size:1.05rem}#category-content:focus-visible{outline:3px solid #1e6f8e;outline-offset:7px;border-radius:8px}.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}@media(max-width:800px){.category-tabs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.category-tabs button{padding:11px 14px;font-size:1rem}}@media(max-width:380px){.category-tabs button{padding:10px 9px;gap:5px}.category-count{min-width:24px;height:26px}}@media print{.category-tabs{display:none}}

/* Compact centered wordmark with a circular teacher portrait. */
.mascot-header{justify-content:center;padding:18px 24px;background:linear-gradient(120deg,#fff5ed 0%,#fff 48%,#fbf4ff 100%);border-bottom:1px solid #eaded1}.mascot-brand{display:grid;grid-template-columns:88px minmax(0,1fr) 88px;gap:18px;align-items:center;width:min(100%,820px);text-align:center}.brand-copy{display:block;min-width:0}.brand-wordmark{display:inline-flex;align-items:baseline;justify-content:center;gap:.12em;font-family:system-ui,-apple-system,"Microsoft JhengHei",sans-serif;font-size:clamp(2rem,5.2vw,3.25rem);font-weight:800;line-height:1.45;letter-spacing:.01em;white-space:nowrap;-webkit-text-stroke:0;text-shadow:none}.brand-signature{display:inline-block;color:#8655a4;transform:none;font-family:inherit}.brand-fen{display:inline-block;color:#b866a4;transform:none}.brand-topic{display:inline-block;color:#b54c1b;transform:none}.mascot-brand .brand-subtitle{margin-top:2px;font-family:system-ui,-apple-system,"Microsoft JhengHei",sans-serif;font-size:1rem;font-weight:500;color:#6e6470;line-height:1.6;letter-spacing:.08em}.mascot-logo{position:relative;display:block;overflow:hidden;width:88px;height:88px;border-radius:50%;background:radial-gradient(circle at 48% 30%,#fffafc 0%,#f3e1f4 80%);border:3px solid #be98cd;box-shadow:0 0 0 4px #fff,0 0 0 5px #ead8ef,0 3px 10px #8655a416}.mascot-logo .teacher-mascot{display:block;position:absolute;width:140%;max-width:none;height:auto;left:-20%;top:-5%;object-fit:initial;object-position:initial}.brand-balance{display:block;width:88px;height:1px}@media(max-width:600px){.mascot-header{padding:14px 12px}.mascot-brand{grid-template-columns:56px minmax(0,1fr) 56px;gap:8px}.mascot-logo{width:56px;height:56px;border-width:2px;box-shadow:0 0 0 3px #fff,0 0 0 4px #ead8ef}.brand-balance{width:56px}.brand-wordmark{font-size:clamp(1.75rem,6vw,2rem);letter-spacing:0;gap:0;-webkit-text-stroke:0;text-shadow:none}.mascot-brand .brand-subtitle{font-size:1rem;letter-spacing:0;line-height:1.5;margin-top:4px}}@media(max-width:350px){.mascot-brand{grid-template-columns:48px minmax(0,1fr) 48px;gap:6px}.mascot-logo{width:48px;height:48px}.brand-balance{width:48px}.brand-wordmark{font-size:1.5rem}.mascot-brand .brand-subtitle{letter-spacing:-.02em}}