*{box-sizing:border-box}html,body{margin:0;min-height:100%}body{background:#0a1016;color:#eef4fa;font-family:Arial,"Segoe UI",sans-serif;overflow-x:auto}button,select,input{font:inherit}.hidden{display:none!important}.layout{min-width:1280px;min-height:100vh;padding:12px}.left-panel,.right-panel{position:fixed;top:12px;width:225px;max-height:calc(100vh - 24px);overflow:auto;padding:14px;background:#2d3946;border:2px solid #1c2730;border-radius:18px;box-shadow:0 10px 28px #0007;z-index:50}.left-panel{left:12px}.right-panel{right:12px}.center-panel{margin:0 247px;min-height:calc(100vh - 24px)}.back-btn,.side-btn,.ref-btn,.timer-actions button{width:100%;min-height:42px;border:0;border-radius:11px;font-weight:800;cursor:pointer}.back-btn{background:#65b3ff;color:#072442;margin-bottom:10px}.side-note{padding:9px;border-radius:10px;background:#202b35;color:#b7c9d9;font-size:11px;line-height:1.45;text-align:center}.separator{height:2px;background:#6d7f8e;margin:11px 0}.side-title{display:block;color:#cbd8e3;font-size:12px;font-weight:800;text-align:center;margin-bottom:6px}.timer{padding:10px;background:#121a21;border-radius:10px;color:#c9f508;font:800 28px Consolas;text-align:center}.timer-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:7px}.timer-actions button,.side-btn{background:#55778f;color:#fff;margin-top:8px}.side-btn.danger{background:#75413d}.side-select{width:100%;min-height:42px;padding:7px;border-radius:9px;background:#15212a;color:#fff;border:1px solid #48606f}.hero{display:flex;justify-content:space-between;gap:18px;padding:20px 22px;margin-bottom:14px;background:linear-gradient(135deg,#d9edff,#fbfdff);color:#173550;border-radius:22px}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;color:#587895}.hero h1{margin:6px 0 8px;font-size:32px}.hero p{margin:0;max-width:820px;color:#506c85;line-height:1.5}.score-card{min-width:130px;padding:10px;background:#173b5f;color:#fff;border-radius:14px;text-align:center}.score-card span,.score-card small{display:block;color:#c9dfef;font-size:10px;text-transform:uppercase}.score-card strong{display:block;font-size:23px;margin:5px}.mode-section{padding:18px;background:#d9edff;color:#173550;border-radius:22px;box-shadow:0 10px 28px #0004}.tab-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}.interface-tab{min-height:44px;border:2px solid #b7ccde;border-radius:10px;background:#f7fbff;color:#234766;font-weight:800;cursor:pointer}.interface-tab.active{background:#173b5f;color:#fff;border-color:#173b5f}.interface-panel,.wiring-card,.settings-card,.frame-card,.modbus-info,.fault-card,.diagnostic-answer,.quiz-card{background:#fff;border:1px solid #cbddec;border-radius:18px;padding:15px;box-shadow:0 7px 18px #173b5f12}.panel-title-row{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:12px}.panel-title-row h2{margin:0 0 5px;font-size:25px;color:#173b5f}.panel-title-row p{margin:0;color:#58748d;line-height:1.45}.badge{padding:8px 11px;background:#173b5f;color:#fff;border-radius:999px;font:800 11px Consolas;white-space:nowrap}.diagram-svg{display:block;width:100%;height:auto;background:#f9fcff;border:1px solid #d5e4ef;border-radius:16px}.device-box,.node-box{fill:#f9fcff;stroke:#6d91b2;stroke-width:2.5}.switch-box{fill:#eaf7ef;stroke:#4e9670;stroke-width:2.5}.svg-heading{font-size:24px;font-weight:800;fill:#173b5f}.svg-heading.small{font-size:20px}.svg-sub{font-size:15px;font-weight:600;fill:#647f96}.terminal{stroke:#fff;stroke-width:2}.terminal.tx{fill:#d15454}.terminal.rx{fill:#4a7cc7}.terminal.gnd{fill:#68737d}.terminal.a{fill:#d45b4f}.terminal.b{fill:#397dbe}.term-label,.small-label,.wire-name{font-size:17px;font-weight:800;fill:#294d6b}.wire{stroke-width:5;fill:none}.tx-wire{stroke:#d15454}.rx-wire{stroke:#4a7cc7}.gnd-wire{stroke:#68737d}.arrow-tx{fill:#d15454}.arrow-rx{fill:#4a7cc7}.bus-wire{stroke-width:5;fill:none}.a-wire{stroke:#d45b4f}.b-wire{stroke:#397dbe}.terminator{fill:#fff6dd;stroke:#b18431;stroke-width:2.5}.stub-wire{stroke:#617f99;stroke-width:4}.ether-wire{stroke:#3a8d66;stroke-width:6;stroke-linecap:round}.learning-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-top:12px}.learning-grid div{padding:11px;background:#eef6fd;border-radius:10px}.learning-grid b{display:block;color:#173b5f;margin-bottom:4px}.learning-grid span{color:#57728b;font-size:12px;line-height:1.4}.layers{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:12px;align-items:center;padding:16px;background:#f5faff;border-radius:14px}.layer{padding:18px;border-radius:14px;text-align:center}.layer.physical{background:#e7f3ff}.layer.protocol{background:#eef8ed}.layer span,.layer small{display:block;color:#637d93}.layer strong{display:block;font-size:24px;color:#173b5f;margin:7px}.layer-arrow{font-size:28px;color:#4d7796}.notice,.warning-note{margin-top:12px;padding:12px;border-left:4px solid #d69a32;background:#fff8e8;border-radius:8px;color:#6d5529;line-height:1.5}.wiring-layout,.modbus-layout,.diagnostic-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:12px}.settings-card h3,.modbus-info h3,.diagnostic-answer h3{margin:0 0 10px;color:#173b5f}.settings-card label{display:grid;grid-template-columns:1fr 150px;gap:8px;align-items:center;margin-bottom:8px;color:#45627a;font-weight:700}.settings-card select{min-height:38px;border:1px solid #bed1e1;border-radius:8px;background:#fff;color:#173550;padding:4px 7px}.settings-card label.check-row{grid-template-columns:auto 1fr;justify-content:start}.settings-card label.check-row input{width:18px;height:18px}.disabled-wire{stroke:#a9b5bf;stroke-dasharray:8 7}.good-wire{stroke:#2f9b5d}.bad-wire{stroke:#d14b43}.primary-btn,.secondary-btn{min-height:42px;border:0;border-radius:9px;font-weight:800;cursor:pointer}.primary-btn{width:100%;background:#39765a;color:#fff}.secondary-btn{width:100%;background:#557a94;color:#fff}.result-box{margin-top:9px;padding:10px;background:#f2f7fb;border:1px solid #d2e0ea;border-radius:9px;color:#58718a;text-align:center;line-height:1.45}.result-box.correct{background:#e4f7ea;border-color:#75bd8c;color:#187442}.result-box.wrong{background:#ffebe9;border-color:#dc8a84;color:#a53c35}.byte-row{display:flex;flex-wrap:wrap;gap:7px;padding:12px;background:#0f1921;border-radius:11px;min-height:67px;align-items:center}.byte-box{min-width:48px;padding:11px 8px;border-radius:7px;text-align:center;color:#fff;font:800 17px Consolas}.byte-box.address,.byte.address{background:#b65a45}.byte-box.function,.byte.function{background:#447eb4}.byte-box.data,.byte.data{background:#4e8b63}.byte-box.crc,.byte.crc{background:#8864ad}.frame-direction{margin-bottom:7px;font-weight:900;color:#173b5f}.frame-direction.response{margin-top:12px}.frame-legend{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 12px;color:#58718a;font-size:12px}.frame-legend span{display:flex;gap:5px;align-items:center}.byte{display:inline-block;width:14px;height:14px;border-radius:3px}.bus-animation{position:relative;height:64px;margin:13px 0;display:flex;justify-content:space-between;align-items:end;padding:0 8px;color:#58718a;font-size:11px;border-top:3px solid #738fa5}.packet{position:absolute;top:-10px;left:0;width:22px;height:16px;background:#c9f508;border:2px solid #507100;border-radius:5px;opacity:0}.packet.run{animation:packetRun 1.4s linear forwards}@keyframes packetRun{0%{left:0;opacity:1}90%{opacity:1}100%{left:calc(100% - 22px);opacity:0}}.modbus-info div{display:flex;justify-content:space-between;gap:10px;padding:9px;border-bottom:1px solid #e1ebf3}.modbus-info span{color:#687f93}.modbus-info strong{color:#173b5f;text-align:right}.mini-task{margin-top:12px;padding:12px;background:#fff;border-radius:12px;color:#425e75}.mb-answer{margin-left:8px;padding:7px 10px;border:1px solid #b9cede;border-radius:8px;background:#f6fbff;color:#173b5f;font-weight:800;cursor:pointer}.mini-task span{margin-left:8px;font-weight:800}.kicker{font-size:10px;font-weight:900;letter-spacing:.08em;color:#b06c28;text-transform:uppercase}.fault-card h3{margin:5px 0 9px;color:#173b5f}.fault-text{padding:12px;background:#f4f8fb;border-radius:9px;color:#506c83;line-height:1.55}.indicator-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}.indicator{padding:6px 8px;border-radius:999px;background:#e4f7ea;color:#187442;font:800 11px Consolas}.indicator.bad{background:#ffebe9;color:#a53c35}.fault-options{display:grid;gap:7px}.fault-option{min-height:42px;border:1px solid #bed2e2;border-radius:9px;background:#f7fbff;color:#173b5f;font-weight:800;cursor:pointer}.explain{margin-top:9px;padding:10px;background:#eef6fd;border-left:4px solid #4a8cc4;border-radius:8px;color:#4e6980;line-height:1.5}.quiz-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:11px}.quiz-card h3{margin:0 0 7px;color:#173b5f}.quiz-card p{min-height:54px;color:#526e85;line-height:1.45}.quiz-options{display:grid;gap:6px}.quiz-option{min-height:40px;border:1px solid #c3d5e4;border-radius:8px;background:#f7fbff;color:#173b5f;font-weight:700;cursor:pointer}.quiz-option.correct{background:#e4f7ea;color:#187442}.quiz-option.wrong{background:#ffebe9;color:#a53c35}.ref-btn{margin-bottom:8px;background:#eef6fd;color:#173b5f}.memory-card{padding:10px;background:#f1f7fc;color:#173550;border-radius:12px}.memory-card div{display:flex;justify-content:space-between;gap:8px;padding:7px 0;border-bottom:1px solid #d6e3ed}.memory-card b{color:#173b5f}.memory-card span{font-size:11px;color:#5b7389;text-align:right}.memory-card small{display:block;margin-top:8px;color:#7c6b48;line-height:1.4}.modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:18px;background:#000b}.modal-card{position:relative;width:min(820px,96vw);max-height:88vh;overflow:auto;padding:22px;background:#fff;color:#173550;border-radius:18px}.modal-card h2{margin:0 38px 14px 0;color:#173b5f}.modal-card p,.modal-card li{line-height:1.55;color:#506c83}.modal-close{position:absolute;right:12px;top:9px;border:0;background:transparent;font-size:30px;color:#173b5f;cursor:pointer}@media(max-width:1450px){.learning-grid{grid-template-columns:repeat(2,1fr)}.wiring-layout,.modbus-layout,.diagnostic-grid{grid-template-columns:1fr}.quiz-grid{grid-template-columns:1fr}}@media(max-width:1100px){.layout{min-width:0}.left-panel,.right-panel{position:static;width:auto;max-height:none;margin-bottom:8px}.center-panel{margin:0}.hero,.panel-title-row{flex-direction:column}.tab-row{grid-template-columns:repeat(2,1fr)}.layers{grid-template-columns:1fr}.layer-arrow{transform:rotate(90deg)}}