/* Add after the existing app styles. Only .nw-* and .network-ui are styled. */
.network-ui{--nw-ink:#193c36;--nw-green:#137463;--nw-wall:#375f4c;--nw-focus:#244ac6;color:var(--nw-ink);font-family:inherit;max-width:100%;box-sizing:border-box}
.network-ui *{box-sizing:border-box}
.network-ui button{font:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;cursor:pointer}
.network-ui button:focus-visible{outline:3px solid var(--nw-focus);outline-offset:-3px;z-index:5}
.nw-trail-frame{background:#abc683;padding:9px;border:6px solid #e3edcb;border-radius:24px;box-shadow:0 7px 0 #98b282;max-width:420px;margin:auto}
.nw-trail-grid{display:grid;grid-template-columns:repeat(var(--nw-cols),minmax(48px,1fr));grid-template-rows:repeat(var(--nw-rows),minmax(48px,1fr));aspect-ratio:var(--nw-cols)/var(--nw-rows);position:relative;border:4px solid var(--nw-wall);border-radius:5px;background:#f9f2d9;isolation:isolate;overflow:hidden}
.nw-trail-cell{position:relative;min-width:48px;min-height:48px;border:0;background:#fff7dd;padding:5px;display:grid;place-items:center;border-radius:0;color:var(--nw-green);box-shadow:inset 0 0 0 1px #f0e8cc}
.nw-trail-cell:nth-child(2n){background:#f8f0d4}
.nw-trail-cell.nw-legal{background:#e3efbc}
.nw-trail-cell.nw-here{background:#ffe4b6}
.nw-trail-cell.nw-goal{background:#d2eacf}
.nw-trail-cell .nw-explorer,.nw-trail-cell .nw-home{width:min(80%,58px);height:auto;position:absolute;z-index:2;pointer-events:none}
.nw-trail-cell.nw-here.nw-goal .nw-home{width:42%;right:2px;top:1px;opacity:.55}
.nw-trail-cell.nw-here.nw-goal .nw-explorer{left:4px;bottom:2px;width:72%}
.nw-step-mark{font-size:20px;line-height:1;color:#387028;pointer-events:none}
.nw-goal .nw-step-mark{position:absolute;bottom:2px;right:4px;font-size:12px;z-index:3}
.nw-maze-walls{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;fill:none;stroke:var(--nw-wall);stroke-width:5;stroke-linecap:square}
.nw-maze-walls path{vector-effect:non-scaling-stroke}
.nw-hinted{outline:4px solid var(--nw-focus)!important;outline-offset:-5px}
.nw-hint-star{position:absolute;right:3px;top:0;font-size:21px;color:var(--nw-focus);z-index:5}
.nw-caption{font-size:12px;text-align:center;line-height:1.5;margin:18px 0 4px;color:#42614e}
.nw-caption>span{font-weight:800;margin-right:5px}
.nw-bridge-frame{background:#c2e9f0;border:5px solid #e2f2f4;border-radius:23px;padding:9px;box-shadow:0 7px 0 #a5c9d0;max-width:420px;margin:auto}
.nw-bridge-grid{display:grid;position:relative;grid-template-columns:repeat(var(--nw-cols),minmax(48px,1fr));grid-template-rows:repeat(var(--nw-rows),minmax(48px,1fr));aspect-ratio:var(--nw-cols)/var(--nw-rows);isolation:isolate}
.nw-bridge-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:-1;overflow:visible}
.nw-connection{fill:none;stroke-linecap:round}
.nw-connection-built{stroke:#8e622f;stroke-width:.065}
.nw-connection-empty{stroke:#659dac;stroke-width:.025;stroke-dasharray:.06 .10;opacity:.7}
.nw-island{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:center;justify-self:center;aspect-ratio:1;width:100%;max-width:69px;min-width:48px;min-height:48px;border:2px solid #d7ad68;border-radius:50%;background:#fff4cd;box-shadow:0 4px #a7bcb0,inset 0 3px #fffbed;line-height:1.1;z-index:2}
.nw-island-target{font-size:25px;color:#684a25;line-height:1}
.nw-island-total{font-size:10px;font-weight:800;color:#664f30;white-space:nowrap;margin-top:3px}
.nw-island-id{position:absolute;left:-1px;top:-3px;display:grid;place-items:center;border-radius:50%;background:#376d76;color:white;font-weight:800;font-size:9px;width:16px;height:16px;border:1px solid #e2f2f4}
.nw-island-met{background:#def3c7;border-color:#669b55}
.nw-island-met .nw-island-target,.nw-island-met .nw-island-total{color:#315a28}
.nw-edge{width:48px;height:48px;min-width:48px;min-height:48px;border:0;background:transparent;align-self:center;justify-self:center;padding:5px;position:relative;border-radius:11px;z-index:3;color:#315e68;display:grid;place-items:center}
.nw-edge-face{display:flex;align-items:center;justify-content:center;gap:3px;line-height:1;width:38px;height:34px;border-radius:10px;background:#eef9f8;border:1px solid #8fbcc3;box-shadow:0 3px #7eabb3}
.nw-edge-face>span{font-size:15px;font-weight:900}
.nw-edge-face>b{font-size:12px}
.nw-edge-built .nw-edge-face{background:#f3d594;border-color:#b58a4a;color:#624624;box-shadow:0 3px #9e834c}
.nw-edge.nw-selected .nw-edge-face{border:2px solid #176f73}
.nw-edge.nw-hinted{background:#f6f6ff}
.nw-edge-editor{max-width:420px;margin:18px auto 0;display:flex;gap:8px;justify-content:space-between;align-items:center}
.nw-edge-label{font-size:11px;line-height:1.45;margin:0;min-width:0}
.nw-edge-label b{display:block;font-size:12px}
.nw-edge-label>span{display:block;max-width:145px;margin-top:3px;color:#4c6e65}
.nw-count-choices{display:flex;gap:5px;flex:none}
.nw-count-choice{min-width:48px;width:48px;min-height:48px;height:48px;padding:5px 2px;background:white;border:1px solid #a0bfb3;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;color:#335e4e;line-height:1.1}
.nw-count-choice>span{font-size:18px;line-height:1}.nw-count-choice>b{font-size:12px}
.nw-count-choice.nw-current{background:#def0e1;border:2px solid #18785e}
.nw-network-status{font-size:11px;line-height:1.5;display:flex;align-items:center;gap:8px;background:#e8f3ed;padding:10px 12px;border-radius:12px;max-width:420px;margin:12px auto 0}
.nw-status-symbol{font-size:16px;font-weight:850;white-space:nowrap}
.nw-instructions{font-size:12px;line-height:1.55}
.nw-instructions ol{padding-left:20px;margin:12px 0}
.nw-instructions li{margin:8px 0}
.nw-example{display:flex;align-items:center;justify-content:center;gap:9px;min-height:65px;padding:12px 6px;background:#e7f1da;border-radius:14px;font-weight:800}
.nw-example .nw-explorer,.nw-example .nw-home{width:43px;height:43px;flex:none}
.nw-example-open{width:34px;height:38px;display:grid;place-items:center;background:#f9f1d6;color:#39752f;border-radius:8px}
.nw-bridge-example{background:#e3f2f7;gap:5px;flex-wrap:wrap}
.nw-bridge-example i{width:4px}
.nw-demo-island{width:27px;height:27px;border-radius:50%;background:#fff2c6;border:1px solid #c5a36b;display:grid;place-items:center;font-size:16px}
.nw-keyboard-note{font-size:11px;color:#557265}
.nw-print-rule{display:none}
@media(max-width:360px){.nw-trail-frame{padding:6px;border-width:5px}.nw-bridge-frame{padding:6px;border-width:4px}.nw-island-target{font-size:23px}.nw-island-total{font-size:9px}.nw-edge-editor{gap:5px}.nw-edge-label b{font-size:11px}.nw-edge-label>span{font-size:10px}.nw-count-choices{gap:3px}.nw-caption{font-size:11px}}
@media print{.network-ui{color:#111;break-inside:avoid;print-color-adjust:exact;-webkit-print-color-adjust:exact}.nw-trail-frame,.nw-bridge-frame{width:118mm;max-width:100%;box-shadow:none;border:1px solid #555;padding:4mm;background:white;border-radius:4mm}.nw-trail-cell{box-shadow:none}.nw-trail-cell.nw-legal,.nw-trail-cell.nw-here,.nw-trail-cell.nw-goal{background:#fff7dd}.nw-edge,.nw-edge-editor,.nw-network-status,.nw-caption,.nw-step-mark,.nw-hint-star,.nw-keyboard-note,.nw-touch-rule{display:none!important}.nw-connection-empty{stroke:#8b8b8b;opacity:.6}.nw-connection-built{stroke:#333}.nw-hinted{outline:none!important}.nw-island{box-shadow:none;border-color:#555}.nw-island-id{background:white;color:#222;border-color:#555}.nw-print-rule{display:block}.nw-example{background:white;border:1px solid #ddd}.nw-trail-grid,.nw-bridge-grid{overflow:visible}}