/* Minimal engineering: quiet surfaces, readable type, restrained accent. */
:root{color-scheme:light;--bg:#f9f9f9;--ink:#2d2d2d;--muted:#838383;--line:#e7e7e7;--green:#5f5f5f;--light:#f3f3f3;--mono:'Cascadia Code',Consolas,monospace}
body{background:var(--bg);color:var(--ink)}.sidebar{width:216px;background:#ffffff;padding:30px 22px;border-right-color:var(--line)}main{margin-left:216px;padding:0 45px;max-width:1490px}.brand{font-size:22px;font-weight:600;letter-spacing:0;gap:11px}.brand-icon{background:#f9f9f9;color:#6f6f6f;border:1px solid #e5e5e5;border-radius:5px;width:34px;height:36px;font:18px var(--mono)}.brand small{font:8px var(--mono);color:#9a9a9a;letter-spacing:1px;margin-top:4px}.nav-label{font:9px var(--mono);letter-spacing:1.2px;color:#a2a2a2;margin:40px 12px 17px}nav{gap:7px}nav a{padding:10px 12px;font-size:12px;color:#868686;border-radius:5px}nav a.active{background:#f2f2f2;color:#626262;font-weight:500}nav a:hover{background:#f6f6f6}.side-bottom{color:#919191;font-size:10px}.side-bottom p{font-size:9px;color:#a5a5a5}.side-bottom button{border-radius:4px;padding:6px 8px;font-size:10px;border-color:#e5e5e5;color:#878787}.status-dot{background:#979797;width:5px;height:5px}header{height:73px;color:#9a9a9a;font-size:10px}.header-right{font:9px var(--mono)}.avatar{border-radius:4px;color:#929292;border-color:#e5e5e5;background:#f5f5f5;font:11px/28px var(--mono)}#app{padding:34px 0}.eyebrow{font:9px var(--mono);letter-spacing:1.1px;color:#9e9e9e}.page-heading{margin-bottom:27px;gap:20px}.page-heading h1{font-weight:600;font-size:27px;letter-spacing:-.5px}.page-heading p{font-size:12px;color:#949494;line-height:1.9}.home-title{font:600 clamp(27px,2.7vw,38px)/1.18 'Segoe UI',sans-serif;letter-spacing:-1.3px}.home-title .accent{color:#898989}.mode{background:#f3f3f3;border-color:#e4e4e4;border-radius:5px}.mode button{font-size:10px;color:#9f9f9f;padding:6px 10px}.mode button.selected{background:#ffffff;color:#707070;box-shadow:0 1px 3px #2f2f2f08}button{border-radius:5px;border-color:#e5e5e5;background:#ffffff;color:#797979;font-size:12px}button:hover{background:#f9f9f9;border-color:#adadad;color:#6e6e6e}button.primary,.primary{background:#636363;color:#ffffff;border-color:#636363;font-weight:500}button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible{outline:2px solid #a5a5a5;outline-offset:3px}
.hero{background:#ffffff;border:1px solid #e5e5e5;color:#383838;border-radius:6px;padding:26px 29px;grid-template-columns:minmax(0,1fr) 130px;gap:25px;box-shadow:none}.hero:before{display:none}.hero .eyebrow{color:#a7a7a7;font:9px var(--mono);letter-spacing:1px}.hero h2{font-size:23px;letter-spacing:-.2px;font-weight:600;margin:11px 0;color:#474747}.hero p{color:#969696;font-size:12px;line-height:1.9;max-width:570px;margin-bottom:10px}.hero .primary{background:#636363;color:white;border-color:#636363;font-size:11px;padding:9px 17px!important;border-radius:5px!important;margin-top:11px}.hero .primary:hover{background:#515151}.hero .caption{color:#a4a4a4!important;font-size:10px}.mission-index{border-left:1px solid #e9e9e9;padding-left:24px;align-self:center;display:grid;gap:7px}.mission-index small{font:8px var(--mono);color:#afafaf;letter-spacing:1px}.mission-index strong{font:400 30px var(--mono);color:#959595;letter-spacing:-1px}.mission-index span{font:9px/1.8 var(--mono);color:#acacac}
.stats{gap:13px;margin:17px 0 29px}.stat,.card{background:#ffffff;border-color:#e7e7e7;border-radius:6px;box-shadow:none}.stat{padding:17px 19px}.stat:before{display:none}.stat-label{font-size:10px;color:#9d9d9d}.stat strong{font:400 26px var(--mono);margin:9px 0 3px;color:#626262}.stat strong em{font:10px 'Segoe UI','Microsoft YaHei',sans-serif;color:#a7a7a7}.stat small{font-size:9px;color:#acacac}.section-heading h2{font-size:14px;font-weight:600}.section-heading a{font-size:10px;color:#a6a6a6}.two-col{grid-template-columns:minmax(0,1fr) 280px;gap:22px}.lesson-card{padding:17px 19px;gap:13px}.lesson-card:hover{border-color:#bdbdbd}.lesson-icon{width:34px;height:36px;background:#f9f9f9;color:#999999;border-color:#e9e9e9;border-radius:4px;font:16px var(--mono)}.lesson-card h3{font-size:13px;font-weight:500}.lesson-card p{font-size:10px;color:#aaaaaa}.tag{background:#f5f5f5;color:#9a9a9a;border-radius:3px;font-size:9px;padding:2px 6px;border:0}.tag.amber{background:#f5f5f5;color:#a1a1a1}.ability{margin:14px 0}.ability>div{font-size:10px;color:#9f9f9f}.bar{height:3px;background:#f2f2f2}.bar i{background:#acacac}.note{background:#f7f7f7;border-color:#ebebeb;color:#a0a0a0;font-size:10px;line-height:1.9;padding:14px 16px;border-radius:5px}.project-card{border-top:1px solid #e6e6e6}.project-card .num{font:8px/1.8 var(--mono);color:#aaaaaa}.project-card h3{font-size:13px;font-weight:500}.project-card p{font-size:10px;color:#aaaaaa}.caption{font-size:9px;color:#aeaeae}.resource p{font-size:12px;color:#989898}.resource a{font-size:11px}.stage-index{font:11px var(--mono);background:#f3f3f3;color:#a2a2a2;border-radius:4px}.stage-head small{font-size:10px;color:#adadad}.steps-nav span{font:10px var(--mono);color:#acacac}.code,pre{background:#f8f8f8;color:#848484;border:1px solid #ebebeb;border-radius:5px;font:12px/1.8 var(--mono);padding:17px}textarea.editor{background:#fbfbfb;color:#7d7d7d;border-color:#e8e8e8;font-family:var(--mono)}input,select,textarea{background:#ffffff;border-color:#e8e8e8;color:#757575;border-radius:5px}input::placeholder,textarea::placeholder{color:#b7b7b7}input[type=checkbox],input[type=radio]{accent-color:#919191}.field-label{font-size:11px;color:#a8a8a8}.option{border-radius:5px;border-color:#e9e9e9;font-size:12px}.option:has(input:checked){background:#f7f7f7;border-color:#bdbdbd}.feedback{background:#f6f6f6;border-color:#b7b7b7;color:#939393}.feedback.error{background:#f6f6f6;border-color:#b9b9b9;color:#9c9c9c}.empty{background:#ffffff;border-color:#eaeaea;color:#b7b7b7}.count{color:#a8a8a8;font-weight:500}details summary{color:#adadad}td,th{border-color:#eaeaea}th{background:#f9f9f9;color:#9f9f9f;font-weight:500}footer{font:9px/1.8 var(--mono);color:#b5b5b5;gap:15px}#toast{background:#707070;color:#ffffff;border-radius:5px}svg.radar{height:170px}
@media(max-width:1100px){.sidebar{width:195px;padding:27px 17px}main{margin-left:195px;padding:0 26px}.two-col{grid-template-columns:minmax(0,1fr) 240px}.hero{padding:24px;grid-template-columns:minmax(0,1fr) 100px}.mission-index{padding-left:17px}.mission-index strong{font-size:25px}.home-title{font-size:29px}.mode button{padding:6px 8px}}
@media(max-width:800px){.sidebar{position:static;width:100%;padding:15px 18px;border-right:0;border-bottom:1px solid var(--line)}main{margin:0;padding:0 19px}.brand{font-size:20px}.brand-icon{width:30px;height:32px}.nav-label{display:none}nav{gap:5px;scrollbar-width:thin;scrollbar-color:#dedede transparent}nav a{font-size:10px;padding:7px 9px;white-space:nowrap}.side-bottom{display:flex;justify-content:flex-end;gap:6px;margin-top:10px;font-size:0}.side-bottom p,.side-bottom .status-dot{display:none}.side-bottom button{font-size:9px;padding:4px 9px;margin:0}header{height:53px}#app{padding-top:25px}.page-heading{gap:17px;margin-bottom:23px}.home-title{font-size:30px;letter-spacing:-1px}.page-heading p{font-size:11px}.hero{grid-template-columns:1fr;padding:23px}.mission-index{display:none}.hero h2{font-size:21px}.hero .caption{display:block;margin:12px 0 0!important}.hero .primary{margin-top:8px}.stats{gap:10px;margin-top:13px}.stat{padding:15px}.stat strong{font-size:25px}.two-col{grid-template-columns:1fr}.project-strip,.grid,.stage .grid{grid-template-columns:1fr}.stage-head{flex-wrap:wrap;gap:10px}footer{flex-wrap:wrap}.mode button{font-size:10px;padding:6px 12px}.lesson-page .mode{align-self:start}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Secondary text stays readable; quiet does not mean low contrast. */
:root{--ink:#2d2d2d;--muted:#6f6f6f}.hero p,.page-heading p,.resource p,.project-card p{color:#737373}.eyebrow,.hero .eyebrow,.nav-label,.brand small,.caption,.hero .caption,.stat-label,.stat small,.stat strong em,.lesson-card p,.project-card .num,.ability>div,.section-heading a,.stage-head small,.mission-index small,.mission-index span,.field-label,.steps-nav span,.side-bottom,.side-bottom p,footer{color:#737373!important}.stat strong{color:#424242}.note{color:#707070}.tag{color:#727272}.code,pre{color:#616161}textarea.editor,input,select,textarea{color:#545454}input::placeholder,textarea::placeholder{color:#787878}.feedback{color:#5b5b5b}.feedback.error{color:#6f6f6f}.empty{color:#7c7c7c}.count{color:#707070}.mode button{color:#767676}details summary{color:#747474}.inline-link{color:#636363}

/* Monochrome: typography and spacing carry the hierarchy. */
:root{--bg:#fafafa;--ink:#202020;--muted:#666666;--line:#e5e5e5;--green:#222222;--light:#f4f4f4}
.brand{font-size:19px;white-space:nowrap;gap:8px}.brand-icon{color:#222222;background:#f5f5f5;border-color:#dddddd;width:27px;height:30px}.brand small{font-size:8px;letter-spacing:.6px}
.home-title{font-family:'Segoe UI','Microsoft YaHei',sans-serif;font-size:clamp(28px,3vw,40px);line-height:1.5;letter-spacing:1px;font-weight:500}
button.primary,.primary,.hero .primary{background:#222222;border-color:#222222;color:#ffffff}.hero .primary:hover,button.primary:hover{background:#444444;color:#ffffff}
nav a.active{color:#111111;background:#eeeeee}.hero h2,.stat strong{color:#222222}.bar i{background:#555555}.status-dot{background:#555555}.tag.amber{background:#eeeeee;color:#555555}.feedback.error{border-color:#777777;background:#f3f3f3;color:#222222}
.card,.stat,.hero{border-color:#e4e4e4}.page-heading{margin-bottom:30px}.hero{padding-top:30px;padding-bottom:30px}a:hover{color:#111111}.primary:hover{color:#ffffff}