/* Shared by /trade and /docs: the home page's own vocabulary carried onto our pages.
   Paper and the prism's light behind a big Anton title, the "a · b · c" tab line with its fading
   hairline, white cards with mono caption headers and long soft shadows, hairlines with grey dots
   joining things, and the little terminal card that plays its lines one by one. */
@font-face { font-family: Anton; src: url(/hm/anton.woff2) format('woff2'); font-weight: 400; font-display: block; }
:root {
  --bg: #fafafa; --paper: #fff; --ink: #171717; --soft: #666; --faint: #8f8f8f; --line: rgba(0, 0, 0, .08); --line-2: rgba(0, 0, 0, .14);
  --long: #0f9d58; --long-bg: #e9f7ef; --short: #e5484d; --short-bg: #fdeeee; --step: #0068d6;
  --shadow: 0 1px 1px rgba(0, 0, 0, .02), 0 8px 16px -4px rgba(0, 0, 0, .04), 0 32px 64px -16px rgba(0, 0, 0, .14);
  --display: Anton, Impact, 'Arial Narrow', sans-serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, monospace;
  --well: #f6f6f6; --hover: #f8f8f8; --sel: #f3f3f3; --chip: #eee; --sub: #fcfcfc; --ghost: #d4d4d4; --text-2: #3b3b3b;
  --glass: rgba(255, 255, 255, .72); --glass-2: rgba(255, 255, 255, .6); --veil: rgba(250, 250, 250, .6); --skel: rgba(0, 0, 0, .035);
  --band: url(/hm/paper-full.webp); --fade: 250, 250, 250;
  color-scheme: light;
}
/* Serious mode (mode.js puts .dark on <html>): the black version of everything, and the template's
   dark prism behind the page titles instead of the paper one */
:root.dark {
  --bg: #000; --paper: #0a0a0a; --ink: #ededed; --soft: #a1a1a1; --faint: #737373; --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .17);
  --long-bg: rgba(15, 157, 88, .16); --short-bg: rgba(229, 72, 77, .16); --step: #52a8ff;
  --shadow: 0 1px 1px rgba(0, 0, 0, .4), 0 8px 16px -4px rgba(0, 0, 0, .4), 0 32px 64px -16px rgba(0, 0, 0, .8);
  --well: #161616; --hover: #121212; --sel: #1a1a1a; --chip: #222; --sub: #070707; --ghost: #333; --text-2: #c7c7c7;
  --glass: rgba(10, 10, 10, .72); --glass-2: rgba(10, 10, 10, .6); --veil: rgba(0, 0, 0, .6); --skel: rgba(255, 255, 255, .05);
  --band: url(/hm/space-full.webp); --fade: 0, 0, 0;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 400 14px/1.5 Geist, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.up { color: var(--long); }
.down { color: var(--short); }

/* ---- header: the home page's, floating on the paper, frosted once the page scrolls */
.top { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; gap: 24px; height: 64px; padding: 0 24px; transition: background .25s, box-shadow .25s; }
.top.scrolled { background: rgba(var(--fade), .82); backdrop-filter: blur(12px) saturate(1.4); -webkit-backdrop-filter: blur(12px) saturate(1.4); box-shadow: 0 1px 0 var(--line); }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.brand img { width: 20px; height: 20px; object-fit: contain; }
.brand span { font: 400 21px/1 var(--display); letter-spacing: .01em; text-transform: uppercase; }
.top nav { display: flex; gap: 18px; flex: 1; font-size: 14px; }
.top nav a { color: var(--soft); text-decoration: none; transition: color .15s; }
.top nav a:hover, .top nav a[aria-current] { color: var(--ink); }
.btn { cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; background: var(--ink); color: #fff; font-weight: 500; font-size: 14px; white-space: nowrap; text-decoration: none; transition: transform .15s, background .15s, opacity .15s; }
.btn:hover { background: #333; }
.btn:active { transform: scale(.98); }
.btn.ghost { background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line-2); backdrop-filter: blur(8px); }
.btn.ghost:hover { background: #fff; }
.link { cursor: pointer; border: 0; background: none; padding: 0; color: var(--soft); text-decoration: underline; text-decoration-color: rgba(0, 0, 0, .25); text-underline-offset: 3px; }
.link:hover { color: var(--ink); text-decoration-color: var(--ink); }

/* ---- the paper band: a still of the home page's prism light, fading into the page */
.band { position: relative; isolation: isolate; padding: 112px 24px 56px; overflow: hidden; }
.band::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--band) var(--band-pos, 18% 58%) / cover no-repeat; transform: scale(1.04); animation: drift 28s ease-in-out infinite alternate; }
.band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(var(--fade), 0) 40%, rgba(var(--fade), .7) 78%, var(--bg)); }
@keyframes drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.08) translate3d(-1.2%, .6%, 0); } }
.display { margin: 0; font: 400 clamp(64px, 11vw, 148px)/.9 var(--display); letter-spacing: -.005em; text-transform: uppercase; }
.kicker { margin: 0 0 18px; font: 400 11px/1 var(--mono); text-transform: uppercase; letter-spacing: .18em; color: var(--soft); }
.kicker a { text-decoration: none; }
.kicker a:hover { color: var(--ink); }

