/* Layout: one fixed 1600x900 stage scaled to the viewport; four laptop screens in the corners,
   the network in the middle, the director strip along the bottom. Tokens follow the project's paper/ink system. */
:root{--bg:#f4f2eb;--paper:#fffefa;--panel:#ecece3;--ink:#222923;--muted:#687065;--line:#d8d9d0;--soft:#e9e9df;--accent:#db4b25;--olive:#5c6c50;--red:#a53623;--screen:#1d221e;--screen-fg:#e9ebe2;--screen-dim:#9aa392;--good:#8fb37a;--warn:#f0b36d;
  --display:Georgia,"Times New Roman",serif;--body:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;--mono:Consolas,"SF Mono",Menlo,monospace}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#15181a;--paper:#1f2325;--panel:#262b2c;--ink:#ecebe3;--muted:#a3a89b;--line:#3a403d;--soft:#2d3331;--accent:#ef7a55;--olive:#9bb485;--red:#e2846f;--screen:#0e1110;--screen-fg:#eef0e8;--screen-dim:#8d968a;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#15181a;--paper:#1f2325;--panel:#262b2c;--ink:#ecebe3;--muted:#a3a89b;--line:#3a403d;--soft:#2d3331;--accent:#ef7a55;--olive:#9bb485;--red:#e2846f;--screen:#0e1110;--screen-fg:#eef0e8;--screen-dim:#8d968a;color-scheme:dark}
