/* ==========================================================
   PetYearsCalc — design system
   ========================================================== */
:root{
  --bg:#FFF8F1;
  --bg-2:#FFEFE3;
  --surface:#FFFFFF;
  --surface-2:#FFF4EA;
  --ink:#1E1B2E;
  --ink-2:#3A3650;
  --muted:#6B6780;
  --line:#F0E2D5;
  --brand:#FF6B4A;
  --brand-ink:#E0482A;
  --brand-soft:#FFE1D8;
  --violet:#7C5CFF;
  --violet-soft:#ECE6FF;
  --mint:#18B79A;
  --mint-soft:#D6F5EE;
  --sun:#FFB930;
  --sun-soft:#FFF0CC;
  --sky:#3A9BFF;
  --sky-soft:#DDEEFF;
  --shadow-sm:0 1px 2px rgba(30,27,46,.06),0 2px 8px rgba(30,27,46,.05);
  --shadow:0 2px 6px rgba(30,27,46,.05),0 12px 32px rgba(30,27,46,.08);
  --shadow-lg:0 20px 60px rgba(30,27,46,.14);
  --radius:22px;
  --radius-sm:14px;
  --maxw:1180px;
  --font-head:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --font-body:"Plus Jakarta Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#13111D;--bg-2:#1A1727;--surface:#1E1B2C;--surface-2:#252136;--ink:#F5F2FB;--ink-2:#D9D4E8;--muted:#A49EBA;--line:#2E2A42;
    --brand:#FF7A5C;--brand-ink:#FF8E74;--brand-soft:#3A2323;--violet:#9B82FF;--violet-soft:#2A2445;--mint:#35D3B4;--mint-soft:#15332D;--sun:#FFC34F;--sun-soft:#382C14;--sky:#5DAEFF;--sky-soft:#172A40;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 12px 32px rgba(0,0,0,.35);--shadow-lg:0 20px 60px rgba(0,0,0,.5);color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#13111D;--bg-2:#1A1727;--surface:#1E1B2C;--surface-2:#252136;--ink:#F5F2FB;--ink-2:#D9D4E8;--muted:#A49EBA;--line:#2E2A42;
  --brand:#FF7A5C;--brand-ink:#FF8E74;--brand-soft:#3A2323;--violet:#9B82FF;--violet-soft:#2A2445;--mint:#35D3B4;--mint-soft:#15332D;--sun:#FFC34F;--sun-soft:#382C14;--sky:#5DAEFF;--sky-soft:#172A40;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);--shadow:0 12px 32px rgba(0,0,0,.35);--shadow-lg:0 20px 60px rgba(0,0,0,.5);color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background .4s var(--ease),color .4s var(--ease)}
img,svg{display:block;max-width:100%}
a{color:var(--brand-ink);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:var(--brand)}
h1,h2,h3,h4{font-family:var(--font-head);line-height:1.12;letter-spacing:-.02em;margin:0 0 .5em;color:var(--ink);text-wrap:balance}
h1{font-size:clamp(2.1rem,5.2vw,3.7rem);font-weight:800}
h2{font-size:clamp(1.6rem,3.4vw,2.35rem);font-weight:750}
h3{font-size:1.25rem;font-weight:700}
p{margin:0 0 1em}
.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 20px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:10px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:8px}
.icon{width:1em;height:1em;flex:none}

/* ---------- header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--shadow-sm)}
.nav{display:flex;align-items:center;gap:16px;height:68px}
.logo{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-weight:800;font-size:1.35rem;color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo-mark{width:38px;height:38px;border-radius:12px;background:linear-gradient(135deg,var(--brand),var(--violet));display:grid;place-items:center;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 40%,transparent);transition:transform .5s var(--ease)}
.logo:hover .logo-mark{transform:rotate(-12deg) scale(1.06)}
.logo-mark svg{width:22px;height:22px}
.logo span b{color:var(--brand)}
.nav-links{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav-links a{color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.95rem;padding:8px 14px;border-radius:999px;transition:background .2s,color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.icon-btn{width:42px;height:42px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .2s var(--ease),background .2s}
.icon-btn:hover{transform:translateY(-2px)}
.icon-btn svg{width:20px;height:20px}
.theme-toggle .moon{display:none}
:root[data-theme="dark"] .theme-toggle .sun{display:none}
:root[data-theme="dark"] .theme-toggle .moon{display:block}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-toggle .sun{display:none}:root:not([data-theme="light"]) .theme-toggle .moon{display:block}}
.menu-btn{display:none}
.mobile-nav{display:none}
@media (max-width:860px){
  .nav-links{display:none}
  .menu-btn{display:grid;margin-left:auto}
  .mobile-nav{display:block;position:fixed;inset:68px 0 auto 0;background:var(--bg);border-bottom:1px solid var(--line);padding:12px 20px 22px;transform:translateY(-12px);opacity:0;visibility:hidden;transition:all .3s var(--ease);box-shadow:var(--shadow);max-height:calc(100dvh - 68px);overflow:auto}
  .mobile-nav.open{transform:none;opacity:1;visibility:visible}
  .mobile-nav a{display:block;padding:12px 6px;color:var(--ink);text-decoration:none;font-weight:600;border-bottom:1px solid var(--line)}
  .mobile-nav a:last-child{border:0}
}

/* ---------- buttons & chips ---------- */
.btn{--b:var(--brand);display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--b);color:#fff;border:0;border-radius:999px;padding:14px 26px;font:700 1rem/1 var(--font-body);cursor:pointer;text-decoration:none;position:relative;overflow:hidden;transition:transform .25s var(--ease),box-shadow .25s var(--ease),background .2s;box-shadow:0 8px 22px color-mix(in srgb,var(--b) 35%,transparent)}
.btn:hover{transform:translateY(-2px);color:#fff;box-shadow:0 14px 30px color-mix(in srgb,var(--b) 45%,transparent)}
.btn:active{transform:translateY(0) scale(.98)}
.btn svg{width:18px;height:18px}
.btn.ghost{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm);border:1px solid var(--line)}
.btn.ghost:hover{color:var(--ink)}
.btn.small{padding:10px 18px;font-size:.9rem}
.btn .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.45);animation:ripple .6s linear;pointer-events:none}
@keyframes ripple{to{transform:scale(4);opacity:0}}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;font-size:.82rem;font-weight:700;background:var(--brand-soft);color:var(--brand-ink)}
.chip.violet{background:var(--violet-soft);color:var(--violet)}
.chip.mint{background:var(--mint-soft);color:var(--mint)}
.chip.sun{background:var(--sun-soft);color:#A76A00}
:root[data-theme="dark"] .chip.sun{color:var(--sun)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .chip.sun{color:var(--sun)}}
.chip.sky{background:var(--sky-soft);color:var(--sky)}

/* ---------- hero ---------- */
.hero{position:relative;padding:72px 0 56px;overflow:hidden}
.hero .container{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hero p.lead{font-size:1.18rem;color:var(--ink-2);max-width:40ch}
.hero h1 .grad{background:linear-gradient(100deg,var(--brand) 10%,var(--violet) 90%);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-stats{display:flex;gap:28px;margin-top:34px;flex-wrap:wrap}
.hero-stats div{font-size:.9rem;color:var(--muted);font-weight:600}
.hero-stats b{display:block;font-family:var(--font-head);font-size:1.9rem;color:var(--ink);line-height:1.1}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;z-index:0;animation:float 14s ease-in-out infinite}
.blob.b1{width:420px;height:420px;background:var(--brand-soft);top:-120px;right:-80px}
.blob.b2{width:360px;height:360px;background:var(--violet-soft);bottom:-160px;left:-120px;animation-delay:-5s}
.blob.b3{width:220px;height:220px;background:var(--sun-soft);top:40%;left:45%;animation-delay:-9s}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-20px) scale(1.06)}66%{transform:translate(-20px,20px) scale(.96)}}
.paw-trail{position:absolute;inset:0;pointer-events:none;z-index:1}
.paw-trail svg{position:absolute;width:26px;height:26px;color:var(--brand);opacity:0;animation:pawstep 7s ease-in-out infinite}
@keyframes pawstep{0%,100%{opacity:0;transform:scale(.6) rotate(var(--r,0deg))}15%,55%{opacity:.18;transform:scale(1) rotate(var(--r,0deg))}}

