@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=IBM+Plex+Mono:wght@400;500;600&family=Noto+Sans+Thai:wght@400;500;600&display=swap');
:root{--bg:#f4f5ef;--paper:#fffefa;--ink:#243c32;--muted:#78877c;--line:#dde3d7;--green:#254d3a;--mint:#e2ecd7;--orange:#da783b;--orange-bg:#fbecdd;--mono:'IBM Plex Mono',monospace;--font:'DM Sans','Noto Sans Thai',Arial,sans-serif;--shadow:0 12px 42px #243a2910}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:14px;line-height:1.55}button,input,select{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer;color:inherit}button{border:0;background:none}button:disabled{cursor:not-allowed;opacity:.45}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:3px solid #e6a062;outline-offset:3px}a{color:var(--green)}svg{vertical-align:middle}button svg{flex-shrink:0}h1,h2,h3,h4,p{margin:0}button{transition:background .16s,box-shadow .16s,transform .16s}button:hover{filter:brightness(.98)}.topbar{height:88px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:#fbfcf7;gap:24px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;font-size:21px;font-weight:700;letter-spacing:-.5px;line-height:1.15}.brand-mark{background:#234b37;color:#e1efd2;width:41px;height:44px;padding:6px;border-radius:8px}.brand-mark svg{width:100%;height:100%}.brand-light{font-weight:450;margin-left:3px}.brand small{font-size:7px;display:block;letter-spacing:2px;margin-top:7px;color:#839080}.main-nav{display:flex;align-self:stretch;gap:25px}.main-nav button{display:flex;gap:7px;align-items:center;border-bottom:3px solid transparent;color:#829080;font-family:var(--mono);font-size:10px;padding:0 0 0;white-space:nowrap}.main-nav button span{font-family:var(--font);font-size:13px;font-weight:550;color:#657261}.main-nav button.active{border-bottom-color:var(--green);color:var(--green)}.main-nav button.active span{color:var(--ink)}.top-actions{display:flex;gap:14px;align-items:center}.language{font-size:11px;border:1px solid var(--line);border-radius:5px;padding:5px 8px;color:#6e7e6a}.language span{font-size:15px;margin-right:4px}.language.active{background:#e9f0e2;border-color:#d3dfc9;color:#315637}.icon-btn{display:flex;align-items:center;justify-content:center;width:31px;height:31px;border-radius:5px}.icon-btn:hover{background:#e8eddf}.manual-btn{font-size:12px;white-space:nowrap}.manual-btn span{margin-left:10px;color:#75836e}#app{max-width:1640px;margin:auto;padding:34px 38px 30px;min-height:calc(100vh - 141px)}.eyebrow{font:10px var(--mono);font-weight:500;letter-spacing:1.8px;color:#78856e;text-transform:uppercase;display:flex;align-items:center;gap:9px}.eyebrow .line{width:24px;height:1px;background:#93a288}.page-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:28px}.page-heading h1{font-size:35px;line-height:1.18;letter-spacing:-1.3px;font-weight:550;margin:11px 0 10px}.page-heading p{font-size:13px;color:#7d8876;max-width:570px}.page-heading em{font-family:Georgia,serif;font-weight:400;color:#637a56}.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:11px 17px;border-radius:6px;font-size:12px;font-weight:600;min-height:43px;border:1px solid transparent;text-decoration:none}.btn.primary{background:var(--green);color:#fffef7}.btn.primary:hover{background:#37674b;box-shadow:0 3px 9px #264f3420}.btn.secondary{border-color:var(--line);background:#fffefa}.btn.soft{background:#e6eddc}.btn.orange{background:#e99455;color:#20352b}.btn.small{padding:7px 11px;font-size:11px;min-height:32px}.btn.wide{width:100%}.hint-caption{font:9px var(--mono);color:#84907f;text-align:center;margin-top:8px}.learn-layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:23px}.lesson-menu{border-right:1px solid var(--line);padding-right:20px;max-height:650px;overflow:auto;scrollbar-width:thin;scrollbar-color:#c6d1bd transparent}.menu-progress{margin-bottom:17px;border:1px solid var(--line);border-radius:7px;padding:12px}.menu-progress span{display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.progress-track{height:4px;background:#e2e7da;border-radius:20px;overflow:hidden;margin-top:8px}.progress-track i{display:block;height:100%;background:#5c8050;transition:width .4s}.category-label{font:9px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#87927e;margin:18px 0 7px}.lesson-link{display:flex;align-items:center;gap:9px;text-align:left;width:100%;padding:9px 8px;border-radius:5px;font-size:12px;color:#798571}.lesson-link svg{color:#879580}.lesson-link.active{background:#e4ecd9;color:var(--green);font-weight:600}.lesson-link .tick{margin-left:auto;font-size:11px;color:#4a8055}.lesson-content{min-width:0}.lesson-top{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:0 0 13px}.lesson-top .index{font:10px var(--mono);letter-spacing:1px;color:var(--muted)}.chip{display:inline-flex;align-items:center;gap:5px;background:#e9efe1;border:1px solid #dbe3d2;border-radius:4px;padding:3px 7px;font:9px var(--mono);color:#67805b;white-space:nowrap}.lesson-grid{display:grid;grid-template-columns:1.07fr 1fr;gap:30px;padding-top:22px}.lesson-art{background:radial-gradient(ellipse at 50% 43%,#e4edda,transparent 70%);border:1px solid #dbe2d3;border-radius:9px;min-height:290px;position:relative;display:flex;flex-direction:column;justify-content:center;overflow:hidden}.lesson-art:before,.workbench:before{content:'';position:absolute;inset:0;background-image:radial-gradient(#aabda0 1px,transparent 1px);background-size:20px 20px;opacity:.2;pointer-events:none}.part-model{width:100%;height:auto;display:block;position:relative}.lesson-art .part-model{max-height:250px}.art-annotation{display:flex;justify-content:space-between;padding:14px 16px;position:absolute;bottom:0;width:100%;font:8px var(--mono);letter-spacing:1px;color:#839378}.art-controls{position:absolute;top:12px;right:12px;display:flex;gap:5px}.art-controls button{border:1px solid #d2ddc8;border-radius:4px;font-size:9px;padding:5px 8px;background:#f6f9ee}.lesson-copy h2{font-size:31px;letter-spacing:-.8px;font-weight:500;margin:5px 0 3px}.lesson-copy .full-name{color:var(--muted);font-size:12px;margin-bottom:19px}.lesson-copy h3{font-size:11px;font-weight:650;margin:17px 0 6px;display:flex;gap:7px;align-items:center}.lesson-copy p{font-size:13px;color:#687961;line-height:1.7}.thai-clue{border-left:2px solid #d3ae65;background:#f5f0e0;padding:11px 13px;border-radius:0 5px 5px 0;margin-top:15px;font-size:12px;color:#877249;line-height:1.8}.thai-clue .th-label{font-family:var(--mono);font-size:8px;letter-spacing:1px;color:#9b8353;display:block;margin-bottom:4px}.thai-off .thai-clue{display:none}.concept-note{padding:13px 15px;background:#e7eddf;border:1px solid #dce4d0;border-radius:6px;font-size:11px;line-height:1.7;color:#688057;margin-top:14px;display:flex;gap:9px}.concept-note svg{flex-shrink:0;margin-top:3px}.lesson-bottom{display:grid;grid-template-columns:1.07fr 1fr;gap:30px;margin-top:24px}.path-card{padding:17px;border:1px solid var(--line);border-radius:8px;background:#fcfdf7}.path-card h3,.quiz-card h3{font-size:11px;font-weight:600;margin-bottom:11px}.data-path{display:flex;align-items:center;gap:7px;margin:18px 0 13px;justify-content:center}.path-node{display:flex;flex-direction:column;align-items:center;gap:6px;font:8px var(--mono);color:#7d8e70}.path-node span{width:46px;height:44px;display:grid;place-items:center;background:#e4ecda;border:1px solid #d4dfc7;border-radius:6px}.path-node.lit span{background:#d9ae60;color:#3c4b2e;transform:translateY(-3px)}.data-path>.path-arrow{font-size:13px;color:#a6b298}.path-desc{font-size:11px;color:#7c8d70;min-height:34px}.text-btn{display:inline-flex;gap:6px;align-items:center;font-size:11px;font-weight:600;color:#486c41;padding:4px 0}.quiz-card{border:1px solid var(--line);border-radius:8px;padding:17px;background:#fffefa}.quiz-card p{font-size:12px;margin-bottom:10px}.quiz-options{display:flex;flex-direction:column;gap:5px}.quiz-option{display:flex;text-align:left;border:1px solid #e0e6d7;padding:7px 10px;border-radius:4px;gap:8px;color:#77816e;font-size:11px}.quiz-option:before{content:'';width:12px;height:12px;border-radius:50%;border:1px solid #c3ceb9;flex-shrink:0;margin-top:2px}.quiz-option.correct{background:#e7f1df;color:#416736;border-color:#bdcfac}.quiz-option.wrong{background:#fae8dd;border-color:#e4b29a}.lesson-pagination{display:flex;justify-content:space-between;align-items:center;margin-top:23px;padding-top:18px;border-top:1px solid var(--line)}.lesson-pagination span{font:9px var(--mono);color:#7f8f71}.stagebar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;border:1px solid var(--line);padding:5px;border-radius:8px;background:#fbfcf7;margin-bottom:21px}.stage-tab{display:flex;align-items:center;gap:11px;padding:11px 15px;position:relative;border-radius:5px}.stage-tab .stage-number{height:27px;width:27px;border:1px solid #d7dfce;border-radius:50%;font:10px var(--mono);display:grid;place-items:center;color:#9aa58d}.stage-tab h3{font-size:12px;font-weight:550;color:#929d86}.stage-tab p{font-size:9px;color:#a0a98f}.stage-tab.current{background:#e6eedb}.stage-tab.current h3{color:#315034}.stage-tab.current p{color:#819270}.stage-tab.current .stage-number{background:#2e593d;color:#fff;border:0}.stage-tab.done .stage-number{background:#e5ebdd;color:#668354}.build-heading{margin-bottom:19px}.build-heading h1{font-size:27px;margin-top:6px}.build-heading p{font-size:11px}.build-heading .right-meta{display:flex;gap:8px;align-items:center}.build-grid{display:grid;grid-template-columns:210px minmax(400px,1fr) 283px;gap:19px;align-items:start}.inventory{border:1px solid var(--line);background:#fcfdf7;border-radius:9px;overflow:hidden}.panel-title{padding:13px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;font-size:11px;font-weight:600}.panel-title span{font:9px var(--mono);color:#899879}.inventory-list{max-height:532px;overflow:auto;padding:7px;scrollbar-width:thin;scrollbar-color:#ccd6c3 transparent}.inventory-group{padding:10px 7px 6px;font:8px var(--mono);letter-spacing:1px;color:#8c997d;text-transform:uppercase}.inventory-card{display:flex;gap:9px;align-items:center;border:1px solid transparent;border-radius:5px;padding:7px 6px;width:100%;text-align:left;cursor:grab}.inventory-card.selected{background:#e8eddc;border-color:#c0d0ac}.inventory-card:hover{background:#edf1e5}.inventory-card figure{margin:0;width:47px;flex-shrink:0;background:#e8ede1;border-radius:4px}.inventory-card .part-model{height:40px}.inventory-card strong{font-size:10px;font-weight:550;display:block;line-height:1.4}.inventory-card small{font:8px var(--mono);color:#899477;display:block;margin-top:3px}.inventory-card .cable-mini{display:grid;place-items:center;background:#eaeee3;border-radius:4px;width:33px;height:32px;flex-shrink:0}.inventory-foot{font:8px var(--mono);color:#889678;border-top:1px solid var(--line);padding:10px 13px;text-align:center}.workbench-shell{border:1px solid var(--line);background:#f0f3e8;border-radius:9px;overflow:hidden}.bench-top{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-bottom:1px solid #d9e2cc;background:#f8faf2}.bench-top strong{font:9px var(--mono);letter-spacing:1px;color:#78896c}.view-tools{display:flex;gap:5px;align-items:center}.view-tools button{font-size:12px;width:25px;height:25px;border:1px solid #d9e2d0;background:#fcfdf7;border-radius:4px}.view-tools span{font:9px var(--mono);color:#819271;padding:0 4px}.workbench{min-height:405px;position:relative;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 45% 50%,#dfe9d5,transparent 65%);overflow:hidden}.workbench-svg{width:100%;height:auto;position:relative;max-height:555px;touch-action:manipulation;font-family:var(--mono)}.hotspot,.screw-point{cursor:pointer}.hotspot:hover rect{fill:#ecb16426;stroke:#d5a35b;stroke-width:2}.hotspot:focus rect{stroke:#cc9346;stroke-width:3}.screw-point:hover{filter:brightness(1.13)}.bench-bottom{display:flex;justify-content:space-between;align-items:center;padding:12px 15px;background:#f8faf2;border-top:1px solid #d9e2cc;font:8px var(--mono);color:#8a977d}.bench-bottom .legend{display:flex;align-items:center;gap:7px}.target-dot{height:7px;width:7px;background:#dca05d;border-radius:50%;box-shadow:0 0 0 3px #f1e4c6}.instruction{border:1px solid var(--line);background:#fffefa;border-radius:9px;overflow:hidden}.instruction-top{padding:16px 18px 12px;border-bottom:1px solid #e6eadf}.instruction-top .count{font:9px var(--mono);color:#889975;display:flex;justify-content:space-between}.instruction-body{padding:18px}.instruction h2{font-size:20px;line-height:1.25;font-weight:550;letter-spacing:-.4px;margin:8px 0 11px}.instruction .detail{font-size:12px;color:#7c8a71;line-height:1.7}.instruction .thai-clue{font-size:11px;padding:9px 11px}.active-task{margin-top:18px;padding:11px;border:1px solid #e9d1aa;background:#fbf0df;border-radius:6px;font-size:11px;color:#8c714b;line-height:1.65}.active-task strong{color:#8c603b;display:block;font-size:10px;margin-bottom:4px}.instruction-actions{margin-top:14px;display:flex;flex-direction:column;gap:8px}.instruction-foot{padding:13px 17px;border-top:1px solid var(--line);font-size:10px;color:#809074;display:flex;align-items:center;gap:8px}.screw-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:13px}.screw-grid button{background:#f5e5c8;border:1px solid #ddbf8c;border-radius:5px;height:36px;font:11px var(--mono)}.screw-grid button.done{background:#dfebd4;border-color:#bccdaa;color:#6c8556}.align-preview{display:flex;align-items:center;justify-content:center;margin:12px 0}.align-preview svg{width:90px;transition:transform .2s}.paste-options{display:flex;gap:5px;margin:10px 0}.paste-options button{font-size:10px;border:1px solid var(--line);border-radius:5px;padding:7px;background:#f9fbf4}.power-strip{margin-top:15px;border:1px solid var(--line);border-radius:7px;display:flex;align-items:center;gap:13px;padding:12px 16px;background:#fbfcf7}.power-strip .power-icon{color:#7a8c69}.power-strip .power-label{font-size:10px;color:#7c8d6b;min-width:80px}.power-strip .power-label strong{font:12px var(--mono);display:block;color:#425f3c}.power-strip .meter{flex:1;height:5px;background:#e3e9db;border-radius:5px;overflow:hidden}.power-strip .meter i{display:block;height:100%;background:#829e65;border-radius:5px}.power-strip .meter i.warning{background:#d18446}.power-strip .power-end{font:9px var(--mono);color:#758866;white-space:nowrap}.build-ledger{margin-top:16px;font-size:11px;color:#80946c}.build-ledger summary{cursor:pointer}.ledger-steps{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;margin:9px 0}.ledger-steps span{font-size:10px;padding:4px 6px;border:1px solid var(--line);border-radius:3px}.ledger-steps .complete{color:#4c7745;background:#edf3e7}.site-footer{padding:15px 38px;border-top:1px solid var(--line);font-size:9px;color:#929c88;display:flex;justify-content:space-between}.site-footer span{display:flex;gap:8px;align-items:center}.site-footer button{font-size:9px;margin-left:8px;color:#6c7f59;text-decoration:underline;text-underline-offset:3px}.live-dot{width:5px;height:5px;border-radius:50%;background:#90a66f;display:inline-block}.toast{position:fixed;bottom:27px;left:50%;transform:translate(-50%,20px);background:#253e30;color:#f6faed;padding:13px 20px;border-radius:8px;box-shadow:0 6px 30px #16372730;z-index:110;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90%;font-size:12px}.toast.show{opacity:1;transform:translate(-50%,0)}.toast.error{background:#87572e}.toast small{display:block;color:#d3e2bd;font-size:11px;margin-top:3px}dialog{border:1px solid #cbd6be;border-radius:13px;background:#f8faf2;color:var(--ink);box-shadow:0 24px 100px #162e3155;padding:0;max-width:min(860px,94vw);width:860px;max-height:90vh}dialog::backdrop{background:#122f2bc0;backdrop-filter:blur(5px)}.modal-head{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding:22px 25px;background:#fffef8}.modal-head h2{font-size:20px;font-weight:550;letter-spacing:-.5px}.modal-head p{font-size:11px;color:#8a967e;margin-top:4px}.modal-body{padding:24px 25px;max-height:70vh;overflow:auto}.modal-foot{border-top:1px solid var(--line);padding:16px 25px;display:flex;justify-content:space-between;align-items:center;gap:10px}.config-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}.field label{display:block;font:9px var(--mono);letter-spacing:1px;text-transform:uppercase;color:#7a8d67;margin-bottom:5px}.field select{width:100%;border:1px solid #d0dcc2;border-radius:5px;background:#fffef9;padding:9px;font-size:12px;color:#4b6040;min-height:40px}.config-summary{padding:16px;background:#e6eedb;border-radius:7px;margin-top:19px}.config-summary h3{font-size:12px;display:flex;align-items:center;gap:8px}.config-summary p{font-size:11px;color:#708860;margin-top:5px}.compat-error{color:#a35431;font-size:11px;background:#f8eadd;padding:7px 10px;border-radius:4px;margin:5px 0}.compat-warning{color:#99783c;font-size:11px;margin:5px 0}.config-presets{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap}.pin-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:30px}.pin-board{background:#294438;color:#d7e9c6;padding:27px 20px;border:8px solid #d8dec9;border-radius:12px;box-shadow:var(--shadow)}.pin-board h3{font:12px var(--mono);margin-bottom:20px}.pins{display:grid;grid-template-columns:repeat(5,1fr);gap:18px 13px}.pin-button{display:flex;flex-direction:column;align-items:center;gap:6px;font:11px var(--mono);color:#b7c6a0}.pin-button .pin-metal{width:19px;height:19px;background:linear-gradient(135deg,#e6da9b,#8c7d39);border:4px solid #172b20;border-radius:2px;box-shadow:0 2px 0 #14261d}.pin-button.selected .pin-metal{background:#f5a45c;box-shadow:0 0 0 3px #f5cb70}.pin-button.missing .pin-metal{background:transparent;border-color:#355040;box-shadow:none;opacity:.3}.pin-selection{min-height:36px;font:11px var(--mono);text-align:center;margin-top:18px;color:#b7cca1}.manual-table{border-collapse:collapse;width:100%;font-size:11px}.manual-table th{text-align:left;padding:8px;color:#7b8b6b;font-weight:500;border-bottom:1px solid var(--line);font-size:10px}.manual-table td{padding:8px;border-bottom:1px solid var(--line)}.manual-table code{font:10px var(--mono)}.small-note{font-size:11px;line-height:1.65;color:#80906e;margin-top:13px}.manual-section{margin-bottom:24px}.manual-section h3{font-size:14px;margin-bottom:10px}.manual-section p,.manual-section li{font-size:12px;line-height:1.75;color:#76856c}.manual-section li{margin:5px 0}.manual-section a{color:#547d43}.diagnosis-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.scenario{border:1px solid var(--line);border-radius:9px;background:#fcfdf7;padding:22px;display:flex;flex-direction:column;align-items:flex-start;gap:11px;text-align:left;min-height:208px}.scenario:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:#b3c39e}.scenario .scenario-num{font:10px var(--mono);color:#9aa888;display:flex;justify-content:space-between;width:100%;align-items:center}.scenario h3{font-size:18px;font-weight:500;letter-spacing:-.3px}.scenario p{font-size:12px;color:#849277;flex:1}.scenario .scenario-link{font-size:11px;font-weight:550;color:#587947;display:flex;align-items:center;gap:8px}.diag-work{display:grid;grid-template-columns:minmax(400px,1.5fr) minmax(330px,1fr);gap:22px}.diag-monitor{border:9px solid #344c3e;border-bottom-width:23px;border-radius:13px;background:#101d1a;min-height:272px;padding:26px;color:#c0dcb8;font:12px var(--mono)}.diag-monitor h3{font-size:17px;color:#d7ebcc;margin-bottom:15px}.diag-monitor p{font-size:11px;line-height:1.8;color:#9fb894}.diag-monitor .screen-black{min-height:180px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:16px;color:#597562}.led-row{display:flex;gap:10px;margin:20px 0}.led{display:flex;align-items:center;gap:5px;font:9px var(--mono);color:#839b75}.led i{width:6px;height:6px;background:#c5d1b8;border-radius:50%}.led.on i{background:#d96842;box-shadow:0 0 8px #d97352}.led.pass i{background:#649e56;box-shadow:0 0 8px #7dac5f}.diag-controls{display:flex;gap:7px;flex-wrap:wrap;margin:14px 0}.inspect-panel{border:1px solid var(--line);border-radius:9px;background:#fffef8;padding:21px}.inspect-panel h3{font-size:16px;font-weight:500;margin-bottom:6px}.inspect-panel p{font-size:11px;color:#859274}.inspect-list{display:grid;grid-template-columns:repeat(2,1fr);gap:7px;margin-top:16px}.inspect-list button{font-size:10px;border:1px solid var(--line);border-radius:5px;padding:9px;background:#f6f9ef;text-align:left;display:flex;align-items:center;gap:7px}.inspection-reading{background:#e8efde;border-radius:6px;padding:16px;margin-top:14px;min-height:90px}.inspection-reading .reading{font:24px var(--mono);color:#48703d;margin:4px 0}.inspection-reading p{font-size:11px}.diag-log{margin-top:16px;border-top:1px solid var(--line);padding-top:12px;font:10px var(--mono);color:#7d906a;line-height:1.9}.bios{background:#152820;color:#c5dbc1;padding:24px;border-radius:7px;font-family:var(--mono);min-height:420px}.bios-head{display:flex;justify-content:space-between;border-bottom:1px solid #385440;padding-bottom:15px;margin-bottom:18px}.bios-head h2{font-size:19px;font-weight:500;color:#dbeccc}.bios-head span{font-size:10px;color:#819f7b}.bios-tabs{display:flex;gap:21px;color:#719769;font-size:10px;margin-bottom:23px}.bios-tabs .active{color:#d7e7bf}.bios-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.bios h3{font:10px var(--mono);color:#c4daac;border-bottom:1px solid #35503b;padding-bottom:7px;margin-bottom:8px;letter-spacing:1px}.bios-row{font-size:10px;display:flex;justify-content:space-between;gap:10px;padding:6px 0;color:#8ea783}.bios-row strong{color:#d1e3c3;font-weight:400}.boot-option{display:flex;gap:10px;align-items:center;width:100%;border:1px solid #3c5c42;border-radius:4px;background:#1d3527;color:#b3c9a6;margin:6px 0;padding:9px;text-align:left;font:10px var(--mono)}.boot-option.first{border-color:#a3c186;color:#d4e6b8;background:#2a4831}.boot-option span{color:#8caa73}.bios-note{font-size:9px;color:#88a273;margin-top:20px}.boot-animation{min-height:280px;background:#14261e;color:#9bbd8c;border-radius:8px;padding:40px;font-family:var(--mono);display:flex;flex-direction:column;justify-content:center}.boot-animation p{margin:5px;font-size:12px}.boot-animation .current-test{color:#d6ebb7}.installer-view{background:#e8efec;border:1px solid #cbd9d2;border-radius:8px;padding:25px}.installer-view h3{font-size:24px;font-weight:400;color:#315553;margin-bottom:6px}.disk-option{display:flex;align-items:center;gap:12px;padding:13px;border:1px solid #b7cbc5;border-radius:5px;margin:8px 0;background:#f9fdfa;cursor:pointer}.disk-option:has(input:checked){background:#d6e8df;border-color:#689c8a}.disk-option strong{font-size:12px;display:block}.disk-option small{font-size:11px;color:#7e9889}.install-progress{padding:35px 0;text-align:center}.install-progress .install-number{font:45px var(--mono);color:#5a826a;margin:15px}.desktop{height:410px;position:relative;overflow:hidden;border-radius:7px;background:radial-gradient(ellipse at 70% 30%,#92b6af,transparent 55%),linear-gradient(130deg,#193e38,#3e7464 50%,#8bbca1);color:#e6f4e3}.desktop:before{content:'';position:absolute;width:510px;height:280px;border:1px solid #a9d3b75c;border-radius:50%;transform:rotate(-30deg);top:95px;left:170px;box-shadow:0 0 0 40px #a9d3b712,0 0 0 80px #a9d3b710,0 0 0 120px #a9d3b708}.desktop-icons{position:absolute;left:14px;top:13px;display:flex;flex-direction:column;gap:17px}.desktop-icons button{display:flex;align-items:center;flex-direction:column;gap:5px;color:#edf8df;font-size:10px;text-shadow:0 1px 3px #223e2a;width:68px}.desktop-icons button svg{width:29px;height:29px;padding:3px;background:#e3f3d642;border-radius:5px}.taskbar{height:40px;position:absolute;bottom:0;left:0;right:0;background:#f1f7ecd9;backdrop-filter:blur(15px);color:#48715b;display:flex;align-items:center;justify-content:center;gap:20px}.taskbar .time{position:absolute;right:14px;font:9px var(--mono)}.desktop-window{position:absolute;top:28px;left:109px;right:28px;bottom:59px;background:#f5faf0;color:#365941;border-radius:7px;box-shadow:0 15px 35px #13352644;overflow:auto}.window-head{display:flex;justify-content:space-between;padding:9px 15px;border-bottom:1px solid #d5e1ce;background:#e9f1e1;font-size:11px}.window-body{padding:20px}.window-body h3{font-size:22px;font-weight:450;margin-bottom:12px}.window-body p{font-size:11px;line-height:1.8;color:#6c8863}.window-body .system-row{display:flex;justify-content:space-between;font-size:11px;border-bottom:1px solid #dee8d5;padding:7px 0}.window-body .file-row{display:flex;gap:9px;align-items:center;padding:8px;border-bottom:1px solid #dce7d3;font-size:11px}.window-body textarea{width:100%;height:152px;background:#fffef9;border:1px solid #d0dfc8;border-radius:4px;padding:12px;color:#4c6843;font:12px var(--font)}.celebration{padding:27px;border-radius:9px;background:#e3ecd7;border:1px solid #cbd9be;text-align:center}.celebration h2{font-size:26px;font-weight:500;margin:12px 0 8px}.celebration p{font-size:12px;color:#81946b}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);margin:22px 0;gap:10px}.stat{border:1px solid #cbdabe;border-radius:6px;padding:13px}.stat strong{font:23px var(--mono);display:block;color:#4b6e3c}.stat span{font-size:9px;color:#81946c}.complete-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:22px}.help-banner{border:1px solid #dddac3;background:#f5f0dd;border-radius:6px;padding:12px 15px;font-size:11px;color:#91805a;margin-bottom:20px}.spinning{animation:spin 1.2s linear infinite;transform-origin:0 0}.route-animation{animation:route 2s ease infinite}@keyframes spin{to{transform:rotate(360deg)}}@keyframes route{50%{opacity:.2}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(min-width:1500px){.build-grid{grid-template-columns:220px minmax(500px,1fr) 305px}.workbench{min-height:480px}.lesson-art{min-height:345px}}
@media(max-width:1180px){.topbar{padding:0 22px;gap:15px}.main-nav{gap:16px}.brand{font-size:17px}.top-actions{gap:7px}.manual-btn{display:none}#app{padding:27px 22px}.build-grid{grid-template-columns:165px minmax(360px,1fr) 253px;gap:12px}.instruction-body{padding:15px}.inventory-card figure{width:36px}.inventory-card strong{font-size:9px}.lesson-grid,.lesson-bottom{gap:20px}.page-heading h1{font-size:31px}.workbench{min-height:350px}.diag-work{grid-template-columns:1.2fr 1fr}}
@media(max-width:960px){.topbar{flex-wrap:wrap;height:auto;min-height:85px;padding-top:13px;gap:12px}.main-nav{order:3;width:100%;justify-content:center;height:40px}.main-nav button{padding-bottom:10px}.build-grid{grid-template-columns:160px minmax(0,1fr)}.instruction{grid-column:1/-1}.instruction-body{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}.instruction-body h2,.instruction-body .detail,.instruction-body .thai-clue{grid-column:1}.instruction-body .active-task,.instruction-body .instruction-actions{grid-column:2}.instruction-body .active-task{grid-row:2/4;margin-top:0}.instruction-body .instruction-actions{grid-row:4/7;align-self:start}.instruction-body .eyebrow{grid-column:1}.lesson-grid,.lesson-bottom{grid-template-columns:1fr}.lesson-art{min-height:260px}.lesson-content{max-width:700px}.lesson-menu{max-height:1060px}.learn-layout{grid-template-columns:185px minmax(0,1fr)}.lesson-copy h2{font-size:27px}.diagnosis-grid{grid-template-columns:repeat(2,1fr)}.diag-work{grid-template-columns:1fr}.complete-layout{grid-template-columns:1fr}.site-footer{padding:15px 22px}.bios-grid{gap:15px}.stage-tab{padding:9px}.stage-tab h3{font-size:10px}.stage-tab p{font-size:8px}}
@media(max-width:640px){#app{padding:20px 14px}.topbar{padding:12px 14px 0}.brand{font-size:16px}.brand-mark{width:31px;height:35px}.brand small{font-size:6px;letter-spacing:1.3px}.top-actions .icon-btn{display:flex}.language{font-size:10px}.main-nav{justify-content:space-between;gap:8px}.main-nav button span{font-size:11px}.page-heading{align-items:flex-start;flex-direction:column;margin-bottom:20px}.page-heading h1{font-size:29px}.page-heading .btn{min-height:36px}.learn-layout{display:block}.lesson-menu{border:0;padding:0;max-height:175px;margin-bottom:19px;display:flex;flex-wrap:wrap;gap:4px}.menu-progress{display:none}.lesson-menu .category-label{display:none}.lesson-link{width:auto;display:flex;padding:6px 8px;font-size:10px;border:1px solid var(--line);background:#fcfdf6}.lesson-link svg{width:13px;height:13px}.lesson-grid{padding-top:16px}.lesson-art{min-height:230px}.lesson-top .index{font-size:9px}.lesson-copy p{font-size:12px}.lesson-pagination span{display:none}.build-grid{display:flex;flex-direction:column}.inventory{width:100%}.inventory-list{display:flex;max-height:90px;gap:4px;overflow:auto}.inventory-group{display:none}.inventory-card{min-width:140px}.inventory-foot{display:none}.workbench-shell,.instruction{width:100%}.workbench{min-height:270px}.instruction-body{display:block}.instruction-body .active-task{margin-top:15px}.stagebar{gap:2px;padding:3px}.stage-tab{padding:6px;flex-direction:column;gap:3px;align-items:center}.stage-tab p{display:none}.stage-tab h3{font-size:8px}.stage-tab .stage-number{width:22px;height:22px;font-size:8px}.bench-top{padding:9px}.bench-top strong{font-size:8px}.build-heading .right-meta{flex-wrap:wrap}.power-strip{padding:10px;gap:7px}.power-strip .power-end{font-size:8px}.power-strip .power-label{font-size:8px;min-width:70px}.site-footer{flex-direction:column;gap:7px;padding:15px}.site-footer>span:last-child{flex-wrap:wrap}.diagnosis-grid{grid-template-columns:1fr}.scenario{min-height:160px;padding:17px}.pin-layout{grid-template-columns:1fr}.config-grid{grid-template-columns:1fr}.modal-head{padding:17px}.modal-body{padding:17px}.modal-foot{padding:13px 17px}.modal-head h2{font-size:17px}.bios{padding:16px}.bios-grid{grid-template-columns:1fr}.desktop{height:440px}.desktop-window{left:82px;right:10px;top:16px}.desktop-icons{left:4px}.window-body{padding:12px}.window-body h3{font-size:19px}.window-body .system-row{font-size:10px;gap:10px}.eyebrow{font-size:8px;letter-spacing:1.1px}.diag-monitor{padding:17px}.power-strip .power-icon{display:none}.ledger-steps{grid-template-columns:1fr}.bench-bottom{font-size:7px}.stat-grid{gap:5px}.stat{padding:9px}.stat strong{font-size:19px}}