/* The demonstration's city: the scene of the product, in the site's own night green. Every rule is under
   .demo-city so nothing here reaches the rest of the site, and none sets a style attribute: the page's
   policy forbids one, and the script only sets styles through the browser's object model. */
.demo-city{position:relative;height:calc(100vh - 76px);min-height:700px;overflow:hidden;background:var(--bg);isolation:isolate;color:var(--fg);font-family:var(--body);font-size:14px;line-height:1.5}
.demo-city [hidden]{display:none !important}
.demo-city{
  --bg:#050812; --panel:rgba(16,39,31,.92); --panel-solid:#10271f; --line:#1d4434; --line-2:#3a6b55;
  --fg:#f2f6f3; --muted:#cde5d8; --dim:#7fa393;
  --cyan:#8eddb6; --teal:#3be3c0; --amber:#ffc24b; --red:#ff5e7a; --blue:#5aa9ff; --white:#e6eef9;
  --display:'Bricolage Grotesque', 'Plus Jakarta Sans', system-ui, sans-serif;
  --body:'Plus Jakarta Sans', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  color-scheme: dark;
}

.demo-city #scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab}

.demo-city #scene.dragging{cursor:grabbing}

.demo-city #labels{position:absolute;inset:0;pointer-events:none;overflow:hidden}

.demo-city .lbl{position:absolute;left:0;top:0;white-space:nowrap;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;color:var(--muted);will-change:transform,opacity;transition:opacity .18s;background:rgba(5,8,18,.8);border:1px solid var(--line);border-radius:4px;padding:3px 7px}

.demo-city .lbl::after{content:"";position:absolute;left:50%;bottom:-5px;width:1px;height:4px;background:currentColor;opacity:.5}

.demo-city .lbl.dept{font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:1.4px;color:var(--fg);text-transform:uppercase;display:flex;align-items:center;gap:7px;padding:4px 9px;border-color:var(--line-2)}

.demo-city .lbl.dept i{width:7px;height:7px;border-radius:50%;flex-shrink:0;box-shadow:0 0 8px currentColor}

.demo-city .lbl.dept small{font-family:var(--mono);font-size:9px;font-weight:400;letter-spacing:.8px;color:var(--muted)}

.demo-city .lbl.dept.held{border-color:rgba(255,94,122,.7)}

.demo-city .lbl.dept.held small{color:var(--red)}

.demo-city .lbl.gate{color:var(--cyan);font-size:9px;letter-spacing:1.8px;border-color:rgba(59,227,245,.35)}

.demo-city .lbl.gate.l3{color:var(--red);border-color:rgba(255,94,122,.45)}

.demo-city .lbl.station{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--fg);font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:0;padding:2px 7px}

.demo-city .lbl.station span{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.4px}

.demo-city .lbl.station.off{color:var(--muted);border-style:dashed}

.demo-city .lbl.station.off span{color:var(--dim)}

.demo-city .lbl.truck{color:var(--red);font-size:9px;letter-spacing:1.4px;background:rgba(26,8,14,.9);border-color:rgba(255,94,122,.6)}

.demo-city .lbl.add{color:var(--cyan);font-size:9px;letter-spacing:1.8px;border-style:dashed;border-color:rgba(59,227,245,.45)}

.demo-city .lbl.sel{border-color:var(--cyan);box-shadow:0 0 14px rgba(59,227,245,.35)}


.demo-city .hud-top{position:absolute;left:16px;top:16px;display:flex;flex-direction:column;gap:10px;max-width:min(420px,calc(100% - 32px))}

.demo-city .hud-tag{align-self:flex-start;font-family:var(--mono);font-size:10px;letter-spacing:1.5px;color:var(--muted);border:1px solid var(--line-2);border-radius:999px;padding:3px 9px}

.demo-city .statuscard{background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px;display:flex;flex-direction:column;gap:8px;backdrop-filter:blur(6px)}

.demo-city .st-head{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500}

.demo-city .st-head .dot{width:8px;height:8px;border-radius:50%;background:var(--teal);box-shadow:0 0 8px var(--teal);flex-shrink:0}

.demo-city .statuscard.alarm{border-color:var(--red)}

