@charset "utf-8";
/* ORCA APEX $OA
   Black and white. Oswald display, Geist body, Geist Mono for anything on chain.
   The page descends. Every screen is a little deeper than the last. */

/* ------------------------------------------------------------------ fonts */
@font-face{font-family:"Oswald";src:url("../fonts/oswald-var.woff2") format("woff2-variations");font-weight:200 700;font-display:swap;font-style:normal}
@font-face{font-family:"Geist";src:url("../fonts/geist-var.woff2") format("woff2-variations");font-weight:100 900;font-display:swap;font-style:normal}
@font-face{font-family:"Geist Mono";src:url("../fonts/geist-mono-var.woff2") format("woff2-variations");font-weight:100 900;font-display:swap;font-style:normal}

/* ----------------------------------------------------------------- tokens */
:root{
  color-scheme:dark;
  --abyss:#000000;
  --ink:#05070A;
  --steel:#0C1116;
  --paper:#FAFAF8;
  --fog:#E4E8E9;
  --grey:#8B959B;
  --grey-dim:#5C666C;

  --accent:#00E5FF;         /* bioluminescence. live numbers only */
  --accent-dim:#0A93A6;
  --up:#3BF0A6;
  --down:#FF4D3D;

  --line:rgba(255,255,255,.14);
  --line-soft:rgba(255,255,255,.07);
  --line-dark:rgba(5,7,10,.16);

  --f-display:"Oswald","Oswald Fallback",Impact,"Haettenschweiler","Arial Narrow Bold",sans-serif;
  --f-body:"Geist","Geist Fallback",Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --f-mono:"Geist Mono","Geist Mono Fallback",ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;

  --gutter:clamp(20px,5vw,72px);
  --maxw:1360px;
  --readw:none;

  --dive-bg:#F2F4F3;
  --tone-fg:#FAFAF8;
  --tone-mute:#8B959B;
  --tone-line:rgba(255,255,255,.14);

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ------------------------------------------------------------------ reset */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--abyss);color:var(--tone-fg);
  font-family:var(--f-body);font-size:17px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:var(--accent);color:#000}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:0}

/* ------------------------------------------------------- the water column */
#dive-bg{
  position:fixed;inset:0;z-index:-3;
  background:var(--dive-bg);
  transition:background-color .18s linear;
}
#dive-canvas{position:fixed;inset:0;z-index:-2;pointer-events:none;opacity:.9}
/* Light from above. Strong near the surface, gone by the abyss. */
#dive-veil{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(130% 62% at 50% -16%,
      rgba(196,232,240,calc(.30 * (1 - var(--depth-p,0)))),
      transparent 64%),
    radial-gradient(150% 100% at 50% 122%, rgba(0,0,0,.55), transparent 56%);
}
/* film grain, fixed, never scrolls with content */
#grain{
  position:fixed;inset:-160px;z-index:0;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 7s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}16%{transform:translate(-3%,-4%)}32%{transform:translate(4%,-2%)}
  48%{transform:translate(-2%,4%)}64%{transform:translate(3%,3%)}80%{transform:translate(-4%,1%)}100%{transform:translate(0,0)}
}

/* cursor bioluminescence */
#glow{
  position:fixed;top:0;left:0;width:520px;height:520px;margin:-260px 0 0 -260px;
  z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(circle, rgba(0,229,255,.13), rgba(0,229,255,.045) 34%, transparent 68%);
  transition:opacity .5s var(--ease);will-change:transform;
}
body.pointer-live #glow{opacity:1}

/* ---------------------------------------------------------------- layout */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
/* The depth gauge is fixed to the right edge. Reserve its lane so content never
   runs underneath it on mid width screens. */
@media (min-width:961px){.wrap{padding-right:calc(var(--gutter) + 54px)}}
.wrap-narrow{max-width:960px}
/* Full bleed chrome. The header and footer run edge to edge on the gutter
   alone, with no max width and no depth gauge lane, so they line up with each
   other at every viewport instead of the footer sitting narrower. */
.wrap-full{max-width:none;margin-inline:0;padding-inline:var(--gutter)}
@media (min-width:961px){.wrap-full{padding-right:var(--gutter)}}
main{position:relative;z-index:1}
section{position:relative}
.band{padding-block:clamp(66px,8.4vw,116px)}
.band-tight{padding-block:clamp(44px,5.6vw,76px)}
.rule{height:1px;background:var(--tone-line);border:0;margin:0}

/* tone: sections declare their own contrast so text is never at the mercy
   of the interpolated background behind it */
