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