/* hero visual card */
.hero-card{background:var(--surface);border-radius:28px;padding:26px;box-shadow:var(--shadow-lg);border:1px solid var(--line);position:relative;animation:bob 6s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-10px) rotate(1deg)}}
.hero-card .mini-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;border-bottom:1px dashed var(--line)}
.hero-card .mini-row:last-child{border:0}
.hero-card .pet{display:flex;align-items:center;gap:12px;font-weight:700}
.hero-card .pet i{width:44px;height:44px;border-radius:14px;display:grid;place-items:center}
.hero-card .pet i svg{width:24px;height:24px}
.hero-card .val{font-family:var(--font-head);font-weight:800;font-size:1.4rem}
.hero-card .val small{font-size:.8rem;color:var(--muted);font-family:var(--font-body);font-weight:600;margin-left:4px}
.floaty{position:absolute;background:var(--surface);border-radius:16px;box-shadow:var(--shadow);padding:10px 14px;font-weight:700;font-size:.85rem;display:flex;gap:8px;align-items:center;border:1px solid var(--line)}
.floaty.f1{top:-22px;left:-26px;animation:bob 5s ease-in-out infinite reverse}
.floaty.f2{bottom:-20px;right:-18px;animation:bob 7s ease-in-out infinite}
.floaty svg{width:18px;height:18px}

@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.hero{padding:44px 0 36px}.hero-visual{max-width:460px;margin:10px auto 0;width:100%}.floaty.f1{left:-6px}.floaty.f2{right:-4px}}

/* ---------- sections ---------- */
section{padding:64px 0}
.section-head{max-width:720px;margin-bottom:34px}
.section-head.center{text-align:center;margin-inline:auto}
.eyebrow{font-weight:800;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:10px;display:block}
.muted{color:var(--muted)}

