@font-face { font-family: Satoshi; src: url('assets/satoshi-900.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: Satoshi; src: url('assets/satoshi-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Satoshi; src: url('assets/satoshi-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: Satoshi; src: url('assets/satoshi-700.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --background: #111816;
  --ink: #f5f2e8;
  --muted: #a9b7ad;
  --line: #384641;
  --accent: #e1ba83;
  --mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--background); }
button, a { color: inherit; }
button { font: inherit; cursor: pointer; }
button:focus-visible, a:focus-visible, summary:focus-visible, canvas:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
[hidden] { display: none !important; }
p, h1 { margin: 0; }
.experience { min-height: 100svh; display: flex; flex-direction: column; }
.mast { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; min-height: 59px; padding: 10px clamp(14px,4vw,60px); gap: 16px; border-bottom: 1px solid var(--line); }
.mark { display: inline-flex; width: fit-content; align-items: center; gap: 9px; text-decoration: none; font-weight: 700; font-size: 13px; white-space: nowrap; }
.mark svg { stroke: var(--accent); stroke-width: 1.4; width: 20px; height: 22px; }
h1 { font: 500 clamp(19px,2.7vw,34px)/1 Georgia, serif; letter-spacing: -.055em; text-align: center; white-space: nowrap; }
.mast-actions { justify-self: end; }
#share { border: 1px solid var(--line); background: transparent; border-radius: 4px; min-height: 31px; padding: 0 8px; font-size: 11px; white-space: nowrap; }
#share svg { color: var(--accent); vertical-align: -1px; }
.viewport { isolation: isolate; position: relative; flex: 1 0 auto; min-height: 545px; height: clamp(545px,72svh,900px); overflow: hidden; background: radial-gradient(ellipse at 54% 43%, #586d61 0, #354b43 43%, #182a26 82%, #14231f 100%); }
[data-mode="compare"] .viewport { background: radial-gradient(ellipse at 56% 47%, #526861 0, #2b443d 51%, #172924 90%); }
[data-mode="moon"] .viewport { background: radial-gradient(ellipse at 33% 55%, #24334b, #151f31 54%, #0d1421 87%); }
#orbit { position: absolute; width: 100%; height: 100%; inset: 0; cursor: grab; touch-action: none; }
#orbit.dragging { cursor: grabbing; }
#orbit:focus-visible { outline-offset: -4px; }
.headline, .metric { position: absolute; pointer-events: none; z-index: 1; }
.headline { top: clamp(23px,4vw,57px); left: clamp(18px,4.5vw,68px); text-shadow: 0 2px 14px #142420d9; }
.eyebrow, .control-label { font: 650 10px/1.35 var(--mono); letter-spacing: .13em; text-transform: uppercase; color: var(--accent); }
.headline strong { display: block; margin: 3px 0 6px; font: 500 clamp(39px,6.1vw,88px)/.98 Georgia, serif; letter-spacing: -.065em; }
.headline p:not(.eyebrow) { font-size: clamp(10px,1.05vw,13px); color: #edf0e6; line-height: 1.45; }
#range { color: #d6c4a9; }
.metric { bottom: 19px; left: clamp(18px,4.5vw,68px); display: flex; align-items: baseline; gap: 7px; text-shadow: 0 2px 8px #131a17; }
.metric span { font-weight: 720; letter-spacing: -.035em; font-size: clamp(18px,2.8vw,29px); }
.metric small { font: 550 10px/1.3 var(--mono); color: #e4e9db; }
.control-group { display: flex; gap: 3px; align-items: center; width: fit-content; padding: 3px; border: 1px solid #b8c9ba46; border-radius: 5px; background: #182720d9; }
.control-group button { border: 0; border-radius: 3px; background: transparent; min-height: 34px; padding: 0 10px; font: 650 11px/1 var(--mono); white-space: nowrap; }
.control-group button[aria-pressed="true"] { color: #192420; background: #e1e7d7; }
.control-group button:hover:not([aria-pressed="true"]) { background: #3e574c; }
.mode-controls { position: absolute; top: 21px; right: clamp(15px,4vw,60px); z-index: 2; }
.camera { position: absolute; right: clamp(15px,4vw,60px); bottom: 17px; display: flex; align-items: center; gap: 11px; z-index: 2; }
.camera button { min-width: 34px; font-size: 16px; padding-inline: 6px; }
.hint { font: 550 10px/1.2 var(--mono); color: #e4e9db; pointer-events: none; }
.controls { border-top: 1px solid var(--line); padding: 11px clamp(14px,4vw,60px) 10px; }
.control-row { display: flex; align-items: center; gap: 11px; min-width: 0; }
.company-list { display: flex; gap: 6px; overflow-x: auto; padding: 3px 3px 5px; scrollbar-width: thin; }
.company-list button { min-height: 39px; padding: 5px 10px; display: grid; gap: 2px; align-content: center; text-align: left; background: #1a2621; border: 1px solid #45554c; border-radius: 4px; font-size: 12px; font-weight: 670; white-space: nowrap; }
.company-list button small { color: #c2cdc3; font: 550 10px/1 var(--mono); }
.company-list button[aria-pressed="true"] { color: #211a11; background: #e6c69c; border-color: #e6c69c; }
.company-list button[aria-pressed="true"] small { color: #3b3022; }
.lower { gap: 9px; margin-top: 6px; flex-wrap: wrap; }
.lower .control-group { background: transparent; }
.lower .control-group button { min-height: 29px; }
details { margin-left: auto; font-size: 11px; color: var(--muted); }
details[open] { flex-basis: 100%; margin: 0; }
summary { cursor: pointer; padding: 5px 1px; width: fit-content; }
details p { max-width: 76ch; line-height: 1.5; margin-bottom: 5px; }
.source-links { display: flex; gap: 11px; flex-wrap: wrap; margin-top: 6px; }
footer { padding: 5px clamp(14px,4vw,60px) 12px; color: var(--muted); font: 550 9px/1.2 var(--mono); }
#unavailable { position: absolute; inset: 45% 10px auto; text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 700px) {
  .mast { min-height: 49px; padding-block: 7px; gap: 6px; }
  .mark span { display: none; }
  #share { padding-inline: 5px; font-size: 9px; }
  .viewport { height: clamp(385px,64svh,595px); min-height: 385px; }
  .headline { top: 16px; left: 12px; }
  .headline strong { font-size: 43px; }
  .eyebrow, .control-label { font-size: 9px; }
  .mode-controls { top: 12px; right: 9px; }
  .mode-controls button { padding-inline: 5px; min-height: 33px; font-size: 10px; }
  .metric { left: 12px; bottom: 14px; display: grid; gap: 1px; }
  .metric small { font-size: 8px; }
  .camera { right: 9px; bottom: 11px; gap: 6px; }
  .camera button { min-width: 29px; min-height: 36px; }
  .hint { font-size: 8px; }
  .control-label { display: none; }
  .controls { padding-inline: 8px; }
  .lower { gap: 5px; }
  .lower .control-group button { padding-inline: 6px; min-height: 32px; font-size: 10px; }
  details { margin-left: 2px; }
}

/* Sand, sky, and a deliberately quiet interface. */
:root { color-scheme: light; --background: #f7f4ed; --ink: #262b29; --muted: #77776d; --line: #dcd9cf; --accent: #49564a; --mono: Satoshi, sans-serif; font-family: Satoshi, sans-serif; }
.mast { min-height: 83px; border: 0; background: #f7f4ed; }
.mast-note { font-size: 11px; letter-spacing: .02em; color: var(--muted); }
h1 { width: 230px; height: 51px; font-size: 30px; letter-spacing: -.055em; }
.wordmark { position: relative; display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; }
.bank-word { position: absolute; inset: 0; display: flex; justify-content: center; align-items: center; opacity: 0; transform: translateY(5px); transition: opacity .45s ease, transform .45s ease; white-space: nowrap; }
.bank-word.is-active { opacity: 1; transform: translateY(0); }
.bank-citi { color: #063b70; font: 900 31px/1 Satoshi, sans-serif; letter-spacing: -.065em; }
.bank-citi::before { content: ''; position: absolute; width: 61px; height: 16px; border-top: 4px solid #e12538; border-radius: 50% 50% 0 0; top: 0; left: 85px; }
.bank-hsbc { font: 500 29px/1 Georgia, serif; letter-spacing: -.06em; color: #151515; gap: 9px; }
.bank-hsbc i { width: 27px; height: 23px; background: conic-gradient(from 45deg, #db0011 0 25%, transparent 0 50%, #db0011 0 75%, transparent 0); }
.bank-jpm { font: 500 30px/1 Georgia, serif; color: #292722; letter-spacing: -.04em; }
.bank-wells { color: #ffdf62; background: #ce1c2e; inset: 5px 18px; font: bold 24px/1 Georgia, serif; letter-spacing: -.035em; }
.bank-barclays { color: #0086b5; font: 700 28px/1 Georgia, serif; letter-spacing: -.045em; }
#share { border-radius: 20px; padding: 0 13px; min-height: 34px; }
#share svg { color: inherit; }
.viewport, [data-mode="compare"] .viewport { background: linear-gradient(#c7dce6 0%, #e4e9e7 33%, #e4d3b0 36%, #e7d7b9 100%); }
.headline { text-shadow: none; top: 34px; }
.headline strong { font-family: Satoshi, sans-serif; font-weight: 500; letter-spacing: -.075em; }
.headline p:not(.eyebrow), #range { color: #54594f; }
.eyebrow { color: #3e4b43; }
.metric { text-shadow: none; }
.metric small, .hint { color: #4d554b; }
.control-group { border-color: #fff9; background: #faf8f0d9; border-radius: 24px; padding: 4px; }
.control-group button { border-radius: 20px; font-weight: 700; }
.control-group button[aria-pressed="true"] { color: #fff; background: #293c33; }
.control-group button:hover:not([aria-pressed="true"]) { background: #e2e4d8; }
.controls { padding-top: 16px; background: #f7f4ed; }
.company-list { flex: 1; gap: 8px; }
.company-list button { display: flex; flex: 1; align-items: center; gap: 10px; border-radius: 12px; background: transparent; border-color: #dcd9cf; padding: 10px 14px; min-height: 57px; }
.company-list button img { object-fit: contain; width: 25px; height: 25px; }
.company-copy { display: grid; gap: 4px; }
.company-list button small { color: #72776b; }
.company-list button[aria-pressed="true"] { color: #23392d; background: #e4eadc; border-color: #7c8c76; }
.company-list button[aria-pressed="true"] small { color: #52624e; }
.lower { margin-top: 10px; }
.lower .control-group { border-color: var(--line); }
[data-mode="moon"] .headline, [data-mode="moon"] .metric { color: #f7f4ed; }
[data-mode="moon"] .headline p, [data-mode="moon"] .metric small, [data-mode="moon"] .hint { color: #d5dfdd; }
@media (max-width: 700px) {
  .mast { min-height: 73px; grid-template-columns: 1fr auto 1fr; padding-inline: 12px; }
  .mast-note { font-size: 9px; max-width: 40px; line-height: 1.3; }
  h1 { width: 175px; height: 45px; }
  .bank-citi { font-size: 26px; }
  .bank-citi::before { width: 49px; left: 64px; top: 1px; }
  .bank-hsbc { font-size: 23px; gap: 5px; }
  .bank-hsbc i { width: 20px; height: 18px; }
  .bank-jpm, .bank-barclays { font-size: 25px; }
  .bank-wells { font-size: 21px; inset: 4px 3px; }
  #share { font-size: 9px; padding-inline: 8px; }
  .headline { top: 18px; }
  .headline strong { font-size: 48px; }
  .company-list button { padding: 9px 12px; gap: 8px; min-width: 125px; }
  .company-list button img { width: 23px; height: 23px; }
  .camera .hint { display: none; }
}
@media (prefers-reduced-motion: reduce) { .bank-word { transition: none; } }

/* Controls live over the same uninterrupted desert scene. */
.experience { position: relative; --dock-height: 130px; }
.mast { position: absolute; inset: 0 0 auto; z-index: 3; background: transparent; }
.mast h1 { grid-column: 2; }
.viewport { height: 100svh; min-height: 700px; }
.headline { top: 105px; }
.mode-controls { top: 105px; }
.controls { position: absolute; z-index: 3; left: clamp(14px,4vw,60px); right: clamp(14px,4vw,60px); bottom: 20px; padding: 0; border: 0; background: transparent; }
.metric, .camera { bottom: calc(var(--dock-height) + 42px); }
.company-list button { background: #faf8ee52; border-color: #fff8; backdrop-filter: blur(8px); }
.company-list button[aria-pressed="true"] { background: #e4eadcbd; }
.company-list { padding-bottom: 3px; }
.company-list button { min-height: 50px; }
.control-label { display: none; }
.lower { flex-wrap: wrap; }
.lower .control-group { background: #faf8ee75; border-color: #fff8; }
.custom-amount { position: relative; display: flex; align-items: center; gap: 6px; padding: 4px 5px 4px 12px; border: 1px solid #fff9; border-radius: 24px; background: #faf8eec9; }
.custom-amount input { width: 185px; min-width: 0; border: 0; outline-offset: 3px; background: transparent; color: #263a2f; font: 500 12px Satoshi, sans-serif; }
.custom-amount button { border: 0; background: #293c33; color: white; border-radius: 20px; padding: 9px 13px; font-size: 11px; }
#amount-error { position: absolute; bottom: calc(100% + 7px); left: 0; max-width: 330px; background: #fff8e9; border-radius: 8px; color: #8a2d1c; padding: 8px; font-size: 11px; }
#amount-error:empty { display: none; }
#sources { color: #39483d; }
#sources[open] { position: absolute; right: 0; bottom: 50px; width: min(500px,100%); padding: 16px; background: #faf6e9f5; border-radius: 14px; box-shadow: 0 8px 40px #342e2626; }
.bank-word { transition-duration: .18s; }
[data-mode="moon"] #sources { color: #e7e8df; }
[data-mode="moon"] #sources[open] { color: #263b2e; }
[data-mode="moon"] .company-list button { background: #f7f4edae; }
@media (max-width: 700px) {
  .viewport { height: 100svh; min-height: 780px; }
  .mast { padding-inline: 14px; }
  .headline { top: 90px; }
  .mode-controls { top: 90px; }
  .controls { left: 10px; right: 10px; bottom: 12px; }
  .metric, .camera { bottom: calc(var(--dock-height) + 30px); }
  .company-list button { min-width: 125px; }
  .custom-amount { order: 3; width: 100%; }
  .custom-amount input { flex: 1; width: 0; font-size: 16px; }
  .custom-amount button { padding: 10px 16px; }
  #sources { margin-left: auto; }
  .lower { gap: 6px; }
}

[data-mode="moon"] .wordmark { background: #f7f4ede8; border-radius: 4px; }
[data-mode="moon"] #share { color: #f7f4ed; border-color: #ffffff60; }
@media (max-width: 360px) { .headline strong { font-size: 40px; } }

@font-face { font-family: 'Ma Shan Zheng'; src: url('assets/mashanzheng-trillions.ttf') format('truetype'); font-weight: 400; font-display: swap; }
:root {
  --space-tight: 8px;
  --space-group: 12px;
  --space-section: 24px;
  --page-gutter: clamp(20px,4vw,64px);
  --text-label: 16px;
  --text-detail: 14px;
  --text-control: 14px;
}
::selection { background: #314b3b; color: #fff8e9; }
body { font-size: 16px; }
button, input { -webkit-tap-highlight-color: transparent; }
button { transition: background-color .15s, border-color .15s; }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #334e3c; outline-offset: 4px; }
input { caret-color: #314b3b; }
.mast { min-height: 96px; padding: 12px var(--page-gutter); }
h1 { width: 240px; height: 68px; }
#share { font-size: var(--text-control); min-height: 44px; padding-inline: 16px; border-color: #3b554c55; }
.bank-lockup { flex-direction: column; gap: 6px; }
.bank-lockup b { font: 700 12px/1 Satoshi,sans-serif; letter-spacing: .15em; color: #263d31; }
.chase-sign { display: flex; align-items: center; gap: 8px; font: 900 28px/1 Satoshi,sans-serif; color: #183f67; letter-spacing: -.025em; }
.chase-sign img { width: 31px; height: 31px; }
.bank-calligraphy [lang] { font: 400 40px/1 'Ma Shan Zheng',serif; color: #a92035; letter-spacing: .12em; padding-left: .12em; }
.bank-citi::before { top: 9px; }
.bank-wells { inset-block: 14px; }
.headline { left: var(--page-gutter); top: 120px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-tight); max-width: 480px; }
.eyebrow { font: 700 var(--text-label)/1.25 Satoshi,sans-serif; text-transform: none; letter-spacing: .015em; color: #314435; }
.headline strong { font-size: clamp(56px,6vw,88px); line-height: 1; letter-spacing: -.04em; margin: 0; font-variant-numeric: tabular-nums; }
.headline p:not(.eyebrow) { font-size: var(--text-detail); line-height: 1.5; color: #334538; max-width: 36ch; }
#range { margin-top: -4px; }
.mode-controls { top: 120px; right: var(--page-gutter); }
.control-group { padding: 4px; gap: 4px; }
.control-group button { min-height: 44px; padding-inline: 16px; font: 700 var(--text-control)/1 Satoshi,sans-serif; }
.camera button { width: 44px; min-width: 44px; font-size: 22px; padding: 10px; }
.camera svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
.camera { right: var(--page-gutter); gap: 16px; }
.hint { font: 500 14px/1.4 Satoshi,sans-serif; color: #34483a; }
.metric { left: var(--page-gutter); display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.metric span { font-size: 30px; letter-spacing: -.025em; line-height: 1.15; }
.metric small { font: 500 var(--text-detail)/1.4 Satoshi,sans-serif; color: #34483a; }
.controls { left: var(--page-gutter); right: var(--page-gutter); bottom: 24px; }
.company-list { gap: 8px; padding: 4px; margin: -4px; scrollbar-width: none; scroll-snap-type: x proximity; }
.company-list::-webkit-scrollbar { display: none; }
.company-list button { min-height: 64px; padding: 12px 16px; gap: 12px; border-radius: 12px; font-size: 15px; font-weight: 700; scroll-snap-align: start; backdrop-filter: none; background: #fbf6e2b3; border-color: #fbf6e2d9; }
.company-list button:hover { background: #fff9e8ed; border-color: #78916c; }
.company-list button small { font: 500 13px/1.25 Satoshi,sans-serif; color: #41543e; }
.company-list button[aria-pressed="true"] { background: #e1e9d3ed; border-color: #4f7149; }
.company-copy { gap: 4px; }
.lower { gap: 12px; margin-top: 16px; }
.lower .control-group button { min-height: 40px; font-size: var(--text-control); padding-inline: 14px; }
.custom-amount { gap: 8px; min-height: 50px; padding: 4px 5px 4px 16px; }
.custom-amount input { width: 192px; font-size: 16px; }
.custom-amount button { min-height: 40px; font-size: var(--text-control); padding-inline: 18px; }
#amount-error { font-size: 14px; line-height: 1.4; padding: 12px; }
#sources, details { font-size: 14px; }
summary { min-height: 44px; display: list-item; align-content: center; }
details p { font-size: 14px; line-height: 1.5; margin-block: 8px; }
.source-links { font-size: 14px; line-height: 1.5; gap: 12px; }
@media (min-width: 701px) and (max-width: 1100px) {
  .company-list button { min-width: 146px; }
  .company-list { overflow-x: auto; }
  .headline { max-width: 390px; }
}
@media (max-width: 700px) {
  :root { --page-gutter: 16px; --text-label: 16px; --text-detail: 14px; }
  .viewport { min-height: 840px; }
  .mast { min-height: 80px; padding-block: 6px; grid-template-columns: 1fr auto 1fr; }
  h1 { width: 196px; height: 64px; }
  #share { font-size: 12px; padding-inline: 10px; }
  .bank-citi { font-size: 28px; }
  .bank-citi::before { top: 9px; left: 74px; }
  .bank-wells { inset-block: 12px; }
  .chase-sign { font-size: 24px; }
  .chase-sign img { width: 25px; height: 25px; }
  .mode-controls { top: 88px; left: 16px; right: auto; }
  .mode-controls button { min-height: 40px; font-size: 14px; padding-inline: 16px; }
  .headline { top: 156px; gap: 6px; max-width: calc(100% - 32px); }
  .headline strong { font-size: 48px; }
  .headline p:not(.eyebrow) { max-width: 31ch; }
  .controls { bottom: 16px; }
  .metric, .camera { bottom: calc(var(--dock-height) + 40px); }
  .metric span { font-size: 26px; }
  .metric small { max-width: 190px; font-size: 13px; }
  .camera { gap: 0; }
  .camera button { width: 38px; min-width: 38px; min-height: 44px; padding: 8px; }
  .company-list button { min-width: 146px; min-height: 64px; padding: 10px 12px; gap: 10px; }
  .company-list button img { width: 25px; height: 25px; }
  .lower { gap: 8px; margin-top: 12px; }
  .lower .control-group button { min-height: 40px; padding-inline: 11px; font-size: 13px; }
  .reference { order: 0; }
  .amounts { order: 1; }
  #sources { order: 2; margin-left: auto; }
  .custom-amount { order: 3; width: 100%; }
  .custom-amount input { width: 0; flex: 1; }
  #sources[open] { bottom: 64px; }
}
@media (max-width: 380px) {
  h1 { width: 170px; }
  .bank-citi::before { left: 61px; }
  .bank-citi { font-size: 25px; }
  .headline strong { font-size: 44px; }
  .metric small { max-width: 150px; }
  .camera button { width: 34px; min-width: 34px; }
}

#scale-change { font-weight: 700; color: #304a34; max-width: 40ch; }
.bank-chase img { filter: invert(22%) sepia(65%) saturate(875%) hue-rotate(174deg); }

@media (max-width: 700px) { .metric small { max-width: 172px; font-size: 14px; } }

@media (max-width: 700px) { #scale-change { display: none; } }
/* Bank-inspired lettering is confined to the changing brand mark. */
.mast { display: flex; justify-content: center; min-height: 96px; padding: 4px var(--page-gutter); }
.mast h1 { width: 340px; height: 76px; }
.bank-word { gap: 12px; letter-spacing: -.025em; }
.bank-citi { font: 900 47px/1 Satoshi,sans-serif; color: #073b6a; }
.bank-citi::before { width: 86px; height: 20px; left: 125px; top: 2px; border-top-width: 5px; }
.bank-hsbc { font: 400 44px/1 Georgia,serif; color: #161c19; }
.bank-hsbc i { width: 38px; height: 32px; }
.bank-jpm { font: 400 50px/1 Georgia,serif; letter-spacing: -.035em; }
.bank-wells { inset: 8px 30px; font: 700 39px/1 Georgia,serif; color: #ffe77a; }
.bank-barclays { font: 700 43px/1 Georgia,serif; color: #008db8; }
.bank-chase { font: 900 39px/1 Satoshi,sans-serif; color: #163d64; }
.bank-chase img { width: 39px; height: 39px; }
.bank-capitalone { color: #123b54; font: 700 italic 45px/1 Georgia,serif; padding-top: 16px; }
.bank-capitalone svg { position: absolute; inset: -7px 20px auto; width: 300px; height: 60px; fill: #c33634; }
.bank-capitalone em { font: inherit; transform: scaleX(.97); }
.bank-schwab { inset: 5px 50px; color: white; background: #459dc9; font: italic 47px/1 Georgia,serif; }
.bank-usbank { font: 900 51px/1 Satoshi,sans-serif; color: #172969; gap: 0; }
.bank-usbank i { font: inherit; color: white; background: #c23940; padding: 2px 6px 8px; clip-path: polygon(0 0,100% 0,100% 78%,50% 100%,0 78%); }
.bank-icbc { font: 700 38px/1 Satoshi,sans-serif; color: #222c25; }
.bank-icbc svg, .bank-bankofchina svg { width: 50px; height: 50px; stroke: #b22632; fill: none; stroke-width: 3; }
.bank-bankofchina [lang] { font: 400 47px/1 'Ma Shan Zheng',serif; color: #201f1a; }
.bank-bankofchina small { display: block; margin-top: 3px; font: 400 12px/1 Georgia,serif; letter-spacing: .06em; }
.bank-scotiabank { color: #d32a32; font: 900 48px/1 Satoshi,sans-serif; }
.bank-dbs { font: 400 40px/1 Georgia,serif; color: #151b16; }
.bank-dbs svg { width: 43px; height: 43px; fill: #df343c; }
.bank-santander { font: 500 47px/1 Satoshi,sans-serif; color: #db3337; gap: 9px; }
.bank-santander svg { width: 41px; height: 47px; fill: currentColor; }
.bank-calligraphy { display: flex; flex-direction: column; gap: 4px; }
.bank-calligraphy [lang] { font-size: 54px; line-height: 1; }
.bank-calligraphy small { font: 500 12px/1 Satoshi,sans-serif; letter-spacing: .12em; }
.company-heading { display: flex; align-items: center; gap: 10px; min-height: 24px; }
#company-mark { width: 24px; height: 24px; object-fit: contain; }
/* One interface family and three functional weights. */
:root { font-synthesis: none; }
button, input, summary, .headline p, .metric, .hint, .company-copy, .company-copy small { font-family: Satoshi,sans-serif; }
button, .company-list button, .eyebrow, .company-copy small, .metric small, .hint { font-weight: 500; }
button[aria-pressed="true"], .metric span { font-weight: 700; }
.headline strong { font-weight: 500; }
/* Glass surfaces share a tint, highlight, blur, and pressed state. */
.control-group, .lower .control-group, .mode-controls, .custom-amount {
  background: #fffdf11c;
  border: 1px solid #fffdf1b3;
  box-shadow: inset 0 1px 0 #ffffffa3, 0 3px 14px #604c2412;
  -webkit-backdrop-filter: blur(16px) saturate(135%);
  backdrop-filter: blur(16px) saturate(135%);
}
.control-group button { background: #ffffff0d; font-weight: 500; }
.control-group button:hover:not([aria-pressed="true"]) { background: #fffdf15c; }
.control-group button[aria-pressed="true"] { background: #294b3ac9; color: #fffdf1; box-shadow: inset 0 1px 0 #ffffff40; font-weight: 700; }
.company-list button, [data-mode="moon"] .company-list button {
  background: #fffdf14d;
  border: 1px solid #fffdf1b3;
  box-shadow: inset 0 1px 0 #ffffff99, 0 3px 14px #604c2412;
  -webkit-backdrop-filter: blur(12px) saturate(135%);
  backdrop-filter: blur(12px) saturate(135%);
}
.company-list button:hover { background: #fffdf180; }
.company-list button[aria-pressed="true"] { background: #e2f0d380; border-color: #456b4899; }
.custom-amount button { background: #294b3ac9; color: #fffdf1; box-shadow: inset 0 1px 0 #ffffff40; font-weight: 500; }
.custom-amount button:hover { background: #254b3aeb; }
#sources summary { padding: 0 14px; border: 1px solid #fffdf199; border-radius: 24px; background: #fffdf124; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@supports not (backdrop-filter: blur(1px)) {
  .control-group, .lower .control-group, .custom-amount, .company-list button { background: #fbf6e2d9; }
}
@media (max-width: 700px) {
  .mast { min-height: 80px; }
  .mast h1 { width: 280px; height: 72px; }
  .bank-citi { font-size: 38px; }
  .bank-citi::before { width: 71px; left: 104px; top: 4px; }
  .bank-hsbc { font-size: 35px; gap: 9px; }
  .bank-hsbc i { width: 30px; height: 27px; }
  .bank-jpm { font-size: 43px; }
  .bank-wells { inset: 9px 17px; font-size: 34px; }
  .bank-barclays { font-size: 37px; }
  .bank-chase { font-size: 32px; gap: 10px; }
  .bank-chase img { width: 31px; height: 31px; }
  .bank-capitalone { font-size: 39px; }
  .bank-capitalone svg { inset: -2px 7px auto; width: 266px; height: 53px; }
  .bank-schwab { inset: 7px 31px; font-size: 41px; }
  .bank-usbank { font-size: 44px; }
  .bank-icbc { font-size: 32px; gap: 9px; }
  .bank-icbc svg, .bank-bankofchina svg { width: 41px; height: 41px; }
  .bank-bankofchina [lang] { font-size: 43px; }
  .bank-scotiabank { font-size: 42px; }
  .bank-dbs { font-size: 33px; gap: 9px; }
  .bank-dbs svg { width: 35px; height: 35px; }
  .bank-santander { font-size: 41px; }
  .bank-santander svg { width: 35px; height: 41px; }
  .bank-calligraphy [lang] { font-size: 49px; }
}
/* TRILLIONS launch tokens. Satoshi is the interface; bank lettering is the brand. */
:root { --accent: #CEFA50; --ink: #242c21; --muted: #46513c; --background: #e3ccb0; color-scheme: light; font-family: Satoshi,sans-serif; }
::selection { background: #CEFA50; color: #242c21; }
button:focus-visible, input:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid #34431f; box-shadow: 0 0 0 5px #CEFA50; }
input { caret-color: #35431f; }
.viewport { height: 100svh; min-height: 720px; }
.control-group button[aria-pressed="true"], .custom-amount button, .custom-amount button:hover { background: #CEFA50; color: #243018; box-shadow: inset 0 1px 0 #ffffff80,0 2px 8px #35431f26; }
.company-list button[aria-pressed="true"] { background: #CEFA50d9; border-color: #687c23; box-shadow: inset 0 1px 0 #fff9,0 2px 12px #35431f26; }
.company-list button:hover { border-color: #687c23; }
.company-list button small, .company-list button[aria-pressed="true"] small { color: #3b472e; }
.company-list button img { filter: none; object-fit: contain; }
.headline { gap: 6px; text-shadow: 0 1px 8px #fff8; }
.headline strong { font-size: clamp(52px,5.4vw,80px); font-weight: 500; line-height: 1.05; }
.headline p:not(.eyebrow) { color: #35412e; }
.delta-positive { color: #21642d; }
.delta-negative { color: #b13a30; }
#scale-change { max-width: 42ch; font-size: 14px; font-weight: 700; }
.metric, .hint { text-shadow: 0 1px 6px #fff9; }
.controls { bottom: 60px; }
.company-list button { min-height: 60px; padding: 10px 14px; }
.lower { margin-top: 12px; }
.maker-footer { position: absolute; z-index: 4; inset: auto var(--page-gutter) 14px; padding: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; font: 500 13px/1.4 Satoshi,sans-serif; color: #37422f; }
.maker-link { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; min-height: 32px; }
.maker-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.maker-link svg { width: 13px; height: 13px; fill: currentColor; }
@media (max-width: 700px) {
  .viewport { height: 100svh; min-height: 760px; }
  .controls { bottom: 58px; }
  .headline { top: 142px; max-width: 85%; }
  .headline strong { font-size: 46px; }
  .headline p:not(.eyebrow) { font-size: 13px; line-height: 1.4; }
  .company-list button { min-width: 130px; min-height: 56px; padding: 8px 12px; }
  .company-list button small { font-size: 13px; }
  .lower { display: grid; grid-template-columns: 138px minmax(0,1fr); gap: 8px; }
  .reference { grid-column: 1 / -1; grid-row: 1; }
  .lower .amounts { grid-column: 1; grid-row: 2; width: 100%; }
  .lower .amounts button { flex: 1; padding-inline: 5px; font-size: 13px; }
  .custom-amount { grid-column: 2; grid-row: 2; order: unset; width: 100%; min-height: 48px; padding-left: 8px; gap: 3px; }
  .custom-amount input { min-width: 0; width: 0; font-size: 16px; }
  .custom-amount button { padding-inline: 9px; font-size: 12px; min-height: 40px; }
  #sources { grid-column: 2; grid-row: 1; justify-self: end; }
  #sources summary { font-size: 13px; padding-inline: 10px; }
  .metric, .camera { bottom: calc(var(--dock-height) + 80px); }
  .metric span { font-size: 24px; }
  .metric small { font-size: 13px; max-width: 170px; }
  .maker-footer { font-size: 12px; bottom: 12px; }

  #scale-change { display: block; font-size: 13px; }
}
@media (max-width: 370px) {
  .lower { grid-template-columns: 124px minmax(0,1fr); gap: 6px; }
  .lower .amounts button { font-size: 12px; padding-inline: 3px; }
  .custom-amount button { padding-inline: 7px; }
}

.metric, .camera { bottom: calc(var(--dock-height) + 88px); }
[data-mode="compare"] .headline strong { font-size: 48px; }
@media(max-width:700px) {
  [data-mode="compare"] .headline { top: 142px; }
  [data-mode="compare"] .headline strong { font-size: 38px; }
}

.bank-barclays { color: #005b80; }
.bank-schwab { background: #126d9b; }
.bank-santander { color: #b52128; }
.bank-scotiabank { color: #b31d27; }

/* Instant lettering swaps keep the heading visible between bank treatments. */
.bank-word { transition: transform .18s ease; }

/* A restrained lime tint keeps the original logo colors legible. */
.company-list button[aria-pressed="true"] { background: #CEFA5052; border-color: #687c2380; box-shadow: inset 0 1px 0 #ffffffa6,0 2px 10px #40381e12; }
.company-list button:hover { background: #CEFA502e; border-color: #687c2370; }
.company-list button[aria-pressed="true"]:hover { background: #CEFA506b; }
@media(max-width:700px) { .mode-controls button { padding-inline: 14px; } }

@media(max-width:700px) {
  [data-mode="compare"] .headline { display: none; }
  [data-mode="compare"] .metric { top: 152px; bottom: auto; }
  [data-mode="compare"] .metric small { max-width: 285px; }
}

/* Full precision on wide screens, compact primary value on phones. */
.headline { max-width: calc(100% - 2*var(--page-gutter)); }
.headline strong, [data-mode="compare"] .headline strong { font-size: clamp(32px,3.5vw,52px); line-height: 1.12; letter-spacing: -.035em; white-space: nowrap; }
#full-value { font-variant-numeric: tabular-nums; }
@media(max-width:700px) {
  .headline strong { font-size: 46px; }
  .headline #full-value { font-size: 13px; line-height: 1.3; color: #303d28; }
  .headline #range { display: none; }
}

/* A single floating signup surface sits above the sand, without a footer band. */
.maker-footer { min-height: 48px; bottom: 12px; align-items: center; }
.maker-links { display: flex; align-items: center; gap: 24px; min-width: 0; }
.telegram-link { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; text-decoration: none; white-space: nowrap; }
.telegram-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.telegram-link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.telegram-link .external-arrow { width: 12px; height: 12px; }
.signup-inline { width: 360px; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 4px 6px 4px 16px; border: 1px solid #ffffffb3; border-radius: 28px; background: #fffaf052; box-shadow: inset 0 1px 0 #ffffffa6,0 5px 20px #5844231f; -webkit-backdrop-filter: blur(16px) saturate(125%); backdrop-filter: blur(16px) saturate(125%); }
.signup-inline:focus-within { border-color: #687c2380; background: #fffaf080; }
.signup-inline input { width: 0; min-width: 0; flex: 1; border: 0; outline-offset: 4px; background: transparent; color: #293621; font: 400 16px/1.4 Satoshi,sans-serif; }
.signup-inline input::placeholder { color: #536046; opacity: 1; }
.signup-inline button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 12px; border: 0; border-radius: 22px; background: #CEFA504d; color: #2b3921; font: 500 14px/1 Satoshi,sans-serif; }
.signup-inline button:hover { background: #CEFA5080; }
.signup-inline button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.controls { bottom: 78px; }
.metric, .camera { bottom: calc(var(--dock-height) + 106px); }
@media(max-width:700px) {
  .maker-footer { display: grid; grid-template-columns: 120px minmax(0,1fr); gap: 10px; font-size: 12px; }
  .maker-links { flex-direction: column; align-items: flex-start; gap: 2px; }
  .maker-link, .telegram-link { min-height: 22px; font-size: 12px; gap: 6px; }
  .telegram-link svg, .maker-link svg { width: 12px; height: 12px; }
  .telegram-link .external-arrow { width: 10px; height: 10px; }
  .signup-inline { width: 100%; padding-left: 10px; gap: 3px; }
  .signup-inline button { padding-inline: 8px; gap: 4px; font-size: 13px; }
  .signup-inline button svg { width: 15px; height: 15px; }
  [data-mode="compare"] .metric { bottom: auto; }
}
@media(max-width:360px) {
  .maker-footer { grid-template-columns: 116px minmax(0,1fr); gap: 8px; }
  .signup-inline .subscribe-copy { display: none; }
  .signup-inline button { width: 36px; }
}

/* Small placeholder inside the field; the accessible label remains available. */
.signup-inline { width: 430px; }
.signup-inline input::placeholder { font-size: 11px; }
.controls { bottom: calc(var(--footer-height,74px) + 30px); }
.metric,.camera { bottom: calc(var(--dock-height) + var(--footer-height,74px) + 58px); }
@media(max-width:700px) {
 .signup-inline { width: 100%; }
 .signup-inline .subscribe-copy { display: none; }
 .signup-inline button { width: 32px; padding-inline: 6px; flex-shrink: 0; }
 .maker-footer { grid-template-columns: 1fr; gap: 8px; }
 .maker-links { flex-direction: row; justify-content: space-between; }
 [data-mode="compare"] .lower .amounts,[data-mode="compare"] .custom-amount { grid-row: 1; }
 [data-mode="compare"] .metric { bottom: auto; }
}


@media(max-width:700px) { .camera button { width: 32px; min-width: 32px; padding-inline: 5px; } }
html,body { overflow-x: clip; }