:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#e7f4f1;background:#05080c;font-synthesis:none;--mint: #6df0c2;--panel: rgba(9, 16, 22, .96);--border: #20323c;--muted: #78909c}*{box-sizing:border-box}html,body,#app{width:100%;height:100%}body{margin:0;overflow:hidden}button,input,select{font:inherit}button{-webkit-tap-highlight-color:transparent}.app{height:100vh;display:grid;grid-template-rows:62px minmax(0,1fr);background:#05090d}.topbar{z-index:12;display:flex;align-items:center;gap:8px;padding:0 17px;border-bottom:1px solid var(--border);background:#080e13f5;box-shadow:0 8px 30px #0005}.brand{display:flex;align-items:center;gap:11px;margin-right:auto;min-width:190px;font-weight:720;letter-spacing:-.035em}.brand small{display:block;margin-top:2px;color:#607682;font:9px/1.2 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.16em}.mark{position:relative;display:grid;place-items:center;width:34px;height:34px;border:1px solid #3e7265;border-radius:11px;color:var(--mint);background:radial-gradient(circle at 35% 30%,#2e6d5b,#101b21 62%);box-shadow:inset 0 0 14px #6df0c218,0 0 24px #42d8aa18}.mark svg{width:23px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}.button{border:1px solid #2b3d48;border-radius:9px;padding:8px 12px;background:#111c23;color:#d9e9e5;cursor:pointer;transition:.15s ease}.button:hover,.button:focus-visible{border-color:#4e7d70;background:#17272d;color:#fff;outline:none}.button.primary{border-color:#64dcb8;background:#64dcb8;color:#062017;font-weight:750}.button.primary:hover{background:#8cf4d2;border-color:#8cf4d2}.button.icon{display:inline-flex;align-items:center;justify-content:center;width:37px;height:37px;padding:8px}.button.icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.workspace{--left-width: 258px;--right-width: 286px;--left-track: var(--left-width);--right-track: var(--right-width);position:relative;min-height:0;display:grid;grid-template-columns:var(--left-track) minmax(0,1fr) var(--right-track);overflow:hidden}.workspace.panels-ready{transition:grid-template-columns .22s cubic-bezier(.4,0,.2,1)}.workspace.panel-left-collapsed{--left-track: 0px}.workspace.panel-right-collapsed{--right-track: 0px}.panel{z-index:6;min-width:0;width:var(--left-width);overflow:auto;padding:18px 14px 28px;border-right:1px solid var(--border);background:var(--panel);scrollbar-width:thin;scrollbar-color:#30454f transparent;transition:transform .22s cubic-bezier(.4,0,.2,1),opacity .16s}.panel-right{width:var(--right-width);border-left:1px solid var(--border);border-right:0}.panel-left-collapsed .panel-left{transform:translate(-100%);opacity:0;pointer-events:none}.panel-right-collapsed .panel-right{transform:translate(100%);opacity:0;pointer-events:none}.section{margin-bottom:24px}.section h2{margin:0 5px 11px;color:#6f8792;font:600 10px ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.17em;text-transform:uppercase}.population{overflow:hidden;border:1px solid #1e3039;border-radius:11px;background:#080f14}.count-field{display:grid;grid-template-columns:26px 1fr 74px;align-items:center;gap:8px;min-height:43px;padding:6px 8px;border-bottom:1px solid #192a32;color:#b9cbc7;font-size:12px}.count-field:last-child{border-bottom:0}.species-icon{display:grid;place-items:center;width:23px;height:23px;border-radius:7px;color:#6ee6bf;background:#12241f;font:700 10px ui-monospace,monospace}.count-field:nth-child(2) .species-icon{color:#ffb477;background:#291c14}.count-field:nth-child(3) .species-icon{color:#bb9aff;background:#20172c}.count-field:nth-child(4) .species-icon{color:#63c8ff;background:#10222d}.count-field:nth-child(5) .species-icon{color:#ffe06e;background:#292510}input[type=number],select{min-width:0;width:100%;border:1px solid #2b414c;border-radius:7px;padding:6px 7px;background:#0e1920;color:#e3f1ed;font:11px ui-monospace,SFMono-Regular,Consolas,monospace}input:focus,select:focus{border-color:#57cfa9;outline:1px solid #57cfa9}.control{display:flex;align-items:center;justify-content:space-between;gap:11px;min-height:35px;padding:5px;color:#afc1bd;font-size:12px}.control.vertical{display:grid;grid-template-columns:1fr;gap:5px}.control span{min-width:0}.control output{float:right;color:#6de6be;font:10px ui-monospace,monospace}.control input[type=range]{width:100%;accent-color:#64deb8}.control input[type=checkbox]{width:16px;height:16px;accent-color:#63ddb7}.preset-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.preset{padding:9px 7px;text-align:left;font-size:11px}.preset span{display:block;margin-top:2px;color:#6f858e;font:9px ui-monospace,monospace}.row{display:flex;gap:7px}.row>*{flex:1}.full{width:100%;margin-top:7px}.micro{margin:10px 5px 0;color:#607681;font-size:10px;line-height:1.55}.tech-note{padding:11px 12px;border:1px solid #1d3536;border-radius:10px;color:#78958e;background:linear-gradient(145deg,#0a1717,#091116);font-size:10px;line-height:1.55}.tech-note b{color:#6be8bf;font-weight:650}.stage{position:relative;min-width:0;min-height:0;overflow:hidden;background:radial-gradient(ellipse at 50% 68%,#0b2221 0,#071216 35%,#03070a 73%),linear-gradient(#071016,#030609)}.stage canvas{position:relative;width:100%;height:100%;display:block;cursor:grab;touch-action:none}.stage canvas:active{cursor:grabbing}.hud{position:absolute;left:15px;bottom:15px;display:flex;flex-wrap:wrap;gap:7px;pointer-events:none}.pill{border:1px solid #284039;border-radius:8px;padding:7px 10px;color:#829d97;background:#050e10c7;box-shadow:0 5px 22px #0005;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);font:10px ui-monospace,SFMono-Regular,Consolas,monospace}.pill b{color:#d9f7ed;font-weight:600}.gpu-pill{max-width:min(420px,70vw);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.center-note{position:absolute;top:16px;left:50%;transform:translate(-50%,-8px);max-width:calc(100% - 34px);border:1px solid #315046;border-radius:9px;padding:8px 12px;color:#a8c4bc;background:#071114db;opacity:0;pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:11px;transition:.2s}.center-note.show{transform:translate(-50%);opacity:1}.panel-toggle{position:absolute;z-index:9;top:47%;width:22px;height:62px;padding:4px;border:1px solid #2c434c;background:#091217d6;color:#829aa3;cursor:pointer;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);transition:left .22s,right .22s,color .15s,background .15s}.panel-toggle:hover,.panel-toggle:focus-visible{color:var(--mint);border-color:#4d9d84;background:#102522;outline:none}.panel-toggle svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.panel-toggle-left{left:var(--left-track);transform:translateY(-50%);border-left:0;border-radius:0 8px 8px 0}.panel-toggle-right{right:var(--right-track);transform:translateY(-50%);border-right:0;border-radius:8px 0 0 8px}.panel-toggle-right svg,.panel-left-collapsed .panel-toggle-left svg{transform:rotate(180deg)}.panel-right-collapsed .panel-toggle-right svg{transform:none}.scene-fullscreen-toggle{display:block;position:fixed;z-index:30;top:16px;right:16px;width:44px;height:44px;padding:10px;border:1px solid #b9d9cf42;border-radius:12px;background:#08111566;color:#dff8ef;opacity:.65;cursor:pointer;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:.18s}.scene-fullscreen-toggle:hover,.scene-fullscreen-toggle:focus-visible{opacity:.95;border-color:#6ee5bd;background:#10251fdd;transform:scale(1.04);outline:none}.scene-fullscreen-toggle svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.error{position:absolute;top:0;right:0;bottom:0;left:0;z-index:20;display:grid;place-items:center;padding:30px;text-align:center;color:#ffbbb1;background:#070b0e}.app.controls-hidden{grid-template-rows:minmax(0,1fr)}.controls-hidden .workspace{--left-track: 0px;--right-track: 0px}.controls-hidden .topbar,.controls-hidden .panel,.controls-hidden .panel-toggle,.controls-hidden .hud{display:none}.controls-hidden .stage{grid-column:2}body.screen-saver,body.screen-saver .stage,body.screen-saver .stage canvas{cursor:none}body.screen-saver .scene-fullscreen-toggle{display:none}@media(max-width:920px){.workspace{--left-width: min(236px,42vw);--right-width: min(260px,45vw)}.gpu-pill,.brand small{display:none}}@media(max-width:650px){.topbar{padding:0 8px}.brand{min-width:0}.brand>div{display:none}.topbar .button:not(.primary):not(.icon){display:none}.workspace{--left-width: min(226px,76vw);--right-width: min(250px,80vw)}.panel-toggle{top:50%}}
