@charset "UTF-8";
:root{--paper:#f7f8f3;--surface:#fff;--ink:#253c33;--muted:#7d867f;--line:#e0e5dc;--green:#28785c;--lime:#d8ed9c;--soft:#eaf1e5;--radius:16px;--sidebar:242px;font-family:"Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer;color:inherit}button:disabled{cursor:wait;opacity:.55}a{color:inherit;text-decoration:none}button{background:none;border:0}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible,summary:focus-visible{outline:3px solid #638b35;outline-offset:4px}::selection{background:var(--lime)}.skip{position:fixed;left:260px;top:-100px;background:#fff;padding:12px;z-index:100}.skip:focus{top:12px}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);padding:37px 22px 18px;background:#f0f3eb;border-right:1px solid var(--line);display:flex;flex-direction:column;z-index:10}.brand{display:flex;align-items:center;gap:11px;font-size:18px;font-weight:750;letter-spacing:1px;margin:0 9px 52px}.brand-icon{font:italic 44px Georgia;line-height:46px;width:42px;color:#315b42}.brand-icon span{color:#8dba65}.brand small{display:block;font:10px Consolas,monospace;letter-spacing:2.6px;margin-top:6px;color:#65766b}.side-label{font-size:10px;letter-spacing:2px;color:#7d8b7f;padding:0 13px;margin-bottom:15px;display:flex;justify-content:space-between}.side-label span{letter-spacing:0}.domain-button,.personal button{width:100%;display:flex;align-items:center;text-align:left;gap:12px;padding:13px;border-radius:8px;font-size:13px;margin-bottom:4px}.domain-button span,.personal button>span{font-size:19px;line-height:20px;width:21px}.domain-button.active{background:#dfe8d7;font-weight:650;color:#2c654a}.domain-button small,.personal b{margin-left:auto;font-size:11px;font-weight:500;color:#6e7d71}.domain-next{font-size:11px;color:#909b90;padding:13px;display:flex;gap:13px;margin-bottom:36px}.personal button.active{background:#e6ece0}.personal button:hover{background:#e1e8da}.side-bottom{margin-top:auto;padding:36px 12px 15px}.progress-label{display:flex;justify-content:space-between;font-size:10px;color:#66785f}.progress-label b{font-weight:500}.progress-track{height:4px;background:#dbe4d3;border-radius:4px;margin:13px 0 9px;overflow:hidden}.progress-track i{display:block;height:100%;background:#648849;transition:width .35s}.side-bottom p{font-size:10px;color:#8b9386;margin:9px 0 21px}.text-button{font-size:11px;padding:4px 0}.side-bottom .text-button{display:flex;width:100%;justify-content:space-between}.side-footer{border-top:1px solid #dce4d4;padding-top:20px;font-size:9px;color:#8b9588;display:flex;align-items:center;gap:6px}.side-footer>span{margin-left:auto}.side-footer i,.eyebrow>span:first-child,.live-dot{width:6px;height:6px;background:#73a469;border-radius:50%;display:inline-block}
.workspace{margin-left:var(--sidebar)}.topbar{height:78px;border-bottom:1px solid var(--line);padding:0 48px;display:flex;align-items:center;justify-content:space-between;gap:20px}.breadcrumb{font-size:11px;color:#8b948b;display:flex;gap:14px}.breadcrumb strong{font-weight:500;color:#506453}.top-actions{display:flex;align-items:center;gap:22px}.top-actions button{font-size:10px;display:flex;gap:6px;align-items:center;color:#63755d}.local-label{font-size:10px;color:#90978c;border-left:1px solid var(--line);padding-left:22px}main{max-width:1328px;margin:auto;padding:45px 48px 50px;outline:none}.eyebrow{font:10px Consolas,monospace;letter-spacing:2.5px;display:flex;align-items:center;gap:9px;color:#6e8267}.hero-title{display:flex;align-items:center;justify-content:space-between;gap:30px}.hero h1{font-size:clamp(34px,3.7vw,58px);font-weight:600;line-height:1.3;letter-spacing:-2px;margin:21px 0 17px}.hero h1>span:not(.title-dot){color:#54805a;position:relative}.hero h1>span:not(.title-dot):after{content:'';position:absolute;height:8px;background:#dce9a8;left:0;right:0;bottom:4px;z-index:-1}.title-dot{color:#87a854}.hero-note{padding:0 22px;display:flex;align-items:center;gap:18px;transform:rotate(-3deg)}.hero-note>span{font:62px Georgia;color:#91ac63}.hero-note p{font-size:11px;color:#8a9585;line-height:2}.hero-description{font-size:12px;color:#7b887a;line-height:1.9;margin:0;max-width:650px}.hero-stats{display:flex;align-items:center;gap:20px;margin:23px 0 33px;font-size:10px;color:#7f8979}.hero-stats b{color:#344b34;font:19px Georgia;margin-right:4px}.hero-stats>i{height:13px;width:1px;background:var(--line)}.interactive-stat{color:#54744e}.spotlight{display:grid;grid-template-columns:36% 64%;border:1px solid #dce5d4;background:#edf2e6;border-radius:14px;overflow:hidden;margin-bottom:47px;min-height:266px}.spotlight-copy{padding:27px 28px;display:flex;flex-direction:column;align-items:flex-start}.spotlight .eyebrow{font-size:8px;letter-spacing:1px}.tiny-line{display:inline-block;width:17px;height:1px;background:#93a583}.spotlight h2{font:32px Georgia;margin:18px 0 11px;letter-spacing:-.5px}.spotlight h2 span{font:12px "Microsoft YaHei",sans-serif;margin-left:11px;color:#73806b}.spotlight-copy p{font-size:11px;color:#7b8872;line-height:1.9;margin:0 0 19px}.primary-link{display:inline-flex;align-items:center;justify-content:space-between;gap:27px;background:#315e45;color:white;font-size:10px;padding:12px 17px;border-radius:5px;margin-top:auto}.primary-link:hover{background:#214e35}.spotlight-demo{background:#f4f7ee;border-left:1px solid #dce5d4;padding:12px 22px;min-width:0}.spotlight-demo .demo-stage{height:142px;background:none;padding:18px 0 4px}.spotlight-demo .flex-board{height:92px}.spotlight-demo .tile{height:54px;min-height:34px;width:66px}.spotlight-demo .demo-controls{border:0;padding:9px 0 0;background:none;gap:12px}.spotlight-demo .demo-controls label{flex:1;font-size:9px;display:flex;align-items:center;gap:8px;white-space:nowrap}.spotlight-demo select{font:10px Consolas,monospace;padding:7px;width:100%;min-width:80px;background:#fff}.spotlight-demo .demo-caption{font-size:9px;margin:8px 0 0;line-height:1.6}.spotlight-demo .flex-axis{font-size:8px;top:0}
.section-kicker{font:9px Consolas,monospace;letter-spacing:2px;color:#85927b}.catalog-heading{display:flex;align-items:center;justify-content:space-between;gap:22px}.catalog h2{font-size:22px;font-weight:600;margin:9px 0 0;letter-spacing:-.5px}.catalog h2 small{font:10px "Segoe UI",sans-serif;color:#8d9985;background:#e9eee3;border-radius:5px;padding:5px 8px;margin-left:12px;vertical-align:middle;display:inline-block}.search{border:1px solid #dce3d5;border-radius:7px;background:#fff;display:flex;align-items:center;padding:9px 11px;gap:8px;min-width:255px}.search>span{font-size:22px;color:#7f8b77;line-height:20px}.search input{border:0;outline:none!important;width:100%;font-size:11px;color:var(--ink);background:transparent;min-width:0}.search:focus-within{outline:2px solid #82a565;outline-offset:2px}.search input::placeholder{color:#9aa292}.search kbd{font-size:10px;border:1px solid #e6eade;border-radius:3px;padding:0 4px;color:#9ba28f}.filter-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid var(--line);margin:24px 0}.category-tabs{display:flex;gap:23px;flex-wrap:wrap}.category-tabs button{font-size:11px;padding:0 0 15px;position:relative;white-space:nowrap;color:#7d8975}.category-tabs button.active{color:#385d36;font-weight:650}.category-tabs button.active:after{content:'';position:absolute;bottom:-1px;left:0;right:0;height:2px;background:#688946}.filter-row select{border:0;background:transparent;font-size:10px;color:#8b9580;margin-bottom:13px;max-width:100px}.term-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:21px}.term-card{position:relative;min-width:0;border:1px solid var(--line);background:#fff;border-radius:11px;overflow:hidden;transition:transform .22s,box-shadow .22s,border-color .22s}.term-card:hover{transform:translateY(-4px);box-shadow:0 10px 25px #203c3010;border-color:#b8c9aa}.card-link{display:block;height:100%}.card-link:focus-visible{outline-offset:-4px}.card-preview{height:142px;background:#f0f3e9;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;border-bottom:1px solid #e6ebde}.term-card:nth-child(3n+2) .card-preview{background:#eef2eb}.term-card:nth-child(3n+3) .card-preview{background:#f1f1e5}.preview-caption{position:absolute;bottom:10px;right:12px;font:8px "Microsoft YaHei",sans-serif;color:#8c987e}.card-info{padding:19px 19px 0}.card-meta{display:flex;align-items:center;justify-content:space-between;font-size:9px;color:#8a9780;margin-bottom:11px}.level{font-size:8px;color:#65804e;border:1px solid #dbe6cb;border-radius:4px;padding:2px 6px;background:#f6f9ef}.level.advanced{color:#9a804c;border-color:#e9dfc4;background:#fbf8ed}.term-card h3{font:23px Georgia;margin:0 0 6px;letter-spacing:-.4px;overflow-wrap:anywhere}.term-card h4{font-size:11px;font-weight:500;margin:0 0 11px;color:#67765f}.term-card p{font-size:10px;color:#8b9483;line-height:1.85;margin:0 0 20px;min-height:37px}.card-bottom{display:flex;justify-content:space-between;align-items:center;border-top:1px solid #edf0e7;font-size:9px;color:#658053;padding:13px 0}.card-bottom b{margin-left:9px;font-size:12px}.unread-dot{width:5px;height:5px;border:1px solid #c6d4bb;border-radius:50%}.learned-label{font-size:8px}.save-icon{position:absolute;right:9px;top:9px;width:30px;height:30px;background:#ffffffa8;border:1px solid #e0e6d6;border-radius:50%;font-size:16px;color:#849377}.save-icon:hover,.is-saved{color:#547b37!important;background:#e7f0d8!important}.grow-note{display:flex;gap:20px;align-items:center;margin-top:33px;padding:23px 25px;background:#eef2e6;border:1px dashed #d6dfca;border-radius:9px}.grow-note>span{font-size:30px;color:#8ea568}.grow-note h3{font-size:12px;font-weight:500;margin:0 0 7px}.grow-note p{font-size:10px;color:#8a957e;margin:0}.grow-note>b{margin-left:auto;font:8px Consolas,monospace;letter-spacing:1px;color:#91a07e}.page-footer{margin:0 48px;padding:23px 0 27px;border-top:1px solid var(--line);display:flex;justify-content:space-between;font:8px Consolas,monospace;color:#89947e;letter-spacing:1px}.page-footer b{font:9px "Microsoft YaHei",sans-serif;margin-left:13px;font-weight:400;letter-spacing:0}.page-footer>span:last-child{font:9px "Microsoft YaHei",sans-serif}.empty-state{grid-column:1/-1;text-align:center;padding:65px 20px;border:1px dashed var(--line);border-radius:12px}.empty-state>span{font-size:42px;color:#8a9b77}.empty-state h3{font-size:18px}.empty-state p{font-size:12px;color:#8a9680;line-height:1.8}.empty-state .primary-link{margin-top:20px}.toast{position:fixed;bottom:28px;left:calc(50% + var(--sidebar)/2);transform:translate(-50%,20px);padding:13px 22px;background:#294d38;color:white;border-radius:8px;box-shadow:0 8px 25px #233b3020;font-size:12px;opacity:0;pointer-events:none;transition:.2s;z-index:50;max-width:90vw}.toast.visible{opacity:1;transform:translate(-50%,0)}
.mini-box{border:1px dashed #b6c1a0;background:#e6ead6;padding:16px;width:151px;transform:rotate(-4deg)}.mini-box>div{background:#d1dfb4;border:3px solid #abc480;padding:13px}.mini-box>div>div{border:1px solid #8caf80;background:#bbd1a9;text-align:center;font:10px Consolas;color:#668054;padding:8px}.mini-flex{width:77%;display:flex;justify-content:space-between;padding:15px 0;border-top:1px dashed #c2d0b4;border-bottom:1px dashed #c2d0b4}.mini-flex i{font:16px Georgia;font-style:normal;width:43px;height:42px;background:#d2e3bf;border:1px solid #b8cfa1;border-radius:5px;display:grid;place-items:center;color:#6c8b54}.mini-flex i:nth-child(2){background:#e5e8c7;border-color:#d0d7a9}.mini-grid{width:137px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;transform:rotate(-6deg)}.mini-grid i{height:34px;background:#d3dfba;border:1px solid #bdcea1;border-radius:4px}.mini-grid i:first-child{grid-column:span 2;background:#bcd29f}.mini-motion{display:flex;align-items:center;gap:25px}.mini-motion>span{width:44px;height:44px;border:1px dashed #bdc9ac;display:grid;place-items:center;color:#bbc7a9}.mini-motion i{font:41px Georgia;color:#648b4e;transform:rotate(-18deg)}.mini-motion b{font-size:27px;color:#9eb682;font-weight:400}.mini-browser{width:147px;height:84px;border:1px solid #b5c8a3;border-radius:6px;background:#fff;transform:rotate(-4deg);padding:7px}.mini-browser>b{font-size:8px;color:#bdc9b0;display:block;line-height:7px;border-bottom:1px solid #e2e9da;padding-bottom:6px}.mini-browser>div{display:flex;gap:4px;padding-top:9px}.mini-browser i{width:33%;height:37px;background:#d9e7cb;border-radius:3px}.mini-phone{margin-left:-18px;margin-top:24px;width:37px;height:66px;z-index:1;border:2px solid #a5bb8f;border-radius:6px;background:#f5f8ee;padding:9px 4px;transform:rotate(7deg)}.mini-phone i{display:block;height:16px;background:#d5e3bf;margin-bottom:5px}.mini-logic{display:flex;align-items:center;gap:15px;font:13px Consolas}.mini-logic i{font-style:normal;border:1px solid #c5d1b9;border-radius:20px;padding:10px 15px;background:#fff;color:#6b7e5c}.mini-logic>span{color:#9baa87}.mini-logic b{font-size:22px;color:#6e8e50}.mini-stack{position:relative;width:140px;height:85px}.mini-stack i{position:absolute;width:88px;height:61px;display:grid;place-items:center;background:#c5d9ad;border:1px solid #a9c38b;border-radius:6px;font:24px Georgia;color:#67884e}.mini-stack i:last-child{left:46px;top:24px;background:#e0e5c7aa;border-color:#c8d0aa;backdrop-filter:blur(2px)}.mini-components{display:flex;gap:13px}.mini-components i{display:block;text-align:center;font:35px Georgia;color:#739659;background:#fff;padding:9px 19px;border-radius:8px;transform:rotate(-6deg);box-shadow:0 3px 6px #566a3910}.mini-components i:last-child{transform:rotate(5deg)}.mini-components b{display:block;font:9px Consolas;color:#879778;margin-top:4px}.mini-code{display:flex;gap:13px;font:25px Consolas;color:#668650}.mini-code span{color:#acbc97;font-weight:300}.mini-code b{font-weight:400}
.detail-top{display:flex;justify-content:space-between;font-size:11px;color:#87917f;margin:0 0 31px}.back-link{color:#55714c}.detail-top i{font-style:normal;padding:0 12px;color:#b5c0aa}.term-heading{display:flex;justify-content:space-between;gap:20px;align-items:center;margin-bottom:31px}.term-heading h1{font:48px Georgia;letter-spacing:-1.5px;margin:13px 0 14px;overflow-wrap:anywhere}.term-heading h1 span{display:block;font:18px "Microsoft YaHei",sans-serif;letter-spacing:0;margin-top:12px;color:#7a8870}.term-heading>div>p{font-size:13px;color:#7a8970;line-height:1.8}.save-detail{border:1px solid #d4dfc9;border-radius:7px;padding:11px 16px;font-size:11px;white-space:nowrap;flex-shrink:0}.detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 270px;gap:26px;align-items:start}.detail-primary{min-width:0}.lab-panel{background:white;border:1px solid #dce4d4;border-radius:13px;overflow:hidden}.lab-header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5eadf;padding:16px 20px}.lab-header h2{font-size:12px;font-weight:500;margin:0;display:flex;align-items:center;gap:9px}.lab-header button{color:#8a967f;font-size:10px}.live-dot{background:#7eaa60}.demo-stage{min-width:0;height:300px;padding:30px;display:flex;align-items:center;justify-content:center;position:relative;background-color:#f4f7ee;background-image:radial-gradient(#c9d5bb80 .65px,transparent .65px);background-size:14px 14px;overflow:auto}.demo-controls{display:flex;align-items:flex-end;flex-wrap:wrap;gap:12px;padding:18px 20px;border-top:1px solid #e3eada;background:white}.demo-controls label{display:flex;flex-direction:column;gap:8px;font-size:10px;color:#7a886f;flex:1;min-width:110px}.demo-controls select,.demo-controls input[type=text]{color:#3d5b36;border:1px solid #d7e1cb;border-radius:5px;background:#fbfcf8;padding:9px 10px;font-size:11px;width:100%;min-width:0}.demo-controls output{float:right;color:#4d763c;font:11px Consolas}.demo-controls input[type=range]{width:100%;accent-color:#6a914e;cursor:pointer;min-height:19px;margin:0}.demo-button{border:1px solid #cbdaba;padding:10px 13px;background:#e9f0dc;border-radius:6px;font-size:11px;transition:background .15s}.demo-button:hover{background:#d9e7c7}.demo-caption{font-size:11px;color:#849275;line-height:1.9;margin:0;padding:0 20px 16px;background:inherit}.spotlight-demo .demo-caption{padding:0}.code-panel{border-top:1px solid #e3eada;background:#f9faf6}.code-panel summary{font-size:10px;padding:14px 20px;cursor:pointer;color:#647c53}.code-panel summary span{float:right;font:8px Consolas;letter-spacing:1px;color:#96a18b}.code-panel pre{margin:0;padding:3px 20px 20px;font:11px/1.9 Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere;color:#587341}.explanation{padding-top:34px}.explanation h2{font-size:21px;font-weight:500;margin:11px 0 24px}.explain-row{display:grid;grid-template-columns:105px 1fr;gap:12px;margin:0 0 21px}.explain-row>span{font-size:10px;color:#729159;padding-top:4px}.explain-row p{font-size:12px;line-height:2;color:#67755e;margin:0}.analogy{padding-top:17px;border-top:1px solid #e1e7d9}.pitfall{border-left:3px solid #d8c88b;background:#f2f1e4;padding:16px 18px;margin:25px 0 18px}.pitfall b{font-size:11px;font-weight:500;color:#8c8052}.pitfall p{font-size:11px;line-height:1.9;color:#8b866d;margin:8px 0 0}.source-link{font-size:10px;color:#678951;text-decoration:underline;text-underline-offset:4px}.learning-aside{min-width:0}.quiz-panel{border:1px solid #dce5d3;border-radius:12px;background:#fff;padding:22px}.quiz-panel h2{font-size:18px;font-weight:500;margin:13px 0 18px}.quiz-panel>p{font-size:12px;color:#718164;line-height:1.9}.quiz-options{display:grid;gap:10px}.quiz-options button{border:1px solid #dce5d3;border-radius:7px;padding:12px 10px;display:flex;gap:9px;text-align:left;font-size:11px;line-height:1.7;align-items:flex-start}.quiz-options button:hover{background:#f4f7ee}.quiz-options button>span{background:#eff3e8;color:#849673;width:21px;height:21px;flex-shrink:0;text-align:center;border-radius:4px;font:11px/21px Consolas}.quiz-options .correct{border-color:#77a362;background:#eef6e6}.quiz-options .incorrect{border-color:#c9a179;background:#faf2e8}.quiz-panel .quiz-result:empty{display:none}.quiz-panel .quiz-result{font-size:11px;margin-bottom:0}.quiz-result.correct{color:#527742}.quiz-result.incorrect{color:#a47b50}.learn-panel{margin:18px 0 25px;background:#eaf0df;padding:19px;border:1px solid #dce6d0;border-radius:10px;text-align:center}.learn-panel>span{font-size:11px;color:#7e916b}.learn-panel button{display:block;width:100%;padding:12px 6px;background:#436d36;color:white;border-radius:6px;font-size:11px;margin:13px 0 9px}.learn-panel button.done{background:#d7e4c7;color:#4f713e}.learn-panel small{font-size:9px;color:#93a180}.related-panel{padding:0 7px}.related-panel h3{font-size:11px;font-weight:500;margin-bottom:15px;color:#869477}.related-panel a{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1e8d8;padding:14px 0;color:#697e56}.related-panel a:hover{color:#2c663c}.related-panel b{font:17px Georgia}.related-panel small{font-size:9px;display:block;margin-top:6px;color:#8a997a}.next-term{margin-top:42px;border-top:1px solid #dce4d4;padding:25px 0 0;display:flex;align-items:center;justify-content:space-between;gap:20px}.next-term>span{font-size:11px;color:#8b997b}.next-term>a{font:22px Georgia;color:#527a3d}.next-term small{font:10px "Microsoft YaHei",sans-serif;margin:0 10px}
.tile{height:64px;min-height:36px;width:68px;min-width:40px;flex-shrink:0;border:1px solid #a4c28e;background:#cce1b8;border-radius:8px;display:flex;align-items:center;justify-content:center;font:22px Georgia;color:#577746;transition:transform .5s,width .35s}.tile-1{background:#e4e8c8;border-color:#cad5a1;color:#859054}.tile-2{background:#c9ddd0;border-color:#a9c7ae;color:#5f8266}.flex-board{width:100%;height:205px;border:1px dashed #b5c8a2;border-radius:8px;display:flex;align-items:center;gap:12px;padding:12px}.flex-axis{position:absolute;top:14px;left:30px;font:10px Consolas;color:#8c9d78}.grid-board{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;width:100%;max-width:400px}.grid-board .tile{width:auto;height:68px}.gap-board{display:flex;border:1px dashed #b1c698;gap:16px}.box-stage{height:350px}.box-margin{position:relative;border:1px dashed #c8b285;background:#efe5cd;padding:20px;transition:padding .25s}.box-border{position:relative;border:4px solid #9ab984;transition:width .25s;background:#d6e7c6}.box-padding{position:relative;background:#d6e7c6;padding:24px;transition:padding .25s}.box-content{width:160px;height:64px;background:#a9cdd0;border:1px solid #78abb1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#48777b;font:10px/1.4 Consolas;overflow:hidden}.box-content strong{font:10px Consolas}.box-label{position:absolute;font:8px Consolas;top:3px;left:5px;white-space:nowrap;color:#877751}.box-border>.box-label{top:-2px;left:3px;background:#9ab984;color:#466c38;transform:translateY(-100%)}.box-padding>.box-label{color:#729458}.position-board{width:100%;height:200px;position:relative;display:flex;gap:12px;align-items:flex-start;border:1px dashed #b5c8a2;padding:12px}.position-ghost{position:absolute;left:92px;top:12px;width:68px;height:64px;border:1px dashed #8eab74;border-radius:8px}.position-board .tile{z-index:1}.scroll-demo{width:100%;height:220px;overflow:auto;background:white;border:1px solid #c9d8bc;border-radius:8px}.scroll-intro{height:100px;padding:20px;font-size:12px;line-height:1.8;color:#93a481}.sticky-heading{position:sticky;top:0;background:#c4dbac;padding:14px;font-size:12px;z-index:1;color:#537540}.scroll-copy{padding:20px;line-height:2;font-size:12px;color:#839574;min-height:370px}.stack-board{position:relative;width:245px;height:180px;isolation:isolate}.stack-card{position:absolute;width:150px;height:110px;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:36px Georgia;border:1px solid #9db98c}.stack-card small{font:10px Consolas;margin-top:10px}.stack-a{background:#bed8a6;top:0;left:0;z-index:1}.stack-b{background:#e0dab5;bottom:0;right:0;z-index:2;border-color:#c2b581}.overflow-board{height:140px;width:250px;border:2px solid #a9bf8f;background:white;padding:15px;overflow:auto;font-size:12px;line-height:1.9;color:#7b8e69}.responsive-stage{overflow:hidden;height:340px;padding:16px;align-items:flex-start;justify-content:center}.device-wrap{margin:auto;position:relative;flex-shrink:0}.device-frame{position:absolute;left:0;top:0;border:2px solid #aabb96;border-radius:10px;transform-origin:top left;background:#fff}.unit-lines{width:100%;overflow:hidden}.unit-lines p{margin:22px 0;border-bottom:1px dashed #bbcaa7;padding-bottom:15px;white-space:nowrap}.unit-lines b{font-weight:400;color:#81a75c}.fixed-unit{font-size:24px}.relative-unit{font-size:32px}.transform-origin{border:1px dashed #a4ba8d;border-radius:8px;width:68px;height:64px}.transform-origin .tile{margin:-1px}.motion-track{width:250px;max-width:100%;height:65px;border-bottom:1px dashed #adbf98}.animation-floor{position:relative;padding-top:55px;border-bottom:1px dashed #b1c696;width:170px;display:flex;justify-content:center}.animation-floor>span{position:absolute;top:144px;font:10px Consolas;white-space:nowrap;color:#92a17f}.float-tile{animation:float 1.5s ease-in-out infinite;animation-play-state:paused}.easing-tracks{width:100%;max-width:380px;display:grid;gap:22px}.easing-tracks>div{display:flex;gap:15px;align-items:center}.easing-tracks span{font:11px Consolas;width:70px;color:#7b9068}.ease-track{flex:1;height:24px;border-bottom:1px dashed #afc095}.ease-track i{display:block;width:24px;height:24px;background:#8fac6a;border-radius:50%}.easing-tracks>div:nth-child(2) i{background:#bdba7c}.easing-tracks>div:nth-child(3) i{background:#80a78d}.pseudo-target{padding:20px 25px;font-size:12px;box-shadow:0 2px 0 #becdae;transition:transform .25s,box-shadow .25s,background .25s}.pseudo-target:hover{transform:translateY(-5px);background:#cdddba;box-shadow:0 7px 0 #b5c99f}.mini-document{width:100%;background:white;padding:25px;border:1px solid #d6dfcc;border-radius:7px}.mini-document h1{font-size:29px;margin:0 0 15px}.mini-document p{font-size:13px;line-height:1.9;color:#7a8b6d}.semantic-page{width:100%;max-width:350px;display:grid;gap:8px}.semantic-page header,.semantic-page nav,.semantic-page main,.semantic-page footer{border:1px solid #c4d3b5;background:#e6efd9;padding:11px 13px;font-size:11px}.semantic-page article{padding:14px;background:white;margin-top:7px}.semantic-page code{font:10px Consolas;color:#8a9d78;margin-right:9px}.dom-scene{display:flex;gap:25px;align-items:center;flex-wrap:wrap;justify-content:center}.dom-tree{font:13px/2 Consolas;color:#789264}.dom-tree b{font-weight:400;color:#466c37;overflow-wrap:anywhere}.dom-preview{background:white;padding:24px;border:1px solid #cbdab9;border-radius:6px;font-size:15px;max-width:210px;overflow-wrap:anywhere}.styled-card{background:#d9f5e8;border-radius:20px;padding:25px 35px;transition:.4s;text-align:center;max-width:100%}.styled-card>span{font:44px Georgia;color:#6f9a69}.styled-card h3{font-size:18px;font-weight:500}.styled-card p{font-size:11px}.style-bold{background:#f1c56c;border-radius:0;box-shadow:8px 8px 0 #234a3d}.style-plain{background:transparent;border:0;border-radius:0}.selector-board{display:flex;gap:14px}.candidate{width:84px;max-width:25vw;height:90px;border:3px solid #dde5d3;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;font:30px Georgia;color:#8ca17b;background:#fff;transition:.3s}.candidate small{font:8px Consolas;margin-top:11px}.candidate.matched{border-color:#197958;background:#e4f3e7;color:#197958}.cascade-scene{display:flex;gap:24px;align-items:center;flex-wrap:wrap;justify-content:center}.cascade-rules{display:grid;gap:18px}.cascade-rules code{font:11px Consolas;line-height:1.8;color:#6c835b}.cascade-result{font:65px Georgia;text-align:center}.cascade-result span{display:block;font:10px "Microsoft YaHei";margin-top:6px}.counter-scene{text-align:center}.counter-scene small{font-size:10px;color:#7d9569}.counter-scene strong{display:block;font:80px Georgia;color:#658f46;margin:9px 0}.counter-line{font:10px Consolas;color:#879a73}.bubble-outer{background:#e4eacb;border:1px solid #c1ce9b;padding:17px;width:100%;max-width:350px;font-size:11px;color:#839164;border-radius:9px}.bubble-inner{background:#cde0b8;border:1px solid #a6bf8e;margin-top:13px;padding:16px;border-radius:6px}.bubble-inner button{display:block;padding:14px;background:white;border:1px solid #a4c18b;border-radius:5px;margin:14px auto 0;font-size:11px;color:#5d7b44}.component-board{display:flex;gap:15px;width:100%;justify-content:center}.plant-card{background:white;border:1px solid #d9e3cd;border-radius:12px;padding:24px 17px;text-align:center;width:150px;min-width:0}.plant-card i{font:45px Georgia;color:#90ae70;display:block}.plant-card strong{display:block;font-size:14px;font-weight:500;margin:17px 0 11px;overflow-wrap:anywhere}.plant-card small{font-size:9px;color:#93a181}.async-scene{text-align:center}.request-status{font-size:20px;color:#6a8e4c;margin-bottom:21px}.request-payload{font-size:11px;color:#849873;line-height:1.9}.rate-scene{display:flex;align-items:center;gap:40px;text-align:center}.rate-scene small{font-size:11px;color:#8c9c7b}.rate-scene strong{font:55px Georgia;display:block;color:#7a9a59;margin-top:14px}.rate-scene>span{color:#aabb98}.accessible-form{display:grid;gap:13px;width:100%;max-width:280px}.accessible-form label{font-size:12px;color:#799265}.accessible-form input{border:1px solid #c3d2b3;border-radius:5px;padding:12px;width:100%;font-size:12px}.accessible-form button{background:#50703e;color:white;padding:13px;border-radius:5px;font-size:11px}.accessible-form p{font-size:11px;color:#7c9568;margin:3px 0;min-height:18px}.step-flow{list-style:none;padding:0;margin:0;width:100%;max-width:360px;display:grid;gap:9px}.step-flow li{display:flex;align-items:center;gap:15px;border:1px solid #d7e1ca;padding:10px 15px;border-radius:6px;background:#fff;font-size:11px;color:#96a586;transition:.3s}.step-flow b{font:12px Consolas}.step-flow .current{background:#d9e8c7;border-color:#9eb983;color:#587a3d;transform:translateX(5px)}.step-flow .done{color:#74905c;background:#f0f5e9}.spa-window{width:100%;max-width:370px;background:#fff;border:1px solid #cbd8bb;border-radius:8px;overflow:hidden}.spa-address{padding:10px 12px;background:#edf2e5;font:10px Consolas;color:#8a9a7a}.spa-window nav{display:flex;gap:6px;padding:9px}.spa-window nav button{font-size:9px;padding:7px;background:#fafcf6}.spa-window nav button.selected{background:#d7e8c3}.spa-window article{padding:16px;text-align:center}.spa-window article>span{font:34px Georgia;color:#91aa75}.spa-window article h3{font-size:16px;font-weight:500;margin:10px}.spa-window article p{font-size:10px;color:#8a9a7a}.lazy-scroll{width:100%;height:230px;overflow:auto;padding:12px;border:1px solid #cdd9bf;border-radius:7px;background:white}.lazy-card{height:90px;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:18px;background:#f0f1eb;border:1px dashed #d5dccb;border-radius:6px;color:#a0a995;font-size:12px;transition:.4s}.lazy-card small{font-size:9px}.lazy-card.loaded{background:#dbe9ca;color:#6b8d4d;border-style:solid;border-color:#b7cc9f}
@keyframes float{50%{transform:translateY(-40px)}}.reduce-motion *,.reduce-motion *:before,.reduce-motion *:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
@media(min-width:1500px){main{padding-left:62px;padding-right:62px}.term-grid{gap:25px}.card-preview{height:160px}.card-info{padding:23px 23px 0}.hero h1{font-size:59px}}
@media(max-width:1200px){:root{--sidebar:210px}.sidebar{padding-left:17px;padding-right:17px}.brand{font-size:16px;gap:6px;margin-left:4px}main{padding:36px 30px}.topbar{padding:0 30px}.hero-note{padding:0}.hero-note p{font-size:10px}.hero-note>span{font-size:48px}.spotlight-copy{padding:25px 21px}.spotlight-demo{padding:12px 16px}.category-tabs{gap:16px}.term-grid{gap:15px}.card-info{padding:16px 15px 0}.card-preview{height:126px}.detail-layout{grid-template-columns:minmax(0,1fr) 235px;gap:18px}.quiz-panel{padding:18px}.demo-controls{padding:15px}.demo-stage{padding:25px 18px}.explain-row{grid-template-columns:1fr;gap:8px}.page-footer{margin:0 30px}}
@media(max-width:1000px){:root{--sidebar:190px}.sidebar{padding-left:12px;padding-right:12px}.brand{letter-spacing:0;font-size:15px}.brand-icon{font-size:36px;width:34px}.brand small{font-size:8px}.hero-note{display:none}.term-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.category-tabs{gap:14px}.filter-row{align-items:flex-start}.category-tabs button{font-size:10px;padding-bottom:12px}.catalog-heading{align-items:flex-start;flex-direction:column}.search{width:100%}.spotlight{grid-template-columns:1fr}.spotlight-copy{display:block;padding:22px}.spotlight-copy h2{margin:12px 0 10px}.spotlight-copy p{display:inline-block;margin:0 25px 0 0;max-width:65%;vertical-align:middle}.spotlight-copy .primary-link{margin-top:0;vertical-align:middle}.spotlight-demo{border-left:0;border-top:1px solid #dce5d4;padding:16px 22px}.spotlight-demo .demo-stage{height:120px}.spotlight-demo .flex-board{height:88px}.detail-layout{grid-template-columns:1fr}.learning-aside{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}.quiz-panel{grid-row:span 2}.learn-panel{margin:0}.related-panel{padding:0 10px}.grow-note>b{display:none}.term-heading h1{font-size:40px}.spotlight-demo .flex-board[style*="column"]{height:205px}.spotlight-demo .demo-stage:has(.flex-board[style*="column"]){height:240px}}
@media(max-width:680px){:root{--sidebar:0px}.sidebar{position:relative;width:100%;padding:17px 20px 10px;display:block;border-right:0;border-bottom:1px solid var(--line)}.brand{margin:0 0 18px;font-size:17px}.brand-icon{font-size:37px}.brand small{font-size:8px;letter-spacing:2px}.side-label,.side-bottom,.side-footer,.domain-next{display:none}#domains{position:absolute;right:20px;top:23px}.domain-button{font-size:11px;padding:8px;background:#dfe8d7!important;margin:0}.domain-button>span{font-size:15px;width:auto}.domain-button small{display:none}.personal{display:flex;gap:7px}.personal button{font-size:10px;padding:9px;gap:7px;justify-content:center;margin:0}.personal button>span{font-size:15px;width:auto}.personal b{margin-left:2px;font-size:9px}.workspace{margin:0}.topbar{height:52px;padding:0 20px}.breadcrumb{font-size:10px;gap:9px}.top-actions{gap:0}.local-label{display:none}.top-actions button{font-size:9px}main{padding:30px 20px}.hero h1{font-size:39px;letter-spacing:-1.5px;line-height:1.35;margin-top:17px}.eyebrow{font-size:8px;letter-spacing:2px}.hero-description{font-size:11px}.hero-stats{font-size:9px;gap:13px;margin:20px 0 26px}.hero-stats b{font-size:17px}.spotlight{margin-bottom:33px}.spotlight-copy{padding:21px}.spotlight-copy p{font-size:10px;max-width:none;display:block;margin:0 0 16px}.spotlight h2{font-size:30px}.spotlight-demo{padding:14px 16px}.spotlight-demo .demo-controls{flex-wrap:wrap}.spotlight-demo .demo-controls label{font-size:8px;flex-basis:100%;display:flex;flex-direction:row;justify-content:space-between}.spotlight-demo select{width:65%;max-width:200px}.spotlight-demo .flex-board{height:86px}.spotlight-demo .tile{width:54px;height:46px}.catalog h2{font-size:21px}.filter-row{margin:19px 0;flex-wrap:wrap}.category-tabs{gap:15px;row-gap:4px}.filter-row select{margin-bottom:8px}.category-tabs button{font-size:10px}.term-grid{gap:13px}.card-preview{height:110px}.card-info{padding:13px 12px 0}.card-meta{font-size:8px;gap:4px;margin-bottom:11px}.level{font-size:7px;padding:1px 4px}.term-card h3{font-size:19px}.term-card h4{font-size:10px}.term-card p{font-size:9px;line-height:1.85;min-height:50px;margin-bottom:12px}.card-bottom{font-size:8px;padding:11px 0}.card-bottom b{margin-left:4px}.save-icon{width:26px;height:26px;right:7px;top:7px;font-size:14px}.preview-caption{font-size:7px;right:8px;bottom:7px}.mini-box{transform:scale(.72) rotate(-4deg)}.mini-flex{width:85%;padding:12px 0}.mini-flex i{width:31px;height:34px;font-size:13px}.mini-grid{width:101px;gap:4px}.mini-grid i{height:25px}.mini-motion{gap:13px}.mini-motion>span{width:31px;height:31px}.mini-motion i{font-size:31px}.mini-motion b{font-size:21px}.mini-browser{width:97px;height:63px}.mini-browser i{height:24px}.mini-phone{width:29px;height:49px;padding:6px 3px}.mini-phone i{height:12px}.mini-code{font-size:18px;gap:7px}.mini-stack{transform:scale(.75)}.mini-logic{gap:8px}.mini-logic i{padding:7px;font-size:10px}.mini-logic b{font-size:16px}.mini-components{gap:9px}.mini-components i{font-size:26px;padding:8px 12px}.mini-components b{font-size:8px}.grow-note{padding:18px 15px;gap:13px}.grow-note h3{font-size:11px}.grow-note p{font-size:9px;line-height:1.9}.page-footer{margin:0 20px;padding:20px 0;gap:10px}.page-footer>span:last-child{display:none}.page-footer b{font-size:8px}.detail-top{font-size:10px;margin-bottom:27px;gap:15px}.term-heading{align-items:flex-start;gap:12px}.term-heading h1{font-size:34px;letter-spacing:-1px}.term-heading h1 span{font-size:16px}.term-heading>div>p{font-size:11px}.save-detail{font-size:9px;padding:9px 10px;margin-top:25px}.detail-layout{gap:26px}.lab-header{padding:14px 16px}.lab-header h2{font-size:11px}.demo-stage{height:290px;padding:25px 14px}.box-stage{height:350px;padding:12px 5px}.box-margin{transform:scale(.87)}.demo-controls{padding:15px;gap:13px}.demo-controls label{min-width:100px;font-size:10px}.demo-caption{font-size:10px;padding:0 15px 15px}.demo-button{font-size:10px;padding:10px}.demo-controls select{font-size:10px}.code-panel pre{padding-left:15px;padding-right:15px;font-size:10px}.code-panel summary{padding:13px 15px}.explanation h2{font-size:18px}.explain-row p{font-size:12px}.learning-aside{grid-template-columns:1fr}.quiz-panel{grid-row:auto;padding:21px}.quiz-panel h2{font-size:18px}.related-panel{padding:10px}.next-term{align-items:flex-start;flex-direction:column;gap:14px}.next-term a{font-size:24px}.responsive-stage{height:340px}.candidate{width:72px}.selector-board{gap:7px}.candidate small{font-size:7px}.component-board{gap:10px}.plant-card{padding:20px 12px}.unit-lines{transform:scale(.9);transform-origin:left center}.toast{font-size:11px;width:max-content;max-width:90vw}.skip{left:15px}}
/* Keep the simulated viewport equal to its declared width (no border deduction). */
.device-frame{border:0;outline:2px solid #aabb96;box-sizing:content-box}.responsive-stage{height:400px}main:focus{outline:none}.term-card p{color:#6c7a62}.demo-caption{color:#687b5a}.explain-row p{color:#53664c}
/* Reading sizes: labels stay compact; instructional prose remains comfortable. */
.hero-description{font-size:14px}.spotlight-copy p{font-size:12px}.card-meta{font-size:10px}.term-card h4{font-size:12px}.term-card p{font-size:12px;min-height:45px}.card-bottom{font-size:10px}.category-tabs button{font-size:12px}.search input{font-size:12px}.explain-row p{font-size:14px}.pitfall p{font-size:13px}.quiz-panel>p{font-size:13px}.quiz-options button{font-size:12px}.demo-caption{font-size:12px}.code-panel pre{font-size:12px}.box-content{border:0;outline:1px solid #78abb1}.spotlight-demo .flex-board[style*="column"]{height:210px}.spotlight-demo .demo-stage:has(.flex-board[style*="column"]){height:240px}
@media(max-width:680px){.hero-description{font-size:12px}.term-card p{font-size:11px;min-height:61px}.term-card h4{font-size:11px}.card-meta{font-size:9px}.card-bottom{font-size:9px}.category-tabs button{font-size:11px}.demo-caption{font-size:11px}.code-panel pre{font-size:11px}.explain-row p{font-size:14px}.pitfall p{font-size:12px}.spotlight-copy p{font-size:12px}}
@media(prefers-reduced-motion:reduce){html:not(.reduce-motion) .term-card{transition:none}}