:root{
  --text:#eefcff; --muted:rgba(214,240,248,.72); --faint:rgba(200,235,245,.5);
  --glass:rgba(9,42,66,.58); --glass-hi:rgba(160,240,255,.10); --edge:rgba(170,240,255,.16);
  --safe-top:env(safe-area-inset-top,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:#0a2a78}
body{margin:0;color:var(--text);font:16px/1.4 -apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;min-height:100vh;
  background:linear-gradient(180deg,#3fd6e4 0,#1bb9e2 360px,#0c97dc 1000px,#0a78d2 2000px,#0b5cbf 3400px,#0c44a4 5000px,#0b3388 6800px,#0a2a74 100%);}   /* Hawaii water: lit cyan-turquoise -> azure -> cobalt -> sapphire */
a{color:inherit;text-decoration:none}

/* ---------- ambient sea (behind everything) ---------- */
#sea{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.rays{position:absolute;inset:-10% -30% 0 -30%;transform-origin:50% 0;opacity:.9}
.rays i{position:absolute;top:-5%;width:16%;height:120%;left:calc(var(--x) * 1%);
  background:linear-gradient(180deg,rgba(240,255,255,.30),rgba(200,250,255,.10) 45%,transparent 80%);
  transform:rotate(var(--r)) translateX(0);transform-origin:50% 0;filter:blur(6px);
  animation:ray var(--d) ease-in-out infinite alternate;will-change:transform,opacity}
.rays i:nth-child(1){--x:8;--r:14deg;--d:9s}
.rays i:nth-child(2){--x:24;--r:8deg;--d:12s;width:9%}
.rays i:nth-child(3){--x:40;--r:3deg;--d:10s;width:20%}
.rays i:nth-child(4){--x:57;--r:-4deg;--d:13s;width:8%}
.rays i:nth-child(5){--x:70;--r:-9deg;--d:11s}
.rays i:nth-child(6){--x:86;--r:-15deg;--d:14s;width:10%}
@keyframes ray{0%{opacity:.35;transform:rotate(var(--r)) translateX(-14px)}100%{opacity:1;transform:rotate(calc(var(--r) + 2deg)) translateX(16px)}}
.caustics{position:absolute;inset:-512px 0 0 -512px;width:calc(100% + 1024px);height:calc(55vh + 512px);
  background:url(caustics.webp) 0 0/420px 420px repeat;opacity:.26;mix-blend-mode:screen;
  -webkit-mask-image:linear-gradient(180deg,#000 30%,transparent 100%);mask-image:linear-gradient(180deg,#000 30%,transparent 100%);
  animation:caus 26s linear infinite;will-change:transform}
@keyframes caus{to{transform:translate3d(420px,420px,0)}}

/* (1) BELOW THE GLASS: jellyfish drift in the water; the whole layer screens onto the sea so a black-background video vanishes */
#jellies{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden;mix-blend-mode:screen}
#jellies .jcanvas{position:absolute;inset:0;width:100%;height:100%;display:block}
/* the 2-3 shared decoders: kept in the viewport and rendered (tiny, near-invisible) so iOS keeps them playing; the canvas draws them */
#jellies video.jsrc{position:absolute;left:0;bottom:0;width:4px;height:4px;opacity:.011;background:#000}
html:not([data-mode=wave]) #wash,html:not([data-mode=wave]) #wet{display:none}
@keyframes pulse{0%,100%{transform:scale(1,1)}35%{transform:scale(.86,1.08)}60%{transform:scale(1.05,.95)}}
@keyframes sway{0%,100%{transform:skewX(4deg)}50%{transform:skewX(-5deg) scaleY(1.04)}}

/* (2) THE GLASS PANE: one sheet over the ocean (faint reflections + edge thickness); cards are raised glass tiles on it */
#pane{position:fixed;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(115deg,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 58%,rgba(255,255,255,.045) 66%,rgba(255,255,255,0) 74%),
    radial-gradient(140% 70% at 50% -10%,rgba(190,250,255,.06),transparent 60%);
  box-shadow:inset 0 0 0 1px rgba(200,250,255,.10),inset 0 0 40px rgba(120,220,255,.10),inset 0 0 120px rgba(0,30,60,.25)}

/* ---------- content ---------- */
main{position:relative;z-index:2;max-width:720px;margin:0 auto;padding:calc(var(--safe-top) + 14px) 0 40px}
header.top{padding:6px 20px 10px;margin:0 8px;border-radius:18px;background:radial-gradient(ellipse 90% 85% at 30% 50%,rgba(3,34,96,.42),rgba(3,34,96,.20) 70%,rgba(3,34,96,0))}   /* tint behind the title on the bright lit water */
header.top .date,header.top .updated{text-shadow:0 1px 2px rgba(0,22,70,.7),0 0 8px rgba(0,22,70,.45)}
.date{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
h1{margin:2px 0 0;font-size:36px;line-height:1.05;font-weight:800;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,40,70,.35)}
.updated{margin-top:4px;font-size:13px;color:var(--muted)}

.markets{display:flex;gap:8px;overflow-x:auto;padding:6px 20px 12px;scrollbar-width:none}
.markets::-webkit-scrollbar,.chips::-webkit-scrollbar,.hero::-webkit-scrollbar{display:none}
.tick{flex:0 0 auto;min-width:96px;padding:8px 11px;border-radius:14px;background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.04)),rgba(4,36,100,.46);
  border:1px solid rgba(220,250,255,.22);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 18px rgba(0,12,30,.25);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:grid;gap:1px}
.tick .sym{font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.tick .px{font-size:16px;font-weight:700;font-variant-numeric:tabular-nums}
.tick .chg{font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.tick .up{color:#5ff2b0}.tick .dn{color:#ff8a8a}
.tick .asof{font-size:10px;color:var(--faint)}

.chips{position:sticky;top:0;z-index:5;display:flex;gap:8px;overflow-x:auto;padding:calc(var(--safe-top) + 8px) 16px 10px;
  scrollbar-width:none;background:linear-gradient(180deg,rgba(8,66,140,.80),rgba(8,66,140,.52));
  -webkit-backdrop-filter:blur(16px) saturate(140%);backdrop-filter:blur(16px) saturate(140%);border-bottom:1px solid rgba(160,240,255,.10)}
.chip{flex:0 0 auto;padding:7px 14px;border-radius:999px;font-size:14px;font-weight:600;color:#dffcf7;
  background:linear-gradient(180deg,rgba(150,255,235,.16),rgba(120,220,230,.07));border:1px solid rgba(170,255,240,.24);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);transition:background .25s,color .25s}
.chip.on{background:color-mix(in srgb,var(--c) 70%,#fff 0%);color:#04223a;border-color:transparent}

h2.sec{display:flex;align-items:center;gap:10px;margin:26px 20px 12px;font-size:24px;font-weight:800;letter-spacing:-.01em}
h2.sec .bar{width:5px;height:22px;border-radius:3px;background:var(--c,#7ff);box-shadow:0 0 12px var(--c,#7ff)}
.top-sec{--c:#9ffcf0}
section{scroll-margin-top:62px}

.hero{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 20px;scroll-padding:0 20px}
.slide{position:relative;flex:0 0 86%;max-width:560px;aspect-ratio:4/5;border-radius:22px;overflow:hidden;scroll-snap-align:start;
  background:#0a3b5c;border:1px solid rgba(220,250,255,.25);box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 38px rgba(0,15,35,.5)}
.slide::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.18),transparent 30%);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 0 0 1px rgba(255,255,255,.12)}
.slide img,.slide .ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.slide .ph{background:radial-gradient(120% 90% at 20% 10%,color-mix(in srgb,var(--c) 70%,#fff 10%),#063457 70%)}
.slide .shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 35%,rgba(2,24,44,.55) 60%,rgba(2,18,36,.94))}
.slide .cap{position:absolute;left:0;right:0;bottom:0;padding:18px}
.kicker{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--c)}
.slide h2{margin:6px 0 8px;font-size:24px;line-height:1.15;font-weight:800;letter-spacing:-.01em}
.dots{display:flex;justify-content:center;gap:6px;padding:12px 0 0}
.dots i{width:6px;height:6px;border-radius:50%;background:rgba(200,240,255,.3);transition:all .3s}
.dots i.on{width:18px;border-radius:3px;background:#bffaf0}

.card{position:relative;display:flex;margin:0 16px 14px;border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(160deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,.04) 38%,rgba(150,225,255,.05) 100%),rgba(4,38,104,.27);
  -webkit-backdrop-filter:blur(1px) saturate(115%) brightness(1.04);backdrop-filter:blur(1px) saturate(115%) brightness(1.04);
  border:1px solid rgba(220,250,255,.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),          /* bright top specular edge */
    inset 1px 0 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(120,210,255,.22),         /* refraction tint on the lower edge */
    inset 0 0 18px rgba(140,230,255,.10),         /* edge thickness glow */
    0 1px 0 rgba(255,255,255,.06),
    0 14px 34px rgba(0,12,32,.38),0 2px 6px rgba(0,12,32,.25);
  transition:transform .15s}
.card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;border-radius:inherit;   /* faint reflection sweep */
  background:linear-gradient(118deg,rgba(255,255,255,.14) 0%,rgba(255,255,255,.03) 18%,transparent 34%,transparent 70%,rgba(255,255,255,.05) 82%,transparent 92%)}
.card::after{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;pointer-events:none;     /* crisp specular highlight line */
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95) 18%,rgba(255,255,255,.55) 60%,transparent)}
.card .body,.card .thumb{position:relative;z-index:1}
.card .body{background:radial-gradient(ellipse 75% 70% at 45% 50%,rgba(2,22,72,.36),rgba(2,22,72,.17) 70%,rgba(2,22,72,0))}   /* darker tint just behind the text, not blur */
.card h3,.slide h2,h1,h2.sec{text-shadow:0 1px 2px rgba(0,22,70,.65),0 0 10px rgba(0,22,70,.4)}
.card p,.card .meta{text-shadow:0 1px 2px rgba(0,22,70,.65),0 0 8px rgba(0,22,70,.35)}
.card:active{transform:scale(.985)}
.card.big{flex-direction:column}
.card.big .thumb{aspect-ratio:16/9;width:100%}
.card .thumb{position:relative;overflow:hidden;background:#0b3a58;box-shadow:0 0 0 1px rgba(255,255,255,.14),0 6px 14px rgba(0,10,30,.3)}
.card .thumb img,.card .thumb .ph{display:block;width:100%;height:100%;object-fit:cover}
.ph{background:radial-gradient(120% 120% at 25% 15%,color-mix(in srgb,var(--c) 75%,#fff 8%),color-mix(in srgb,var(--c) 25%,#04233d) 75%)}
.card .body{padding:14px 16px 16px;min-width:0}
.card.row{align-items:stretch}
.card.row .body{flex:1;padding:13px 12px 14px 16px}
.card.row .thumb{flex:0 0 108px;margin:13px 13px 13px 0;border-radius:14px;height:108px}
.card h3{margin:5px 0 6px;font-size:19px;line-height:1.22;font-weight:750;letter-spacing:-.01em}
.card.big h3{font-size:22px}
.card.row h3{font-size:17px}
.card p{margin:0;font-size:15px;line-height:1.42;color:rgba(226,246,252,.82)}
.card.row p{font-size:14px;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:6px;align-items:center;font-size:12.5px;color:var(--faint);white-space:nowrap;overflow:hidden}
.meta .src{font-weight:750;color:var(--c,#9ff);text-transform:uppercase;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis}
.slide .meta{color:rgba(225,245,255,.8)}
.slide .meta .src{color:#fff}
footer{margin:30px 22px 0;font-size:12px;color:var(--faint);text-align:center;line-height:1.6}

/* ---------- wave wash overlay (top layer, never interactive) ---------- */
#wash{position:fixed;inset:0;z-index:20;pointer-events:none;overflow:hidden;contain:strict;mix-blend-mode:screen}   /* foam-on-black footage + sheet screen onto the page */
#wash .wcanvas{position:absolute;inset:0;width:100%;height:100%}
#wash video.wfoam{position:absolute;left:0;top:0;opacity:0;will-change:transform,opacity;object-fit:fill}
#dbg{position:fixed;left:6px;bottom:6px;z-index:99;margin:0;padding:6px 8px;font:11px/1.35 ui-monospace,Menlo,monospace;color:#bff;background:rgba(0,0,0,.7);border-radius:8px;pointer-events:none;white-space:pre}
#wet{position:fixed;inset:0;z-index:19;pointer-events:none;width:100%;height:100%}
#wash .wsprite{position:absolute;inset:0;background-repeat:no-repeat;opacity:.9;will-change:background-position;display:none}
.sheet{position:absolute;left:-6%;width:112%;top:0;height:170vh;will-change:transform,opacity;transform:translate3d(0,-175vh,0)}
.sheet .water{position:absolute;inset:0 0 80px 0;opacity:var(--a,.3);
  background:linear-gradient(180deg,rgba(0,90,170,0) 0%,rgba(10,120,200,.35) 35%,rgba(30,170,225,.75) 78%,rgba(120,230,250,.95) 100%)}
.sheet .glint{position:absolute;inset:0 0 80px 0;opacity:calc(var(--a,.3) * .9);mix-blend-mode:screen;
  background:url(caustics.webp) 0 0/300px 300px repeat;
  -webkit-mask-image:linear-gradient(180deg,transparent 20%,#000 90%);mask-image:linear-gradient(180deg,transparent 20%,#000 90%);
  animation:glint 2.4s linear infinite}
@keyframes glint{to{background-position:60px 300px}}
.sheet .refract{position:absolute;left:0;right:0;bottom:30px;height:90px;
  -webkit-backdrop-filter:blur(1.6px) saturate(1.35) brightness(1.08);backdrop-filter:blur(1.6px) saturate(1.35) brightness(1.08);
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 40%,#000 70%,transparent)}
.sheet svg.lip{position:absolute;left:0;bottom:0;width:100%;height:120px;opacity:calc(var(--a,.3) * 2.2)}
.sheet .lipwrap{position:absolute;left:0;right:0;bottom:0;height:120px;animation:lipx 2.6s ease-in-out infinite alternate}
@keyframes lipx{from{transform:translateX(-2.5%)}to{transform:translateX(2.5%)}}

/* tap ripple */
#taps{position:fixed;inset:0;z-index:21;pointer-events:none}
.ripple{position:absolute;width:70px;height:70px;margin:-35px 0 0 -35px;border-radius:50%;
  border:1.5px solid rgba(200,250,255,.55);box-shadow:0 0 10px rgba(160,240,255,.35),inset 0 0 8px rgba(160,240,255,.25);
  animation:rip .7s ease-out forwards}
@keyframes rip{from{transform:scale(.15);opacity:.8}to{transform:scale(1);opacity:0}}

@media (min-width:700px){.slide{flex-basis:62%}h1{font-size:44px}}
@media (prefers-color-scheme:light){ /* the ocean theme is intentionally dark; keep a touch lighter glass for light-mode users */
  :root{--glass:rgba(10,52,80,.55)}
}
@media (prefers-reduced-motion:reduce){
  .rays i,.caustics,.sheet .glint,.sheet .lipwrap{animation:none!important}
  #jellies,#wash,#wet{display:none}
}