/* Landing page, Chapters (D) and CD: the light theme. The base styles are dark; these rules re-colour what was written with a fixed dark colour. They apply when the person
   chose light (data-theme="light") or, with no choice made, when the system prefers it. Tokens (text, surfaces, teal, gold) flip by themselves in tokens.css. */
:root[data-theme="light"] .ldd { --glass: rgba(255,255,255,.86); --hair: rgba(75,91,122,.3); }
:root[data-theme="light"] .ldd .btn-ghost { background: rgba(255,255,255,.85); border-color: var(--line); color: var(--text); }
:root[data-theme="light"] .ldd .btn-ghost:hover { background: #fff; border-color: var(--text-dim); }
:root[data-theme="light"] .ldd .btn-gold { box-shadow: 0 8px 22px -12px rgba(184,116,0,.6); }
:root[data-theme="light"] .ldd .demo { background: rgba(255,255,255,.8); border-color: var(--line); }
:root[data-theme="light"] .ldd .ch-hero .bg { background: radial-gradient(60% 60% at 84% 36%, rgba(0,128,110,.12), transparent 66%), radial-gradient(46% 50% at 0% 100%, rgba(205,133,0,.1), transparent 64%), var(--ink-950); }
:root[data-theme="light"] .ldd .ch-rated .bg { background: radial-gradient(56% 70% at 22% 62%, rgba(15,168,90,.12), transparent 70%), radial-gradient(40% 50% at 100% 0%, rgba(205,133,0,.09), transparent 70%), linear-gradient(180deg, var(--ink-950), var(--ink-800)); }
:root[data-theme="light"] .ldd .ch-targets .bg { background: radial-gradient(60% 70% at 0% 100%, rgba(205,133,0,.12), transparent 66%), repeating-linear-gradient(0deg, rgba(75,91,122,.07) 0 1px, transparent 1px 64px), var(--ink-950); }
:root[data-theme="light"] .ldd .ch-slips .bg { background: linear-gradient(rgba(0,128,110,.07) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(0,128,110,.07) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(rgba(0,128,110,.16) 1px, transparent 1px) -1px -1px/120px 120px, linear-gradient(90deg, rgba(0,128,110,.16) 1px, transparent 1px) -1px -1px/120px 120px, radial-gradient(90% 90% at 74% 50%, #fff, var(--ink-950) 82%); }
:root[data-theme="light"] .ldd .ch-steer .bg { background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 30%, var(--ink-950)) 0%, color-mix(in srgb, var(--sc) 18%, var(--ink-950)) 55%, color-mix(in srgb, var(--sc) 8%, var(--ink-950)) 100%); }
:root[data-theme="light"] .ldd .ch-steer .bg::after { background: radial-gradient(80% 60% at 50% 38%, color-mix(in srgb, var(--sc) 28%, transparent), transparent 70%); }
:root[data-theme="light"] .ldd .giant { text-shadow: 0 0 60px color-mix(in srgb, var(--sc) 45%, transparent); }
:root[data-theme="light"] .ldd .ch-copy .bg { background: radial-gradient(60% 60% at 30% 42%, rgba(205,133,0,.1), transparent 66%), radial-gradient(rgba(75,91,122,.2) 1px, transparent 1.6px) 0 0/28px 28px, var(--ink-900); }
:root[data-theme="light"] .ldd .ch-results .bg { background: radial-gradient(60% 60% at 80% 20%, rgba(0,128,110,.09), transparent 66%), radial-gradient(50% 50% at 0% 100%, rgba(205,133,0,.08), transparent 66%), var(--ink-950); }
:root[data-theme="light"] .ldd .ch-close .bg { background: radial-gradient(60% 70% at 82% 50%, rgba(205,133,0,.09), transparent 66%), radial-gradient(50% 60% at 0% 100%, rgba(0,128,110,.08), transparent 66%), var(--ink-950); }
:root[data-theme="light"] .ldd .slip { box-shadow: 0 24px 44px -28px rgba(11,20,36,.35); }
:root[data-theme="light"] .ldd .sheet { box-shadow: 0 24px 50px -28px rgba(11,20,36,.35); }
:root[data-theme="light"] .ldd .mega { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--b) 30%, transparent)); }
:root[data-theme="light"] .ldcd .radar { background: radial-gradient(circle, rgba(0,128,110,.1), transparent 68%); }
:root[data-theme="light"] .ldcd .radar .rg { border-color: rgba(0,128,110,.45); }
:root[data-theme="light"] .ldcd .radar .r2 { border-color: rgba(0,128,110,.38); }
:root[data-theme="light"] .ldcd .radar .r3 { border-color: rgba(0,128,110,.3); }
:root[data-theme="light"] .ldcd .radar .ping { border-color: var(--teal); }
:root[data-theme="light"] .ldcd .radar .beam { background: conic-gradient(from 0deg, rgba(0,150,130,0) 0deg, rgba(0,150,130,.14) 30deg, rgba(0,150,130,.5) 34deg, rgba(0,150,130,0) 34.6deg, rgba(0,150,130,0) 360deg); }
:root[data-theme="light"] .ldcd .dialbar .track { box-shadow: 0 0 0 3px var(--ink-950), 0 0 22px -2px color-mix(in srgb, var(--sc) 55%, transparent); }
:root[data-theme="light"] .ldcd .dialbar .knob::before { box-shadow: 0 0 0 2px var(--teal), 0 0 18px color-mix(in srgb, var(--teal) 50%, transparent); }

