/* Shared appearance tokens, including the canvas palette. Dark preserves the original style. */
:root{
  color-scheme:dark;--accent:#78f8c2;--on-accent:#061027;--nav-bg:rgba(5,11,22,.97);--nav-ink:#eaf2ff;--nav-muted:#a4b5ce;--nav-line:rgba(177,204,244,.2);--nav-active:rgba(120,248,194,.09);
  --chart-bg:#08101f;--chart-grid:rgba(255,255,255,.1);--chart-muted:rgba(218,233,255,.7);--chart-leader:rgba(218,233,255,.24);--chart-label-bg:rgba(8,16,31,.94);--chart-ink:#ecfff8;
}
:root[data-theme=light]{
  color-scheme:light;--ink:#16263d;--muted:#52667f;--line:rgba(38,65,100,.2);--panel:#fff;--mint:#087c57;--cyan:#087c57;--accent:#087c57;--on-accent:#fff;--blue:#245dc1;--pink:#b12580;--orange:#ac4d09;
  --nav-bg:rgba(250,252,255,.97);--nav-ink:#16263d;--nav-muted:#52667f;--nav-line:rgba(38,65,100,.2);--nav-active:rgba(8,124,87,.09);
  --chart-bg:#f8fbff;--chart-grid:rgba(38,65,100,.14);--chart-muted:#52667f;--chart-leader:rgba(38,65,100,.4);--chart-label-bg:rgba(248,251,255,.95);--chart-ink:#16263d;
  background:#f5f8fc;color:var(--ink);
}
html[data-theme=light] body{color:var(--ink);background:radial-gradient(ellipse 900px 600px at 5% 0,rgba(53,106,255,.07),transparent 70%),radial-gradient(ellipse 800px 600px at 100% 8%,rgba(21,190,147,.06),transparent 65%),#f5f8fc}
html[data-theme=light] body::before{background:radial-gradient(900px 600px at 8% -5%,rgba(53,106,255,.07),transparent 68%),radial-gradient(800px 500px at 96% 16%,rgba(21,190,147,.06),transparent 63%),#f5f8fc}
html[data-theme=light] body::after{background-image:linear-gradient(rgba(38,65,100,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(38,65,100,.08) 1px,transparent 1px)}
html[data-theme=light] h1 span{background-image:linear-gradient(100deg,#087c57,#245dc1 68%,#8242ab)}
html[data-theme=light] .hero-copy,html[data-theme=light] .page-intro>p:not(.eyebrow),html[data-theme=light] .hero p,html[data-theme=light] .pulse-card p,html[data-theme=light] .features li,html[data-theme=light] .help-content p,html[data-theme=light] .help-content li{color:var(--muted)}
html[data-theme=light] .hero-panel,html[data-theme=light] .pulse-card{background:linear-gradient(140deg,#e9f7f1,#edf3fe);border-color:rgba(8,124,87,.25);box-shadow:0 16px 45px rgba(38,65,100,.06)}
html[data-theme=light] .product-card{background:linear-gradient(145deg,#fff,#f0f5fb)}
html[data-theme=light] .channel-card,html[data-theme=light] .notice,html[data-theme=light] .stats,html[data-theme=light] .table-wrap{background:#fff;color:var(--ink)}
html[data-theme=light] .atlas,html[data-theme=light] .calculator{background:linear-gradient(145deg,#fff,#edf3fb);box-shadow:0 20px 60px rgba(38,65,100,.06)}
html[data-theme=light] .usage-inputs label,html[data-theme=light] .comparison-controls,html[data-theme=light] .cost-result{background:#fff}
html[data-theme=light] .search-field input,html[data-theme=light] .search,html[data-theme=light] .comparison-controls select{background:#fff;color:var(--ink)}
html[data-theme=light] .button.secondary,html[data-theme=light] .comparison-controls button{background:rgba(38,65,100,.035);color:var(--ink)}
html[data-theme=light] .button.primary,html[data-theme=light] .button--primary,html[data-theme=light] .filter:hover,html[data-theme=light] .filter.active,html[data-theme=light] .categories button[aria-pressed=true],html[data-theme=light] .categories a[aria-current=page],html[data-theme=light] .api-link:hover{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
html[data-theme=light] .filter{color:var(--muted)}
html[data-theme=light] .api-link{border-color:rgba(8,124,87,.3);background:rgba(8,124,87,.06);color:var(--accent)}
html[data-theme=light] .membership-link{border-color:rgba(36,93,193,.3);background:rgba(36,93,193,.06);color:#245dc1}
html[data-theme=light] .membership-link:hover{background:#245dc1;color:#fff}
html[data-theme=light] .tooltip{background:rgba(255,255,255,.97);border-color:rgba(8,124,87,.3);box-shadow:0 10px 30px rgba(38,65,100,.12)}
html[data-theme=light] .model-table td,html[data-theme=light] .chart-wrap{border-color:var(--line)}
html[data-theme=light] .model-table tbody tr:hover,html[data-theme=light] .model-table tr.selected{background:rgba(8,124,87,.06)}
html[data-theme=light] .footer-links a{color:var(--ink)}
html[data-theme=light] .load-error{color:#ae2434}
html[lang=en] .hero h1,html[lang=en] .page-intro h1{letter-spacing:-.045em;line-height:1.08;font-size:clamp(36px,5.3vw,68px)}
html[lang=en] .hero-panel h2{font-size:25px;line-height:1.3}
html[lang=en] .page-navigation{gap:16px}
html[lang=en] .page-label{padding-right:16px}
html[lang=en] .page-links{gap:20px}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}}

html[data-theme=light] .usage-inputs small{color:var(--muted)}