:root{--ink:#343138;--paper:#fffaf5;--rose:#e9c8c1;--peach:#f0d9cc;--sage:#b8c8b8;--lav:#aaa7ba;--blue:#9bb9c9;--gold:#d9a75c;--deep:#343946;--white:#fff;--shadow:0 18px 50px rgba(63,51,58,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth;overflow-x:hidden}body{margin:0;overflow-x:hidden;background:var(--paper);color:var(--ink);font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;line-height:1.75}img{max-width:100%;display:block}button,a{font:inherit}.skip-link{position:fixed;left:12px;top:-80px;z-index:99;background:#fff;color:#111;padding:10px 16px}.skip-link:focus{top:12px}.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:8px clamp(20px,5vw,72px);background:rgba(255,250,245,.94);backdrop-filter:blur(16px);border-bottom:1px solid rgba(52,49,56,.1)}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}.brand-logo{width:48px;height:48px;object-fit:contain;filter:drop-shadow(0 5px 8px rgba(74,52,44,.13))}.brand span{font-family:"Klee One",cursive;font-weight:600;font-size:20px}.brand small{color:#766f76}.site-header nav{display:flex;gap:10px}.site-header nav a{text-decoration:none;color:var(--ink);font-size:16px;font-weight:700;line-height:1.3;padding:9px 16px;background:#f2e8e4;border:1px solid #ead8d2;border-radius:999px;transition:.2s}.site-header nav a:hover,.site-header nav a:focus-visible{background:#fff;box-shadow:0 6px 16px rgba(78,60,65,.12);outline:3px solid rgba(189,112,101,.16)}.menu-button{display:none;border:0;background:var(--deep);color:#fff;border-radius:999px;padding:9px 17px;font-size:16px}
.hero{min-height:calc(100vh - 65px);display:grid;grid-template-columns:1.1fr .9fr;align-items:center;gap:6vw;padding:70px clamp(24px,8vw,120px);position:relative;overflow:hidden;background:linear-gradient(135deg,#fffaf5 0%,#fbf0ec 58%,#eef3ed 100%)}.hero:before,.hero:after{content:"";position:absolute;border-radius:50%;filter:blur(2px);opacity:.6}.hero:before{width:330px;height:330px;background:#d5d1de;left:-140px;top:-150px}.hero:after{width:260px;height:260px;background:#efcfc5;right:-100px;bottom:-100px}.eyebrow,.kicker{font-size:13px;letter-spacing:.19em;font-weight:900;color:#a35951}.hero h1{font-size:clamp(36px,4.8vw,68px);line-height:1.18;letter-spacing:-.045em;margin:10px 0 28px}.hero h1 .hero-title-line{font-size:1em;font-weight:900;letter-spacing:-.045em;white-space:nowrap}.hero h1 .hero-subtitle{font-size:.59em;letter-spacing:-.02em;font-weight:500}.hero h1 b{color:#b55d52}.lead{font-size:clamp(17px,1.45vw,21px);max-width:720px;color:#625d64}.hero-actions{display:flex;gap:12px;margin:30px 0}.button{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;border-radius:999px;text-decoration:none;font-weight:700}.primary{background:#bd7065;color:#fff;box-shadow:0 8px 20px rgba(189,112,101,.24)}.ghost{border:1px solid #aaa0a5;color:var(--ink)}.speaker{font-size:13px;color:#817980;margin-top:44px}.hero-visual{height:520px;position:relative}.notebook{position:absolute;inset:70px 30px 50px 50px;background:#fff;box-shadow:var(--shadow);border-radius:12px;transform:rotate(-3deg);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;border:1px solid #eee3dc}.notebook:before{content:"";position:absolute;left:24px;top:0;bottom:0;width:2px;background:#eabeb8}.notebook span{background:#e9c8c1;border-radius:20px;padding:5px 13px;font-size:13px}.notebook strong{font-family:"Klee One",cursive;font-size:clamp(28px,3vw,43px);line-height:1.45;margin:20px}.notebook i{font-size:54px;color:#789488}.orbit{position:absolute;z-index:2;width:82px;height:82px;display:grid;place-items:center;border-radius:50%;font-family:"Klee One",cursive;font-weight:600;box-shadow:0 10px 24px rgba(52,49,56,.13)}.orbit-one{background:#b7d0d2;top:22px;right:25px}.orbit-two{background:#d4c3d3;right:0;bottom:45px}.orbit-three{background:#e8c8a8;left:5px;bottom:22px}
.section{padding:100px clamp(24px,8vw,120px);position:relative}.paper{background:#fff}.section-heading{max-width:780px;margin-bottom:55px}.section-heading h2{font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:clamp(32px,4vw,50px);font-weight:900;letter-spacing:-.02em;line-height:1.35;margin:8px 0 15px}.section-heading>p:last-child{color:#706970;font-size:18px}.theory-heading{max-width:980px;margin-bottom:34px}.section-subtitle{font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:clamp(20px,2.3vw,29px)!important;font-weight:700;color:#a35951!important;margin:0 0 13px}.theory-figure{margin:0 0 45px;background:#f7f2ee;padding:18px;border-radius:22px;box-shadow:var(--shadow)}.theory-figure img{width:100%;max-height:660px;object-fit:contain;background:#fff;border-radius:12px}.theory-figure figcaption{padding:13px 8px 2px;color:#6f686e;font-size:14px}.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.process-grid article{min-height:270px;padding:25px;background:#faf4ef;border-radius:22px;position:relative;overflow:hidden;border-top:6px solid var(--c,var(--rose))}.process-grid article:nth-child(2){--c:var(--sage)}.process-grid article:nth-child(3){--c:var(--lav)}.process-grid article:nth-child(4){--c:var(--blue)}.process-grid article>b{font-size:54px;color:rgba(52,49,56,.08);position:absolute;right:14px;top:-6px}.process-grid span{font-size:12px;color:#887f85}.process-grid h3{font-size:25px;margin:6px 0 10px}.process-grid p{font-size:15px}.loop-note{margin:30px 0 0;padding:25px 30px;border:1px dashed #b59f98;border-radius:18px;display:grid;grid-template-columns:180px 1fr 1fr;gap:30px;align-items:center}.loop-note span{font-weight:700}.loop-note div{font-family:"Klee One",cursive;font-size:22px;color:#a2554d}.loop-note p{margin:0;font-size:14px;color:#746d73}
.teaching-heading{max-width:none}.teaching-heading h2{font-size:clamp(27px,3.5vw,45px);white-space:nowrap}.teaching-layout{display:grid;grid-template-columns:minmax(580px,1.15fr) minmax(360px,.85fr);gap:clamp(28px,4vw,64px);align-items:center}.teaching-map{width:600px;height:600px;margin:0;position:relative}.map-center{position:absolute;left:50%;top:50%;width:205px;height:205px;transform:translate(-50%,-50%);border-radius:50%;background:#fff;box-shadow:var(--shadow);display:grid;place-content:center;text-align:center;z-index:2}.map-center small{color:#a85d54}.map-center strong{font-family:"Klee One",cursive;font-size:26px;line-height:1.4}.step{--angle:calc(var(--i)*72deg - 90deg);position:absolute;left:calc(50% + 200px*cos(var(--angle)) - 60px);top:calc(50% + 200px*sin(var(--angle)) - 60px);width:120px;height:120px;border:0;border-radius:50%;background:var(--step-color,#c7d8d6);color:var(--ink);cursor:pointer;box-shadow:0 8px 20px rgba(60,53,57,.12);transition:.25s}.step:nth-of-type(3){--step-color:#d9c6db}.step:nth-of-type(4){--step-color:#aecbe2}.step:nth-of-type(5){--step-color:#efc8c7}.step:nth-of-type(6){--step-color:#e7d2b7}.step b{display:block;font-family:"Klee One",cursive;font-size:32px}.step span{font-size:12px}.step:hover,.step:focus-visible,.step.active{transform:scale(1.1);outline:4px solid rgba(173,92,82,.2)}.teaching-map:before{content:"";position:absolute;left:50%;top:50%;width:400px;height:400px;transform:translate(-50%,-50%);border:2px dashed #d8cac5;border-radius:50%}.step-detail{width:100%;min-height:360px;margin:0;background:#fff;border-radius:24px;box-shadow:var(--shadow);padding:34px;display:grid;grid-template-columns:90px 1fr;gap:22px;align-content:center}.detail-number{width:78px;height:78px;border-radius:50%;background:#c7d8d6;display:grid;place-items:center;font-family:"Klee One",cursive;font-size:38px}.detail-label{font-size:12px;color:#a45d55;margin:0}.step-detail h3{margin:2px 0;font-size:25px}.detail-copy{margin:5px 0}.teacher-move{background:#f7f1ec;padding:14px 18px;border-radius:12px;font-size:14px}
.dark{background:var(--deep);color:#f8f5f1;overflow:hidden}.dark:before{content:"";position:absolute;width:550px;height:550px;border-radius:50%;background:#454b5b;right:-180px;top:80px}.light>p:last-child{color:#c9c7ca}.dark .kicker{color:#e8a99f}.prep-layout{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative}.prep-stairs{display:flex;flex-direction:column;gap:10px}.prep-stairs article{display:flex;align-items:center;gap:18px;background:#454b5b;padding:16px 22px;border-radius:13px;width:calc(70% + var(--w,0%));margin-left:calc(30% - var(--w,0%));border-left:6px solid #d6aba5}.prep-stairs article:nth-child(2){--w:10%;border-color:#b8c8b8}.prep-stairs article:nth-child(3){--w:20%;border-color:#aaa7ba}.prep-stairs article:nth-child(4){--w:30%;border-color:#9bb9c9}.prep-stairs b{font-size:28px;color:#9297a4}.prep-stairs small{color:#c2bec2}.prep-stairs h3,.prep-stairs p{margin:0}.prep-stairs p{font-size:13px;color:#cac8cb}.prompt-card{background:#fff;color:var(--ink);padding:32px;border-radius:24px;box-shadow:0 24px 70px rgba(0,0,0,.2)}.mini-title{font-weight:900;color:#a4574f}.prompt-card ol{padding-left:24px}.prompt-card li{margin:14px 0}.prompt-rule{background:#f2ebe5;border-radius:12px;padding:13px;font-size:14px}.tool-cards{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px}.tool-cards article{background:#3d4251;border:1px solid #535a6c;padding:27px;border-radius:18px}.tool-cards span{font-size:12px;color:#e8a99f}.tool-cards h3{margin:5px 0}.tool-cards p{font-size:14px;color:#ccc9ce}.card-actions{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin-top:12px}.card-actions .card-action{margin-top:0}.card-action{display:inline-block;margin-top:10px;border:1px solid #dbaca5;background:#f1d3cf;color:#3a3033;border-radius:999px;padding:8px 14px;font-weight:700;cursor:pointer;text-decoration:none;line-height:1.55}.card-action:hover,.card-action:focus-visible{background:#fff;outline:3px solid rgba(232,169,159,.25)}.dark blockquote{position:relative;max-width:850px;margin:60px auto 0;text-align:center;font-family:"Klee One",cursive;font-size:24px;color:#fff}.dark blockquote cite{display:block;font-family:"Noto Sans TC",sans-serif;font-size:12px;color:#aaaeb8;margin-top:12px;font-style:normal}
.example{background:#f8f0eb}.lesson-brief{display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:18px;padding:25px;box-shadow:var(--shadow);margin-bottom:35px}.lesson-brief div{padding:0 22px;border-right:1px solid #eaded7}.lesson-brief div:last-child{border:0}.lesson-brief small,.lesson-brief strong{display:block}.lesson-brief small{font-size:12px;color:#a25a52}.gallery{display:grid;grid-template-columns:180px 1fr;gap:24px}.gallery-tabs{display:flex;flex-direction:column;gap:8px}.gallery-tabs button{border:0;background:#e7ded8;color:var(--ink);padding:13px;border-radius:12px;text-align:left;cursor:pointer}.gallery-tabs button[aria-selected="true"]{background:#b76d63;color:#fff;font-weight:700;transform:translateX(8px)}.gallery figure{margin:0;background:#fff;padding:13px;border-radius:18px;box-shadow:var(--shadow)}.gallery figure img{border-radius:10px;width:100%;aspect-ratio:16/9;object-fit:contain;background:#eee}.gallery figcaption{display:flex;justify-content:space-between;align-items:center;padding:12px 5px 0;color:#756d72;font-size:13px}.gallery figcaption button{border:0;background:transparent;color:#a2554d;font-weight:700;cursor:pointer}.writing-plate{margin:45px auto 0;display:flex;justify-content:center;align-items:center;gap:22px}.course{width:190px;height:190px;border-radius:50%;background:#fff;display:grid;place-content:center;text-align:center;box-shadow:var(--shadow);border:8px solid #b8c8b8}.main-course{width:235px;height:235px;border-color:#d6aaa3}.course span{font-size:12px}.course b{font-family:"Klee One",cursive;font-size:32px}.course small{color:#837b81}.writing-plate>i{font-size:26px;color:#a45d55}
.assessment-heading{max-width:900px}.assessment-heading h2 span{display:block;font:inherit;color:inherit}.assessment-map{display:grid;grid-template-columns:360px minmax(260px,.72fr) minmax(420px,1.28fr);gap:24px;align-items:center}.axis{display:grid;grid-template-columns:repeat(2,112px);gap:8px;transform:translateX(-8px) rotate(45deg);justify-content:center}.axis span{height:112px;background:#8796aa;color:#fff;display:grid;place-items:center;text-align:center;font-size:17px}.axis span:nth-child(2){background:#9c91ac}.axis span:nth-child(3){background:#73a1a5}.axis span:nth-child(4){background:#91b7bd}.axis span br,.axis span{transform:rotate(-45deg)}.feedback{display:grid;gap:12px}.feedback article{border-left:5px solid #d1a097;padding:16px 22px;background:#faf4ef}.feedback article:nth-child(2){border-color:#a7b9a8}.feedback article:nth-child(3){border-color:#9aa5bb}.feedback small{color:#9e5a52}.feedback h3,.feedback p{margin:2px 0}.assessment-example{margin:0;background:#f7f1ec;border-radius:18px;padding:10px;box-shadow:var(--shadow)}.assessment-example img{width:100%;border-radius:10px}.assessment-example figcaption{text-align:center;padding:8px 5px 1px;color:#756d72;font-size:13px}.download-card{margin-top:65px;background:#f4ece6;border-radius:24px;padding:22px;display:grid;grid-template-columns:minmax(260px,44%) 1fr;gap:35px;align-items:center}.download-card img{width:100%;aspect-ratio:1.414/1;object-fit:cover;object-position:top;border-radius:14px;border:1px solid #d8cdc7;box-shadow:0 10px 25px rgba(56,48,52,.12)}.download-card h3{font-family:"Klee One",cursive;font-size:28px;margin:5px 0}.download-card p:not(.kicker){color:#6e676c}.balance{margin-top:60px;display:grid;grid-template-columns:1fr auto 1fr;gap:28px;align-items:center}.balance div{padding:28px;border-radius:18px;background:#f5ede7}.balance span{font-size:36px;color:#ad6b62}.balance h3{font-family:"Klee One",cursive;font-size:25px;margin:0}
.principles{background:#e8eee8}.principles .section-heading{text-align:center;margin-left:auto;margin-right:auto;margin-bottom:32px}.principles-figure{max-width:1180px;margin:42px auto 0;background:#fff;padding:12px 12px 20px;border-radius:20px;box-shadow:var(--shadow)}.principles-figure img{width:100%;border-radius:12px}.principles-figure figcaption{text-align:center;padding:10px 5px 2px;color:#756d72;font-size:13px}.principles-link-row{display:flex;justify-content:center;padding-top:12px}.principles-link-row .button{font-size:16px;padding:10px 22px}.takeaways{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.takeaways li{background:#fff;padding:24px;border-radius:16px;display:grid;grid-template-columns:50px 1fr;column-gap:8px}.takeaways span{grid-row:1/3;color:#c08a82;font-size:26px;font-weight:900}.takeaways b{font-size:18px}.takeaways p{margin:3px 0;font-size:14px;color:#706970}.closing{text-align:center;padding:100px 24px;background:#fff9f5}.closing h2{font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:clamp(24px,3.3vw,42px);font-weight:400;line-height:1.55;margin:10px 0 34px}.closing h2 span,.closing h2 .closing-lead{font-size:1em;font-weight:400}.closing h2 .closing-lead{color:#b15f55}footer{display:flex;justify-content:space-between;padding:25px clamp(24px,8vw,120px);background:#302e34;color:#aaa6ab;font-size:12px}
dialog{padding:0;border:0;border-radius:16px;max-width:min(95vw,1300px);background:#111;box-shadow:0 30px 80px rgba(0,0,0,.4)}dialog::backdrop{background:rgba(25,24,27,.85)}dialog img{max-height:90vh}.dialog-close{position:absolute;right:12px;top:10px;width:38px;height:38px;border:0;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:26px;cursor:pointer}#prompt-dialog,#writing-prompt-dialog{width:min(900px,94vw);max-height:88vh;background:#fffaf5;color:var(--ink);padding:28px}.prompt-dialog-head{display:flex;justify-content:space-between;gap:30px;padding-right:42px}.prompt-dialog-head h2{font-family:"Klee One",cursive;margin:3px 0 15px;font-size:28px}.prompt-close,.writing-prompt-close{background:#403d44}#game-prompt,#writing-prompt{white-space:pre-wrap;max-height:55vh;overflow:auto;background:#f3ece6;border:1px solid #ded1c9;border-radius:14px;padding:20px;font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;font-size:15px;line-height:1.75;margin:0}.prompt-dialog-actions{display:flex;align-items:center;gap:15px;padding-top:18px}#copy-status,#writing-copy-status{color:#7d554f;font-size:14px}.reveal{opacity:0;transform:translateY(20px);transition:opacity .65s ease,transform .65s ease}.reveal.visible{opacity:1;transform:none}
@media(max-width:1180px){.assessment-map{grid-template-columns:300px 1fr}.assessment-example{grid-column:1/-1;max-width:850px;margin:18px auto 0}}
@media(max-width:1050px){.teaching-layout{grid-template-columns:1fr}.teaching-map{margin:0 auto}.step-detail{max-width:760px;margin:0 auto;min-height:0}}
@media(max-width:900px){.menu-button{display:block}.site-header nav{display:none;position:absolute;top:70px;left:15px;right:15px;flex-direction:column;background:#fff;padding:16px;border-radius:18px;box-shadow:var(--shadow)}.site-header nav.open{display:flex}.site-header nav a{text-align:center;font-size:17px}.brand small{display:none}.hero{grid-template-columns:1fr;padding-top:55px}.hero-visual{height:400px}.process-grid{grid-template-columns:repeat(2,1fr)}.loop-note{grid-template-columns:1fr}.prep-layout,.assessment-map{grid-template-columns:1fr}.tool-cards,.takeaways{grid-template-columns:1fr}.gallery{grid-template-columns:1fr}.gallery-tabs{flex-direction:row;overflow-x:auto;padding-bottom:5px}.gallery-tabs button{white-space:nowrap}.gallery-tabs button[aria-selected="true"]{transform:translateY(-3px)}.lesson-brief{grid-template-columns:1fr}.lesson-brief div{border-right:0;border-bottom:1px solid #eaded7;padding:13px}.writing-plate{transform:scale(.8);margin-left:-10%;margin-right:-10%}.axis{margin:50px auto}.download-card{grid-template-columns:1fr}.hero h1{font-size:48px}}
@media(max-width:560px){.section{padding:75px 20px}.site-header{padding:7px 14px}.brand-logo{width:44px;height:44px}.brand span{font-size:18px}.hero{padding:45px 20px}.hero h1{font-size:clamp(27px,8.4vw,33px)}.hero h1 .hero-subtitle{font-size:.63em}.hero-visual{height:350px}.notebook{inset:50px 20px 35px 25px}.process-grid{grid-template-columns:1fr}.process-grid article{min-height:220px}.teaching-heading h2{font-size:clamp(22px,6.25vw,25px);letter-spacing:-.04em}.assessment-heading h2{font-size:clamp(25px,7vw,28px)}.teaching-map{width:600px;left:50%;transform:translateX(-50%) scale(.55);margin-top:-135px;margin-bottom:-135px}.step-detail{grid-template-columns:1fr;padding:26px;min-height:0}.prep-stairs article{width:100%;margin-left:0}.tool-cards{grid-template-columns:1fr}.lesson-brief{padding:10px}.gallery{min-width:0}.gallery-tabs{width:100%;max-width:calc(100vw - 40px);min-width:0}.writing-plate{transform:none;flex-direction:column;margin:35px 0}.writing-plate>i{transform:rotate(90deg)}.course,.main-course{width:190px;height:190px}.axis{transform:rotate(45deg) scale(.75);margin:5px auto}.balance{grid-template-columns:1fr}.balance span{text-align:center}.takeaways{grid-template-columns:1fr}.closing{padding:75px 20px}.closing h2{font-size:24px}footer{flex-direction:column}.gallery figcaption{align-items:flex-start;gap:12px}.gallery figcaption span{max-width:75%}#prompt-dialog,#writing-prompt-dialog{padding:20px}.prompt-dialog-head{padding-right:34px}.prompt-dialog-head h2{font-size:22px}#game-prompt,#writing-prompt{font-size:14px;padding:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal{opacity:1;transform:none;transition:none}.step{transition:none}}