@charset "UTF-8";
/*
 * Tool-Lifes Design Tokens & Vibe (tl-vibe.css)
 * 
 * LOCKED APP TOKENS (Do not change without lead approval)
 * -----------------------------------------------------------------------------
 * animals    | accent: #059669 | surface: #f0fdf4 | ink: #064e3b | display: sans-serif | motion: 300ms | signature: subtle-scale-in
 * brain      | accent: #0f766e | surface: #f0fdfa | ink: #134e4a | display: sans-serif | motion: 250ms | signature: fade-up
 * cases      | accent: #9a3412 | surface: #fff7ed | ink: #431407 | display: serif      | motion: 400ms | signature: reveal-from-left
 * compound   | accent: #0f766e | surface: #f0fdfa | ink: #134e4a | display: sans-serif | motion: 300ms | signature: count-up
 * food       | accent: #dc2626 | surface: #fef2f2 | ink: #7f1d1d | display: serif      | motion: 250ms | signature: slide-up
 * forms      | accent: #1d4ed8 | surface: #eff6ff | ink: #1e3a8a | display: monospace  | motion: 200ms | signature: quick-fade
 * fragrance  | accent: #c45c7a | surface: #fdf2f8 | ink: #831843 | display: serif      | motion: 500ms | signature: slow-fade-in
 * icons      | accent: #4f46e5 | surface: #eef2ff | ink: #312e81 | display: sans-serif | motion: 150ms | signature: pop-in
 * job        | accent: #0d9488 | surface: #f0fdfa | ink: #115e59 | display: sans-serif | motion: 250ms | signature: slide-right
 * major      | accent: #2563eb | surface: #eff6ff | ink: #1e3a8a | display: serif      | motion: 300ms | signature: fade-up
 * materials  | accent: #b45309 | surface: #fffbeb | ink: #78350f | display: sans-serif | motion: 350ms | signature: reveal-from-bottom
 * meat       | accent: #d8394a | surface: #fef2f2 | ink: #7f1d1d | display: serif      | motion: 250ms | signature: scale-up
 * microbes   | accent: #059669 | surface: #f0fdf4 | ink: #064e3b | display: sans-serif | motion: 300ms | signature: pulse-fade
 * money      | accent: #0f766e | surface: #f0fdfa | ink: #134e4a | display: sans-serif | motion: 250ms | signature: count-up
 * names      | accent: #4338ca | surface: #eef2ff | ink: #312e81 | display: serif      | motion: 400ms | signature: slow-reveal
 * parenting  | accent: #14b8a6 | surface: #f0fdfa | ink: #134e4a | display: sans-serif | motion: 300ms | signature: soft-bounce
 * peoples    | accent: #0f766e | surface: #f0fdfa | ink: #134e4a | display: serif      | motion: 350ms | signature: fade-in
 * rehab      | accent: #0d9488 | surface: #f0fdfa | ink: #115e59 | display: sans-serif | motion: 300ms | signature: slide-up
 * sidehustle | accent: #ea580c | surface: #fff7ed | ink: #7c2d12 | display: sans-serif | motion: 250ms | signature: slide-right
 * sports     | accent: #4f46e5 | surface: #eef2ff | ink: #312e81 | display: sans-serif | motion: 200ms | signature: quick-slide
 * study      | accent: #4f46e5 | surface: #eef2ff | ink: #312e81 | display: serif      | motion: 300ms | signature: fade-up
 * talent     | accent: #7c3aed | surface: #f5f3ff | ink: #4c1d95 | display: serif      | motion: 400ms | signature: slow-fade-in
 * travel     | accent: #0284c7 | surface: #f0f9ff | ink: #0c4a6e | display: sans-serif | motion: 350ms | signature: slide-up
 * vehicles   | accent: #2563eb | surface: #eff6ff | ink: #1e3a8a | display: sans-serif | motion: 300ms | signature: slide-right
 * viz        | accent: #0e7490 | surface: #ecfeff | ink: #164e63 | display: sans-serif | motion: 300ms | signature: fade-up
 * war        | accent: #7f1d1d | surface: #171717 | ink: #f5f5f5 | display: serif      | motion: 400ms | signature: slow-reveal
 * water      | accent: #0284c7 | surface: #f0f9ff | ink: #0c4a6e | display: sans-serif | motion: 350ms | signature: wave-fade
 * -----------------------------------------------------------------------------
 */

