:root{color-scheme:dark;--ink:#e6eee6;--muted:#8b9d95;--green:#aff2bc;--coral:#ff9d7c;--line:#ffffff16;--panel:#111b19}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;background:#060b0b;color:var(--ink);font-family:'DM Sans','Noto Sans KR',sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button{border:0;background:none}button:disabled{opacity:.36;cursor:not-allowed}button:focus-visible,a:focus-visible{outline:2px solid var(--green);outline-offset:5px}button:hover:not(:disabled){filter:brightness(1.18)}[hidden]{display:none!important}#experiment{height:100dvh;min-height:400px;overflow:hidden;position:relative}#dish{display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 110px 20px #02070780}header{position:absolute;top:0;left:0;right:0;z-index:3;display:flex;align-items:center;justify-content:space-between;padding:30px 42px;pointer-events:none}.wordmark{display:flex;align-items:center;gap:11px;letter-spacing:3px;font-size:17px;font-weight:700;text-decoration:none;color:var(--ink);pointer-events:auto}.wordmark small{margin-left:22px;border-left:1px solid #ffffff25;padding-left:26px;letter-spacing:2px;font-size:9px;font-weight:400;color:#8d9c93}.brand-cell{width:17px;height:17px;border:1px solid var(--green);border-radius:48% 55% 41% 60%;box-shadow:0 0 14px #80dfa634;position:relative}.brand-cell:after{content:'';position:absolute;inset:5px;background:var(--green);border-radius:50%}nav{display:flex;align-items:center;gap:22px;pointer-events:auto}nav button{font-size:12px;color:#c0cbc2;padding:8px 0}nav button span{color:var(--coral);margin-left:8px}#sound,#help-open{width:24px;font-size:17px}#sound[aria-pressed=true]{color:var(--green)}.intro{position:absolute;z-index:2;left:10%;top:50%;transform:translateY(-44%);width:470px}.eyebrow{font-size:10px;letter-spacing:2.8px;color:var(--green);font-weight:600;line-height:1.8}.eyebrow i{display:inline-block;width:5px;height:5px;background:var(--coral);margin-right:10px;border-radius:50%}h1{font-size:clamp(35px,4.1vw,66px);line-height:1.3;letter-spacing:-3.4px;font-weight:500;margin:23px 0}h1 em{font-style:normal;color:var(--green)}.intro p{font-size:14px;line-height:1.95;color:#a6b4ab;margin:0 0 34px}.primary{display:inline-flex;align-items:center;justify-content:space-between;gap:45px;min-height:51px;padding:15px 24px;background:var(--coral);color:#1b251e;border:1px solid var(--coral);border-radius:3px;font-size:13px;font-weight:700}.primary span{font-size:19px;font-weight:400}.quiet{font-size:12px;color:#9daa9f;margin:14px 16px;padding:10px 0}.starter-note{font-size:10px;color:#778d7e;letter-spacing:.4px;margin-top:20px}footer{position:absolute;bottom:27px;left:42px;right:42px;display:flex;justify-content:space-between;font-size:9px;letter-spacing:2px;color:#6e8476;pointer-events:none}.field-controls{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);display:flex;gap:8px;align-items:center;background:#0b1311cf;border:1px solid #9ac4ab22;border-radius:30px;padding:6px 13px;backdrop-filter:blur(12px);opacity:.6;transition:opacity .2s;white-space:nowrap}.field-controls:hover,.field-controls:focus-within{opacity:1}.field-controls button{padding:6px 10px;font-size:11px}.field-controls span{height:15px;width:1px;background:var(--line);margin:0 4px}.field-controls #pause{font-size:15px}.touch-hint{position:absolute;bottom:92px;left:10%;right:10%;text-align:center;color:#9bb5a6;font-size:11px;pointer-events:none;animation:hint 8s both}.pause-label{position:absolute;top:50%;width:100%;text-align:center;font-size:12px;letter-spacing:4px;color:#bacabc;pointer-events:none}.playing header{opacity:.65}.playing .wordmark small{display:none}@keyframes hint{0%{opacity:0}10%,65%{opacity:.8}100%{opacity:0}}dialog{color:var(--ink);width:min(570px,calc(100% - 32px));max-height:calc(100dvh - 48px);padding:38px;border:1px solid #78948338;border-radius:7px;background:linear-gradient(140deg,#172420,#0d1513);box-shadow:0 28px 130px #000b;overflow:auto}dialog::backdrop{background:#030907aa;backdrop-filter:blur(6px)}dialog h2{font-size:28px;letter-spacing:-1.4px;font-weight:500;margin:12px 0 14px}dialog p{font-size:12px;line-height:1.9;color:#a8b9ad}dialog .close{position:absolute;top:15px;right:20px;font-size:25px;color:#7f9a87}dialog .primary{margin-top:20px}.evolution{width:min(1050px,calc(100% - 36px));padding:40px}.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:28px}.gene-card{display:flex;flex-direction:column;text-align:left;border:1px solid #acc5b728;border-radius:5px;overflow:hidden;padding:0;background:linear-gradient(155deg,#23382c80,#12221b60);position:relative;transition:transform .2s,border-color .2s}.gene-card:hover{transform:translateY(-5px);border-color:#bfe4b8!important}.gene-card.bonus{border-color:#c4a7ed70;background:linear-gradient(155deg,#342b4270,#13221b)}.card-top{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.4px;color:#83998a;padding:18px 19px 0}.card-top .bonus-label{color:#d4b5f7;letter-spacing:0}.gene-card canvas{width:100%;height:160px;display:block}.card-copy{padding:0 20px 20px}.card-copy h3{font-size:17px;margin:0 0 13px;font-weight:500;letter-spacing:-.7px}.card-copy p{font-size:11px;line-height:1.9;margin:0;min-height:40px;color:#c2d1c3}.card-cost{margin-top:auto;padding:13px 20px;font-size:10px;color:#90a38f;background:#050e0b40;border-top:1px solid #a0b3a112;line-height:1.7}.dialog-foot{display:flex;justify-content:space-between;color:#657e6d;font-size:10px;margin-top:24px}.dialog-foot span{letter-spacing:5px}.archive{width:min(850px,calc(100% - 32px))}.tabs{display:flex;gap:25px;margin:25px 0;border-bottom:1px solid var(--line)}.tabs button{padding:12px 0;color:var(--muted);font-size:12px}.tabs button.active{color:var(--green);border-bottom:1px solid var(--green)}.samples{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.sample{min-height:145px;border:1px solid var(--line);border-radius:4px;text-align:left;padding:12px;background:#ffffff02}.sample.selected{border-color:var(--green);background:#bde5b808}.sample canvas{display:block;width:100%;height:70px}.sample b{font-weight:500;font-size:12px;display:block}.sample small{font-size:10px;color:var(--muted);display:block;margin-top:5px;line-height:1.6}.muted{color:#83988b!important;font-size:11px!important}.notice{padding:12px;border:1px solid #e8ac6940;color:#e4b184!important}.record{border-bottom:1px solid var(--line);padding:17px 0}.record strong{font-weight:500;font-size:14px}.record time{float:right;font-size:10px;color:var(--muted)}.record p{font-size:11px;margin:8px 0}.record .path{font-size:10px;color:#a9bdac;line-height:1.9}.empty{padding:40px 10px;text-align:center;color:#88a08e;font-size:13px;line-height:2}.result{text-align:center}.result-glyph{font-size:65px;line-height:1.4;color:var(--green);margin:10px}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);margin:28px 0;border-block:1px solid var(--line);padding:20px 0;gap:10px}.result-stats b{font-size:24px;font-weight:400;display:block}.result-stats small{font-size:10px;color:var(--muted);display:block;margin-top:8px}.result-genes{font-size:11px;line-height:2;color:#b6cbb9}.result .quiet{display:block;margin:12px auto 0}#help ol{padding-left:20px}#help li{padding:10px 0}#help b{font-size:14px;font-weight:500;color:#cfe2cc}#help li p{margin:8px 0}#retire .quiet{display:block;margin:8px 0 0}.sample:disabled{opacity:.8}.gene-card canvas,.sample canvas{pointer-events:none}
@media(max-width:760px){header{padding:22px}.wordmark{font-size:15px;letter-spacing:2px}.wordmark small{display:none}nav{gap:16px}nav button{font-size:10px}.intro{left:8%;top:auto;bottom:17%;transform:none;width:84%;pointer-events:none}.intro button{pointer-events:auto}h1{font-size:42px;letter-spacing:-2.7px}.intro p{font-size:12px;margin-bottom:24px;text-shadow:0 2px 15px #000}.eyebrow{font-size:8px}.intro .quiet{margin-inline:10px;font-size:11px}.starter-note{margin-top:13px}footer{left:22px;right:22px;bottom:22px;font-size:7px;letter-spacing:1px}footer span:first-child{max-width:60%;line-height:1.8}.choices{gap:10px}.evolution{padding:25px}dialog h2{font-size:23px}.gene-card canvas{height:105px}.card-top{padding:12px 12px 0;font-size:8px}.card-copy{padding:0 12px 12px}.card-copy h3{font-size:13px}.card-copy p{font-size:10px}.card-cost{padding:10px 12px;font-size:9px}.dialog-foot{line-height:1.8}.dialog-foot span{display:none}.samples{grid-template-columns:repeat(2,1fr)}dialog{padding:27px}.playing header{opacity:.55}}
@media(max-width:540px){.choices{grid-template-columns:1fr;margin-top:17px}.evolution{max-height:calc(100dvh - 24px);padding:23px 20px}.gene-card{display:grid;grid-template-columns:92px 1fr;min-height:145px}.card-top{grid-column:1/-1;grid-row:1;padding:10px 13px 0}.gene-card canvas{grid-column:1;grid-row:2;height:90px;align-self:center}.card-copy{grid-column:2;grid-row:2;padding:10px 12px 7px}.card-copy h3{font-size:14px;margin-bottom:5px}.card-copy p{min-height:0}.card-cost{grid-column:1/-1;grid-row:3;padding:7px 12px}.evolution h2{font-size:21px;margin:8px 0}.evolution>p{font-size:11px;line-height:1.6}.dialog-foot{margin-top:14px;font-size:9px}.result-stats b{font-size:21px}#touch-hint{font-size:10px;line-height:1.9;bottom:82px}.intro{bottom:17%}h1{font-size:37px}.intro p{font-size:12px}.primary{min-height:46px;font-size:12px;padding:12px 19px;gap:30px}.intro .quiet{font-size:10px}nav{gap:11px}#archive-open span{display:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

.mutation-scene{position:absolute;z-index:2;left:8%;right:8%;bottom:15%;text-align:center;pointer-events:none;text-shadow:0 2px 18px #000}.mutation-scene .eyebrow{color:#d4b7ef}.mutation-scene h2{font-size:clamp(24px,3vw,38px);font-weight:500;letter-spacing:-1px;margin:12px 0;color:#eee6f7}.mutation-scene p{font-size:12px;color:#c0b0ca;line-height:1.8;margin:0 auto;max-width:520px}@media(max-width:540px){.mutation-scene{bottom:17%;left:6%;right:6%}.mutation-scene p{font-size:11px}}
.colony{width:min(820px,94vw)}.colony h3{font-size:14px;font-weight:500;margin:26px 0 10px}.colony-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ffffff12;border:1px solid #ffffff12;border-radius:4px;overflow:hidden}.colony-metrics>div{background:#12201b;padding:18px 14px}.colony-metrics strong{font-size:19px;font-weight:500;display:block;color:#c6ebce}.colony-metrics small{display:block;color:#93aa9c;font-size:10px;margin-top:6px}.colony .ability{padding:17px 0;border-bottom:1px solid #ffffff12}.colony .ability h3{margin:0 0 7px;font-size:15px}.ability span{color:#c8a5e8;font-size:11px}.colony .ability p{margin:9px 0 5px;font-size:12px}.ability small{color:#8fa69a;font-size:11px;line-height:1.7}.colony .bonus-note{padding:14px;background:#be92ea0c;border:1px solid #bd93d926;border-radius:4px;color:#c6afd8;font-size:11px;line-height:1.9}@media(max-width:540px){.colony-metrics{grid-template-columns:repeat(2,1fr)}.colony-metrics>div{padding:14px 11px}header{padding-inline:16px}nav{gap:8px}.wordmark{font-size:13px;gap:7px;letter-spacing:1.7px}#colony-open{font-size:10px}}

.role-counts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#ffffff12;border:1px solid #ffffff12}.role-counts>div{padding:15px;background:#14221c}.role-counts strong{display:block;color:#c6ebce;font-size:20px;font-weight:500}.role-counts small{display:block;color:#93aa9c;font-size:11px;margin-top:5px}.royal-detail small{overflow-wrap:anywhere}.colony .ability small{overflow-wrap:anywhere}@media(max-width:540px){.role-counts{grid-template-columns:repeat(2,1fr)}}