.demo-city .statuscard.alarm .dot{background:var(--red);box-shadow:0 0 8px var(--red)}

.demo-city .st-grid{display:grid;grid-template-columns:repeat(3,auto);gap:2px 18px;font-family:var(--mono);font-size:9px;letter-spacing:1.2px;color:var(--muted)}

.demo-city .st-grid b{font-size:11px;font-weight:500;color:var(--fg);letter-spacing:.4px;font-variant-numeric:tabular-nums}

.demo-city .clock{margin-left:auto;font-family:var(--mono);font-size:12px;color:var(--fg);font-variant-numeric:tabular-nums}

.demo-city .log{display:flex;flex-direction:column;font-size:12px}

.demo-city .log-row{display:grid;grid-template-columns:42px 22px 1fr;gap:8px;padding:7px 0;border-top:1px solid var(--line);align-items:baseline}

.demo-city .log-row:first-child{border-top:0}

.demo-city .log-row time{font-family:var(--mono);font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}

.demo-city .log-row .lv0{color:var(--blue)}
 .demo-city .log-row .lv1{color:var(--teal)}
 .demo-city .log-row .lv2{color:var(--amber)}
 .demo-city .log-row .lv3{color:var(--red)}
 .demo-city .log-row .sys{color:var(--muted)}

.demo-city .log-row b{font-family:var(--mono);font-size:10px;font-weight:500}

.demo-city .log-row span{color:var(--fg);line-height:1.4}


.demo-city #gates{position:absolute;top:16px;right:372px;height:44px;padding:0 18px;border-radius:4px;border:1px solid var(--red);background:rgba(255,94,122,.12);color:#ffc3cd;font:600 12px var(--mono);letter-spacing:2px;cursor:pointer;box-shadow:0 0 22px rgba(255,94,122,.25)}

.demo-city #gates[aria-pressed="true"]{background:var(--red);color:#1a060b}

.demo-city #gates:focus-visible,.demo-city .btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}


.demo-city #panel{position:absolute;right:16px;top:16px;bottom:16px;width:340px;background:var(--panel);border:1px solid var(--line);border-radius:8px;overflow-y:auto;backdrop-filter:blur(8px);display:flex;flex-direction:column}

.demo-city #panel section{padding:16px;display:flex;flex-direction:column;gap:10px;border-bottom:1px solid var(--line)}

.demo-city #panel section:last-child{border-bottom:0}

.demo-city .eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--cyan);display:flex;justify-content:space-between;gap:8px}

.demo-city .eyebrow .r{color:var(--red)}

.demo-city .eyebrow .m{color:var(--muted)}

.demo-city #panel h2{margin:0;font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:1px;text-wrap:balance}

.demo-city #panel p{margin:0;color:var(--muted);line-height:1.5;font-size:13px}

.demo-city .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}

.demo-city .stat{border:1px solid var(--line);border-radius:4px;padding:8px;display:flex;flex-direction:column;gap:2px}

.demo-city .stat b{font-family:var(--display);font-size:18px;font-variant-numeric:tabular-nums}

.demo-city .stat span{font-family:var(--mono);font-size:9px;letter-spacing:1px;color:var(--muted)}

.demo-city .chips{display:flex;flex-wrap:wrap;gap:6px}

.demo-city .chip{font-family:var(--mono);font-size:10px;letter-spacing:.5px;padding:4px 8px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg)}

