:root{
  --ink:#0A0D13; --panel:#121722; --panel-hi:#161D2B; --raised:#1A2333; --hair:#242E42; --hair-2:#33405C;
  --hi:#EAEEF6; --mid:#8A94AA; --dim:#5C6578;
  --pos:#3FD6C0; --neg:#FF6B7A; --lit:#F2C14E; --blu:#6FA8FF; --vio:#B58BFF;
  --pos-soft:rgba(63,214,192,.14); --neg-soft:rgba(255,107,122,.14); --lit-soft:rgba(242,193,78,.14);
  --edge:rgba(255,255,255,.06); --edge-2:rgba(255,255,255,.03);
  --shadow-sm:0 1px 2px rgba(0,0,0,.5);
  --shadow-md:0 10px 30px -16px rgba(0,0,0,.7);
  --r-lg:14px; --r-md:11px; --r-sm:7px;
  --mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,"Cascadia Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box} html,body{margin:0}
body{background:radial-gradient(1100px 560px at 82% -10%, rgba(34,46,74,.5) 0%, transparent 62%),linear-gradient(180deg,#0C1017 0%, #090C12 46%);
  color:var(--hi); font-family:var(--sans); line-height:1.45; -webkit-font-smoothing:antialiased; padding:0 0 72px; font-variant-numeric:tabular-nums}
.wrap{max-width:1200px; margin:0 auto; padding:0 24px}
section{margin-top:44px}

/* lane nav (from equity_phase1) */
.nav{display:flex; align-items:center; gap:14px; padding:9px 24px; border-bottom:1px solid var(--hair); background:linear-gradient(180deg,rgba(12,16,23,.96),rgba(10,13,19,.86));
  font-family:var(--mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700}
.nav a{color:var(--mid); text-decoration:none; padding:3px 8px; border-radius:5px; border:1px solid transparent; transition:color .15s ease}
.nav a:hover{color:var(--hi)}
.nav .active{color:var(--pos); background:var(--pos-soft); border-color:rgba(63,214,192,.28)}
.nav .soon{color:var(--dim); opacity:.55; padding:3px 8px}

/* status rail */
.rail{padding:13px 24px; border-bottom:1px solid var(--hair); position:sticky; top:0; z-index:20;
  backdrop-filter:blur(14px) saturate(1.2); background:linear-gradient(180deg,rgba(12,16,23,.92),rgba(10,13,19,.74)); box-shadow:0 1px 0 var(--edge),var(--shadow-sm)}
.rail .max{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.brand{font-family:var(--mono); font-weight:700; letter-spacing:-.01em; font-size:15px; color:var(--hi)}
.brand .v{color:var(--pos)}
.lane{font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:#04120F; background:linear-gradient(180deg,#5ce7d3,var(--pos)); padding:4px 10px; border-radius:5px; font-weight:800; box-shadow:0 0 16px -4px rgba(63,214,192,.6),inset 0 1px 0 rgba(255,255,255,.4)}
.stamp{font-family:var(--mono); font-size:11px; color:var(--mid); margin-left:auto; text-align:right; line-height:1.5}
.stamp b{color:var(--hi); font-weight:600}

/* hero — pure-CSS candle motif behind the title */
.hero{position:relative; max-width:1200px; margin:0 auto; padding:58px 24px 34px; overflow:hidden}
.hero h1{position:relative; z-index:1; margin:0; font-size:34px; letter-spacing:-.02em; font-weight:700}
.hero .tagline{position:relative; z-index:1; margin:10px 0 0; font-family:var(--mono); font-size:11.5px; letter-spacing:.06em; color:var(--mid)}
.candles{position:absolute; inset:auto 24px 0 auto; width:min(46%,480px); height:86%; display:flex; align-items:flex-end; gap:12px; opacity:.32; pointer-events:none; mask-image:linear-gradient(90deg,transparent,#000 28%); -webkit-mask-image:linear-gradient(90deg,transparent,#000 28%)}
.candles i{position:relative; flex:1; max-width:13px; height:var(--b,40%); border-radius:2px; margin-bottom:14px}
.candles i.up{color:rgba(63,214,192,.55); background:linear-gradient(180deg,rgba(63,214,192,.55),rgba(63,214,192,.10))}
.candles i.dn{color:rgba(255,107,122,.5); background:linear-gradient(180deg,rgba(255,107,122,.5),rgba(255,107,122,.08))}
.candles i::before{content:""; position:absolute; left:calc(50% - .5px); width:1px; top:calc(-1*var(--wt,10px)); bottom:calc(-1*var(--wb,8px)); background:currentColor}

.eyebrow{font-family:var(--mono); font-size:10px; letter-spacing:.28em; text-transform:uppercase; color:var(--dim); margin:0 0 14px}
h2.sec{font-size:15px; font-weight:600; margin:0; letter-spacing:-.01em; color:var(--hi)}
.sec-row{display:flex; align-items:baseline; gap:12px; margin:0 0 16px; flex-wrap:wrap}

/* chart */
.chart-wrap{background:radial-gradient(120% 100% at 50% 0%, var(--panel-hi), var(--panel) 72%); border:1px solid var(--hair); border-radius:var(--r-lg); padding:18px 20px 20px; position:relative; box-shadow:inset 0 1px 0 var(--edge),inset 0 0 44px -22px rgba(63,214,192,.16),var(--shadow-md)}
#laneChart{height:260px}
.note{font-size:11.5px; color:var(--dim); margin-top:16px; line-height:1.6}

/* lane cards */
.lgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.lcard{background:linear-gradient(180deg,var(--panel-hi),var(--panel)); border:1px solid var(--hair); border-radius:var(--r-lg); padding:18px; box-shadow:inset 0 1px 0 var(--edge),var(--shadow-md); display:flex; flex-direction:column; gap:10px; min-height:118px}
.lhead2{display:flex; align-items:center; justify-content:space-between; gap:10px}
.lname{font-family:var(--mono); font-size:13px; font-weight:700; letter-spacing:.02em; text-transform:capitalize; color:var(--hi)}
.lname a{color:var(--pos); text-decoration:none; border-bottom:1px dashed rgba(63,214,192,.4)}
.lname a:hover{border-bottom-style:solid}
.badge{font-family:var(--mono); font-size:8.5px; letter-spacing:.12em; text-transform:uppercase; padding:3px 8px; border-radius:5px; font-weight:800; border:1px solid transparent; white-space:nowrap}
.badge.st-shadow{color:var(--lit); background:var(--lit-soft); border-color:rgba(242,193,78,.3)}
.badge.st-active{color:var(--pos); background:var(--pos-soft); border-color:rgba(63,214,192,.28)}
.badge.st-legacy{color:var(--blu); background:rgba(111,168,255,.12); border-color:rgba(111,168,255,.3)}
.badge.st-nodata{color:var(--neg); background:var(--neg-soft); border-color:rgba(255,107,122,.25); opacity:.8}
.badge.st-newborn{color:var(--vio); background:rgba(181,139,255,.1); border-color:rgba(181,139,255,.28)}
.badge.st-notbuilt{color:var(--dim); background:rgba(90,99,119,.1); border:1px dashed var(--hair-2)}
.lstat{font-family:var(--mono); font-size:12px; color:var(--hi)}
.lstat b{font-size:16px; font-weight:700}
.lwr{font-family:var(--mono); font-size:22px; font-weight:700; letter-spacing:-.02em; color:var(--pos)}
.lwr span{font-size:9.5px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); margin-left:8px}
.lnote{font-size:11px; color:var(--dim); line-height:1.55}
.lexcl{font-family:var(--mono); font-size:9.5px; letter-spacing:.04em; color:var(--dim); margin-top:auto}
.empty{text-align:center; color:var(--dim); padding:28px; font-family:var(--mono); font-size:11.5px}

/* footer */
.foot{max-width:1200px; margin:64px auto 0; padding:18px 24px 0; border-top:1px solid var(--hair);
  font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); text-align:center; line-height:1.8}

@media (max-width:880px){
  .lgrid{grid-template-columns:1fr}
  .candles{width:60%; opacity:.2}
  .stamp{margin-left:0; text-align:left}
}
@media (prefers-reduced-motion:reduce){ *{transition:none!important} }