:root{--b:#07558a;--b2:#083f66;--t:#08796d;--ts:#edf7f5;--i:#202a34;--m:#5f6b76;--bd:#ccd7e2;--bg:#f2f5f8;--g:#067647;--gg:#ecfdf3;--r:#b42318;--rr:#fef3f2;--f7:#dfe9f7;--rs2:#e6f4ea;--rs1:#fff0d8;--f3:#f4e7fa;--rd:#e2f3f0;--op:#ffe7e3;--imm:#e9edf3}
*{box-sizing:border-box}body{margin:0;font:16px/1.55 Arial,Helvetica,sans-serif;color:var(--i);background:var(--bg)}button,input,select{font:inherit}.shell{max-width:1260px;margin:auto;padding:22px}.hero,.panel{background:#fff;border:1px solid var(--bd);border-radius:20px;box-shadow:0 8px 22px rgba(0,53,94,.06)}.hero{padding:28px}.panel{padding:26px;margin-top:20px}.panel[hidden]{display:none}.eyebrow{margin:0 0 6px;color:var(--t);font-weight:700}h1,h2,h3,h4{color:var(--b2)}h1{font-size:clamp(2rem,4vw,3rem);line-height:1.12;margin:0}.lead{max-width:980px;font-size:1.08rem}.ref{font-size:.87rem;color:var(--m);margin:0 0 18px}.pbl{border-left:4px solid var(--t);padding:10px 14px;background:#f8fbfb}.lesson-question{font-size:1.05rem;font-weight:700;border-bottom:2px solid #d8e2ea;padding:0 0 12px;margin:0 0 18px;color:var(--b2)}.nav{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:18px}.nav button,.btn,.format-buttons button,.need-grid button,.choice-row button,.choice-grid button{border:1px solid var(--bd);border-radius:10px;background:#fff;color:var(--b2);font-weight:700;padding:10px 12px;min-height:46px;cursor:pointer}.nav button.active,.btn.primary,.format-buttons button.active,.need-grid button.active,.choice-row button.selected,.choice-grid button.selected{background:var(--b);color:#fff;border-color:var(--b)}.btn.teal{background:var(--ts);border-color:#8fcfc5;color:#08685e}button:disabled{opacity:.45;cursor:not-allowed}.progress{height:7px;margin-top:14px;background:#dfe7ee;border-radius:99px;overflow:hidden}.progress>div{height:100%;width:0;background:linear-gradient(90deg,var(--b),var(--t))}.progress-label{font-size:.9rem;color:var(--m);margin-top:6px}.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.card{border:1px solid var(--bd);border-radius:14px;padding:18px;background:#fff}.section-title{margin-top:26px}.rule{border-left:4px solid #8bb7d3;background:#f7fafc;padding:10px 12px;margin:14px 0}.summary{border-top:1px solid var(--bd);padding-top:12px;margin-top:16px}.scope-text{font-size:.92rem;color:var(--m);margin-top:18px}.worked-example{background:#f8fafc;border:1px solid var(--bd);border-radius:10px;padding:12px;margin-top:12px}.contract-flow,.roundtrip{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:10px;align-items:center;text-align:center}.contract-flow>div,.roundtrip>div{border:1px solid var(--bd);border-radius:12px;padding:15px;background:#f8fafc}.contract-flow span,.roundtrip span{color:var(--t);font-weight:800}.contract-flow small,.roundtrip small{display:block;color:var(--m);font-weight:400}.width-sum{display:flex;gap:9px;align-items:center;justify-content:center;flex-wrap:wrap;font:700 1.1rem Consolas,monospace;margin:14px 0}.width-sum span{border:1px solid var(--bd);border-radius:9px;padding:7px 12px;background:#f8fafc}.math-line{text-align:center;font-size:1.4rem;font-weight:700;margin:15px 0;color:var(--b2)}.bit-ruler{display:grid;grid-template-columns:repeat(32,1fr);font:11px Consolas,monospace;color:var(--m);margin:12px 0 3px}.bit-ruler span{text-align:center}.format-strip{display:grid;grid-template-columns:repeat(32,minmax(8px,1fr));border:1px solid #aebbc7;border-radius:10px;overflow:hidden;min-height:72px}.seg{display:flex;align-items:center;justify-content:center;text-align:center;border-right:1px solid rgba(0,0,0,.14);padding:5px 2px;font-size:.83rem;font-weight:700;min-width:0}.seg small{display:block;font-size:.7rem;font-weight:500;color:#44515c}.seg.funct7{background:var(--f7)}.seg.rs2{background:var(--rs2)}.seg.rs1{background:var(--rs1)}.seg.funct3{background:var(--f3)}.seg.rd{background:var(--rd)}.seg.opcode{background:var(--op)}.seg.imm{background:var(--imm)}.seg.active{outline:4px solid #c28b00;outline-offset:-4px;z-index:2}.format-buttons{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}.format-compare{line-height:1.9;overflow-x:auto;white-space:nowrap}.interaction-question{font-weight:700;color:var(--b2);margin:14px 0 10px}.choice-row,.choice-grid{display:grid;gap:8px}.choice-row{grid-template-columns:repeat(3,1fr)}.choice-grid{grid-template-columns:repeat(3,1fr)}.status{border:1px solid var(--bd);border-radius:10px;padding:12px;background:#f8fafc;margin-top:10px}.status.good{background:var(--gg);border-color:#98e6ba;color:var(--g)}.status.bad{background:var(--rr);border-color:#efb7b1;color:var(--r)}.controls{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.syntax-map{display:grid;grid-template-columns:1fr 1fr;gap:12px}.syntax-map>div{border:1px solid var(--bd);border-radius:10px;padding:12px;text-align:center}.syntax-map span{display:block;color:var(--m);font-size:.85rem}.syntax-map strong{display:block;margin-top:5px}.step-title{font-weight:700;color:var(--t);margin-bottom:8px}.operand-map{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.operand-map>div{border:1px solid var(--bd);border-radius:10px;padding:12px;text-align:center}.operand-map span,.operand-map small{display:block}.operand-map span{color:var(--m);font-size:.85rem}.operand-map strong{font-size:1.3rem;color:var(--b2)}.operation-table{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.operation-table>div{border:1px solid var(--bd);border-radius:10px;padding:12px}.operation-table strong,.operation-table span{display:block}.operation-table span{font-size:.9rem;color:var(--m);margin-top:4px}.add-sub-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}.add-sub-compare>div{display:grid;grid-template-columns:auto 1fr 1fr 1fr;gap:8px;border:1px solid var(--bd);border-radius:10px;padding:10px;align-items:center}.add-sub-compare span{font:13px Consolas,monospace}.syntax-box{font:700 1.05rem Consolas,monospace;border:1px solid var(--bd);border-radius:10px;padding:12px;background:#f8fafc;margin-top:10px}.instruction-card{margin-top:12px;border:1px solid var(--bd);border-radius:12px;padding:14px;background:#f8fafc}.instruction-card .asm{font:700 1.05rem Consolas,monospace;color:var(--b2)}.need-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.need-grid button:last-child{grid-column:1/-1}.metric{border:1px solid var(--bd);border-radius:12px;padding:11px;text-align:center}.metric small{display:block;color:var(--m)}.metric strong{font-size:1.13rem;color:var(--b2)}.result-box{display:grid;grid-template-columns:1fr;gap:4px;border:1px solid var(--bd);border-radius:12px;padding:12px;margin-top:12px;background:#f8fafc}.result-box small{color:var(--m)}.result-box strong{font:700 1rem Consolas,monospace;color:var(--b2);word-break:break-all}table{width:100%;border-collapse:collapse;margin-top:12px}th,td{border:1px solid var(--bd);padding:9px 10px;text-align:left;vertical-align:top}th{background:var(--b);color:#fff}.compact th,.compact td{padding:7px 8px;font-size:.9rem}.tablewrap{overflow-x:auto}.mono,code{font-family:Consolas,"Courier New",monospace}input,select{width:100%;border:1px solid var(--bd);border-radius:9px;padding:9px 10px;background:#fff;min-height:43px}label{font-weight:700}.footer{text-align:center;color:var(--m);font-size:.9rem;margin:24px 0}.steps{padding-left:23px}.steps li{margin:7px 0}
@media(max-width:960px){.grid2,.grid3{grid-template-columns:1fr}.nav{grid-template-columns:1fr 1fr}.format-buttons{grid-template-columns:repeat(3,1fr)}.contract-flow,.roundtrip{grid-template-columns:1fr}.contract-flow>span,.roundtrip>span{transform:rotate(90deg)}.format-strip{min-width:760px}.card:has(.format-strip){overflow-x:auto}.add-sub-compare>div{grid-template-columns:1fr 1fr}.operation-table{grid-template-columns:1fr}.syntax-map{grid-template-columns:1fr}}
@media(max-width:560px){.nav,.controls,.format-buttons,.need-grid,.choice-row,.choice-grid,.operand-map{grid-template-columns:1fr}.need-grid button:last-child{grid-column:auto}.shell{padding:12px}.hero,.panel{padding:18px}}