*{box-sizing:border-box;margin:0;padding:0}body{background:#0e0e0e;color:#c8c8c8;font-family:monospace;font-size:13px;display:flex;height:100vh;overflow:hidden}#app{display:flex;gap:10px;padding:10px;width:100%;overflow:hidden}#canvas-container{position:relative;flex:1 1 0;min-width:0;height:calc(100vh - 20px);overflow:hidden}#sim-canvas{display:block;image-rendering:pixelated;width:100%;height:100%}#sidebar-header{display:flex;align-items:center;gap:14px;padding:4px 2px 6px;border-bottom:1px solid #1e1e1e}#sidebar-logo{flex:0 0 auto;display:flex;align-items:center;color:#5db87a}#sidebar-logo svg{display:block}#sidebar-header #time-bar{flex:0 0 auto;width:240px;min-width:0}#tick-counter{flex:0 0 auto;margin-left:auto;font-size:11px;color:#555;letter-spacing:.04em;font-variant-numeric:tabular-nums;text-align:right}#climate-strip{position:absolute;top:0;left:0;right:0;height:16px;display:flex;align-items:center;justify-content:center;gap:10px;background:#1a1a1a;border-bottom:1px solid rgba(255,255,255,.05);font-size:9px;letter-spacing:.14em;text-transform:uppercase;font-family:monospace;color:#ccc;z-index:6;pointer-events:none;transition:background-color .2s linear}.climate-strip-header{color:#666}.climate-strip-label{color:#e0e0e0;font-weight:600}#event-overlay{position:absolute;top:30px;left:10px;width:320px;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.06);border-radius:5px;font-size:11px;overflow:hidden}#event-overlay-header{display:flex;align-items:center;justify-content:space-between;padding:5px 9px 4px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#555;border-bottom:1px solid rgba(255,255,255,.05)}#event-toggle{background:none;border:none;color:#555;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;border-radius:2px}#event-toggle:hover{color:#aaa;background:none}#event-log{padding:5px 9px;max-height:150px;overflow-y:auto;line-height:1.65;color:#666;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent}#event-log::-webkit-scrollbar{width:3px}#event-log::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:2px}.event-entry{padding:1px 0 1px 18px;text-indent:-18px}.event-speciation{color:#888}.event-extinction{color:#444}.event-milestone{color:#888}#sidebar{display:flex;flex-direction:column;gap:8px;width:380px;min-width:380px;flex-shrink:0;overflow:hidden;height:calc(100vh - 20px)}#sidebar-header,#time-bar,#tool-drawer,#sidebar>.section-label,#sidebar .chart-row{flex-shrink:0}.segmented-pill{display:flex;align-items:stretch;background:#141414;border:1px solid #2a2a2a;border-radius:6px;overflow:hidden;padding:0}.segmented-pill>button{flex:1;min-width:0;background:transparent;border:none;border-right:1px solid #242424;border-radius:0;display:flex;align-items:center;justify-content:center;gap:2px;height:24px;padding:0 8px;font-family:monospace;font-size:11px;color:#888;cursor:pointer;transition:background .1s,color .1s}.segmented-pill>button:last-child{border-right:none}.segmented-pill>button:hover{background:#1e1e1e;color:#ddd}.segmented-pill>button.active{background:#1a3326;color:#5db87a;box-shadow:inset 0 -2px #2d6644}.pill-sep{display:inline-block;width:1px;align-self:stretch;background:#2a2a2a}#time-bar .speed-btn[data-level="0"],#time-bar #step-btn{flex:0 0 38px;font-size:13px}#tool-drawer{background:#0d0d0d;border:1px solid #1f1f1f;border-radius:6px;overflow:hidden}.tab-row{display:flex;gap:0;background:#0a0a0a;border-bottom:1px solid #1f1f1f}.tab-btn{flex:1;background:transparent;border:none;border-bottom:2px solid transparent;border-radius:0;padding:9px 0 7px;font-family:monospace;font-size:10px;font-weight:700;letter-spacing:.18em;color:#4a4a4a;cursor:pointer;transition:color .12s,border-color .12s,background .12s}.tab-btn:hover{color:#888;background:#0f0f0f}.tab-btn.active{color:#d4b850;border-bottom-color:#d4b850;background:#13120a}.drawer-content{padding:8px 8px 9px;min-height:44px}.drawer-panel{display:flex;flex-wrap:wrap;gap:6px;align-content:flex-start}.drawer-panel[hidden]{display:none}.tool-btn{flex:0 0 auto;width:80px;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:5px;padding:0 8px;height:28px;background:#141414;border:1px solid #262626;border-radius:4px;color:#888;cursor:pointer;transition:background .1s,border-color .1s,color .1s}.tool-btn:hover{background:#1b1b1b;border-color:#3a3a3a;color:#ccc}.tool-btn.active{background:#1a3326;border-color:#2d6644;color:#5db87a;box-shadow:inset 0 0 0 1px #2d6644}.tool-icon{display:flex;align-items:center;justify-content:center;font-size:13px;line-height:0}.tool-icon svg{display:block;width:13px;height:13px}.tool-label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;line-height:1}.tool-btn--wide{flex:0 0 100%;width:auto}.tool-btn--danger{color:#a05050;border-color:#3a1f1f}.tool-btn--danger:hover{background:#1f0f0f;border-color:#6a2d2d;color:#e08080}.speciation-control{flex:0 0 166px;height:28px;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:0 4px 0 10px;background:#141414;border:1px solid #262626;border-radius:4px}.stepper-label{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:#888;white-space:nowrap}.stepper{display:flex;align-items:stretch;height:20px}.stepper button{width:20px;padding:0;background:#1a1a1a;border:1px solid #2a2a2a;color:#888;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}.stepper button:first-child{border-radius:3px 0 0 3px;border-right:none}.stepper button:last-child{border-radius:0 3px 3px 0;border-left:none}.stepper button:hover{background:#252525;color:#ccc}.stepper span{min-width:32px;padding:0 4px;display:flex;align-items:center;justify-content:center;font-size:10px;color:#d4b850;background:#0f0f0f;border-top:1px solid #2a2a2a;border-bottom:1px solid #2a2a2a;font-variant-numeric:tabular-nums}#heatmap-overlay{position:absolute;top:30px;right:10px;display:flex;align-items:center;gap:8px;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.06);border-radius:5px;padding:5px 8px;z-index:5}.heatmap-overlay-label{font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:#666;padding-left:2px}.heatmap-pill{background:#0000004d;border-color:#ffffff14;border-radius:4px}.heatmap-pill>button{color:#777}.heatmap-pill>button.active{background:#2a2618;color:#d4b850;box-shadow:inset 0 -2px #6a5a20}.btn-row{display:flex;gap:5px}button{background:#1a1a1a;color:#bbb;border:1px solid #2e2e2e;padding:5px 11px;cursor:pointer;font-family:monospace;font-size:12px;border-radius:3px;transition:background .1s,border-color .1s}button:hover{background:#252525;border-color:#484848;color:#ddd}button.active{background:#1a3326;border-color:#2d6644;color:#5db87a}.step-bar{display:inline-block;width:2px;height:.75em;background:currentColor;border-radius:1px;flex-shrink:0}.section-label{font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#444;border-bottom:1px solid #1e1e1e;padding-bottom:4px;margin-bottom:1px}#inspector{position:absolute;top:76px;right:10px;width:200px;background:#000000a6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.06);border-radius:5px;font-size:11px;line-height:1.55;overflow:hidden}#inspector-header{display:flex;align-items:center;justify-content:space-between;padding:5px 9px 4px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#555;border-bottom:1px solid rgba(255,255,255,.05)}#inspector-close{background:none;border:none;color:#555;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;border-radius:2px}#inspector-close:hover{color:#aaa;background:none}#inspector-body{padding:7px 9px}.insp-section{margin-bottom:6px}.insp-section:last-child{margin-bottom:0}.insp-title{font-size:12px;font-weight:700;margin-bottom:3px}.insp-row{color:#888}.insp-row b{color:#bbb}#species-legend{display:flex;flex-direction:column;gap:5px;flex:0 0 340px;height:340px;overflow-y:scroll;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent;position:relative}#species-legend::-webkit-scrollbar{width:3px}#species-legend::-webkit-scrollbar-thumb{background:#2a2a2a;border-radius:2px}.extinct-header{display:flex;justify-content:space-between;align-items:center;padding:3px 4px;font-size:10px;color:#444;cursor:pointer;border-top:1px solid #1a1a1a;margin-top:2px}.extinct-header:hover{color:#666}.extinct-toggle{font-size:12px;line-height:1}.species-entry{display:flex;flex-direction:column;gap:4px;padding:6px 7px 7px 10px;background:transparent;border:none;border-radius:0;box-shadow:inset 3px 0 0 0 var(--species-color, #444);transition:background .1s}.species-entry:hover{background:#ffffff06}.species-entry.extinct{opacity:.4}.species-swatch{flex:0 0 16px;width:16px;height:16px;display:flex;align-items:center;justify-content:center}.species-swatch svg{display:block}.species-entry{line-height:1.3}.species-top-line{display:flex;align-items:center;gap:6px;min-width:0}.species-name-block{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.species-name{font-style:italic;font-size:12px}.species-gen{color:#555;font-size:10px;font-style:normal}.species-stats-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;font-size:10px;color:#888;font-variant-numeric:tabular-nums}.stat-cell{display:flex;align-items:center;gap:4px;min-width:0}.stat-cell .stat-icon,.stat-cell .stat-value{flex:0 0 auto}.species-sparkline{display:block;flex:1 1 auto;min-width:0;height:12px}.species-extinct-tick{flex:0 0 auto;margin-left:auto;font-size:10px;color:#555;font-variant-numeric:tabular-nums}.extinct-genes{display:flex;justify-content:space-between;gap:2px;font-size:8px;color:#777;font-family:monospace;padding-left:22px}.extinct-gene{display:inline-flex;align-items:center;gap:2px;flex:0 0 auto}.extinct-gene-icon{display:inline-flex;align-items:center;color:#666;line-height:0}.extinct-gene-icon svg{display:block;width:9px;height:9px}.extinct-gene-value{font-variant-numeric:tabular-nums;color:#888}.stat-cell .stat-icon{display:inline-flex;align-items:center;color:#555;line-height:0}.stat-cell .stat-icon svg{display:block}.stat-cell .stat-value{flex:0 0 32px;display:inline-block;text-align:right;transition:color .4s ease}.species-sparkline{width:100%}.plague-btn{margin-left:auto;padding:1px 6px;font-size:11px;line-height:1.5;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:3px;color:#888;flex-shrink:0;opacity:.7;cursor:pointer;transition:opacity .1s,color .1s,background .1s,border-color .1s}.plague-btn:hover{opacity:1;color:#e08080;background:#1f0f0f;border-color:#6a2d2d}.dim{color:#505050}.gene-strip{display:flex;gap:2px;height:18px;align-items:stretch}.gene-bar-wrap{flex:1;min-width:0;height:100%;position:relative;cursor:default;background:#151515;border-radius:2px;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:4px;padding:0 3px}.gene-bar-wrap--max{box-shadow:0 0 0 1px #ffffff8c}.gene-bar-fill{position:absolute;left:0;right:0;bottom:0;border-radius:2px 2px 0 0;min-height:1px;opacity:.55;transition:height .3s ease;pointer-events:none;z-index:0}.gene-bar-origin{position:absolute;left:1px;right:1px;height:1px;background:#ffffff73;pointer-events:none;z-index:1}.gene-bar-icon{position:relative;z-index:2;display:inline-flex;align-items:center;color:#fff;line-height:0;flex-shrink:0;filter:drop-shadow(0 0 1px rgba(0,0,0,.8))}.gene-bar-icon svg{display:block;width:9px;height:9px}.gene-bar-value{position:relative;z-index:2;color:#fff;font-size:8px;font-family:monospace;font-variant-numeric:tabular-nums;line-height:1;pointer-events:none;text-shadow:0 0 2px rgba(0,0,0,.8);flex-shrink:0}.trait-legend{display:flex;flex-wrap:wrap;gap:2px 4px;padding:3px 1px 0;justify-content:space-between}.trait-legend-item{display:inline-flex;align-items:center;gap:2px;cursor:default;color:#888;flex:0 0 auto}.trait-legend-line{display:inline-block;width:7px;height:2px;border-radius:1px;flex-shrink:0}.trait-legend-icon{display:inline-flex;align-items:center;justify-content:center;width:10px;height:10px;line-height:0}.trait-legend-icon svg{display:block}.chart-block{display:flex;flex-direction:column;gap:4px;flex-shrink:0}.chart-row{display:flex;gap:8px;flex-shrink:0}.chart-row .chart-block:first-child{flex:3;min-width:0}.chart-row .chart-block:last-child{flex:2;min-width:0}.chart-canvas-wrap{position:relative;height:110px;width:100%}.chart-canvas-wrap canvas{position:absolute;top:0;right:0;bottom:0;left:0}.chart-canvas-wrap--trait{height:85px}.chart-canvas-wrap--radar{height:110px}#phylo-panel{position:absolute;bottom:0;left:0;right:0;height:32%;background:#000000bf;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border-top:1px solid rgba(255,255,255,.07);display:flex;flex-direction:column}#phylo-panel-header{display:flex;align-items:center;justify-content:space-between;padding:5px 9px 4px;font-size:9px;text-transform:uppercase;letter-spacing:.12em;color:#555;border-bottom:1px solid rgba(255,255,255,.05);flex-shrink:0}#phylo-panel-close{background:none;border:none;color:#555;cursor:pointer;font-size:14px;line-height:1;padding:0 2px;border-radius:2px}#phylo-panel-close:hover{color:#aaa;background:none}#phylo-panel-body{flex:1;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#2a2a2a transparent}#phylo-panel-body canvas{display:block;width:100%}#phylo-toggle{position:absolute;bottom:10px;left:10px;width:30px;height:30px;padding:0;display:flex;align-items:center;justify-content:center;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.08);color:#666;border-radius:4px}#phylo-toggle:hover{color:#aaa;background:#000c;border-color:#ffffff26}