/* light.css — the light version (owner, 14 Nov 2026, v2): clean PEARL WHITE with cool silver tones, deep INK text and one shining
   RUBY accent (red into a touch of violet) with a soft glow. Same arrangement as dark; nothing flat, no gold, no pink wash. */
html[data-theme="light"] { background: #f6f7fa; color-scheme: light;
  --lgrad: linear-gradient(120deg, #ff4d6d 0%, #e11d48 35%, #be123c 60%, #7c3aed 100%);
  --ink: #141826; --ink2: #3b4256; --mut: #5d6478; --edgeL: linear-gradient(140deg, rgba(225, 29, 72, .45), rgba(148, 163, 184, .25) 40%, rgba(255, 255, 255, .9) 60%, rgba(124, 58, 237, .35)); }
html[data-theme="light"]::before { background: radial-gradient(90% 60% at 90% -10%, rgba(225, 29, 72, .10), transparent 60%), radial-gradient(80% 60% at -10% 35%, rgba(124, 58, 237, .07), transparent 60%),
  radial-gradient(100% 60% at 50% 115%, rgba(225, 29, 72, .07), transparent 60%), linear-gradient(180deg, #ffffff, #f4f6fa 35%, #eef1f6 70%, #f7f8fb); }
html[data-theme="light"] body { color: var(--ink); }
html[data-theme="light"] body::before { opacity: .22; filter: blur(90px); }
html[data-theme="light"] body::after { opacity: .025; }

/* type: deep ink with a cool sheen; the ruby words shimmer */
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3,
html[data-theme="light"] .split-words .w > span { background: linear-gradient(180deg, #0d1020 10%, #262c44 60%, #454d6b); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .split-words .red .w > span, html[data-theme="light"] .red { background: linear-gradient(100deg, #ff4d6d, #e11d48 28%, #ff8fa3 46%, #be123c 62%, #7c3aed 85%, #e11d48); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .red { filter: drop-shadow(0 4px 16px rgba(225, 29, 72, .22)); }
html[data-theme="light"] .lead, html[data-theme="light"] .tool p, html[data-theme="light"] .feat p, html[data-theme="light"] .dl p { color: var(--mut); }
html[data-theme="light"] .eyebrow { background: var(--lgrad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .eyebrow::before { background: var(--lgrad); box-shadow: 0 0 10px rgba(225, 29, 72, .6); }

/* header */
html[data-theme="light"] .nav { background: linear-gradient(180deg, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0)); }
html[data-theme="light"] .nav.solid { background: linear-gradient(180deg, rgba(255, 255, 255, .92), rgba(246, 247, 250, .82)); box-shadow: 0 1px 0 rgba(148, 163, 184, .35), 0 12px 40px -24px rgba(20, 24, 38, .35); }
html[data-theme="light"] .menu a { color: var(--ink2); font-weight: 600; }
html[data-theme="light"] .menu a:hover, html[data-theme="light"] .menu a.on { color: var(--ink); }
html[data-theme="light"] .menu a.on::after, html[data-theme="light"] .menu a:hover::after { background: var(--lgrad); box-shadow: 0 0 10px rgba(225, 29, 72, .5); }
html[data-theme="light"] .brand b { background: linear-gradient(180deg, #0d1020, #3b4256); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .brand small, html[data-theme="light"] footer, html[data-theme="light"] footer .legal, html[data-theme="light"] .scroll-hint, html[data-theme="light"] .credit { color: var(--mut); }
html[data-theme="light"] .burger { color: var(--ink); }
@media (max-width: 860px) { html[data-theme="light"] .menu { background: rgba(255, 255, 255, .97); } }

/* buttons */
html[data-theme="light"] .btn-red, html[data-theme="light"] .theme-btn { background: linear-gradient(180deg, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 50%), var(--lgrad); background-size: 100% 100%, 200% 100%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .5) inset, 0 12px 34px -10px rgba(225, 29, 72, .55), 0 0 24px -8px rgba(124, 58, 237, .35); }
html[data-theme="light"] .btn-ghost { background: linear-gradient(180deg, #ffffff, #eef1f6); color: var(--ink); box-shadow: 0 0 0 1px rgba(148, 163, 184, .45) inset, 0 8px 24px -14px rgba(20, 24, 38, .35); }
html[data-theme="light"] .btn-ghost:hover { box-shadow: 0 0 0 1px rgba(225, 29, 72, .45) inset, 0 10px 30px -12px rgba(225, 29, 72, .35); }
html[data-theme="light"] .btn-ghost::after { background: linear-gradient(100deg, transparent, rgba(225, 29, 72, .12), transparent); }

/* panels: white pearl glass, silver-to-ruby edges, cool shadows */
html[data-theme="light"] .card::after, html[data-theme="light"] .tool::after, html[data-theme="light"] .feat::after, html[data-theme="light"] .dl .opt::after, html[data-theme="light"] .player::after,
html[data-theme="light"] .strip figure::after, html[data-theme="light"] .pill-list span::after, html[data-theme="light"] .filters button::after, html[data-theme="light"] .lang button::after, html[data-theme="light"] .media::after,
html[data-theme="light"] .step::after, html[data-theme="light"] .plat::after, html[data-theme="light"] .rform::after { background: var(--edgeL); }
html[data-theme="light"] .tool, html[data-theme="light"] .feat, html[data-theme="light"] .dl .opt, html[data-theme="light"] .step, html[data-theme="light"] .plat, html[data-theme="light"] .rform {
  background: linear-gradient(160deg, #ffffff, #f7f8fb 55%, #eef1f7); box-shadow: 0 24px 50px -30px rgba(20, 24, 38, .35), inset 0 1px 0 #fff; }
html[data-theme="light"] .tool:hover, html[data-theme="light"] .feat:hover, html[data-theme="light"] .plat:hover { box-shadow: 0 30px 60px -28px rgba(225, 29, 72, .35), 0 0 40px -16px rgba(124, 58, 237, .25), inset 0 1px 0 #fff; }
html[data-theme="light"] .feat::before { background: radial-gradient(circle, rgba(225, 29, 72, .14), transparent 65%); }
html[data-theme="light"] .feat .n, html[data-theme="light"] .step .n { background: var(--lgrad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .feat h4, html[data-theme="light"] .tool h4, html[data-theme="light"] .dl h4, html[data-theme="light"] .step h4, html[data-theme="light"] .plat h4 { background: linear-gradient(180deg, #0d1020, #3b4256); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .dl svg, html[data-theme="light"] .plat svg { fill: #1e2438; }
html[data-theme="light"] .tool .st { background: var(--lgrad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .tool .st.ok { background: linear-gradient(90deg, #059669, #10b981); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .pill-list span, html[data-theme="light"] .filters button, html[data-theme="light"] .lang button { background: linear-gradient(180deg, #ffffff, #f0f2f7); color: var(--ink2); }
html[data-theme="light"] .filters button.on, html[data-theme="light"] .filters button:hover, html[data-theme="light"] .lang button.on { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, .3), transparent 50%), var(--lgrad); box-shadow: 0 8px 24px -8px rgba(225, 29, 72, .5); }
html[data-theme="light"] .tag { color: #be123c; background: linear-gradient(135deg, #fff, #ffe4ea); box-shadow: 0 0 0 1px rgba(225, 29, 72, .35) inset, 0 6px 18px -6px rgba(225, 29, 72, .35); }
html[data-theme="light"] .stats b { background: var(--lgrad); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 14px rgba(225, 29, 72, .25)); }
html[data-theme="light"] .stats small { color: var(--mut); }
html[data-theme="light"] .marquee { background: linear-gradient(90deg, rgba(225, 29, 72, .07), rgba(255, 255, 255, .7) 30%, rgba(255, 255, 255, .7) 70%, rgba(124, 58, 237, .07)); }
html[data-theme="light"] .marquee::before, html[data-theme="light"] .marquee::after, html[data-theme="light"] footer::before { background: linear-gradient(90deg, transparent, #e11d48, #c4b5fd, #e11d48, transparent); box-shadow: 0 0 10px rgba(225, 29, 72, .45); }
html[data-theme="light"] .marquee div span { background: linear-gradient(180deg, #1e2438, #6b7390); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .marquee span::after { background: var(--lgrad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] footer { background: linear-gradient(180deg, transparent, rgba(226, 232, 240, .7)); }
html[data-theme="light"] footer h5 { background: var(--lgrad); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .credit .ded { background: linear-gradient(180deg, #1e2438, #be123c); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .eco { background: radial-gradient(60% 55% at 50% 45%, rgba(225, 29, 72, .08), transparent 70%); }
html[data-theme="light"] .orbit .ring { border-color: rgba(100, 116, 139, .3); }
html[data-theme="light"] .orbit .core { box-shadow: 0 0 0 1px rgba(255, 255, 255, .8), 0 0 70px 6px rgba(225, 29, 72, .28); animation: none; }
html[data-theme="light"] .glow-cursor { background: radial-gradient(circle, rgba(225, 29, 72, .09), rgba(124, 58, 237, .05) 40%, transparent 62%); }
html[data-theme="light"] .lattice-bg { opacity: .16; filter: grayscale(.6); }
html[data-theme="light"] .jali-bg, html[data-theme="light"] .feather-bg { opacity: .14; }
html[data-theme="light"] .mandala { mix-blend-mode: multiply; opacity: .28; }
html[data-theme="light"] .ornament { filter: drop-shadow(0 0 6px rgba(225, 29, 72, .3)); }
html[data-theme="light"] .media, html[data-theme="light"] .card, html[data-theme="light"] .player { box-shadow: 0 40px 80px -40px rgba(20, 24, 38, .45), 0 0 40px -24px rgba(225, 29, 72, .3); }
html[data-theme="light"] .play { background: linear-gradient(180deg, rgba(255, 255, 255, .35), transparent 50%), var(--lgrad); }

/* picture heroes: a pearl veil from the left so ink words read over the art */
html[data-theme="light"] .hero::before, html[data-theme="light"] .phero::before { background: linear-gradient(180deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, 0) 35%, rgba(246, 247, 250, .8) 82%, #f4f6fa 100%),
  linear-gradient(90deg, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, .7) 38%, rgba(255, 255, 255, 0) 72%); }
html[data-theme="light"] .hero .lead, html[data-theme="light"] .phero .lead { color: var(--ink2); }

/* deep jewel panels stay dark in both themes: the demo banner and the image cards */
html[data-theme="light"] .band { background: radial-gradient(80% 120% at 50% 0%, rgba(255, 77, 109, .45), transparent 60%), radial-gradient(60% 80% at 100% 100%, rgba(124, 58, 237, .4), transparent 60%), linear-gradient(135deg, #1a1030, #120a1c 55%, #2a0a1e);
  box-shadow: 0 50px 100px -50px rgba(124, 58, 237, .45); }
html[data-theme="light"] .band h2, html[data-theme="light"] .band .w > span, html[data-theme="light"] .card h3 { background: linear-gradient(180deg, #ffffff, #e2e6f0); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .band .lead, html[data-theme="light"] .card p { color: #d6d9e4; }
html[data-theme="light"] .band .dl p { color: #c7cad8; }
html[data-theme="light"] .band .dl h4 { background: linear-gradient(180deg, #fff, #dfe3ee); -webkit-background-clip: text; background-clip: text; color: transparent; }
html[data-theme="light"] .band .dl .opt { background: linear-gradient(160deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .02)); box-shadow: none; }
html[data-theme="light"] .band .dl svg { fill: #fff; }
html[data-theme="light"] .band .btn-ghost { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .3) inset; }
html[data-theme="light"] .band .tag, html[data-theme="light"] .card .tag { color: #ffe4ea; background: linear-gradient(135deg, rgba(255, 77, 109, .35), rgba(124, 58, 237, .3)); box-shadow: 0 0 0 1px rgba(255, 200, 210, .4) inset; }

/* the theme switch */
.theme-btn { width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: grid; place-items: center; margin-left: 18px; color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 50%), var(--grad); box-shadow: 0 6px 20px -6px rgba(255, 60, 40, .7), 0 0 0 1px rgba(255, 190, 170, .4) inset; transition: transform .3s; }
.theme-btn:hover { transform: rotate(20deg) scale(1.06); }
.theme-btn svg { width: 20px; height: 20px; }
.theme-btn .sun { display: none; } html[data-theme="light"] .theme-btn .sun { display: block; } html[data-theme="light"] .theme-btn .moon { display: none; }
.nav-r { display: flex; align-items: center; }
/* round app icons (owner: circular, the icons the apps use now) */
.orbit .ring img, .tool img, .appicon.round { border-radius: 50% !important; }
.orbit .core { border-radius: 50%; }