/* 1405-06-16: semantic text roles, balanced card content, accessible light surfaces. */
:root{
  --accent-text:#096d55;--cyan-text:#086b7b;--focus-ring:#086b7b;
  --component-gap:1rem;--card-padding:clamp(1.25rem,2.6vw,2rem);
}
html[data-theme="dark"]{--accent-text:#2dd4b0;--cyan-text:#22d3ee;--focus-ring:#22d3ee;--quiet:#92aaa2}
html[data-theme="light"]{
  --bg:#f5f8f7;--bg-2:#eaf3ee;--panel:#fff;--panel-2:#eaf3ef;
  --ink:#132c23;--muted:#465f56;--quiet:#506b60;--gold-text:#7a6010;
  --line:#bfd1c8;--field-bg:#fff;--header-bg:rgba(245,248,247,.96);
  --nav-color:#3f5b50;--card-a:#fff;--card-b:#f4f8f6;
  --float-bg:rgba(255,255,255,.96);--footer-bg:#eaf2ee;
  --shadow:0 20px 64px rgba(20,58,43,.1);--shadow-soft:0 8px 28px rgba(20,58,43,.06);
}
html[data-theme="light"] body{background:radial-gradient(circle at 8% 5%,rgba(34,211,238,.035),transparent 30rem),radial-gradient(circle at 95% 25%,rgba(45,212,176,.05),transparent 32rem),var(--bg)}
html[data-theme="light"] .hero h1 em{color:var(--accent-text);-webkit-text-stroke:0}
html[data-theme="light"] .text-gradient{background-image:linear-gradient(120deg,var(--accent-text),var(--cyan-text))}
html[data-theme="light"] .field input,html[data-theme="light"] .field select,html[data-theme="light"] .field textarea{border-color:#738e83}
html[data-theme="light"] .field input[aria-invalid="true"],html[data-theme="light"] .field select[aria-invalid="true"],html[data-theme="light"] .field textarea[aria-invalid="true"]{border-color:var(--danger)}
html[data-theme] :focus-visible{outline-color:var(--focus-ring)}
html[data-theme] .field input:focus,html[data-theme] .field select:focus,html[data-theme] .field textarea:focus{outline:2px solid var(--focus-ring);outline-offset:2px;border-color:var(--focus-ring)}
/* These are deliberately dark product illustrations in either page theme. */
.scope-map,.dashboard,.dashboard-peek,.kod-final-signal{--accent-text:#2dd4b0;--cyan-text:#22d3ee;--ink:#eefbf7;--muted:#b5c8c2;--quiet:#a5beb5}
.section-head{align-items:center}
.section-head h2,.card h3,.model-card h3{text-wrap:balance}
.card h3,.model-card h3{line-height:1.7}
.model-card{min-height:0;padding:var(--card-padding);gap:var(--component-gap)}
.model-card .model-icon,.model-card .model-kicker,.model-card h3,.model-card p,.model-card ul,.model-card .model-tags,.model-card .model-proof{margin-block:0}
.model-card-main{border:2px solid var(--accent-text);padding:calc(var(--card-padding) - 1px)}
.model-card-main .model-kicker{font-weight:700}
.model-card a{min-height:48px;justify-content:center;text-align:center;width:100%}
.model-tags,.model-proof{align-items:flex-start;align-content:flex-start}
.need-panels .btn-primary{background:linear-gradient(120deg,var(--mint),#20bdd2);color:#041713;border-color:transparent}
.model-card-main>a{background:linear-gradient(120deg,var(--mint),#20bdd2);color:#041713;border-color:transparent}
.grid-3>.card{display:flex;flex-direction:column;gap:1rem}
.grid-3>.card h3,.grid-3>.card p{margin-block:0}
.grid-3>.card>a{margin-block-start:auto}
.card:not(:has(a,button)):hover{transform:none;box-shadow:var(--shadow-soft)}
.card:not(:has(a,button)):hover::before{transform:translateX(100%)}
@supports(grid-template-rows:subgrid){
  .kod-model-grid>.model-card{display:grid;grid-row:span 6;grid-template-rows:subgrid}
  .model-card>.model-num{position:absolute}
}
@media(max-width:980px){.kod-model-grid>.model-card{display:flex;grid-row:auto}.model-card a{margin-top:0}}
@media(max-width:560px){.button-row .btn{white-space:normal;line-height:1.7}.model-card h3{font-size:1.3rem}}

/* Decorative loops stop outside the viewport and in background tabs. */
.scope-map:not(.is-running)::after,
.scope-map:not(.is-running) .scope-route i::after,
.scope-map:not(.is-running) .scope-output,
.peek-chart:not(.is-running) span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-orbit,.marquee-track,.cta-signal-step{animation:none!important}}