/* Reversible pencil-atlas study: remove this stylesheet's link to restore the base design. */
:root {
  --font-figure: "IBM Plex Mono", monospace;
  /* The application's approved status inks, shared by the public Tibo record. */
  --ok: #3b7a5f; --ok-soft: rgba(59, 122, 95, 0.10);
  --warn: #9a6a12; --warn-soft: rgba(154, 106, 18, 0.11);
  --crit: #ab3d17; --crit-soft: rgba(171, 61, 23, 0.09);
  /* Cool paper from the app's tokens (src/web/tokens.css); cream was dropped there on 2026-10-08. */
  --bg: #f6f8f8; --surface: #ffffff; --raised: #eef2f2; --band: #eaf0f0;
  --text: #22333b; --muted: #4c5f65; --line: #b4c2c3;
  --accent: #136d88; --accent-soft: #d6e9ef; --button-hover: #105a71;
  --pencil: #66808a; --paper-grain: rgb(48 66 71 / .045);
  --shadow: 0 18px 44px rgba(41, 58, 67, .16);
  --sketch-radius: 5px 12px 6px 10px / 10px 5px 11px 5px;
}
:root[data-theme="dark"] {
  --ok: #93cbab; --ok-soft: rgba(147, 203, 171, 0.12);
  --warn: #e2b866; --warn-soft: rgba(226, 184, 102, 0.13);
  --crit: #f08f6b; --crit-soft: rgba(240, 143, 107, 0.13);
  --bg: #18252b; --surface: #203038; --raised: #2a3b42; --band: #1e3036;
  --text: #edf0e8; --muted: #b3c7c9; --line: #4f666d;
  --accent: #85d1e5; --accent-soft: #294a56; --button-ink: #18252b;
  --button-hover: #b1e1ec; --pencil: #99b6be; --paper-grain: rgb(220 235 228 / .025);
  --shadow: 0 18px 44px rgba(4, 12, 15, .5);
}
body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23738486' opacity='.065' filter='url(%23n)' d='M0 0h180v180H0z'/%3E%3C/svg%3E");
}
/* Headings speak like the app's titles: Plex Sans semibold, sentence case. */
h1, h2, h3 { font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-weight: 600; letter-spacing: -.02em; }
:root:is(:lang(ar), :lang(zh), :lang(ja), :lang(ko)) h1,
:root:is(:lang(ar), :lang(zh), :lang(ja), :lang(ko)) h2,
:root:is(:lang(ar), :lang(zh), :lang(ja), :lang(ko)) h3 { font-family: "Segoe UI", sans-serif; letter-spacing: normal; }
:root:is(:lang(ar), :lang(zh), :lang(ja), :lang(ko)) .hero h1 { letter-spacing: normal; }
.hero h1 { font-size: clamp(62px, 6.3vw, 87px); line-height: 1.1; letter-spacing: -.055em; }
.hero h1 .accent-text { text-decoration: underline; text-decoration-color: var(--line); text-decoration-thickness: 2px; text-underline-offset: 10px; }
.atlas-heading h2, .sources h2 { font-size: 24px; }
.feature-list h3 { font-size: 29px; }
.capability-grid h3, .steps h3 { font-size: 27px; }
.drawer-head h2 { font-size: 32px; }
.site-header, .site-footer { border-color: var(--pencil); }
.site-header::after {
  content: ""; position: absolute; bottom: -4px; left: 0; width: 100%;
  border-bottom: 1px solid var(--line); transform: rotate(-.15deg); pointer-events: none;
}
.button, .theme-toggle, .drawer-close, .language-options,
.provider-row, .frequency-switcher button, .amount-grid button, .amount-field {
  border-radius: var(--sketch-radius); border: 1px solid var(--pencil);
}
.language-picker[open] summary { color: var(--accent); }
.language-options {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px 8px; width: min(690px, calc(100vw - 96px)); padding: 10px;
  border-color: var(--pencil);
  background-color: var(--surface);
  background-image: repeating-linear-gradient(116deg, transparent 0 8px, var(--paper-grain) 8px 9px);
  box-shadow: var(--shadow);
  scrollbar-color: var(--pencil) var(--surface); scrollbar-width: thin;
}
:root[dir="rtl"] .language-options { right: auto; left: 0; }
.language-options button {
  min-height: 42px; padding: 8px 10px; border: 1px solid transparent;
  border-radius: 4px 8px 5px 7px; line-height: 1.25; white-space: nowrap;
}
.language-options button:nth-child(-n+3) { margin-bottom: 9px; }
.language-options button:hover { background: var(--raised); }
.language-options button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft); color: var(--text);
}
.language-options button:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; }
.language-check { color: var(--accent); font-weight: 700; }
.button-primary { background: var(--accent-soft); color: var(--text); border-color: var(--accent); }
.button-primary:hover { background: var(--accent); color: var(--button-ink); }
.button-secondary { background: var(--surface); }
/* Segmented options take the buttons' corners; percentage radii bent wide options into lenses. */
.window-switcher button, .period-switcher button { border-radius: var(--sketch-radius); }
.window-switcher button[aria-pressed="true"], .period-switcher button[aria-pressed="true"] {
  border-color: var(--accent); background: var(--accent-soft);
}
.window-kpis { border-bottom-style: dashed; } .window-kpis > div { border-left-style: dashed; }
.example-label { border-bottom: 1px solid var(--pencil); padding-bottom: 3px; }
.band {
  --band-line: var(--pencil);
  background-image: repeating-linear-gradient(116deg, transparent 0 5px, var(--paper-grain) 5px 6px);
}
.feature-list article, .capability-grid li, .faq-list { border-color: var(--line); border-top-style: dashed; }
.worth-readout dl div, .compare-readout dl div { border-top-style: dashed; }
.worth-chart { border-bottom-color: var(--pencil); }
.worth-chart button i { border-radius: 3px 5px 0 0; }
.worth-chart button[aria-pressed="true"] i { background-image: repeating-linear-gradient(115deg, transparent 0 3px, var(--accent-soft) 3px 4px); }
.worth-median { border-top-color: var(--pencil); }
.battle-lead { border-radius: var(--sketch-radius); }
.compare-legend .legend-band { border-color: var(--pencil); }
.faq details { border-bottom-style: dashed; }
.feature-icon { width: 80px; height: 80px; margin-left: -4px; }
.capability-icon { width: 76px; height: 76px; margin-bottom: 12px; }
.project-bar { height: 8px; background: var(--raised); border: 1px solid var(--line); border-radius: 3px 5px 2px 4px; overflow: hidden; }
.project-bar i { background-color: var(--accent); background-image: repeating-linear-gradient(115deg, transparent 0 3px, var(--accent-soft) 3px 4px); }
.step-number {
  font-family: "IBM Plex Mono", Consolas, monospace; font-size: 16px; font-weight: 500; flex: 0 0 35px;
  height: 35px; line-height: 35px; text-align: center; border: 1px solid var(--pencil);
  border-radius: 47% 53% 42% 58%;
}
.support-drawer { border-left: 1px solid var(--pencil); }
.provider-list { gap: 0; border-top: 1px dashed var(--pencil); }
.provider-row {
  gap: 18px; padding: 20px 6px; background: transparent;
  border: 0; border-bottom: 1px dashed var(--pencil); border-radius: 0;
}
.provider-row:not(:disabled):hover { background: var(--accent-soft); border-color: var(--pencil); }
.provider-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.provider-logo { width: 112px; height: 44px; padding: 3px 4px; background: transparent; border: 0; border-radius: 0; }
:root[data-theme="dark"] .provider-logo { background: #fff; }
.provider-row[data-available="true"] .provider-action { text-decoration: underline; text-underline-offset: 4px; }

/* The sketch theme uses the map-sheet mark; disabling it restores the original mark. */
.brand { --logo-ink: var(--text); --logo-accent: var(--accent); gap: 10px; }
.brand-word { font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-size: 23px; letter-spacing: -.03em; }
.brand-word > span { font-weight: 400; }
.brand-word > strong { font-weight: 600; }
.brand-mark { width: 44px; height: 36px; }
#tokenatlas-mark > circle, #tokenatlas-mark > path { display: none; }
#tokenatlas-mark .sketch-sheet { display: inline; }

/* The five source labels form stops on an illustrative atlas trail, not a data flow. */
.sources-section { background-image: none; }
.sources > p { text-align: center; text-wrap: balance; }
.source-map { position: relative; height: 190px; margin-block: 12px 8px; }
.source-map-art { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.map-contours { stroke: var(--pencil); stroke-width: .7; opacity: .32; stroke-linejoin: round; }
.map-land { fill: var(--surface); fill-opacity: .85; stroke-width: 1.1; }
.map-compass { display: block; position: absolute; top: 4px; right: 8px; width: 44px; height: 44px; pointer-events: none; }
.map-trail { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 5 6; stroke-linecap: round; opacity: .7; }
.source-map .source-names { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; margin: 0; height: 100%; align-items: start; }
.source-map .source-names li {
  --stop-y: 100px;
  position: relative; padding-top: calc(var(--stop-y) - 45px); text-align: center;
  font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-size: 19px; font-weight: 500; line-height: 35px;
  white-space: nowrap; text-shadow: 0 0 5px var(--band), 0 0 10px var(--band);
}
.source-map .source-names li:nth-child(2) { --stop-y: 65px; }
.source-map .source-names li:nth-child(3) { --stop-y: 125px; }
.source-map .source-names li:nth-child(4) { --stop-y: 80px; }
.source-map .source-names li:nth-child(5) { --stop-y: 105px; }
.source-map .source-names li > span { font-family: "IBM Plex Sans", "Segoe UI", sans-serif; font-size: 12px; }
.source-map .source-names li::after {
  content: ""; position: absolute; top: calc(var(--stop-y) - 5px); left: calc(50% - 5px);
  width: 10px; height: 10px; border: 1.5px solid var(--accent); background: var(--surface);
  border-radius: 48% 52% 44% 56%; box-shadow: 0 0 0 4px var(--band);
}

/* Phone: the five map stops cannot share one row, so the names stack in two columns without the drawn route. */
@media (max-width: 760px) {
  .source-map { height: auto; } .source-map-art, .map-compass { display: none; }
  .source-map .source-names { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 20px; height: auto; }
  .source-map .source-names li { padding-top: 0; text-align: left; white-space: normal; line-height: 1.4; }
  .source-map .source-names li::after { display: none; }
}