/* Work / Life is a page-wide theme, driven by the existing mode control. */
body[data-home-mode="work"] {
  --bg: #0b1524; --ink: #f0f4fa; --muted: #a3b3c9; --blue: #9bc4ff;
  --line: #2a3a51; --surface: #132136; --surface-raised: #1b2d46;
  --section-soft: #101d30; --accent: #9bc4ff; --accent-ink: #102039;
  --link-ink: #b8d5ff; --figure-line: #6384ad; --figure-dot: #6e8caf;
  color-scheme: dark;
}
body[data-home-mode="life"] {
  --bg: #fbfcff; --ink: #192c46; --muted: #59677c; --blue: #4775da;
  --line: #dce3f0; --surface: #eef2fc; --surface-raised: #e4ecff;
  --section-soft: #f1f5ff; --accent: #4775da; --accent-ink: #fff;
  --link-ink: #315cbd; --figure-line: #93a6cf; --figure-dot: #a8c2ed;
  color-scheme: light;
}
body { background: var(--bg); color: var(--ink); transition: background .6s ease, color .6s ease; }
body :is(.methodology-section,.work-section,.contact-section,.site-footer,.case-card,.method-stage,.method-option,.method-trigger,dialog,.career-section) {
  transition: background-color .6s ease, color .6s ease, border-color .6s ease, opacity .85s ease, transform .85s cubic-bezier(.2,.7,.2,1);
}
body .muted { color: var(--muted); }
body .site-header { color: var(--ink); border-color: var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
body[data-home-mode="work"] .site-header { background: rgba(11,21,36,.62); }
body[data-home-mode="life"] .site-header { background: rgba(251,252,255,.68); }
body[data-home-mode="life"] .nav-links { color: #59677c; }
body[data-home-mode="life"] .nav-contact { background: #e8efff; color: #244f9e; }
body[data-home-mode="life"] .language-switch { background: #fff; border-color: #d9e2f1; }
body[data-home-mode="life"] .language-switch button[aria-pressed="true"] { background: #4775da; color: #fff; }
body[data-home-mode="life"] .personality-hero { --scene-base: #f4f8ff; --accent: #4775da; }
body[data-home-mode="life"] .personality-hero .pill { background: #4775da; color: #fff; }
body[data-home-mode="life"] .personality-hero .pill:hover { background: #345fbd; }
body[data-home-mode="life"] .mode-switch { background: #f2f5ffe6; border-color: #d4ddf0; }
body[data-home-mode="life"] .mode-switch button[aria-pressed="true"] { background: #fff; color: #395cb2; }

/* Methodology stays flat in both themes. */
body .methodology-section { --method-ink: var(--ink); background: var(--bg); color: var(--ink); border-color: var(--line); }
body .method-stage { background: var(--bg); }
body :is(.method-label,.method-introduction,.method-panel p,.method-number) { color: var(--muted); }
body .method-option.is-active { background: var(--surface); }
body .method-trigger { background: var(--surface); color: var(--ink); }
body .method-trigger:hover { background: var(--surface-raised); }
body .method-option.is-active .method-trigger { background: transparent; color: var(--accent); }
body .method-box path { fill: var(--section-soft); stroke: var(--line); }
body .method-links path { stroke: var(--figure-line); }
body .method-route { stroke: var(--accent); }
body .method-orb { background: var(--figure-dot); }
body .method-point-0 .method-orb { background: var(--accent); }
body .method-point-label, body .method-point-0 .method-point-label { color: var(--ink); }
body[data-home-mode="life"] .method-point-1 .method-orb { background: #a8b8f1; }
body[data-home-mode="life"] .method-point-2 .method-orb { background: #6fc9bc; }
body[data-home-mode="life"] .method-point-3 .method-orb { background: #eeae83; }
body[data-home-mode="life"] .method-point-4 .method-orb { background: #c1a3e5; }

/* Project examples are themed too, including their diagrams. */
body .work-section { background: var(--section-soft); color: var(--ink); border-radius: 0; }
body .section-heading .eyebrow, body .section-heading > p, body .work-disclosure { color: var(--muted); }
body[data-home-mode="work"] .workplace { background: #14253e; }
body[data-home-mode="work"] .school { background: #172b3b; color: var(--ink); }
body[data-home-mode="work"] .airline { background: #27283e; color: var(--ink); }
body[data-home-mode="work"] .case-description,
body[data-home-mode="work"] .card-bottom,
body[data-home-mode="work"] .school .case-description,
body[data-home-mode="work"] .school .card-bottom,
body[data-home-mode="work"] .airline .case-description,
body[data-home-mode="work"] .chart-top,
body[data-home-mode="work"] .chart-caption,
body[data-home-mode="work"] .chart-top > span:last-child,
body[data-home-mode="work"] .loyalty-caption { color: #b1c1d5; opacity: 1; }
body[data-home-mode="work"] .school .plus { background: #304b60; color: #f1f6ff; }
body[data-home-mode="work"] .chart-columns { border-color: #526e87; }
body[data-home-mode="life"] .workplace { background: #eaf2ff; color: #1b3659; }
body[data-home-mode="life"] .school { background: #e8f6f0; color: #173e3b; }
body[data-home-mode="life"] .airline { background: #f7eeff; color: #493b65; }
body[data-home-mode="life"] .case-description,
body[data-home-mode="life"] .card-bottom { color: #526780; opacity: 1; }
body[data-home-mode="life"] .school .case-description,
body[data-home-mode="life"] .school .card-bottom,
body[data-home-mode="life"] .chart-top,
body[data-home-mode="life"] .chart-caption,
body[data-home-mode="life"] .chart-top > span:last-child { color: #476d67; }
body[data-home-mode="life"] .airline .case-description,
body[data-home-mode="life"] .airline .card-bottom,
body[data-home-mode="life"] .loyalty-caption { color: #705c87; }
body[data-home-mode="life"] .plus { background: #d2e2fb; color: #315881; }
body[data-home-mode="life"] .school .plus { background: #c9e6da; color: #28564b; }
body[data-home-mode="life"] .airline .plus { background: #e7d8f5; color: #755493; }
body[data-home-mode="life"] .solution-orbit { border-color: #98b3d15c; box-shadow: none; }
body[data-home-mode="life"] .system-core { background: #dceaff; border-color: #aac4e7; color: #294a77; box-shadow: none; }
body[data-home-mode="life"] .core-symbol { color: #4976b4; }
body[data-home-mode="life"] .system-node { background: #f8fbff; border-color: #bbd0ea; color: #3f6088; box-shadow: 0 8px 20px #476a9512; }
body[data-home-mode="life"] .node-dot { background: #729bdd; }
body[data-home-mode="life"] .visual-label { color: #5f7fa5; }
body[data-home-mode="life"] .chart-columns { border-color: #9ccbbb; }
body[data-home-mode="life"] .chart-columns i { background: #78bda9; }
body[data-home-mode="life"] .circle-first { background: #dcebedb0; border-color: #a5c9cf; color: #406c72; box-shadow: none; }
body[data-home-mode="life"] .circle-second { background: #f5dfd7b0; border-color: #ddb6af; color: #895d59; box-shadow: none; }
body[data-home-mode="life"] .loyalty-link { color: #766582; }

/* About, contact, footer and case dialogs use the same theme. */
body .about-section { color: var(--ink); }
body :is(.about-section .eyebrow,.about-copy > p + p,.about-notes small,.experience-date,.experience-role,.experience-row > p) { color: var(--muted); }
body .about-notes { border-color: var(--line); }
body .contact-section { background: var(--section-soft); color: var(--ink); }
body .contact-section .eyebrow { color: var(--muted); }
body .gradient-text { background: none; color: var(--accent); }
body .contact-section .pill { background: var(--accent); color: var(--accent-ink); }
body .email-link { color: var(--link-ink); }
body .site-footer { background: var(--bg); color: var(--muted); border-color: var(--line); }
body .site-footer .wordmark, body .site-footer > a:last-child:hover { color: var(--ink); }
body dialog { background: var(--surface); color: var(--ink); border-color: var(--line); }
body .dialog-close { background: var(--surface-raised); color: var(--ink); }
body .dialog-inner .eyebrow { color: var(--accent); }
body :is(.dialog-lead,.dialog-body p,.dialog-note) { color: var(--muted); }
body .dialog-body, body .dialog-note { border-color: var(--line); }

/* A continuous career timeline, with company context and personal role apart. */
.career-section { padding: 112px 0 96px; background: var(--bg); color: var(--ink); }
.career-section .section-heading { margin-bottom: 64px; }
.career-timeline { list-style: none; margin: 0; padding: 0; }
.career-entry { position: relative; display: grid; grid-template-columns: 180px minmax(0,1fr); gap: 44px; padding-bottom: 56px; }
.career-entry::before { content: ''; position: absolute; left: 5px; top: 17px; bottom: -17px; width: 1px; background: var(--line); }
.career-entry:last-child { padding-bottom: 0; }
.career-entry:last-child::before { bottom: 0; background: linear-gradient(var(--line), transparent); }
.career-date { display: flex; align-items: center; align-self: start; gap: 18px; min-height: 34px; color: var(--muted); font-size: 13px; font-weight: 550; letter-spacing: .015em; white-space: nowrap; }
.career-marker { flex: 0 0 11px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--accent); background: var(--bg); z-index: 1; }
.career-entry:first-child .career-marker { background: var(--accent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent); }
.career-story { display: grid; grid-template-columns: .72fr 1.28fr; gap: 48px; border-bottom: 1px solid var(--line); padding-bottom: 55px; }
.career-entry:last-child .career-story { border-bottom: 0; padding-bottom: 0; }
.logo-filters { position: absolute; pointer-events: none; overflow: hidden; }
.career-logo { display: flex; align-items: center; justify-content: flex-start; width: 244px; max-width: 100%; height: 74px; padding: 0; background: transparent; border: 0; border-radius: 0; margin-bottom: 24px; }
.career-logo img { display: block; max-width: 100%; height: auto; object-fit: contain; }
.career-logo .logo-iqair { display: block; width: 180px; height: 50px; overflow: hidden; }
.career-logo .logo-laix { display: block; width: 144px; height: auto; }
.career-logo .logo-bigmind { width: 164px; }
.career-logo .logo-paper-source { filter: url(#career-logo-color); }
body[data-home-mode="work"] .career-logo .logo-paper-source { filter: url(#career-logo-white); }
body[data-home-mode="work"] .career-logo .laix-symbol { filter: url(#career-smile-white); }
body[data-home-mode="work"] .career-logo .laix-wordmark { filter: brightness(0) invert(1); }
body[data-home-mode="life"] .career-logo :is(.laix-symbol,.laix-wordmark) { filter: none; }
.career-company h3 { font-size: 26px; font-weight: 600; letter-spacing: -.035em; line-height: 1.2; margin: 0 0 14px; }
.career-company-copy { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 0; max-width: 390px; }
.career-contribution { padding-top: 5px; }
.career-role-label { font-size: 12px; line-height: 1.5; letter-spacing: .09em; color: var(--accent); font-weight: 600; margin: 0 0 12px; }
.career-contribution h4 { font-size: 21px; line-height: 1.35; font-weight: 550; letter-spacing: -.02em; margin: 0 0 24px; }
.career-contribution > p:last-child { font-size: 17px; line-height: 1.8; margin: 0; color: var(--ink); }
.career-responsibilities { margin: 0; padding-left: 18px; font-size: 16px; line-height: 1.8; }
.career-responsibilities li { padding-left: 5px; margin-bottom: 14px; }
.career-responsibilities li:last-child { margin-bottom: 0; }
.career-responsibilities li::marker { color: var(--accent); font-size: .65em; }
.career-projects { margin-top: 28px; border-top: 1px solid var(--line); }
.career-projects summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 56px; padding-block: 14px; font-size: 14px; font-weight: 550; color: var(--accent); cursor: pointer; }
.career-projects summary::-webkit-details-marker { display: none; }
.career-projects summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.career-expand { font-size: 24px; font-weight: 300; transition: transform .25s; }
.career-projects[open] .career-expand { transform: rotate(45deg); }
.career-project-list { display: grid; gap: 26px; padding: 8px 0 4px; }
.career-project-list h5 { font-size: 16px; line-height: 1.5; font-weight: 550; margin: 0 0 5px; }
.career-project-list .career-result { color: var(--accent); font-size: 14px; font-weight: 550; margin: 0 0 8px; }
.career-project-list p { margin: 0; font-size: 16px; line-height: 1.75; color: var(--muted); }
body[data-home-mode="life"] .career-entry:nth-child(2) { --accent: #258676; }
body[data-home-mode="life"] .career-entry:nth-child(3) { --accent: #8c58be; }
body[data-home-mode="life"] .nav-links a:hover { color: #214e9b; }
body[data-home-mode="life"] .language-switch button:hover { color: #214e9b; }
body[data-home-mode="life"] .language-switch button[aria-pressed="true"]:hover { color: #fff; }
@media(max-width:1050px) {
  .career-entry { grid-template-columns: 140px minmax(0,1fr); gap: 32px; }
  .career-story { gap: 32px; }
  .career-date { font-size: 12px; gap: 12px; }
  .career-date > span:last-child { white-space: normal; line-height: 1.6; }
  .career-contribution h4 { font-size: 20px; }
}
@media(max-width:760px) {
  .career-section { padding: 76px 0 72px; }
  .career-section .section-heading { margin-bottom: 44px; }
  .career-entry { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 0 0 40px 31px; }
  .career-date { font-size: 13px; min-height: 24px; }
  .career-marker { position: absolute; left: 0; top: 7px; }
  .career-entry::before { top: 18px; bottom: -10px; }
  .career-story { grid-template-columns: minmax(0,1fr); gap: 28px; padding-bottom: 36px; }
  .career-company-copy { max-width: none; }
  .career-logo { margin-bottom: 20px; width: 218px; height: 68px; }
  .career-company h3 { font-size: 25px; }
  .career-contribution { padding-top: 0; }
  .career-contribution h4 { margin-bottom: 12px; }
  .career-contribution > p:last-child { font-size: 16px; line-height: 1.8; }
  .career-role-label { margin-bottom: 8px; }
}
@media(prefers-reduced-motion:reduce) { body, body * { transition: none !important; } }
@media print { body[data-home-mode] { --bg:#fff; --ink:#111; --muted:#444; --line:#ccc; --section-soft:#f5f5f5; --surface:#fff; --accent:#224477; --accent-ink:#fff; color-scheme:light; } }