.tone-dark{--tone-fg:#FAFAF8;--tone-mute:#8B959B;--tone-line:rgba(255,255,255,.14);color:var(--tone-fg)}
.tone-light{--tone-fg:#05070A;--tone-mute:#5C666C;--tone-line:rgba(5,7,10,.16);color:var(--tone-fg)}
.tone-light ::selection{background:#05070A;color:#fff}

/* ---------------------------------------------------------------- header */
.hdr{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;gap:24px;
  padding:14px var(--gutter);
  transition:background-color .35s var(--ease),border-color .35s var(--ease),padding .35s var(--ease);
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(0,0,0,.72);
  -webkit-backdrop-filter:saturate(120%) blur(14px);backdrop-filter:saturate(120%) blur(14px);
  border-bottom-color:var(--line-soft);padding-block:10px;
}
.hdr .brand{display:flex;align-items:center;flex:0 0 auto}
.hdr .brand img{height:clamp(40px,4.6vw,58px);width:auto;transition:height .35s var(--ease)}
.hdr.stuck .brand img{height:clamp(34px,3.6vw,46px)}
/* The hero carries its own dark scrim, so the white lockup is correct on every
   page and at every scroll position. The light lockup stays available for any
   surface that is genuinely pale. */
.brand-dark{display:block}
.brand-light{display:none}
.hdr.on-light .brand-dark{display:none}
.hdr.on-light .brand-light{display:block}
.hdr.on-light .nav a:not(.btn){color:rgba(5,7,10,.72)}
.hdr.on-light .nav a:not(.btn):hover,
.hdr.on-light .nav a:not(.btn)[aria-current="page"]{color:#05070A}
.hdr.on-light .nav a[aria-current="page"]::after{background:#05070A}
.hdr.on-light .burger span{background:#05070A}

.nav{display:flex;align-items:center;gap:clamp(14px,1.7vw,28px);margin-left:auto}
.nav a{
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:rgba(250,250,248,.66);position:relative;padding-block:6px;transition:color .2s
}
.nav a:hover,.nav a[aria-current="page"]{color:#fff}
.nav a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff
}
.nav .btn-buy{margin-left:6px}

.burger{display:none;width:42px;height:34px;margin-left:auto;position:relative;z-index:70}
.burger span{position:absolute;left:9px;right:9px;height:2px;background:#fff;transition:transform .3s var(--ease),opacity .2s}
.burger span:nth-child(1){top:11px}
.burger span:nth-child(2){top:17px}
.burger span:nth-child(3){top:23px}
body.menu-open .burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu-open .burger span:nth-child(2){opacity:0}
body.menu-open .burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* Names only, at a size that reads as a menu rather than a poster. Solid
   black so nothing from the page shows through behind it. */
.drawer{
  position:fixed;inset:0;z-index:55;background:#000;
  display:flex;flex-direction:column;
  padding:calc(var(--gutter) + 62px) var(--gutter) calc(var(--gutter) + 8px);
  opacity:0;visibility:hidden;overflow-y:auto;
  transition:opacity .28s var(--ease),visibility .28s
}
body.menu-open .drawer{opacity:1;visibility:visible}
.drawer-nav{display:flex;flex-direction:column;margin-top:auto}
.drawer a{
  font-family:var(--f-display);font-weight:500;font-size:clamp(23px,5.6vw,32px);line-height:1.14;
  text-transform:uppercase;letter-spacing:.012em;color:#fff;padding-block:15px;
  border-bottom:1px solid var(--line-soft)
}
.drawer a:last-child{border-bottom:0}
.drawer .d-buy{
  color:var(--accent);border-bottom:0;margin-top:24px;
  border:1px solid var(--accent);text-align:center;padding-block:16px;font-size:clamp(18px,4.6vw,24px)
}
.drawer .d-legal{
  display:flex;gap:20px;flex-wrap:wrap;margin-top:auto;padding-top:34px
}
.drawer .d-legal a{
  font-family:var(--f-mono);font-size:10px;font-weight:400;letter-spacing:.18em;
  color:var(--grey-dim);border:0;padding:0;line-height:1.4
}
.drawer .d-legal a:hover{color:#fff}

/* ----------------------------------------------------------- depth gauge */
.gauge{
  position:fixed;right:calc(var(--gutter) * .52);top:50%;transform:translateY(-50%);
  z-index:50;pointer-events:none;display:flex;align-items:center;gap:14px;
  font-family:var(--f-mono);color:#fff;
  text-shadow:0 1px 12px rgba(0,0,0,.7)
}
.gauge{transition:opacity .45s var(--ease),visibility .45s}
body.at-footer .gauge{opacity:0;visibility:hidden}
.gauge-read{text-align:right;line-height:1.1}
.gauge-m{font-size:15px;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums;opacity:.92}
.gauge-m b{font-weight:600}
.gauge-m i{font-style:normal;font-size:10px;letter-spacing:.18em;opacity:.66;margin-left:3px}
.gauge-zone{font-size:9px;letter-spacing:.24em;text-transform:uppercase;opacity:.72;margin-top:5px}
.gauge-bar{position:relative;width:1px;height:min(46vh,320px);background:rgba(255,255,255,.24)}
.gauge-fill{position:absolute;top:0;left:0;width:1px;background:#fff;height:0}
.gauge-tick{position:absolute;left:-4px;width:9px;height:1px;background:rgba(255,255,255,.4)}
.gauge-dot{
  position:absolute;left:-2.5px;width:6px;height:6px;background:var(--accent);
  border-radius:50%;top:0;box-shadow:0 0 12px rgba(0,229,255,.9)
}
/* mobile: gauge becomes a hairline progress bar under the header */
.gauge-mini{
  position:fixed;top:0;left:0;right:0;height:2px;z-index:61;background:transparent;display:none
}
.gauge-mini i{display:block;height:2px;width:0;background:var(--accent);box-shadow:0 0 10px rgba(0,229,255,.7)}

/* ------------------------------------------------------------ typography */
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;text-transform:uppercase;margin:0;
  letter-spacing:.004em;line-height:.94;text-wrap:balance}
.h-xxl{font-size:clamp(52px,12.5vw,196px);font-weight:600;line-height:.86;letter-spacing:-.008em}
.h-xl{font-size:clamp(40px,7.4vw,104px);line-height:.9}
.h-l{font-size:clamp(31px,4.6vw,62px);line-height:.94}
.h-m{font-size:clamp(23px,2.5vw,34px);line-height:1.02}
.h-s{font-size:clamp(17px,1.5vw,21px);line-height:1.12;letter-spacing:.02em}

.eyebrow{
  font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.26em;text-transform:uppercase;
  color:var(--tone-mute);display:flex;align-items:center;gap:12px;margin:0 0 22px
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;opacity:.5;flex:0 0 auto}
.eyebrow.no-rule::before{display:none}

.dek{
  font-size:clamp(17px,1.65vw,21px);line-height:1.58;color:var(--tone-mute);
  max-width:none;margin:20px 0 0;text-wrap:pretty
}
/* A lead paragraph inside running prose needs its own space underneath, or it
   collides with the paragraph after it. */
.prose .dek{margin-bottom:1.15em}
.prose .dek+p{margin-top:0}
.dek strong{color:var(--tone-fg);font-weight:500}
p{margin:0 0 1.05em;max-width:var(--readw);text-wrap:pretty}
.prose p:last-child{margin-bottom:0}
.prose a:not(.btn){
  color:inherit;border-bottom:1px solid rgba(0,229,255,.5);
  transition:border-color .2s,color .2s
}
.prose a:not(.btn):hover{color:var(--accent);border-bottom-color:var(--accent)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.lead{font-size:clamp(19px,2.1vw,26px);line-height:1.44;font-weight:400;max-width:none}

/* --------------------------------------------------------------- buttons */
.btn{
  display:inline-flex;align-items:center;gap:11px;
  font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.19em;text-transform:uppercase;
  padding:15px 26px;border:1px solid currentColor;background:transparent;color:var(--tone-fg);
  position:relative;overflow:hidden;transition:color .34s var(--ease);white-space:nowrap
}
.btn::before{
  content:"";position:absolute;inset:0;background:currentColor;
  transform:translateY(101%);transition:transform .42s var(--ease-out);z-index:0
}
.btn:hover::before{transform:translateY(0)}
.btn>*{position:relative;z-index:1}
.btn:hover{color:var(--tone-fg)}
.tone-dark .btn:hover span{color:#000}
.tone-light .btn:hover span{color:#fff}
.btn .arw{transition:transform .34s var(--ease)}
.btn:hover .arw{transform:translateX(4px)}

.btn-solid{background:var(--tone-fg);color:#000;border-color:var(--tone-fg)}
.tone-light .btn-solid{color:#fff}
.btn-solid::before{background:var(--accent)}
.btn-solid:hover span{color:#000 !important}

.btn-accent{border-color:var(--accent);color:var(--accent)}
.btn-accent::before{background:var(--accent)}
.btn-accent:hover span{color:#000 !important}

.btn-sm{padding:10px 17px;font-size:11px;letter-spacing:.16em}
.btn-row{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px;align-items:center}

/* ------------------------------------------------------------------ hero */
.hero{
  position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  padding-top:120px;overflow:clip;isolation:isolate
}
.hero-media{position:absolute;inset:0;z-index:-1;overflow:hidden}
.hero-plate{position:absolute;inset:0;will-change:transform;transform:scale(1.13) translate3d(2.8%,0,0)}
.hero-plate picture,.hero-plate img{position:absolute;inset:0;width:100%;height:100%}
.hero-plate img{object-fit:cover;object-position:50% 42%}
/* The live water. Redraws the lower half of the photograph band by band with a
   travelling wave, so the surface actually moves and catches light. Masked at
   the top so the seam against the still photograph is invisible. */
.hero-water{
  position:absolute;left:0;width:100%;pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 100%)
}
/* Sinking. As the page scrolls the whole hero drowns toward the water column. */
.hero-sink{
  position:absolute;inset:0;pointer-events:none;opacity:var(--hero-sink,0);
  background:linear-gradient(180deg,
    rgba(2,7,11,.22) 0%, rgba(2,7,11,.58) 42%, rgba(2,7,11,.88) 74%, #030A11 100%)
}
/* Two scrims. The raking one darkens the side the type sits on so white and
   cyan hold their contrast; the vertical one walks the photograph down into
   the water column below it. */
.hero-scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    linear-gradient(103deg,
      rgba(2,5,9,.90) 0%, rgba(2,5,9,.68) 27%, rgba(2,5,9,.22) 54%, rgba(2,5,9,0) 74%),
    linear-gradient(180deg,
      rgba(2,5,9,.48) 0%, rgba(2,5,9,.14) 24%, rgba(2,5,9,.40) 58%,
      rgba(2,5,9,.88) 86%, #10242E 100%)
}
@media (max-width:860px){
  .hero-scrim{
    background:linear-gradient(180deg,
      rgba(2,5,9,.72) 0%, rgba(2,5,9,.44) 28%, rgba(2,5,9,.58) 58%,
      rgba(2,5,9,.93) 86%, #10242E 100%)
  }
  .hero-plate img{object-position:56% 38%}
}
/* light shafts on the surface */
.caustics{
  position:absolute;inset:-20% -10% 40%;z-index:-1;pointer-events:none;opacity:.24;
  background:
    repeating-linear-gradient(104deg, rgba(255,255,255,.5) 0 2px, transparent 2px 46px),
    repeating-linear-gradient(76deg, rgba(255,255,255,.36) 0 1px, transparent 1px 68px);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 38%,transparent 74%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.5) 38%,transparent 74%);
  filter:blur(1.4px);
  animation:shafts 19s ease-in-out infinite alternate
}
@keyframes shafts{
  0%{transform:translate3d(-2%,0,0) skewX(0deg)}
  50%{transform:translate3d(1.5%,-1%,0) skewX(1.2deg)}
  100%{transform:translate3d(3%,.6%,0) skewX(-1deg)}
}

.hero-inner{position:relative;padding-bottom:clamp(40px,7vh,86px)}

.hero h1{margin:0}
.hero .ticker-sym{
  display:inline-flex;align-items:baseline;gap:.32em;font-family:var(--f-mono);font-weight:600;
  font-size:clamp(15px,1.6vw,20px);letter-spacing:.2em;color:var(--accent);margin:0 0 20px
}
.hero .ticker-sym s{text-decoration:none;color:rgba(250,250,248,.5)}
.hero-claim{
  font-family:var(--f-display);font-weight:500;text-transform:uppercase;
  font-size:clamp(34px,6.4vw,92px);line-height:.94;letter-spacing:.002em;margin:0;max-width:none
}
.hero-claim em{font-style:normal;color:var(--accent)}
.hero-sub{max-width:52ch;color:rgba(250,250,248,.74);margin-top:22px;font-size:clamp(16px,1.5vw,19px)}

.waterline{
  position:relative;display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:14px 0;border-top:1px solid var(--line);margin-top:clamp(32px,6vh,60px);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(250,250,248,.56)
}
.scroll-cue{display:flex;align-items:center;gap:10px}
.scroll-cue i{
  display:block;width:1px;height:34px;background:linear-gradient(180deg,var(--accent),transparent);
  animation:cue 2.1s var(--ease) infinite
}
@keyframes cue{0%{transform:scaleY(.2);transform-origin:top;opacity:0}
  40%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}

/* ---------------------------------------------------------- live marquee */
.tape{
  position:relative;border-block:1px solid var(--line);overflow:hidden;
  background:rgba(0,0,0,.6);z-index:2
}
.tape-track{display:flex;width:max-content;animation:tape 46s linear infinite;will-change:transform}
.tape:hover .tape-track{animation-play-state:paused}
@keyframes tape{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tape-item{
  display:flex;align-items:center;gap:10px;padding:12px 22px;flex:0 0 auto;
  font-family:var(--f-mono);font-size:12px;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(250,250,248,.56);border-right:1px solid var(--line-soft)
}
.tape-item b{color:#fff;font-weight:500;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.tape-item .val-accent{color:var(--accent)}
.tape-item svg{opacity:.5}
.live-dot{
  width:6px;height:6px;border-radius:50%;background:var(--accent);flex:0 0 auto;
  box-shadow:0 0 0 0 rgba(0,229,255,.6);animation:pulse 2.4s infinite
}
.live-dot.is-stale{background:var(--grey);animation:none;box-shadow:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(0,229,255,.55)}70%{box-shadow:0 0 0 9px rgba(0,229,255,0)}100%{box-shadow:0 0 0 0 rgba(0,229,255,0)}}

/* ------------------------------------------------------------ stat bento */
.stats{
  display:grid;gap:1px;background:var(--tone-line);border:1px solid var(--tone-line);
  grid-template-columns:repeat(6,1fr)
}
.stat{background:rgba(0,0,0,.5);padding:26px 24px 24px;position:relative;min-height:148px;
  display:flex;flex-direction:column;justify-content:space-between;transition:background .3s}
.stat:hover{background:rgba(0,0,0,.24)}
.stat.span-2{grid-column:span 2}
.stat.span-3{grid-column:span 3}
.stat-k{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tone-mute);display:flex;align-items:center;gap:8px
}
.stat-v{
  font-family:var(--f-display);font-weight:500;font-size:clamp(27px,3.3vw,46px);line-height:1;
  letter-spacing:.005em;font-variant-numeric:tabular-nums;margin-top:14px;word-break:break-word
}
.stat-v small{font-size:.46em;letter-spacing:.1em;color:var(--tone-mute);font-family:var(--f-mono);margin-left:5px}
.stat-v sub{font-size:.56em;vertical-align:baseline;position:relative;bottom:-.12em;font-family:var(--f-mono)}
.stat-note{font-family:var(--f-mono);font-size:10px;letter-spacing:.13em;color:var(--tone-mute);
  text-transform:uppercase;margin-top:9px}
.stat.is-live .stat-v{color:var(--accent)}
.is-up{color:var(--up) !important}
.is-down{color:var(--down) !important}
.stat-src{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--tone-mute);margin-top:14px
}
.stat-src a{border-bottom:1px solid rgba(255,255,255,.2)}
.stat-src a:hover{color:var(--accent);border-color:var(--accent)}

/* odometer */
/* Every figure on the site is drawn with this, live or static.
   A slot carries an invisible copy of its own digit. That ghost hands the slot
   the exact width and, more importantly, the exact baseline of the text beside
   it, so a number can never sit a few pixels above its own label. The strip that
   actually moves is absolutely positioned inside the slot and clipped to it, so
   nothing it does can shift the line it sits on.
   The leading inside the slot is opened to 1.34 because Oswald's numerals
   overflow a 1em box and the window would shear them. The matching negative
   margin keeps the slot's contribution to the surrounding line box unchanged,
   and because everything here is baseline aligned that margin moves no ink. */
.odo,.odo-s{font-variant-numeric:tabular-nums}
.odo-d{
  position:relative;display:inline-block;vertical-align:baseline;text-align:center;
  line-height:1.34;margin-block:-.17em;font-variant-numeric:tabular-nums
}
/* transparent rather than hidden, so a text selection still copies the number */
.odo-g{display:block;color:transparent}
.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0
}
.odo-w{position:absolute;left:0;right:0;top:0;bottom:0;overflow:hidden}
/* eleven blocks, 0 to 9 and then 0 again, so a spin can wrap past nine */
.odo-w i{
  display:block;height:1100%;font-style:normal;
  transition:transform .5s var(--ease-out)
}
.odo.is-spin .odo-w i{transition:none}
.odo-w b{
  display:block;height:9.0909%;line-height:1.34;font-weight:inherit;
  font-variant-numeric:tabular-nums
}
/* the zero count in a sub cent price, e.g. $0.0(5)5307 */
sub.odo-s{
  font-size:.56em;vertical-align:baseline;position:relative;bottom:-.12em;
  line-height:1;font-family:var(--f-mono)
}

/* pre launch state */
.prelaunch .stat-v{color:var(--tone-mute);font-size:clamp(20px,2.1vw,28px)}
.notice{
  display:flex;gap:14px;align-items:flex-start;border:1px solid var(--tone-line);
  padding:18px 20px;background:rgba(0,0,0,.34);
  font-family:var(--f-mono);font-size:12px;line-height:1.62;letter-spacing:.04em;color:var(--tone-mute)
}
.notice b{color:var(--tone-fg);font-weight:500;letter-spacing:.12em;text-transform:uppercase;display:block;margin-bottom:5px;font-size:11px}
.notice.warn{border-color:rgba(255,77,61,.44)}
.notice.warn b{color:var(--down)}

/* ---------------------------------------------------- contract addresses */
.ca{
  border:1px solid var(--tone-line);background:rgba(0,0,0,.5);
  display:flex;align-items:stretch;flex-wrap:wrap
}
.ca-label{
  padding:16px 20px;border-right:1px solid var(--tone-line);display:flex;align-items:center;gap:9px;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tone-mute);
  flex:0 0 auto
}
.ca-val{
  flex:1 1 320px;min-width:0;padding:16px 20px;display:flex;align-items:center;
  font-family:var(--f-mono);font-size:clamp(11px,1.15vw,14px);letter-spacing:.02em;
  overflow-x:auto;white-space:nowrap;scrollbar-width:thin
}
.ca-val.tba{color:var(--tone-mute);letter-spacing:.2em}
.ca-copy{
  flex:0 0 auto;padding:16px 22px;border-left:1px solid var(--tone-line);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  transition:background .25s,color .25s;display:flex;align-items:center;gap:8px
}
.ca-copy:hover{background:#fff;color:#000}
.ca-copy.done{background:var(--accent);color:#000}
.ca-copy[disabled]{opacity:.4;cursor:not-allowed}

/* ------------------------------------------------------------ card grids */
.grid{display:grid;gap:1px;background:var(--tone-line);border:1px solid var(--tone-line)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
.cell{background:rgba(0,0,0,.5);padding:clamp(26px,3vw,42px);position:relative;
  display:flex;flex-direction:column;transition:background .34s var(--ease)}
.cell:hover{background:rgba(0,0,0,.2)}
.cell-n{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.2em;color:var(--accent);margin-bottom:20px;
  display:block
}
.cell h3{margin:0 0 12px}
.cell p{color:var(--tone-mute);font-size:15.5px;margin-bottom:0}
.cell .arw-link{margin-top:auto;padding-top:22px}

a.cell{color:inherit}
a.cell .arw-link{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  display:flex;align-items:center;gap:9px;color:var(--tone-fg)
}
a.cell:hover .arw-link{color:var(--accent)}
a.cell .arw-link i{display:block;width:0;height:1px;background:currentColor;transition:width .4s var(--ease-out)}
a.cell:hover .arw-link i{width:30px}

/* Long form single column. Headings and body both run the full width of the
   container rather than stopping short of it. */
.longform h2{margin:clamp(38px,4.4vw,64px) 0 14px}
.longform h2:first-child{margin-top:0}
.longform h3{margin:30px 0 10px;font-size:clamp(16px,1.5vw,20px);letter-spacing:.03em}
.longform p,.longform li{color:var(--tone-mute);max-width:none}
.longform ul{margin:0 0 1.05em;padding:0;list-style:none}
.longform li{position:relative;padding-left:24px;margin-bottom:9px}
.longform li::before{content:"";position:absolute;left:0;top:.72em;width:11px;height:1px;
  background:var(--accent);opacity:.75}
.longform strong{color:var(--tone-fg);font-weight:500}
.longform .updated{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tone-mute);border-top:1px solid var(--tone-line);padding-top:18px;margin-top:44px
}

/* An animal that is genuinely in the water rather than pasted on top of it.
   A tint layer clipped to the orca's own silhouette takes the exact colour of
   the water column at the current scroll depth, and the deeper the page sinks
   the more light the body loses. mix-blend-mode colour keeps the animal's own
   luminance and borrows only the hue of the water, which is what submerging
   something actually does to it. */
.orca-depth{position:relative;display:block;isolation:isolate}
.orca-depth img{
  width:100%;height:auto;
  filter:
    brightness(calc(1 - .34 * var(--water-mix,0)))
    contrast(calc(1 - .10 * var(--water-mix,0)))
    drop-shadow(0 20px 44px rgba(0,0,0,.55));
  transition:filter .25s linear
}
.orca-depth::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:var(--water,#12303c);
  -webkit-mask-image:var(--orca-mask);mask-image:var(--orca-mask);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  mix-blend-mode:color;
  opacity:calc(.30 + .48 * var(--water-mix,0));
  transition:opacity .25s linear,background-color .18s linear
}
/* It holds its position in the column and does not travel with the scroll. The
   tint still tracks the depth, the animal just stays where it is put. */
@media (min-width:961px){
  .split .orca-depth{align-self:center}
}
@media (prefers-reduced-motion:reduce){
  .orca-depth img{transition:none}
  .orca-depth::after{transition:none}
}

/* A photograph with no frame. The file is feathered and its darkness is
   transparent, so it dissolves straight into the live water column. */
.bleed{position:relative;display:block}
/* True cut-outs, so the animal is fully opaque and never takes a wash from the
   water column behind it. The shadow is what sits it in the water. */
.bleed img{
  width:100%;height:auto;
  filter:drop-shadow(0 22px 48px rgba(0,0,0,.65)) drop-shadow(0 0 90px rgba(0,229,255,.10))
}
/* The mark on its own, lit from behind like something in the water column. */
.markplate{
  position:relative;display:grid;place-items:center;
  padding-block:clamp(28px,5vw,66px);isolation:isolate
}
.markplate::before{
  /* Never wider than its column: a 126% glow overflowed the page on phones. */
  content:"";position:absolute;left:50%;top:48%;width:min(100%,620px);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;z-index:-1;
  background:radial-gradient(circle,
    rgba(0,229,255,.15), rgba(0,229,255,.05) 36%, transparent 68%);
  animation:beacon 7.5s var(--ease) infinite alternate
}
@keyframes beacon{
  from{opacity:.62;transform:translate(-50%,-50%) scale(.94)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1.06)}
}
.markplate img{
  width:min(78%,340px);height:auto;
  filter:drop-shadow(0 0 40px rgba(0,229,255,.24)) drop-shadow(0 0 4px rgba(0,0,0,.5))
}
@media (min-width:961px){
  .split .bleed{margin-block:-7%;transform:scale(1.08);transform-origin:50% 45%}
}

/* image plate */
.plate{position:relative;overflow:hidden;background:#000}
.plate img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease-out)}
.plate:hover img{transform:scale(1.045)}

/* split feature */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4.4vw,72px);align-items:center}
.split.rev{grid-template-columns:.95fr 1.05fr}
.split .plate{aspect-ratio:4/5;min-height:340px}

/* Allocation table. The three holdings have to visibly add up to the billion,
   which a set of separate tiles never quite does. */
/* Fixed layout, because auto handed the label column 596px of a 1162px table
   and bunched both number columns into the middle. The figures now sit on
   fixed right edges at 76% and 100%, which is what makes a set of numbers
   read as a column rather than as a crowd. */
.alloc{
  width:100%;border-collapse:collapse;margin-top:clamp(28px,3.4vw,48px);
  table-layout:fixed;font-variant-numeric:tabular-nums
}
.alloc th:first-child,.alloc td:first-child{width:44%;padding-left:0}
.alloc th:nth-child(2),.alloc td:nth-child(2){width:32%}
.alloc th:last-child,.alloc td:last-child{width:24%;padding-right:0}
.alloc caption{
  text-align:left;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tone-mute);padding-bottom:14px
}
.alloc th,.alloc td{
  text-align:right;padding:18px 20px;border-bottom:1px solid var(--tone-line);
  font-weight:400
}
.alloc thead th{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--tone-mute);padding-block:10px
}
.alloc th:first-child,.alloc thead th:first-child{text-align:left}
.alloc tbody th{font-size:15.5px;color:var(--tone-fg);line-height:1.35}
.alloc tbody td{font-family:var(--f-mono);font-size:16px;color:var(--tone-fg)}
.alloc tbody td:last-child{color:var(--tone-mute)}
.alloc tbody tr:nth-child(2) td,.alloc tbody tr:nth-child(2) th{color:var(--accent)}
.alloc tfoot th,.alloc tfoot td{
  font-family:var(--f-display);text-transform:uppercase;font-size:clamp(17px,1.7vw,22px);
  border-bottom:0;border-top:1px solid var(--tone-fg);color:var(--tone-fg);padding-top:18px
}
@media (max-width:600px){
  .alloc th,.alloc td{padding:13px 6px}
  .alloc th:first-child,.alloc td:first-child{width:38%}
  .alloc th:nth-child(2),.alloc td:nth-child(2){width:38%}
  .alloc th:last-child,.alloc td:last-child{width:24%}
  .alloc tbody th{font-size:13.5px}
  .alloc tbody td{font-size:12.5px}
  .alloc tfoot th,.alloc tfoot td{font-size:16px}
}

/* ------------------------------------------------------- the dive ladder */
.ladder{position:relative;margin-top:clamp(38px,5vw,66px)}
.ladder::before{
  content:"";position:absolute;left:11px;top:6px;bottom:6px;width:1px;
  background:linear-gradient(180deg,var(--tone-line),var(--accent) 40%,var(--tone-line));
  opacity:.5
}
.rung{position:relative;padding:0 0 clamp(40px,5.5vw,76px) clamp(46px,5vw,74px)}
.rung:last-child{padding-bottom:0}
.rung::before{
  content:"";position:absolute;left:5px;top:9px;width:13px;height:13px;border-radius:50%;
  border:1px solid var(--accent);background:#000;transition:background .4s,box-shadow .4s
}
.rung.in::before{background:var(--accent);box-shadow:0 0 16px rgba(0,229,255,.75)}
.rung-depth{
  font-family:var(--f-mono);font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:baseline;gap:12px;margin-bottom:14px
}
.rung-depth s{text-decoration:none;color:var(--tone-mute)}
.rung h3{margin:0 0 14px}
.rung p{color:var(--tone-mute);max-width:none}
.rung ul{margin:16px 0 0;padding:0;list-style:none;max-width:none}
.rung li{
  position:relative;padding-left:24px;margin-bottom:9px;color:var(--tone-mute);font-size:15.5px
}
.rung li::before{content:"";position:absolute;left:0;top:.62em;width:11px;height:1px;background:var(--accent);opacity:.8}
.rung.done li::before{background:var(--up)}
.tag{
  display:inline-block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  border:1px solid var(--tone-line);padding:5px 11px;color:var(--tone-mute);margin-left:auto
}
.tag.now{border-color:var(--accent);color:var(--accent)}
.tag.done{border-color:var(--up);color:var(--up)}

/* ---------------------------------------------------------- steps how-to */
.steps{counter-reset:s;display:grid;gap:1px;background:var(--tone-line);border:1px solid var(--tone-line)}
.step{background:rgba(0,0,0,.5);padding:clamp(26px,3vw,40px);display:grid;
  grid-template-columns:96px 1fr;gap:clamp(18px,2.4vw,38px);align-items:start}
.step-n{
  font-family:var(--f-display);font-weight:300;font-size:clamp(44px,5.4vw,78px);line-height:.82;
  color:var(--tone-line);letter-spacing:-.02em
}
.step.in .step-n{color:var(--accent);transition:color .7s var(--ease)}
.step h3{margin:0 0 11px}
.step p{color:var(--tone-mute);margin-bottom:0;font-size:15.5px}
.step .btn-row{margin-top:20px}

/* --------------------------------------------------------------- pod feed */
.feed{border:1px solid var(--tone-line);background:rgba(0,0,0,.55)}
.feed-hd{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--tone-line);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--tone-mute)
}
.feed-rows{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--tone-line)}
.feed-cell{background:rgba(0,0,0,.45);padding:22px 20px}
.feed-cell .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--tone-mute)}
.feed-cell .v{font-family:var(--f-display);font-weight:500;font-size:clamp(24px,2.6vw,36px);line-height:1;margin-top:10px;font-variant-numeric:tabular-nums}
.bar{height:3px;background:var(--tone-line);margin-top:14px;display:flex;overflow:hidden}
.bar i{display:block;height:3px;transition:width .8s var(--ease-out)}
.bar .b-buy{background:var(--up)}
.bar .b-sell{background:var(--down)}
/* Before launch there is no buy or sell split to show, so the bar stays neutral
   rather than implying a fifty fifty market that does not exist yet. */
body.is-prelaunch .bar i{background:rgba(255,255,255,.16)}
body.is-prelaunch .feed-cell .v{color:var(--tone-mute)}

/* pod counter hero */
.podcount{text-align:center;padding-block:clamp(28px,4vw,54px)}
body.is-prelaunch .podcount .n{font-size:clamp(38px,7vw,92px);color:var(--tone-mute)}
.podcount .n{
  font-family:var(--f-display);font-weight:600;font-size:clamp(64px,15vw,200px);line-height:.84;
  color:var(--accent);font-variant-numeric:tabular-nums;letter-spacing:-.01em
}
.podcount .k{font-family:var(--f-mono);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--tone-mute);margin-top:20px}

/* --------------------------------------------------------------- socials */
.socials{display:flex;flex-wrap:wrap;gap:1px;background:var(--tone-line);border:1px solid var(--tone-line)}
.social{
  flex:1 1 180px;background:rgba(0,0,0,.5);padding:24px 22px;display:flex;align-items:center;
  justify-content:space-between;gap:14px;transition:background .3s
}
.social:hover{background:var(--accent);color:#000}
.social b{font-family:var(--f-display);font-weight:500;font-size:22px;text-transform:uppercase;letter-spacing:.01em}
.social span{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;opacity:.62;display:block;margin-top:3px}
.social .arw{opacity:.5}
.social:hover .arw{opacity:1}
/* Anything waiting on the launch says so rather than looking broken. Dim the
   contents, never the tile: fading a tile whose own fill is translucent black
   makes it lighter than its live neighbours, which reads as emphasis. */
.social.soon{pointer-events:none}
.social.soon>*{opacity:.38}
.social.soon b::after,
.ftr li a.soon::after,
.btn.soon span:first-child::after{
  content:" Soon";font-family:var(--f-mono);font-size:9px;letter-spacing:.2em;
  vertical-align:super;opacity:.7
}
.ftr li a.soon,.btn.soon{pointer-events:none;opacity:.45}
.btn.soon{cursor:not-allowed}

/* ------------------------------------------------------------------- faq */
.faq{border-top:1px solid var(--tone-line)}
.faq details{border-bottom:1px solid var(--tone-line)}
.faq summary{
  list-style:none;cursor:pointer;padding:24px 44px 24px 0;position:relative;
  font-family:var(--f-display);font-weight:500;text-transform:uppercase;
  font-size:clamp(18px,2vw,26px);line-height:1.16;transition:color .25s
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--accent)}
.faq summary::after{
  content:"";position:absolute;right:6px;top:50%;width:13px;height:1px;background:currentColor;
  transition:transform .3s var(--ease)
}
.faq summary::before{
  content:"";position:absolute;right:12px;top:50%;width:1px;height:13px;background:currentColor;
  margin-top:-6px;transition:transform .3s var(--ease),opacity .3s
}
.faq details[open] summary::before{transform:rotate(90deg);opacity:0}
.faq details[open] summary{color:var(--accent)}
.faq .ans{padding:0 0 26px;color:var(--tone-mute);max-width:none}
.faq .ans p{font-size:16px}

/* --------------------------------------------------------------- related */
.related{
  display:flex;gap:clamp(20px,3vw,44px);align-items:center;flex-wrap:wrap;
  border:1px solid var(--tone-line);padding:clamp(24px,3vw,38px);background:rgba(0,0,0,.5)
}
.related .rel-body{flex:1 1 340px}
.related h3{margin:0 0 10px}
.related p{color:var(--tone-mute);margin:0;font-size:15.5px}

/* -------------------------------------------------------------- excerpts */
.excerpt-cards{display:grid;gap:1px;background:var(--tone-line);border:1px solid var(--tone-line);
  grid-template-columns:repeat(3,1fr)}

/* ---------------------------------------------------------------- footer */
.ftr{background:#000;border-top:1px solid var(--line);position:relative;z-index:3}
.ftr-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1fr;gap:clamp(20px,2.4vw,42px);
  padding-block:clamp(48px,6vw,82px)}
.ftr h4{font-family:var(--f-mono);font-size:10.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:var(--grey);margin:0 0 18px}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:11px}
.ftr li a{font-size:14.5px;color:rgba(250,250,248,.76);transition:color .2s}
.ftr li a:hover{color:var(--accent)}
.ftr-lockup{width:min(300px,64vw);margin-bottom:20px}
.ftr-note{font-size:13.5px;color:var(--grey);max-width:42ch;line-height:1.62}
.ftr-btm{
  border-top:1px solid var(--line-soft);padding-block:24px;display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grey-dim)
}
.ftr-risk{
  border-top:1px solid var(--line-soft);padding-block:26px;color:var(--grey-dim);
  font-size:12.5px;line-height:1.7;max-width:none
}
.ftr-risk b{color:var(--grey);font-weight:500}