/* ==========================================================================
   BASE DYNAMIC LAYOUT & TYPOGRAPHY
   ========================================================================== */

/* Clear reading column — framed reading measure & balanced typography */
.tl-vibe-reading-col {
  max-width: 768px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 24px);
  width: 100%;
  box-sizing: border-box;
  font-size: clamp(1rem, 0.95rem + 0.28vw, 1.125rem);
  line-height: 1.76;
  color: var(--tl-ink, inherit);
}

/* When placed inside .tl-essay, the essay container already provides outer padding */
.tl-essay .tl-vibe-reading-col {
  padding-left: 0;
  padding-right: 0;
  width: 100%;
}

/* Typography scale and hierarchy inside reading col */
.tl-vibe-reading-col :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--tl-display, inherit);
  color: var(--tl-ink, inherit);
  overflow-wrap: break-word;
  min-width: 0;
}

.tl-vibe-reading-col h1 {
  font-size: clamp(1.85rem, 1.3rem + 2.4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.024em;
  margin: 0 0 0.75em;
  text-wrap: balance;
}

.tl-vibe-reading-col h2 {
  font-size: clamp(1.35rem, 1.15rem + 0.8vw, 1.75rem);
  font-weight: 750;
  line-height: 1.28;
  letter-spacing: -0.016em;
  margin: 2.2em 0 0.6em;
  text-wrap: balance;
}

.tl-vibe-reading-col h3 {
  font-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.35rem);
  font-weight: 700;
  line-height: 1.36;
  margin: 1.8em 0 0.45em;
}

.tl-vibe-reading-col p {
  margin: 0 0 1.25em;
  text-wrap: pretty;
}

.tl-vibe-reading-col > p:last-child {
  margin-bottom: 0;
}