/* tool filter + grid */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin-bottom:26px}
.search{position:relative;flex:1;min-width:240px;max-width:420px}
.search input{width:100%;padding:14px 18px 14px 46px;border-radius:999px;border:1.5px solid var(--line);background:var(--surface);color:var(--ink);font:500 1rem var(--font-body);transition:border-color .2s,box-shadow .2s}
.search input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--muted)}
.filters{display:flex;gap:8px;flex-wrap:wrap}
.filter{border:1.5px solid var(--line);background:var(--surface);color:var(--ink-2);padding:9px 16px;border-radius:999px;font:700 .9rem var(--font-body);cursor:pointer;transition:all .2s var(--ease)}
.filter:hover{border-color:var(--brand)}
.filter.active{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.tool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.tool-card{--c:var(--brand);--cs:var(--brand-soft);position:relative;display:flex;flex-direction:column;gap:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;text-decoration:none;color:var(--ink);overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s}
.tool-card::after{content:"";position:absolute;inset:auto -40% -60% auto;width:180px;height:180px;border-radius:50%;background:var(--cs);opacity:0;transition:opacity .4s,transform .6s var(--ease);transform:scale(.6)}
.tool-card:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:color-mix(in srgb,var(--c) 45%,var(--line));color:var(--ink)}
.tool-card:hover::after{opacity:.7;transform:scale(1)}
.tool-card>*{position:relative;z-index:1}
.tool-card .ti{width:52px;height:52px;border-radius:16px;background:var(--cs);color:var(--c);display:grid;place-items:center;transition:transform .5s var(--ease)}
.tool-card:hover .ti{transform:rotate(-10deg) scale(1.08)}
.tool-card .ti svg{width:28px;height:28px}
.tool-card h3{font-size:1.1rem;margin:4px 0 0}
.tool-card p{font-size:.93rem;color:var(--muted);margin:0;flex:1}
.tool-card .go{font-weight:700;font-size:.9rem;color:var(--c);display:flex;align-items:center;gap:6px}
.tool-card .go svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.tool-card:hover .go svg{transform:translateX(5px)}
.tool-card .tag{position:absolute;top:18px;right:18px;z-index:2}
.tool-card.hide{display:none}
.c-brand{--c:var(--brand);--cs:var(--brand-soft)}
.c-violet{--c:var(--violet);--cs:var(--violet-soft)}
.c-mint{--c:var(--mint);--cs:var(--mint-soft)}
.c-sun{--c:#D98A00;--cs:var(--sun-soft)}
.c-sky{--c:var(--sky);--cs:var(--sky-soft)}
.empty{display:none;text-align:center;color:var(--muted);padding:30px}

/* features */
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.feature{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.feature .ti{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-bottom:14px}
.feature .ti svg{width:24px;height:24px}
.feature p{color:var(--muted);margin:0;font-size:.96rem}
@media (max-width:860px){.features{grid-template-columns:1fr}}

/* myth band */
.band{background:linear-gradient(120deg,var(--ink) 0%,#2B2545 100%);color:#F5F2FB;border-radius:32px;padding:48px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:center;position:relative;overflow:hidden}
.band h2{color:#fff}
.band p{color:#CFC9E2}
.band .eyebrow{color:var(--sun)}
.band::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;background:radial-gradient(circle,rgba(255,107,74,.35),transparent 70%);right:-80px;top:-100px}
.compare{display:grid;gap:12px;position:relative}
.compare-row{display:grid;grid-template-columns:90px 1fr 60px;gap:12px;align-items:center;font-weight:700;font-size:.92rem}
.compare-row .bar{height:12px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.compare-row .bar i{display:block;height:100%;border-radius:inherit;width:0;transition:width 1.4s var(--ease)}
.band.in .compare-row .bar i{width:var(--w)}
@media (max-width:860px){.band{grid-template-columns:1fr;padding:30px 22px;border-radius:24px}}

/* ---------- tool page ---------- */
.crumbs{font-size:.88rem;color:var(--muted);display:flex;gap:8px;flex-wrap:wrap;padding-top:22px}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand)}
.tool-hero{padding:24px 0 10px;position:relative}
.tool-hero h1{font-size:clamp(1.9rem,4.4vw,3rem);max-width:22ch}
.tool-hero .lead{font-size:1.1rem;color:var(--ink-2);max-width:62ch}
.meta-row{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0 6px}
.layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:36px;align-items:start;padding-bottom:40px}
.layout aside{position:sticky;top:90px;display:grid;gap:18px}
@media (max-width:1000px){.layout{grid-template-columns:minmax(0,1fr)}.layout aside{position:static}}

.calc{background:var(--surface);border:1px solid var(--line);border-radius:28px;box-shadow:var(--shadow);overflow:hidden;margin:18px 0 28px}
.calc-head{display:flex;align-items:center;gap:12px;padding:18px 24px;background:linear-gradient(100deg,var(--brand-soft),var(--violet-soft));border-bottom:1px solid var(--line)}
.calc-head .ti{width:40px;height:40px;border-radius:12px;background:var(--surface);display:grid;place-items:center;color:var(--brand)}
.calc-head .ti svg{width:22px;height:22px}
.calc-head strong{font-family:var(--font-head);font-size:1.1rem}
.calc-body{padding:24px}
.fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.fields .full{grid-column:1/-1}
@media (max-width:560px){.fields{grid-template-columns:1fr}.calc-body{padding:18px}}
.field label,.field .lbl{display:block;font-weight:700;font-size:.9rem;margin-bottom:8px;color:var(--ink-2)}
.field .hint{font-size:.8rem;color:var(--muted);margin-top:6px}
.input,.select{width:100%;padding:13px 16px;border-radius:14px;border:1.5px solid var(--line);background:var(--surface-2);color:var(--ink);font:600 1rem var(--font-body);transition:border-color .2s,box-shadow .2s,background .2s;appearance:none;-webkit-appearance:none}
.select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B6780' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:42px}
.input:focus,.select:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft);background:var(--surface)}
.input-group{display:flex;gap:10px}
.input-group .input{flex:1}
.input-group .select{width:auto;flex:none}
.range-wrap{display:flex;align-items:center;gap:14px}
input[type=range]{flex:1;-webkit-appearance:none;appearance:none;height:8px;border-radius:999px;background:linear-gradient(90deg,var(--brand) var(--p,30%),var(--line) var(--p,30%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--brand);box-shadow:var(--shadow-sm);cursor:grab;transition:transform .15s}
input[type=range]::-webkit-slider-thumb:active{transform:scale(1.15)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#fff;border:4px solid var(--brand);cursor:grab}
.range-val{min-width:74px;text-align:center;font-weight:800;font-family:var(--font-head);background:var(--brand-soft);color:var(--brand-ink);border-radius:12px;padding:8px 10px}

.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{margin:0;cursor:pointer}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;border:1.5px solid var(--line);background:var(--surface-2);font-weight:700;font-size:.9rem;color:var(--ink-2);transition:all .2s var(--ease)}
.seg span small{font-weight:600;color:var(--muted);font-size:.78rem}
.seg input:checked+span{border-color:var(--brand);background:var(--brand-soft);color:var(--brand-ink);transform:translateY(-1px)}
.seg input:checked+span small{color:var(--brand-ink)}
.seg input:focus-visible+span{outline:3px solid var(--violet);outline-offset:2px}

.opt-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.opt-cards label{margin:0;cursor:pointer;display:block}
.opt-cards input{position:absolute;opacity:0;pointer-events:none}
.opt-cards .oc{display:block;height:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface-2);transition:all .2s var(--ease)}
.opt-cards .oc b{display:block;font-size:.92rem}
.opt-cards .oc small{display:block;color:var(--muted);font-size:.8rem;line-height:1.4;margin-top:3px}
.opt-cards input:checked+.oc{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 18%,transparent)}
.opt-cards input:focus-visible+.oc{outline:3px solid var(--violet);outline-offset:2px}

.calc-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap}