/* ---- the tab line under the hero title: words split by dots, a hairline that fades out */
.tabline { display: flex; flex-wrap: wrap; align-items: center; gap: 0 10px; padding-bottom: 14px; margin-top: 22px; position: relative; font-size: 14px; }
.tabline::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .12) 60%, transparent); }
.tabline > :not(:first-child):not(i)::before { content: '·'; margin-right: 10px; color: var(--faint); }
.tabline a, .tabline button { cursor: pointer; border: 0; background: none; padding: 0; color: var(--faint); text-decoration: none; transition: color .15s; }
.tabline a:hover, .tabline button:hover { color: var(--ink); }
.tabline [aria-current], .tabline [aria-selected="true"] { color: var(--ink); }

/* ---- cards, as on the home page */
.card { position: relative; border-radius: 10px; background: var(--paper); box-shadow: 0 0 0 1px var(--line), var(--shadow); overflow: hidden; }
.card > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 38px; padding: 0 14px; border-bottom: 1px solid var(--line); font: 400 10px/1 var(--mono); text-transform: uppercase; letter-spacing: .16em; color: var(--faint); white-space: nowrap; }
.card > header > :first-child { color: var(--ink); }
.card > header > :last-child:not(:first-child) { overflow: hidden; text-overflow: ellipsis; }

/* ---- hairlines with dots (the joins under the home page's code card) */
.wire { position: relative; height: 1px; background: var(--line-2); }
.wire i { position: absolute; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: #b5b5b5; box-shadow: 0 0 0 3px var(--paper); }

/* ---- the terminal card: lines arrive one at a time */
.term { padding: 14px; min-height: 120px; font: 400 12px/1.9 var(--mono); }
.term p { margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: line-in .35s ease both; }
.term .cmd { color: var(--ink); }
.term .cmd::before { content: '$ '; color: var(--faint); }
.term .step { color: var(--step); }
.term .step::before { content: '✓ '; }
.term .ok { color: var(--long); }
.term .ok::before { content: '✓ '; }
.term .bad { color: var(--short); }
.term .bad::before { content: '✗ '; }
.term .wait { color: var(--faint); }
.term .wait::after { content: ''; display: inline-block; width: 7px; height: 13px; margin-left: 4px; vertical-align: -2px; background: currentColor; animation: blink 1s steps(1) infinite; }
@keyframes line-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes blink { 50% { opacity: 0; } }

/* ---- range input: a hairline track, filled in the side's colour, a small square thumb */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 22px; margin: 0; background: transparent; cursor: pointer; --fill: 50%; --tone: var(--ink); }
.range::-webkit-slider-runnable-track { height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--tone) var(--fill), #e4e4e4 var(--fill)); }
.range::-moz-range-track { height: 3px; border-radius: 2px; background: #e4e4e4; }
.range::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--tone); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6.5px; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1.5px var(--tone), 0 2px 6px rgba(0, 0, 0, .18); transition: transform .12s; }
.range::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 4px; background: #fff; box-shadow: 0 0 0 1.5px var(--tone), 0 2px 6px rgba(0, 0, 0, .18); }
.range:active::-webkit-slider-thumb { transform: scale(1.15); }

/* ---- reveal on scroll */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* ---- footer, as on the home page */
.foot { display: flex; gap: 18px; max-width: 1448px; margin: 0 auto; padding: 40px 24px 36px; font-size: 14px; color: var(--soft); }
.foot a { text-decoration: none; }
.foot a:hover { color: var(--ink); }
.foot span { margin-left: auto; font: 400 11px/1.6 var(--mono); color: var(--faint); }

