:root{--bg:#f7f7f7;--ink:#272727;--muted:#808080;--line:#e8e8e8;--green:#585858;--light:#f0f0f0;--orange:#838383}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.7 'Segoe UI','Microsoft YaHei',sans-serif}button,input,select,textarea{font:inherit}button,a,select{touch-action:manipulation}a{color:inherit;text-decoration:none}button{cursor:pointer;border:1px solid var(--line);border-radius:7px;padding:9px 16px;background:white;color:var(--ink)}button:hover{border-color:var(--green);color:var(--green)}button:disabled{opacity:.45;cursor:not-allowed}button.primary,.primary{background:var(--green);color:white;border-color:var(--green)}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #aaaaaa;outline-offset:3px}.sidebar{width:232px;position:fixed;inset:0 auto 0 0;background:#ffffff;border-right:1px solid var(--line);padding:31px 23px;display:flex;flex-direction:column}.brand{display:flex;align-items:center;gap:12px;font-size:23px;font-weight:700;letter-spacing:2px}.brand-icon{display:grid;place-items:center;background:var(--green);color:#ffffff;width:40px;height:44px;border-radius:12px 12px 12px 3px;font-size:23px}.brand small{display:block;font-size:8px;font-weight:500;letter-spacing:2px;color:var(--muted)}.nav-label{color:#a7a7a7;font-size:11px;margin:46px 13px 15px}nav{display:grid;gap:8px}nav a{display:flex;gap:12px;align-items:center;padding:11px 14px;color:#737373;border-radius:7px}nav a.active{background:var(--light);color:var(--green);font-weight:600}nav b{margin-left:auto;font-size:10px}.side-bottom{margin-top:auto;font-size:11px;color:#727272}.side-bottom p{font-size:10px;color:#a1a1a1;margin:9px 0 18px}.side-bottom button{font-size:11px;padding:6px 9px;margin-right:3px}.status-dot{display:inline-block;width:6px;height:6px;background:#888888;border-radius:50%;margin-right:6px}main{margin-left:232px;padding:0 45px;max-width:1760px}header{height:81px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);color:#989898;font-size:11px}.header-right{display:flex;align-items:center;gap:23px}.avatar{border:1px solid #e2e2e2;border-radius:50%;width:30px;height:30px;text-align:center;line-height:28px;background:#f1f1f1;color:#606060}#app{min-height:calc(100vh - 158px);padding:31px 0}h1{font-size:29px;line-height:1.4;letter-spacing:-1px;margin:6px 0 8px}h2{font-size:17px;line-height:1.5;margin:0 0 14px}h3{font-size:15px;margin:0 0 9px}p{margin:8px 0 15px}.muted{color:var(--muted)}.eyebrow{color:var(--green);font-size:10px;letter-spacing:2px;font-weight:600}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:25px}.page-heading p{color:var(--muted);font-size:12px;margin-bottom:0}.mode{display:flex;background:#ececec00;border:1px solid var(--line);border-radius:7px;padding:3px;gap:3px}.mode button{border:0;background:transparent;font-size:11px;padding:7px 12px}.mode button.selected{background:#ffffff;box-shadow:0 1px 5px #0001;color:var(--green)}.hero{background:#343434;color:#ffffff;border-radius:13px;padding:30px 32px;display:grid;grid-template-columns:1fr 230px;position:relative;overflow:hidden}.hero .eyebrow{color:#bdbdbd}.hero h2{font-size:27px;margin:12px 0}.hero p{color:#cdcdcd;max-width:590px;font-size:12px}.hero .primary{background:#ffffff;color:#424242;border-color:#ffffff;margin-top:10px}.hero-art{display:grid;place-items:center;position:relative}.orbit{width:155px;height:155px;border:1px solid #ffffff28;border-radius:50%;position:relative;transform:rotate(-20deg)}.orbit:before{content:'';position:absolute;inset:19px;border:1px dashed #ffffff35;border-radius:50%}.cube{position:absolute;inset:44px;border:1px solid #b4b4b4;transform:rotate(65deg);background:linear-gradient(135deg,#74747477,#3c3c3c)}.cube:after{content:'↗';position:absolute;inset:7px;display:grid;place-items:center;font-size:40px;color:#d1d1d1;transform:rotate(-45deg)}.orbit b{position:absolute;right:-17px;top:24px;background:#545454;border:1px solid #949494;border-radius:8px;padding:6px 10px;font-size:11px;transform:rotate(20deg)}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:20px 0 29px}.stat,.card{background:white;border:1px solid var(--line);border-radius:10px;padding:21px}.stat-label{font-size:11px;color:var(--muted)}.stat strong{display:block;font-size:27px;font-weight:600;margin:7px 0 2px}.stat small{font-size:10px;color:#939393}.stat strong em{font-size:12px;font-style:normal;color:#909090;margin-left:4px}.two-col{display:grid;grid-template-columns:1fr 310px;gap:23px}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.section-heading h2{margin:0}.section-heading a{font-size:11px;color:var(--muted)}.lesson-list{display:grid;gap:12px}.lesson-card{display:flex;align-items:center;gap:16px;padding:19px 21px}.lesson-icon{width:42px;height:43px;display:grid;place-items:center;border:1px solid #e6e6e6;background:#f4f4f4;color:var(--green);border-radius:9px;font-size:18px;flex-shrink:0}.lesson-card h3{margin:2px 0 4px;font-size:14px}.lesson-card p{font-size:11px;color:var(--muted);margin:0}.lesson-card .arrow{margin-left:auto;border:0;color:var(--green);padding:8px}.tag{display:inline-block;font-size:10px;padding:2px 7px;border-radius:4px;background:#f2f2f2;color:#6e6e6e;margin-right:7px}.tag.amber{background:#f2f2f2;color:#7a7a7a}.ability{margin:16px 0}.ability>div{display:flex;justify-content:space-between;font-size:11px;color:#707070;margin-bottom:6px}.bar{height:5px;border-radius:3px;background:#efefef}.bar i{display:block;height:100%;background:#848484;border-radius:3px}.note{background:#f4f4f4;border:1px solid #e8e8e8;padding:17px;border-radius:8px;font-size:11px;color:#7d7d7d;margin-top:17px}.project-strip{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.project-card{border-top:3px solid #838383}.project-card h3{margin:10px 0}.project-card p{color:var(--muted);font-size:11px}.project-card .num{font:10px monospace;color:#a2a2a2}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.resource{display:flex;flex-direction:column}.resource a{color:var(--green);margin-top:auto;font-size:12px}.resource p{font-size:12px;color:var(--muted)}.toolbar{display:flex;gap:10px;margin-bottom:23px;flex-wrap:wrap}input,select,textarea{border:1px solid #e0e0e0;border-radius:6px;padding:10px;background:#ffffff;color:var(--ink)}.toolbar input{flex:1;min-width:160px}.stage{margin-bottom:25px}.stage-head{display:flex;gap:14px;align-items:center;margin:15px 0}.stage-head h2{margin:0}.stage-head small{color:var(--muted)}.stage-index{color:var(--green);background:var(--light);padding:6px 11px;border-radius:6px}.stage .grid{grid-template-columns:repeat(2,1fr)}.lesson-page{max-width:930px;margin:auto}.lesson-meta{display:flex;gap:12px;font-size:11px;color:var(--muted);margin:13px 0 25px}.step{margin:18px 0}.step h2{font-size:16px}.step p,.step li{font-size:13px}.step-num{color:var(--green);font:12px monospace;margin-right:12px}.steps-nav{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0}.steps-nav span{font-size:11px;color:#8c8c8c}.code,pre{font:12px/1.7 Consolas,monospace;white-space:pre-wrap;background:#2c2c2c;color:#e8e8e8;border-radius:7px;padding:18px;overflow:auto}.options{display:grid;gap:9px;margin:17px 0}.option{display:flex;gap:10px;align-items:flex-start;padding:12px;border:1px solid var(--line);border-radius:7px;cursor:pointer}.option:has(input:checked){border-color:var(--green);background:#f6f6f6}.feedback{background:#f2f2f2;border-left:3px solid #888888;padding:13px;margin-top:15px;font-size:13px}.feedback.error{background:#f3f3f3;border-color:#939393}.field-label{display:block;color:#717171;margin:13px 0 6px;font-size:12px}textarea{width:100%;min-height:125px;resize:vertical}textarea.editor{font:13px/1.6 Consolas,monospace;min-height:180px;background:#f9f9f9}.actions{display:flex;gap:9px;flex-wrap:wrap;margin:15px 0}.check{display:block;padding:6px 0;font-size:12px}.check input{margin-right:9px}.empty{padding:45px;text-align:center;color:var(--muted);background:white;border:1px dashed #dddddd;border-radius:9px}footer{display:flex;justify-content:space-between;color:#a6a6a6;font-size:10px;border-top:1px solid var(--line);padding:20px 0}#toast{display:none;position:fixed;bottom:25px;left:50%;background:#373737;color:white;padding:12px 22px;border-radius:8px;z-index:10}table{border-collapse:collapse;width:100%;font-size:12px;margin:15px 0}td,th{padding:9px;border:1px solid var(--line);text-align:left}.inline-link{color:var(--green);text-decoration:underline}.diagnostic .card{margin-bottom:15px}details summary{cursor:pointer;color:var(--green);font-size:12px}details p{font-size:12px}.project-task{border-bottom:1px solid var(--line);padding:15px 0}.count{color:var(--green);font-weight:600}svg.radar{width:100%;height:195px}.review-card{margin:12px 0}.danger{color:#696969}.caption{font-size:10px;color:var(--muted)}@media(min-width:1500px){main{padding:0 65px}.hero{padding:40px}.two-col{grid-template-columns:1fr 360px}}@media(max-width:1100px){main{padding:0 25px}.sidebar{width:195px;padding:25px 14px}main{margin-left:195px}.two-col{grid-template-columns:1fr 260px}.grid{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr 150px}.hero-art{transform:scale(.8)}.stats{gap:10px}.stat{padding:15px}}@media(max-width:800px){.sidebar{position:static;width:100%;padding:15px;display:block;border-right:0;border-bottom:1px solid var(--line)}.brand{font-size:20px}.nav-label,.side-bottom{display:none}nav{display:flex;margin-top:14px;overflow:auto;gap:4px}nav a{padding:8px;font-size:11px;white-space:nowrap;gap:5px}main{margin:0;padding:0 18px}header{height:55px}.header-right>span:first-child{display:none}.two-col{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.hero{grid-template-columns:1fr;padding:25px}.hero-art{display:none}.page-heading{align-items:flex-start;gap:15px;flex-direction:column}.project-strip,.grid,.stage .grid{grid-template-columns:1fr}.hero h2{font-size:23px}h1{font-size:25px}.stat strong{font-size:23px}footer{gap:15px}.lesson-card{padding:14px}.mode button{padding:7px 15px}}
