:root{
  --bg:#f4f6f8; --surface:#ffffff; --surface2:#eef2f5; --line:#dde3e9; --text:#14212b; --muted:#5b6b78;
  --accent:#0f766e; --accent-2:#0d9488; --accent-soft:#d5f0ec; --blue:#2563eb; --amber:#b45309; --red:#c2410c; --green:#15803d;
  --fiber-down:#2563eb; --fiber-up:#c026d3; --shadow:0 1px 2px rgba(16,24,40,.06),0 4px 16px rgba(16,24,40,.06);
  --r:14px; --font:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#0d1419; --surface:#141e25; --surface2:#1b2830; --line:#26363f; --text:#e3ebf0; --muted:#93a4b0;
  --accent:#2dd4bf; --accent-2:#14b8a6; --accent-soft:#123b38; --blue:#60a5fa; --amber:#f59e0b; --red:#fb923c; --green:#4ade80;
  --fiber-down:#60a5fa; --fiber-up:#e879f9; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25); color-scheme:dark;}}
:root[data-theme="dark"]{
  --bg:#0d1419; --surface:#141e25; --surface2:#1b2830; --line:#26363f; --text:#e3ebf0; --muted:#93a4b0;
  --accent:#2dd4bf; --accent-2:#14b8a6; --accent-soft:#123b38; --blue:#60a5fa; --amber:#f59e0b; --red:#fb923c; --green:#4ade80;
  --fiber-down:#60a5fa; --fiber-up:#e879f9; --shadow:0 1px 2px rgba(0,0,0,.3),0 6px 18px rgba(0,0,0,.25); color-scheme:dark;}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--text);font:15px/1.55 var(--font);-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
code{background:var(--surface2);padding:1px 6px;border-radius:6px;font-size:.9em}
h1,h2,h3,h4{line-height:1.2;margin:0 0 .5em}
h1{font-size:1.75rem;letter-spacing:-.01em} h2{font-size:1.3rem} h3{font-size:1.08rem}
p{margin:0 0 .8em}
.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.side{position:sticky;top:0;height:100vh;overflow:auto;background:var(--surface);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 12px}
.brand{display:flex;gap:10px;align-items:center;padding:0 8px 16px}
.brand small{display:block;color:var(--muted);font-size:.78rem}
nav a{display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;color:var(--text);text-decoration:none;font-weight:500}
nav a i{font-style:normal;width:22px;text-align:center;color:var(--muted)}
nav a:hover{background:var(--surface2)}
nav a.on{background:var(--accent-soft);color:var(--accent)} nav a.on i{color:var(--accent)}
.navlbl{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin:16px 10px 6px}
.side-foot{margin-top:auto;padding:12px 8px 0}
.topbar{display:none}
main{padding:28px clamp(16px,3vw,40px) 60px;min-width:0;outline:none}
.btn{appearance:none;border:1px solid transparent;background:var(--accent);color:#fff;font:inherit;font-weight:600;padding:9px 16px;border-radius:10px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;text-decoration:none}
:root[data-theme="dark"] .btn:not(.ghost):not(.line){color:#062a27}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:not(.ghost):not(.line){color:#062a27}}
.btn:hover{filter:brightness(1.07)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.line{background:var(--surface);color:var(--accent);border-color:var(--accent)}
.btn.sm{padding:5px 10px;font-size:.86rem}
.btn:disabled{opacity:.5;cursor:default}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px}
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.muted{color:var(--muted)} .small{font-size:.86rem}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;background:var(--surface2);color:var(--muted);font-size:.78rem;font-weight:600}
.pill.acc{background:var(--accent-soft);color:var(--accent)}
.head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.head p{margin:0;color:var(--muted);max-width:720px}
.eyebrow{font-size:.75rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent)}
/* home */
.hero{display:grid;grid-template-columns:1.25fr 1fr;gap:24px;align-items:center;background:linear-gradient(135deg,var(--surface),var(--accent-soft));border:1px solid var(--line);border-radius:20px;padding:28px;margin-bottom:20px}
.hero h1{font-size:2rem}
.hero svg{width:100%;height:auto}
.stat{display:flex;flex-direction:column;gap:2px}
.stat b{font-size:1.7rem;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.stat span{color:var(--muted);font-size:.85rem}
.tile{display:block;text-decoration:none;color:inherit;transition:transform .15s,border-color .15s}
.tile:hover{transform:translateY(-2px);border-color:var(--accent)}
.tile h3{display:flex;gap:8px;align-items:center}
.tile .ic{width:34px;height:34px;border-radius:10px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;font-weight:700}
.bar{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}
.bar>i{display:block;height:100%;background:var(--accent);border-radius:99px}
/* course */
.course{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start}
.mods{position:sticky;top:20px;display:flex;flex-direction:column;gap:6px}
.mod{display:flex;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);text-decoration:none;font-weight:500}
.mod .n{width:28px;height:28px;flex:none;border-radius:8px;background:var(--surface2);display:grid;place-items:center;font-size:.85rem;font-weight:700;color:var(--muted)}
.mod.on{border-color:var(--accent);background:var(--accent-soft)} .mod.on .n{background:var(--accent);color:#fff}
.mod.done .n::after{content:"✓"} .mod.done .n span{display:none}
.lesson h2{margin-top:6px}
.lesson section{margin:0 0 22px}
.lesson section h3{padding-top:6px}
.steps{padding-left:0;list-style:none;counter-reset:s;margin:0 0 .8em}
.steps li{counter-increment:s;position:relative;padding:6px 0 6px 40px;border-left:2px solid var(--line);margin-left:13px}
.steps li::before{content:counter(s);position:absolute;left:-14px;top:5px;width:26px;height:26px;border-radius:50%;background:var(--accent);color:#fff;font-weight:700;font-size:.8rem;display:grid;place-items:center}
.tbl{width:100%;border-collapse:collapse;margin:6px 0 12px;font-size:.92rem}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
.tbl th{background:var(--surface2);font-weight:600}
.tip,.warn{padding:10px 14px;border-radius:10px;border-left:4px solid var(--accent);background:var(--accent-soft)}
.warn{border-left-color:var(--amber);background:color-mix(in srgb,var(--amber) 12%,var(--surface))}
.cores{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cores i{font-style:normal;font-size:.8rem;padding:2px 8px 2px 22px;border-radius:99px;background:var(--surface2);position:relative}
.cores i::before{content:"";position:absolute;left:6px;top:50%;width:11px;height:11px;margin-top:-5.5px;border-radius:50%;background:var(--c);border:1px solid var(--line)}
.gauge-legend{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px}
.gauge-legend .g{padding:4px 10px;border-radius:8px;font-size:.82rem;font-weight:600;color:#fff}
.g.sat{background:#7c3aed}.g.ok2{background:#0891b2}.g.ok{background:#16a34a}.g.lim{background:#d97706}.g.bad{background:#dc2626}
.thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.thumb{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface);cursor:pointer;padding:0;font:inherit;color:inherit;text-align:left}
.thumb img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;object-position:top}
.thumb span{display:block;padding:6px 8px;font-size:.76rem;line-height:1.3}
.thumb:hover{border-color:var(--accent)}
/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(5,10,14,.86);z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px}
.lightbox[hidden]{display:none}
.lightbox figure{margin:0;max-height:100%;display:flex;flex-direction:column;align-items:center}
.lightbox img{max-height:calc(100vh - 90px);max-width:min(92vw,820px);border-radius:8px;background:#fff}
.lightbox figcaption{color:#e5edf2;margin-top:8px;font-size:.9rem}
.lb-x,.lb-nav{position:absolute;background:rgba(255,255,255,.12);color:#fff;border:0;font-size:2rem;width:48px;height:48px;border-radius:50%;cursor:pointer}
.lb-x{top:14px;right:14px}.lb-nav.prev{left:14px}.lb-nav.next{right:14px}
/* diagrams */
.diag-wrap{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.diag-stack{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:start}
.diag-stack .info{position:static}
.diag{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:10px;overflow:auto}
.diag svg{display:block;width:100%;min-width:760px;height:auto}
.diag svg text{fill:var(--text);font-family:var(--font)}
.diag svg .lbl{font-size:12px;font-weight:600}
.diag svg .sub{font-size:10.5px;fill:var(--muted)}
.diag .node{cursor:pointer}
.diag .node .box{fill:var(--surface);stroke:var(--line);stroke-width:1.5;transition:stroke .15s,fill .15s}
.diag .node:hover .box,.diag .node.on .box{stroke:var(--accent);stroke-width:2.5;fill:var(--accent-soft)}
.diag .zone{fill:var(--surface2);stroke:none}
.diag .zone-t{font-size:11px;font-weight:700;letter-spacing:.08em;fill:var(--muted)}
.fiber{fill:none;stroke:#eab308;stroke-width:3.5;stroke-linecap:round}
.fiber.thick{stroke-width:6}
.utp{fill:none;stroke:var(--muted);stroke-width:2.5;stroke-dasharray:6 4}
.pulse{fill:none;stroke-width:4;stroke-linecap:round;stroke-dasharray:6 34;animation:flow 1.6s linear infinite}
.pulse.down{stroke:var(--fiber-down)} .pulse.up{stroke:var(--fiber-up);animation-direction:reverse}
@keyframes flow{to{stroke-dashoffset:-40}}
@media (prefers-reduced-motion:reduce){.pulse{animation:none}}
.info{position:sticky;top:20px}
.info h3{margin-bottom:4px}
.info dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0;font-size:.9rem}
.info dt{color:var(--muted)} .info dd{margin:0;font-weight:600}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--surface)}
.seg button{border:0;background:transparent;color:var(--text);padding:6px 12px;font:inherit;font-size:.88rem;cursor:pointer}
.seg button.on{background:var(--accent);color:#fff}
.budget{display:flex;align-items:stretch;gap:0;margin-top:14px;overflow-x:auto;border-radius:10px;border:1px solid var(--line)}
.budget div{flex:1;min-width:92px;padding:8px;border-right:1px solid var(--line);background:var(--surface)}
.budget div:last-child{border-right:0}
.budget b{display:block;font-variant-numeric:tabular-nums}
.budget small{color:var(--muted);font-size:.74rem}
/* LEDs */
.led{transition:fill .2s}
.blink{animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}
.scen{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.scen button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
/* map */
.mapwrap{display:grid;grid-template-columns:300px 1fr;gap:14px;height:calc(100vh - 150px);min-height:520px}
.mappanel{overflow:auto;display:flex;flex-direction:column;gap:12px}
#map{border-radius:var(--r);border:1px solid var(--line);height:100%;min-height:480px;background:var(--surface2)}
.layer{display:flex;align-items:center;gap:8px;padding:4px 0;font-size:.9rem;cursor:pointer}
.layer .sw{width:14px;height:14px;border-radius:4px;flex:none;border:1px solid rgba(0,0,0,.2)}
.layer .sw.dot{border-radius:50%}
.layer em{margin-left:auto;font-style:normal;color:var(--muted);font-size:.8rem;font-variant-numeric:tabular-nums}
.fld{width:100%;padding:9px 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit}
.fld:focus{outline:2px solid var(--accent);outline-offset:-1px}
.leaflet-popup-content{font:13px/1.45 var(--font);max-width:300px}
.leaflet-popup-content pre{white-space:pre-wrap;font:12px/1.4 var(--font);margin:6px 0 0;max-height:180px;overflow:auto}
.poplist{display:flex;flex-direction:column;gap:2px;max-height:260px;overflow:auto}
.poplist button{display:flex;justify-content:space-between;gap:8px;border:0;background:transparent;color:var(--text);text-align:left;padding:5px 8px;border-radius:8px;cursor:pointer;font:inherit;font-size:.88rem}
.poplist button:hover{background:var(--surface2)}
.poplist button i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px}
/* quiz */
.qwrap{max-width:860px}
.opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:12px 14px;margin:8px 0;font:inherit;cursor:pointer}
.opt b{width:26px;height:26px;flex:none;border-radius:50%;background:var(--surface2);display:grid;place-items:center;font-size:.85rem}
.opt:hover:not(:disabled){border-color:var(--accent)}
.opt.ok{border-color:var(--green);background:color-mix(in srgb,var(--green) 12%,var(--surface))}
.opt.ok b{background:var(--green);color:#fff}
.opt.bad{border-color:var(--red);background:color-mix(in srgb,var(--red) 12%,var(--surface))}
.opt.bad b{background:var(--red);color:#fff}
.opt.sel{border-color:var(--accent)} .opt.sel b{background:var(--accent);color:#fff}
.opt:disabled{cursor:default}
.expl{margin-top:10px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:999px;padding:5px 12px;font:inherit;font-size:.85rem;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.score{font-size:3rem;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tbar{display:grid;grid-template-columns:180px 1fr 60px;gap:10px;align-items:center;font-size:.88rem;margin:6px 0}
/* search */
.ask{display:flex;gap:8px}
.ask input{flex:1;font-size:1.05rem;padding:13px 16px}
.answer{border-left:4px solid var(--accent)}
.res{border-bottom:1px solid var(--line);padding:12px 0}
.res:last-child{border-bottom:0}
.res h4{margin:0 0 4px;font-size:1rem}
.res mark{background:color-mix(in srgb,var(--accent) 25%,transparent);color:inherit;border-radius:3px;padding:0 2px}
.src{font-size:.76rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
/* flow */
.flow{max-width:900px}
.fnode{border-radius:16px;padding:22px}
.fnode.end{border:2px solid var(--green)}
.fnode.noc{border:2px solid var(--red)}
.fopts{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.crumbs{display:flex;flex-direction:column;gap:6px;margin-top:16px}
.crumb{display:flex;gap:10px;align-items:baseline;font-size:.9rem}
.crumb i{font-style:normal;color:var(--muted);font-variant-numeric:tabular-nums;width:22px}
/* calc */
.calc{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:18px;align-items:start}
.frm label{display:block;font-size:.85rem;color:var(--muted);margin:10px 0 4px}
.frm .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big{font-size:2.2rem;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.meter{position:relative;height:18px;border-radius:99px;background:linear-gradient(90deg,#dc2626 0 12%,#d97706 12% 20%,#16a34a 20% 60%,#0891b2 60% 88%,#7c3aed 88%);margin:28px 0 8px}
.meter i{position:absolute;top:-8px;width:4px;height:34px;background:var(--text);border-radius:2px;transform:translateX(-2px)}
.meter-l{position:relative;height:16px;font-size:.75rem;color:var(--muted)}
.meter-l span{position:absolute;transform:translateX(-50%)}
@media (max-width:1100px){.diag-stack,.diag-wrap,.calc{grid-template-columns:1fr}.info{position:static}.hero{grid-template-columns:1fr}}
@media (max-width:860px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;inset:0 auto 0 0;width:260px;z-index:1500;transform:translateX(-100%);transition:transform .2s}
  .side.open{transform:none;box-shadow:0 0 40px rgba(0,0,0,.35)}
  .topbar{display:flex;gap:10px;align-items:center;position:sticky;top:0;z-index:1000;background:var(--surface);border-bottom:1px solid var(--line);padding:10px 16px}
  main{padding:18px 16px 50px}
  .course{grid-template-columns:1fr}.mods{position:static;flex-direction:row;overflow-x:auto}.mod{flex:none}
  .mapwrap{grid-template-columns:1fr;height:auto}#map{height:70vh}
  .tbar{grid-template-columns:110px 1fr 50px}
  .diag svg{min-width:640px}
}