/* Colony observatory. Loaded after legacy styles to preserve existing controls. */
:root{--bg:#0b141e;--panel:#101e2a;--line:#253846;--muted:#8babb7;--ink:#e1f0f3;--mint:#63dece;--accent:#c1eee1}
body{background:radial-gradient(ellipse at top left,#17303b55,transparent 60%),var(--bg)}
header{padding:20px 28px;border-bottom:1px solid #25384688;margin-bottom:18px;gap:20px}
.mark{font-size:38px;color:var(--mint)}h1{font-size:20px;letter-spacing:3px}.brand p{font-size:9px;letter-spacing:1.7px;margin-top:7px}
.connection{flex-direction:row;align-items:center;gap:12px}.connection small{display:none}.badge{letter-spacing:1px;border-color:#314a57}.connected{background:#63dece0b}.connected:before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--mint);margin-right:7px}.android-download{font-size:10px;padding:8px 12px}
main{padding:0 24px 20px;max-width:1920px;margin:auto}
button{border-radius:8px;transition:background .15s,border-color .15s}button:hover{background:#63dece0c}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--mint);outline-offset:3px}input[type=checkbox]{accent-color:var(--mint)}
.evolution-overview{padding:14px 20px;background:linear-gradient(110deg,#132b33,#10212d 75%);border-color:#304954;border-radius:14px;margin-bottom:0}
.evolution-overview-head{grid-template-columns:190px 1fr;gap:20px}.evolution-kicker{color:var(--mint)}.evolution-overview h2{font-size:21px;color:var(--ink)}.evolution-overview-copy p{color:var(--muted);font-size:11px}.evolution-stage-number{color:var(--mint)}
.evolution-stage-track{grid-template-columns:repeat(8,minmax(0,1fr));margin:12px 0 0;gap:8px}.evolution-stage-track li{color:#63828f;font-size:10px}.evolution-stage-track li::before{width:20px;height:20px;flex-basis:20px;background:#10212c;border-color:#324854}.evolution-stage-track li.reached{color:#a0c5c9}.evolution-stage-track li.reached::before{background:#194039;border-color:#427e72;color:#b3e9da}.evolution-stage-track li.current{color:#aaf5e7}.evolution-stage-track li.current::before{background:var(--mint);border-color:var(--mint);color:#102b30;box-shadow:0 0 0 3px #63dece18}
.evolution-stage-evidence{display:none}.evolution-illustration{opacity:.9}
.toolbar{padding:12px 0;justify-content:flex-end}.toolbar button{font-size:11px;padding:8px 14px}#reset{border-color:#477f7d;color:#b8f5e7;background:#63dece09}#speed-explanation{font-size:10px;margin:10px 0;line-height:1.7}
.world-pulse{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0 0 16px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}.world-pulse>div{background:#101e2a;padding:13px 18px;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 12px}.world-pulse small{font-size:8px;letter-spacing:1.8px;color:var(--muted)}.world-pulse strong{grid-column:2;grid-row:1/3;font-size:25px;font-weight:450;letter-spacing:-.5px;color:#ceefe9;font-variant-numeric:tabular-nums}.world-pulse span{font-size:10px;color:#648c9d}
.workspace{grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}.dish-panel,aside{background:var(--panel);border-radius:14px;border-color:var(--line)}.dish-heading{padding:14px 16px;font-size:9px;letter-spacing:1.4px;border-bottom:1px solid #25384666;color:#8db3c1}.dish-heading #world-state{letter-spacing:0;color:#aac5ce}
.view-tools{padding:10px 14px;gap:6px}.view-tools button{font-size:10px;padding:6px 9px;min-height:30px}.view-tools label{font-size:9px;margin-left:auto}.view-tools label+label{margin-left:4px}.size-layers{padding:8px 14px;background:#0d1b26;font-size:10px;gap:12px;border-top:1px solid #25384666}.size-layers small{display:none}
.canvas-wrap{margin:0;border:0;border-radius:0;overflow:hidden;background:#142c35;position:relative}#dish{height:clamp(460px,71dvh,1000px);min-height:0}
.canvas-wrap>.environment{top:12px;left:14px;right:14px}.canvas-wrap>.environment .sliders{gap:12px}.canvas-wrap>.environment .slider{background:none;padding:2px;backdrop-filter:none}.canvas-wrap>.environment .slider label{font-size:9px;color:#c0dade}.canvas-wrap>.environment input[type=range]{opacity:.9;accent-color:#63dece;height:12px;margin-top:3px}
.sim-controls{top:67px;left:14px;gap:4px}.sim-controls button{background:#0a1b28cc;border:1px solid #47718055;border-radius:7px;backdrop-filter:none;height:30px;width:33px;font-size:10px}.sim-controls button.active{color:#63dece;background:#17433d;box-shadow:none;border-color:#4da58e}#pause{background:#63dece;color:#143036}
.canvas-wrap>.server-metrics{position:absolute;bottom:12px;right:14px;margin:0;padding:7px 10px;width:190px;background:#0a1b28dc;border:1px solid #344f5c;border-radius:9px;backdrop-filter:none}.server-metrics summary{font-size:9px;color:#9fc5ce;display:flex;justify-content:space-between;gap:8px}.server-metrics[open]{width:min(400px,calc(100% - 28px))}.server-metrics #metrics-chart{height:24px;margin:5px 0 0;background:transparent}.server-metrics:not([open]) #metrics-chart{display:block}.server-metrics[open] #metrics-chart{height:64px}.server-metrics p,.server-metrics small{font-size:10px;line-height:1.6;color:var(--muted)}
footer{padding:10px 14px;font-size:9px;line-height:1.6;color:#7b9ba8}footer>span:first-child{max-width:70%}
aside{padding:18px}.population{padding:14px 0 18px;margin:0 0 20px;border-bottom-color:var(--line)}.population strong{font-size:48px;font-weight:350;color:#bcf2e4}.population span{font-size:10px}.population small{font-size:8px}aside .section-label{font-size:8px;letter-spacing:1.3px}
#colonies{gap:6px;margin:12px 0 20px}#colonies button{padding:10px 12px;font-size:10px;background:#0b1924;border-color:#253b49;border-radius:7px}#colonies button:hover{background:#16313a}aside dl{margin:14px 0}aside dl>div{font-size:10px;gap:15px;margin:11px 0}aside dd{color:#c5e0e6}aside .stat-extra{display:none}aside.show-extra .stat-extra{display:flex}.server{font-size:9px;padding-top:12px}
.model-atlas,.technical-settings{border-top:1px solid var(--line);padding-top:14px;margin:16px 0}.model-atlas summary,.technical-settings summary{font-size:11px}.model-atlas p,.model-atlas>small{font-size:10px;color:var(--muted);line-height:1.6;display:block;margin:8px 0}#model-atlas-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}#model-atlas-grid figure{margin:0;background:#0b1924;border:1px solid #253b49;border-radius:8px;overflow:hidden}#model-atlas-grid canvas{width:100%;height:auto;aspect-ratio:8/5}#model-atlas-grid figcaption{padding:0 8px 9px}#model-atlas-grid strong{display:block;font-size:9px;font-weight:500;color:#c5e9e8}#model-atlas-grid small{display:block;font-size:8px;color:#7397a5;margin-top:4px}
.technical-settings .live-limits{display:grid;padding:0;border:0;background:none;margin:14px 0;gap:10px}.technical-settings .live-limits label{font-size:10px}.technical-settings .live-limits input{width:100%;background:#0b1924;border-color:var(--line)}.technical-settings small,.technical-settings #limit-usage{font-size:10px;line-height:1.6}#toggle-stats{font-size:10px;background:#0b1924}.technical-settings button{font-size:10px;padding:8px}
#colony-card{background:#102630f5;border-color:#43777a;border-radius:0;padding:18px}#colony-card h3{color:#c1f6e8}#colony-card p,#colony-card small{color:#93b8c3}#colony-card dl{grid-template-columns:repeat(3,minmax(0,1fr))}.achievement{background:#63dece0b;border-color:#33585c}.achievement strong{color:#a8e6d7}#evolution-chart{background:#0c1d29}
dialog{background:#10222f;border-color:#3e6572;border-radius:16px}.form-grid input,.form-grid select,.world-presets select{background:#0b1924;border-color:#2e4b5a}.world-presets{background:#0d1c28;border-color:#315960}.world-presets button{background:#1c403e}
.workspace:fullscreen{background:var(--bg);display:block}.workspace:fullscreen .dish-panel{border-radius:0;height:100dvh}.workspace:fullscreen .size-layers{height:34px;padding:8px 14px}.workspace:fullscreen .view-tools{height:44px}.workspace:fullscreen .canvas-wrap{height:calc(100dvh - 78px);min-height:0}.workspace:fullscreen #dish{height:100%;min-height:0}.workspace:fullscreen .sim-controls{display:flex}.workspace:fullscreen #colony-card{z-index:8;top:104px;right:14px;max-height:calc(100% - 120px);overflow:auto;border-radius:12px}
@media(max-width:1100px){.workspace{grid-template-columns:minmax(0,1fr) 240px}.evolution-stage-track li{font-size:9px;gap:4px}.world-pulse>div{padding:12px}.world-pulse strong{font-size:21px}.view-tools label{margin-left:0}}
@media(max-width:760px){header{padding:14px 16px;margin-bottom:12px;flex-wrap:wrap}.connection{gap:8px}main{padding:0 12px 16px}.brand p{font-size:8px}.evolution-overview{padding:12px}.evolution-overview-head{grid-template-columns:1fr;gap:0}.evolution-illustration{display:none}.evolution-overview h2{font-size:18px}.evolution-stage-number{position:static;display:block;margin-top:5px}.evolution-stage-track{grid-template-columns:repeat(4,1fr);gap:9px 4px}.evolution-overview-copy p{font-size:10px}.world-pulse{grid-template-columns:repeat(2,1fr);margin-bottom:12px}.world-pulse strong{font-size:22px}.workspace{grid-template-columns:1fr}.view-tools{padding:8px;gap:5px}.view-tools label{display:none}.size-layers{font-size:9px;gap:8px;padding:8px}.size-layers label{gap:2px}#dish{height:66dvh;min-height:380px}.canvas-wrap>.environment{left:8px;right:8px;top:8px}.canvas-wrap>.environment .sliders{gap:5px;grid-template-columns:repeat(5,minmax(0,1fr))}.canvas-wrap>.environment .slider label{font-size:8px;white-space:nowrap;overflow:hidden}.canvas-wrap>.environment .slider output{float:none;display:block;color:#a9eddb;margin-top:3px}.sim-controls{left:8px;top:72px}.canvas-wrap>.server-metrics{right:8px;bottom:8px;width:160px}.server-metrics summary{font-size:8px}.server-metrics[open]{width:calc(100% - 16px)}footer{flex-direction:column}footer>span:first-child{max-width:none}aside{padding:16px}aside dl{display:block}aside dl>div{flex-direction:row}#colonies{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}#colonies button{font-size:9px;padding:10px}.model-atlas #model-atlas-grid{grid-template-columns:repeat(3,1fr)}#colony-card dl{grid-template-columns:1fr}.workspace:fullscreen #colony-card{width:calc(100% - 28px)}}
@media(prefers-reduced-motion:reduce){button{transition:none}}

/* GPU scene below the transparent annotation and interaction canvas. */
.webgl-scene{position:absolute;top:0;left:0;pointer-events:none;z-index:0}#dish{position:relative;z-index:1}.canvas-wrap>#colony-card{z-index:8}.render-backend{font-size:9px;color:#63dece;margin-left:8px}.view-tools #render-backend{order:9;margin-left:auto}@media(max-width:760px){.view-tools #render-backend{flex-basis:100%;margin-left:2px;font-size:8px}}
.workspace:fullscreen .dish-panel{display:grid;grid-template-rows:auto auto minmax(0,1fr)}.workspace:fullscreen .view-tools{height:auto;min-height:44px}.workspace:fullscreen .size-layers{height:auto;min-height:34px}.workspace:fullscreen .canvas-wrap{height:100%;min-height:0}

/* Native Windows viewport: field follows available space, without page scrolling. */
body.desktop-client{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
.desktop-client header{flex:0 0 auto;padding:8px 16px;margin:0;gap:10px}
.desktop-client .brand p{display:none}.desktop-client .mark{font-size:24px}.desktop-client h1{font-size:15px}
.desktop-client main{width:100%;min-height:0;flex:1;display:flex;flex-direction:column;padding:8px;gap:6px}
.desktop-client .evolution-overview{flex:0 0 auto;padding:8px 12px;margin:0}
.desktop-client .evolution-illustration,.desktop-client .evolution-overview-copy p{display:none}
.desktop-client .evolution-overview-head{display:block}.desktop-client .evolution-overview h2{font-size:15px}
.desktop-client .evolution-stage-track{margin:6px 0 0}.desktop-client .evolution-stage-track li{font-size:9px}
.desktop-client .world-pulse{flex:0 0 auto;margin:0;gap:6px}.desktop-client .world-pulse>div{padding:7px 10px}
.desktop-client .world-pulse strong{font-size:20px}.desktop-client .world-pulse small{display:none}
.desktop-client .workspace{flex:1;min-height:0;align-items:stretch;grid-template-columns:minmax(0,1fr) 260px}
.desktop-client .dish-panel{min-height:0;display:flex;flex-direction:column;height:100%}
.desktop-client .dish-heading{padding:4px 10px}.desktop-client .size-layers{padding:5px 10px;flex:0 0 auto}
.desktop-client .view-tools{padding:5px 10px;flex:0 0 auto}.desktop-client .canvas-wrap{flex:1;height:auto;min-height:0}
.desktop-client #dish{width:100%;height:100%;min-height:0}.desktop-client footer{padding:4px 10px;flex:0 0 auto}
.desktop-client footer>span:first-child{display:none}.desktop-client aside{height:100%;max-height:none;min-height:0;overflow:hidden;padding:10px}
.desktop-client #colonies{max-height:none;overflow:visible;margin:8px 0;gap:4px}.desktop-client #colonies button{padding:5px 8px}
.desktop-client .population{margin:0 0 10px;padding:8px 0}.desktop-client .population strong{font-size:30px}
.desktop-client .model-atlas,.desktop-client .technical-settings{margin:8px 0;padding-top:8px}
.desktop-client .model-atlas[open],.desktop-client .technical-settings[open]{position:fixed;z-index:30;top:65px;right:18px;width:310px;max-height:calc(100dvh - 90px);overflow:auto;background:var(--panel);border:1px solid var(--line);padding:15px;zoom:1}
.desktop-client .note{display:none}.desktop-client aside dl>div{margin:6px 0}
.desktop-client.native-fullscreen header,.desktop-client.native-fullscreen .evolution-overview,.desktop-client.native-fullscreen .world-pulse{display:none}
.desktop-client.native-fullscreen main{padding:0;gap:0}.desktop-client.native-fullscreen .workspace{display:block}
.desktop-client.native-fullscreen aside,.desktop-client.native-fullscreen footer,.desktop-client.native-fullscreen .dish-heading{display:none}
.desktop-client.native-fullscreen .dish-panel{border:0;border-radius:0}