:root { --surface-clean: #111513; --muted-clean: #bdc5be; --line-clean: #344239; }
html { scroll-padding-top: 104px; }
body { background-color: #080b09; }
[hidden] { display: none !important; }
:where(a,button,input,select,textarea):focus-visible { outline: 2px solid #96cfb4; outline-offset: 4px; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
img { height: auto; }
.cursor-aura,.wind-layer,.cinematic-atmosphere { display: none !important; }
.site-header { display:flex; flex-wrap:wrap; gap:12px 24px; border-bottom-color:#465044; padding:12px 24px; }
.site-header .brand strong { font-size: 16px; line-height: 1.3; }
.site-header .brand small { font-size: 12px; line-height: 1.45; }
.site-header .brand-logo { width: 76px; }
.site-header .brand { flex: 0 0 210px; }
.site-header .site-nav { flex:1 1 850px; display:flex; flex-wrap:wrap; justify-content:flex-end; gap:3px 5px; min-width:0; }
.site-header .site-nav a { font-size: 13px; line-height: 1.35; padding: 9px 8px; white-space: nowrap; }
.performance-mode .hero-media img { filter: brightness(.82) saturate(.96); }
.hero-media::after { background: linear-gradient(90deg,rgba(5,9,7,.7),rgba(5,9,7,.15) 70%),linear-gradient(0deg,#080b09,transparent 70%); }
.hero-media img { display:block !important; opacity:1 !important; width:100%; height:100%; object-fit:cover; }
.hero { isolation:isolate; }
.hero-media { z-index:0; }
.hero::before,.hero::after { z-index:1; pointer-events:none; }
.hero-content,.hero-panel { position:relative; z-index:2; }
.hero::after { background:linear-gradient(90deg,rgba(4,9,6,.77),rgba(4,9,6,.25)),linear-gradient(0deg,#080b09,transparent 70%); }
.hero-panel .next-litter-callout { display:block; }
.hero-panel .next-litter-countdown { margin-top:16px; grid-template-columns:minmax(0,1fr); }
.hero-panel .next-litter-countdown-grid { margin-top:8px; }
.hero-panel .next-litter-countdown > div { min-width:0; }
.hero-panel .next-litter-copy { max-width:none; }
.hero-mantra { min-height:0; }
.hero-mantra span { opacity:1; transform:none; }
.hero h1 { font-size: 56px; line-height: 1.08; letter-spacing: 0; max-width: 680px; }
.hero .hero-content > p:not(.eyebrow):not(.hero-mantra) { font-size: 18px; line-height: 1.65; }
.hero-panel { border-color: #5e6657; box-shadow: none; }
.hero-panel h2 { font-size: 25px; line-height: 1.25; letter-spacing: 0; }
.hero-panel > p { font-size: 16px; line-height: 1.55; }
.hero-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
.hero-stats .visit-counter:first-child { grid-column: 1 / -1; }
.hero-stats .visit-counter { box-shadow: none; background: #101612; border-color: #3c5145; min-height: 92px; }
.hero-stats .puppy-export-counter { border-color: #779797; background: #122025; }
.hero-stats strong { font-size: 32px; font-variant-numeric: tabular-nums; }
.hero-stats span { font-size: 12px; line-height: 1.45; }
.section-heading h2 { font-size: 34px; line-height: 1.18; letter-spacing: 0; }
.section-heading > p:not(.eyebrow) { font-size: 17px; line-height: 1.65; max-width: 780px; }
.section-heading { margin-bottom: 28px; }
.children-copy h3,.children-group-heading h3 { font-size: 25px; line-height: 1.3; }
.children-copy p,.children-copy li,.children-group-heading p { font-size: 16px; line-height: 1.65; }
.children-copy .check-list { gap: 8px; }
.filter-buttons button,.evolution-controls button,.puppy-evolution-controls button { min-height: 42px; padding: 9px 14px; font-size: 14px; }
.children-gallery article,.future-puppy-card,.parent-card,.price-card { border-radius: 8px; box-shadow: none; }
.children-gallery article { transition: border-color 180ms ease,transform 180ms ease; }
.children-gallery img { transition: transform 350ms ease; }
.children-gallery strong { font-size: 20px; line-height: 1.35; }
.children-gallery p { font-size: 15px; line-height: 1.55; }
.puppy-inline-status { font-size: 11px; padding: 7px 10px; }
.performance-mode main > section { content-visibility: visible; }
.performance-mode .reveal-on-scroll { opacity: 0; transform: translateY(14px); filter: none; transition: opacity 420ms ease,transform 420ms cubic-bezier(.2,.7,.2,1); will-change: auto; }
.performance-mode .reveal-on-scroll.is-visible { opacity: 1; transform: none; }
.performance-mode .reveal-on-scroll[hidden] { transition: none; }
.ambient-particles { position: fixed; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; contain: strict; }
.ambient-particles i { position: absolute; left: var(--x); top: var(--y); width: 2px; height: var(--size); border-radius: 1px; background: var(--tone); opacity: 0; animation: nyynax-drift var(--duration) var(--delay) linear infinite; }
@keyframes nyynax-drift { 0% { opacity:0; transform:translate3d(0,30px,0) rotate(-20deg); } 18%,70% { opacity:.3; } 100% { opacity:0; transform:translate3d(25px,-140px,0) rotate(15deg); } }
html.is-effects-paused .ambient-particles i { animation-play-state: paused; }
html.is-effects-paused .ambient-particles { opacity: .2; transition: opacity 200ms; }
.sponsor-band { order:30; width: min(1280px,calc(100% - 48px)); margin: 44px auto; border-top: 1px solid #3d4b40; border-bottom: 1px solid #3d4b40; padding: 30px 0; display: flex; gap: 28px; align-items: center; justify-content: space-between; }
.sponsor-band h2 { font-size: 23px; line-height: 1.35; margin: 6px 0 0; }
.sponsor-band .button { flex-shrink:0; }
.ad-placement { order:31; width:min(980px,calc(100% - 40px)); margin:32px auto; min-height:130px; text-align:center; }
.ad-placement > span { display:block; font-size:11px; color:#a4aca6; margin-bottom:8px; }
.ad-placement ins { display:block; min-height:100px; }
.premium-footer { box-shadow:none; border-radius:0; border-inline:0; background:#090f0c; }
.lineage-heading h1 { font-size:38px; line-height:1.2; }
.lineage-tree-section { box-shadow:none; background:linear-gradient(135deg,rgba(14,12,7,.96),rgba(8,12,8,.94)); }
.lineage-section-heading { grid-template-columns:minmax(0,1fr) auto; align-items:end; }
.lineage-section-heading::after { content:"Mopao × Nyyna"; color:#d6bd8f; font-size:12px; font-weight:900; letter-spacing:0; text-transform:uppercase; }
.lineage-tree-scroll { border-color:rgba(214,170,98,.58); background:radial-gradient(circle at 50% 82%,rgba(90,59,24,.4),transparent 34%),#050603; }
.lineage-tree::after { content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(ellipse at 50% 76%,rgba(214,170,98,.18),transparent 18%),radial-gradient(ellipse at 50% 32%,rgba(114,150,86,.12),transparent 45%); mix-blend-mode:screen; }
.lineage-year-label { box-shadow:0 12px 28px rgba(0,0,0,.42),0 0 18px rgba(214,170,98,.14); }
.lineage-node img { border-color:rgba(253,223,165,.96); box-shadow:0 0 0 4px rgba(7,7,4,.76),0 12px 26px rgba(0,0,0,.58),0 0 22px rgba(205,143,55,.26); }
.lineage-node > span { border-color:rgba(232,190,115,.72); background:linear-gradient(180deg,rgba(30,20,9,.95),rgba(7,7,4,.92)); }
.parent-node img { box-shadow:0 0 0 5px rgba(7,7,4,.78),0 16px 34px rgba(0,0,0,.62),0 0 28px rgba(214,170,98,.34); }
.trust-badge { display:grid; opacity:1; visibility:visible; transform:none; animation:none; }
@keyframes trust-palette {
  0%,100% { border-color:#cfa967; background-color:#211b12; box-shadow:0 0 16px #cfa96740; }
  16% { border-color:#cf83c8; background-color:#211321; box-shadow:0 0 16px #cf83c840; }
  32% { border-color:#a588d4; background-color:#1b1626; box-shadow:0 0 16px #a588d440; }
  48% { border-color:#78a7d2; background-color:#121c27; box-shadow:0 0 16px #78a7d240; }
  64% { border-color:#69d2cb; background-color:#102321; box-shadow:0 0 16px #69d2cb40; }
  80% { border-color:#88bba8; background-color:#15231b; box-shadow:0 0 16px #88bba840; }
  90% { border-color:#b7bdc7; background-color:#1d1e22; box-shadow:0 0 16px #b7bdc740; }
}
@media (prefers-reduced-motion:no-preference) {
  .trust-badge { animation:trust-palette 8s ease-in-out infinite; }
  html body .hero .visit-counter,
  html body .hero .birth-countdown > div,
  html body .hero .next-litter-countdown-grid > div { animation:counter-palette var(--counter-color-duration,8s) ease-in-out var(--counter-color-delay,0s) infinite var(--counter-color-direction,normal) !important; }
  html.is-effects-paused .hero .visit-counter,
  html.is-effects-paused .hero .birth-countdown > div,
  html.is-effects-paused .hero .next-litter-countdown-grid > div { animation-play-state:paused !important; }
  .trust-badge::before { display:none; }
  .trust-badge strong { color:#fff4df; }
  html.is-effects-paused .trust-badge { animation-play-state:paused; }
}
@keyframes counter-palette {
  0%,100% { border-color:#cfa967; box-shadow:0 0 10px #cfa96730; }
  16% { border-color:#cf83c8; box-shadow:0 0 10px #cf83c830; }
  32% { border-color:#a588d4; box-shadow:0 0 10px #a588d430; }
  48% { border-color:#78a7d2; box-shadow:0 0 10px #78a7d230; }
  64% { border-color:#69d2cb; box-shadow:0 0 10px #69d2cb30; }
  80% { border-color:#88bba8; box-shadow:0 0 10px #88bba830; }
  90% { border-color:#b7bdc7; box-shadow:0 0 10px #b7bdc730; }
}
.hero [data-color-effect] { position:relative; isolation:isolate; overflow:hidden; }
.hero [data-color-effect] > * { position:relative; z-index:1; }
@media (prefers-reduced-motion:no-preference) {
  .hero [data-color-effect]::after { content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; }
  html body .hero [data-color-effect="tint"]::after {
    animation:counter-tint var(--counter-color-duration) ease-in-out var(--counter-color-delay) infinite alternate !important;
  }
  html body .hero [data-color-effect="pulse"]::after {
    border:2px solid #69d2cb;
    animation:counter-pulse var(--counter-color-duration) ease-in-out var(--counter-color-delay) infinite !important;
  }
  html body .hero [data-color-effect="sweep"]::after {
    inset:-30% -80%;
    background:linear-gradient(115deg,transparent 35%,#69d2cb26 43%,#cf83c845 50%,#cfa96726 57%,transparent 65%);
    animation:counter-sweep var(--counter-color-duration) ease-in-out var(--counter-color-delay) infinite !important;
  }
  html.is-effects-paused body .hero [data-color-effect]::after { animation-play-state:paused !important; }
}
@keyframes counter-tint {
  0%,100% { background-color:#cfa96720; }
  33% { background-color:#cf83c825; }
  66% { background-color:#69d2cb22; }
}
@keyframes counter-pulse {
  0%,100% { opacity:.15; border-color:#69d2cb; box-shadow:inset 0 0 3px #69d2cb20; }
  35% { opacity:.9; border-color:#cf83c8; box-shadow:inset 0 0 22px #cf83c855; }
  70% { opacity:.65; border-color:#cfa967; box-shadow:inset 0 0 15px #cfa96744; }
}
@keyframes counter-sweep {
  0%,15% { transform:translateX(-65%); opacity:0; }
  40%,60% { opacity:1; }
  85%,100% { transform:translateX(65%); opacity:0; }
}
@media (max-width:700px) {
  .trust-badge { left:10px; right:auto; bottom:calc(10px + env(safe-area-inset-bottom)); width:auto; max-width:calc(100% - 20px); grid-template-columns:1fr; gap:3px; padding:7px 10px; pointer-events:none; }
  .has-quick-navigation .trust-badge { bottom:calc(80px + env(safe-area-inset-bottom)); }
  .trust-badge strong { grid-row:auto; max-width:none; font-size:11px; line-height:1.2; }
  .trust-badge span { font-size:11px; line-height:1.2; }
  .trust-badge span ~ span { display:block; }
}
.mobile-quick-bar { padding-bottom:max(8px,env(safe-area-inset-bottom)); }
@media (hover:hover) and (prefers-reduced-motion:no-preference) {
  .children-gallery article:hover { transform:translateY(-3px); border-color:#b6c9bb; }
  .children-gallery article:hover img { transform:scale(1.025); }
  .lineage-node:hover { transform:translate(-50%,-54%); }
}
@media (max-width:1100px) and (min-width:701px) {
  .site-header .brand { flex-basis:180px; }
  .site-header .site-nav a { font-size:12px; padding:7px 6px; }
  .hero h1 { font-size:44px; }
}
@media (max-width:700px) {
  .hero-media { bottom:auto; height:min(780px,100svh); }
  .hero-media img { object-position:45% 62%; }
  .hero-media::after { content:""; position:absolute; inset:0; z-index:2; background:linear-gradient(0deg,#080b09,transparent 35%); }
  html { scroll-padding-top:82px; }
  .site-header { gap:12px; }
  .site-header .brand { flex-basis:auto; }
  .site-header .brand-logo { width:58px; }
  .site-header .brand strong { font-size:14px; }
  .site-header .brand small { font-size:11px; }
  .site-header .site-nav { display:none; }
  .site-header .site-nav.is-open { display:grid; grid-template-columns:minmax(0,1fr); justify-content:stretch; left:10px; right:10px; width:auto; min-width:0; max-height:calc(100dvh - 110px); overflow-y:auto; overflow-x:hidden; box-sizing:border-box; }
  .site-header .site-nav a { padding:12px 14px; font-size:15px; width:100%; min-width:0; box-sizing:border-box; white-space:normal; text-align:left; order:0; }
  .hero h1 { font-size:38px; max-width:360px; }
  .hero .hero-content > p:not(.eyebrow):not(.hero-mantra) { font-size:16px; }
  .hero-panel h2 { font-size:23px; }
  .section-heading h2 { font-size:28px; }
  .section-heading > p:not(.eyebrow) { font-size:16px; }
  .children-copy h3,.children-group-heading h3 { font-size:22px; }
  .sponsor-band { flex-direction:column; align-items:flex-start; width:calc(100% - 32px); }
  .lineage-heading h1 { font-size:30px; }
  .lineage-section-heading { grid-template-columns:minmax(0,1fr); }
  .lineage-section-heading::after { font-size:11px; }
  .mobile-quick-bar .is-primary { background:#244337; border-color:#568673; color:#eff7f1; }
  .mobile-quick-bar .is-primary strong,.mobile-quick-bar .is-primary span { color:inherit; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; }
  .ambient-particles { display:none; }
  .performance-mode .reveal-on-scroll { opacity:1; transform:none; }
}