:root{--ink:#173d55;--blue:#087db5;--grid:#b6ddeb;--figure:#293c47;--axis:#e06774;--paper:#f6fbfe;--unit:clamp(16px,1.35vw,26px)}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--ink);background:#eaf5fb}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f2ac45;outline-offset:3px}
#lesson{height:100dvh;min-height:540px;max-width:2400px;margin:auto;background:linear-gradient(135deg,#fff,#f5fbff);display:grid;grid-template-rows:clamp(66px,9vh,100px) minmax(0,1fr) clamp(66px,9vh,92px);padding:0 clamp(16px,2.4vw,48px)}
header{display:flex;align-items:center;justify-content:space-between;gap:24px}h1{margin:0;color:var(--blue);font-size:clamp(28px,2.65vw,50px);line-height:1.1;letter-spacing:.06em;display:flex;align-items:center;gap:15px}h1:before{content:"";width:8px;height:1em;border-radius:8px;background:#afe0f1}#section{font-size:clamp(16px,1.25vw,24px);font-weight:700;color:#7295aa}
#stage{min-width:0;min-height:0;display:grid;grid-template-columns:minmax(0,1.65fr) minmax(360px,1fr);gap:clamp(20px,2.2vw,44px);padding:4px 0 12px}
.figure{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:24px;background:#fff;border:1px solid #dceef5;box-shadow:0 8px 34px #15516b06;overflow:hidden}
.figure svg{width:100%;height:100%;display:block;touch-action:none;user-select:none;-webkit-user-select:none}
.copy{min-height:0;display:flex;flex-direction:column;justify-content:center;gap:clamp(16px,2.1vh,28px);padding:clamp(10px,1.4vw,28px) 0;overflow:auto}h2{font-size:clamp(28px,2.35vw,46px);line-height:1.42;margin:0;font-weight:850;letter-spacing:.015em}h2.giant{font-size:clamp(32px,2.75vw,54px);color:#067dad}.eyebrow{font-size:clamp(16px,1.25vw,24px);color:#6290a9;font-weight:750;margin:0}.description{font-size:clamp(19px,1.45vw,29px);line-height:1.65;color:#6c8799;margin:0}
.tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.tools .wide{grid-column:1/-1}button,select{border:1px solid #b8d8e7;border-radius:12px;background:#fff;color:#16749f;font-size:clamp(17px,1.25vw,25px);padding:clamp(9px,1.05vh,15px) 12px;font-weight:750;line-height:1.4}.primary{background:#087fb8;color:white;border-color:#087fb8}button:hover{filter:brightness(.96)}button:disabled{opacity:.4;cursor:default}.selected{background:#d6f2fb;border-color:#219ac5}.feedback{min-height:2em;font-size:clamp(19px,1.5vw,30px);font-weight:750;line-height:1.6;color:#267c69;margin:0}.answer-card{background:#edf7fc;border:1px solid #d4e9f2;border-radius:20px;padding:clamp(18px,1.6vw,30px);display:grid;gap:clamp(16px,2vh,26px)}.answer-row{display:flex;align-items:center;gap:12px;font-size:clamp(22px,1.65vw,34px);font-weight:750;flex-wrap:wrap}.num{width:clamp(68px,4.8vw,100px);height:clamp(50px,6vh,72px);border:2px solid #a7d2e4;border-radius:12px;font-size:clamp(26px,1.9vw,38px);text-align:center;color:#0c719c;background:#fff}.choice{display:grid;gap:10px}.choice button{text-align:left;font-size:clamp(20px,1.45vw,29px)}
footer{border-top:1px solid #dcecf3;display:flex;align-items:center;justify-content:space-between;gap:12px}.hint{color:#7d9aa9;font-size:clamp(13px,1vw,20px)}nav{display:flex;align-items:center;gap:12px}#progress{margin-right:12px;font-size:clamp(17px,1.2vw,24px);font-weight:750;color:#7098ae}#toast{position:fixed;bottom:12vh;left:50%;transform:translateX(-50%);background:#173d55ed;color:#fff;padding:14px 24px;border-radius:12px;font-size:var(--unit);pointer-events:none;opacity:0;transition:opacity .15s;z-index:10;max-width:90vw}#toast.show{opacity:1}
.grid{stroke:var(--grid);stroke-width:1;vector-effect:non-scaling-stroke}.border{stroke:#6cb9d4;stroke-width:1.8;fill:none;vector-effect:non-scaling-stroke}.axis{stroke:var(--axis);stroke-width:2.5;stroke-dasharray:10 8;fill:none;vector-effect:non-scaling-stroke}.outline{stroke:var(--figure);stroke-width:4.5;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.label{font-size:23px;font-weight:850;fill:#224e66;paint-order:stroke;stroke:white;stroke-width:4px;stroke-linejoin:round}.axis-label{font-size:19px;fill:#bd5464;font-weight:750}.point{fill:#078ebd;stroke:#fff;stroke-width:2.5;vector-effect:non-scaling-stroke;cursor:grab}.guide{stroke:#eda744;stroke-width:3;stroke-dasharray:8 6;fill:none;vector-effect:non-scaling-stroke}.draw-line{stroke:#0593a0;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.mirror-line{stroke:#327bbc;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}.key-line{stroke:#b8761a;stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.color-group,.grid-group,.line-group,.axis-group{transition:opacity 1.35s ease}.tree-review .grid-group,.tree-review .line-group,.tree-review .axis-group,.tree-abstract .grid-group,.tree-abstract .line-group,.tree-abstract .axis-group{opacity:0}.transformed .grid-group,.transformed .line-group,.transformed .axis-group{opacity:1}.transformed .color-group{opacity:0}.rule{padding:20px 24px;border-radius:16px;background:#e6f6ec;color:#247e52;font-weight:800;font-size:clamp(25px,1.8vw,36px);line-height:1.6}.fold-scene{position:absolute;inset:0;perspective:1200px;pointer-events:none;display:none}.fold-scene.active{display:block}.fold-half{position:absolute;top:0;height:100%;width:50%;overflow:hidden}.fold-half.left{left:0}.fold-half.right{left:50%;transform-origin:left center;transform-style:preserve-3d;backface-visibility:visible}.fold-half svg{width:200%;max-width:none;height:100%;position:absolute;top:0;left:0}.fold-half.right svg{left:-100%}.fold-scene.active .right{animation:treeFold 4s ease-in-out both}@keyframes treeFold{0%,10%{transform:rotateY(0)}40%,65%{transform:rotateY(-180deg)}95%,100%{transform:rotateY(0)}}
.intro-stage{grid-column:1/-1;height:100%;display:grid;grid-template-rows:auto minmax(0,1fr);gap:16px;min-height:0}.intro-stage h2{text-align:center;font-size:clamp(28px,2.5vw,48px)}.intro-stage iframe{border:0;width:100%;height:100%;min-height:0;display:block}.summary-visual{padding:clamp(20px,3vw,56px);display:flex;flex-direction:column;gap:32px}.summary-visual .before{font-size:clamp(28px,2.3vw,45px);color:#849aab}.summary-visual .today{font-size:clamp(36px,3.5vw,68px);font-weight:850;color:#087db5}.summary-visual .steps{display:flex;flex-wrap:wrap;gap:14px}.steps span{font-size:clamp(23px,1.8vw,34px);background:#e7f5fc;border-radius:14px;padding:12px 20px}.takeaways{list-style:none;display:grid;gap:14px;margin:0;padding:0}.takeaways li{font-size:clamp(22px,1.65vw,32px);line-height:1.4;background:#eef8fc;padding:14px;border-radius:14px}.takeaways li span{color:#087eb5;font-weight:850;margin-right:12px}.axis-control{display:flex;align-items:center;gap:12px;font-size:var(--unit)}.axis-control select{flex:1;min-width:0}.axis-control input[type=range]{width:100%;accent-color:#087db5}.color-control{width:60px;height:42px;border:1px solid #bdd9e6;border-radius:8px;background:white}.legend{font-size:clamp(17px,1.1vw,22px);line-height:1.6;color:#7592a6}.legend b{color:#078d9b}.legend em{font-style:normal;color:#327bbc}
h2{text-wrap:balance}.copy{justify-content:safe center}.axis-control{white-space:nowrap}.axis-control input[type=range]{min-width:0;flex:1;width:0}
@media(min-aspect-ratio:19/10){#stage{grid-template-columns:minmax(0,1.9fr) minmax(380px,1fr)}}
@media(max-width:1200px){#stage{grid-template-columns:minmax(0,1.35fr) minmax(330px,1fr)}h2{font-size:30px}.copy{gap:14px}.answer-row{font-size:24px}.tools{gap:8px}button,select{font-size:18px}}
@media(max-height:820px) and (min-width:850px){#lesson{grid-template-rows:64px minmax(0,1fr) 64px}.copy{gap:10px;padding:4px 0}h2{font-size:clamp(27px,2.25vw,38px)}h2.giant{font-size:38px}.description{font-size:20px}.answer-card{padding:16px;gap:12px}.tools{gap:8px}button,select{padding:8px 10px}.num{height:48px}.feedback{font-size:21px}.takeaways{gap:10px}.takeaways li{font-size:23px;padding:10px}}
@media(max-width:850px){#lesson{height:auto;min-height:100dvh;grid-template-rows:76px 1fr auto;padding:0 16px}#stage{grid-template-columns:1fr;grid-template-rows:minmax(360px,55vh) auto;gap:18px}.copy{padding:8px 10px 20px}.figure{min-height:360px}footer{padding:12px 0;flex-wrap:wrap}.hint{width:100%}nav{width:100%;gap:8px}#progress{margin-right:auto}nav button{font-size:16px}.intro-stage{min-height:450px;grid-row:1/-1}#section{font-size:14px}.summary-visual{min-height:360px}.tools button{min-height:48px}}
@media(prefers-reduced-motion:reduce){.color-group,.grid-group,.line-group,.axis-group{transition:none}.fold-scene.active .right{animation-duration:.01s}}
.cover{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;text-align:center;background:radial-gradient(ellipse,#fff,#edf8fc);border:1px solid #dceef5;border-radius:28px}.cover h2{font-size:clamp(70px,10vw,150px);color:#087fb8;letter-spacing:.15em;padding-left:.15em}.cover p{margin:0;font-size:clamp(18px,2vw,28px);color:#7295aa}.cover svg{width:320px;max-height:24vh}.cover button{padding:12px 38px}header{gap:14px}#classroom-menu{white-space:nowrap;font-size:17px}#section{margin-left:auto}#panel-shade{position:fixed;inset:0;background:#173d5560;z-index:20}#classroom-panel{position:fixed;right:0;top:0;bottom:0;width:min(420px,94vw);z-index:21;background:#f6fbfe;padding:28px;box-shadow:-8px 0 40px #173d5520;transform:translateX(110%);transition:transform .25s;overflow:auto;display:flex;flex-direction:column;gap:18px}#classroom-panel.open{transform:translateX(0)}#classroom-panel h2{font-size:30px}#classroom-panel p{font-size:18px;line-height:1.7;margin:0}#classroom-panel a{color:#087fb8;overflow-wrap:anywhere}#close-panel{align-self:flex-end}#qr-code{padding:16px;background:white;align-self:center}#qr-code img{max-width:100%}#reset-prompt button{margin:8px 5px 0 0}#reset-prompt[hidden]{display:none}.answer-gallery{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}.answer-gallery p{width:100%;margin:0;font-size:15px}.answer-gallery button{width:100px;font-size:14px;padding:6px}.answer-gallery svg{display:block;width:100%;height:80px}#controls>select{width:100%;margin-bottom:12px}@media(max-width:850px){header h1{font-size:22px}#section{display:none}.cover{min-height:580px;grid-row:1/-1}.cover h2{font-size:82px}.cover svg{max-height:180px}}