:root {
  color-scheme: light;
  --brand: #016B60; --brand-deep: #163A31; --brand-soft: rgba(1,107,96,.10); --brand-line: rgba(1,107,96,.22); --on-brand: #fff;
  --bg: #EAF1EE; --bg-deep: #DCE6E2; --bg-raise: #F4F8F6; --bg-70: rgba(234,241,238,.72);
  --glow-a: rgba(1,107,96,.16); --glow-b: rgba(116,200,186,.20);
  --text: #071310; --text-dim: #4E5F59; --text-faint: #5F706A;
  --up: #00796B; --down: #C41843; --warn: #7A5300; --warn-soft: rgba(154,106,0,.12);
  --rule: rgba(7,19,16,.10); --rule-strong: rgba(7,19,16,.18);
  --rail-road: rgba(1,107,96,.38); --rail-core: var(--brand); --rail-glow: rgba(1,107,96,.16);
  --hud-fill: #CFE6DF;
  --shadow: 0 2px 6px rgba(9,40,34,.06), 0 18px 48px rgba(9,40,34,.10);


  --hud: #016B5B; --hud-ink: #fff; --hud-dim: rgba(255,255,255,.82); --hud-track: rgba(255,255,255,.26);
  --banner-bg: #163A31; --banner-ink: #CFE6DF;
  --r: 2px; --r-sheet: 14px;
  --ease: cubic-bezier(.22,1,.36,1); --ease-soft: cubic-bezier(.4,0,.2,1);
  --hud-h: 52px;
  --gutter: 16px;
}
@media (min-width: 760px) { :root { --hud-h: 60px; --gutter: max(24px, 3vw); } }





:root { --fwd: -1; --flip: 1; --o-start: 100%; --o-end: 0%; }
:root[dir="ltr"] { --fwd: 1; --flip: -1; --o-start: 0%; --o-end: 100%; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --brand: #9AC7BC; --brand-soft: rgba(154,199,188,.12); --brand-line: rgba(154,199,188,.28); --on-brand: #0A1410;
    --bg: #060B0C; --bg-deep: #030607; --bg-raise: #0C1414; --bg-70: rgba(6,11,12,.72);
    --glow-a: rgba(1,107,96,.34); --glow-b: rgba(154,199,188,.10);
    --text: #E8F1EE; --text-dim: #9DB0AA; --text-faint: #8DA09A;
    --up: #4CC9B5; --down: #FF6B8A; --warn: #E3B341; --warn-soft: rgba(227,179,65,.12);
    --rule: rgba(232,241,238,.09); --rule-strong: rgba(232,241,238,.16);
    --rail-road: rgba(154,199,188,.34); --rail-glow: rgba(154,199,188,.14);
    --hud-fill: #9AC7BC;
    --shadow: 0 2px 6px rgba(0,0,0,.3), 0 18px 48px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --brand: #9AC7BC; --brand-soft: rgba(154,199,188,.12); --brand-line: rgba(154,199,188,.28); --on-brand: #0A1410;
  --bg: #060B0C; --bg-deep: #030607; --bg-raise: #0C1414; --bg-70: rgba(6,11,12,.72);
  --glow-a: rgba(1,107,96,.34); --glow-b: rgba(154,199,188,.10);
  --text: #E8F1EE; --text-dim: #9DB0AA; --text-faint: #8DA09A;
  --up: #4CC9B5; --down: #FF6B8A; --warn: #E3B341; --warn-soft: rgba(227,179,65,.12);
  --rule: rgba(232,241,238,.09); --rule-strong: rgba(232,241,238,.16);
  --rail-road: rgba(154,199,188,.34); --rail-glow: rgba(154,199,188,.14);
  --hud-fill: #9AC7BC;
  --shadow: 0 2px 6px rgba(0,0,0,.3), 0 18px 48px rgba(0,0,0,.4);
}


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: clip; }
body {
  margin: 0; min-height: 100vh; min-height: 100svh;
  background: var(--bg); color: var(--text);
  font: 400 16px/calc(1.9 * var(--lhk, 1)) var(--font-body); font-variation-settings: var(--dots-text);
  padding-top: var(--hud-h);
}
@media (min-width: 760px) { body { font-size: 17px; } }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
img, svg, canvas, video { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ol, ul, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: var(--r); }
::selection { background: var(--brand); color: var(--on-brand); }





