:root{--bg: #07080f;--panel: #0c0e16;--chrome: #94a3b8;--cyan: #38bdf8;--amber: #fbbf24;--violet: #a78bfa;--slate: #94a3b8;--breach: #f87171;--good: #4ade80;--text: #e2e8f0;--muted: #64748b;--cell: 80px;font-family:Segoe UI,system-ui,sans-serif}*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--text)}#app{min-height:100%;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid #1e2433;background:linear-gradient(180deg,#10131c,#0a0c14)}.brand{font-weight:700;letter-spacing:.04em;color:var(--cyan)}.stat{display:flex;align-items:center;gap:6px;font-variant-numeric:tabular-nums}.stat .label{color:var(--muted);font-size:12px;text-transform:uppercase}.stat .val{font-weight:600}.stat.signal .val{color:var(--cyan)}.stat.insight .val{color:var(--violet)}.stat.rate .val{color:var(--amber)}.layout{flex:1;display:grid;grid-template-columns:220px minmax(0,1fr) minmax(360px,420px);gap:12px;padding:12px;max-width:1360px;margin:0 auto;width:100%}@media(max-width:960px){.layout{grid-template-columns:1fr}}.panel{background-color:var(--panel);background-size:cover;background-position:center top;background-repeat:no-repeat;border:1px solid #1e2433;border-radius:10px;padding:12px;position:relative;overflow:visible}.panel:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0c0e168c,#0c0e16eb);pointer-events:none}.panel>*{position:relative;z-index:1}.panel h2{margin:0 0 8px;font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:var(--chrome);display:flex;align-items:center;gap:8px}.modes{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}.modes button,.palette button,.side-btn,.dev-panel button{background:#151a28;color:var(--text);border:1px solid #2a3348;border-radius:6px;padding:6px 10px;cursor:pointer;font-size:13px}.modes button.active{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 0 1px var(--cyan)}.modes button:hover,.palette button:hover,.side-btn:hover{border-color:var(--chrome)}.palette{display:flex;flex-direction:column;gap:6px}.palette button{display:flex;align-items:center;gap:8px;text-align:left;width:100%}.palette button.selected{border-color:var(--amber)}.palette .cost{margin-left:auto;color:var(--cyan);font-variant-numeric:tabular-nums}.palette .blurb{display:block;font-size:11px;color:var(--muted)}.board-wrap{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px}.board-panel{width:100%;min-height:420px}.board{position:relative;display:grid;grid-template-columns:repeat(6,var(--cell));grid-template-rows:repeat(6,var(--cell));gap:6px;padding:10px;margin:0 auto;background:#00000059;border-radius:8px;border:1px solid #1e2433}.cell{width:var(--cell);height:var(--cell);border:1px dashed #1e293b;border-radius:8px;position:relative;cursor:pointer;background:#0f172a80;padding:4px}.cell:hover{border-color:var(--cyan);background:#38bdf814}.cell.has-node{border-style:solid;border-color:#334155}.cell.bottleneck{box-shadow:inset 0 0 0 2px var(--breach)}.cell.selected{box-shadow:0 0 0 2px var(--amber)}.cell .sprite{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;pointer-events:none}.cell .thru{position:absolute;bottom:2px;right:3px;font-size:9px;color:var(--amber);font-variant-numeric:tabular-nums;text-shadow:0 0 4px #000}.wires-svg{position:absolute;top:10px;right:10px;bottom:10px;left:10px;width:calc(6 * var(--cell) + 5 * 6px);height:calc(6 * var(--cell) + 5 * 6px);pointer-events:none;z-index:2}.motes-layer{position:absolute;top:10px;right:10px;bottom:10px;left:10px;width:calc(6 * var(--cell) + 5 * 6px);height:calc(6 * var(--cell) + 5 * 6px);pointer-events:none;z-index:3;overflow:hidden}.mote{position:absolute;width:12px;height:12px;background-image:url(/art/flow-mote.webp);background-position:center;background-size:contain;background-repeat:no-repeat;margin:-6px 0 0 -6px;opacity:.9}.mote.amber{background-image:url(/art/flow-mote-amber.webp)}.mote.breach{background-image:url(/art/flow-mote-breach.webp)}.breach-flash{position:absolute;top:0;right:0;bottom:0;left:0;z-index:5;pointer-events:none;background:url(/art/breach-overlay.webp) center/cover no-repeat;opacity:0;transition:opacity .25s;mix-blend-mode:screen}.breach-flash.on{opacity:.55;animation:pulse 1.2s ease-in-out infinite}@keyframes pulse{50%{opacity:.75}}.hint{font-size:12px;color:var(--muted);text-align:center;min-height:1.4em}.hint.warn{color:var(--breach)}.cap-block{margin-top:10px;padding-bottom:4px}.cap-frame{width:100%;max-width:360px;height:36px;margin:6px auto;background-image:url(/art/cap-meter-frame.webp);background-position:center;background-size:100% 100%;background-repeat:no-repeat;position:relative;image-rendering:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}.cap-frame.ready{background-image:url(/art/cap-meter-ready.webp)}.cap-frame.cleared{background-image:url(/art/cap-meter-cleared.webp)}.cap-fill{position:absolute;left:8px;top:8px;bottom:8px;width:calc(var(--fill, 0) * (100% - 16px));background:linear-gradient(90deg,var(--amber),#f59e0b);border-radius:4px;transition:width .15s}.cap-frame.ready .cap-fill{background:linear-gradient(90deg,var(--breach),#fb7185)}.cap-label{text-align:center;font-size:13px;color:var(--amber);white-space:normal;overflow:visible;word-break:break-word;line-height:1.35;padding:0 2px}.cap-label.cap-title{font-weight:700;color:var(--text);font-size:13px}.cap-label.cap-status{color:var(--amber)}.cap-label.cap-status.ready{color:var(--breach);font-weight:700}.cap-label.cap-status.cleared{color:var(--good);font-weight:700}.cap-block{overflow:visible;min-width:0}.breach-bar{height:8px;background:#1e293b;border-radius:4px;overflow:hidden;margin:6px 0}.breach-bar>i{display:block;height:100%;width:calc(var(--p, 0) * 100%);background:var(--breach);transition:width .1s}.law-item,.tech-item,.mod-row{display:flex;gap:8px;align-items:flex-start;padding:8px;margin-bottom:6px;background:#00000059;border-radius:6px;border:1px solid #1e2433;font-size:12px}.laws-list{display:flex;flex-direction:column;gap:6px;max-height:none;overflow:visible}.law-item{padding:8px 10px;margin-bottom:0;min-width:0}.law-item .law-body{flex:1;min-width:0}.law-item .name{color:var(--violet);font-weight:700;font-size:13px;white-space:normal;overflow-wrap:anywhere;line-height:1.3}.law-item .law-one{color:var(--text);opacity:.88;margin-top:2px;white-space:normal;overflow-wrap:anywhere;line-height:1.35}.law-item .codex{margin-top:4px;white-space:normal;overflow-wrap:anywhere;line-height:1.4;max-height:none;overflow:visible}.law-item.locked{opacity:.72}.law-item.locked .name{color:#c4b5fd}.law-item.locked .law-one{color:var(--muted);font-style:italic}.law-item.discovered{border-color:#4c1d95}.tech-item button{margin-left:auto}.panel-laws{overflow:visible}.panel-cap,.panel-caps{overflow:visible;background-size:cover;background-position:center;background-repeat:no-repeat}.toasts{position:fixed;top:56px;right:16px;z-index:50;display:flex;flex-direction:column;gap:8px;max-width:320px}.toast{background:#12161f;border:1px solid #334155;border-radius:8px;padding:10px 12px;box-shadow:0 8px 24px #00000073;animation:in .25s ease}.toast.law{border-color:var(--violet)}.toast.breach{border-color:var(--breach)}.toast.offline{border-color:var(--cyan)}.toast .t-title{font-weight:700;font-size:13px;display:flex;gap:6px;align-items:center}.toast .t-body{font-size:12px;color:var(--muted);margin-top:4px}@keyframes in{0%{transform:translate(12px);opacity:0}}.dev-panel{margin-top:12px;padding:8px;border:1px dashed #7f1d1d;border-radius:6px;background:#7f1d1d26}.dev-panel h3{margin:0 0 6px;font-size:11px;color:var(--breach)}.dev-panel .row{display:flex;flex-wrap:wrap;gap:4px}.codex{font-size:11px;color:var(--muted);font-style:italic;margin-top:8px;line-height:1.4}.era2-door-banner,.era2-stub{margin-top:8px;padding:8px;border:1px dashed var(--violet);border-radius:6px;font-size:12px;color:var(--violet)}.guide-glow{animation:guide-pulse 1.1s ease-in-out infinite;border-color:var(--amber)!important;box-shadow:0 0 0 2px #fbbf248c,0 0 18px #fbbf2459}.guide-cell{animation:guide-pulse 1.1s ease-in-out infinite;border-color:var(--amber)!important;background:#fbbf241f!important}@keyframes guide-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.25)}}.teach,.teach-hint{color:var(--amber);font-weight:600;font-size:12px;text-align:center;margin:8px 0 0}.cell.hot{box-shadow:inset 0 0 0 2px #f97316,0 0 12px #f9731673}.cell.warm{box-shadow:inset 0 0 0 1px #fb923c}.heat-pip,.lag-pip{position:absolute;top:3px;left:4px;font-size:10px;font-weight:700;letter-spacing:.04em;text-shadow:0 0 4px #000}.heat-pip{color:#fb923c}.lag-pip{color:#c4b5fd;left:auto;right:3px}.pattern-tag{display:inline-block;margin-left:4px;padding:1px 5px;font-size:9px;border-radius:4px;background:#312e81;color:#c4b5fd;vertical-align:middle}.pattern-mod{border-color:#6366f1!important}.cap-frame.cleared .cap-fill{width:0!important;background:linear-gradient(90deg,#166534,var(--good))}.cap-frame.cleared{outline:1px solid #166534}.cap-cleared{color:var(--good);font-size:12px;text-align:center;font-weight:700}.cap-frame.empty .cap-fill{width:0}.cell.route-from{box-shadow:0 0 0 2px var(--cyan)}.cell.route-target{animation:route-target-pulse 1s ease-in-out infinite;border-style:dashed!important;border-color:var(--cyan)!important;box-shadow:0 0 0 2px #38bdf8a6,0 0 16px #38bdf866}.cell.route-candidate{animation:route-candidate-pulse 1.6s ease-in-out infinite;box-shadow:0 0 0 1px #38bdf866}@keyframes route-target-pulse{0%,to{filter:brightness(1)}50%{filter:brightness(1.22)}}@keyframes route-candidate-pulse{0%,to{box-shadow:0 0 0 1px #38bdf847}50%{box-shadow:0 0 0 2px #38bdf88c}}.wires-svg line.route-preview{pointer-events:none}.cell.warm{box-shadow:inset 0 0 0 2px #fbbf24,0 0 10px #fbbf2459}.cell.hot{box-shadow:inset 0 0 0 2px #f97316,0 0 14px #f9731680}.cell.burn{box-shadow:inset 0 0 0 2px #ef4444,0 0 18px #ef4444a6;animation:burn-pulse .7s ease-in-out infinite}@keyframes burn-pulse{50%{filter:brightness(1.2)}}.cell.lag{outline:1px dashed #a78bfa}.cell.heavy{outline:2px dashed #8b5cf6}.cell.crush{outline:2px solid #7c3aed}.heat-pip.warm{color:#fbbf24}.heat-pip.hot{color:#fb923c}.heat-pip.burn{color:#f87171}.warn-host{margin-top:10px;min-height:0}.sticky-primary{min-height:1.35em;font-weight:700;margin:0;white-space:normal;overflow-wrap:anywhere;line-height:1.35}.sticky-primary.sticky-heat.heat-warm,.sticky-heat.heat-warm{color:#fbbf24}.sticky-primary.sticky-heat.heat-hot,.sticky-heat.heat-hot{color:#fb923c}.sticky-primary.sticky-heat.heat-burn,.sticky-heat.heat-burn{color:#f87171}.sticky-primary.era2-scarcity,.sticky-era2.era2-scarcity{color:#7dd3fc}.sticky-primary.era2-phase,.sticky-era2.era2-phase{color:#c4b5fd}.sticky-primary.era2-pressure,.sticky-era2.era2-pressure{color:#fda4af}.sticky-primary.era2-latency,.sticky-era2.era2-latency{color:#a78bfa}.next-verb{margin:8px 0 10px;padding:8px 10px;border:1px solid var(--amber);border-radius:6px;background:#fbbf241a;font-size:12px;color:var(--amber);text-align:center}.next-verb.era2-door,.era2-door{border-color:var(--violet);color:var(--violet);background:#8b5cf61f}