/* Light theme + logo plates. Product windows (.appwin) intentionally stay dark: they show the real app. */
.theme-btn { padding: 0; display: grid; place-items: center; width: 44px; }
.theme-btn .i-sun { display: none; }
html[data-theme="light"] .theme-btn .i-sun { display: block; } html[data-theme="light"] .theme-btn .i-moon { display: none; }

html[data-theme="light"] {
  --bg: #f3f4fb; --ink: #0b0f3b; --muted: #4a5082; --silver: #2a2f63; --line: rgba(11, 15, 59, 0.14);
  --glass: rgba(255, 255, 255, 0.72); --glass-2: rgba(122, 92, 255, 0.12); --cyan: #0a8aa6; --violet: #6a49f0; --coral: #e5533f;
  color-scheme: light;
}
html[data-theme="light"] body { background: var(--bg); color: var(--ink); }
html[data-theme="light"] .bg-mesh { background: radial-gradient(1200px 700px at 80% -10%, #dcd8ff 0%, transparent 60%), var(--bg); }
html[data-theme="light"] .bg-mesh i { opacity: .32; filter: blur(120px); }
html[data-theme="light"] .bg-mesh i:nth-child(1) { background: #9a86ff; } html[data-theme="light"] .bg-mesh i:nth-child(2) { background: #5fd6ee; } html[data-theme="light"] .bg-mesh i:nth-child(3) { background: #ffa595; }
html[data-theme="light"] .glass { box-shadow: 0 18px 50px rgba(40, 30, 120, .12), inset 0 1px 0 #fff; }
html[data-theme="light"] .nav .bar { background: rgba(255, 255, 255, .78); box-shadow: 0 10px 40px rgba(40, 30, 120, .12); }
html[data-theme="light"] .nav ul a:hover, html[data-theme="light"] .nav ul a[aria-current="page"] { color: var(--ink); }
html[data-theme="light"] .burger { color: var(--ink); }
@media (max-width: 900px) { html[data-theme="light"] .nav ul { background: rgba(255, 255, 255, .96); } }
html[data-theme="light"] .btn.ghost { color: var(--ink); background: rgba(255,255,255,.7); }
html[data-theme="light"] .btn.ghost:hover { background: #fff; }
html[data-theme="light"] .grad { background-image: linear-gradient(95deg, #5b3ff0 0%, #0a8aa6 55%, #e5533f 100%); }
html[data-theme="light"] .eyebrow { color: #5b3ff0; }
html[data-theme="light"] .demo-head .hint { color: #0a8aa6; }
html[data-theme="light"] .hero h1, html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3, html[data-theme="light"] h4 { color: var(--ink); }
html[data-theme="light"] .tag { color: var(--silver); } html[data-theme="light"] .tag.live { color: #0b7a55; border-color: rgba(11,122,85,.35); } html[data-theme="light"] .tag.soon { color: #b0501f; border-color: rgba(176,80,31,.3); }
html[data-theme="light"] .pcard li { background: rgba(11,15,59,.06); color: var(--silver); }
html[data-theme="light"] .pcard:hover, html[data-theme="light"] .fcard:hover { border-color: rgba(106, 73, 240, .45); }
html[data-theme="light"] .fcard .ic { background: linear-gradient(140deg, rgba(122,92,255,.22), rgba(34,211,238,.2)); }
html[data-theme="light"] .fcard .ic svg { stroke: #4b2fd6; }
html[data-theme="light"] .rcard em { color: #b0501f; }
html[data-theme="light"] .band { background: linear-gradient(120deg, rgba(122,92,255,.22), rgba(34,211,238,.16) 60%, rgba(255,122,107,.2)); }
html[data-theme="light"] .band p { color: var(--silver); }
html[data-theme="light"] .panel .num { -webkit-text-stroke-color: rgba(11, 15, 59, .25); }
html[data-theme="light"] .panel .pl:not(.th-d):not(.th-l) { background: #000; border-radius: 14px; padding: 6px 14px; mix-blend-mode: normal; }
html[data-theme="light"] footer li a { color: var(--silver); } html[data-theme="light"] footer li a:hover { color: var(--ink); }
html[data-theme="light"] .formats span, html[data-theme="light"] .hbadge { background: rgba(255,255,255,.75); color: var(--silver); border-color: var(--line); }
html[data-theme="light"] .progress { filter: none; }
html[data-theme="light"] .cursor-glow { opacity: .35; mix-blend-mode: multiply; }
html[data-theme="light"] .marquee { color: rgba(11, 15, 59, .75); }
html[data-theme="light"] .marquee span { color: inherit; -webkit-text-stroke-color: rgba(11, 15, 59, .3); }
html[data-theme="light"] .modal .card { background: rgba(255,255,255,.95); color: var(--ink); }
html[data-theme="light"] .mini-cap, html[data-theme="light"] .hero .sub, html[data-theme="light"] .phero .sub { color: var(--muted); }
html[data-theme="light"] .scroll-cue { color: var(--muted); }
/* demo frames and desk keep their dark stage so the replicas read as real app windows */
html[data-theme="light"] .dframe, html[data-theme="light"] .desk { box-shadow: 0 30px 80px rgba(30, 20, 110, .25); }
html[data-theme="light"] .appwin { box-shadow: 0 30px 80px rgba(30, 20, 110, .3), inset 0 1px 0 rgba(255,255,255,.15); }
html[data-theme="light"] :is(.appwin, .dframe, .desk, .modal .card.dark) { --ink: #f4f6ff; --muted: #aeb5da; --silver: #e6e8f0; --line: rgba(255,255,255,.12); --glass: rgba(255,255,255,.06); --glass-2: rgba(255,255,255,.1); --cyan: #22d3ee; color: #f4f6ff; }
html[data-theme="light"] .mark-stage .halo { opacity: .55; }
html, body, .glass, .nav .bar { transition: background-color .3s, color .3s, border-color .3s; }

/* theme-swapped logos: one image per theme */
.th-l { display: none; }
html[data-theme="light"] .th-l { display: block; } html[data-theme="light"] .th-d { display: none; }
.phero .plogo.th-d, .phero .plogo.th-l { width: min(620px, 88%); margin: 0 auto 26px; filter: drop-shadow(0 18px 50px rgba(110, 80, 255, .35)); }
.phero .plogo, .phero .plogo.th-d, .phero .plogo.th-l { height: auto; aspect-ratio: auto; object-fit: contain; }
.mark-stage .mark { height: auto; }