:root{--ink:#1b2a28;--ink-soft:#3d4f4c;--paper:#f3efe4;--paper-2:#e7efe8;--water:#2f5d62;--water-deep:#16383c;--gold:#b8862b;--koi:#c45c38;--line:#1b2a281f;--card:#fffcf6db;--shadow:0 18px 40px #16383c1f;--sans:"M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", "Yu Gothic UI", sans-serif;--heading:"Zen Maru Gothic", "M PLUS Rounded 1c", sans-serif}*{box-sizing:border-box}html,body{min-height:100%;margin:0}body{font-family:var(--sans);color:var(--ink);background:radial-gradient(1200px 500px at 10% -10%, #d7ece8 0%, transparent 55%), radial-gradient(900px 420px at 110% 0%, #f3e0c4 0%, transparent 50%), linear-gradient(180deg, #eef4ea 0%, var(--paper) 40%, #dfeae4 100%);letter-spacing:.02em;line-height:1.72}#root{min-height:100svh}code{background:#fffdf8;border-radius:6px;padding:1px 6px;font-family:ui-monospace,Consolas,monospace;font-size:.92em}.app-shell{max-width:1080px;margin:0 auto;padding:0 20px 48px}.topbar{z-index:8;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:linear-gradient(#eef4eaf2,#eef4eab3 70%,#0000);justify-content:space-between;align-items:center;gap:16px;padding:18px 0 12px;display:flex;position:sticky;top:0}.brand{color:var(--ink);font-family:var(--heading);letter-spacing:.04em;flex-wrap:wrap;align-items:center;gap:10px;font-weight:700;text-decoration:none;display:flex}.brand-text{font-size:clamp(1.28rem,3.4vw,1.7rem);line-height:1.2}.beta-badge{font-family:var(--sans);letter-spacing:.06em;color:var(--water-deep);white-space:nowrap;background:linear-gradient(#fffdf8 0%,#e8f3ef 100%);border:1px solid #2f5d6238;border-radius:999px;align-items:center;padding:4px 11px;font-size:12px;font-weight:700;display:inline-flex;box-shadow:inset 0 1px #fffc}.brand-fish{flex-shrink:0;align-items:center;line-height:0;display:flex}.topbar nav{flex-wrap:wrap;gap:6px;display:flex}.topbar nav a{color:var(--ink-soft);border-radius:999px;padding:8px 12px;font-weight:500;text-decoration:none}.topbar nav a.active{background:var(--water-deep);color:#f7f4ea}.hero-panel{border:1px solid var(--line);box-shadow:var(--shadow);background:linear-gradient(160deg,#fffffae6,#d6e8e2bf);border-radius:28px;margin-top:28px;padding:36px 32px}.eyebrow{color:var(--koi);letter-spacing:.1em;margin:0;font-size:12px;font-weight:700}h1,h2{font-family:var(--heading);letter-spacing:.03em;font-weight:700;line-height:1.45}.hero-panel h1{margin:8px 0 12px;font-size:clamp(28px,5vw,46px)}.lead,.page-head p{color:var(--ink-soft);max-width:42em}.hero-actions,.breed-pickers,.feature-grid,.catalog-grid,.match-grid{flex-wrap:wrap;gap:12px;display:flex}.hero-actions{margin-top:22px}.btn{border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;padding:12px 20px;font-weight:700;text-decoration:none;display:inline-flex}.btn.primary{background:var(--water-deep);color:#f6f1e4}.btn.ghost{border-color:var(--water);color:var(--water-deep);background:#ffffff80}.feature-grid{grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px;display:grid}.feature-grid article,.note-card,.recipe-card,.match-card,.target-summary,.owned-box{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:18px 18px 16px}.note-card{margin-top:18px}.note-card .note-section+.note-section{border-top:1px solid var(--line);margin-top:1.35rem;padding-top:1.35rem}.note-card ul{color:var(--ink-soft);margin:8px 0 0;padding-left:1.2em}.note-card li+li{margin-top:.45em}.page{padding-top:12px}.page-head h1{margin:0 0 6px;font-size:32px}.section-title{margin:28px 0 12px;font-size:22px}.picker{margin:16px 0;position:relative}.picker-label{margin-bottom:6px;font-weight:700;display:block}.picker-input{border:1px solid var(--line);width:100%;font:500 1rem/1.5 var(--sans);letter-spacing:.02em;background:#fffdf8;border-radius:14px;padding:12px 14px}.picker-chosen,.picker-list button{text-align:left;align-items:center;gap:10px;display:flex}.picker-chosen{border:1px solid var(--line);background:#fffdf8;border-radius:16px;padding:8px 12px}.picker-chosen .muted,.muted,.picker-list em{color:var(--ink-soft);font-size:13px;font-style:normal;display:block}.text-btn{color:var(--water);font:inherit;cursor:pointer;background:0 0;border:0;margin-left:auto;font-weight:700;text-decoration:none}.picker-list{border:1px solid var(--line);z-index:6;max-height:320px;box-shadow:var(--shadow);background:#fffdf8;border-radius:16px;margin:6px 0 0;padding:6px;list-style:none;position:absolute;left:0;right:0;overflow:auto}.picker-list.static{box-shadow:none;position:relative}.picker-list button{width:100%;font:inherit;cursor:pointer;background:0 0;border:0;border-radius:12px;padding:6px}.picker-list button:hover{background:var(--paper-2)}.fish-card{border:1px solid var(--line);color:inherit;font:inherit;text-align:left;background:#fffdf8;border-radius:18px;align-items:center;gap:10px;padding:10px;display:flex}.fish-card.compact{width:100%}button.fish-card{cursor:pointer}.fish-card.selected{outline:2px solid var(--gold)}.fish-card-text strong{display:block}.badge-row{flex-wrap:wrap;gap:6px;margin-top:6px;display:flex}.badge{color:var(--water-deep);background:#e4efe6;border-radius:999px;padding:2px 8px;font-size:11px}.badge.dim{color:#7a7468;background:#eee8dc}.target-summary{align-items:center;gap:16px;margin:18px 0;display:flex}.diff{color:var(--koi);font-weight:700}.check-row{align-items:center;gap:8px;margin:12px 0;display:flex}.chip-row{flex-wrap:wrap;gap:8px;margin:12px 0;display:flex}.chip{border:1px solid var(--line);font:inherit;cursor:pointer;background:#fffdf8;border-radius:999px;padding:6px 12px}.chip.on{background:var(--water-deep);color:#f6f1e4}.recipe-list{gap:14px;display:grid}.parents{align-items:center;gap:10px;display:flex}.parents .fish-card{flex:1 1 0;min-width:0}.parents .times{line-height:1;font-family:var(--heading);color:var(--gold);flex:none;justify-content:center;align-self:center;align-items:center;font-size:22px;font-weight:700;display:flex}.times{font-family:var(--heading);color:var(--gold);font-size:22px;font-weight:700}.times.big{align-self:end;margin-bottom:18px}.kind-tag{flex-wrap:wrap;justify-content:space-between;gap:8px;font-weight:700;display:flex}.warn{color:var(--koi)}.breed-pickers{grid-template-columns:1fr auto 1fr;align-items:start;gap:12px;display:grid}.seg{border:1px solid var(--line);background:#fffdf8;border-radius:999px;margin:8px 0 18px;padding:4px;display:inline-flex}.seg button{font:inherit;cursor:pointer;background:0 0;border:0;border-radius:999px;padding:8px 16px}.seg button.on{background:var(--water-deep);color:#f6f1e4}.trait-table{gap:8px;margin:0;padding:0;list-style:none;display:grid}.trait-table li{background:var(--card);border:1px solid var(--line);border-radius:14px;grid-template-columns:140px 1fr 72px;align-items:center;gap:8px 12px;padding:8px 12px;display:grid}.trait-table em{color:var(--ink-soft);grid-column:1/-1;font-size:12px}.bar{background:#e4e8df;border-radius:99px;height:8px;overflow:hidden}.bar i{background:linear-gradient(90deg, var(--water), var(--gold));height:100%;display:block}.match-grid,.catalog-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));align-items:stretch;gap:12px;display:grid}@keyframes catalog-fish-bounce{0%,to{transform:translateY(0)scale(1)}28%{transform:translateY(-11px)scale(1.04)}48%{transform:translateY(-2px)scale(1.01)}62%{transform:translateY(-7px)scale(1.02)}78%{transform:translateY(0)scale(1)}}.catalog-item{color:inherit;border-radius:18px;text-decoration:none;transition:transform .22s;display:flex}.catalog-item:hover,.catalog-item:focus-visible{transform:translateY(-5px)}.catalog-item .fish-card{flex:1;width:100%;min-height:118px;transition:box-shadow .22s,border-color .22s;box-shadow:0 2px 10px #24342c12}.catalog-item .fish-card>svg{transform-origin:bottom;flex-shrink:0}.catalog-item:hover .fish-card>svg,.catalog-item:focus-visible .fish-card>svg{animation:.55s catalog-fish-bounce}.catalog-item:hover .fish-card,.catalog-item:focus-visible .fish-card{border-color:color-mix(in srgb, var(--gold) 55%, var(--line));outline:none;box-shadow:0 12px 28px #24342c24}.catalog-item .fish-card-text{flex-direction:column;flex:1;min-width:0;display:flex}.catalog-item .fish-card-text strong{-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.7em;line-height:1.35;display:-webkit-box;overflow:hidden}.catalog-item .fish-card-text .muted{white-space:nowrap;text-overflow:ellipsis;font-size:12px;overflow:hidden}.catalog-item .badge-row{align-content:flex-start;min-height:50px;margin-top:auto}.variety-actions{margin-top:8px}.placeholder-pair{text-align:center;padding:28px}.genotype-panel,.tree-panel{background:var(--card);border:1px solid var(--line);border-radius:20px;margin-bottom:18px;padding:16px 18px}.genotype-dl{gap:10px;margin:10px 0 0;display:grid}.genotype-dl div{gap:4px;display:grid}.genotype-dl dt{color:var(--ink-soft);font-size:13px;font-weight:700}.genotype-dl dd{margin:0;font-size:14px;line-height:1.5}.tip-box{color:var(--ink-soft);background:#fffdf8;border-radius:12px;margin-top:10px;padding:10px 12px;font-size:14px}.tree-list{gap:12px;margin:0;padding:0;list-style:none;display:grid}.tree-list li{border:1px solid var(--line);background:#fffdf8;border-radius:14px;padding:12px 14px}.tree-tag{background:var(--water-deep);color:#f6f1e4;border-radius:999px;margin-bottom:6px;padding:2px 8px;font-size:11px;font-weight:700;display:inline-block}.tree-list p{color:var(--ink-soft);margin:6px 0 0;font-size:14px}.site-foot{color:var(--ink-soft);margin-top:40px;font-size:13px}.site-copy{letter-spacing:.04em;opacity:.85;font-size:12px}@media (width<=800px){.feature-grid,.breed-pickers{grid-template-columns:1fr}.parents{flex-direction:column;align-items:stretch}.parents .times{align-self:center}.times.big{display:none}.topbar{flex-direction:column;align-items:flex-start}.is-home .topbar nav{display:none}.trait-table li{grid-template-columns:1fr 70px}.trait-table .bar{grid-column:1/-1}}