:root{color-scheme:dark;--bg:#101827;--panel:#19263a;--line:#405771;--text:#edf3fa;--muted:#b8cada;--cyan:#78d6e8;--orange:#ffc179;--violet:#c59bff;--gold:#ffe4a0}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:16px/1.65 system-ui,sans-serif}main{max-width:1450px;margin:auto;padding:24px}a{color:#96ddff}nav{display:flex;flex-wrap:wrap;gap:12px 24px;font-size:14px}.eyebrow{color:var(--gold);font-size:12px;text-transform:uppercase;letter-spacing:.1em;margin:26px 0 8px}h1{font-size:clamp(28px,4vw,44px);line-height:1.2;margin:8px 0 16px}h2{line-height:1.3;font-size:25px;margin:30px 0 14px}h3{font-size:18px;margin:0 0 10px}.intro{max-width:1000px;color:var(--muted)}p{margin:12px 0}code{font-size:.94em;color:#fff0c6;overflow-wrap:anywhere}.workbench{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;margin-top:28px;align-items:start}.visual{min-width:0}.packet-scene{position:relative;height:610px;background:#101827;border:1px solid var(--line);border-radius:14px;overflow:hidden}.packet-scene canvas{position:absolute;inset:0;display:block;touch-action:none;width:100%;height:100%}.packet-scene > img{width:100%;height:100%;object-fit:contain}.scene-caption{position:absolute;bottom:12px;left:16px;pointer-events:none;font-size:12px;color:var(--muted);background:#101827d9;padding:5px 8px;border-radius:5px}.scene-status{position:absolute;top:8px;left:16px;right:16px;background:#19263aeb;padding:10px;font-size:13px;border-radius:7px;z-index:1}.legend{display:flex;gap:6px 18px;flex-wrap:wrap;font-size:12px}.cyan{color:var(--cyan)}.orange{color:var(--orange)}.violet{color:var(--violet)}.gold{color:var(--gold)}.green{color:#9bf0bd}aside{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;min-width:0}aside h2{font-size:21px;margin:0 0 18px}label{display:block;font-size:14px}select,button{font:inherit;background:#24364f;border:1px solid #526b87;border-radius:7px;padding:9px;color:var(--text)}select{width:100%;margin:5px 0 8px}button{cursor:pointer;font-size:14px}button:hover{background:#324b6a}:focus-visible{outline:3px solid var(--gold);outline-offset:3px}input{accent-color:var(--cyan)}input[type=range]{width:100%;display:block;margin:10px 0 14px}input[type=checkbox]{margin-right:8px}.options{display:grid;gap:7px;margin:16px 0}.small{color:var(--muted);font-size:13px}.transport{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}.route-detail{font-family:ui-monospace,monospace;font-size:13px;line-height:1.8;padding:10px;background:#101827;border-radius:7px;min-height:76px;overflow-wrap:anywhere}.route-detail .route-a{color:var(--cyan)}.route-detail .route-b{color:var(--orange)}output{color:var(--gold);margin-left:8px;font-variant-numeric:tabular-nums}.discussion{max-width:1100px;margin:36px auto}.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.cards article,.dimension-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px}.cards p{font-size:15px;color:var(--muted)}.dimension-panel{max-width:750px;margin:24px 0}.formula{overflow-wrap:anywhere;font-family:ui-monospace,monospace;font-size:15px;padding:14px;background:#19263a;border-left:3px solid var(--cyan)}.count-products{color:var(--gold);font-weight:650;font-variant-numeric:tabular-nums}details{border:1px solid var(--line);border-radius:9px;padding:16px;margin:24px 0}summary{cursor:pointer}figure{margin:16px 0}figure img{display:block;width:min(100%,480px);height:auto;border-radius:8px}figcaption{font-size:13px;color:var(--muted)}footer{border-top:1px solid var(--line);padding:20px 0;color:var(--muted);font-size:13px}.tetrahedral-section{border-top:1px solid var(--line);margin-top:32px;padding-top:10px}.tetrahedral-section>p{max-width:1100px}#electron-controls{border:0;padding:0;margin:0;min-width:0}#electron-controls:disabled{opacity:.6}.packet-table{overflow:auto}.packet-table table{border-collapse:collapse;width:100%;font-size:13px}.packet-table td,.packet-table th{border:1px solid var(--line);padding:8px;text-align:left}.packet-table td{font-family:ui-monospace,monospace;overflow-wrap:anywhere}#electron .formula{font-size:14px}[hidden]{display:none!important}@media(max-width:950px){.workbench{grid-template-columns:1fr}.packet-scene{height:510px}aside{display:block}.cards{grid-template-columns:1fr}}@media(max-width:540px){main{padding:15px}.packet-scene{height:400px}.intro{font-size:15px}nav{font-size:13px}h2{font-size:22px}.workbench{margin-top:20px;gap:12px}.discussion{margin-top:24px}.legend{font-size:11px}.formula{font-size:13px}}