/* Production light-theme layer, integrated from the approved 2026-09-16 prototypes. */
html { color-scheme: dark; }
html[data-theme="light"] { color-scheme: light; }

html[data-theme="light"] {
  --bg: #f6f4ee;
  --panel: #ffffff;
  --panel2: #f1efe9;
  --line: rgba(20, 20, 18, .14);
  --line2: rgba(20, 20, 18, .26);
  --text: #141412;
  --ink: #141412;
  --silver: #1c1c1a;
  --muted: #5f5f5b;
  --quiet: #8c8c88;
  --dim: #8c8c88;
  --ember: #ec011c;
  --gold: #ec011c;
  --green: #1d9e4b;
  --red: #ec011c;
  --red-bright: #d10019;
  --amber: #9a6b12;
  --ember-grad: #ec011c;
  --neo-surface: #f4f2ed;
  --neo-raised: -4px -4px 10px rgba(255,255,255,.55), 6px 8px 18px rgba(20,20,18,.08);
  --neo-raised-hover: -5px -5px 12px rgba(255,255,255,.6), 8px 10px 22px rgba(20,20,18,.10);
  --neo-inset: inset 2px 2px 5px rgba(20,20,18,.06), inset -2px -2px 5px rgba(255,255,255,.7);
}

body { transition: background .3s ease, color .3s ease; }

/* Shared navigation and theme controls: transparent at top so the bar dissolves
   into the page; blurred glass only after scrolling (nav.js toggles
   .nav-scrolled, or while the mobile menu is open). */