/* --------------------------------------------------------------- reveals */
/* Scoped to .js so that if the script fails, is blocked or never loads, every
   word on the page is still visible instead of sitting at opacity zero. */
.js [data-reveal]{opacity:0;transform:translate3d(0,26px,0);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out)}
.js [data-reveal].in{opacity:1;transform:none}
[data-reveal="1"]{transition-delay:.07s}
[data-reveal="2"]{transition-delay:.14s}
[data-reveal="3"]{transition-delay:.21s}
[data-reveal="4"]{transition-delay:.28s}
[data-reveal="5"]{transition-delay:.35s}

/* The reveal mask has to sit below the baseline or it shears the tail off a Q
   or a J. Padding opens the box, the negative margin keeps the layout put. */
.mask-up{overflow:hidden;display:block;padding-bottom:.14em;margin-bottom:-.14em}
.js .mask-up>span{display:block;transform:translate3d(0,102%,0);
  transition:transform 1.05s var(--ease-out)}
.js .in .mask-up>span,.js .mask-up.in>span{transform:none}

/* ------------------------------------------------------------ responsive */
@media (max-width:1180px){
  .stats{grid-template-columns:repeat(4,1fr)}
  .stat.span-3{grid-column:span 2}
  .g-4{grid-template-columns:repeat(2,1fr)}
  .excerpt-cards{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:960px){
  .gauge{display:none}
  .gauge-mini{display:block}
  .nav{display:none}
  .burger{display:block}
  .split,.split.rev{grid-template-columns:1fr;gap:28px}
  .split .plate{aspect-ratio:16/10;min-height:0}
  .ftr-top{grid-template-columns:1fr 1fr 1fr}
  .ftr-top>:first-child{grid-column:1 / -1}
  .feed-rows{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  body{font-size:16px}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat.span-2,.stat.span-3{grid-column:span 2}
  .g-2,.g-3,.g-4,.excerpt-cards{grid-template-columns:1fr}
  .step{grid-template-columns:1fr;gap:14px}
  .step-n{font-size:40px}
  .ca-label{border-right:0;border-bottom:1px solid var(--tone-line);flex:1 1 100%}
  .ca-copy{border-left:0;border-top:1px solid var(--tone-line);flex:1 1 100%;justify-content:center}
  .hero{padding-top:96px}
  .waterline{flex-direction:column;align-items:flex-start;gap:12px}
  .ftr-top{grid-template-columns:1fr;gap:34px}
  .feed-rows{grid-template-columns:1fr}
}

/* --------------------------------------------------------- reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important
  }
  [data-reveal]{opacity:1;transform:none}
  .mask-up>span{transform:none}
  #dive-canvas,#grain,#glow,.caustics{display:none}
  .tape-track{animation:none;transform:none}
}

/* ------------------------------------------------------------------ print */
@media print{
  #dive-bg,#dive-canvas,#dive-veil,#grain,#glow,.gauge,.gauge-mini,.hdr,.drawer,.caustics{display:none !important}
  body{background:#fff;color:#000}
  .tone-dark{--tone-fg:#000;--tone-mute:#444;--tone-line:#ccc;color:#000}
  .stat,.cell,.feed,.ca,.related{background:#fff !important}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}