/* Shared palette layer. The existing dark theme remains the default. */
html { color-scheme: dark; }
.theme-toggle {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  color: #e5efff;
  background: rgba(255, 255, 255, .07);
  cursor: pointer;
  transition: color .2s, background-color .2s, border-color .2s;
}
.theme-toggle[hidden] { display: none; }
.theme-toggle:hover { background: rgba(255, 255, 255, .14); }
.theme-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
.theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .theme-moon { display: none; }
.case-header-actions { display: flex; align-items: center; }

html[data-theme="light"] {
  color-scheme: light;
  --canvas: #f5f7fc;
  --ink: #18243b;
  --ink-muted: #37465e;
  --ink-subtle: #52617a;
  --ink-tertiary: #65738b;
  --primary: #0064d9;
  --primary-hover: #0052b5;
  --primary-soft: rgba(0, 100, 217, .08);
  --cyan: #0064d9;
  --electric: #0064d9;
  --success: #138653;
  --surface-1: rgba(255, 255, 255, .72);
  --surface-2: rgba(255, 255, 255, .82);
  --surface-3: rgba(255, 255, 255, .9);
  --surface-4: #fff;
  --hairline: rgba(45, 72, 116, .12);
  --hairline-strong: rgba(45, 72, 116, .22);
  --glass: rgba(255, 255, 255, .32);
  --glass-rich: rgba(255, 255, 255, .56);
  --glass-edge: rgba(255, 255, 255, .95);
  --glass-edge-soft: rgba(45, 72, 116, .13);
  --glass-shadow: 0 20px 48px rgba(35, 66, 115, .1), 0 2px 6px rgba(35, 66, 115, .06), inset 0 2px 2px rgba(255, 255, 255, .88), inset 0 -2px 3px rgba(82, 142, 211, .14);
  --light-surface: linear-gradient(145deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, .07) 54%, rgba(166, 201, 245, .08));
}
html[data-theme="light"] body {
  color: var(--ink);
  background:
    radial-gradient(ellipse 58% 28% at 10% 5%, rgba(136, 191, 255, .2), transparent 72%),
    radial-gradient(ellipse 42% 28% at 95% 19%, rgba(186, 173, 246, .18), transparent 72%),
    linear-gradient(160deg, #f5f8fd, #f4f6fc 55%, #f8faff);
  background-attachment: fixed;
}
html[data-theme="light"] .home-page::after {
  opacity: .7;
  background:
    linear-gradient(118deg, transparent 28%, rgba(128, 199, 245, .18) 33%, rgba(239, 251, 255, .72) 36%, transparent 41% 65%, rgba(183, 163, 239, .14) 72%, transparent 78%),
    radial-gradient(ellipse 32% 34% at 84% 30%, rgba(174, 156, 242, .2), transparent 70%);
  filter: blur(18px);
}
html[data-theme="light"] .ambient-field::before { display: none; }
html[data-theme="light"] .ambient-field { opacity: .34; }
html[data-theme="light"] .ambient-orb { opacity: .32; }
html[data-theme="light"] .hero-content::before,
html[data-theme="light"] .hero-content::after { opacity: .32; }
html[data-theme="light"] .hero::before { border-color: var(--hairline); box-shadow: none; opacity: .35; }
html[data-theme="light"] .hero::after { opacity: .12; }
html[data-theme="light"] .theme-toggle { color: var(--ink-muted); border-color: var(--hairline); background: rgba(255, 255, 255, .75); }
html[data-theme="light"] .theme-toggle:hover { color: var(--primary); border-color: var(--hairline-strong); background: #fff; }
html[data-theme="light"] .theme-sun { display: none; }
html[data-theme="light"] .theme-toggle .theme-moon { display: block; }

/* The capsule owns its surface; the surrounding header stays transparent. */
html[data-theme="light"] .resume-header {
  border-color: var(--hairline);
  background: linear-gradient(180deg, rgba(250, 252, 255, .97), rgba(244, 248, 253, .95));
  box-shadow: 0 10px 32px rgba(48, 76, 126, .06);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
html[data-theme="light"] .global-header .header-inner {
  border-color: var(--hairline);
  border-top-color: #fff;
  background: linear-gradient(155deg, rgba(255, 255, 255, .97), rgba(232, 241, 255, .95));
  box-shadow: 0 10px 32px rgba(48, 76, 126, .06), inset 0 1px 0 #fff, inset 0 -1px 0 rgba(84, 134, 200, .12);
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
}
html[data-theme="light"] .desktop-nav a,
html[data-theme="light"] .case-header-actions a,
html[data-theme="light"] .resume-header nav a { color: var(--ink-subtle); }
html[data-theme="light"] .desktop-nav a:hover,
html[data-theme="light"] .desktop-nav a.active,
html[data-theme="light"] .case-header-actions a:hover,
html[data-theme="light"] .case-header-actions .case-back,
html[data-theme="light"] .brand-home-page .nav-resume { color: var(--primary); background: var(--primary-soft); box-shadow: none; }
html[data-theme="light"] .menu-button { border-color: var(--hairline); background: rgba(255, 255, 255, .75); }
html[data-theme="light"] .menu-button span { background: var(--ink-muted); }
html[data-theme="light"] .desktop-nav.open { border-color: var(--hairline); background: #f8faff; box-shadow: var(--glass-shadow); }

html[data-theme="light"] .hero h1 { color: var(--ink); text-shadow: none; }
html[data-theme="light"] .hero h1 span { color: var(--primary); text-shadow: none; }
html[data-theme="light"] .home-page .hero-lead,
html[data-theme="light"] .project-thesis,
html[data-theme="light"] .case-hero-lead { color: var(--ink-muted); }
html[data-theme="light"] .hero-eyebrow { color: var(--ink-subtle); border-color: var(--hairline); background: rgba(255, 255, 255, .62); box-shadow: inset 0 1px 0 #fff; }
html[data-theme="light"] .eyebrow-divider { background: var(--hairline-strong); }
html[data-theme="light"] .live-dot,
html[data-theme="light"] .contact-status i,
html[data-theme="light"] .home-page .hero-avatar figcaption .identity-availability i { background: var(--success); box-shadow: 0 0 0 4px rgba(19, 134, 83, .07); }
html[data-theme="light"] .home-page .hero-avatar {
  border-color: rgba(131, 170, 222, .2);
  border-top-color: rgba(255, 255, 255, .98);
  border-left-color: rgba(255, 255, 255, .85);
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .035) 58%, rgba(161, 188, 239, .06));
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(6px) saturate(145%);
  -webkit-backdrop-filter: blur(6px) saturate(145%);
}
html[data-theme="light"] .home-page .hero-avatar::after { background: linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 22%, transparent 72%, rgba(88, 152, 238, .12)); }
html[data-theme="light"] .home-page .hero-avatar::before { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 12px 32px rgba(48, 76, 126, .12); }
html[data-theme="light"] .home-page .hero-avatar img { box-shadow: 0 18px 44px rgba(48, 76, 126, .16); }
html[data-theme="light"] .home-page .hero-avatar figcaption,
html[data-theme="light"] .home-page .hero-avatar figcaption small,
html[data-theme="light"] .home-page .hero-avatar figcaption strong em { color: var(--ink-subtle); }
html[data-theme="light"] .home-page .hero-avatar figcaption strong { color: var(--ink); }
html[data-theme="light"] .home-page .hero-avatar figcaption .identity-availability { color: var(--ink-tertiary); }

html[data-theme="light"] .button-primary,
html[data-theme="light"] .button-inverse,
html[data-theme="light"] .resume-header .resume-download,
html[data-theme="light"] .resume-actions .resume-contact-button {
  color: #fff;
  border-color: var(--primary);
  background: linear-gradient(160deg, #1677e9, #0064d9);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 10px 24px rgba(0, 100, 217, .18);
}
html[data-theme="light"] .button-primary:hover,
html[data-theme="light"] .button-inverse:hover,
html[data-theme="light"] .resume-header .resume-download:hover,
html[data-theme="light"] .resume-actions .resume-contact-button:hover { color: #fff; background: var(--primary-hover); border-color: var(--primary-hover); }
html[data-theme="light"] .button-secondary { color: var(--ink-muted); border-color: var(--hairline); background: rgba(255, 255, 255, .74); box-shadow: 0 8px 22px rgba(48, 76, 126, .06), inset 0 1px 0 #fff; }
html[data-theme="light"] .button-secondary:hover { color: var(--primary); background: #fff; border-color: var(--hairline-strong); }
html[data-theme="light"] .text-link,
html[data-theme="light"] .about-resume-link,
html[data-theme="light"] .archive-facts dd a,
html[data-theme="light"] .case-source-link,
html[data-theme="light"] .resume-projects a { color: var(--primary); text-decoration-color: rgba(0, 100, 217, .35); }
html[data-theme="light"] .text-link:hover,
html[data-theme="light"] .about-resume-link:hover,
html[data-theme="light"] .archive-facts dd a:hover,
html[data-theme="light"] .capability-evidence li a:hover,
html[data-theme="light"] .resume-projects a:hover { color: var(--primary-hover); }

/* Preserve the glass hierarchy with white surfaces and blue-gray edges. */
html[data-theme="light"] .brand-positioning,
html[data-theme="light"] .featured-project,
html[data-theme="light"] .project-archive-grid > article,
html[data-theme="light"] .capability-evidence,
html[data-theme="light"] .method-strip,
html[data-theme="light"] .now-builder-card,
html[data-theme="light"] .open-source-evidence,
html[data-theme="light"] .open-source-card,
html[data-theme="light"] .contact-primary,
html[data-theme="light"] .contact-secondary,
html[data-theme="light"] .case-hero-meta article,
html[data-theme="light"] .case-callout,
html[data-theme="light"] .case-facts article,
html[data-theme="light"] .decision-card,
html[data-theme="light"] .tradeoff-table,
html[data-theme="light"] .case-next,
html[data-theme="light"] .resume-projects article,
html[data-theme="light"] .resume-capabilities article {
  border-color: var(--hairline);
  border-top-color: rgba(255, 255, 255, .95);
  border-left-color: rgba(255, 255, 255, .72);
  background: var(--light-surface);
  box-shadow: var(--glass-shadow);
  backdrop-filter: blur(9px) saturate(145%);
  -webkit-backdrop-filter: blur(9px) saturate(145%);
}
html[data-theme="light"] .project-archive { border-color: var(--hairline); background: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(170, 201, 245, .05)); box-shadow: var(--glass-shadow); }
html[data-theme="light"] .now-builder-primary,
html[data-theme="light"] .open-source-evidence,
html[data-theme="light"] .open-source-featured,
html[data-theme="light"] .contact-primary,
html[data-theme="light"] .case-callout,
html[data-theme="light"] .case-next { background: radial-gradient(circle at 95% 0, rgba(131, 187, 255, .1), transparent 48%), var(--light-surface); }
html[data-theme="light"] .brand-about-section { border-color: var(--hairline); background: rgba(255, 255, 255, .22); }
html[data-theme="light"] .brand-proof,
html[data-theme="light"] .archive-facts,
html[data-theme="light"] .archive-facts > div,
html[data-theme="light"] .project-sequence,
html[data-theme="light"] .project-sequence li,
html[data-theme="light"] .capability-evidence ul,
html[data-theme="light"] .brand-career-ledger,
html[data-theme="light"] .brand-career-ledger article,
html[data-theme="light"] .case-toc nav,
html[data-theme="light"] .case-toc a,
html[data-theme="light"] .case-section + .case-section,
html[data-theme="light"] .case-evidence-note,
html[data-theme="light"] .tradeoff-row,
html[data-theme="light"] .tradeoff-row > * + * { border-color: var(--hairline); }
html[data-theme="light"] .brand-proof b,
html[data-theme="light"] .project-archive-head h3,
html[data-theme="light"] .project-archive-grid > article h4,
html[data-theme="light"] .method-strip b,
html[data-theme="light"] .open-source-proof b,
html[data-theme="light"] .open-source-card h4,
html[data-theme="light"] .open-source-metrics dt,
html[data-theme="light"] .case-hero-meta b,
html[data-theme="light"] .case-callout strong,
html[data-theme="light"] .case-facts b,
html[data-theme="light"] .tradeoff-row strong { color: var(--ink); }
html[data-theme="light"] .section-label,
html[data-theme="light"] .brand-proof > span,
html[data-theme="light"] .brand-positioning > span,
html[data-theme="light"] .project-heading > div > span,
html[data-theme="light"] .project-sequence b,
html[data-theme="light"] .archive-facts dt,
html[data-theme="light"] .capability-evidence > span,
html[data-theme="light"] .method-strip span,
html[data-theme="light"] .now-builder-card > span,
html[data-theme="light"] .open-source-card-meta,
html[data-theme="light"] .open-source-card-meta i,
html[data-theme="light"] .case-hero-topline,
html[data-theme="light"] .case-toc > span,
html[data-theme="light"] .case-section-label,
html[data-theme="light"] .case-callout span,
html[data-theme="light"] .case-facts span,
html[data-theme="light"] .case-next span { color: var(--primary); }
html[data-theme="light"] .brand-proof-note,
html[data-theme="light"] .project-archive-head p,
html[data-theme="light"] .brand-home-page .project-archive-grid > article > .archive-summary,
html[data-theme="light"] .now-evidence-note,
html[data-theme="light"] .contact-status,
html[data-theme="light"] .open-source-date { color: var(--ink-subtle); }
html[data-theme="light"] .brand-proof a:hover small { color: var(--primary); }
html[data-theme="light"] .project-evidence span { border-color: var(--hairline); background: rgba(0, 100, 217, .035); }
html[data-theme="light"] .workflow-media { background: radial-gradient(ellipse at 20% 0, rgba(121, 181, 247, .18), transparent 65%), rgba(255, 255, 255, .22); }
html[data-theme="light"] .workflow-media figcaption { color: var(--ink-subtle); }
html[data-theme="light"] .workflow-steps li,
html[data-theme="light"] .past-project { border-color: var(--hairline-strong); }
html[data-theme="light"] .method-strip > i { color: var(--ink-tertiary); }
html[data-theme="light"] .brand-career-ledger article::before { background: var(--hairline-strong); }
html[data-theme="light"] .brand-career-ledger article.active::before { background: var(--primary); box-shadow: none; }
html[data-theme="light"] .open-source-proof { border-color: var(--hairline); background: rgba(255, 255, 255, .55); }
html[data-theme="light"] .open-source-proof span + span { border-color: var(--hairline); }
html[data-theme="light"] .open-source-card:hover,
html[data-theme="light"] .contact-primary:hover,
html[data-theme="light"] .contact-secondary:hover { border-color: rgba(0, 100, 217, .3); background-color: #fff; }
html[data-theme="light"] .contact-copy h2 { color: var(--ink); }
html[data-theme="light"] .contact-copy h2 span,
html[data-theme="light"] .contact-primary > i,
html[data-theme="light"] .contact-secondary > i { color: var(--primary); }
html[data-theme="light"] .contact-primary,
html[data-theme="light"] .contact-secondary { color: var(--ink); }
html[data-theme="light"] .copy-status { color: #087744; }
html[data-theme="light"] .brand-contact-section::before { opacity: .16; }

/* Product screenshots retain their original pixels; only the surrounding stage changes. */
html[data-theme="light"] .featured-project-media-product,
html[data-theme="light"] .case-cover,
html[data-theme="light"] .case-cover .product-shot-stage { border-color: var(--hairline); background: #e7edf7; }
html[data-theme="light"] .product-shot-backdrop { filter: blur(28px) brightness(1.08) saturate(.55); opacity: .16; }
html[data-theme="light"] .product-shot-main,
html[data-theme="light"] .tabizoo-shot-pair img { border-color: rgba(45, 72, 116, .18); box-shadow: 0 20px 50px rgba(48, 76, 126, .18); }
html[data-theme="light"] .featured-project-media::after { background: linear-gradient(180deg, transparent 66%, rgba(235, 242, 251, .95)); }
html[data-theme="light"] .featured-project-media figcaption,
html[data-theme="light"] .featured-project-media figcaption small,
html[data-theme="light"] .case-cover figcaption { color: var(--ink-subtle); }
html[data-theme="light"] .featured-project-media figcaption a:hover,
html[data-theme="light"] .case-cover figcaption a:hover,
html[data-theme="light"] .case-toc a:hover { color: var(--primary); }
html[data-theme="light"] .decision-card > span { color: var(--primary); border-color: var(--hairline); background: var(--primary-soft); }
html[data-theme="light"] .case-brand-mark { color: var(--primary); border-color: var(--hairline); background: var(--primary-soft); box-shadow: inset 0 1px 0 #fff; }
html[data-theme="light"] .tradeoff-head { background: rgba(0, 100, 217, .04); }
html[data-theme="light"] .home-return-fab,
html[data-theme="light"] .return-home-fab { color: var(--ink-muted); border-color: var(--hairline-strong); background: rgba(250, 252, 255, .92); box-shadow: 0 10px 30px rgba(48, 76, 126, .12), inset 0 1px 0 #fff; }
html[data-theme="light"] .home-return-fab span,
html[data-theme="light"] .return-home-fab span { color: var(--primary); }
html[data-theme="light"] .home-return-fab:hover,
html[data-theme="light"] .return-home-fab:hover { background: #fff; border-color: var(--primary); }

html[data-theme="light"] .global-footer { border-color: var(--hairline); background: rgba(255, 255, 255, .35); }
html[data-theme="light"] .global-footer .content-shell { color: var(--ink-tertiary); }
html[data-theme="light"] .rail-line,
html[data-theme="light"] .rail-labels b { color: var(--ink-tertiary); background-color: transparent; }
html[data-theme="light"] .rail-line { background: var(--hairline); }
html[data-theme="light"] .rail-labels b.active { color: var(--primary); }
html[data-theme="light"] .wechat-dialog { color: var(--ink); border-color: var(--hairline); background: rgba(248, 251, 255, .98); box-shadow: 0 28px 90px rgba(48, 76, 126, .18); }
html[data-theme="light"] .wechat-dialog::backdrop { background: rgba(45, 60, 90, .2); }
html[data-theme="light"] .wechat-card { border-color: var(--hairline); background: transparent; box-shadow: inset 0 1px 0 #fff; }
html[data-theme="light"] .wechat-qr-frame { box-shadow: 0 12px 32px rgba(48, 76, 126, .1); }
html[data-theme="light"] .wechat-close { color: var(--ink-muted); border-color: var(--hairline); background: rgba(255, 255, 255, .8); }
html[data-theme="light"] .wechat-close:hover { color: var(--primary); background: #fff; }
html[data-theme="light"] .wechat-kicker { color: var(--primary); }
html[data-theme="light"] .wechat-card > p,
html[data-theme="light"] .wechat-card > small { color: var(--ink-subtle); }

html[data-theme="light"] .resume-summary,
html[data-theme="light"] .resume-block,
html[data-theme="light"] .resume-hero,
html[data-theme="light"] .resume-timeline,
html[data-theme="light"] .resume-timeline article,
html[data-theme="light"] .resume-earlier,
html[data-theme="light"] .resume-earlier article { border-color: var(--hairline); }
html[data-theme="light"] .resume-hero h1 span { color: var(--primary); }
html[data-theme="light"] .resume-summary p,
html[data-theme="light"] .resume-projects h3,
html[data-theme="light"] .resume-project-detail > div:first-child dd,
html[data-theme="light"] .resume-capabilities b,
html[data-theme="light"] .resume-timeline h3,
html[data-theme="light"] .resume-earlier h3 { color: var(--ink-muted); }
html[data-theme="light"] .resume-projects p,
html[data-theme="light"] .resume-projects ul,
html[data-theme="light"] .resume-project-detail dd,
html[data-theme="light"] .resume-capabilities p,
html[data-theme="light"] .resume-timeline p,
html[data-theme="light"] .resume-earlier p,
html[data-theme="light"] .resume-bottom p,
html[data-theme="light"] .resume-hero address a,
html[data-theme="light"] .resume-hero address span,
html[data-theme="light"] .resume-timeline time,
html[data-theme="light"] .resume-earlier time,
html[data-theme="light"] .resume-note { color: var(--ink-subtle); }
html[data-theme="light"] .resume-actions a:hover { color: var(--primary); }

/* A separate optical rim gives the clear surface thickness without lighting the text. */
.optical-rim { display: none; }
html[data-theme="light"] .optical-glass { position: relative; }
html[data-theme="light"] .optical-glass > .optical-rim {
  display: block;
  position: absolute;
  z-index: 8;
  inset: 0;
  border-radius: inherit;
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 -1px 0 rgba(99, 149, 217, .3);
  pointer-events: none;
  opacity: .72;
  transition: opacity .22s ease;
}
@supports (mask-composite: exclude) or (-webkit-mask-composite: xor) {
  html[data-theme="light"] .optical-glass > .optical-rim {
    padding: 2px;
    border: 0;
    background: conic-gradient(from 208deg, rgba(255, 255, 255, .98), rgba(201, 233, 255, .5) 18%, rgba(92, 150, 214, .52) 29%, rgba(255, 255, 255, .98) 43%, rgba(222, 239, 255, .42) 62%, rgba(133, 158, 220, .52) 78%, rgba(255, 255, 255, .98));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
  }
}
html[data-theme="light"] .home-page .project-archive-grid > article:hover { transform: none; border-color: var(--hairline); background: var(--light-surface); box-shadow: var(--glass-shadow); }
@media (hover: hover) and (pointer: fine) {
  html[data-theme="light"] .optical-glass:hover > .optical-rim { opacity: 1; }
  html[data-theme="light"] .brand-home-page .open-source-card:hover,
  html[data-theme="light"] .brand-home-page .contact-primary:hover,
  html[data-theme="light"] .brand-home-page .contact-secondary:hover { transform: translateY(-1px); background-color: transparent; }
  html[data-theme="light"] .button:hover { transform: translateY(-1px); }
}
@media (prefers-reduced-motion: reduce) {
  html[data-theme="light"] .optical-rim { transition: none; }
}
@media (max-width: 680px) {
  .case-study-page .case-header-actions { gap: 6px; }
  .resume-page .resume-header { gap: 8px; padding-inline: 16px; }
  .resume-page .resume-header .wordmark { flex-shrink: 0; gap: 6px; font-size: 11px; white-space: nowrap; }
  .resume-page .resume-header .wordmark-symbol { width: 20px; height: 20px; }
  .resume-page .resume-header nav { gap: 4px; }
  .resume-page .resume-header nav a { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 8px; font-size: 11px; white-space: nowrap; }
}
@media print {
  .theme-toggle, .optical-rim { display: none !important; }
}