
:root{--app-accent:#ff8a1f;--accent-text:#ffac60;--bg:#0c1318;--panel:#131e25;--raised:#1b2a33;--line:#2c3c46;--fg:#edf2f3;--muted:#a4b6c1;--mint:#72c9ab;--cyan:#80c7e5;--pink:#df94b4}
.creature-key{display:flex;align-items:center;gap:14px 25px;flex-wrap:wrap;padding:13px 18px;background:var(--panel);border-top:1px solid var(--line)}.creature-key>span{display:grid;grid-template-columns:42px auto;gap:1px 9px;align-items:center}.creature-key svg{grid-row:span 2;width:42px;height:34px;fill:#72b49a}.creature-key svg.fox-icon{fill:#f27850}.creature-key .animal-detail{fill:#eee3cd}.creature-key .animal-eye{fill:#172c25}.creature-key b{font-size:11px;font-weight:600}.creature-key small{color:var(--muted);font-size:10px;line-height:1.5}.creature-key p{font:10px/1.6 var(--mono);color:var(--accent-text);margin-left:auto;max-width:240px}.creature-key p small{font-family:var(--font)}#focusCreature:not(:disabled){border-color:var(--app-accent);color:var(--accent-text);background:color-mix(in srgb,var(--app-accent) 8%,var(--panel))}@media(max-width:520px){.creature-key{padding:12px;gap:12px 16px}.creature-key>span{grid-template-columns:32px auto;gap:1px 6px}.creature-key svg{width:32px}.creature-key p{margin-left:0;max-width:none;width:100%;border-top:1px solid var(--line);padding-top:9px}.view-tools>.button-row{flex-wrap:wrap}.view-tools>.button-row button{flex:1 0 40%}}
:root[data-theme=light]{--bg:#f2f1eb;--panel:#fffefa;--raised:#eaece7;--line:#d6dcd5;--fg:#243731;--muted:#52675e;--accent-text:#a54b00;--mint:#21745b;--cyan:#176c91;--pink:#a33665}
html{scroll-padding-top:16px}body{--app-accent:#ff8a1f}h1,h2,h3{font-family:var(--font)}h2{font-size:26px;line-height:1.2;letter-spacing:-.035em}.app-main{max-width:1520px;padding-top:44px}.app-header{min-height:68px}.header-label{color:var(--fg)!important}.header-label span{color:var(--accent-text)}.badge,.eyebrow,output{color:var(--accent-text)!important}.app-header .badge{border:0;font-size:10px}.intro{display:grid;grid-template-columns:1.15fr 1fr;gap:80px;align-items:center;margin:0 0 48px}.intro h1{font-size:clamp(42px,4.6vw,70px);font-weight:600;line-height:1.05;letter-spacing:-.06em}.intro h1 span{color:var(--accent-text)}.intro>div>p:not(.eyebrow){max-width:560px;font-size:15px;line-height:1.8;color:var(--muted);margin-top:20px}.text-link{display:inline-flex;gap:40px;min-height:44px;align-items:center;color:var(--accent-text);font-size:13px;margin-top:15px;text-decoration:none}.text-link span{font-size:26px}.intro-principles{display:grid;gap:0}.intro-principles article{display:flex;gap:18px;align-items:start;padding:18px 0;border-bottom:1px solid var(--line)}.intro-principles article:last-child{border:0}.intro-principles b{font:11px var(--mono);color:var(--accent-text);padding-top:5px}.intro-principles h2{font-size:16px;letter-spacing:-.015em}.intro-principles p{font-size:12px;color:var(--muted);margin-top:5px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:18px}.section-heading .eyebrow{margin-bottom:8px}.section-heading>p{font-size:12px;color:var(--muted)}.experiment-shelf{margin-bottom:28px}.experiment-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:20px}.experiment-cards button{position:relative;display:flex;flex-direction:column;text-align:left;gap:9px;align-items:start;padding:17px 14px;border-radius:12px;background:var(--panel);font-weight:400;overflow:hidden}.experiment-cards button:before{content:'';position:absolute;width:56px;height:56px;right:-12px;top:-12px;border:1px solid color-mix(in srgb,var(--app-accent) 22%,transparent);border-radius:50%}.experiment-cards button[aria-pressed=true]{border-color:var(--app-accent);background:color-mix(in srgb,var(--app-accent) 8%,var(--panel))}.experiment-cards .exp-icon{font-size:21px;color:var(--accent-text);line-height:1.2}.experiment-cards strong{font-size:13px;line-height:1.4}.experiment-cards small{font-size:10px;color:var(--muted);line-height:1.6}.workbench{border:1px solid var(--line);border-radius:18px;background:var(--panel);overflow:hidden;scroll-margin-top:15px}.workbench-heading{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px}.workbench-heading .eyebrow{margin-bottom:6px}.workbench-heading h2{font-size:24px;max-width:700px}.workbench-heading button{font-size:11px}.transport{padding:12px 18px;border-block:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;background:color-mix(in srgb,var(--bg) 50%,var(--panel))}.transport .primary,.transport .primary[aria-pressed=true]{color:#241508;background:var(--app-accent)}.transport button{font-size:12px}.inline-label{display:inline-flex;align-items:center;gap:8px;font-size:11px;min-width:0}.inline-label select{width:auto;font-size:12px;min-height:44px}.habitat-layout{display:grid;grid-template-columns:minmax(0,1fr) 285px}.habitat-main{min-width:0}.view-tools{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 18px;border-bottom:1px solid var(--line)}.view-tools button{font-size:11px;background:transparent}.season-heading{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.season-heading strong{font-size:16px}.season-heading>span{font:10px var(--mono);color:var(--muted)}.habitat-wrap{position:relative;height:clamp(560px,68vh,720px);background:#111e24;isolation:isolate}.habitat-3d{position:absolute;inset:0}.habitat-wrap canvas{display:block;width:100%;height:100%}#habitat{touch-action:pan-y;cursor:crosshair}.habitat-badge{pointer-events:none;position:absolute;left:18px;top:15px;background:#11221cdb;color:#e1ece6;border:1px solid #bed7bd25;border-radius:20px;padding:6px 10px;font:9px var(--mono);letter-spacing:.09em}.hover-card{position:absolute;right:14px;top:14px;max-width:220px;background:#0b1b24ee;color:#f4f7f5;padding:10px 12px;border:1px solid #ff8a1f80;border-radius:9px;font-size:11px;pointer-events:none;z-index:3}.hover-card b{display:block;color:#ffb46e}.season-progress{height:3px;background:var(--line)}.season-progress i{height:100%;display:block;background:var(--app-accent);width:0}.visual-tools{display:flex;align-items:center;flex-wrap:wrap;gap:4px 17px;padding:8px 18px}.check{display:inline-flex;gap:7px;align-items:center;min-height:44px;font-size:11px;color:var(--fg)}input[type=checkbox]{width:17px;height:17px;accent-color:var(--app-accent)}.color-legend{display:inline-flex;align-items:center;gap:7px;font:9px var(--mono);color:var(--muted)}.color-legend i{height:5px;width:44px;background:linear-gradient(90deg,#8eacb5,#72c9ab,#f3cd77);border-radius:6px}.scene-help{font-size:10px;line-height:1.7;color:var(--muted);padding:0 18px 13px}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:1px solid var(--line)}.stat{padding:14px}.stat strong{font:500 28px var(--font);letter-spacing:-.04em;margin:4px 0}.stat small{font-size:9px;line-height:1.6}.stat span{font-size:10px}.field-notes{border-left:1px solid var(--line);background:color-mix(in srgb,var(--bg) 24%,var(--panel));min-width:0}.inspector{padding:20px 18px;border-bottom:1px solid var(--line)}.inspector-heading .eyebrow{margin-bottom:8px}.inspector-heading select{font-size:12px;margin-bottom:16px}.empty-inspector{border:1px dashed var(--line);padding:16px;border-radius:11px}.empty-inspector strong{font-size:15px;display:block;margin-bottom:8px}.empty-inspector p,.inspector p{font-size:11px;line-height:1.8;color:var(--muted)}.creature-title{display:flex;align-items:center;justify-content:space-between;gap:10px}.creature-title strong{font-size:20px;letter-spacing:-.03em}.creature-title span{font:9px var(--mono);color:var(--accent-text)}.energy-meter{height:6px;background:var(--line);border-radius:6px;overflow:hidden;margin:12px 0 6px}.energy-meter i{height:100%;display:block;background:var(--app-accent)}.energy-readout{display:flex;justify-content:space-between;font:10px var(--mono);gap:8px;color:var(--muted);margin-bottom:10px}.trait-readouts{display:grid;gap:8px;margin-top:15px}.trait-readouts>div{display:grid;grid-template-columns:1fr auto;gap:5px;border-top:1px solid var(--line);padding-top:8px;font-size:11px}.trait-readouts strong{font:11px var(--mono)}.trait-readouts small{grid-column:1/-1;color:var(--muted);font-size:10px}.inspector .family-note{margin-top:14px;padding:10px;background:var(--raised);border-radius:8px;font-size:10px}.live-guide{padding:20px 18px}.live-guide .eyebrow{font-size:9px;margin-bottom:8px}.live-guide h3{font-size:16px;letter-spacing:-.02em}.live-guide p{font-size:11px;line-height:1.8;color:var(--muted);margin-top:7px}.live-guide>div{margin-top:13px}.live-guide b{font-size:10px;color:var(--accent-text)}.environment-deck{padding:20px 24px;border-top:1px solid var(--line)}.deck-heading{display:flex;align-items:center;justify-content:space-between;gap:14px}.deck-heading .eyebrow{margin-bottom:5px;font-size:9px}.deck-heading h3{font-size:18px}.environment-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;margin-top:12px}.environment-fields .field{min-width:0;margin:0}.field>span{display:flex;justify-content:space-between;font-size:12px;color:var(--fg);gap:6px;margin:0}.field output{font-size:11px}.field small{display:block;font-size:10px;line-height:1.6;min-height:32px}.setup-details{margin-top:18px;border-top:1px solid var(--line)}summary{cursor:pointer;font-size:12px;font-weight:600;min-height:44px;padding:14px 0}.setup-row{display:grid;grid-template-columns:1fr 1fr auto 2fr;gap:16px;align-items:end;padding:10px 0}.setup-row label{font-size:11px}.setup-row input{margin-top:5px}.setup-row p{font-size:10px;line-height:1.7;color:var(--muted)}.setup-row button{font-size:11px}.status{padding:8px 5px;min-height:40px;margin:0;color:var(--accent-text);font-size:12px}.prediction-strip{display:grid;grid-template-columns:1fr 1fr;gap:16px 35px;border:1px solid var(--line);border-left:3px solid var(--app-accent);border-radius:12px;padding:24px;background:var(--panel);margin:8px 0 25px}.prediction-strip .eyebrow{font-size:9px;margin-bottom:9px}.prediction-strip h3{font-size:18px}.prediction-strip p{color:var(--muted);font-size:12px;line-height:1.8;margin-top:9px}.prediction-strip textarea{font:13px/1.7 var(--font);margin-top:7px}.prediction-strip .prediction-hint{grid-column:2;margin:0;font-size:10px}.history-card{border:1px solid var(--line);border-radius:16px;background:var(--panel);padding:24px;overflow:hidden}.history-card .button-row button{font-size:11px}.chart-toolbar{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;margin-top:22px}.chart-toolbar .tabs button{font-size:11px}.chart-legend{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:11px;margin:15px 0 8px;color:var(--muted)}.chart-legend span:before{content:'';width:7px;height:7px;display:inline-block;background:var(--color,var(--app-accent));border-radius:50%;margin-right:6px}.chart-legend .baseline-key:before{width:20px;height:0;border-top:2px dashed var(--muted);border-radius:0}#historyChart{width:100%;height:250px;display:block}.hint{font-size:11px;line-height:1.8;color:var(--muted);margin-top:10px}.baseline-summary{display:flex;justify-content:space-between;gap:20px;align-items:center;background:color-mix(in srgb,var(--app-accent) 4%,var(--panel));border:1px solid var(--line);border-radius:10px;padding:16px;margin-top:20px}.baseline-summary .eyebrow{font-size:9px}.baseline-summary p{font-size:12px;line-height:1.8;margin-top:6px;color:var(--muted)}.baseline-summary button{font-size:11px;flex:none}.data-details{margin-top:15px}.table-wrap{overflow:auto;max-height:380px}.table-wrap table{border-collapse:collapse;width:100%;font:11px var(--mono);white-space:nowrap}.table-wrap th{text-align:left;background:var(--raised);position:sticky;top:0;font-weight:500;color:var(--fg)}.table-wrap td,.table-wrap th{padding:11px;border-bottom:1px solid var(--line)}.table-wrap caption{text-align:left;color:var(--muted);padding:10px;font:11px var(--font);white-space:normal}.learning-section{margin-top:35px}.trait-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;margin-top:18px}.trait-cards article{padding:22px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.trait-cards .trait-icon{font:23px var(--mono);color:var(--accent-text);margin-bottom:12px}.trait-cards h3{font-size:18px}.trait-cards p{font-size:12px;line-height:1.8;color:var(--muted);margin-top:9px}.trait-cards p b{color:var(--fg)}.rules-details{padding:0 20px;border:1px solid var(--line);border-radius:12px;margin-top:16px}.rules-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;padding:10px 0 24px}.rules-grid h3{font-size:15px}.rules-grid p,.rules-grid dd{font-size:12px;color:var(--muted);line-height:1.8;margin-top:10px}.rules-grid dl{margin:0}.rules-grid dt{font-size:12px;color:var(--accent-text)}.rules-grid dd{margin:2px 0 12px}.extinction{position:absolute;inset:0;background:#0d1b21e8;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:30px;text-align:center;z-index:4;color:#f2f4ed}.extinction strong{font-size:30px;letter-spacing:-.04em}.extinction p{font-size:13px;max-width:400px;color:#b5c5c9}.extinction .eyebrow{font-size:9px}.app-footer{font-size:10px}
@media(min-width:1500px){.app-main{padding-inline:35px}.habitat-wrap{height:550px}}
@media(max-width:1100px){.intro{gap:40px}.experiment-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.habitat-layout{grid-template-columns:minmax(0,1fr) 255px}.habitat-wrap{height:520px}.environment-fields{gap:18px}.environment-fields .field>span{font-size:11px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.setup-row{grid-template-columns:1fr 1fr auto}.setup-row p{grid-column:1/-1}.view-tools{flex-wrap:wrap}.color-legend{margin-left:auto}}
@media(max-width:800px){.intro{grid-template-columns:1fr;gap:24px;margin-bottom:32px}.intro-principles{grid-template-columns:repeat(3,1fr);gap:20px}.intro-principles article{display:block;border:0;padding:0}.intro-principles b{display:block;margin-bottom:10px}.intro-principles h2{font-size:14px}.intro-principles p{font-size:11px}.intro h1{font-size:55px}.workbench-heading{padding:20px;align-items:start;flex-wrap:wrap}.workbench-heading h2{font-size:22px}.habitat-layout{grid-template-columns:1fr}.field-notes{border-left:0;border-top:1px solid var(--line);display:grid;grid-template-columns:1fr 1fr}.inspector{border-right:1px solid var(--line);border-bottom:0}.habitat-wrap{height:440px}.stat-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.environment-fields{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 25px}.prediction-strip{gap:16px 25px}.history-card .section-heading{align-items:start;flex-wrap:wrap}.trait-cards{gap:10px}.trait-cards article{padding:18px}.scene-help{font-size:11px}.inline-label select,.inspector-heading select{font-size:16px}.transport .inline-label{margin-left:auto}}
@media(max-width:520px){.app-main{padding:25px 12px 35px}.app-header .badge{display:none}.intro{gap:24px;margin-bottom:30px}.intro h1{font-size:47px}.intro>div>p:not(.eyebrow){font-size:13px;margin-top:15px}.intro-principles{gap:10px}.intro-principles h2{font-size:12px;line-height:1.5}.intro-principles p{font-size:10px;line-height:1.7}.section-heading{align-items:start;flex-direction:column;gap:10px}.section-heading h2{font-size:23px}.section-heading>p{font-size:11px}.experiment-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:15px}.experiment-cards button{padding:13px;gap:6px}.experiment-cards .exp-icon{font-size:18px}.experiment-cards strong{font-size:12px}.experiment-cards small{font-size:10px}.workbench-heading{padding:18px 14px;gap:14px}.workbench-heading h2{font-size:20px}.workbench-heading .button-row{width:100%}.workbench-heading button{flex:1}.transport{padding:12px;gap:10px}.transport>.button-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;gap:7px}.transport button{font-size:11px;padding-inline:8px}.transport .primary{grid-column:span 2}.transport .inline-label{width:100%;margin:0;justify-content:space-between}.transport select{flex:1;max-width:230px}.view-tools{padding:12px;gap:10px}.view-tools>.button-row{width:100%}.view-tools button{flex:1;font-size:10px;padding-inline:8px}.season-heading{justify-content:space-between;width:100%}.habitat-wrap{height:400px}.habitat-badge{font-size:8px;left:12px;top:12px}.hover-card{max-width:165px;font-size:10px;top:auto;bottom:12px}.visual-tools{padding:7px 12px;gap:3px 14px}.visual-tools .inline-label{width:100%;justify-content:space-between}.visual-tools select{width:65%}.visual-tools .color-legend{margin:4px 0;width:100%}.scene-help{padding:4px 12px 12px;font-size:10px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stat{padding:12px}.stat strong{font-size:25px}.field-notes{grid-template-columns:1fr}.inspector{border:0;border-bottom:1px solid var(--line);padding:18px 14px}.inspector-heading{display:flex;align-items:center;gap:15px}.inspector-heading .eyebrow{font-size:9px;margin:0;flex:1}.inspector-heading select{max-width:190px;margin:0}.inspectorDetails{margin-top:15px}#inspectorDetails{margin-top:15px}.live-guide{padding:18px 14px}.environment-deck{padding:18px 14px}.deck-heading{align-items:start;flex-wrap:wrap}.environment-fields{gap:16px}.environment-fields .field>span{font-size:11px;display:block;min-height:37px}.environment-fields output{display:block;margin-top:4px}.field small{font-size:10px;line-height:1.7}.setup-row{grid-template-columns:1fr 1fr;gap:12px}.setup-row button,.setup-row p{grid-column:1/-1}.prediction-strip{grid-template-columns:1fr;padding:18px 15px;gap:16px}.prediction-strip .prediction-hint{grid-column:1}.prediction-strip textarea{font-size:16px}.prediction-strip h3{font-size:17px}.history-card{padding:18px 14px}.chart-toolbar .tabs{width:100%;gap:5px}.chart-toolbar .tabs button{flex:1;font-size:10px;padding-inline:6px}.chart-legend{font-size:10px;gap:8px 12px}#historyChart{height:230px}.baseline-summary{padding:14px;flex-direction:column;align-items:start;gap:12px}.baseline-summary p{font-size:11px}.baseline-summary button{font-size:10px}.trait-cards{grid-template-columns:1fr}.trait-cards article{padding:18px}.trait-cards .trait-icon{float:right}.trait-cards p{font-size:12px}.rules-grid{grid-template-columns:1fr;gap:23px}.rules-details{padding-inline:15px}.rules-details summary{font-size:11px}.extinction{padding:20px}.extinction strong{font-size:25px}.extinction p{font-size:12px}.status{font-size:11px}}
@media(max-height:520px) and (min-width:600px){.habitat-wrap{height:330px}}

.population-notes{display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;padding:12px 24px;font-size:11px;line-height:1.7;color:var(--muted);border-top:1px solid var(--line)}.renewal-row{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:24px;align-items:center;margin-top:18px;padding-top:15px;border-top:1px solid var(--line)}.renewal-row label{font-size:12px}.renewal-row select{margin-top:6px;font-size:13px}.renewal-row p{font-size:12px;line-height:1.7;color:var(--muted)}.setup-row{grid-template-columns:1fr 1fr 1fr auto}.setup-row p{grid-column:1/-1}.age-readout{display:flex;align-items:center;gap:8px;margin:9px 0;font-size:12px}.age-readout i{display:inline-block;width:13px;height:13px;border-radius:50%;border:1px solid #ffffff66}.color-legend i{width:65px;height:8px}.stat small{display:block}.color-legend{line-height:1.8}@media(max-width:520px){.population-notes{padding:12px 14px}.renewal-row{grid-template-columns:1fr;gap:10px}.renewal-row select{font-size:16px}.setup-row{grid-template-columns:1fr 1fr}.setup-row button{grid-column:auto}.inspector p,.live-guide p{font-size:12px}.color-legend{font-size:10px}}

.color-legend{flex-wrap:wrap;gap:5px 14px}.color-legend>span{display:inline-flex;align-items:center;gap:7px}.color-legend i{flex-shrink:0}

.replicates{margin-top:14px;border:1px solid var(--line);border-radius:10px;padding:16px;background:var(--panel)}
.replicate-head{display:flex;justify-content:space-between;gap:20px;align-items:center}
.replicates .eyebrow{font-size:9px}
.replicates p{font-size:12px;line-height:1.8;margin-top:6px;color:var(--muted)}
.replicate-actions{display:flex;gap:10px;align-items:center;flex:none;flex-wrap:wrap}
.replicate-actions button{font-size:11px;min-height:44px}
.replicate-actions select{min-height:44px}
.replicates .table-wrap{margin-top:12px}
.replicates td.extinct{color:var(--pink)}
@media (max-width:700px){.replicate-head{flex-direction:column;align-items:start;gap:12px}.replicates{padding:14px}.replicates p{font-size:11px}.replicate-actions select{font-size:16px}}
.chart-legend .legend-note:before{display:none}
.replicate-caption{font-size:11px!important;margin:0 0 6px!important}