.tl-vibe-reading-col blockquote:not(.tl-vibe-culture-note) {
  margin: 1.6em 0;
  padding: 4px 0 4px 1.25em;
  border-left: 3px solid var(--tl-accent, #cbd5e1);
  color: color-mix(in srgb, var(--tl-ink, #0f172a) 85%, transparent);
}

.tl-vibe-reading-col :is(ul, ol) {
  margin: 0 0 1.25em;
  padding-left: 1.4em;
}

.tl-vibe-reading-col li {
  margin: 0 0 0.4em;
  padding-left: 0.15em;
}

.tl-vibe-reading-col li::marker {
  color: var(--tl-accent, currentColor);
  font-weight: 700;
}

/* Prevent horizontal overflow on nested media / blocks */
.tl-vibe-reading-col :is(img, picture, video, canvas, svg, iframe) {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  box-sizing: border-box;
}

.tl-vibe-reading-col :is(pre, table) {
  max-width: 100%;
  overflow-x: auto;
  box-sizing: border-box;
}

.tl-vibe-reading-col :is(h1, h2, h3, h4, h5, h6, p, li, blockquote, dd, dt) {
  overflow-wrap: break-word;
  min-width: 0;
}

/* Ensure no horizontal scroll across all viewports */
html, body {
  max-width: 100vw;
  overflow-x: hidden;
}

/* 44px minimum touch targets for interactive elements */
.tl-vibe-touch-target,
.tl-vibe-reading-col button,
.tl-vibe-reading-col :is([role="button"], input[type="button"], input[type="submit"], select) {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Standalone navigation / list links inside reading col get 44px minimum touch target */
.tl-vibe-touch-target,
.tl-vibe-reading-col nav a,
.tl-vibe-reading-col ul.tl-toc a,
.tl-vibe-reading-col ol.tl-toc a {
  min-height: 44px;
  min-width: 44px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
}

/* Inline text links shouldn't break line height, but keep comfortable touch padding */
.tl-vibe-reading-col p a:not(.tl-vibe-next-link):not(.tl-vibe-touch-target),
.tl-vibe-reading-col li a:not(.tl-vibe-next-link):not(.tl-vibe-touch-target),
.tl-vibe-reading-col blockquote a:not(.tl-vibe-next-link):not(.tl-vibe-touch-target) {
  min-height: auto;
  min-width: auto;
  display: inline;
  padding: 4px 2px;
  color: var(--tl-ink, inherit);
  text-decoration: underline;
  text-decoration-color: var(--tl-accent, currentColor);
  text-underline-offset: 3px;
}

/* CJK Typography rules */
/* Korean keep-all stays */
:lang(ko) .tl-vibe-reading-col,
.tl-vibe-reading-col:lang(ko),
html[lang="ko"] .tl-vibe-reading-col,
body.lang-ko .tl-vibe-reading-col,
body.locale-ko .tl-vibe-reading-col,
body[data-lang="ko"] .tl-vibe-reading-col {
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.84;
  letter-spacing: -0.012em;
}

/* Japanese and Chinese must NOT use keep-all */
:is(:lang(ja), :lang(zh)) .tl-vibe-reading-col,
.tl-vibe-reading-col:is(:lang(ja), :lang(zh)),
html:is([lang="ja"], [lang^="zh"]) .tl-vibe-reading-col,
body:is(.lang-ja, .locale-ja, [data-lang="ja"]) .tl-vibe-reading-col,
body:is(.lang-zh, .locale-zh, [data-lang^="zh"]) .tl-vibe-reading-col {
  word-break: normal !important;
  line-break: strict;
  overflow-wrap: anywhere;
  line-height: 1.84;
  letter-spacing: 0;
}
@supports (word-break: auto-phrase) {
  :lang(ja) .tl-vibe-reading-col,
  .tl-vibe-reading-col:lang(ja),
  html[lang="ja"] .tl-vibe-reading-col,
  body:is(.lang-ja, .locale-ja, [data-lang="ja"]) .tl-vibe-reading-col {
    word-break: auto-phrase !important;
  }
}
:is(:lang(de), :lang(fr), :lang(ru), :lang(es), :lang(pt)) .tl-vibe-reading-col {
  hyphens: auto;
}

/* ==========================================================================
   DYNAMIC COMPONENTS
   ========================================================================== */

/* Fact row that reveals once without layout shift */
.tl-vibe-fact-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: clamp(24px, 3.5vw, 36px) 0;
  padding: clamp(14px, 2.5vw, 20px) clamp(16px, 3vw, 24px);
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  background: var(--tl-surface, #f8fafc);
  border: 1px solid color-mix(in srgb, var(--tl-accent, #0ea5e9) 16%, transparent);
  border-left: 3px solid var(--tl-accent, #0ea5e9);
  border-radius: 8px;
  opacity: 0;
  animation: tl-vibe-reveal var(--tl-motion-duration, 280ms) cubic-bezier(0.16, 1, 0.3, 1) forwards;
  will-change: opacity, transform;
}
.tl-vibe-fact-row > * {
  min-width: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* Dividers on mobile/tablet (<=768px: single column) */
.tl-vibe-fact-row > *:not(:last-child) {
  border-bottom: 1px solid color-mix(in srgb, var(--tl-ink, #000) 8%, transparent);
  padding-bottom: 10px;
}
/* Labels and values inside fact row */
.tl-vibe-fact-row :is(dt, .tl-vibe-fact-label, small, span:first-child:not(:only-child)) {
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.3;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--tl-ink, #0f172a) 68%, transparent);
  margin: 0 0 4px;
}
:is(:lang(ko), :lang(ja), :lang(zh)) .tl-vibe-fact-row :is(dt, .tl-vibe-fact-label, small, span:first-child:not(:only-child)) {
  letter-spacing: 0.02em;
  font-size: 0.8125rem;
}
.tl-vibe-fact-row :is(dd, .tl-vibe-fact-value, strong, b) {
  font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem);
  font-weight: 800;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--tl-ink, #0f172a);
  margin: 0;
  display: block;
  animation: tl-vibe-num-settle var(--tl-motion-duration, 300ms) cubic-bezier(0.16, 1, 0.3, 1) backwards;
  will-change: transform, opacity;
}

/* Fact numbers settle: restrained stagger */
.tl-vibe-fact-row > *:nth-child(1) :is(dd, .tl-vibe-fact-value, strong, b) { animation-delay: 40ms; }
.tl-vibe-fact-row > *:nth-child(2) :is(dd, .tl-vibe-fact-value, strong, b) { animation-delay: 80ms; }
.tl-vibe-fact-row > *:nth-child(3) :is(dd, .tl-vibe-fact-value, strong, b) { animation-delay: 120ms; }
.tl-vibe-fact-row > *:nth-child(4) :is(dd, .tl-vibe-fact-value, strong, b) { animation-delay: 160ms; }

/* 390 and 768 are strictly one column. 769px+ becomes multi-column */
@media (min-width: 769px) {
  .tl-vibe-fact-row {
    flex-direction: row;
    gap: 20px;
    align-items: stretch;
  }
  .tl-vibe-fact-row > * {
    flex: 1 1 0;
  }
  .tl-vibe-fact-row > *:not(:last-child) {
    border-bottom: none;
    border-right: 1px solid color-mix(in srgb, var(--tl-ink, #000) 8%, transparent);
    padding-bottom: 0;
    padding-right: 20px;
  }
}

/* Visually distinct culture note */
.tl-vibe-culture-note {
  background-color: var(--tl-surface, #f8fafc);
  border: 1px solid color-mix(in srgb, var(--tl-accent, #0ea5e9) 18%, transparent);
  border-left: 4px solid var(--tl-accent, #0ea5e9);
  color: var(--tl-ink, #0f172a);
  padding: clamp(16px, 2.5vw, 22px) clamp(18px, 3vw, 26px);
  margin: clamp(28px, 4vw, 40px) 0;
  border-radius: 0 10px 10px 0;
  font-style: italic;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow-wrap: break-word;
  animation: tl-vibe-culture-reveal var(--tl-motion-duration, 320ms) cubic-bezier(0.16, 1, 0.3, 1) backwards;
  will-change: opacity, transform;
}
.tl-vibe-culture-note > :first-child {
  margin-top: 0;
}
.tl-vibe-culture-note > :last-child {
  margin-bottom: 0;
}
.tl-vibe-culture-note :is(h2, h3, h4, .tl-vibe-culture-title) {
  margin: 0 0 8px;
  font-size: 1.0625rem;
  font-weight: 760;
  line-height: 1.35;
  color: var(--tl-ink, #0f172a);
  font-style: normal;
}
.tl-vibe-culture-note p {
  font-size: 0.96875rem;
  line-height: 1.68;
  margin: 0 0 10px;
  color: var(--tl-ink, #0f172a);
}
.tl-vibe-culture-note a {
  color: var(--tl-ink, inherit);
  font-weight: 650;
  text-decoration: underline;
  text-decoration-color: var(--tl-accent, currentColor);
  text-underline-offset: 3px;
}
/* CJK text: never italicize faux glyphs */
:is(:lang(ko), :lang(ja), :lang(zh)) .tl-vibe-culture-note,
.tl-vibe-culture-note:is(:lang(ko), :lang(ja), :lang(zh)),
:is(:lang(ko), :lang(ja), :lang(zh)) .tl-vibe-culture-note p,
.tl-vibe-culture-note:is(:lang(ko), :lang(ja), :lang(zh)) p {
  font-style: normal;
}
:lang(ko) .tl-vibe-culture-note,
html[lang="ko"] .tl-vibe-culture-note,
body.lang-ko .tl-vibe-culture-note {
  word-break: keep-all;
}
:is(:lang(ja), :lang(zh)) .tl-vibe-culture-note,
html:is([lang="ja"], [lang^="zh"]) .tl-vibe-culture-note,
body:is(.lang-ja, .locale-ja, [data-lang="ja"]) .tl-vibe-culture-note,
body:is(.lang-zh, .locale-zh, [data-lang^="zh"]) .tl-vibe-culture-note {
  word-break: normal !important;
  line-break: strict;
  overflow-wrap: anywhere;
}

/* When placed on a heading inside an aside.tl-essay-culture container, reset duplicate card frame */
.tl-essay-culture > h2.tl-vibe-culture-note,
.tl-essay-culture .tl-vibe-culture-note {
  background: none;
  border: none;
  padding: 0;
  margin: 0 0 10px;
  border-radius: 0;
  font-style: normal;
  font-size: 1.0625rem;
  font-weight: 760;
  line-height: 1.35;
  color: var(--tl-ink, inherit);
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Culture note container on essay pages also reveals */
.tl-essay .tl-essay-culture {
  animation: tl-vibe-culture-reveal var(--tl-motion-duration, 320ms) cubic-bezier(0.16, 1, 0.3, 1) backwards;
  will-change: opacity, transform;
}

/* Next-link: min 44px tap target, moves slightly on hover/focus */
.tl-vibe-next-link,
.tl-vibe-reading-col .tl-vibe-next-link,
.tl-vibe-reading-col p a.tl-vibe-next-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  min-height: 48px;
  min-width: 44px;
  box-sizing: border-box;
  background-color: var(--tl-accent, #0ea5e9);
  color: #ffffff;
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.35;
  transition: transform var(--tl-motion-duration, 250ms) cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow var(--tl-motion-duration, 250ms) ease,
              background-color var(--tl-motion-duration, 250ms) ease;
  max-width: 100%;
  overflow-wrap: break-word;
}
.tl-vibe-next-link:hover,
.tl-vibe-next-link:focus,
.tl-vibe-reading-col .tl-vibe-next-link:hover,
.tl-vibe-reading-col .tl-vibe-next-link:focus {
  transform: translateX(4px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--tl-accent, #0ea5e9) 32%, transparent);
}
.tl-vibe-next-link:focus-visible,
.tl-vibe-reading-col .tl-vibe-next-link:focus-visible {
  outline: 3px solid var(--tl-accent, #0ea5e9);
  outline-offset: 3px;
  transform: translateX(4px);
}
@media (max-width: 480px) {
  .tl-vibe-next-link,
  .tl-vibe-reading-col .tl-vibe-next-link,
  .tl-vibe-reading-col p a.tl-vibe-next-link {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}

/* ==========================================================================
   ANIMATIONS (Restrained, no layout shift)
   ========================================================================== */

@keyframes tl-vibe-num-settle {
  from {
    opacity: 0.25;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tl-vibe-culture-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tl-vibe-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tl-vibe-fade-up {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes tl-vibe-slide-right {
  from {
    opacity: 0;
    transform: translateX(-6px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes tl-vibe-scale-in {
  from {
    opacity: 0;
    transform: scale(0.985);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes tl-vibe-pop-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Signature animation bindings */
:is(body.animals, body.animals-app, body.tl-essay-page.animals, body.tl-essay-page.animals-app,
    body.meat, body.meat-app, body.tl-essay-page.meat, body.tl-essay-page.meat-app) .tl-vibe-fact-row {
  animation-name: tl-vibe-scale-in;
}

:is(body.brain, body.brain-app, body.tl-essay-page.brain, body.tl-essay-page.brain-app,
    body.major, body.mjr-app, body.major-app, body.tl-essay-page.major, body.tl-essay-page.mjr-app, body.tl-essay-page.major-app,
    body.study, body.study-app, body.tl-essay-page.study, body.tl-essay-page.study-app,
    body.viz, body.viz-app, body.tl-essay-page.viz, body.tl-essay-page.viz-app) .tl-vibe-fact-row {
  animation-name: tl-vibe-fade-up;
}

:is(body.icons, body.icons-app, body.tl-essay-page.icons, body.tl-essay-page.icons-app) .tl-vibe-fact-row {
  animation-name: tl-vibe-pop-in;
}

:is(body.job, body.job-app, body.tl-essay-page.job, body.tl-essay-page.job-app,
    body.sidehustle, body.sidehustle-app, body.tl-essay-page.sidehustle, body.tl-essay-page.sidehustle-app,
    body.sports, body.sports-app, body.tl-essay-page.sports, body.tl-essay-page.sports-app,
    body.vehicles, body.vehicles-app, body.tl-essay-page.vehicles, body.tl-essay-page.vehicles-app) .tl-vibe-fact-row {
  animation-name: tl-vibe-slide-right;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .tl-vibe-fact-row,
  .tl-vibe-culture-note,
  .tl-essay .tl-essay-culture,
  .tl-vibe-fact-row :is(dd, .tl-vibe-fact-value, strong, b),
  .tl-essay .tl-essay-facts dd {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tl-vibe-next-link,
  .tl-vibe-reading-col .tl-vibe-next-link,
  .tl-vibe-reading-col p a.tl-vibe-next-link {
    transition: none !important;
  }
  .tl-vibe-next-link:hover,
  .tl-vibe-next-link:focus,
  .tl-vibe-reading-col .tl-vibe-next-link:hover,
  .tl-vibe-reading-col .tl-vibe-next-link:focus {
    transform: none !important;
  }
}

@media print {
  .tl-vibe-fact-row,
  .tl-vibe-culture-note,
  .tl-essay .tl-essay-culture,
  .tl-vibe-fact-row :is(dd, .tl-vibe-fact-value, strong, b),
  .tl-essay .tl-essay-facts dd {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ==========================================================================
   APP-SPECIFIC TOKENS & OVERRIDES
   Locked per-app mappings to CSS variables (--tl-accent, --tl-surface, --tl-ink)
   ========================================================================== */

body.animals,
body.animals-app,
body.tl-essay-page.animals,
body.tl-essay-page.animals-app {
  --tl-accent: #059669;
  --tl-surface: #f0fdf4;
  --tl-ink: #064e3b;
  --tl-display: sans-serif;
  --tl-motion-duration: 300ms;
  --tl-signature: subtle-scale-in;
}

body.brain,
body.brain-app,
body.tl-essay-page.brain,
body.tl-essay-page.brain-app {
  --tl-accent: #0f766e;
  --tl-surface: #f0fdfa;
  --tl-ink: #134e4a;
  --tl-display: sans-serif;
  --tl-motion-duration: 250ms;
  --tl-signature: fade-up;
}

body.cases,
body.cases-app,
body.tl-essay-page.cases,
body.tl-essay-page.cases-app {
  --tl-accent: #9a3412;
  --tl-surface: #fff7ed;
  --tl-ink: #431407;
  --tl-display: serif;
  --tl-motion-duration: 400ms;
  --tl-signature: reveal-from-left;
}

body.compound,
body.compound-app,
body.tl-essay-page.compound,
body.tl-essay-page.compound-app {
  --tl-accent: #0f766e;
  --tl-surface: #f0fdfa;
  --tl-ink: #134e4a;
  --tl-display: sans-serif;
  --tl-motion-duration: 300ms;
  --tl-signature: count-up;
}

body.food,
body.food-app,
body.tl-essay-page.food,
body.tl-essay-page.food-app {
  --tl-accent: #dc2626;
  --tl-surface: #fef2f2;
  --tl-ink: #7f1d1d;
  --tl-display: serif;
  --tl-motion-duration: 250ms;
  --tl-signature: slide-up;
}

body.forms,
body.forms-app,
body.tl-essay-page.forms,
body.tl-essay-page.forms-app {
  --tl-accent: #1d4ed8;
  --tl-surface: #eff6ff;
  --tl-ink: #1e3a8a;
  --tl-display: monospace;
  --tl-motion-duration: 200ms;
  --tl-signature: quick-fade;
}

body.fragrance,
body.fragrance-app,
body.tl-essay-page.fragrance,
body.tl-essay-page.fragrance-app {
  --tl-accent: #c45c7a;
  --tl-surface: #fdf2f8;
  --tl-ink: #831843;
  --tl-display: serif;
  --tl-motion-duration: 500ms;
  --tl-signature: slow-fade-in;
}

body.icons,
body.icons-app,
body.tl-essay-page.icons,
body.tl-essay-page.icons-app {
  --tl-accent: #4f46e5;
  --tl-surface: #eef2ff;
  --tl-ink: #312e81;
  --tl-display: sans-serif;
  --tl-motion-duration: 150ms;
  --tl-signature: pop-in;
}

body.job:not(.brain):not(.compound):not(.parenting):not(.rehab):not(.sidehustle):not(.water):not(.talent):not(.travel):not(.names):not(.study):not(.viz):not(.microbes):not(.mjr-app):not(.major),
body.job-app,
body.tl-essay-page.job,
body.tl-essay-page.job-app {
  --tl-accent: #0d9488;
  --tl-surface: #f0fdfa;
  --tl-ink: #115e59;
  --tl-display: sans-serif;
  --tl-motion-duration: 250ms;
  --tl-signature: slide-right;
}

/* Major uses mjr-app instead of major */
body.mjr-app,
body.major,
body.major-app,
body.tl-essay-page.mjr-app,
body.tl-essay-page.major,
body.tl-essay-page.major-app {
  --tl-accent: #2563eb;
  --tl-surface: #eff6ff;
  --tl-ink: #1e3a8a;
  --tl-display: serif;
  --tl-motion-duration: 300ms;
  --tl-signature: fade-up;
}

body.materials,
body.materials-app,
body.tl-essay-page.materials,
body.tl-essay-page.materials-app {
  --tl-accent: #b45309;
  --tl-surface: #fffbeb;
  --tl-ink: #78350f;
  --tl-display: sans-serif;
  --tl-motion-duration: 350ms;
  --tl-signature: reveal-from-bottom;
}

body.meat,
body.meat-app,
body.tl-essay-page.meat,
body.tl-essay-page.meat-app {
  --tl-accent: #d8394a;
  --tl-surface: #fef2f2;
  --tl-ink: #7f1d1d;
  --tl-display: serif;
  --tl-motion-duration: 250ms;
  --tl-signature: scale-up;
}

body.microbes,
body.microbes-app,
body.tl-essay-page.microbes,
body.tl-essay-page.microbes-app {
  --tl-accent: #059669;
  --tl-surface: #f0fdf4;
  --tl-ink: #064e3b;
  --tl-display: sans-serif;
  --tl-motion-duration: 300ms;
  --tl-signature: pulse-fade;
}

body.money,
body.money-app,
body.tl-essay-page.money,
body.tl-essay-page.money-app {
  --tl-accent: #0f766e;
  --tl-surface: #f0fdfa;
  --tl-ink: #134e4a;
  --tl-display: sans-serif;
  --tl-motion-duration: 250ms;
  --tl-signature: count-up;
}

body.names,
body.names-app,
body.tl-essay-page.names,
body.tl-essay-page.names-app {
  --tl-accent: #4338ca;
  --tl-surface: #eef2ff;
  --tl-ink: #312e81;
  --tl-display: serif;
  --tl-motion-duration: 400ms;
  --tl-signature: slow-reveal;
}

body.parenting,
body.parenting-page,
body.tl-essay-page.parenting,
body.tl-essay-page.parenting-page {
  --tl-accent: #14b8a6;
  --tl-surface: #f0fdfa;
  --tl-ink: #134e4a;
  --tl-display: sans-serif;
  --tl-motion-duration: 300ms;
  --tl-signature: soft-bounce;
}

body.peoples,
body.peoples-page,
body.tl-essay-page.peoples,
body.tl-essay-page.peoples-page {
  --tl-accent: #0f766e;
  --tl-surface: #f0fdfa;
  --tl-ink: #134e4a;
  --tl-display: serif;
  --tl-motion-duration: 350ms;
  --tl-signature: fade-in;
}

body.rehab,
body.rehab-app,
body.tl-essay-page.rehab,
body.tl-essay-page.rehab-app {
  --tl-accent: #0d9488;
  --tl-surface: #f0fdfa;
  --tl-ink: #115e59;
  --tl-display: sans-serif;
  --tl-motion-duration: 300ms;
  --tl-signature: slide-up;
}

body.sidehustle,
body.sidehustle-app,
body.tl-essay-page.sidehustle,
body.tl-essay-page.sidehustle-app {
  --tl-accent: #ea580c;
  --tl-surface: #fff7ed;
  --tl-ink: #7c2d12;
  --tl-display: sans-serif;
  --tl-motion-duration: 250ms;
  --tl-signature: slide-right;
}

body.sports,
body.sports-app,
body.tl-essay-page.sports,
body.tl-essay-page.sports-app {
  --tl-accent: #4f46e5;
  --tl-surface: #eef2ff;
  --tl-ink: #312e81;
  --tl-display: sans-serif;
  --tl-motion-duration: 200ms;
  --tl-signature: quick-slide;
}

body.study,
body.study-app,
body.tl-essay-page.study,
body.tl-essay-page.study-app {
  --tl-accent: #4f46e5;
  --tl-surface: #eef2ff;
  --tl-ink: #312e81;
  --tl-display: serif;
  --tl-motion-duration: 300ms;
  --tl-signature: fade-up;
}

body.talent,
body.talent-app,
body.tl-essay-page.talent,
body.tl-essay-page.talent-app {
  --tl-accent: #7c3aed;
  --tl-surface: #f5f3ff;
  --tl-ink: #4c1d95;
  --tl-display: serif;
  --tl-motion-duration: 400ms;
  --tl-signature: slow-fade-in;
}

body.travel,
body.travel-app,
body.tl-essay-page.travel,
body.tl-essay-page.travel-app {
  --tl-accent: #0284c7;
  --tl-surface: #f0f9ff;
  --tl-ink: #0c4a6e;
  --tl-display: sans-serif;
  --tl-motion-duration: 350ms;
  --tl-signature: slide-up;
}

body.vehicles,
body.vehicles-app,
body.tl-essay-page.vehicles,
body.tl-essay-page.vehicles-app {
  --tl-accent: #2563eb;
  --tl-surface: #eff6ff;
  --tl-ink: #1e3a8a;
  --tl-display: sans-serif;
  --tl-motion-duration: 300ms;
  --tl-signature: slide-right;
}

body.viz,
body.viz-app,
body.tl-essay-page.viz,
body.tl-essay-page.viz-app {
  --tl-accent: #0e7490;
  --tl-surface: #ecfeff;
  --tl-ink: #164e63;
  --tl-display: sans-serif;
  --tl-motion-duration: 300ms;
  --tl-signature: fade-up;
}

/* War stays dark */
body.war,
body.war-app,
body.tl-essay-page.war,
body.tl-essay-page.war-app {
  --tl-accent: #7f1d1d;
  --tl-surface: #171717;
  --tl-ink: #f5f5f5;
  --tl-display: serif;
  --tl-motion-duration: 400ms;
  --tl-signature: slow-reveal;
  background-color: #171717;
  color: #f5f5f5;
}
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-fact-row {
  background-color: #202020;
  border-color: #383838;
  border-left-color: #7f1d1d;
}
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-fact-row > *:not(:last-child) {
  border-color: #333333;
}
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-culture-note {
  background-color: #262626;
  border-color: #383838;
  border-left-color: #7f1d1d;
  color: #e5e5e5;
}
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-essay .tl-essay-culture > .tl-vibe-culture-note {
  background: transparent;
  border: none;
  color: inherit;
}
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-next-link,
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-reading-col .tl-vibe-next-link {
  background-color: #7f1d1d;
  color: #f5f5f5;
  border-color: #991b1b;
}
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-next-link:hover,
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-next-link:focus,
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-reading-col .tl-vibe-next-link:hover,
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-reading-col .tl-vibe-next-link:focus {
  background-color: #26334d;
  color: #ffffff;
  transform: translateX(4px);
}
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-next-link:focus-visible,
:is(body.war, body.war-app, body.tl-essay-page.war, body.tl-essay-page.war-app) .tl-vibe-reading-col .tl-vibe-next-link:focus-visible {
  outline-color: #f87171;
}

/* High-contrast ink on light teal accent for parenting */
:is(body.parenting, body.parenting-page, body.tl-essay-page.parenting, body.tl-essay-page.parenting-page) .tl-vibe-next-link,
:is(body.parenting, body.parenting-page, body.tl-essay-page.parenting, body.tl-essay-page.parenting-page) .tl-vibe-reading-col .tl-vibe-next-link {
  color: #042f2e;
}

body.water,
body.water-app,
body.tl-essay-page.water,
body.tl-essay-page.water-app {
  --tl-accent: #0284c7;
  --tl-surface: #f0f9ff;
  --tl-ink: #0c4a6e;
  --tl-display: sans-serif;
  --tl-motion-duration: 350ms;
  --tl-signature: wave-fade;
}