/* result */
.result{margin-top:24px;border-radius:22px;background:var(--surface-2);border:1px solid var(--line);padding:0;overflow:hidden;max-height:0;opacity:0;transform:translateY(10px);transition:max-height .7s var(--ease),opacity .5s var(--ease),transform .5s var(--ease),padding .5s}
.result.show{max-height:1600px;opacity:1;transform:none;padding:24px}
.result-top{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.ring{--p:0;width:132px;height:132px;flex:none;border-radius:50%;background:conic-gradient(var(--brand) calc(var(--p)*1%),var(--line) 0);display:grid;place-items:center;transition:--p 1.2s}
.ring-in{width:104px;height:104px;border-radius:50%;background:var(--surface);display:grid;place-items:center;text-align:center}
.ring-in b{font-family:var(--font-head);font-size:2.2rem;line-height:1}
.ring-in small{display:block;font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.result-main{flex:1;min-width:220px}
.result-main .big{font-family:var(--font-head);font-size:clamp(1.6rem,3.6vw,2.2rem);font-weight:800;line-height:1.15;margin:4px 0 8px}
.result-main .big em{font-style:normal;color:var(--brand)}
.result-main p{margin:0;color:var(--ink-2)}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:12px;margin-top:20px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.stat small{display:block;color:var(--muted);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.06em}
.stat b{font-family:var(--font-head);font-size:1.3rem}
.timeline{margin-top:20px}
.timeline .track{position:relative;height:14px;border-radius:999px;background:linear-gradient(90deg,var(--mint) 0 var(--s1),var(--sky) var(--s1) var(--s2),var(--violet) var(--s2) var(--s3),var(--sun) var(--s3) var(--s4),var(--brand) var(--s4) 100%);opacity:.9}
.timeline .dot{position:absolute;top:50%;width:26px;height:26px;border-radius:50%;background:var(--surface);border:5px solid var(--ink);transform:translate(-50%,-50%);left:0;transition:left 1.3s var(--ease);box-shadow:var(--shadow)}
.timeline .labels{display:flex;justify-content:space-between;font-size:.74rem;color:var(--muted);font-weight:700;margin-top:10px;gap:4px}
.tips{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.tips li{display:flex;gap:10px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.tips li svg{width:20px;height:20px;color:var(--mint);flex:none;margin-top:2px}
.result-foot{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
.error{color:var(--brand-ink);font-weight:700;font-size:.9rem;margin-top:12px;min-height:1px}

/* article */
.prose{font-size:1.04rem}
.prose h2{margin-top:1.6em;font-size:clamp(1.45rem,3vw,1.9rem)}
.prose h3{margin-top:1.4em}
.prose ul,.prose ol{padding-left:1.25em}
.prose li{margin:.35em 0}
.answer-box{background:linear-gradient(120deg,var(--mint-soft),var(--sky-soft));border-radius:20px;padding:20px 22px;margin:8px 0 24px;border:1px solid var(--line)}
.answer-box strong{display:flex;align-items:center;gap:8px;font-family:var(--font-head);font-size:1.05rem;margin-bottom:6px}
.answer-box strong svg{width:20px;height:20px;color:var(--mint)}
.answer-box p{margin:0}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:18px;background:var(--surface);margin:14px 0 24px;-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;font-size:.95rem;min-width:420px}
caption{caption-side:top;text-align:left;padding:14px 16px 4px;font-weight:700;color:var(--muted);font-size:.85rem}
th,td{padding:11px 16px;text-align:left;border-bottom:1px solid var(--line)}
th{font-family:var(--font-head);font-size:.88rem;background:var(--surface-2);position:sticky;top:0}
tbody tr{transition:background .2s}
tbody tr:hover{background:var(--surface-2)}
tbody tr:last-child td{border-bottom:0}
td b{color:var(--brand-ink)}
.formula{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:var(--surface-2);border:1px dashed var(--line);border-radius:14px;padding:14px 16px;font-size:.93rem;overflow-x:auto}
.faq{display:grid;gap:10px;margin-top:10px}
.faq details{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;transition:box-shadow .3s}
.faq details[open]{box-shadow:var(--shadow-sm)}
.faq summary{list-style:none;cursor:pointer;padding:16px 52px 16px 18px;font-weight:700;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:18px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:var(--brand-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E0482A' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center/14px no-repeat;transition:transform .3s var(--ease)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 18px 16px;color:var(--ink-2)}
.faq .a p:last-child{margin:0}
.sources{font-size:.9rem;color:var(--muted)}
.sources li{margin:.3em 0}
.side-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px}
.side-card h3{font-size:1.02rem;margin-bottom:12px}
.side-links{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.side-links a{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:12px;color:var(--ink-2);text-decoration:none;font-weight:600;font-size:.92rem;transition:background .2s,transform .2s}
.side-links a:hover{background:var(--surface-2);color:var(--ink);transform:translateX(3px)}
.side-links a i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none}
.side-links a i svg{width:17px;height:17px}
.toc a{font-size:.9rem}
.note{font-size:.88rem;color:var(--muted);background:var(--surface-2);border-radius:14px;padding:12px 14px;border:1px solid var(--line)}
.breed-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:14px 0 22px}
.breed-facts div{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px 16px}
.breed-facts small{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.breed-facts b{font-family:var(--font-head);font-size:1.12rem}
.ad-slot{display:none}

/* related */
.related{padding:30px 0 60px}

/* page (static) */
.page{padding:30px 0 70px;max-width:820px}

/* footer */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:54px 0 28px;margin-top:40px}
.foot-grid{display:grid;grid-template-columns:1.3fr 1fr 1.3fr 1fr 1fr;gap:26px}
.site-footer h4{font-size:.95rem;margin-bottom:12px}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{color:var(--muted);text-decoration:none;font-size:.93rem}
.site-footer a:hover{color:var(--brand)}
.foot-bottom{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:36px;padding-top:20px;font-size:.85rem;color:var(--muted)}
@media (max-width:860px){.foot-grid{grid-template-columns:1fr 1fr}.foot-grid>div:first-child{grid-column:1/-1}}

/* toast + back to top */
.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,30px);background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:999px;font-weight:700;font-size:.92rem;opacity:0;pointer-events:none;transition:all .35s var(--ease);z-index:90}
.toast.show{opacity:1;transform:translate(-50%,0)}
.to-top{position:fixed;right:20px;bottom:20px;z-index:40;opacity:0;visibility:hidden;transform:translateY(10px);transition:all .3s var(--ease)}
.to-top.show{opacity:1;visibility:visible;transform:none}

/* reveal animations */
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}
.pop-in{animation:popin .7s var(--ease) both}
@keyframes popin{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.wiggle{animation:wiggle .6s var(--ease)}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
}
@media print{.site-header,.site-footer,aside,.calc-actions,.result-foot,.to-top{display:none!important}body{background:#fff}}

@media (max-width:860px){.theme-toggle{margin-left:auto}.menu-btn{margin-left:0}}
@media (max-width:560px){
  .hero-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .hero-stats b{font-size:1.6rem}
  .hero-card{padding:18px}
  .hero-card .pet{font-size:.92rem;gap:10px}
  .hero-card .pet i{width:38px;height:38px}
  .hero-card .val{font-size:1.2rem;white-space:nowrap}
  .hero-card .val small{display:none}
  .result.show{padding:18px}
  .ring{width:112px;height:112px}.ring-in{width:88px;height:88px}.ring-in b{font-size:1.8rem}
  .band h2{font-size:1.7rem}
}
.hero-card .val{white-space:nowrap}
@media (max-width:560px){.stat b{font-size:1.1rem}.stat{padding:12px}}
/* horse incisor diagram */
.jaw-fig{margin:22px 0;padding:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);text-align:center}
.jaw-fig svg{width:100%;max-width:440px;height:auto;display:block;margin:0 auto}
.jaw-fig figcaption{color:var(--muted);font-size:.9rem;margin-top:8px}
.jaw-fig .jt{stroke:var(--ink-2);stroke-width:1.5}
.jaw-fig .t-c{fill:var(--brand-soft)}.jaw-fig .t-i{fill:var(--violet-soft)}.jaw-fig .t-k{fill:var(--mint-soft)}
.jaw-fig .jcup{fill:var(--ink-2);opacity:.75}
.jaw-fig .jline{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3}
.jaw-fig .jlab{fill:var(--ink);font:700 14px var(--font-body)}
.jaw-fig .jmuted{fill:var(--muted);font:600 12px var(--font-body)}
/* bearded dragon tools */
.bd-mode[hidden]{display:none}
.ratio{display:flex;height:34px;border-radius:999px;overflow:hidden;margin-top:18px;border:1px solid var(--line);font-size:.8rem;font-weight:800}
.ratio span{display:flex;align-items:center;justify-content:center;white-space:nowrap;overflow:hidden;padding:0 8px;min-width:0}
.ratio .ins{background:var(--sun-soft);color:#8A5A00}
.ratio .veg{background:var(--mint-soft);color:#0B7A66}
:root[data-theme="dark"] .ratio .ins{color:var(--sun)}:root[data-theme="dark"] .ratio .veg{color:var(--mint)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ratio .ins{color:var(--sun)}:root:not([data-theme="light"]) .ratio .veg{color:var(--mint)}}
.plan{margin:0;padding-left:1.3em;color:var(--ink-2);font-size:.95rem}
.plan li{margin:.3em 0}
.growth-fig{margin:22px 0;padding:18px 18px 12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
.growth-fig svg{width:100%;height:auto;display:block}
.growth-fig figcaption{color:var(--muted);font-size:.9rem;margin-top:8px}
.growth-fig .g-grid{stroke:var(--line);stroke-width:1}
.growth-fig .g-axis{stroke:var(--muted);stroke-width:1.2}
.growth-fig .g-band{fill:var(--mint);opacity:.18}
.growth-fig .g-edge{fill:none;stroke:var(--mint);stroke-width:1.2;stroke-dasharray:4 4;opacity:.8}
.growth-fig .g-line{fill:none;stroke:var(--mint);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.growth-fig .g-dot{fill:var(--surface);stroke:var(--mint);stroke-width:2.5}
.growth-fig .g-full{stroke:var(--brand);stroke-width:1.5;stroke-dasharray:5 4}
.growth-fig .g-lab{fill:var(--muted);font:600 12px var(--font-body)}
.growth-fig .g-tit{fill:var(--ink-2);font:700 12px var(--font-body)}
.growth-fig .g-note{fill:var(--brand-ink);font:700 12px var(--font-body)}
.growth-fig .g-key{display:flex;gap:18px;flex-wrap:wrap;font-size:.85rem;color:var(--ink-2);font-weight:600;margin-top:6px}
.growth-fig .g-key i{display:inline-block;width:22px;height:10px;border-radius:4px;margin-right:6px;vertical-align:middle}
.growth-fig .g-grid,.growth-fig .g-axis,.growth-fig .g-edge,.growth-fig .g-line,.growth-fig .g-dot,.growth-fig .g-full{vector-effect:non-scaling-stroke}
@media (max-width:560px){
  .growth-fig{padding:14px 10px 10px}
  .growth-fig .g-lab{font-size:21px}
  .growth-fig .g-tit,.growth-fig .g-note{font-size:22px}
  .growth-fig .g-dot{r:7px}
  .growth-fig .g-key{font-size:.8rem;gap:10px}
}
/* chinchilla lifespan comparison chart (bars) */
.life-fig .lf-bar{fill:var(--violet);opacity:.85}
.life-fig .lf-bar.lf-ch{fill:var(--brand);opacity:1}
.life-fig .lf-bar.lf-wild{fill:var(--sun);opacity:1}
.life-fig .lf-name{fill:var(--ink);font:700 13px var(--font-body)}
.life-fig .lf-val{fill:var(--ink-2);font:700 12px var(--font-body)}
@media (max-width:560px){
  .life-fig .lf-name{font-size:21px}
  .life-fig .lf-val{font-size:19px}
}
/* ball python growth chart: second (female) series */
.growth-fig .g-band.f{fill:var(--violet);opacity:.14}
.growth-fig .g-line.f{stroke:var(--violet);stroke-dasharray:9 5}
.growth-fig .g-dot.f{stroke:var(--violet)}
.growth-fig .g-line.f,.growth-fig .g-dot.f{vector-effect:non-scaling-stroke}
/* ball python feeding: prey as % of body weight */
.preybar{margin-top:18px}
.preybar .pb-track{position:relative;height:34px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.preybar .pb-zone{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;background:var(--mint-soft);color:#0B7A66;font-size:.8rem;font-weight:800;border-left:2px solid var(--mint);border-right:2px solid var(--mint);white-space:nowrap}
.preybar .pb-mark{position:absolute;top:-6px;bottom:-6px;width:3px;margin-left:-1.5px;background:var(--brand);border-radius:3px}
.preybar .pb-mark b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:2px;font-size:.75rem;color:var(--brand-ink);white-space:nowrap}
.preybar .pb-scale{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);font-weight:600;margin-top:4px}
.preybar:has(.pb-mark){margin-top:34px}
.note.warn{background:var(--sun-soft);border-color:color-mix(in srgb,var(--sun) 50%,transparent);color:var(--ink-2)}
:root[data-theme="dark"] .preybar .pb-zone{color:var(--mint)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .preybar .pb-zone{color:var(--mint)}}
/* axolotl life cycle diagram (stage highlighted by the explorer) */
.lc-diagram svg{max-width:700px;margin:0 auto}
.lc-diagram .lc-ring{fill:none;stroke:var(--line);stroke-width:2;stroke-dasharray:3 7}
.lc-diagram .lc-arrow{fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round}
.lc-diagram .lc-head{fill:var(--muted)}
.lc-diagram .lc-node>circle{fill:var(--surface-2);stroke:var(--line);stroke-width:2;transition:fill .3s var(--ease),stroke .3s var(--ease)}
.lc-diagram .lc-art{fill:none;stroke:var(--ink-2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.lc-diagram .lc-egg{stroke-width:2.5}
.lc-diagram .lc-art .fill{fill:var(--ink-2);stroke:none}
.lc-diagram .lc-label{fill:var(--ink);font:800 17px var(--font-body)}
.lc-diagram .lc-sub{fill:var(--muted);font:600 13px var(--font-body)}
.lc-diagram .lc-mid{fill:var(--ink-2);font:800 19px var(--font-head)}
.lc-diagram .lc-midsub{fill:var(--muted);font:600 13px var(--font-body)}
.lc-diagram .lc-node.on>circle{fill:var(--brand-soft);stroke:var(--brand);stroke-width:4}
.lc-diagram .lc-node.on .lc-art{stroke:var(--brand-ink)}
.lc-diagram .lc-node.on .lc-art .fill{fill:var(--brand-ink)}
.lc-diagram .lc-node.on .lc-label{fill:var(--brand-ink)}
.lc-diagram .lc-now{font-weight:700;color:var(--brand-ink);margin-top:4px}
.lc-diagram .lc-node>circle,.lc-diagram .lc-arrow,.lc-diagram .lc-ring{vector-effect:non-scaling-stroke}
@media (max-width:560px){
  .lc-diagram .lc-label{font-size:21px}
  .lc-diagram .lc-sub{font-size:16px}
  .lc-diagram .lc-mid{font-size:23px}
  .lc-diagram .lc-midsub{font-size:17px}
}
.print-box{border:2px dashed var(--line);border-radius:var(--radius-sm);padding:18px 20px;margin:18px 0;background:var(--surface)}
.print-box h3{margin-top:0}
@media print{.calc,.ad-slot,.related,.crumbs,.print-btn{display:none!important}.print-box{border-color:#999;break-inside:avoid}.lc-diagram{break-inside:avoid}}

/* hedgehog tools: longer results (care tips, risks, notes) need more room on phones */
.calc[data-tool^="hedgehog"] .result.show{max-height:4200px}
/* corn snake morph explorer */
.mx-count{margin:18px 0 10px;font-weight:700;color:var(--ink-2)}
.morph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.morph-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:14px;min-width:0}
.morph-card .mc-sw{width:100%;height:auto;display:block;margin-bottom:10px}
.morph-card .sw-body{stroke:var(--line);stroke-width:1.5}
.morph-card .mc-name{margin:0 0 4px;font-size:1rem;line-height:1.3}
.morph-card .mc-name small{color:var(--muted);font-weight:600}
.morph-card .mc-inh{margin:0 0 8px}
.morph-card .mc-inh .chip{font-size:.75rem;padding:3px 10px}
.morph-card .mc-desc{font-size:.88rem;color:var(--ink-2);margin:0 0 8px}
.morph-card .mc-meta{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;margin:0;font-size:.8rem}
.morph-card .mc-meta dt{font-weight:700;color:var(--muted)}
.morph-card .mc-meta dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.mx-empty{margin-top:12px}
.morph-card:target{outline:3px solid var(--brand);outline-offset:2px}
#genetics-helper{margin-top:22px}
#genetics-helper .result.show .result-main{text-align:left}
/* budgie age estimator: head drawings in option cards (light + dark) */
.ba-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opt-cards .oc .bh{display:block;width:72px;height:72px;margin:0 0 8px}
.bh{--bh-face:#FFE45C;--bh-body:#62C370;--bh-ink:#1F1A2E;--bh-iris:#F4F1EA;--bh-beak:#E8C77A;--bh-cere-pink:#E9A6C8;--bh-cere-mid:#9C9BD8;--bh-cere-blue:#3D6FE0;--bh-line:rgba(31,26,46,.35)}
.bh .bh-face{fill:var(--bh-face);stroke:var(--bh-line);stroke-width:1}
.bh .bh-body{fill:var(--bh-body);stroke:var(--bh-line);stroke-width:1}
.bh .bh-bar{fill:none;stroke:var(--bh-ink);stroke-width:1.8;stroke-linecap:round}
.bh .bh-pupil{fill:var(--bh-ink)}
.bh .bh-iris{fill:var(--bh-iris);stroke:var(--bh-line);stroke-width:.6}
.bh .bh-beak{fill:var(--bh-beak);stroke:var(--bh-line);stroke-width:.8}
.bh .bh-cere-pink{fill:var(--bh-cere-pink)}
.bh .bh-cere-mid{fill:var(--bh-cere-mid)}
.bh .bh-cere-blue{fill:var(--bh-cere-blue)}
:root[data-theme="dark"] .bh{--bh-line:rgba(255,255,255,.55);--bh-ink:#0E0B16;--bh-body:#4FAE5E}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bh{--bh-line:rgba(255,255,255,.55);--bh-ink:#0E0B16;--bh-body:#4FAE5E}}
/* cockatiel option-card drawings (cockatiel age chart) — colours as variables so they read in dark mode */
.opt-cards .oc .ck{display:block;width:72px;height:72px;margin:0 0 8px}
.ck{--ck-body:#A3A9B0;--ck-wing:#7E858D;--ck-face:#FFD84D;--ck-face-m:#E6E0C8;--ck-cheek:#FF7A2E;--ck-cheek-m:#E3B48A;--ck-crest:#D9B93C;--ck-horn:#EAD6B3;--ck-grey:#6F757D;--ck-eye:#1F1A2E;--ck-bar:#F2D24B;--ck-perch:#B98B5E;--ck-leg:#D9A99A;--ck-scale:rgba(31,26,46,.55);--ck-nail:#3A3440;--ck-line:rgba(31,26,46,.35)}
.ck .ck-body{fill:var(--ck-body);stroke:var(--ck-line);stroke-width:1}
.ck .ck-wing{fill:var(--ck-wing);stroke:var(--ck-line);stroke-width:.8}
.ck .ck-face-y{fill:var(--ck-face);stroke:var(--ck-line);stroke-width:1}
.ck .ck-face-m{fill:var(--ck-face-m);stroke:var(--ck-line);stroke-width:1}
.ck .ck-cheek{fill:var(--ck-cheek)}
.ck .ck-cheek-m{fill:var(--ck-cheek-m)}
.ck .ck-crest{fill:none;stroke:var(--ck-crest);stroke-width:2.6;stroke-linecap:round}
.ck .ck-eye{fill:var(--ck-eye)}
.ck .ck-beak-horn{fill:var(--ck-horn);stroke:var(--ck-line);stroke-width:.8}
.ck .ck-beak-grey{fill:var(--ck-grey);stroke:var(--ck-line);stroke-width:.8}
.ck .ck-bar{fill:none;stroke:var(--ck-bar);stroke-width:1.8;stroke-linecap:round}
.ck .ck-perch{fill:var(--ck-perch)}
.ck .ck-leg{fill:var(--ck-leg);stroke:var(--ck-line);stroke-width:1}
.ck .ck-scale{fill:none;stroke:var(--ck-scale);stroke-width:1.3;stroke-linecap:round}
.ck .ck-nail{fill:none;stroke:var(--ck-nail);stroke-width:2;stroke-linecap:round}
:root[data-theme="dark"] .ck{--ck-line:rgba(255,255,255,.55);--ck-eye:#0E0B16;--ck-scale:rgba(14,11,22,.75);--ck-body:#B4BAC1;--ck-wing:#8F969E;--ck-nail:#E6DED2}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ck{--ck-line:rgba(255,255,255,.55);--ck-eye:#0E0B16;--ck-scale:rgba(14,11,22,.75);--ck-body:#B4BAC1;--ck-wing:#8F969E;--ck-nail:#E6DED2}}
.opt-cards label[hidden]{display:none}
/* insect tools: stage / calendar tracks, generation bars, temperature presets */
.calc[data-tool^="fly"] .result.show,.calc[data-tool^="gnat"] .result.show,.calc[data-tool^="berry"] .result.show{max-height:6000px}
.stagebar{position:relative;margin-top:22px}
.sb-track{position:relative;height:34px;border-radius:999px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.sb-seg{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:.74rem;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:2px solid var(--surface);color:var(--ink);padding:0 4px}
.sb-egg{background:var(--sun-soft)}.sb-l1{background:var(--mint-soft)}.sb-l2{background:var(--sky-soft)}.sb-l3{background:var(--violet-soft)}.sb-pupa{background:var(--brand-soft)}.sb-adult{background:color-mix(in srgb,var(--mint) 30%,var(--surface))}
.sb-scale{display:flex;justify-content:space-between;font-size:.75rem;color:var(--muted);font-weight:600;margin-top:4px;gap:6px}
.sb-now{position:absolute;top:-6px;height:46px;width:3px;margin-left:-1.5px;background:var(--brand);border-radius:3px}
.sb-now b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);font-size:.72rem;color:var(--brand-ink);white-space:nowrap}
.stagebar:has(.sb-now){margin-top:34px}
.cal{--cal-lab:112px}
.cal-row{display:grid;grid-template-columns:var(--cal-lab) minmax(0,1fr);gap:10px;align-items:center;margin-top:8px}
.cal-lab{font-weight:700;font-size:.85rem;line-height:1.2}
.cal-lab small{display:block;color:var(--muted);font-weight:600;font-size:.74rem}
.cal .sb-track{height:28px}
.gen-bars{margin-top:18px;display:grid;gap:8px}
.gen-row{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:10px;align-items:center;font-size:.85rem}
.gen-lab{font-weight:700}.gen-lab small{display:block;color:var(--muted);font-weight:600;font-size:.72rem}
.gen-bar{height:16px;border-radius:999px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.gen-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--sun),var(--brand));border-radius:999px}
.gen-val{font-weight:800;font-family:var(--font-head);white-space:nowrap}
.tp-preset{margin-top:10px}
.tp-preset span{padding:8px 12px;font-size:.84rem}
@media (max-width:560px){.cal{--cal-lab:84px}.gen-row{grid-template-columns:70px minmax(0,1fr) auto;font-size:.8rem}.sb-seg{font-size:.68rem}}
/* fruit fly egg / larvae / pupa / berry tools: option-card drawings (light + dark), soak timer */
.lv-cards{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.opt-cards .oc .lv{display:block;width:60px;height:60px;margin:0 0 6px}
.lv{--lv-body:#FFFDF8;--lv-grey:#A99B88;--lv-clear:rgba(235,240,245,.75);--lv-ink:#1F1A2E;--lv-line:rgba(31,26,46,.55);--lv-fruit:#F2647A;--lv-leaf:#4FAE5E;--lv-metal:#C9CED6;--lv-hole:#5A5F6B;--lv-soil:#7A5434;--lv-pot:#D9875A;--lv-water:#9CCBEF;--lv-food:#F3C969;--lv-pw:#FAF6EC;--lv-pt:#D9A866;--lv-pb:#8A5A2B;--lv-eye:#E2483A;--lv-wing:#1F1A2E}
.lv path,.lv circle,.lv rect{stroke-linecap:round;stroke-linejoin:round}
.lv .lv-bodyw{fill:none;stroke:var(--lv-body);stroke-width:7;filter:drop-shadow(0 0 1px var(--lv-line))}
.lv .lv-bodyg{fill:none;stroke:var(--lv-grey);stroke-width:6}
.lv .lv-bodyc{fill:none;stroke:var(--lv-clear);stroke-width:8;filter:drop-shadow(0 0 1px var(--lv-line))}
.lv .lv-head{fill:var(--lv-ink)}
.lv .lv-ink{fill:none;stroke:var(--lv-ink);stroke-width:2.2}
.lv .lv-line{fill:none;stroke:var(--lv-line);stroke-width:2.2}
.lv .lv-fruit{fill:var(--lv-fruit)}.lv .lv-leaf{fill:var(--lv-leaf)}.lv .lv-metal{fill:var(--lv-metal)}.lv .lv-hole{fill:var(--lv-hole)}
.lv .lv-soil{fill:var(--lv-soil)}.lv .lv-pot{fill:var(--lv-pot)}.lv .lv-water{fill:var(--lv-water)}.lv .lv-food{fill:var(--lv-food)}
.lv .lv-pw{fill:var(--lv-pw);stroke:var(--lv-line);stroke-width:1.2}.lv .lv-pt{fill:var(--lv-pt);stroke:var(--lv-line);stroke-width:1.2}.lv .lv-pb{fill:var(--lv-pb);stroke:var(--lv-line);stroke-width:1.2}
.lv .lv-eye{fill:var(--lv-eye)}.lv .lv-wing{fill:var(--lv-wing);opacity:.85}
:root[data-theme="dark"] .lv{--lv-ink:#0E0B16;--lv-line:rgba(255,255,255,.6);--lv-hole:#2A2D36;--lv-wing:#0E0B16}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv{--lv-ink:#0E0B16;--lv-line:rgba(255,255,255,.6);--lv-hole:#2A2D36;--lv-wing:#0E0B16}}
.more-link{margin:-4px 0 18px;font-weight:700}
.sw-timer{margin-top:18px;padding:16px;border:1.5px solid var(--line);border-radius:16px;background:var(--surface-2);text-align:center}
.sw-time{font-family:var(--font-head);font-size:2.6rem;font-weight:800;line-height:1.1;font-variant-numeric:tabular-nums}
.sw-bar{height:10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);overflow:hidden;margin:10px auto 12px;max-width:420px}
.sw-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sky),var(--mint));border-radius:999px;transition:width .25s linear}
.sw-btns{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.sw-btns .btn[disabled]{opacity:.5;cursor:not-allowed}
.sw-timer .sw-btns .btn.small{padding:8px 13px;font-size:.85rem}
.sw-status{margin:10px 0 0;font-size:.88rem}
.sw-timer.done{border-color:var(--mint)}.sw-timer.done .sw-time{color:var(--mint)}
.sw-steps{padding-left:1.2em}.sw-steps li{margin:4px 0}
@media (max-width:560px){.lv-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.opt-cards .oc .lv{width:48px;height:48px}.sw-time{font-size:2.2rem}}
/* temperature scale bar (fruit fly & gnat cold calculators): sourced zones, threshold ticks, "your temperature" pointer */
.tscale{position:relative;margin-top:44px}
.ts-track{position:relative;height:34px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line);overflow:hidden}
.ts-zone{position:absolute;top:0;bottom:0;display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 3px}
.tz-dead{background:color-mix(in srgb,var(--brand) 45%,var(--surface))}.tz-die{background:var(--brand-soft)}.tz-coma{background:var(--violet-soft)}
.tz-pause{background:var(--sky-soft)}.tz-slow{background:var(--sun-soft)}.tz-ok{background:var(--mint-soft)}
.tz-none{background:repeating-linear-gradient(135deg,var(--surface-2) 0 6px,var(--surface) 6px 12px);color:var(--muted)}
.ts-mark{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--ink-2);opacity:.55}
.ts-ticks{position:relative;height:30px;font-size:.7rem;font-weight:700;color:var(--muted)}
.ts-ticks span{position:absolute;top:3px;transform:translateX(-50%);white-space:nowrap}
.ts-ticks span.ts-r1{top:16px}
.ts-ticks span:first-child{transform:none}.ts-ticks span:last-child{transform:translateX(-100%)}
.ts-you{position:absolute;top:-30px;height:70px;width:3px;margin-left:-1.5px;background:var(--brand);border-radius:3px;z-index:2}
.ts-you b{position:absolute;bottom:100%;left:50%;transform:translateX(-50%);margin-bottom:2px;font-size:.74rem;color:var(--brand-ink);white-space:nowrap;background:var(--surface);padding:1px 6px;border-radius:6px}
.ts-you.ts-l b{left:0;transform:none}.ts-you.ts-r b{left:auto;right:0;transform:none}
.tscale .ts-you{top:-10px;height:54px}.tscale .ts-you b{margin-bottom:4px}
.ts-legend{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:4px;font-size:.82rem;color:var(--ink-2)}
.ts-legend b{display:inline-block;min-width:74px;color:var(--ink)}
@media (max-width:560px){.ts-zone{font-size:.64rem}.ts-legend b{min-width:62px}}
/* home: insect sub-filters (shown while "Insects" is selected) */
.filters.subfilters{flex-basis:100%;padding:10px 12px;border-radius:18px;background:var(--surface-2);border:1px dashed var(--line)}
.filters.subfilters[hidden]{display:none}
.filter.sub{padding:7px 13px;font-size:.84rem}
/* reusable tick-off checklist with progress (mosquito finder) */
.checklist{margin-top:18px}
.ck-progress{display:flex;align-items:center;gap:10px;font-size:.88rem;font-weight:700;margin-bottom:10px}
.ck-bar{flex:1;height:10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);overflow:hidden}
.ck-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--sky),var(--mint));border-radius:999px;transition:width .3s var(--ease)}
.ck-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;counter-reset:ck}
.ck-list li{margin:0}
.ck-list label{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;padding:12px 14px;border:1.5px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;transition:all .2s var(--ease)}
.ck-list input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--mint)}
.ck-list b{display:block;font-size:.95rem}
.ck-list b::before{counter-increment:ck;content:counter(ck) ". ";color:var(--muted)}
.ck-list small{display:block;color:var(--muted);font-size:.82rem;line-height:1.45;margin-top:2px}
.ck-list input:checked~span b{text-decoration:line-through;color:var(--muted)}
.ck-list label:has(input:checked){border-color:var(--mint);background:var(--mint-soft)}
.ck-list input:focus-visible{outline:3px solid var(--violet);outline-offset:2px}
.ck-done{margin-top:10px}
.season-key{display:flex;flex-wrap:wrap;gap:6px 14px;list-style:none;padding:0;margin:10px 0 0;font-size:.8rem;color:var(--ink-2)}
.season-key i{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:6px;vertical-align:-1px;border:1px solid var(--line)}

/* part B identifier drawings (adult insects, flight styles, clues) — share the .lv colour variables */
.lv{--lv-tan:#D9A866;--lv-darkb:#3A3440;--lv-brownb:#9A6A3A;--lv-flea:#7A3B1E;--lv-wingc:rgba(190,210,230,.55);--lv-fuzz:#8E8478;--lv-greyb:#8F969E;--lv-skin:#F2C9A6;--lv-bite:#E2483A;--lv-ok:#2E9E5B;--lv-path:rgba(31,26,46,.45)}
.lv .lv-tanb{fill:var(--lv-tan);stroke:var(--lv-line);stroke-width:1}.lv .lv-darkb{fill:var(--lv-darkb);stroke:var(--lv-line);stroke-width:1}
.lv .lv-brownb{fill:var(--lv-brownb);stroke:var(--lv-line);stroke-width:1}.lv .lv-flea{fill:var(--lv-flea);stroke:var(--lv-line);stroke-width:1}
.lv .lv-greyb{fill:var(--lv-greyb);stroke:var(--lv-line);stroke-width:1}.lv .lv-wingc{fill:var(--lv-wingc);stroke:var(--lv-line);stroke-width:1}
.lv .lv-fuzz{fill:var(--lv-fuzz);stroke:var(--lv-line);stroke-width:1.4;stroke-dasharray:1.6 1.8}.lv .lv-skin{fill:var(--lv-skin);stroke:var(--lv-line);stroke-width:1}
.lv .lv-bite{fill:var(--lv-bite)}.lv .lv-path{fill:none;stroke:var(--lv-path);stroke-width:2;stroke-dasharray:3 3}
.lv .lv-no{fill:none;stroke:var(--lv-bite);stroke-width:4}.lv .lv-ok{fill:none;stroke:var(--lv-ok);stroke-width:4}
:root[data-theme="dark"] .lv{--lv-darkb:#2A2533;--lv-path:rgba(255,255,255,.55);--lv-wingc:rgba(200,220,240,.35)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lv{--lv-darkb:#2A2533;--lv-path:rgba(255,255,255,.55);--lv-wingc:rgba(200,220,240,.35)}}
.ant-bars .preybar{margin-top:6px}