:root{font-family:Segoe UI,Arial,sans-serif;color:#def0e6;background:#081f21;--line:#365c59}*{box-sizing:border-box}body{margin:0}button,a{touch-action:manipulation}a{color:inherit}button{min-height:44px;font:inherit;padding:10px 14px;border:1px solid #597e72;border-radius:9px;color:#def0e6;background:#153b37;cursor:pointer}button:hover:not(:disabled){background:#28584a}button:disabled{opacity:.4;cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #ffcf73;outline-offset:3px}.primary{background:#a6e6bc;color:#143c2d;font-weight:700}.primary:hover:not(:disabled){background:#c8f6d7}header,main,footer{max-width:1340px;margin:auto;padding:20px 32px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}header img,footer img{background:#f6faf0;border-radius:5px;padding:6px}nav{display:flex;align-items:center;gap:10px}nav a{font-size:13px;text-decoration:none}.intro{display:flex;justify-content:space-between;align-items:center;padding:12px 0}.eyebrow{font-size:10px;letter-spacing:1.7px;color:#95b6a9;font-weight:700;margin:10px 0}h1,h2{font-family:Georgia,serif;font-weight:400}h1{font-size:clamp(35px,4vw,56px);margin:10px 0 15px;letter-spacing:-1.8px}h1 em{color:#a3e5b8}h2{font-size:25px;margin:6px 0 10px}.intro>p{font-size:15px;line-height:1.8;color:#adcdc0}.toolbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 20px}.toolbar span{margin-left:auto;font-variant-numeric:tabular-nums;font-size:13px;color:#f3d58f}.brief{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 22px;background:#1a3733;border:1px solid #526d52;border-radius:12px;margin-bottom:18px}.brief p:last-child{font-size:13px;line-height:1.6;margin:0;max-width:750px}.brief button{flex-shrink:0}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.network{border:1px solid var(--line);border-radius:13px;overflow:hidden;background:#0a2927}.scene-head{display:flex;justify-content:space-between;gap:12px;padding:14px 16px;font-size:10px;letter-spacing:.5px;color:#aecbbd}.scene-head span{color:#f3d08d;text-align:right}#map{position:relative;aspect-ratio:920/520;isolation:isolate}canvas{display:block;width:100%;height:100%}#nodes{position:absolute;inset:0;pointer-events:none}.node{position:absolute;transform:translate(-50%,-50%);width:76px;height:76px;padding:0;border-radius:50%;border:0;background:transparent;pointer-events:auto;color:white;display:flex;align-items:flex-end;justify-content:center;font-size:11px;text-shadow:0 1px 4px #000;touch-action:none}.node:hover:not(:disabled){background:#b6f0b81a}.node span{position:absolute;top:100%;padding:3px 6px;border-radius:4px;background:#0b2729df;white-space:nowrap}.node:disabled{opacity:.75}.node.current span{color:#ffdc86}.node.queued span{color:#82edf0}.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:10px;padding:12px 16px;background:#123a33;color:#acd2bb}.legend span:nth-child(2){color:#f1ad79}.legend span:nth-child(3){color:#82edf0}.legend span:nth-child(4){color:#ffdc86}.threats{padding:10px 16px;display:grid;gap:6px}.front{display:flex;justify-content:space-between;gap:8px;font-size:11px;padding:7px 0;border-bottom:1px solid #264b43}.front b{color:#f5bd8e}.front.done{opacity:.45}.controls{background:#153631;border:1px solid var(--line);border-radius:12px;padding:16px}.signal{display:block;width:100%;text-align:left;margin-bottom:7px;padding:10px 12px;border-left:4px solid var(--cue)}.signal b,.signal span{display:block}.signal b{font-size:13px}.signal span{font-size:11px;margin-top:4px;color:#b0cbbd}.signal[aria-pressed=true]{background:#325947;outline:1px solid var(--cue)}.meter{margin:17px 0}.meter>div{display:flex;justify-content:space-between;gap:8px;font-size:12px}.meter span{color:#f3d38b}progress{width:100%;height:9px;accent-color:#94e8c5}.meter small{font-size:10px;color:#a6c3b4}.actions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.actions button{font-size:12px;padding:9px 5px}#route{font-size:12px;line-height:1.6;min-height:39px}#forecast{font-size:11px;color:#ffcf82;margin:8px 0 14px;line-height:1.7}#status{font-size:12px;line-height:1.6;color:#cde1b0;min-height:56px}.stats{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:#a9d9b7;border-top:1px solid var(--line);padding-top:12px}.under-map{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:18px 0}.under-map section{border:1px solid var(--line);border-radius:12px;padding:15px 20px;background:#102f2c}.under-map p:not(.eyebrow),#log{font-size:12px;line-height:1.7}#log{padding-left:18px;color:#c0d3ba;margin:10px 0}.small{font-size:11px!important;color:#a3bdb0;line-height:1.7}#report{padding:25px;border:1px solid #99d7a9;background:#264a38;border-radius:12px;margin:18px 0}#report p{font-size:13px;line-height:1.7}.science-note{font-size:11px;color:#9ab4a7;line-height:1.8;margin:22px 0}footer{border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:15px;flex-wrap:wrap;font-size:11px}dialog{width:calc(100% - 24px);max-width:680px;max-height:85vh;background:#143831;color:#def0e6;border:1px solid #648771;border-radius:14px;padding:25px}dialog::backdrop{background:#001412db;backdrop-filter:blur(4px)}dialog p,dialog li{font-size:13px;line-height:1.7}dialog li{margin-bottom:10px}.close{float:right}[hidden]{display:none!important}
@media(max-width:1000px){.workspace{grid-template-columns:minmax(0,1fr) 260px}header,main,footer{padding:20px}.node{width:56px;height:56px;font-size:10px}.scene-head{font-size:9px}.controls{padding:12px}}
@media(max-width:760px){header,main,footer{padding:16px}header{align-items:flex-start;gap:10px}header img{width:90px}nav{flex-wrap:wrap;justify-content:flex-end;gap:6px}nav a{width:100%;text-align:right;font-size:11px}nav button{font-size:11px;padding:7px 10px}.intro{display:block}.intro>p{font-size:12px;margin:0 0 14px}h1{font-size:37px}.toolbar button{font-size:12px}.toolbar span{width:100%;margin:4px 0}.brief{display:block;padding:15px}.brief button{margin-top:12px;width:100%}.workspace{grid-template-columns:1fr}.scene-head{flex-direction:column;gap:6px}.scene-head span{text-align:left}#map{aspect-ratio:920/620}.node{width:44px;height:44px;font-size:9px}.node span{padding:2px 3px}.legend{gap:8px;font-size:9px;padding:10px}.controls{padding:16px}#signals{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.signal{padding:9px 5px;margin:0;min-width:0}.signal b{font-size:11px;overflow-wrap:anywhere}.signal span{font-size:10px}#route,#status{min-height:0}.under-map{grid-template-columns:1fr;gap:12px}.front{font-size:10px}.actions button{font-size:13px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

/* The playground stays in view; controls and reviews scroll independently. */
.workspace{position:sticky;top:12px;height:calc(100dvh - 24px);grid-template-columns:minmax(0,1fr) 340px;align-items:stretch;scroll-margin-top:12px;overflow:hidden}
.network{height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center}
#map{min-height:0;flex:1;aspect-ratio:auto;max-height:calc((100vw - 436px)*520/920)}
.scene-head,.legend{flex-shrink:0}
.controls{min-height:0;height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable;overflow-anchor:none}
.controls .under-map{display:block;margin:14px 0 0}
.controls .under-map section{margin:10px 0;padding:12px}
.controls #report{padding:16px;margin:0 0 16px}
.controls #report h2{font-size:24px}
.controls #report button{margin:4px 3px 0 0}
.controls .threats{padding:8px 0}
.controls .front{flex-wrap:wrap}
.controls #control-actions[hidden]{display:none}
@media(min-width:1340px){#map{max-height:calc(890px*520/920)}}
@media(max-width:1000px) and (min-width:761px){.workspace{grid-template-columns:minmax(0,1fr) 280px}#map{max-height:calc((100vw - 338px)*520/920)}}
@media(max-width:760px){.workspace{top:8px;height:calc(100dvh - 16px);grid-template-columns:1fr;grid-template-rows:minmax(210px,42%) minmax(0,1fr);gap:10px;scroll-margin-top:8px}.network{height:100%;justify-content:space-between}#map{max-height:none;flex:1;aspect-ratio:auto}.controls{height:100%;padding:12px}.scene-head{padding:8px 10px;gap:3px}.legend{padding:7px 10px;gap:5px 9px}.controls #report{padding:14px;margin-bottom:12px}.controls .under-map{margin-top:8px}}
@media(max-height:500px) and (min-width:761px){.workspace{top:8px;height:calc(100dvh - 16px);scroll-margin-top:8px}.scene-head,.legend{padding:8px 10px}.node{width:44px;height:44px}}

.controls .brief{display:block;padding:12px;margin-bottom:12px}.controls .brief h2{font-size:22px}.controls .brief button{width:100%;margin-top:10px}.controls .toolbar{margin:8px 0 16px;gap:6px}.controls .toolbar button{font-size:11px;padding:8px 10px}.controls .toolbar span{width:100%;margin:3px 0}.controls #status{min-height:0}

/* Keep the live notes at the head of the playground without resizing the map. */
.network{justify-content:flex-start}
.playground-notes{display:grid;grid-template-columns:1fr 1fr;gap:10px;flex:0 0 150px;height:150px;min-height:0;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;scrollbar-gutter:stable;margin:0;padding:10px;border-bottom:1px solid var(--line)}
.playground-notes section{margin:0;padding:10px 12px;min-width:0}
.playground-notes .eyebrow{margin:0 0 6px;font-size:9px;letter-spacing:1px}
.playground-notes p:not(.eyebrow),.playground-notes #log{font-size:11px;line-height:1.5;margin:5px 0}
.playground-notes #log{padding-left:18px}
.playground-notes:focus-visible{outline:2px solid #ffcf73;outline-offset:-3px}
@media(max-width:760px){.workspace{grid-template-rows:minmax(280px,48%) minmax(0,1fr)}.playground-notes{grid-template-columns:1fr;flex-basis:100px;height:100px;padding:7px;gap:7px}.playground-notes section{padding:8px 10px}.playground-notes .eyebrow{font-size:9px}.playground-notes p:not(.eyebrow),.playground-notes #log{font-size:10px;line-height:1.5}}
@media(max-height:500px) and (min-width:761px){.playground-notes{flex-basis:100px;height:100px;padding:6px}.playground-notes section{padding:6px 9px}.playground-notes p:not(.eyebrow),.playground-notes #log{font-size:10px}}

.legend .threat-key{color:#eaa585}.legend span{white-space:nowrap}

.playground-progress{flex-shrink:0;padding:8px 14px;background:#123a33;border-top:1px solid var(--line)}
.playground-progress .stats{padding:0 0 6px;border-top:0;font-size:12px}
.playground-progress .threats{padding:0;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.playground-progress .front{display:block;margin:0;padding:5px 0;border-bottom:0;font-size:10px;min-width:0}
.playground-progress .front b,.playground-progress .front span{display:block;line-height:1.5}
.playground-progress .front span{margin-top:3px}
@media(max-width:760px){.workspace{grid-template-rows:minmax(380px,62%) minmax(0,1fr)}.playground-notes{height:80px;flex-basis:80px}.playground-progress{padding:7px 10px}.playground-progress .stats{font-size:10px}.playground-progress .threats{gap:7px}.playground-progress .front{font-size:9px}}
@media(max-height:500px) and (min-width:761px){.playground-notes{height:80px;flex-basis:80px}.playground-progress{padding:5px 10px}.playground-progress .stats{font-size:10px;padding-bottom:3px}.playground-progress .front{font-size:9px;padding:2px 0}.playground-progress .front span{margin-top:1px}}