:root.dark .btn { background: var(--ink); color: #000; }
:root.dark .btn:hover { background: #fff; }
:root.dark .btn.ghost { background: rgba(255, 255, 255, .06); color: var(--ink); }
:root.dark .btn.ghost:hover { background: rgba(255, 255, 255, .12); }
:root.dark .brand img { filter: invert(1); }
:root.dark .wire i { background: #555; }
:root.dark .range::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--tone) var(--fill), #2a2a2a var(--fill)); }
:root.dark .range::-moz-range-track { background: #2a2a2a; }
:root.dark .range::-webkit-slider-thumb, :root.dark .range::-moz-range-thumb { background: #111; }
:root.dark .link { text-decoration-color: rgba(255, 255, 255, .3); }

/* ---- Paper / Serious switch (mode.js), in the header */
.ls-mode { display: flex; padding: 2px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-2); font-size: 13px; font-weight: 500; }
.ls-mode button { cursor: pointer; height: 28px; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--soft); transition: background .2s, color .2s; }
.ls-mode button:hover { color: var(--ink); }
.ls-mode button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

@media (max-width: 720px) {
  /* no room beside the header's links and button: the switch floats at the bottom right */
  .ls-mode { position: fixed; right: 16px; bottom: 16px; z-index: 25; background: var(--glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2), 0 8px 24px rgba(0, 0, 0, .14); }
  .ls-mode button { padding: 0 11px; height: 30px; font-size: 12px; }
  .top { padding: 0 16px; gap: 16px; }
  .band { padding: 92px 16px 40px; }
  .foot { padding: 32px 16px; flex-wrap: wrap; }
  .foot span { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .band::before { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } }

/* ---- arrivals: the title rises out of a mask, small things slide in, the big blocks fly in from
   outside the page, as on the home page */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); }
@keyframes ls-rise { from { clip-path: inset(0 0 100% 0); transform: translateY(35%); } to { clip-path: inset(0 0 -15% 0); transform: none; } }
@keyframes ls-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes ls-left { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: none; } }
@keyframes ls-right { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: none; } }
@keyframes ls-far-left { from { opacity: 0; transform: translateX(-45vw) rotate(-2deg); } to { opacity: 1; transform: none; } }
@keyframes ls-far-right { from { opacity: 0; transform: translateX(45vw) rotate(2deg); } to { opacity: 1; transform: none; } }
@keyframes ls-pop { from { opacity: 0; transform: scale(.2) rotate(-40deg); } to { opacity: 1; transform: none; } }
.band .kicker { animation: ls-left .9s var(--ease-out) .05s both; }
.band .display { animation: ls-rise 1.1s var(--ease-out) .12s both; }
.ident img { animation: ls-pop .8s cubic-bezier(.34, 1.56, .64, 1) .35s both; }
.pname, .lede { animation: ls-up .9s var(--ease-out) .3s both; }
.band .tabline { animation: ls-left 1s var(--ease-out) .42s both; }
.pair-price { animation: ls-right 1s var(--ease-out) .3s both; }
.search { animation: ls-right 1s var(--ease-out) .5s both; }
.tape { animation: ls-far-right 1.3s var(--ease-out) .45s both; }
.desk .left > :first-child { animation: ls-far-left 1.3s var(--ease-out) .55s both; }
.desk .left > :last-child { animation: ls-far-left 1.3s var(--ease-out) .72s both; }
.desk .ticket { animation: ls-far-right 1.3s var(--ease-out) .62s both; }
.toc { animation: ls-right 1s var(--ease-out) .6s both; }
.reveal { transform: translateY(40px); transition: opacity .8s ease, transform 1.1s var(--ease-out); }
.doc section h2, .doc section > p:first-of-type { transition: opacity .8s ease, transform 1.1s var(--ease-out); }
.doc section.seen-not h2 { opacity: 0; transform: translateX(-50px); }
.doc section.seen-not > p:first-of-type { opacity: 0; transform: translateY(20px); }
.doc section > p:first-of-type { transition-delay: .12s; }
.lede.typing::after { content: ''; display: inline-block; width: .5em; height: .9em; margin-left: 4px; vertical-align: -.08em; background: var(--ink); animation: blink .8s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) {
  .band .kicker, .band .display, .ident img, .pname, .lede, .band .tabline, .pair-price, .search, .tape, .desk .left > *, .desk .ticket, .toc { animation: none !important; }
}