/* Type and color tokens inherited from finta-landing (ABC Oracle, finta grays).
   Numeric outputs stay on Inter: number-flow's rolling digits need tabular figures. */

@font-face { font-family: 'ABC Oracle'; src: url('./fonts/ABCOracle-Book.woff2') format('woff2'); font-weight: 350; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Oracle'; src: url('./fonts/ABCOracle-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Oracle'; src: url('./fonts/ABCOracle-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'ABC Oracle'; src: url('./fonts/ABCOracle-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('./fonts/InterVariable.woff2') format('woff2');
}

:root {
  color-scheme: light;
  --font-family-display: 'ABC Oracle', ui-sans-serif, system-ui, sans-serif;
  --font-family-body: 'ABC Oracle', ui-sans-serif, system-ui, sans-serif;
  --font-family-numeric: InterVariable, Inter, sans-serif;
  --text-primary: #202020;   /* finta-950 */
  --text-secondary: #595959; /* finta-900 */
  --text-tertiary: #828283;  /* finta-800 */
  --text-disabled: #85888e;
  --brand-blue: #2679f3;
  --bg-primary: #fff;
  --bg-primary-hover: #f5f5f6;
  --border-secondary: #efeff2;
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --max-w-5xl: 64rem;
  --shadow-secondary-button: 0 0 0 1px rgba(15, 12, 12, 0.06), 0 3px 1px -2px rgba(15, 12, 12, 0.06), 0 1px 3px 1px rgba(15, 12, 12, 0.05);
  --shadow-secondary-button-focus: 0 0 0 1px rgba(15, 12, 12, 0.05), 0 3px 1px -2px rgba(15, 12, 12, 0.08), 0 1px 3px 1px rgba(15, 12, 12, 0.05), 0 0 0 2.5px #fff, 0 0 0 4.5px rgba(38, 121, 243, 0.5);
  font-family: var(--font-family-body);
  font-size: 16px;
  letter-spacing: -0.015em;
  -webkit-font-smoothing: antialiased;
  color: var(--text-primary);
  background: var(--bg-primary);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body, h1, h2, dl, dd { margin: 0; }
button { font: inherit; }
::selection { background: #deeaff; }
.u-display-3xl { font-family: var(--font-family-display); font-size: 48px; font-weight: 500; line-height: 52px; letter-spacing: -0.025em; }
.u-display-xl { font-family: var(--font-family-display); font-size: 20px; font-weight: 500; line-height: 1.75rem; letter-spacing: -0.01em; }
.u-mono-body-md { font-family: var(--font-family-numeric); font-size: 14px; line-height: 1.375rem; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.u-mono-body-xs { font-family: var(--font-family-numeric); font-size: 12px; line-height: 1.25rem; letter-spacing: 0; font-variant-numeric: lining-nums tabular-nums; }
.text-tertiary { color: var(--text-tertiary); }
/* Site chrome inherited from finta.com: fixed header with blur-on-scroll,
   landing container metrics, hero side lines, landing footer. */
.site-header-inner, main, .site-footer-inner { max-width: 1136px; margin-inline: auto; padding-inline: var(--space-4); }
@media (min-width: 640px) { .site-header-inner, main, .site-footer-inner { padding-inline: var(--space-6); } }
@media (min-width: 768px) { .site-header-inner, main, .site-footer-inner { padding-inline: var(--space-8); } }
@media (min-width: 1024px) { .site-header-inner, main, .site-footer-inner { padding-inline: var(--space-16); } }

.site-header { position: fixed; top: 0; right: 0; left: 0; z-index: 10; }
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.75);
  -webkit-backdrop-filter: blur(15px);
  backdrop-filter: blur(15px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 3px 8px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transition: opacity 0.4s cubic-bezier(0.33, 1, 0.68, 1);
  pointer-events: none;
}
.site-header.is-scrolled::before { opacity: 1; }
.site-header-inner { position: relative; display: flex; align-items: center; justify-content: space-between; padding-block: 14px; }
.site-logo { display: inline-flex; }
.site-logo img { display: block; height: 24px; width: auto; }
.site-logo:focus-visible { outline: 2px solid rgba(38, 121, 243, 0.6); outline-offset: 4px; border-radius: 4px; }

main { padding-top: 52px; margin-bottom: 0; }
.page-heading { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-3); margin: var(--space-16) 0 var(--space-12); }
.tagline { margin: 0; font-size: 16px; line-height: 24px; font-weight: 350; color: var(--text-secondary); white-space: nowrap; }
#connect, #syncing, #evaluating { margin-top: var(--space-3); }
.connect-disclaimer { margin: calc(var(--space-1) * -1) 0 0; font-size: 12px; line-height: 20px; letter-spacing: 0; font-weight: 350; color: var(--text-tertiary); }
#connect[hidden] + .connect-disclaimer { display: none; }
section {
  min-width: 0;
  background: #fff;
  border: 1px solid #ececed; /* unit border-primary */
  border-radius: 12px;
  padding: var(--space-6);
  box-shadow: 0 1px 2px rgba(15, 12, 12, 0.03);
}
.section-heading { min-height: var(--space-8); display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); }
/* Live one-line recap under the cards: the updating numbers run brand blue
   while the review works, then the line settles to grey on done so it never
   competes with the blue AI phrase in the conclusion. */
.review-summary { margin: var(--space-3) 0 0; font-size: 14px; line-height: 1.375rem; letter-spacing: 0; color: var(--text-secondary); transition: color 0.3s ease; }
.review-summary .number { width: auto; justify-content: start; text-align: left; vertical-align: baseline; }
.review-summary output { transition: color 0.3s ease; }
.review-summary:not(.done) output { color: var(--brand-blue); }
.review-summary .metrics { margin-top: var(--space-2); max-width: 28rem; }
.elements-button:disabled { color: var(--text-disabled); cursor: not-allowed; }
.metric { display: grid; grid-template-columns: minmax(0, 1fr) 12ch; align-items: center; gap: var(--space-4); min-height: 2.75rem; }
/* Detail rows sit indented and tighter under the card heading. */
.metrics .metric { padding-left: var(--space-3); min-height: 2.25rem; }
.number[data-value="0"], .number:not([data-value]) { color: #94969c; }
.number { transition: color 0.3s ease; }
dt { font-size: 14px; line-height: 1.375rem; letter-spacing: 0; color: var(--text-secondary); }
dd { min-width: 0; text-align: right; }
.mistakes-toggle { display: inline-flex; align-items: center; gap: var(--space-1); padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.mistakes-toggle:disabled { cursor: default; }
.mistakes-toggle:disabled .mistakes-chevron { display: none; }
.mistakes-toggle:focus-visible { outline: 2px solid #2679f3; outline-offset: var(--space-1); }
.mistakes-chevron { width: 1rem; height: 1rem; flex: none; }
.mistakes-toggle[aria-expanded="true"] .mistakes-chevron { transform: rotate(90deg); }
.mistakes-panel { margin-top: calc(var(--space-1) * -1); margin-bottom: var(--space-2); padding-left: var(--space-3); color: var(--text-secondary); overflow-wrap: anywhere; }
.mistakes-panel p { margin: 0 0 var(--space-2); font-size: 14px; line-height: 1.375rem; letter-spacing: 0; }
.mistakes-panel p:last-child { margin-bottom: 0; }
.mistake { margin-top: var(--space-3); }
.mistake:first-child { margin-top: var(--space-1); }
.mistakes-panel .mistake-label { margin: 0 0 2px; font-size: 12px; line-height: 20px; font-weight: 500; color: #e5484d; }
.mistakes-panel .mistake-line { margin: 0; font-size: 14px; line-height: 1.375rem; color: var(--text-secondary); overflow-wrap: anywhere; }
/* Choices are neutral grey pills; the red Mistake label carries the alarm */
.choice-pill {
  display: inline;
  padding: 1px 7px;
  border-radius: 4px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 500;
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--text-secondary);
  background: #f0f1f1; /* finta gray-100 */
}
.mistake-subject { position: relative; font-weight: 500; color: var(--text-primary); }
.mistake-subject.has-tooltip {
  text-decoration: underline;
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: default;
}
.mistake-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  z-index: 20;
  display: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 12px;
  width: max-content;
  max-width: 320px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #333741;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  text-align: left;
  box-shadow: 0 8px 24px rgba(15, 12, 12, 0.24), 0 2px 6px rgba(15, 12, 12, 0.16);
}
.mistake-subject.has-tooltip:hover .mistake-tooltip,
.mistake-subject.has-tooltip:focus-visible .mistake-tooltip { display: grid; }
.tip-label { color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
.tip-value { overflow-wrap: anywhere; }
.mistakes-retry { padding: 0; border: 0; color: var(--text-primary); background: transparent; font-weight: 500; text-decoration: underline; cursor: pointer; }
.mistakes-retry:focus-visible { outline: 2px solid #2679f3; outline-offset: var(--space-1); }
.number { display: inline-flex; justify-content: end; align-items: start; position: relative; height: 1.375rem; width: 100%; min-width: 0; text-align: right; vertical-align: middle; overflow: hidden; white-space: nowrap; }
number-flow { --number-flow-mask-height: 0; --number-flow-mask-width: 0; line-height: 1.375rem; }

/* Syncing countdown under the headline while the backend prepares data */
.syncing { margin: 0; max-width: 40rem; font-size: 14px; line-height: 1.375rem; letter-spacing: 0; color: var(--text-secondary); overflow-wrap: anywhere; }
.syncing output { color: var(--text-primary); }
/* The syncing line runs brand blue with a white sheen sweeping across,
   signalling live work. Falls back to plain blue without text clipping. */
#syncing, #syncing output { color: var(--brand-blue); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  #syncing {
    background: linear-gradient(100deg, var(--brand-blue) 42%, #fff 50%, var(--brand-blue) 58%) 0 0 / 250% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sync-shimmer 2.2s linear infinite;
  }
  @keyframes sync-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
  @media (prefers-reduced-motion: reduce) { #syncing { animation: none; } }
}
/* Fixed slot so the racing question and verdict never shift the layout */
#evaluating { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); width: min(40rem, 100%); }
#evaluating[hidden] { display: none; }
#evaluating-label { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 5px; text-align: left; }
.evaluating-prefix { flex: none; color: var(--text-primary); font-weight: 500; }
#evaluating-question { flex: 1; min-width: 0; }
#evaluating-question .roll-item { overflow: hidden; text-overflow: ellipsis; }
#evaluating .verdict { flex: none; text-align: right; min-width: 8ch; }
.verdict { font-weight: 500; }
.verdict .roll-item.needs_context { color: #ffb224; }
.verdict .roll-item.likely_wrong { color: #e5484d; }

/* Rolodex roll for the racing evaluation line */
.roll { position: relative; display: inline-block; overflow: hidden; vertical-align: bottom; }
.roll .roll-item { display: block; white-space: nowrap; }
.roll .roll-item.roll-in { animation: roll-in 0.14s cubic-bezier(0.33, 1, 0.68, 1); }
.roll .roll-item.roll-out { position: absolute; inset: 0; animation: roll-out 0.14s cubic-bezier(0.32, 0, 0.67, 0) forwards; }
@keyframes roll-in { from { transform: translateY(80%); opacity: 0; } }
@keyframes roll-out { to { transform: translateY(-80%); opacity: 0; } }

/* Quiet utility actions, bottom right under the cards */
.page-utility { display: flex; align-items: flex-start; justify-content: flex-end; gap: var(--space-4); margin-top: var(--space-12); min-height: 20px; }
.utility-note { font-size: 12px; line-height: 20px; letter-spacing: 0; font-weight: 350; color: var(--text-tertiary); }
.disconnect-stack { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); text-align: right; }
/* Disconnect and Rerun: finta's .elements-button-secondary-sm. Raised look
   comes from the ring + drop shadow (no border), so it reads 3d next to the
   flat cards. */
#disconnect, #rerun {
  height: 1.5rem;
  padding: 0.125rem var(--space-2);
  border: 0;
  border-radius: 0.25rem;
  font-size: 12px;
  line-height: 1.25rem;
  letter-spacing: 0;
  font-weight: 500;
  color: var(--text-primary);
  background-image: linear-gradient(180deg, #fff 0%, #fafafa 83.65%);
  box-shadow: 0 0 0 1px rgba(15, 12, 12, 0.06), 0 3px 1px -2px rgba(15, 12, 12, 0.06), 0 1px 3px 1px rgba(15, 12, 12, 0.05);
}
#disconnect:hover:not(:disabled), #rerun:hover:not(:disabled) { background-color: var(--bg-primary-hover); background-image: none; }
#disconnect:focus-visible, #rerun:focus-visible { box-shadow: 0 0 0 1px rgba(38, 121, 243, 0.35), 0 0 0 3px rgba(255, 255, 255, 0.8), 0 1px 3px 1px rgba(15, 12, 12, 0.12); }
#disconnect:disabled, #rerun:disabled {
  color: rgba(22, 27, 38, 0.45);
  cursor: wait;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 0%, rgba(250, 250, 250, 0.7) 83.65%);
  box-shadow: 0 0 0 1px rgba(15, 12, 12, 0.04), 0 1px 2px 0 rgba(15, 12, 12, 0.04);
}
.utility-link {
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 12px;
  line-height: 20px;
  letter-spacing: 0;
  color: var(--text-tertiary);
  cursor: pointer;
}
.utility-link:hover:not(:disabled) { color: var(--text-secondary); text-decoration: underline; }
.utility-link:disabled { color: var(--text-disabled); cursor: default; }
.utility-link:focus-visible { outline: 2px solid rgba(38, 121, 243, 0.6); outline-offset: 2px; border-radius: 4px; }

/* Concluding statement shown below the cards when the review completes.
   Lines stagger in bottom-up (display toggles restart the animation). */
@keyframes conclusion-in { from { opacity: 0; transform: translateY(10px); } }
.conclusion { margin: var(--space-12) 0 0; }
.conclusion p, .conclusion li { animation: conclusion-in 0.55s cubic-bezier(0.23, 1, 0.32, 1) both; }
.conclusion li { animation-duration: 0.9s; }
.conclusion li:nth-child(1) { animation-delay: 0.35s; }
.conclusion li:nth-child(2) { animation-delay: 0.65s; }
.conclusion li:nth-child(3) { animation-delay: 0.95s; }
.conclusion li:nth-child(4) { animation-delay: 1.25s; }
.conclusion p.conclusion-kicker { margin: var(--space-3) 0 0; font-size: 18px; line-height: 1.75rem; letter-spacing: -0.005em; color: var(--text-secondary); animation-delay: 1.55s; }
@media (prefers-reduced-motion: reduce) { .conclusion p, .conclusion li { animation: none; } }
.conclusion p.conclusion-verdict { margin: 0 0 var(--space-4); font-family: var(--font-family-display); font-size: 32px; font-weight: 500; line-height: 38px; letter-spacing: -0.02em; color: var(--text-primary); }
.conclusion p.conclusion-intro { margin: 0 0 var(--space-2); font-size: 18px; line-height: 1.75rem; letter-spacing: -0.005em; color: var(--text-secondary); animation-delay: 0.15s; }
.conclusion ul { margin: 0; padding-left: 1.5rem; list-style: disc; }
.conclusion li { margin: 0 0 var(--space-2); font-size: 18px; line-height: 1.75rem; letter-spacing: -0.005em; color: var(--text-secondary); }
.conclusion li:last-child { margin-bottom: 0; }
.conclusion-mark { font-weight: 400; }
.conclusion-mark.strong { color: var(--text-primary); }
.conclusion-mark.ai { color: var(--brand-blue); }
.conclusion-mark.likely_wrong { color: #e5484d; }
.elements-button { display: inline-flex; position: relative; align-items: center; justify-content: center; flex-shrink: 0; border: 0; cursor: pointer; outline: none; transition: background-color 150ms ease; }
.elements-button__content { display: inline-flex; align-items: center; justify-content: center; }
.elements-button__label { padding: 0 var(--space-1); }
.elements-button:focus-visible { box-shadow: var(--shadow-secondary-button-focus); }
.elements-button::after { content: ''; position: absolute; inset: -0.625rem 0; }

/* Connect CTA: the finta.com ButtonLink (small, flat brand blue) */
#connect {
  height: auto;
  padding: var(--space-2) 14px;
  border-radius: 8px;
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0;
  font-weight: 500;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.16);
  background: #2679f3;
  box-shadow: 0 1px 4px -1px rgba(30, 31, 37, 0.38);
  transition: background-color 0.15s ease-in-out;
}
#connect:hover:not(:disabled) { background: #2262c7; }
#connect:active:not(:disabled) { background: #215bb9; }
#connect:disabled { color: #fff; opacity: 0.85; cursor: wait; }
#connect:focus-visible {
  box-shadow:
    0 1px 4px -1px rgba(30, 31, 37, 0.38),
    0 0 0 2.5px #fff,
    0 0 0 4.5px rgba(38, 121, 243, 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .elements-button:hover:not(:disabled) { background: var(--bg-primary-hover); }
}

/* Footer inherited from finta.com */
.site-footer { padding: var(--space-16) 0 5rem; }
.footer-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); }
.footer-social { display: flex; align-items: center; gap: var(--space-4); }
.footer-social a { display: inline-flex; color: #828283; transition: opacity 0.15s ease-in-out; }
.footer-social a:hover { opacity: 0.8; }
.footer-social a:focus-visible { outline: 2px solid rgba(38, 121, 243, 0.6); outline-offset: 2px; border-radius: 4px; }
.footer-social svg { width: 16px; height: 16px; }
.site-footer hr { border: 0; border-top: 1px solid var(--border-secondary); margin: var(--space-6) 0 var(--space-4); }
.footer-bottom p { margin: 0; font-size: 12px; line-height: 20px; letter-spacing: 0; font-weight: 350; color: var(--text-secondary); }
.footer-legal { display: flex; align-items: center; gap: var(--space-6); }
.footer-legal a { font-size: 12px; line-height: 20px; letter-spacing: 0; color: var(--text-primary); text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }
.footer-legal a:focus-visible { outline: 2px solid rgba(38, 121, 243, 0.6); outline-offset: 2px; border-radius: 4px; }

@media (max-width: 767px) {
  .site-header-inner { padding-block: 10px; }
  .page-heading { margin: var(--space-8) 0; }
  .tagline { white-space: normal; }
  .u-display-3xl { font-size: 32px; line-height: 38px; }
  section { padding: var(--space-4); }
  .conclusion { margin-top: var(--space-8); }
  .conclusion p.conclusion-verdict { font-size: 26px; line-height: 32px; }
  .conclusion p.conclusion-intro, .conclusion p.conclusion-kicker, .conclusion li { font-size: 16px; line-height: 1.5rem; }
  .site-footer { padding: var(--space-12) 0 var(--space-16); }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
}

/* Rows fade in as they're revealed (display toggles restart the animation) */
@keyframes fade-up { from { opacity: 0; transform: translateY(4px); } }
.metric { animation: fade-up 0.35s cubic-bezier(0.33, 1, 0.68, 1) both; }

/* Timeline experiment: live per-month bars of reviewed decisions. The frame
   (plot height, axis rows) is fixed so the chart exists, empty, at all times
   and only the bars and labels ever change. Delete with the timeline section
   in index.html and timeline.js. */
.timeline-section { margin-bottom: var(--space-6); }
.tl-scroll { overflow-x: auto; }
.tl-inner { min-width: calc(var(--tl-months, 0) * 20px); }
.tl-plot { position: relative; height: 190px; border-bottom: 1px solid #e3e3e5; }
.tl-grid i { position: absolute; left: 0; right: 0; height: 1px; background: var(--border-secondary); }
.tl-grid i:nth-child(1) { bottom: 25%; }
.tl-grid i:nth-child(2) { bottom: 50%; }
.tl-grid i:nth-child(3) { bottom: 75%; }
.tl-cols { position: relative; display: flex; height: 100%; }
.tl-col { flex: 1 1 0; min-width: 0; position: relative; }
.tl-col.tl-year-start { box-shadow: -1px 0 0 var(--border-secondary); }
.tl-bar {
  position: absolute;
  left: 1px;
  right: 1px;
  bottom: 0;
  height: 0;
  background: #e7e7e9;
  border-radius: 3px 3px 0 0;
  transition: height 0.16s linear, background-color 0.3s ease;
}
.tl-value {
  position: absolute;
  left: 50%;
  bottom: 3px;
  transform: translateX(-50%);
  z-index: 1;
  font-family: var(--font-family-numeric);
  font-size: 10px;
  line-height: 12px;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--text-secondary);
  white-space: nowrap;
  pointer-events: none;
  transition: bottom 0.16s linear, color 0.3s ease;
}
/* The actively counting month flashes brand blue, like the card numbers */
.tl-col.rolling { z-index: 2; }
.tl-col.rolling .tl-bar { background: var(--brand-blue); }
.tl-col.rolling .tl-value { color: var(--brand-blue); }
.tl-months { display: flex; min-height: 12px; margin-top: var(--space-1); }
.tl-month { flex: 1 1 0; min-width: 0; text-align: center; font-size: 9px; line-height: 12px; color: #a9a9ac; overflow: hidden; }
.tl-years { display: flex; min-height: 18px; margin-top: 2px; }
.tl-year { flex: 1 1 0; min-width: 0; position: relative; text-align: center; font-family: var(--font-family-numeric); font-size: 11px; line-height: 18px; font-variant-numeric: lining-nums tabular-nums; color: var(--text-tertiary); }
/* Tiny index tick between years, aligned with the in-plot year hairline */
.tl-year:not(:first-child)::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 9px; background: #d9d9dc; }
.tl-tip {
  position: absolute;
  transform: translateX(-50%);
  z-index: 20;
  padding: 5px 9px;
  border-radius: 6px;
  background: #333741;
  color: #fff;
  font-size: 12px;
  line-height: 18px;
  white-space: nowrap;
  pointer-events: none;
  box-shadow: 0 8px 24px rgba(15, 12, 12, 0.24), 0 2px 6px rgba(15, 12, 12, 0.16);
}
@media (max-width: 639px) { .tl-month { visibility: hidden; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}