html,body{height:100%}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.45 var(--body);overflow:hidden}
.film{position:relative;width:100%;height:100%;min-height:100vh;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));padding-block:8px;box-sizing:border-box;overflow:hidden}
.film-noscript{padding:20px}
.viewport{position:absolute;left:50%;top:50%;width:1600px;height:900px;transform-origin:center center;transform:translate(-50%,-50%)}
.stage{position:absolute;inset:0;overflow:hidden;background:var(--bg)}
.world{position:absolute;inset:0;transform-origin:0 0;transition:transform .7s cubic-bezier(.4,0,.2,1)}
@media (prefers-reduced-motion:reduce){.world{transition:none}}
/* top bar */
.top{position:absolute;left:0;right:0;top:0;height:72px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:0 28px;border-bottom:1px solid var(--line);background:var(--bg)}
.brand{display:flex;align-items:center;gap:12px}.brandmark{display:grid;place-items:center;width:40px;height:44px;background:var(--ink);color:var(--bg);font:34px/1 var(--display)}.brand strong{display:block;font-size:19px;letter-spacing:-.03em}.brand small{font-size:10px;letter-spacing:.18em;color:var(--muted)}
.chapter{text-align:center;min-width:0}.chapter small{display:block;font-size:10px;letter-spacing:.16em;color:var(--accent);font-weight:650}.chapter strong{display:block;font:22px var(--display);letter-spacing:-.02em;text-wrap:balance}
.totals{display:flex;gap:22px}.totals div{display:grid;gap:2px;text-align:right}.totals span{font-size:9px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.totals strong{font:22px var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
/* map */
.map{position:absolute;left:330px;top:88px;width:940px;height:560px}
.map svg{width:100%;height:100%;display:block}
.lk{fill:none;stroke:var(--line);stroke-width:2.5}.lk-main{stroke:var(--muted);stroke-width:3.5}
.nd-box{fill:var(--paper);stroke:var(--line);stroke-width:1.8}.nd.off .nd-box{stroke-dasharray:6 5}.nd.on .nd-box{stroke:var(--olive);stroke-width:2.4}.nd-hub .nd-box{fill:var(--ink);stroke:var(--ink)}.nd-hub .nd-name{fill:var(--bg)}.nd-hub .nd-sub,.nd-hub .nd-held{fill:var(--screen-dim)}
.nd-name{font:600 18px var(--body);fill:var(--ink)}.nd-sub{font:12px var(--body);fill:var(--muted)}.nd-held{font:11px var(--mono);fill:var(--olive)}
.nd.arrive .nd-box{stroke:var(--accent);stroke-width:4;filter:drop-shadow(0 0 7px rgba(219,75,37,.55))}.nd.reject .nd-box{stroke:var(--red);stroke-width:4;filter:drop-shadow(0 0 8px rgba(165,54,35,.7))}.nd.join .nd-box{stroke:var(--olive);stroke-width:4;filter:drop-shadow(0 0 9px rgba(92,108,80,.7))}
.pk circle{stroke:var(--paper);stroke-width:2;fill:var(--muted)}.pk.sealed circle{fill:var(--olive)}.pk.money circle{fill:var(--accent)}.pk.internal circle{fill:#8b94a8}.pk.tamper circle{fill:var(--red)}.pk.dup circle{fill:#d9ac95;opacity:.85}
.pk-lock{fill:none;stroke:var(--paper);stroke-width:1.4}.pk-x{font:700 12px var(--body);fill:var(--paper);text-anchor:middle}
.pk-label{font:600 12px var(--body);fill:var(--ink);text-anchor:middle;paint-order:stroke;stroke:var(--bg);stroke-width:4px;stroke-linejoin:round}
/* laptop screens */
.laptop{position:absolute;width:318px;height:236px;display:flex;flex-direction:column;filter:drop-shadow(0 10px 18px rgba(0,0,0,.18))}
.laptop.tl{left:14px;top:92px}.laptop.bl{left:14px;top:430px}.laptop.tr{right:14px;top:92px}.laptop.br{right:14px;top:430px}
.lid{flex:1;background:#2a2d2b;border-radius:10px 10px 3px 3px;padding:9px 9px 6px;display:flex;flex-direction:column;min-height:0}
.screen{flex:1;background:var(--screen);color:var(--screen-fg);border-radius:4px;padding:9px 10px;display:grid;grid-template-rows:auto auto 1fr auto;gap:5px;font-size:10.5px;min-height:0;position:relative;overflow:hidden}
.base{height:11px;background:#3a3d3a;border-radius:0 0 8px 8px;margin:0 -6px}.laptop.off{opacity:.28}.laptop.off .screen *{visibility:hidden}.laptop.off .screen:after{content:'not connected';visibility:visible;position:absolute;inset:0;display:grid;place-items:center;color:var(--screen-dim);font:11px var(--mono)}
.sc-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}.sc-head strong{font:600 15px var(--body)}.sc-head span{font:9px var(--mono);color:var(--screen-dim);text-align:right}
.sc-held{border:1px dashed #4a524a;padding:5px 7px;display:grid;gap:3px;position:relative}.sc-held span{font:9px var(--mono);color:var(--screen-dim);letter-spacing:.08em}.sc-held strong{font:600 11px var(--body)}.sc-held small{font:9px var(--mono);color:var(--screen-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stamp{position:absolute;right:6px;top:4px;font:8px var(--mono);letter-spacing:.14em;color:#f3a08f;border:1px solid #f3a08f;padding:1px 4px;transform:rotate(-5deg)}
.sc-next{display:grid;gap:3px;min-height:0}.sc-next span{font:9px var(--mono);color:var(--screen-dim);letter-spacing:.08em}.sc-next strong{font:600 12px var(--body);color:var(--warn)}.sc-next small{font:9px var(--mono);color:var(--screen-dim)}.sc-next.sending strong{color:var(--good)}.sc-next.tamper strong{color:#f3a08f}
.sc-log{display:grid;gap:2px;align-content:end;font:9px var(--mono);color:var(--screen-dim)}.sc-log div{display:flex;justify-content:space-between;gap:6px;white-space:nowrap;overflow:hidden}.sc-log b{color:var(--screen-fg);font-weight:600;overflow:hidden;text-overflow:ellipsis}.sc-log i{font-style:normal;color:var(--good)}.sc-log i.bad{color:#f3a08f}
.sc-meter{display:grid;gap:3px}.sc-meter span{font:9px var(--mono);color:var(--screen-dim);letter-spacing:.08em}.sc-meter strong{font:600 16px var(--mono);color:var(--screen-fg);font-variant-numeric:tabular-nums}.sc-bar{height:5px;background:#3a403c}.sc-bar i{display:block;height:100%;background:var(--good);transition:width .4s}
.lap-name{font:10px var(--mono);color:var(--muted);text-align:center;margin-top:5px;letter-spacing:.06em}
/* director strip */
.strip{position:absolute;left:0;right:0;bottom:0;height:150px;z-index:3;border-top:1px solid var(--line);background:var(--paper);display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:18px;padding:12px 28px 10px}
.readout{display:grid;gap:4px;min-width:0;align-content:start}.readout .k{font:10px var(--mono);color:var(--accent);letter-spacing:.1em}.readout strong{font:600 17px var(--body)}.readout p{margin:0;font-size:12.5px;color:var(--muted);line-height:1.45;max-width:70ch}
.controls{display:grid;gap:8px;align-content:start}.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.btn{font:600 12px var(--body);padding:8px 12px;border:1px solid var(--ink);background:var(--paper);color:var(--ink);cursor:pointer;border-radius:3px}.btn.primary{background:var(--ink);color:var(--bg)}.btn:hover{border-color:var(--accent)}.btn:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid var(--accent);outline-offset:2px}.btn[aria-pressed="true"]{background:var(--olive);color:#fff;border-color:var(--olive)}
select{font:12px var(--body);padding:7px;border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:3px}
.timeline{position:relative;height:26px}.timeline input{position:absolute;inset:0;width:100%;margin:0;accent-color:var(--accent);background:transparent}.ticks{position:absolute;left:8px;right:8px;top:19px;height:6px;pointer-events:none}.ticks i{position:absolute;top:0;width:2px;height:6px;background:var(--accent)}
.hint{font:10px var(--mono);color:var(--muted)}
/* callout */
.callout{position:absolute;width:430px;background:var(--paper);border:1px solid var(--ink);box-shadow:0 14px 34px rgba(0,0,0,.22);padding:16px 18px;display:grid;gap:8px;opacity:0;pointer-events:none;transition:opacity .35s;z-index:5}.callout.show{opacity:1;pointer-events:auto}
.callout .k{font:10px var(--mono);letter-spacing:.12em;color:var(--accent)}.callout h3{margin:0;font:22px var(--display);letter-spacing:-.02em;text-wrap:balance}.callout p{margin:0;font-size:13px;line-height:1.5;color:var(--ink)}
.bytes{border:1px solid var(--line);background:var(--panel);padding:8px 10px;display:grid;gap:3px;font:11px var(--mono);max-height:150px;overflow:auto}.bytes div{display:flex;justify-content:space-between;gap:10px}.bytes b{font-weight:600;color:var(--muted)}.bytes span{text-align:right;overflow-wrap:anywhere}
.callout-foot{display:flex;justify-content:space-between;align-items:center;gap:10px}.callout-foot small{font-size:10px;color:var(--muted)}.ring{width:22px;height:22px;border-radius:50%;background:conic-gradient(var(--accent) var(--p,0%),var(--soft) 0)}
.toast{position:absolute;right:28px;top:84px;background:var(--ink);color:var(--bg);padding:10px 14px;font-size:13px;border-left:4px solid var(--olive);opacity:0;transform:translateY(-6px);transition:all .35s;z-index:4;max-width:380px}.toast.show{opacity:1;transform:none}.toast.bad{border-left-color:var(--red)}
.end{position:absolute;inset:88px 330px 160px;background:var(--paper);border:1px solid var(--ink);display:none;flex-direction:column;gap:12px;padding:26px 30px;z-index:3}.end.show{display:flex}.end h2{margin:0;font:34px var(--display);letter-spacing:-.03em}.end .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.end .tile{border:1px solid var(--line);padding:12px}.end .tile span{font-size:10px;letter-spacing:.12em;color:var(--muted);text-transform:uppercase}.end .tile strong{display:block;font:28px var(--mono);letter-spacing:-.04em;font-variant-numeric:tabular-nums}.end .tile small{font-size:11px;color:var(--muted)}.end p{margin:0;font-size:13px;color:var(--muted);line-height:1.5;max-width:70ch}
.foot{position:absolute;left:0;right:0;bottom:150px;z-index:3;text-align:center;font:10px var(--mono);color:var(--muted);padding:0 28px}