:root{color-scheme:dark;--bg:#0b1713;--panel:#12231d;--panel2:#192e25;--line:#294337;--muted:#87a293;--ink:#ebf0e5;--accent:#d3d68c;--green:#76bc89}
*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;background:var(--bg)}body{color:var(--ink);font:14px/1.45 ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid #bad891;outline-offset:3px}button:disabled{opacity:.45;cursor:progress}
.app{height:100dvh;min-height:520px;display:grid;grid-template-rows:56px minmax(0,1fr);overflow:hidden}.topbar{display:flex;align-items:center;gap:20px;padding:0 clamp(12px,1.6vw,30px);border-bottom:1px solid var(--line);background:#102019}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-size:14px;letter-spacing:.08em}.brand strong{font-weight:850}.brand strong span{font-weight:450;color:#c1d6c2}.brand-icon{font-family:Georgia,serif;color:var(--accent);font-size:27px;line-height:1}.edition{font:10px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);letter-spacing:.13em;white-space:nowrap}.edition i{color:var(--accent);font-style:normal;padding:0 5px}.topbar nav{margin-left:auto;display:flex;align-items:center;gap:16px;font-size:11px;color:#b8d0bb}.topbar a:hover{color:var(--accent)}
.workspace{display:grid;grid-template-columns:minmax(198px,230px) minmax(0,1fr) minmax(214px,260px);gap:10px;padding:10px;min-height:0;overflow:hidden}.panel{background:linear-gradient(160deg,#172a22,#102119);border:1px solid var(--line);border-radius:12px;min-width:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#4c715a transparent}.tools{display:flex;flex-direction:column;padding:20px 17px 13px}.panel-heading{padding:3px 0 18px}.eyebrow{color:#93b19b;letter-spacing:.16em;font:700 10px ui-monospace,monospace}.panel-heading h1{font:500 clamp(24px,2vw,33px)/1.08 Georgia,serif;letter-spacing:-.045em;margin:14px 0 9px}.accent{color:var(--accent)}.panel-heading p{font-size:12px;line-height:1.6;color:#9eb9a5;margin:0}.control-block{border-top:1px solid var(--line);padding:17px 0}.control-block h2{font-size:11px;text-transform:uppercase;letter-spacing:.09em;font-weight:750;margin:0 0 11px;display:flex;justify-content:space-between;gap:6px}.control-block h2 small{font-size:9px;color:#85a68e;font-weight:450;letter-spacing:0;text-transform:none}
.view-buttons,.species-buttons{display:grid;gap:7px}.view-buttons button,.species-buttons button,.subtle-button,.action-grid button,.climate-buttons button{min-width:0;min-height:35px;border:1px solid #375845;background:#1b3227;border-radius:6px;display:flex;align-items:center;justify-content:space-between;gap:9px;padding:7px 10px;text-align:left;font-size:12px;transition:background .15s,border-color .15s}.view-buttons button:hover,.species-buttons button:hover,.subtle-button:hover,.action-grid button:hover,.climate-buttons button:hover{background:#2b4b34;border-color:#77a87a}.view-buttons button[aria-pressed=true],.species-buttons button[aria-pressed=true],.climate-buttons button[aria-pressed=true],.action-grid button[aria-pressed=true]{border-color:#b2cf8b;background:#314a32;color:#fbf9d9}.subtle-button{width:100%;margin-top:7px;background:transparent;font-size:11px}.view-buttons button:disabled,.subtle-button:disabled{opacity:.5;cursor:wait}kbd{font:9px ui-monospace,monospace;letter-spacing:0;color:#92b79c;border:1px solid #42644d;border-radius:3px;padding:2px 4px}.choice-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.climate-buttons button{justify-content:center;flex-direction:column;gap:3px;padding:8px 1px;font-size:10px}.climate-buttons button span{font-size:19px;color:#cdddac}.species-buttons{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}.species-buttons button{justify-content:flex-start;gap:5px;padding:9px 7px;font-size:10px}.species-buttons button kbd{margin-left:auto;font-size:9px}.seed{font-size:17px}.clover{color:#9bcf8c}.flower{color:#e3a1b6}.fern{color:#93c9a8}.shrub{color:#83b98d}.tiny-note{font:11px/1.5 ui-sans-serif,sans-serif;color:#789889;margin:10px 0 0}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.action-grid button{font-size:11px;padding:9px 6px}.tools-bottom{margin-top:auto;padding-top:12px;border-top:1px solid var(--line);font:9px/1.7 ui-monospace,monospace;letter-spacing:.04em;color:#799d88;display:flex;align-items:center;gap:6px}.live-indicator{display:inline-block;flex:0 0 auto;width:6px;height:6px;border-radius:50%;background:#9ddb8c;box-shadow:0 0 12px #9ddb8c88}
.stage-panel{display:grid;grid-template-rows:40px minmax(0,1fr) 40px;min-height:0;min-width:0;border:1px solid #395847;background:#0b130f;border-radius:12px;overflow:hidden;box-shadow:0 14px 50px #0005}.stage-header,.stage-footer{display:flex;align-items:center;gap:10px;padding:0 13px;background:#16271e;font:10px ui-monospace,SFMono-Regular,monospace;letter-spacing:.06em;color:#a4c5ae}.stage-header{border-bottom:1px solid var(--line)}.stage-title{display:flex;align-items:center;gap:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.divider-dot{color:#466851}.wasm-mark{margin-left:auto;color:#a3d5a9;white-space:nowrap}.stage-header button,.stage-footer button{border:1px solid #45644b;color:#e3ebd5;background:#294032;border-radius:4px;font:10px ui-monospace,monospace;padding:5px 9px}.stage-header button:hover,.stage-footer button:hover{border-color:#aac38b;background:#38523c}.stage-screen{position:relative;display:grid;place-items:center;min-height:0;min-width:0;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#23392d 0%,#101e17 66%)}.stage-screen iframe{width:100%;height:100%;border:0;display:block;background:transparent;position:relative;z-index:1}.stage-screen:fullscreen{background:#0d1912}.stage-screen:fullscreen iframe{width:100%;height:100%}.canvas-corner{position:absolute;width:18px;height:18px;border-color:#b6c783a0;border-style:solid;pointer-events:none;z-index:2}.canvas-corner.top-left{left:12px;top:12px;border-width:1px 0 0 1px}.canvas-corner.bottom-right{right:12px;bottom:12px;border-width:0 1px 1px 0}.stage-footer{border-top:1px solid var(--line);justify-content:space-between;white-space:nowrap;overflow:hidden}.stage-footer>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;color:#84a68c}.stage-footer i{font-style:normal;color:#52705b}.runtime-status{font-size:10px;flex:0 0 auto;color:#d3be87}.runtime-status[data-ready=true]{color:#9dcc96}
.science{padding:23px 18px 15px;display:flex;flex-direction:column;gap:20px}.science-heading h2{font:400 clamp(24px,2.3vw,33px)/1.06 Georgia,serif;margin:14px 0;letter-spacing:-.04em}.science-heading em{color:#cbd494;font-weight:400}.science-heading p{margin:0;color:#a2bda9;font-size:12px;line-height:1.5}.dna-card{border:1px solid #385949;background:#11251c;border-radius:9px;padding:11px}.dna-title{font:10px ui-monospace,monospace;color:#9fc1a3;display:flex;justify-content:space-between;align-items:center;margin-bottom:9px}.dna-title strong{color:var(--accent)}.tiny-pill{border-radius:20px;background:#2b4e37;color:#d6e2b0;padding:4px 6px;font-size:9px}.locus{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #284937;padding:11px 1px}.locus>div{display:grid;grid-template-columns:23px 1fr;gap:2px 5px}.locus b{grid-row:span 2;font:10px ui-monospace,monospace;color:#749b7d;padding-top:3px}.locus strong{font-size:12px;font-weight:600}.locus small{grid-column:2;color:#789689;font-size:10px}.locus-mark{height:18px;width:4px;border-radius:3px;transform:rotate(18deg);box-shadow:8px 0 0 currentColor,4px 0 0 #40614b}.locus-mark.water{color:#79b8ca}.locus-mark.height{color:#c5c995}.locus-mark.branch{color:#87c594}.locus-mark.pigment{color:#d398bc}.evolution-flow{border-top:1px solid var(--line);padding-top:15px}.flow-name{color:#9cb6a3;font:10px ui-monospace,monospace;letter-spacing:.1em;margin-bottom:12px}.flow-diagram{display:flex;justify-content:space-between;align-items:center;gap:3px}.flow-diagram span{border:1px solid #3e664f;background:#233f2d;border-radius:5px;color:#d1e1c8;padding:7px 4px;font:10px ui-monospace,monospace}.flow-diagram b{font-size:13px;font-weight:400;color:#b6c88d}.evolution-flow p,.model-details p{font-size:11px;color:#a6bba9;line-height:1.65}.model-details{border-top:1px solid var(--line);padding-top:10px}.model-details summary{cursor:pointer;color:#b5cfad;font-size:11px;display:flex;justify-content:space-between;list-style:none}.model-details summary::-webkit-details-marker{display:none}.model-details[open] summary span{transform:rotate(45deg)}.science-bottom{display:flex;justify-content:space-between;gap:5px;margin-top:auto;padding-top:12px;border-top:1px solid var(--line);color:#81a28b;font:9px ui-monospace,monospace}.mobile-help{display:none}
@media(min-width:1500px){.workspace{grid-template-columns:260px minmax(0,1fr) 290px;gap:12px;padding:12px}.tools{padding:25px 19px}.stage-panel{grid-template-rows:44px minmax(0,1fr) 44px}.panel-heading h1{font-size:34px}.science{padding:27px 20px}.science-heading h2{font-size:35px}}
@media(max-width:1080px){.workspace{grid-template-columns:208px minmax(0,1fr)}.science{display:none}.edition{font-size:9px}.stage-footer>span:nth-child(2){display:none}}
@media(max-width:760px){.app{height:100dvh;grid-template-rows:48px minmax(0,1fr) 24px;min-height:450px}.topbar{padding:0 12px}.edition{display:none}.topbar nav{gap:12px}.topbar nav a{font-size:10px}.topbar nav a:last-child{display:none}.workspace{display:flex;flex-direction:column;gap:6px;padding:6px}.tools{padding:8px 9px;flex:0 0 auto;display:flex;gap:7px;overflow:visible}.panel-heading{padding:0}.panel-heading h1{font-size:18px;margin:0}.panel-heading p,.eyebrow,.tools-bottom,.tiny-note{display:none}.control-block{border:0;padding:0}.control-block h2{display:none}.view-buttons{display:flex;gap:5px}.view-buttons button,.subtle-button{padding:7px;min-height:32px;font-size:10px}.subtle-button{display:none}.choice-grid{gap:3px}.climate-buttons button{min-height:32px;padding:3px 6px;flex-direction:row}.climate-buttons button span{font-size:13px}.species-buttons{display:flex;gap:3px}.species-buttons button{padding:6px 7px;min-height:32px}.species-buttons button kbd,.view-buttons kbd,.action-grid kbd{display:none}.runtime-buttons,.panel-heading p{display:none}.tools .control-block:nth-of-type(1){margin-top:4px}.stage-panel{flex:1 1 0;min-height:0;grid-template-rows:31px minmax(0,1fr) 31px}.stage-header,.stage-footer{padding:0 9px;font-size:9px}.stage-title{font-size:9px}.stage-header .wasm-mark{display:none}.mobile-help{display:block;font:9px ui-monospace,monospace;color:#9bb39b;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:5px 9px}.canvas-corner{display:none}}
@media(max-width:470px){.tools{flex-wrap:wrap;flex-direction:row;align-items:center}.panel-heading{display:none}.view-buttons button{min-width:85px}.species-buttons button{font-size:0;gap:0;min-width:33px;justify-content:center}.species-buttons .seed{font-size:16px}.stage-header button{font-size:0}.stage-header button::before{content:"⛶";font-size:15px}.climate-buttons button{font-size:0}.climate-buttons button span{font-size:15px}.stage-title{font-size:8px}}
@media(max-height:780px) and (min-width:761px){.tools{padding-top:10px}.panel-heading{padding-bottom:12px}.control-block{padding:11px 0}.science{gap:12px;padding-top:12px}.locus{padding:8px 1px}.science-heading h2{margin:6px 0}.science-heading p{font-size:11px}.panel-heading h1{font-size:26px;margin:6px 0}.tools-bottom{font-size:8px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

/* Recoverable errors appear over the viewport, never behind the iframe. */
.engine-failure[hidden]{display:none!important}
.engine-failure{position:absolute;z-index:5;inset:0;display:grid;place-items:center;background:rgba(9,20,14,.92);padding:24px}
.engine-failure-inner{width:min(440px,100%);padding:25px;background:#1a3224;border:1px solid #9cbf8a;border-radius:12px;text-align:center;box-shadow:0 20px 80px #0008}
.engine-failure h3{font:400 29px Georgia,serif;margin:0 0 10px;color:#f0edcc}
.engine-failure p{font-size:12px;color:#b8c5af;line-height:1.7;word-break:break-word}
.engine-failure button{background:#9acb85;border:0;border-radius:6px;padding:12px 17px;color:#112517;font-weight:700;margin:10px auto}
.engine-failure a{display:block;color:#cae4c3;text-decoration:underline;font-size:12px;padding:8px}

/* Mobile navigation stays within the simulation, not the page scroll area. */
.touch-pad[hidden],.mobile-actions[hidden]{display:none!important}
.touch-pad,.mobile-actions{display:none}
@media (pointer:coarse){
  .touch-pad:not([hidden]){position:absolute;z-index:4;left:12px;bottom:14px;display:flex;flex-direction:column;align-items:center;gap:5px;pointer-events:auto}
  .touch-pad-row{display:flex;gap:5px}
  .touch-pad button{width:43px;height:43px;border:1px solid #a2c699bd;border-radius:9px;background:#11281fbf;color:#e1eddb;font-size:24px;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none;backdrop-filter:blur(5px)}
  .touch-pad button:active{background:#668b5ce6}
}
@media(max-width:760px){
  .mobile-actions{display:flex;flex:0 0 auto;align-items:center;gap:6px;margin-top:-1px;min-height:35px;padding:0 9px;background:#12231b;border:1px solid #385845;border-radius:7px}
  .mobile-actions button{border:1px solid #547657;background:#244333;color:#e7f4de;border-radius:4px;min-height:28px;padding:3px 10px;font-size:11px}
  .mobile-actions button[aria-pressed=true]{background:#487a50}
  .mobile-actions span{font-size:10px;color:#8bad93;margin-left:auto}
  .touch-pad button{width:38px;height:38px}
}

/* Camera HUD and two-thumb navigation: left for locomotion, right for gaze. */
.camera-state{border:1px solid #496e50;border-radius:3px;padding:3px 6px;font:10px ui-monospace,monospace;color:#c7d9ad;white-space:nowrap}
.camera-touch[hidden],.camera-zoom-row button[hidden]{display:none!important}
.camera-touch{display:none}
@media(pointer:coarse){
 .camera-touch:not([hidden]){position:absolute;right:12px;bottom:14px;z-index:4;display:flex;flex-direction:column;align-items:center;gap:5px;touch-action:none}
 .camera-touch-title{font:9px ui-monospace,monospace;color:#e7f6d9;background:#142a22b8;padding:1px 5px;border-radius:3px}
 .camera-touch-row,.camera-zoom-row{display:flex;gap:5px}
 .camera-touch button{width:43px;height:43px;border:1px solid #a2c699bd;border-radius:9px;background:#11281fd9;color:#e1eddb;font-size:24px;font-weight:700;touch-action:none;user-select:none;-webkit-user-select:none;backdrop-filter:blur(5px)}
 .camera-touch button:active{background:#668b5ce6}
 .camera-zoom-row button{width:59px;height:31px;font-size:20px}
}
@media(max-width:760px){
 .camera-touch button{width:38px;height:38px}
 .camera-zoom-row button{width:55px;height:30px}
 .stage-header .camera-state{margin-left:auto;font-size:8px}
 .mobile-actions span{display:none}
 .mobile-actions button{padding:3px 7px}
 .mobile-actions button:last-of-type{margin-left:auto}
 .stage-screen iframe{touch-action:none}
 .touch-pad,.camera-touch{opacity:.93}
}
@media(max-width:400px) and (max-height:730px){
 .touch-pad button,.camera-touch button{width:34px;height:34px}
 .camera-zoom-row button{height:27px;width:49px}
 .touch-pad,.camera-touch{bottom:7px}
}