:root{
  --ink:#263238;--muted:#68777d;--paper:#fffdf7;--sky:#dff3f5;--mint:#dff1e6;
  --yellow:#ffe9a8;--coral:#f27b6b;--blue:#4b87c5;--green:#5f9e79;--line:#dbe2df;
  --shadow:0 12px 35px rgba(39,60,70,.10);--radius:22px;
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);background:#f7f4ed;font-family:ui-rounded,"Noto Sans TC","PingFang TC",system-ui,sans-serif;line-height:1.65}
button{font:inherit;cursor:pointer}.hero{max-width:1180px;margin:auto;min-height:610px;display:grid;grid-template-columns:1fr 1.15fr;gap:30px;align-items:center;padding:55px 25px 30px}
.hero-copy{position:relative;z-index:2}.eyebrow{font-size:.78rem;font-weight:800;letter-spacing:.12em;color:var(--blue)}h1{font-size:clamp(42px,7vw,76px);line-height:1.05;margin:15px 0;color:#253942}h2{font-size:clamp(28px,4vw,42px);line-height:1.15;margin:8px 0 15px}.lead{font-size:1.18rem;max-width:650px;color:#4d5d62}.note{font-size:.8rem;color:#8a9599;max-width:620px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin:28px 0}.primary,.ghost,.small-btn,.filter{border:0;border-radius:999px;padding:12px 18px;font-weight:800}.primary{background:var(--coral);color:#fff;box-shadow:0 8px 20px rgba(242,123,107,.28)}.ghost,.small-btn{background:#fff;border:1px solid var(--line);color:var(--ink)}
.hero-art{height:440px;background:linear-gradient(#ccecf0 0 64%,#b9dbad 64%);border-radius:40px;position:relative;overflow:hidden;box-shadow:var(--shadow);border:8px solid #fff}.sun{position:absolute;width:90px;height:90px;background:#ffd568;border-radius:50%;right:55px;top:45px}.cloud{position:absolute;background:#fff;border-radius:99px;width:125px;height:38px}.c1{left:35px;top:70px}.c2{left:120px;top:100px;transform:scale(.7)}.hill{position:absolute;bottom:-110px;left:-10%;width:120%;height:230px;border-radius:50% 50% 0 0;background:#98c48d}.kid{position:absolute;font-size:100px;bottom:85px;filter:drop-shadow(0 7px 4px rgba(0,0,0,.12));animation:bob 2.7s ease-in-out infinite}.k1{left:18%;}.k2{right:17%;animation-delay:.8s}.speech{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);background:#fff;padding:13px 18px;border-radius:18px;font-weight:900;box-shadow:0 7px 20px rgba(0,0,0,.1);white-space:nowrap}.speech:after{content:"";position:absolute;bottom:-10px;left:48%;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
@keyframes bob{50%{transform:translateY(-9px)}}main{max-width:1180px;margin:auto;padding:0 25px 70px}.dashboard{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:0 25px 55px}.stat{background:#fff;border:1px solid var(--line);padding:18px;border-radius:18px;text-align:center}.stat strong{display:block;font-size:1.65rem}.stat span{color:var(--muted);font-size:.85rem}.intro{display:grid;grid-template-columns:1fr 1fr;gap:35px;align-items:center;background:#eef7f2;border-radius:28px;padding:38px;margin-bottom:70px}.mini-flow{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}.mini-flow div{background:#fff;padding:20px;border-radius:18px;font-size:1.8rem}.mini-flow b,.mini-flow small{display:block}.mini-flow b{font-size:1rem}.mini-flow small{font-size:.78rem;color:var(--muted)}
.section{margin:70px 0}.section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:25px}.workflow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:9px}.step{background:#fff;border:1px solid var(--line);border-radius:20px;padding:17px;min-height:135px;transition:.25s}.step.active{transform:translateY(-5px);box-shadow:var(--shadow);border-color:#b6d5d2}.step i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--yellow);font-style:normal;font-weight:900}.step b{display:block;margin-top:10px}.step span{font-size:.78rem;color:var(--muted)}.arrow{font-size:1.5rem;color:#9aa7aa}.filters{display:flex;gap:7px;flex-wrap:wrap}.filter{background:#fff;border:1px solid var(--line);color:#647177}.filter.active{background:#2d4851;color:#fff;border-color:#2d4851}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.card{background:#fff;border:1px solid var(--line);border-radius:24px;overflow:hidden;box-shadow:0 6px 18px rgba(39,60,70,.05);transition:.25s}.card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}.card.hide{display:none}.scene-art{height:165px;background:linear-gradient(#dff3f5 0 62%,#e8d7b7 62%);position:relative;display:grid;place-items:center}.scene-art .emoji{font-size:58px;filter:drop-shadow(0 5px 4px rgba(0,0,0,.12))}.scene-art .mini-bubble{position:absolute;background:#fff;padding:5px 9px;border-radius:12px;font-size:.7rem;font-weight:800;box-shadow:0 4px 10px #0001}.card-body{padding:20px}.tag{display:inline-block;border-radius:99px;padding:4px 9px;font-size:.68rem;font-weight:900;background:var(--sky)}.tag.conflict{background:#ffe0db}.tag.language{background:#e7e1ff}.card h3{margin:10px 0 6px;font-size:1.12rem}.card p{margin:0;color:#647177;font-size:.88rem}.open{margin-top:15px;width:100%;background:#f6f7f5;border:1px solid var(--line);padding:9px;border-radius:12px;font-weight:800}.practice{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;background:#fff;border-radius:30px;padding:38px;box-shadow:var(--shadow)}.scene{height:310px;border-radius:22px;background:linear-gradient(#d8eff1 0 55%,#c9dfb8 55%);position:relative;overflow:hidden}.table{position:absolute;left:14%;right:14%;bottom:60px;height:60px;background:#bd875c;border-radius:15px}.person{position:absolute;bottom:95px;font-size:82px}.p1{left:18%}.p2{right:18%}.object{position:absolute;left:47%;bottom:110px;font-size:48px}.bubble{position:absolute;background:#fff;border-radius:16px;padding:8px 12px;font-weight:800;font-size:.75rem;box-shadow:0 5px 15px #0002}.b1{top:35px;left:9%}.b2{top:105px;right:7%}.quote-list p{background:#f5f8f5;border-left:5px solid #7ca88b;padding:12px 15px;border-radius:0 12px 12px 0;margin:10px 0}.ladder{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;align-items:end}.level{background:#fff;border:1px solid var(--line);padding:20px;border-radius:20px;min-height:150px;position:relative;overflow:hidden}.level:nth-child(2){min-height:175px}.level:nth-child(3){min-height:200px}.level:nth-child(4){min-height:225px}.level:nth-child(5){min-height:250px}.level b{font-size:.75rem;color:var(--blue)}.level span{display:block;font-weight:900;margin:10px 0}.level small{color:var(--muted)}.parent-card{background:#fff0cf;border-radius:28px;padding:35px;display:flex;justify-content:space-between;align-items:center;gap:25px}.parent-card p{max-width:700px}footer{background:#2c3e43;color:#dce7e8;padding:35px max(25px,calc((100vw - 1180px)/2));font-size:.8rem}.modal{position:fixed;inset:0;background:#18282dcc;display:none;align-items:center;justify-content:center;padding:20px;z-index:20}.modal.show{display:flex}.modal-box{background:#fffdf8;max-width:760px;width:100%;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;border-radius:28px;padding:34px;position:relative;box-shadow:0 25px 70px #0005}.close{position:absolute;right:18px;top:14px;border:0;background:#eef1ef;width:38px;height:38px;border-radius:50%;font-size:1.4rem}.modal-scene{background:linear-gradient(#dff3f5 0 60%,#e4d3b5 60%);height:190px;border-radius:20px;display:grid;place-items:center;font-size:75px;margin:20px 0}.prompt{background:#f0f7f3;padding:18px;border-radius:16px;margin:10px 0}.answer{background:#fff5d8;padding:18px;border-radius:16px;margin:10px 0}.done-btn{background:#5f9e79;color:#fff;border:0;border-radius:999px;padding:11px 18px;font-weight:900;margin-top:15px}
.workflow-svg{width:100%;height:auto;border-radius:24px;box-shadow:var(--shadow);margin-bottom:25px;display:block}.workflow{display:none}
@media(max-width:850px){.hero{grid-template-columns:1fr;padding-top:25px}.hero-art{height:350px;order:-1}.dashboard{grid-template-columns:repeat(2,1fr);margin:0 0 35px}.intro,.practice{grid-template-columns:1fr}.workflow-svg{display:none}.workflow{display:grid;grid-template-columns:1fr;gap:20px}.arrow{display:none}.cards{grid-template-columns:1fr 1fr}.ladder{grid-template-columns:1fr}.level,.level:nth-child(n){min-height:120px}.section-head{align-items:flex-start;flex-direction:column}}
@media(max-width:560px){main{padding:0 16px 50px}.hero{padding:25px 16px}.hero-art{height:300px}.cards{grid-template-columns:1fr}.intro{padding:25px}.practice{padding:25px}.dashboard{margin:0 16px 35px}}
@media print{.hero-art,.hero-actions,.filters,.open,.modal,.parent-card button{display:none!important}.hero{min-height:auto}.cards{grid-template-columns:repeat(2,1fr)}body{background:#fff}.section{margin:30px 0}.card{break-inside:avoid}.note{color:#555}}