.display { font-family: var(--font-display); font-weight: 200; font-variation-settings: var(--dots-title); line-height: 1.25; }
.hud-num { font-family: var(--font-hud); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  font-variation-settings: "ELSH" 2, "ELGR" 1; line-height: 1; }
.hud-num.round { font-variation-settings: "ELSH" 8, "ELGR" 1; }
.mono { font-family: var(--font-mono); direction: ltr; unicode-bidi: isolate; }
.kicker { font-size: 13px; font-weight: 500; color: var(--text-dim); line-height: calc(1.6 * var(--lhk, 1)); }
.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); }
.brand { color: var(--brand); }


.sep { display: inline-block; width: 1px; height: .9em; background: var(--rule-strong); vertical-align: -.1em; margin-inline: .6em; }


.w { display: inline-block; overflow: hidden; padding-block: .14em .3em; margin-block: -.14em -.3em; vertical-align: top; }
.w > span { display: inline-block; will-change: auto; }

.sr, .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }


.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 48px; padding: 0 22px; border-radius: var(--r);
  font-weight: 600; font-size: 15px; line-height: 1;
  background: var(--brand); color: var(--on-brand); border: 1px solid transparent;
  transition: transform .2s var(--ease), background-color .2s, border-color .2s, opacity .2s;
  -webkit-tap-highlight-color: transparent; user-select: none; white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; transform: none; }
.btn.line { background: var(--bg-70); color: var(--text); border-color: var(--rule-strong); }
.btn.line:hover { border-color: var(--brand-line); }
.btn.small { min-height: 36px; padding: 0 14px; font-size: 13.5px; }



.arr {
  display: inline-block; width: .86em; height: .6em; vertical-align: middle; align-self: center; overflow: hidden; text-indent: 3em; white-space: nowrap;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M17.5 6H2.4M7.4 1 2.4 6l5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 50% / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 12'%3E%3Cpath d='M17.5 6H2.4M7.4 1 2.4 6l5 5' fill='none' stroke='%23000' stroke-width='2'/%3E%3C/svg%3E") 50% / 100% 100% no-repeat;
}
.arr.dn { transform: rotate(-90deg); }

:root[dir="ltr"] .arr { scale: -1 1; }
.btn .arr, .link .arr { transition: transform .25s var(--ease); }
.btn:hover .arr, .btn:focus-visible .arr, .link:hover .arr, .link:focus-visible .arr { transform: translateX(-2px); }
.link { color: var(--brand); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: var(--brand-line); }

.wrap { width: 100%; max-width: 1180px; margin-inline: auto; padding-inline: var(--gutter); }




