:root[data-theme="hero-base"] {
  color-scheme: only light;
  --theme-browser-color: #101d43;
  --theme-font-interface: ui-rounded, "SF Pro Rounded", "Nunito", "Avenir Next", system-ui, -apple-system, "Segoe UI", sans-serif;
  --theme-font-display: "Avenir Next Condensed", "Trebuchet MS", system-ui, sans-serif;
  --theme-font-learning: var(--theme-font-interface);
  --theme-text: #102047;
  --theme-text-muted: #4b5f82;
  --theme-accent: #147cc4;
  --theme-accent-rgb: 20, 124, 196;
  --theme-success: #65d0a5;
  --theme-error: #ff8b70;
  --theme-line: rgba(24,92,145,.18);
  --theme-surface: rgba(250,253,255,.96);
  --theme-card-background: linear-gradient(150deg, #ffffff, #e7eff5);
  --theme-page-background: radial-gradient(circle at 8% 6%, rgba(255,185,48,.38), transparent 25%), radial-gradient(circle at 94% 92%, rgba(0,160,214,.34), transparent 31%), linear-gradient(145deg, #d5e2eb 0%, #f8fbfd 46%, #bfd3e1 100%);
  --theme-parent-background: radial-gradient(circle at 94% 7%, rgba(239,67,63,.22), transparent 27%), radial-gradient(circle at 8% 94%, rgba(0,160,214,.28), transparent 34%), linear-gradient(145deg, #dce7ee, #f8fafc 48%, #cbdbe6);
  --theme-gate-background: var(--theme-parent-background);
  --theme-shadow-lg: 0 18px 34px rgba(8,28,61,.23), 0 4px 0 rgba(16,32,71,.08), inset 0 1px 1px rgba(255,255,255,.95);
  --theme-shadow: 0 8px 16px rgba(8,28,61,.22), 0 3px 0 rgba(16,32,71,.09), inset 0 1px 1px rgba(255,255,255,.9);
  --theme-shadow-press: 0 2px 5px rgba(10,40,80,.18), inset 0 4px 8px rgba(10,40,80,.18);
  --theme-shadow-inset: inset 0 4px 10px rgba(10,40,80,.17), inset 0 -3px 5px rgba(255,255,255,.92);
  --theme-parent-shadow: 0 16px 38px rgba(10,40,80,.13), 0 3px 10px rgba(10,40,80,.08);
  --theme-counter-area: linear-gradient(180deg, #d8f4fb, #edfaff);
  --theme-target-area: linear-gradient(180deg, #fff0cf, #fff8e8);
  --theme-target-border: rgba(255,158,52,.65);
  --theme-progress-transform: none;
  --theme-heading-end-transform: none;
  --theme-icon-peach-1: #ffe1b1;
  --theme-icon-peach-2: #ffad4e;
  --theme-icon-pink-1: #ffd6d1;
  --theme-icon-pink-2: #ff786e;
  --theme-icon-lavender-1: #dbeafd;
  --theme-icon-lavender-2: #7baee6;
  --theme-icon-lavender-dark-1: #4d79b8;
  --theme-icon-lavender-dark-2: #173a74;
  --theme-icon-mint-1: #d9f8ef;
  --theme-icon-mint-2: #65d0a5;
  --theme-icon-blue-1: #d8f5ff;
  --theme-icon-blue-2: #39c8ef;
  --theme-icon-cream-1: #ffffff;
  --theme-icon-cream-2: #e6f0f7;
  --theme-icon-yellow-1: #fff2ae;
  --theme-icon-yellow-2: #ffb640;
  --theme-icon-brown-1: #ced7e2;
  --theme-icon-brown-2: #758ba8;
  --ink: var(--theme-text);
  --ink-soft: var(--theme-text-muted);
  --soft: var(--theme-text-muted);
  --lav: var(--theme-accent);
  --lav-d: #0d65a4;
  --lav-1: #dceefb;
  --lav-2: #9dd0ed;
  --mint-1: #dcf6ee;
  --mint-2: #9ee4ca;
  --mint-d: #176f57;
  --blue-1: #d8f3fc;
  --blue-2: #92daf0;
  --peach-1: #fff0d6;
  --peach-2: #ffd18b;
  --peach-d: #9a5b10;
  --pink-1: #ffe3df;
  --pink-2: #ffaaa0;
  --pink-d: #a83836;
  --cream-1: #ffffff;
  --cream-2: #e8f1f7;
  --paper: var(--theme-surface);
  --mint: #dcf6ee;
  --peach: #fff0d6;
  --rose: #ffe4df;
  --line: var(--theme-line);
  --clay-lg: var(--theme-shadow-lg);
  --clay: var(--theme-shadow);
  --clay-press: var(--theme-shadow-press);
  --inset: var(--theme-shadow-inset);
  --shadow: var(--theme-parent-shadow);
  --ok: var(--theme-success);
  --bad: var(--theme-error);
  --setup-button-radius: 18px;
}
:root[data-theme="hero-base"] h1,
:root[data-theme="hero-base"] h2,
:root[data-theme="hero-base"] h3 {
  font-family: var(--theme-font-display);
  letter-spacing: -.025em;
}
:root[data-theme="hero-base"] h1 {
  text-transform: uppercase;
  letter-spacing: .015em;
}
:root[data-theme="hero-base"] h3 {
  font-size: 1.15rem;
}

:root[data-theme="hero-base"] .big,
:root[data-theme="hero-base"] .start {
  --c1: #287fc1;
  --c2: #173a74;
  color: #ffffff;
  box-shadow: var(--clay);
}
:root[data-theme="hero-base"] .setup-actions .setup-secondary,
:root[data-theme="hero-base"] .homeb {
  --c1: #ffffff;
  --c2: #dcecf5;
}
:root[data-theme="hero-base"] #tables button.on,
:root[data-theme="hero-base"] .seg button.on {
  --c1: #173a74;
  --c2: #101d43;
  color: #ffffff;
  box-shadow: var(--clay), 0 0 0 3px rgba(16,29,67,.30);
}
:root[data-theme="hero-base"] #goTafels { --c1: #ffd15a; --c2: #e89a17; }
:root[data-theme="hero-base"] #goCijfers { --c1: #4fc7ec; --c2: #147cc4; color: #071d3f; }
:root[data-theme="hero-base"] #goSommen { --c1: #173a74; --c2: #101d43; color: #ffffff; }
:root[data-theme="hero-base"] #goSommen small { color: currentColor; }
:root[data-theme="hero-base"] #goSommen .ico.t3 { color: #101d43; text-shadow: 0 3px 0 rgba(20,124,196,.18), 0 7px 11px rgba(0,0,0,.16); }
:root[data-theme="hero-base"] #pad button:nth-child(3n+1),
:root[data-theme="hero-base"] #choices button:nth-child(3n+1),
:root[data-theme="hero-base"] #sumpad button:nth-child(3n+1) { --c1: #d9f3ff; --c2: #83d5ef; }
:root[data-theme="hero-base"] #pad button:nth-child(3n+2),
:root[data-theme="hero-base"] #choices button:nth-child(3n+2),
:root[data-theme="hero-base"] #sumpad button:nth-child(3n+2) { --c1: #fff0bf; --c2: #ffc75c; }
:root[data-theme="hero-base"] #pad button:nth-child(3n),
:root[data-theme="hero-base"] #choices button:nth-child(3n),
:root[data-theme="hero-base"] #sumpad button:nth-child(3n) { --c1: #173a74; --c2: #101d43; color: #ffffff; }
:root[data-theme="hero-base"] #gridBox,
:root[data-theme="hero-base"] #sumfix { background: var(--theme-counter-area); }
:root[data-theme="hero-base"] .trk::before { background: linear-gradient(90deg, #dce8f2, #c9eefa); }
:root[data-theme="hero-base"] .trk::after { background: linear-gradient(90deg, #35caed, #147cc4); }