.chroma{z-index:10;padding:1.5rem var(--gutter) 3rem;gap:1.6rem;max-width:64rem;display:grid;position:relative}.chroma__title{font-size:clamp(2.4rem,6vw,4.2rem);line-height:.95}.chroma__lede{max-width:var(--measure);margin-top:.6rem}.chroma__label{color:var(--muted);justify-content:space-between;font-size:.85rem;display:flex}.chroma__top{gap:1.2rem var(--gutter);grid-template-columns:minmax(0,19rem) minmax(0,1fr);align-items:start;display:grid}.chroma__target{gap:.5rem;display:grid}.chroma__target-art{border:var(--rule) solid var(--ink);background:var(--paper-deep);padding:.8rem 1rem .3rem}.chroma__target-art .chroma__svg{width:100%;max-width:260px;margin:0 auto}.chroma__target-desc{min-height:1.4em;font-size:1rem}.chroma__panel{align-content:start;gap:.8rem;padding-top:1.7rem;display:grid}.chroma__hud{flex-wrap:wrap;gap:.4rem 1.4rem;font-size:.95rem;display:flex}.chroma__hud span{opacity:.7}.chroma__status{min-height:2.9em;max-width:var(--measure);color:var(--ink-soft)}.chroma__actions{flex-wrap:wrap;gap:.6rem;display:flex}.chroma__actions button,.chroma__actions a{border:var(--rule) solid var(--ink);background:var(--paper);cursor:pointer;border-radius:999px;padding:.45rem .9rem .4rem;line-height:1;text-decoration:none}.chroma__actions button:hover,.chroma__actions a:hover,.chroma__actions button:focus-visible,.chroma__actions a:focus-visible{background:var(--ink);color:var(--paper);outline:none}.chroma__actions button:disabled{cursor:default;opacity:.45;background:var(--paper);color:var(--ink)}.chroma__actions [data-chroma-mate]{background:var(--orange)}.chroma__actions [data-chroma-mate]:disabled{background:var(--paper)}.chroma__tank{gap:.5rem;display:grid}.chroma__pool{grid-template-columns:repeat(auto-fill,minmax(7.2rem,1fr));gap:.7rem;display:grid}.chroma__slot{position:relative}.chroma__card{border:var(--rule) solid var(--ink);background:var(--paper-deep);cursor:pointer;text-align:left;width:100%;transition:transform .16s var(--ease), box-shadow .16s ease, background .16s ease;border-radius:.6rem;padding:.35rem .35rem .3rem;display:grid;position:relative}.chroma__card:hover{transform:translateY(-2px)}.chroma__card:focus-visible{box-shadow:0 0 0 4px var(--blue);outline:none}.chroma__slot.is-selected .chroma__card{background:var(--orange-soft);box-shadow:0 0 0 3px var(--orange)}.chroma__slot.is-selected .chroma__card:focus-visible{box-shadow:0 0 0 3px var(--orange), 0 0 0 6px var(--blue)}.chroma__slot.is-winner .chroma__card{background:var(--blue-soft);box-shadow:0 0 0 3px var(--blue)}.chroma__card .chroma__svg{width:100%;height:auto}.chroma__tag{justify-content:space-between;gap:.3rem;font-size:.78rem;line-height:1.1;display:flex}.chroma__tag b{font-weight:400}.chroma__tag i{color:var(--muted);font-style:normal}.chroma__pick{border:var(--rule) solid var(--ink);background:var(--orange);border-radius:999px;place-items:center;width:1.5rem;height:1.5rem;font-size:.8rem;line-height:1;display:grid;position:absolute;top:-.55rem;left:-.45rem}.chroma__release{border:var(--rule) solid var(--ink);background:var(--paper);width:1.6rem;height:1.6rem;font-family:var(--font-display);cursor:pointer;opacity:.55;border-radius:999px;padding:0;font-size:.95rem;line-height:1;transition:opacity .12s;position:absolute;top:-.55rem;right:-.45rem}.chroma__slot:hover .chroma__release,.chroma__release:hover,.chroma__release:focus-visible{opacity:1;background:var(--ink);color:var(--paper);outline:none}.chroma__release:hover,.chroma__release:focus-visible{background:var(--orange);color:var(--ink)}.chroma__pool.is-dead .chroma__card{opacity:.6}@keyframes chroma-court{0%,to{transform:rotate(0)scale(1)}25%{transform:rotate(-6deg)scale(1.06)}75%{transform:rotate(6deg)scale(1.06)}}@keyframes chroma-hatch{0%{opacity:0;transform:scale(.6)translateY(8px)}to{opacity:1;transform:none}}.chroma__slot.is-mating .chroma__svg{transform-origin:50% 55%;animation:.32s ease-in-out 3 chroma-court}.chroma__slot.is-new .chroma__card{animation:chroma-hatch .42s var(--ease) both;animation-delay:calc(var(--i,0) * .11s)}.chroma__reveal[hidden]{display:none}.chroma__reveal{border:var(--rule) solid var(--ink);background:var(--blue-soft);gap:.9rem;padding:1.4rem;scroll-margin-top:3.5rem;display:grid}.chroma__reveal-title{font-size:clamp(1.4rem,3vw,2rem);line-height:1.1}.chroma__reveal-meta{color:var(--ink-soft);font-size:.85rem}.chroma__reveal h3{margin-top:.6rem;font-size:1.1rem;font-weight:400}.chroma__family{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.chroma__family figure{border:var(--rule) solid var(--ink);background:var(--paper);text-align:center;border-radius:.6rem;width:6rem;margin:0;padding:.3rem;font-size:.8rem}.chroma__family figure.is-winner{background:var(--orange-soft);box-shadow:0 0 0 3px var(--orange)}.chroma__op{font-size:1.4rem}.chroma__rules{gap:.2rem;display:grid}.chroma__rules li:before{content:"> ";font-family:var(--font-display);color:var(--blue)}.chroma__hint{max-width:var(--measure);color:var(--ink-soft);font-size:.95rem}.chroma__squares{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:1rem;display:grid}.chroma__square{border:var(--rule) solid var(--ink);background:var(--paper);gap:.5rem;margin:0;padding:.8rem;display:grid}.chroma__square figcaption{font-size:.95rem}.chroma__square figcaption b,.chroma__punnett{font-family:var(--font-mono);font-weight:500}.chroma__punnett{border-collapse:collapse;table-layout:fixed;width:100%;font-size:1.15rem}.chroma__punnett th,.chroma__punnett td{border:var(--rule) solid var(--ink);text-align:center;padding:.4rem .3rem;line-height:1.1}.chroma__punnett th{background:var(--paper-deep);width:2.6rem;font-weight:400}.chroma__punnett thead th:first-child{background:0 0;border-top-color:#0000;border-left-color:#0000}.chroma__punnett td small{font-family:var(--font-body);color:var(--muted);font-size:.7rem;display:block}.chroma__punnett td.is-hit{background:var(--orange)}.chroma__punnett td.is-hit small{color:var(--ink)}.chroma__rule{color:var(--ink-soft);font-size:.9rem}.chroma__rule b{font-family:var(--font-mono);border:1px solid var(--ink);border-radius:.25rem;padding:0 .15rem;font-weight:500}.chroma__notes{max-width:var(--measure);color:var(--ink-soft);gap:.5rem;font-size:.95rem;display:grid}@media (width<=720px){.chroma__top{grid-template-columns:1fr}.chroma__target-art .chroma__svg{max-width:200px}.chroma__panel{padding-top:0}.chroma__pool{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem .7rem}.chroma__release{opacity:.9}.chroma__reveal{padding:1rem}}@media (prefers-reduced-motion:reduce){.chroma__card,.chroma__release{transition:none}.chroma__card:hover{transform:none}.chroma__slot.is-mating .chroma__svg,.chroma__slot.is-new .chroma__card{animation:none}}