.tape-shell > nav, .shell > nav, nav {
  background: transparent;
  border-bottom: 1px solid transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  transition: background .25s ease, border-color .25s ease;
}
nav.nav-scrolled,
nav:has(.nav-links.open) {
  background: rgba(5, 5, 5, .55);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border-bottom-color: var(--line);
}
html[data-theme="light"] nav.nav-scrolled,
html[data-theme="light"] nav:has(.nav-links.open) { background: rgba(246, 244, 238, .78); }
html[data-theme="light"] nav .brand { color: #141412; }
html[data-theme="light"] nav .nav-links a { color: #5f5f5b; }
html[data-theme="light"] nav .nav-links a.on { color: #ec011c; }
html[data-theme="light"] nav .nav-links a:hover { color: #141412; }
html[data-theme="light"] nav .nav-cta { border-color: rgba(20,20,18,.18); color: #141412 !important; }
html[data-theme="light"] nav .nav-toggle { border-color: rgba(20,20,18,.18); background: #ffffff; }
html[data-theme="light"] nav .nav-links { --theme-menu-bg: #ffffff; }
.nav-right { display: flex; align-items: center; gap: 18px; }

/* Cinematic pill toggle (vanilla homage): recessed track with sun/moon ends
   and a springy sliding thumb. Thumb position is driven purely by
   html[data-theme], so open tabs stay in sync with no extra JS. */
.theme-toggle {
  position: relative;
  width: 64px;
  height: 32px;
  flex: none;
  padding: 0;
  border: 1px solid var(--line2, rgba(255,255,255,.18));
  border-radius: 999px;
  background: var(--panel, #121212);
  box-shadow: inset 2px 2px 6px rgba(0,0,0,.5);
  cursor: pointer;
}
html[data-theme="light"] .theme-toggle {
  background: #f4f2ed;
  border-color: rgba(20,20,18,.14);
  box-shadow: var(--neo-inset);
}
.theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--ember); outline: none; }
.tt-track { position: absolute; inset: 0; display: block; }
.tt-sun, .tt-moon {
  position: absolute;
  top: 50%;
  translate: 0 -50%;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  transition: opacity .25s ease;
}
.tt-sun { left: 8px; }
.tt-moon { right: 8px; }
html[data-theme="light"] .tt-sun { opacity: 1; }
html[data-theme="light"] .tt-moon { opacity: .35; }
html[data-theme="dark"] .tt-sun { opacity: .35; }
html[data-theme="dark"] .tt-moon { opacity: 1; }
.tt-thumb {
  position: absolute;
  top: 50%;
  left: 4px;
  translate: 0 -50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(145deg, #4a4a48 0%, #171716 100%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 2px 3px 6px rgba(0,0,0,.5);
  pointer-events: none;
  transition: transform .38s cubic-bezier(.34,1.56,.64,1), background .25s ease;
}
html[data-theme="light"] .tt-thumb {
  background: linear-gradient(145deg, #ffffff 0%, #f4f2ed 100%);
  border-color: rgba(255,255,255,.84);
  box-shadow: -2px -2px 5px rgba(255,255,255,.6), 3px 4px 8px rgba(20,20,18,.18);
}
html[data-theme="dark"] .tt-thumb { transform: translateX(32px); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  nav.nav-scrolled { background: #050505; }
  html[data-theme="light"] nav.nav-scrolled { background: #f6f4ee; }
}

@media (max-width: 980px) {
  .nav-right { margin-left: auto; gap: 8px; }
  .nav-right .nav-links { right: 20px; }
  html[data-theme="light"] nav .nav-links {
    background: var(--theme-menu-bg, #ffffff);
    border-color: rgba(20,20,18,.14);
    box-shadow: 0 20px 50px rgba(20,20,18,.18);
  }
  html[data-theme="light"] nav .nav-links a { border-color: rgba(20,20,18,.10); }
}

@media (max-width: 620px) {
  .nav-right .theme-toggle { width: 64px; height: 32px; padding: 0; }
}

/* Shared light surfaces. */
html[data-theme="light"] .pearl-heading { color: #1a1917; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  html[data-theme="light"] .pearl-heading {
    background: linear-gradient(112deg, #23221d 5%, #6e6142 30%, #0e7d9e 52%, #b34a2a 72%, #23221d 92%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
html[data-theme="light"] body.tape-page::before {
  background-image: linear-gradient(rgba(20,20,18,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,18,.05) 1px, transparent 1px);
}
html[data-theme="light"] .about-bg-layer,
html[data-theme="light"] .static-bg-layer {
  background-image: radial-gradient(rgba(20,20,18,.13) 1px, transparent 1.3px);
}
html[data-theme="light"] .vignette-layer {
  background: none;
}
html[data-theme="light"] .brand-logo { box-shadow: 0 0 0 1px rgba(20,20,18,.12); border-radius: 6px; }
html[data-theme="light"] .btn.primary { color: #ffffff; }

/* Search and Live. */
html[data-theme="light"] .tape-page .toolbar input[type="date"] { background: #ffffff; color-scheme: light; }
html[data-theme="light"] .tape-page .chip.on { color: #ffffff; }
html[data-theme="light"] .feed-frame { background: rgba(20,20,18,.02); }
html[data-theme="light"] .tape-page .trade:hover { background: rgba(20,20,18,.03); }
html[data-theme="light"] .tape-page #feed .trade {
  --card-long: #159a46;
  --card-short: #d10019;
  background: #faf9f6;
  border-color: rgba(255,255,255,.78);
  border-radius: 14px;
  box-shadow: var(--neo-raised), inset 1px 1px 0 rgba(255,255,255,.92);
}
html[data-theme="light"] .tape-page #feed .trade:hover {
  background: #f4f2ed;
  border-color: rgba(255,255,255,.9);
  box-shadow: var(--neo-raised-hover), inset 1px 1px 0 rgba(255,255,255,.96);
}
html[data-theme="light"] .tape-page #feed .trade::before { background: #c9c9c5; }
html[data-theme="light"] .tape-page #feed .trade:has(.badge.long)::before { background: #159a46; box-shadow: 1px 0 6px rgba(21,154,70,.4); }
html[data-theme="light"] .tape-page #feed .trade:has(.badge.short)::before { background: #ec011c; box-shadow: 1px 0 6px rgba(236,1,28,.35); }
html[data-theme="light"] .tape-page #feed .trade > :nth-child(3),
html[data-theme="light"] .tape-page #feed .trade > :nth-child(4),
html[data-theme="light"] .tape-page #feed .trade > :nth-child(5),
html[data-theme="light"] .tape-page #feed .trade > :nth-child(6) {
  background: #f4f2ed;
  border-color: rgba(20,20,18,.075);
  border-radius: 11px;
  box-shadow: var(--neo-inset);
}
html[data-theme="light"] .tape-page .trade .t,
html[data-theme="light"] .tape-page .trade .f .k,
html[data-theme="light"] .trade-dollars,
html[data-theme="light"] .result-label,
html[data-theme="light"] .session-page,
html[data-theme="light"] .tape-page .page-size { color: var(--muted); }
html[data-theme="light"] .session-metrics {
  background: #faf9f6;
  border-color: rgba(255,255,255,.82);
  border-radius: 14px;
  box-shadow: var(--neo-raised), inset 1px 1px 0 rgba(255,255,255,.94);
}
html[data-theme="light"] .session-metric span { color: var(--muted); }
html[data-theme="light"] .tape-page .trade .badge.result {
  background: var(--neo-surface);
  box-shadow: -3px -3px 7px rgba(255,255,255,.6), 4px 5px 10px rgba(20,20,18,.08);
}
html[data-theme="light"] .tape-page .trade .badge.result.w { border-color: rgba(20,20,18,.4); }
html[data-theme="light"] .tape-page .badge.long { color: var(--card-long, #159a46); }
html[data-theme="light"] .tape-page .badge.short { color: var(--card-short, #d10019); }
html[data-theme="light"] .tape-page .lock { background: rgba(20,20,18,.02); }

/* Forms, panels, and commercial pages. */
html[data-theme="light"] input,
html[data-theme="light"] textarea { background: #ffffff; color: var(--text); }
html[data-theme="light"] .contact-page input,
html[data-theme="light"] .contact-page textarea,
html[data-theme="light"] .account-page input,
html[data-theme="light"] .totp-secret-card code { background: #ffffff; }
html[data-theme="light"] .form-panel,
html[data-theme="light"] .login-panel {
  background: rgba(255,255,255,.75);
  box-shadow: 0 20px 44px rgba(20,20,18,.10), inset 0 1px 0 rgba(255,255,255,.6);
}
html[data-theme="light"] .terms-route { background: #ffffff; }
html[data-theme="light"] .terms-route-list li { color: #3d3d3b; }
html[data-theme="light"] .terms-route-note { background: #ffffff; }
html[data-theme="light"] .terms-final-cta,
html[data-theme="light"] .about-closing-panel { background: rgba(255,255,255,.7); }
html[data-theme="light"] .about-route-link:hover { background: rgba(20,20,18,.03); }
html[data-theme="light"] .auth-mode-toggle { background: rgba(20,20,18,.04); }
html[data-theme="light"] .totp-qr-card,
html[data-theme="light"] .totp-secret-card { background: #ffffff; }
html[data-theme="light"] .totp-account-status.is-ready { color: #1d9e4b; }

/* Shared light-theme neumorphic surfaces. Layout rules remain with each page. */
html[data-theme="light"] .home-page .bridge-grid > .card,
html[data-theme="light"] .home-page .tape-card,
html[data-theme="light"] .about-route-link,
html[data-theme="light"] .about-closing-panel,
html[data-theme="light"] .terms-route,
html[data-theme="light"] .terms-final-cta,
html[data-theme="light"] .terms-disclaimer,
html[data-theme="light"] .form-panel,
html[data-theme="light"] .login-panel,
html[data-theme="light"] .totp-qr-card,
html[data-theme="light"] .totp-secret-card,
html[data-theme="light"] .legal-toc,
html[data-theme="light"] .tape-page .lock {
  background: #faf9f6;
  border-color: rgba(255,255,255,.82);
  box-shadow: var(--neo-raised), inset 1px 1px 0 rgba(255,255,255,.94);
}
html[data-theme="light"] .terms-route.featured { border-color: rgba(236,1,28,.48); }
html[data-theme="light"] .about-principles,
html[data-theme="light"] .about-team-origins,
html[data-theme="light"] .agreement-list {
  gap: 20px;
  border-top: 0;
}
html[data-theme="light"] .about-principle,
html[data-theme="light"] .about-team-origin,
html[data-theme="light"] .agreement-item {
  padding: 28px;
  background: #faf9f6;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 12px;
  box-shadow: var(--neo-raised), inset 1px 1px 0 rgba(255,255,255,.94);
}
html[data-theme="light"] .about-principle + .about-principle,
html[data-theme="light"] .about-team-origin + .about-team-origin { padding-left: 28px; border-left: 1px solid rgba(255,255,255,.82); }
html[data-theme="light"] .agreement-item { border-bottom: 1px solid rgba(255,255,255,.82); }
html[data-theme="light"] .about-route-link {
  margin-top: 18px;
  padding-right: 24px;
  padding-left: 24px;
  border: 1px solid rgba(255,255,255,.82);
  border-radius: 12px;
}
html[data-theme="light"] .about-route-link:hover {
  background: #f4f2ed;
  box-shadow: var(--neo-raised-hover), inset 1px 1px 0 rgba(255,255,255,.96);
}
html[data-theme="light"] .contact-note,
html[data-theme="light"] .terms-route-note,
html[data-theme="light"] .account-note-foot,
html[data-theme="light"] .auth-mode-toggle,
html[data-theme="light"] .totp-account-status,
html[data-theme="light"] .legal-notice,
html[data-theme="light"] .legal-risk,
html[data-theme="light"] .legal-liability {
  box-shadow: var(--neo-inset);
}
/* Contact and Login footnote notes render as recessed panels in light mode:
   they need full panel padding so text never touches the inset edges. */
html[data-theme="light"] .contact-note,
html[data-theme="light"] .account-note-foot {
  padding: 18px 20px;
  background: rgba(20,20,18,.025);
  border: 1px solid rgba(20,20,18,.06);
  border-radius: 12px;
}
html[data-theme="light"] input,
html[data-theme="light"] textarea,
html[data-theme="light"] .totp-secret-card code {
  border-color: rgba(20,20,18,.08);
  box-shadow: var(--neo-inset);
}

/* Buttons keep their size and role; only their surface depth changes. */
html[data-theme="light"] .nav-cta,
html[data-theme="light"] .btn.ghost,
html[data-theme="light"] .tape-page .chip:not(.on),
html[data-theme="light"] .day-nav-btn,
html[data-theme="light"] .tape-page .pager button,
html[data-theme="light"] .auth-mode-btn:not(.is-active) {
  background: linear-gradient(145deg, #ffffff 0%, var(--neo-surface) 100%);
  border-color: rgba(255,255,255,.84);
  box-shadow: -3px -3px 8px rgba(255,255,255,.6), 4px 5px 10px rgba(20,20,18,.08);
}
html[data-theme="light"] .nav-cta:hover,
html[data-theme="light"] .btn.ghost:hover,
html[data-theme="light"] .tape-page .chip:not(.on):hover,
html[data-theme="light"] .day-nav-btn:hover:not(:disabled),
html[data-theme="light"] .tape-page .pager button:hover:not(:disabled) {
  box-shadow: -4px -4px 10px rgba(255,255,255,.65), 5px 6px 12px rgba(20,20,18,.10);
}
html[data-theme="light"] .btn.primary,
html[data-theme="light"] .home-page .btn-primary:not(.hero-cta),
html[data-theme="light"] .tape-page .chip.on,
html[data-theme="light"] .auth-mode-btn.is-active {
  color: #ffffff;
  box-shadow: -2px -2px 6px rgba(255,255,255,.5), 4px 5px 12px rgba(236,1,28,.16), inset 0 1px 0 rgba(255,255,255,.2);
}
html[data-theme="light"] .home-page .card-orange,
html[data-theme="light"] .home-page .comp {
  box-shadow: -4px -4px 10px rgba(255,255,255,.55), 6px 8px 18px rgba(236,1,28,.12), inset 1px 1px 0 rgba(255,255,255,.22);
}

/* Legal pages use self-contained base styles, then this light presentation layer. */
html[data-theme="light"] .legal-page::before {
  background-image: linear-gradient(rgba(20,20,18,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20,20,18,.05) 1px, transparent 1px);
}
html[data-theme="light"] .legal-page .legal-notice {
  background: rgba(236,1,28,.055);
  color: #612b25;
}
html[data-theme="light"] .legal-page .legal-notice strong,
html[data-theme="light"] .legal-page .legal-section strong { color: #141412; }
html[data-theme="light"] .legal-page .legal-toc { background: rgba(255,255,255,.72); }
html[data-theme="light"] .legal-page .legal-section p,
html[data-theme="light"] .legal-page .legal-section li { color: #3d3d3b; }
html[data-theme="light"] .legal-page .legal-risk { background: #fff7f4; }
html[data-theme="light"] .legal-page .legal-risk p,
html[data-theme="light"] .legal-page .legal-risk li { color: #553832; }
html[data-theme="light"] .legal-page .legal-liability { background: #ffffff; color: #292927; }
html[data-theme="light"] .legal-page .legal-liability strong { color: #141412; }

/* Home page. */
html[data-theme="light"] .home-page {
  --eyebrow-bg: rgba(255,255,255,.72);
  --eyebrow-border: rgba(20,20,18,.14);
  --spine-line: linear-gradient(180deg, #0e7d9e 0%, #9a9a96 45%, #c9c9c5 100%);
  --spine-glow: rgba(14,125,158,.18);
  --marker-bg: #ffffff;
  --marker-border: #3a3a38;
  --rate-color: #5f5f5b;
  --today: #0b6d8c;
  --cta-bg: #faf9f6;
  --cta-gloss: none;
  --cta-border: rgba(255,255,255,.84);
  --cta-shadow: var(--neo-raised), inset 1px 1px 0 rgba(255,255,255,.9);
}
html[data-theme="light"] .home-page .dots { background-image: radial-gradient(rgba(20,20,18,.13) 1px, transparent 1.3px); }
html[data-theme="light"] .home-page .vignette {
  background: none;
}
html[data-theme="light"] .home-page .eyebrow { background: var(--eyebrow-bg); border-color: var(--eyebrow-border); }
html[data-theme="light"] .home-page .hero-copy .hero-cta {
  color: #141412;
  background: var(--cta-bg);
  border-color: var(--cta-border);
  border-bottom-color: var(--red);
  box-shadow: var(--cta-shadow);
  text-shadow: none;
}
html[data-theme="light"] .home-page .hero-copy .hero-cta::after {
  box-shadow: none;
}
html[data-theme="light"] .home-page .hero-copy .hero-cta:hover {
  background: #f4f2ed;
  box-shadow: var(--neo-raised-hover), inset 1px 1px 0 rgba(255,255,255,.95);
}
html[data-theme="light"] .home-page .hero-copy .hero-cta:hover::after {
  box-shadow: none;
}
html[data-theme="light"] .home-page .hero-copy .hero-cta:active {
  background: #f4f2ed;
  box-shadow: var(--neo-inset);
}
html[data-theme="light"] .home-page .hero-copy .hero-cta:focus-visible { outline-color: var(--red); }
html[data-theme="light"] .home-page .weekly-spine::before { background: var(--spine-line); box-shadow: 0 0 14px var(--spine-glow); }
html[data-theme="light"] .home-page .week-day {
  --rate-hover-color: #141412;
  --rate-glow-rgb: 20, 20, 18;
  color: var(--muted);
}
html[data-theme="light"] .home-page .week-day-name { color: var(--ink); }
html[data-theme="light"] .home-page .week-day-date { color: var(--muted); }
html[data-theme="light"] .home-page .week-marker { background: var(--marker-bg); border-color: var(--marker-border); box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
html[data-theme="light"] .home-page .week-day-rate { padding: 0; background: transparent; color: var(--rate-color); }
html[data-theme="light"] .home-page .week-days.is-loading .week-day-name::before,
html[data-theme="light"] .home-page .week-days.is-loading .week-day-date::before,
html[data-theme="light"] .home-page .week-days.is-loading .week-day-rate::before { background: rgba(20,20,18,.10); }
html[data-theme="light"] .home-page .week-days.is-loading .week-marker { background: #ffffff; border-color: rgba(20,20,18,.28); }
html[data-theme="light"] .home-page .week-day.is-today .week-day-name,
html[data-theme="light"] .home-page .week-day.is-today .week-day-date,
html[data-theme="light"] .home-page .week-day.is-today .week-day-rate { color: var(--today); }
html[data-theme="light"] .home-page .week-day.is-today .week-marker { border-color: var(--today); box-shadow: 0 0 0 4px rgba(14,125,158,.12), 0 0 16px rgba(14,125,158,.3); }
html[data-theme="light"] .home-page .week-day.is-peak .week-day-rate { color: var(--red-bright); }
html[data-theme="light"] .home-page .week-peak-range { color: var(--muted); border-color: rgba(20,20,18,.28); }
html[data-theme="light"] .home-page .session-chart-title { color: #3d3d3b; }
html[data-theme="light"] .home-page .session-chart-status { color: var(--dim); }
html[data-theme="light"] .home-page .sc-grid { stroke: rgba(20,20,18,.05); }
html[data-theme="light"] .home-page .sc-bench { stroke: rgba(20,20,18,.08); }
html[data-theme="light"] .home-page .sc-ylab { fill: #5f5f5b; }
html[data-theme="light"] .home-page .sc-line { stroke: #3d3d3b; }
html[data-theme="light"] .home-page .sc-dot { fill: #ffffff; stroke: #3d3d3b; }
html[data-theme="light"] .home-page .sc-hollow { stroke: rgba(20,20,18,.30); }
html[data-theme="light"] .home-page .sc-rate { fill: #141412; }
html[data-theme="light"] .home-page .sc-xday { fill: #141412; }
html[data-theme="light"] .home-page .sc-xdate { fill: #5f5f5b; }
html[data-theme="light"] .home-page .sc-peak-halo { fill: rgba(236,1,28,.14); }
html[data-theme="light"] .home-page .sc-peak-dot { fill: #ec011c; stroke: #ffffff; }
html[data-theme="light"] .home-page .sc-peak-rate { fill: #d10019; }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .home-page .sc-point:hover .sc-dot {
    stroke: #141412;
    filter: drop-shadow(0 0 5px rgba(20,20,18,.35));
  }
  html[data-theme="light"] .home-page .sc-point:hover .sc-peak-dot {
    filter: drop-shadow(0 0 7px rgba(236,1,28,.55));
  }
}
html[data-theme="light"] .home-page .sc-skel-dot { stroke: rgba(20,20,18,.3); }
html[data-theme="light"] .home-page .week-peak-value.is-loading::before {
  border-color: rgba(20,20,18,.20);
  border-top-color: rgba(20,20,18,.92);
  box-shadow: 0 0 14px rgba(20,20,18,.12);
}
html[data-theme="light"] .home-page .rotator { border-color: rgba(20,20,18,.28); }
html[data-theme="light"] .home-page .ghost-row a { color: var(--dim); border-color: rgba(20,20,18,.28); }
html[data-theme="light"] .home-page .sec { border-color: rgba(20,20,18,.10); }
html[data-theme="light"] .home-page .card-dark {
  background: linear-gradient(180deg, #ffffff 0%, #f1efe9 100%);
  border-color: rgba(20,20,18,.14);
  color: #141412;
}
html[data-theme="light"] .home-page .card-dark small,
html[data-theme="light"] .home-page .card-dark p { color: #5f5f5b; }
html[data-theme="light"] .home-page .card-dark h3 { color: #141412; border-bottom-color: rgba(20,20,18,.14); }
html[data-theme="light"] .home-page .card-dark .card-visual { background-image: radial-gradient(rgba(20,20,18,.7) 1.2px, transparent 1.4px); }
html[data-theme="light"] .home-page .card-orange { color: #ffffff; }
html[data-theme="light"] .home-page .card-orange small { color: rgba(255,255,255,.75); border-bottom-color: rgba(255,255,255,.3); }
html[data-theme="light"] .home-page .card-orange h3 { color: #ffffff; border-bottom-color: rgba(255,255,255,.3); }
html[data-theme="light"] .home-page .card-orange p { color: rgba(255,255,255,.85); }
html[data-theme="light"] .home-page .card-orange .card-visual { background-image: radial-gradient(rgba(255,255,255,.85) 1.2px, transparent 1.4px); }
html[data-theme="light"] .home-page .bridge-grid > .card.card-orange {
  background: #ec011c;
  border-color: rgba(0,0,0,.3);
  color: #ffffff;
  box-shadow: -4px -4px 10px rgba(255,255,255,.55), 6px 8px 18px rgba(236,1,28,.12), inset 1px 1px 0 rgba(255,255,255,.22);
}
html[data-theme="light"] .home-page .sec-record { background: none; }
html[data-theme="light"] .home-page .tape-card {
  background: #faf9f6;
  box-shadow: var(--neo-raised), inset 1px 1px 0 rgba(255,255,255,.94);
}
html[data-theme="light"] .home-page .sec-comp {
  background: radial-gradient(75% 130% at 50% 50%, rgba(236,1,28,.08) 0%, rgba(246,244,238,0) 70%);
}
html[data-theme="light"] .home-page .comp { color: #ffffff; }
html[data-theme="light"] .home-page .comp-foot { border-top-color: rgba(255,255,255,.3); }
html[data-theme="light"] .home-page .anat { border-color: rgba(20,20,18,.12); }
html[data-theme="light"] .home-page .anat-row { border-color: rgba(20,20,18,.12); }
html[data-theme="light"] .home-page .anat-row strong { color: #1c1c1a; }
html[data-theme="light"] .home-page .foot { border-color: rgba(20,20,18,.10); }

@media (max-width: 680px) {
  html[data-theme="light"] .home-page .weekly-spine::before {
    background: linear-gradient(#f6f4ee, #f6f4ee) padding-box,
      conic-gradient(from -90deg, #0e7d9e, #9a9a96 38%, #c9c9c5 72%, #0e7d9e) border-box;
  }
}

@media (prefers-reduced-motion: reduce) {
  body { transition: none; }
}