.demo-city .chip.l0{border-color:rgba(90,169,255,.6);color:#a9cdff}

.demo-city .chip.l1{border-color:rgba(59,227,192,.6);color:#9ff3df}

.demo-city .chip.l2{border-color:rgba(255,194,75,.6);color:#ffdc93}

.demo-city .chip.l3{border-color:rgba(255,94,122,.7);color:#ffb0bd}

.demo-city .chip.ok{background:rgba(59,227,192,.14);border-color:rgba(59,227,192,.6);color:#9ff3df}

.demo-city .chip.wait{border-style:dashed;color:var(--muted)}

.demo-city .appr{border:1px solid rgba(255,94,122,.45);background:rgba(28,8,16,.6);border-radius:4px;padding:12px;display:flex;flex-direction:column;gap:10px}

.demo-city .appr-head{display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;color:var(--muted)}

.demo-city .appr-head b{color:var(--red);font-weight:500}

.demo-city .appr .t{font-size:15px;color:var(--fg)}

.demo-city .btns{display:flex;gap:8px}

.demo-city .btn{min-height:44px;flex:1;border-radius:4px;border:1px solid var(--cyan);background:rgba(59,227,245,.12);color:var(--white);font:500 12px var(--mono);letter-spacing:1px;cursor:pointer;padding:0 10px}

.demo-city .btn:hover{background:rgba(59,227,245,.22)}

.demo-city .btn.ghost{border-color:var(--line-2);background:transparent;color:var(--muted);flex:0 0 auto;padding:0 14px}

.demo-city .btn.ghost:hover{color:var(--fg)}

.demo-city .empty{border:1px dashed var(--line-2);border-radius:4px;padding:12px;color:var(--muted);font-size:13px;line-height:1.5}

/* The runs of a district, in the panel: the one place in the scene that leads out of it and onto
   the page where the work actually is. */
.demo-city .runs{display:flex;flex-direction:column}

.demo-city .runs a{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:baseline;padding:9px 0;border-top:1px solid var(--line);color:var(--fg);text-decoration:none;font-size:13px}

.demo-city .runs a:first-child{border-top:0}

.demo-city .runs a:hover .t{color:var(--cyan)}

.demo-city .runs a span{font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--muted);white-space:nowrap}

.demo-city .runs a span.t{font-family:var(--body);font-size:13px;letter-spacing:0;color:inherit;white-space:normal}

.demo-city .runs a span.running{color:var(--cyan)}

.demo-city .runs a span.flag{color:var(--red)}

.demo-city .more{margin:0}

.demo-city .more a{color:var(--cyan);text-decoration:none;font-family:var(--mono);font-size:10px;letter-spacing:1px}

.demo-city .more a:hover{text-decoration:underline}

.demo-city .quest{display:grid;grid-template-columns:18px 1fr auto;gap:10px;align-items:start;font-size:13px}

.demo-city .quest .box{width:14px;height:14px;border:1px solid var(--line-2);border-radius:3px;margin-top:2px}

.demo-city .quest.done .box{background:var(--teal);border-color:var(--teal);box-shadow:0 0 8px var(--teal)}

.demo-city .quest.done .qt{color:var(--muted);text-decoration:line-through}

.demo-city .quest .xp{font-family:var(--mono);font-size:10px;color:var(--cyan);white-space:nowrap}

.demo-city .env{display:flex;flex-direction:column;gap:5px}

.demo-city .env-row{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;font-variant-numeric:tabular-nums}

.demo-city .env-row span:last-child{color:var(--muted)}

.demo-city .seg{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:3px}

.demo-city .seg i{height:8px;background:#12203a}

.demo-city .seg i.on{background:var(--amber);box-shadow:0 0 6px rgba(255,194,75,.5)}

.demo-city .seg.money i.on{background:var(--red);box-shadow:0 0 6px rgba(255,94,122,.5)}

.demo-city ul.plain{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}

.demo-city ul.plain b{color:var(--fg);font-weight:500}


.demo-city .legend{position:absolute;left:16px;bottom:16px;display:flex;flex-direction:column;gap:6px;font-family:var(--mono);font-size:10px;letter-spacing:1.2px;color:var(--muted);background:var(--panel);border:1px solid var(--line);border-radius:6px;padding:10px 12px}

.demo-city .legend span{display:flex;align-items:center;gap:8px}

.demo-city .legend i{width:14px;height:6px;border-radius:2px;display:inline-block}

.demo-city .legend .hint{color:var(--dim);margin-top:4px}


.demo-city #toasts{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);display:flex;flex-direction:column-reverse;align-items:center;gap:8px;pointer-events:none;width:min(420px,calc(100% - 32px))}

.demo-city .toast{background:var(--panel-solid);border:1px solid var(--cyan);border-radius:4px;padding:10px 14px;font-size:13px;display:flex;gap:10px;align-items:center;box-shadow:0 0 24px rgba(59,227,245,.25);animation:tin .35s ease-out}

.demo-city .toast b{font-family:var(--mono);font-size:11px;color:var(--cyan);letter-spacing:1px;white-space:nowrap}

.demo-city .toast.warn{border-color:var(--red);box-shadow:0 0 24px rgba(255,94,122,.25)}

.demo-city .toast.warn b{color:var(--red)}

@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.demo-city #frozen{position:absolute;left:50%;top:16px;transform:translateX(-50%);background:rgba(26,6,11,.92);border:1px solid var(--red);color:#ffc3cd;font-family:var(--mono);font-size:11px;letter-spacing:2px;padding:10px 16px;border-radius:4px;text-align:center;max-width:calc(100% - 32px)}

.demo-city #nowebgl{position:absolute;inset:0;display:grid;place-items:center;padding:16px;text-align:center;color:var(--muted)}


@media (max-width: 1100px){ .demo-city #gates{right:auto;left:16px;top:auto;bottom:16px}
 .demo-city .legend{display:none}
 }

@media (max-width: 760px){
  .demo-city .hud-top{gap:8px}

  .demo-city #panel{left:0;right:0;top:auto;bottom:0;width:auto;max-height:44%;border-radius:12px 12px 0 0;border-left:0;border-right:0;border-bottom:0;padding-bottom:env(safe-area-inset-bottom,0px)}

  .demo-city #gates{bottom:auto;top:16px;left:auto;right:16px;height:40px;padding:0 12px;font-size:10px}

  .demo-city #toasts{bottom:calc(44% + 12px)}

  .demo-city .hud-top{max-width:calc(100% - 150px)}

  .demo-city .statuscard{padding:8px 10px}

  .demo-city .st-grid{gap:2px 12px}

}

@media (prefers-reduced-motion: reduce){ .demo-city .toast{animation:none}
 }


/* Colours that used to be written as style attributes on the elements themselves. They are here
   because the page's policy forbids an inline style: the city may run our script, and that is the
   only thing it may do differently from the rest of the site. */
.demo-city .lbl.dept.off{opacity:.75}

.demo-city .lbl.dept.off .plot,.demo-city .lbl.dept.off small{color:var(--dim)}










.demo-city .stat b.r{color:var(--red)}

.demo-city .legend i.sw-white{background:var(--white)}

.demo-city .legend i.sw-blue{background:var(--blue)}

.demo-city .legend i.sw-teal{background:var(--teal)}

.demo-city .legend i.sw-amber{background:var(--amber)}

.demo-city .legend i.sw-red{background:var(--red);height:8px;width:18px}

.demo-city .stat b.on{color:var(--teal)}


.demo-city .lbl.dept i.d-product{background:#ff9ad5;color:#ff9ad5}
.demo-city .lbl.dept i.d-quality{background:#9be7ff;color:#9be7ff}
.demo-city .lbl.dept i.d-acceptance{background:#7dffb2;color:#7dffb2}
.demo-city .lbl.dept i.d-support{background:#ffd27a;color:#ffd27a}
.demo-city .lbl.dept i.d-billing{background:#b79cff;color:#b79cff}
.demo-city .lbl.dept i.d-delivery{background:#dfe8ff;color:#dfe8ff}
.demo-city .lbl.dept i.d-collections{background:#ffc24b;color:#ffc24b}
.demo-city .lbl.dept i.d-development{background:#8fa8ff;color:#8fa8ff}
.demo-city .lbl.dept i.d-functional{background:#7de0d0;color:#7de0d0}

.demo-city #gates{right:372px}
.demo-city .chips{margin:0}
.demo-city .chip{background:transparent;font-weight:400;padding:4px 8px;font-size:10px}
.demo-city .chip.ok{background:rgba(59,227,192,.14)}
.demo-fallback{padding:24px 0 8px}
.demo-fallback[hidden]{display:none}

/* Framed in How it works: the scene alone, the full frame, nothing to click. */
.demo-city.embed{height:100vh;min-height:0}
.demo-city.embed #scene{cursor:default;pointer-events:none}
.demo-city.embed .embed-hidden{display:none}