.orb {
  position: absolute; border-radius: 50%; pointer-events: none; aspect-ratio: 1;
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 20%),
    radial-gradient(circle at 40% 36%, #B9DBD2 0%, #6FA898 16%, #2E6D5E 40%, #1B4A3F 62%, #0E2A23 82%, #071510 100%);
  box-shadow: inset -48px -76px 140px rgba(0,0,0,.66), inset 10px 14px 40px rgba(255,255,255,.05), 0 0 0 1px rgba(154,199,188,.08), 0 100px 220px -70px rgba(22,58,49,.55);
}
.orb::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.7) .6px, transparent 1.15px);
  background-size: 6px 6px; opacity: .22; mix-blend-mode: overlay;
  -webkit-mask-image: radial-gradient(circle at 42% 36%, #000 26%, rgba(0,0,0,.35) 58%, transparent 76%);
  mask-image: radial-gradient(circle at 42% 36%, #000 26%, rgba(0,0,0,.35) 58%, transparent 76%);
}
.orb::after {
  content: ""; position: absolute; inset: -1px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 64% 76%, rgba(154,199,188,.20), transparent 48%), radial-gradient(circle at 50% 50%, transparent 66%, rgba(0,0,0,.28) 100%);
}
:root[data-theme="dark"] .orb { background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 19%),
    radial-gradient(circle at 40% 36%, #9AC7BC 0%, #5E9A8B 16%, #245F50 40%, #163A31 62%, #0B211B 82%, #05090A 100%);
  box-shadow: inset -54px -84px 150px rgba(0,0,0,.74), inset 8px 12px 36px rgba(255,255,255,.04), 0 0 0 1px rgba(154,199,188,.07), 0 100px 220px -70px rgba(154,199,188,.2); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .orb { background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 19%),
    radial-gradient(circle at 40% 36%, #9AC7BC 0%, #5E9A8B 16%, #245F50 40%, #163A31 62%, #0B211B 82%, #05090A 100%);
  box-shadow: inset -54px -84px 150px rgba(0,0,0,.74), inset 8px 12px 36px rgba(255,255,255,.04), 0 0 0 1px rgba(154,199,188,.07), 0 100px 220px -70px rgba(154,199,188,.2); } }

.orb-mini { position: relative; display: inline-block; width: 12px; height: 12px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 36% 30%, #D6EBE4 0%, #9AC7BC 30%, #2E6D5E 70%, #163A31 100%);
  box-shadow: 0 0 0 1px rgba(154,199,188,.35), 0 0 10px rgba(154,199,188,.45); }


#ball-layer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 30; visibility: hidden; }
#ball-layer.on { visibility: visible; }
#ball { position: absolute; left: 0; top: 0; max-width: none; will-change: transform; }

#ball.orb-css, #ball.orb-fallback {
  background:
    radial-gradient(circle at 36% 30%, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 16%),
    radial-gradient(circle at 42% 38%, #9AC7BC 0%, #5E9A8B 14%, #245F50 30%, #163A31 38%, #0B211B 40%, transparent 40.2%);
  clip-path: circle(40% at 50% 50%);
}


#toast {
  position: fixed; inset-inline: 0; bottom: max(20px, env(safe-area-inset-bottom)); margin-inline: auto; z-index: 90;
  width: fit-content; max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: var(--r);
  background: var(--banner-bg); color: var(--banner-ink); font-size: 14px; line-height: calc(1.7 * var(--lhk, 1)); box-shadow: var(--shadow);
  opacity: 0; transform: translateY(12px); transition: opacity .3s var(--ease), transform .3s var(--ease); pointer-events: none;
}
#toast.on { opacity: 1; transform: none; }

#toast.has-act { pointer-events: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 14px; }
.toast-act { min-height: 44px; margin-block: -10px; padding-inline: 4px; font-weight: 600; color: #fff;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .35em; text-decoration-color: rgba(255,255,255,.45); }
.toast-act:focus-visible { outline-color: #fff; }



@keyframes dn-failsafe { to { opacity: 1; transform: none; clip-path: none; } }
html.intro [data-intro] { opacity: 0; animation: dn-failsafe 0s 3s forwards; }

html.boot-watch #home { display: none; }

html[data-go] body { visibility: hidden; }


#view { transition: opacity .2s var(--ease-soft); }
html.leaving #view { opacity: 0; transition: opacity .12s; }
html.hop #view { opacity: 0; animation: dn-failsafe 0s 1.5s forwards; }
html.rm *, html.rm *::before, html.rm *::after { animation-duration: 0s !important; transition-duration: 0s !important; scroll-behavior: auto !important; }


::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: dn-reveal .5s var(--ease) both; }
@keyframes dn-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(150vmax at var(--vt-x, 50%) var(--vt-y, 0)); } }

@media print { body * { visibility: hidden !important; } }