@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .ldd { --glass: rgba(255,255,255,.86); --hair: rgba(75,91,122,.3); }
  :root:not([data-theme]) .ldd .btn-ghost { background: rgba(255,255,255,.85); border-color: var(--line); color: var(--text); }
  :root:not([data-theme]) .ldd .btn-ghost:hover { background: #fff; border-color: var(--text-dim); }
  :root:not([data-theme]) .ldd .btn-gold { box-shadow: 0 8px 22px -12px rgba(184,116,0,.6); }
  :root:not([data-theme]) .ldd .demo { background: rgba(255,255,255,.8); border-color: var(--line); }
  :root:not([data-theme]) .ldd .ch-hero .bg { background: radial-gradient(60% 60% at 84% 36%, rgba(0,128,110,.12), transparent 66%), radial-gradient(46% 50% at 0% 100%, rgba(205,133,0,.1), transparent 64%), var(--ink-950); }
  :root:not([data-theme]) .ldd .ch-rated .bg { background: radial-gradient(56% 70% at 22% 62%, rgba(15,168,90,.12), transparent 70%), radial-gradient(40% 50% at 100% 0%, rgba(205,133,0,.09), transparent 70%), linear-gradient(180deg, var(--ink-950), var(--ink-800)); }
  :root:not([data-theme]) .ldd .ch-targets .bg { background: radial-gradient(60% 70% at 0% 100%, rgba(205,133,0,.12), transparent 66%), repeating-linear-gradient(0deg, rgba(75,91,122,.07) 0 1px, transparent 1px 64px), var(--ink-950); }
  :root:not([data-theme]) .ldd .ch-slips .bg { background: linear-gradient(rgba(0,128,110,.07) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(90deg, rgba(0,128,110,.07) 1px, transparent 1px) 0 0/24px 24px, linear-gradient(rgba(0,128,110,.16) 1px, transparent 1px) -1px -1px/120px 120px, linear-gradient(90deg, rgba(0,128,110,.16) 1px, transparent 1px) -1px -1px/120px 120px, radial-gradient(90% 90% at 74% 50%, #fff, var(--ink-950) 82%); }
  :root:not([data-theme]) .ldd .ch-steer .bg { background: linear-gradient(180deg, color-mix(in srgb, var(--sc) 30%, var(--ink-950)) 0%, color-mix(in srgb, var(--sc) 18%, var(--ink-950)) 55%, color-mix(in srgb, var(--sc) 8%, var(--ink-950)) 100%); }
  :root:not([data-theme]) .ldd .ch-steer .bg::after { background: radial-gradient(80% 60% at 50% 38%, color-mix(in srgb, var(--sc) 28%, transparent), transparent 70%); }
  :root:not([data-theme]) .ldd .giant { text-shadow: 0 0 60px color-mix(in srgb, var(--sc) 45%, transparent); }
  :root:not([data-theme]) .ldd .ch-copy .bg { background: radial-gradient(60% 60% at 30% 42%, rgba(205,133,0,.1), transparent 66%), radial-gradient(rgba(75,91,122,.2) 1px, transparent 1.6px) 0 0/28px 28px, var(--ink-900); }
  :root:not([data-theme]) .ldd .ch-results .bg { background: radial-gradient(60% 60% at 80% 20%, rgba(0,128,110,.09), transparent 66%), radial-gradient(50% 50% at 0% 100%, rgba(205,133,0,.08), transparent 66%), var(--ink-950); }
  :root:not([data-theme]) .ldd .ch-close .bg { background: radial-gradient(60% 70% at 82% 50%, rgba(205,133,0,.09), transparent 66%), radial-gradient(50% 60% at 0% 100%, rgba(0,128,110,.08), transparent 66%), var(--ink-950); }
  :root:not([data-theme]) .ldd .slip { box-shadow: 0 24px 44px -28px rgba(11,20,36,.35); }
  :root:not([data-theme]) .ldd .sheet { box-shadow: 0 24px 50px -28px rgba(11,20,36,.35); }
  :root:not([data-theme]) .ldd .mega { filter: drop-shadow(0 0 22px color-mix(in srgb, var(--b) 30%, transparent)); }
  :root:not([data-theme]) .ldcd .radar { background: radial-gradient(circle, rgba(0,128,110,.1), transparent 68%); }
  :root:not([data-theme]) .ldcd .radar .rg { border-color: rgba(0,128,110,.45); }
  :root:not([data-theme]) .ldcd .radar .r2 { border-color: rgba(0,128,110,.38); }
  :root:not([data-theme]) .ldcd .radar .r3 { border-color: rgba(0,128,110,.3); }
  :root:not([data-theme]) .ldcd .radar .ping { border-color: var(--teal); }
  :root:not([data-theme]) .ldcd .radar .beam { background: conic-gradient(from 0deg, rgba(0,150,130,0) 0deg, rgba(0,150,130,.14) 30deg, rgba(0,150,130,.5) 34deg, rgba(0,150,130,0) 34.6deg, rgba(0,150,130,0) 360deg); }
  :root:not([data-theme]) .ldcd .dialbar .track { box-shadow: 0 0 0 3px var(--ink-950), 0 0 22px -2px color-mix(in srgb, var(--sc) 55%, transparent); }
  :root:not([data-theme]) .ldcd .dialbar .knob::before { box-shadow: 0 0 0 2px var(--teal), 0 0 18px color-mix(in srgb, var(--teal) 50%, transparent); }
}