/* FFN Perps: site styles. FFN Perps brand: black with the logo's cyan to blue gradient. */
:root{
  --bg:#04070a; --bg-2:#070c11; --bg-3:#0b1219;
  --ink:#f2f6f3; --soft:#93a39b; --mute:#5f6d67;
  --gold:#00E5FF; --gold-2:#8CF4FF; --gold-deep:#0A84FF;
  --perp:#3B9EFF; --perp-2:#9ACBFF; --perp-deep:#0A84FF;   /* the logo gradient runs --gold (cyan) to --perp-deep (blue); names kept from the first palette */
  --line:rgba(0,229,255,.16); --line-2:rgba(255,255,255,.08);
  --card:rgba(255,255,255,.04);
  --disp:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --body:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --pad:clamp(20px,5vw,64px);
}
*{box-sizing:border-box;margin:0;padding:0}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
html:not(.lenis){scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:#00141f}

/* film grain (cinematic night-walk cue) */
body::after{content:"";position:fixed;inset:-50%;z-index:9998;pointer-events:none;opacity:.05;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-4%)}60%{transform:translate(-4%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){body::after{animation:none}}

/* ---------- nav ---------- */
/* The black bar covers the whole header (logo sub-line included) from page load, and only tightens on scroll. */
nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;gap:24px;
  padding:18px var(--pad);transition:background .35s,border-color .35s,padding .35s;
  background:rgba(4,7,10,.94);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
nav.scrolled{background:rgba(4,7,10,.86);padding:12px var(--pad)}
nav a,nav .live{white-space:nowrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand svg{width:34px;height:34px}
.brand .wm{font-family:var(--disp);font-weight:700;letter-spacing:-.01em;font-size:1.02rem;line-height:1}
.brand .wm small{display:block;font-family:var(--mono);font-weight:500;font-size:.58rem;letter-spacing:.3em;text-transform:uppercase;color:var(--perp);margin-top:4px}
.navlinks{display:flex;gap:clamp(18px,2.2vw,30px);margin-left:auto}
.navlinks a{color:var(--soft);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .2s}
.navlinks a:hover{color:var(--ink)}
.navright{display:flex;align-items:center;gap:18px;margin-left:auto}
.navlinks + .navright{margin-left:0}
.navright .signin{color:var(--soft);text-decoration:none;font-size:.9rem;font-weight:500;white-space:nowrap}
.navright .signin:hover{color:var(--ink)}
.navcta{font-family:var(--disp);font-weight:600;font-size:.88rem;color:#00141f;background:linear-gradient(180deg,var(--gold-2),var(--gold));
  padding:10px 20px;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:0 8px 24px -8px rgba(0,229,255,.55);transition:transform .2s,box-shadow .2s}
.navcta:hover{transform:translateY(-1px);box-shadow:0 12px 30px -8px rgba(0,229,255,.7)}
.live{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--perp)}
.live i{width:7px;height:7px;border-radius:50%;background:var(--perp);animation:ping 1.8s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(59,158,255,.55)}70%{box-shadow:0 0 0 9px rgba(59,158,255,0)}100%{box-shadow:0 0 0 0 rgba(59,158,255,0)}}
/* menu: the section links fold into it below 1100px, "Log in" too on phones */
.navmenu{position:relative;display:none}
.navmenu summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line-2);border-radius:999px;color:var(--ink)}
.navmenu summary::-webkit-details-marker{display:none}
.navmenu summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.navmenu summary i,.navmenu summary i::before,.navmenu summary i::after{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;position:relative;transition:transform .2s,background .2s}
.navmenu summary i::before,.navmenu summary i::after{content:"";position:absolute;left:0}
.navmenu summary i::before{top:-5px}.navmenu summary i::after{top:5px}
.navmenu[open] summary i{background:transparent}
.navmenu[open] summary i::before{transform:translateY(5px) rotate(45deg)}
.navmenu[open] summary i::after{transform:translateY(-5px) rotate(-45deg)}
.navmenu-panel{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;display:flex;flex-direction:column;padding:8px;
  background:rgba(4,7,10,.98);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 24px 48px -16px rgba(0,0,0,.8)}
.navmenu-panel a{color:var(--soft);text-decoration:none;font-size:.95rem;font-weight:500;padding:11px 14px;border-radius:10px;white-space:nowrap}
.navmenu-panel a:hover,.navmenu-panel a[aria-current="page"]{color:var(--ink);background:rgba(255,255,255,.05)}
.navmenu-panel .m-signin{display:none;border-top:1px solid var(--line-2);margin-top:4px;padding-top:13px;border-radius:0 0 10px 10px}
@media(max-width:1199px){nav .live{display:none}}
@media(max-width:1099px){.navlinks{display:none}.navmenu{display:block}.navlinks + .navright{margin-left:auto}}
@media(max-width:560px){.navright{gap:10px}.navright .signin{display:none}.navmenu-panel .m-signin{display:block}}

/* ---------- pinned 3D hero ---------- */
#loop3d{position:relative;height:270vh;z-index:3}
.stage{position:sticky;top:0;height:100vh;overflow:hidden;isolation:isolate;background:transparent;cursor:grab;touch-action:pan-y}
.stage.dragging{cursor:grabbing}
#world{position:fixed;inset:0;z-index:0;pointer-events:none;background:
  radial-gradient(1000px 700px at 72% 40%,rgba(0,229,255,.07),transparent 60%),
  radial-gradient(800px 600px at 30% 100%,rgba(59,158,255,.05),transparent 55%),
  linear-gradient(180deg,var(--bg),var(--bg-2));transition:opacity .4s}
#l3-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1}
.stage::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(4,7,10,.75) 100%)}
/* fallback: no WebGL / reduced motion */
#loop3d.no3d{height:auto}
#loop3d.no3d #l3-canvas{display:none}
#loop3d.no3d .stage{position:relative;min-height:100vh}
#loop3d.no3d .ringfallback{display:block}
#loop3d.no3d .hero>*,#loop3d.no3d .stat{opacity:1!important;transform:none!important}
#loop3d.no3d .scrollcue,#loop3d.no3d .dragcue{display:none}
.ringfallback{display:none;position:absolute;right:-6vw;top:50%;width:min(62vw,760px);transform:translateY(-50%);opacity:.9;z-index:0}

.heropad{position:absolute;inset:0;z-index:3;display:flex;align-items:center;pointer-events:none}
.hero{width:100%;max-width:1320px;margin:0 auto;padding:0 var(--pad)}
.hero>*{pointer-events:auto;opacity:0}
.eyebrow{display:inline-flex;align-items:center;gap:12px;font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:26px}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--gold),transparent)}
.eyebrow em{font-style:normal;color:var(--soft)}
h1{font-family:var(--disp);font-weight:600;font-size:clamp(2.6rem,6.6vw,5.6rem);line-height:.96;letter-spacing:-.03em}
h1 span{display:block;white-space:nowrap}
@media(max-width:420px){h1 span{white-space:normal}}
.gold-word{background:linear-gradient(180deg,var(--gold-2),var(--gold-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.perp-word{background:linear-gradient(180deg,var(--perp-2),var(--perp-deep));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
h1 .faded{color:var(--soft);opacity:.55}
.sub{margin-top:28px;max-width:48ch;font-size:clamp(1rem,1.35vw,1.16rem);line-height:1.6;color:color-mix(in srgb,var(--ink) 74%,var(--soft))}
.actions{margin-top:36px;display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.btn{font-family:var(--disp);font-weight:600;font-size:1rem;text-decoration:none;padding:15px 30px;border-radius:999px;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;display:inline-block}
.btn-primary{color:#00141f;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 12px 34px -10px rgba(0,229,255,.6)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px -10px rgba(0,229,255,.75)}
.btn-ghost{color:var(--ink);border:1px solid rgba(255,255,255,.2)}
.btn-ghost:hover{border-color:var(--perp);color:var(--perp-2)}

.stats{position:absolute;left:0;right:0;bottom:clamp(26px,6vh,58px);z-index:4;max-width:1320px;margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px 20px 18px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 20px 50px -30px rgba(0,0,0,.9);opacity:0;transition:border-color .25s,background .25s}
.stat:hover{border-color:rgba(0,229,255,.4);background:rgba(255,255,255,.06)}
.stat .num{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,2.4vw,2rem);letter-spacing:-.01em;
  background:linear-gradient(180deg,#fff,var(--gold-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.stat:nth-child(2) .num{background:linear-gradient(180deg,#fff,var(--perp-2));-webkit-background-clip:text;background-clip:text}
.stat .lbl{margin-top:6px;font-size:.83rem;color:var(--soft);line-height:1.35}
@media(max-width:860px){
  .heropad{align-items:flex-start;padding-top:calc(74px + 5vh)}
  .sub{font-size:.95rem;max-width:40ch}
  .btn{padding:13px 22px;font-size:.94rem}
  .stats{grid-template-columns:repeat(2,1fr);gap:8px;bottom:18px}
  .stat{padding:12px 14px 11px;border-radius:12px}
  .stat .num{font-size:1.25rem}
  .stat .lbl{font-size:.72rem;margin-top:3px}
}
.credit{display:flex;width:fit-content;align-items:center;gap:10px;margin:-12px 0 28px;font-family:var(--body);font-size:.8rem;letter-spacing:.02em;color:var(--soft);text-decoration:none;transition:color .25s}
.credit img{height:26px;width:auto;filter:drop-shadow(0 0 6px rgba(0,229,255,.38)) drop-shadow(0 1px 4px rgba(0,0,0,.6))}
.credit:hover{color:var(--ink)}
@media(max-width:560px){.eyebrow em{display:none}.credit{font-size:.74rem;gap:8px}.credit img{height:22px}}
@media(max-height:720px) and (max-width:860px){.stats{display:none}}

.scrollcue,.dragcue{position:absolute;z-index:5;display:flex;align-items:center;gap:10px;color:var(--soft);font-family:var(--mono);font-size:.62rem;letter-spacing:.24em;text-transform:uppercase}
.scrollcue{left:50%;transform:translateX(-50%);bottom:26px;flex-direction:column;gap:8px}
.scrollcue .rail{width:1px;height:34px;background:linear-gradient(180deg,var(--gold),transparent);position:relative;overflow:hidden}
.scrollcue .rail::after{content:"";position:absolute;top:-40%;left:0;width:100%;height:40%;background:var(--gold-2);animation:drop 1.8s cubic-bezier(.7,0,.3,1) infinite}
@keyframes drop{0%{top:-40%}60%,100%{top:100%}}
.dragcue{right:var(--pad);bottom:26px}
.dragcue svg{width:18px;height:18px;stroke:var(--perp);fill:none;stroke-width:1.5}
@media(max-width:860px){.dragcue{display:none}.scrollcue{bottom:14px}}

/* ---------- shared section bits ---------- */
section.block{position:relative;z-index:2;padding:clamp(80px,12vh,150px) var(--pad);background:var(--bg)}
.wrap{max-width:1240px;margin:0 auto}
.k{font-family:var(--mono);font-size:.68rem;font-weight:500;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;display:flex;align-items:center;gap:12px}
.k::before{content:"";width:26px;height:1px;background:var(--gold)}
.k.perp{color:var(--perp)}.k.perp::before{background:var(--perp)}
h2{font-family:var(--disp);font-weight:600;font-size:clamp(1.9rem,4.2vw,3.3rem);line-height:1.04;letter-spacing:-.025em;max-width:22ch}
.lead{margin-top:20px;max-width:58ch;color:var(--soft);line-height:1.65;font-size:1.06rem}
h2,.lead,.feed-note{text-shadow:0 2px 22px rgba(4,7,10,.9)}  /* the stream passes behind the copy */
.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:clamp(34px,5vw,56px)}
.head .btn{padding:12px 24px;font-size:.92rem}
.rv{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.08s}.rv.d2{transition-delay:.16s}.rv.d3{transition-delay:.24s}.rv.d4{transition-delay:.32s}

/* ---------- ticker wall ---------- */
#markets{padding-top:clamp(60px,9vh,110px);background:linear-gradient(180deg,var(--bg-2),var(--bg))}
.cats{margin-top:clamp(34px,5vw,56px);display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.cat{padding:18px 18px 16px;border:1px solid var(--line-2);border-radius:14px;background:var(--card)}
.cat b{display:block;font-family:var(--disp);font-weight:600;font-size:1.1rem}
.cat span{display:block;margin-top:6px;font-size:.82rem;color:#b6c2bb;line-height:1.45}
.cat i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-bottom:12px}
@media(max-width:960px){.cats{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cats{grid-template-columns:1fr}}

/* ---------- never closes / sessions ---------- */
#always{background:var(--bg)}
.sessions{margin-top:clamp(34px,5vw,56px);display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.sess{position:relative;padding:22px 20px;border:1px solid var(--line-2);border-radius:16px;background:linear-gradient(180deg,rgba(59,158,255,.05),transparent);overflow:hidden}
.sess::before{content:"";position:absolute;inset:0;background:radial-gradient(240px 120px at 20% 0%,rgba(59,158,255,.12),transparent 70%);pointer-events:none}
.sess .city{font-family:var(--disp);font-weight:600;font-size:1.02rem}
.sess .time{margin-top:12px;font-family:var(--mono);font-size:clamp(1.5rem,2.6vw,2.1rem);letter-spacing:-.01em;color:#fff;font-variant-numeric:tabular-nums}
.sess .time small{font-size:.8rem;color:var(--soft);margin-left:6px;letter-spacing:.08em}
.sess .state{margin-top:12px;display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--perp)}
.sess .state i{width:7px;height:7px;border-radius:50%;background:var(--perp);animation:ping 1.8s infinite}
.always-row{margin-top:clamp(40px,6vw,70px);display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.why{padding:26px 24px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.why .ic{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:rgba(0,229,255,.1);border:1px solid var(--line);margin-bottom:18px}
.why .ic svg{width:20px;height:20px;stroke:var(--gold);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.why b{display:block;font-family:var(--disp);font-weight:600;font-size:1.12rem;letter-spacing:-.01em}
.why p{margin-top:8px;font-size:.92rem;color:var(--soft);line-height:1.55}
@media(max-width:960px){.sessions{grid-template-columns:repeat(3,1fr)}.always-row{grid-template-columns:1fr}}
@media(max-width:560px){.sessions{grid-template-columns:repeat(2,1fr)}}

/* ---------- the desk: glass terminal (refero glass-dashboard cue) ---------- */
#desk{background:var(--bg)}
.desk{display:grid;grid-template-columns:220px 1fr;gap:14px;padding:14px;border-radius:26px;border:1px solid var(--line-2);
  background:
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/28px 100%,
    radial-gradient(700px 400px at 80% 0%,rgba(0,229,255,.12),transparent 60%),
    radial-gradient(500px 300px at 10% 100%,rgba(59,158,255,.1),transparent 60%),
    var(--bg-3);
  box-shadow:0 60px 120px -60px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.06)}
.glass{position:relative;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.045);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 20px 40px -30px rgba(0,0,0,.8)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 40%)}
.desk-side{display:flex;flex-direction:column;gap:18px;padding:18px 14px;border-radius:18px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.03)}
.ds-brand{display:flex;align-items:center;gap:10px}
.ds-brand svg{width:30px;height:30px}
.ds-brand b{display:block;font-family:var(--disp);font-size:.92rem;font-weight:600}
.ds-brand small{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:3px}
.ds-menu{display:flex;flex-direction:column;gap:4px;flex:1}
.ds-menu span{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-radius:10px;font-size:.84rem;color:var(--soft)}
.ds-menu span em{font-style:normal;font-family:var(--mono);font-size:.62rem;color:var(--perp);background:rgba(59,158,255,.12);padding:2px 7px;border-radius:999px}
.ds-menu span.on{color:var(--ink);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.ds-foot{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--perp)}
.ds-foot i{width:7px;height:7px;border-radius:50%;background:var(--perp);animation:ping 1.8s infinite}
.desk-main{display:flex;flex-direction:column;gap:12px;min-width:0}
.desk-top{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pill{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;padding:8px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);color:var(--soft)}
.pill.gold{color:#00141f;background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:transparent;font-weight:600}
.pill.perp{color:var(--perp);border-color:rgba(59,158,255,.3)}
.pill.perp i{width:6px;height:6px;border-radius:50%;background:var(--perp);animation:ping 1.8s infinite}
.pill.ghost{margin-left:auto}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{padding:18px 18px 16px;display:flex;flex-direction:column;gap:6px}
.kpi small{font-size:.72rem;color:var(--soft);letter-spacing:.02em}
.kpi b{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,1.9vw,1.7rem);letter-spacing:-.02em;color:#fff;font-variant-numeric:tabular-nums}
.kpi em{font-style:normal;font-size:.72rem;color:var(--soft)}
.kpi em.up{color:#5EE6A8}
.kpi em.gold{color:var(--gold)}
.kpi .bar{display:block;height:4px;border-radius:999px;background:rgba(255,255,255,.08);margin-top:6px;overflow:hidden}
.kpi .bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--perp),var(--gold))}
.desk-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:12px}
.gh{display:flex;justify-content:space-between;align-items:center;padding:14px 16px 10px;font-size:.84rem;font-weight:500}
.gh .tabs{display:inline-flex;gap:4px;font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase}
.gh .tabs b,.gh .tabs i{font-style:normal;font-weight:500;padding:4px 9px;border-radius:999px;color:var(--soft)}
.gh .tabs b{color:var(--ink);background:rgba(255,255,255,.08)}
.chart svg{display:block;width:100%;height:190px;padding:0 10px}
.chart .axis{display:flex;justify-content:space-between;padding:8px 16px 14px;font-family:var(--mono);font-size:.6rem;color:var(--mute);letter-spacing:.08em}
.donut-row{display:flex;align-items:center;gap:18px;padding:6px 16px 18px}
.ring{position:relative;flex:none;width:128px;height:128px;border-radius:50%;display:grid;place-items:center;text-align:center;
  background:conic-gradient(#3EE6C9 0 calc(var(--a)*1%),#fff calc(var(--a)*1%) calc((var(--a) + var(--b))*1%),#ff8c5a calc((var(--a) + var(--b))*1%) calc((var(--a) + var(--b) + var(--c))*1%),#00E5FF calc((var(--a) + var(--b) + var(--c))*1%) 100%)}
.ring::before{content:"";position:absolute;inset:14px;border-radius:50%;background:#0d141b}
.ring b,.ring small{position:relative}
.ring b{display:block;font-family:var(--disp);font-weight:600;font-size:1.05rem}
.ring small{display:block;font-size:.62rem;color:var(--soft);margin-top:2px}
.donut ul{list-style:none;display:flex;flex-direction:column;gap:8px;flex:1}
.donut li{display:flex;align-items:center;gap:9px;font-size:.8rem;color:var(--soft)}
.donut li i{width:8px;height:8px;border-radius:50%}
.donut li b{margin-left:auto;color:var(--ink);font-weight:500;font-variant-numeric:tabular-nums}
.table table{width:100%;border-collapse:collapse;font-size:.82rem}
.table th{font-family:var(--mono);font-weight:500;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--mute);text-align:left;padding:6px 16px 10px;border-bottom:1px solid rgba(255,255,255,.08)}
.table td{padding:12px 16px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.table tr:last-child td{border-bottom:0}
.table td:first-child{color:var(--ink);font-family:var(--mono);font-size:.78rem}
.table .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:9px;vertical-align:middle;background:var(--gold)}
.table .dot.c{background:var(--perp)}.table .dot.s{background:#fff}.table .dot.x{background:#ff8c5a}
.table .long{color:#5EE6A8}.table .short{color:#ff7a7a}
.table .up{color:#5EE6A8}.table .dn{color:#ff7a7a}
.fine-center{margin-top:16px;text-align:center;font-size:.72rem;color:var(--mute)}
@media(max-width:1000px){.desk{grid-template-columns:1fr}.desk-side{display:none}.kpis{grid-template-columns:repeat(2,1fr)}.desk-grid{grid-template-columns:1fr}}
@media(max-width:560px){.kpis{grid-template-columns:1fr}.pill.ghost{display:none}.table{overflow-x:auto}.donut-row{flex-direction:column;align-items:flex-start}}

/* ---------- challenges ---------- */
#challenges{background:linear-gradient(180deg,var(--bg),var(--bg-3) 50%,var(--bg))}
.mbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.mtabs{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line-2)}
.mtabs button{font:inherit;font-family:var(--disp);font-weight:600;font-size:.9rem;color:var(--soft);background:transparent;border:0;border-radius:999px;padding:10px 20px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:color .2s,background .2s}
.mtabs button:hover{color:var(--ink)}
.mtabs button.on{color:#00141f;background:linear-gradient(180deg,var(--gold-2),var(--gold))}
.mtabs button em{font-style:normal;font-family:var(--mono);font-size:.55rem;letter-spacing:.16em;text-transform:uppercase;padding:3px 7px;border-radius:999px;background:rgba(59,158,255,.18);color:var(--perp)}
.mtabs button.on em{background:rgba(0,0,0,.18);color:#00141f}
.dll-toggle{display:inline-flex;align-items:center;gap:12px;font-size:.88rem;color:var(--ink);cursor:pointer;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid var(--line-2);background:rgba(255,255,255,.04)}
.dll-toggle[hidden]{display:none}
.dll-toggle input{position:absolute;opacity:0;width:0;height:0}
.dll-toggle .sw{position:relative;width:38px;height:22px;border-radius:999px;background:rgba(255,255,255,.14);transition:background .2s;flex:none}
.dll-toggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .2s}
.dll-toggle input:checked + .sw{background:var(--perp)}
.dll-toggle input:checked + .sw::after{transform:translateX(16px)}
.dll-toggle em{font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#5EE6A8;margin-left:8px}
.tiers{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tier{position:relative;padding:26px 22px 22px;border:1px solid var(--line-2);border-radius:20px;background:var(--card);display:flex;flex-direction:column;transition:transform .25s,border-color .25s,box-shadow .25s}
.tier.in:hover{transform:translateY(-4px);border-color:rgba(0,229,255,.45);box-shadow:0 30px 60px -30px rgba(0,229,255,.35)}
.tier.hot{border-color:rgba(0,229,255,.55);background:linear-gradient(180deg,rgba(0,229,255,.08),var(--card))}
.tier .badge{position:absolute;top:-11px;left:18px;font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:#00141f;background:linear-gradient(180deg,var(--gold-2),var(--gold));padding:5px 10px;border-radius:999px}
.tier .size{font-family:var(--disp);font-weight:600;font-size:clamp(1.5rem,2.2vw,1.9rem);letter-spacing:-.02em}
.tier .acct{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin-top:4px}
.tier .price{margin-top:18px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.tier .price b{font-family:var(--disp);font-weight:600;font-size:2rem;letter-spacing:-.02em;color:#fff}
.tier .price s{color:var(--mute);font-size:.9rem}
.tier .price small{font-size:.72rem;color:var(--soft)}
.tier ul{list-style:none;margin:20px 0 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.tier li{display:flex;justify-content:space-between;gap:10px;font-size:.84rem;color:var(--soft);padding-bottom:9px;border-bottom:1px dashed var(--line-2)}
.tier li b{color:var(--ink);font-weight:500;text-align:right}
.tier .btn{text-align:center;padding:13px 18px;font-size:.92rem}
.tier .fine{margin-top:12px;font-size:.7rem;color:var(--mute);text-align:center}
.rules{margin-top:clamp(28px,4vw,40px);display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;font-size:.84rem;color:var(--soft)}
.rules span b{color:var(--ink);font-weight:500}
@media(max-width:1100px){.tiers{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.tiers{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.tiers{grid-template-columns:1fr}}

/* ---------- how it works ---------- */
/* how it works (v9): a ledger. Sticky side with the rail; four glass rows with vignettes drawn in the brand. */
.how-grid{display:grid;grid-template-columns:minmax(250px,.78fr) 1.32fr;gap:clamp(28px,5vw,72px);align-items:start}
.how-side{position:sticky;top:110px}
.how-rail{list-style:none;margin-top:36px;position:relative;padding-left:26px}
.how-rail::before{content:"";position:absolute;left:5px;top:10px;bottom:10px;width:1px;background:linear-gradient(180deg,var(--gold),rgba(59,158,255,.45) 60%,transparent)}
.how-rail li{position:relative;display:flex;align-items:baseline;gap:14px;padding:9px 0;color:var(--mute);transition:color .3s}
.how-rail li i{position:absolute;left:-26px;top:14px;width:11px;height:11px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:var(--bg);transition:border-color .3s,box-shadow .3s,background .3s}
.how-rail li span{font-family:var(--mono);font-size:.66rem;letter-spacing:.24em}
.how-rail li em{font-style:normal;font-family:var(--disp);font-weight:600;font-size:1.02rem;letter-spacing:-.01em}
.how-rail li.on{color:var(--ink)}
.how-rail li.on span{color:var(--gold)}
.how-rail li.on i{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 4px rgba(0,229,255,.18),0 0 18px rgba(0,229,255,.6)}
.srows{display:flex;flex-direction:column;gap:14px}
.srow{display:grid;grid-template-columns:1fr minmax(250px,320px);gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(22px,2.6vw,32px);border-radius:22px}
.srow .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.24em;color:var(--gold)}
.srow b{display:block;margin-top:14px;font-family:var(--disp);font-weight:600;font-size:clamp(1.25rem,1.8vw,1.55rem);letter-spacing:-.018em;line-height:1.15}
.srow p{margin-top:10px;font-size:.95rem;color:var(--soft);line-height:1.62;max-width:46ch}
/* vignettes: an inner panel with a faint grid, mono labels, gold for the trader's choices, cyan for the firm's state */
.vis{position:relative;border-radius:14px;border:1px solid rgba(255,255,255,.08);padding:16px;min-height:172px;display:flex;flex-direction:column;gap:12px;overflow:hidden;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px) 0 0/100% 28px,
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px) 0 0/28px 100%,
    radial-gradient(80% 70% at 100% 0%,rgba(59,158,255,.1),transparent 60%),
    linear-gradient(180deg,#0b1117,#070a0e)}
.vis .vl{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--mute)}
.vis .vh{display:flex;justify-content:space-between;align-items:center;gap:10px}
.vis .seg,.vis .chips,.vis .split{display:flex;flex-wrap:wrap;gap:6px}
.vis .seg i,.vis .chips i,.vis .split i{font-style:normal;font-family:var(--mono);font-size:.7rem;letter-spacing:.06em;padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.1);color:var(--soft);background:rgba(255,255,255,.03)}
.vis .seg i.on,.vis .chips i.on,.vis .split i.on{color:#00141f;background:linear-gradient(180deg,var(--gold-2),var(--gold));border-color:transparent;font-weight:600;box-shadow:0 6px 18px -8px rgba(0,229,255,.8)}
.vis .vf{display:flex;justify-content:space-between;gap:10px;margin-top:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.vis .vf .t{color:var(--perp)}
.vis .vf .f{color:rgba(255,130,130,.8)}
.vis .live{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--perp)}
.vis .live i{width:6px;height:6px;border-radius:50%;background:var(--perp);box-shadow:0 0 8px var(--perp)}
.vis .pill{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;padding:4px 9px;border-radius:999px;color:var(--perp);border:1px solid rgba(59,158,255,.4);background:rgba(59,158,255,.08);white-space:nowrap}
.v-curve svg{display:block;width:100%;height:112px}
.v-curve .tgt{stroke:var(--perp);stroke-width:1;stroke-dasharray:4 5;opacity:.9}
.v-curve .flr{stroke:rgba(255,130,130,.5);stroke-width:1;stroke-dasharray:4 5}
.v-curve .area{fill:rgba(0,229,255,.12)}
.v-curve .eq{fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(0,229,255,.6))}
.v-curve .dot{fill:#fff;filter:drop-shadow(0 0 6px #fff)}
.chk{list-style:none;display:flex;flex-direction:column;gap:8px}
.chk li{display:flex;align-items:center;gap:10px;font-size:.84rem;color:var(--soft)}
.chk li::before{content:"";flex:none;width:16px;height:16px;border-radius:50%;border:1px solid rgba(59,158,255,.5);background:rgba(59,158,255,.1) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2.2 5.3l2 2L7.9 3.4' fill='none' stroke='%233B9EFF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/9px no-repeat}
.chk li.hi{color:var(--ink);font-weight:600}
.chk li.hi::before{background:var(--perp) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'><path d='M2.2 5.3l2 2L7.9 3.4' fill='none' stroke='%23071016' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/9px no-repeat;box-shadow:0 0 10px rgba(59,158,255,.6)}
.vis .btn{text-align:center;font-family:var(--disp);font-weight:600;font-size:.9rem;padding:11px;border-radius:10px;color:#00141f;background:linear-gradient(180deg,var(--gold-2),var(--gold));box-shadow:0 10px 24px -12px rgba(0,229,255,.9)}
@media(max-width:960px){.how-grid{grid-template-columns:1fr}.how-side{position:static}.how-rail{display:none}.srow{grid-template-columns:1fr}}

/* ---------- proof: from the team behind FFN ---------- */
#proof{background:var(--bg-2)}
.proof{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,5vw,70px);align-items:center}
.proof .logo{display:flex;align-items:center;gap:14px;margin-top:26px;text-decoration:none}
.proof .logo img{height:44px;width:auto}
.proof .logo span{font-size:.82rem;color:var(--soft)}
.proof .logo b{display:block;color:var(--ink);font-family:var(--disp);font-weight:600;font-size:1rem}
.pstats{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pstat{padding:24px 22px;border:1px solid var(--line);border-radius:18px;background:var(--card)}
.pstat .num{font-family:var(--disp);font-weight:600;font-size:clamp(1.7rem,2.8vw,2.4rem);letter-spacing:-.02em;background:linear-gradient(180deg,#fff,var(--gold-2));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.pstat .lbl{margin-top:6px;font-size:.84rem;color:var(--soft);line-height:1.4}
.proof ul{list-style:none;margin-top:26px;display:flex;flex-direction:column;gap:10px}
.proof li{display:flex;gap:12px;align-items:flex-start;color:var(--soft);font-size:.95rem;line-height:1.5}
.proof li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:rgba(0,229,255,.12);border:1px solid var(--line);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300E5FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>");background-size:10px;background-position:center;background-repeat:no-repeat}
@media(max-width:860px){.proof{grid-template-columns:1fr}}

/* ---------- faq ---------- */
.faq{max-width:820px;margin:0 auto}
.faq details{border-bottom:1px solid var(--line-2);padding:4px 0}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:20px 0;font-family:var(--disp);font-weight:600;font-size:1.08rem;letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:30px;height:30px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;color:var(--gold);font-weight:400;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .a{padding:0 0 22px;color:var(--soft);line-height:1.65;max-width:68ch}

/* ---------- cta band ---------- */
#cta{padding:clamp(70px,10vh,120px) var(--pad)}
.band{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:28px;padding:clamp(40px,6vw,80px);text-align:center;
  background:radial-gradient(900px 400px at 50% 120%,rgba(0,229,255,.18),transparent 60%),radial-gradient(600px 300px at 50% -20%,rgba(59,158,255,.12),transparent 60%),var(--bg-3)}
.band h2{margin:0 auto;position:relative}
.band .lead{margin-left:auto;margin-right:auto;position:relative}
.band .actions{justify-content:center;position:relative}
.band .ring{position:absolute;left:50%;top:50%;width:140%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1px solid rgba(0,229,255,.08);pointer-events:none}
.band .ring.r2{width:100%;border-color:rgba(59,158,255,.08)}
.band .ring.r3{width:60%;border-color:rgba(0,229,255,.12)}

/* ---------- footer ---------- */
footer{background:var(--bg);border-top:1px solid var(--line-2);padding:60px var(--pad) 40px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1fr;gap:30px;max-width:1240px;margin:0 auto}
.fgrid h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.24em;text-transform:uppercase;color:var(--soft);margin-bottom:14px}
.fgrid ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.fgrid a{color:var(--soft);text-decoration:none;font-size:.9rem}
.fgrid a:hover{color:var(--ink)}
.fgrid p{color:var(--soft);font-size:.88rem;line-height:1.6;max-width:36ch;margin-top:14px}
.sub-form{display:flex;gap:8px;margin-top:16px;max-width:380px}
.sub-form input{flex:1;min-width:0;background:var(--card);border:1px solid var(--line-2);border-radius:999px;padding:11px 16px;color:var(--ink);font:inherit;font-size:.9rem;outline:none}
.sub-form input:focus{border-color:var(--gold)}
.sub-form button{font-family:var(--disp);font-weight:600;font-size:.86rem;color:#00141f;background:linear-gradient(180deg,var(--gold-2),var(--gold));border:0;border-radius:999px;padding:11px 18px;cursor:pointer}
.disc{max-width:1240px;margin:50px auto 0;padding-top:30px;border-top:1px solid var(--line-2);color:var(--mute);font-size:.74rem;line-height:1.6}
.disc h5{font-family:var(--mono);font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--soft);margin:18px 0 6px}
.disc p+p{margin-top:8px}
.copy{max-width:1240px;margin:30px auto 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;color:var(--mute);font-size:.76rem}
@media(max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.fgrid{grid-template-columns:1fr}}

/* ============================================================
   v2: glass GUI + detail pass (2026-10-14). Later rules win; these
   deliberately override the v1 card recipes above.
   ============================================================ */
.glass,.stat,.why,.pstat,.cat,.sess,.tier,.srow{position:relative;border-radius:18px;border:1px solid rgba(255,255,255,.1);background:rgba(14,15,17,.42);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 48px -32px rgba(0,0,0,.85)}
.glass::before,.stat::before,.why::before,.pstat::before,.cat::before,.tier::before,.srow::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 42%)}
.sess{background:linear-gradient(180deg,rgba(59,158,255,.07),rgba(255,255,255,.03)),rgba(14,15,17,.42)}
.stat{border-radius:16px}
.sess .time .sec{font-size:.68em;color:var(--soft)}
.flash{animation:flash .9s ease-out}
@keyframes flash{0%{color:var(--perp-2)}100%{color:#fff}}
.mbar-hint{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}

/* tier cards (v7): our own allocation-card tiers, graphite -> cyan -> gold -> obsidian. The art runs flush with
   the glass card's top and fades into it (masked plate), with a brushed-metal grain, a holographic sheen that
   follows the pointer, and the orbit arc that fills with the tier. The whole card tilts (fpn.js). */
.tiers .tier{--ac:#cfd8e3;--bg1:#1b222c;--bg2:#0a0d12;padding:0 10px 18px;border-radius:22px;overflow:hidden;transform-style:preserve-3d;
  background:radial-gradient(90% 46% at 50% 0%,color-mix(in srgb,var(--ac) 14%,transparent),transparent 72%),rgba(14,15,17,.42)}
.tiers .tier.t1{--ac:#3B9EFF;--bg1:#06313b;--bg2:#04111a}
.tiers .tier.t2{--ac:#00E5FF;--bg1:#063b46;--bg2:#021317}
.tiers .tier.t3{--ac:#d9c7ff;--bg1:#17141f;--bg2:#050508}
.tier .art{position:relative;margin:0 -10px;aspect-ratio:1.42;padding:18px 18px 16px;display:flex;flex-direction:column;justify-content:space-between;color:#fff;overflow:hidden}
.tier .art .bg{position:absolute;inset:0;pointer-events:none;
  background:
    conic-gradient(from var(--ga,210deg) at var(--gx,70%) var(--gy,30%),transparent 0 8%,color-mix(in srgb,var(--ac) 24%,transparent) 14%,transparent 24%,rgba(255,255,255,.1) 38%,transparent 48%,color-mix(in srgb,var(--ac) 14%,transparent) 62%,transparent 72%),
    repeating-linear-gradient(94deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    radial-gradient(110% 80% at var(--gx,70%) var(--gy,20%),rgba(255,255,255,.12),transparent 55%),
    linear-gradient(165deg,var(--bg1),var(--bg2) 70%);
  -webkit-mask-image:linear-gradient(#000 58%,transparent);mask-image:linear-gradient(#000 58%,transparent)}
.tier .art .orbit{position:absolute;right:-22%;bottom:-36%;width:86%;aspect-ratio:1}
.tier .art .orbit circle{fill:none;stroke-width:1.6}
.tier .art .orbit .track{stroke:rgba(255,255,255,.07)}
.tier .art .orbit .arc{stroke:var(--ac);stroke-linecap:round;stroke-dasharray:var(--arc,25) 100;opacity:.9;filter:drop-shadow(0 0 6px color-mix(in srgb,var(--ac) 70%,transparent))}
.tier .art .orbit .node{fill:#fff;stroke:none;filter:drop-shadow(0 0 5px #fff)}
.tier .art::after{content:"";position:absolute;left:18px;right:18px;top:0;height:1px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ac) 60%,transparent),transparent);pointer-events:none}
.art-price{position:relative;display:flex;align-items:baseline;gap:7px;font-family:var(--disp)}
.art-price s{color:rgba(255,255,255,.5);font-size:.95rem;font-weight:600}
.art-price b{font-size:1.75rem;font-weight:600;letter-spacing:-.02em;color:#fff}
.art-price small{font-size:.68rem;letter-spacing:.08em;color:rgba(255,255,255,.7)}
.art-mark{position:absolute;top:16px;right:18px;width:44px;height:auto;opacity:.9}
.art-size{position:relative}
.art-size b{display:block;font-family:var(--disp);font-size:clamp(1.6rem,2.1vw,2.1rem);font-weight:600;letter-spacing:-.025em;line-height:1.05;width:fit-content;
  background:linear-gradient(180deg,#fff 15%,var(--ac));-webkit-background-clip:text;background-clip:text;color:transparent}
.art-size span{display:block;font-family:var(--mono);font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:7px}
.tiers .tier .badge{position:static;display:inline-block;margin-bottom:10px}
.tiers .tier ul{margin:16px 8px 12px;gap:7px}
.tiers .tier li{font-size:.8rem;padding-bottom:7px}
.cardtoggle{display:flex;align-items:center;gap:10px;margin:0 6px 12px;padding:8px 10px;border-radius:999px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);font-size:.8rem;color:var(--ink);cursor:pointer}
.cardtoggle input{position:absolute;opacity:0;width:0;height:0}
.cardtoggle .sw{position:relative;flex:none;width:34px;height:20px;border-radius:999px;background:rgba(255,255,255,.14);transition:background .2s}
.cardtoggle .sw::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .2s}
.cardtoggle input:checked + .sw{background:var(--perp)}
.cardtoggle input:checked + .sw::after{transform:translateX(14px)}
.cardtoggle em{margin-left:auto;font-style:normal;font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:#5EE6A8;background:rgba(94,230,168,.12);padding:4px 8px;border-radius:999px}
.tiers .tier .btn{margin:0 6px}

.feed-note{margin:16px auto 0;max-width:1240px;padding:0 var(--pad);font-size:.72rem;color:var(--mute);text-align:center}

/* how-it-works: rendered imagery cards */

/* ---------- v3: FP logo, cinematic hero layers, comparison ---------- */
.brand picture{display:block;line-height:0}
.brand .logo{display:block;height:44px;width:auto}
.brand-foot .logo{height:56px}
.brand .wm-sub{display:block;width:100%;font-family:var(--mono);font-size:.56rem;letter-spacing:.26em;text-transform:uppercase;color:var(--perp);margin-top:3px;padding-left:99px}
.brand{flex-wrap:wrap;row-gap:0;column-gap:10px;max-width:360px}
/* header: logo with its sub-line stacked underneath, never squeezed or wrapped */
nav .brand{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:0;flex:none;max-width:none}
nav .brand .wm-sub{white-space:nowrap}
@media(max-width:560px){.brand .wm-sub{display:none}.brand .logo{height:28px}nav,nav.scrolled{gap:12px;padding:12px 16px}.navcta{padding:10px 14px;font-size:.8rem}}
.ds-brand img{width:34px;height:auto}
#world .plate{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;opacity:.85;filter:hue-rotate(155deg) saturate(1.15) contrast(1.05)}  /* the plate was shot gold; rotate it into the cyan to blue brand */
/* sections ride over the fixed world as translucent panels (getlayers-style); glass cards blur it */
section.block,#always,#desk{background:rgba(4,7,10,.3)}
#markets{background:linear-gradient(180deg,rgba(7,12,17,.45),rgba(4,7,10,.3))}
#challenges{background:linear-gradient(180deg,rgba(4,7,10,.3),rgba(11,18,25,.5) 50%,rgba(4,7,10,.3))}
#proof{background:rgba(7,12,17,.42)}
#cta{position:relative;z-index:2}
footer{position:relative;z-index:2;background:rgba(4,7,10,.7)}
.stage::after{background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(4,7,10,.55) 100%)}
.stage .bar{position:absolute;left:0;right:0;height:0;background:#000;z-index:4;pointer-events:none}
.stage .bar.top{top:0}.stage .bar.bot{bottom:0}
.tcards{position:absolute;inset:0;z-index:3;display:grid;place-items:center;pointer-events:none}
.tcard{position:absolute;text-align:center;opacity:0;transform:scale(1.08);will-change:opacity,transform}
.tcard small{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--perp);margin-bottom:18px}
.tcard b{display:block;font-family:var(--disp);font-weight:600;font-size:clamp(3rem,9vw,8rem);line-height:.95;letter-spacing:-.035em;color:#fff;text-shadow:0 0 60px rgba(0,229,255,.35)}
#loop3d.no3d .plate{opacity:.6}
#loop3d.no3d .bar,#loop3d.no3d .tcards{display:none}
.cmp{margin-top:clamp(40px,6vw,70px);padding:clamp(22px,3vw,34px);border-radius:22px;overflow:hidden}
.cmp-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}
.cmp-head .k{margin:0}
.cmp h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.02em}
.cmp table{width:100%;border-collapse:collapse;font-size:.9rem}
.cmp th{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-2)}
.cmp th img{height:16px;width:auto;vertical-align:-3px;margin-right:8px}
.cmp td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--soft);vertical-align:top}
.cmp td:first-child{color:var(--ink);font-weight:500;width:26%}
.cmp td.y{color:#fff;background:rgba(59,158,255,.05)}
.cmp td.y::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--perp);margin-right:10px;vertical-align:2px}
.cmp tr:last-child td{border-bottom:0}
.cmp .fine-center{margin-top:12px}
@media(max-width:760px){.cmp table,.cmp thead,.cmp tbody,.cmp tr,.cmp td,.cmp th{display:block}.cmp thead{display:none}.cmp td{padding:8px 0;border:0}.cmp td:first-child{width:auto;padding-top:14px;border-top:1px solid var(--line-2)}.cmp td:not(.y):not(:first-child)::before{content:"Futures: ";color:var(--mute)}}
#world.no3d #l3-canvas{display:none}

/* ============================================================
   v5: Mirror Hall ticker rotunda (getlayers "Mirror Hall") + Relay "tech scroll" beats:
   signal stream, scroll-scrubbed section handoff, focus-in titles, typed eyebrows,
   drawn hairlines, counting stats, nav breathing dot, cursor ring, dot-field backdrop.
   ============================================================ */
/* --- mirror hall --- */
.hall{position:relative;height:clamp(500px,70vh,760px);margin-top:clamp(26px,4vw,44px);border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:#04070a;
  box-shadow:0 30px 80px -30px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.08)}
.hall canvas{display:block;width:100%;height:100%;touch-action:pan-y;cursor:grab}
.hall.dragging canvas{cursor:grabbing}
.hall-hud{position:absolute;inset:0;pointer-events:none;color:#eaf1fb}
.hall-hud .vig{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,7,10,.4),transparent 22%,transparent 58%,rgba(4,7,10,.72))}
.hall-hud .frame{position:absolute;inset:14px;border:1px solid rgba(255,255,255,.08);border-radius:14px}
.hall-hud .frame::before,.hall-hud .frame::after{content:"";position:absolute;width:10px;height:10px;border:1px solid rgba(0,229,255,.6)}
.hall-hud .frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0}
.hall-hud .frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0}
.hall-hud .mast{position:absolute;top:clamp(22px,4vh,40px);left:clamp(26px,3vw,44px);font-family:var(--mono);font-size:.62rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.hall-hud .mast b{color:var(--gold);font-weight:500}
.hall-hud .focus{position:absolute;left:50%;bottom:clamp(22px,4vh,40px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;width:92%;text-align:center}
.hall-hud .counter{display:flex;align-items:baseline;gap:7px;font-family:var(--mono);font-size:.68rem;letter-spacing:.18em}
.hall-hud .counter .num{color:var(--gold);font-size:.82rem;text-shadow:0 0 14px rgba(0,229,255,.6)}
.hall-hud .counter i{color:rgba(255,255,255,.3);font-style:normal}.hall-hud .counter .total{color:rgba(255,255,255,.45)}
.hall-hud .name{font-family:var(--disp);font-weight:600;font-size:clamp(1.2rem,2.4vw,1.8rem);letter-spacing:-.01em;color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.7)}
.hall-hud .name.swap{animation:focusSwap .5s cubic-bezier(.22,.61,.36,1) both}
@keyframes focusSwap{from{opacity:0;transform:translateY(8px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
.hall-hud .px{font-family:var(--mono);font-size:.82rem;color:var(--soft);font-variant-numeric:tabular-nums}
.hall-hud .px b{color:#fff;font-weight:500}.hall-hud .px .up{color:#5EE6A8}.hall-hud .px .dn{color:#ff7a7a}
.hall-hud .dots{display:flex;gap:7px;margin-top:4px}
.hall-hud .dots i{width:5px;height:5px;border-radius:4px;background:rgba(255,255,255,.22);transition:width .5s cubic-bezier(.22,.61,.36,1),background .5s,box-shadow .5s}
.hall-hud .dots i.on{width:22px;background:var(--gold);box-shadow:0 0 12px rgba(0,229,255,.65)}
.hall-hud .hint{position:absolute;right:clamp(18px,3vw,40px);bottom:clamp(22px,4vh,40px);display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.6rem;letter-spacing:.26em;text-transform:uppercase;color:rgba(255,255,255,.5);transition:opacity .8s}
.hall-hud .hint::before{content:"";width:22px;height:1px;background:rgba(255,255,255,.4);animation:hintSlide 2.4s ease-in-out infinite}
@keyframes hintSlide{0%,100%{transform:translateX(0);opacity:.35}50%{transform:translateX(6px);opacity:.9}}
.hall.nudged .hint{opacity:0}
.hall.nogl{display:none}
/* platform plate: the Nexus mark where the tape used to run */
.platform{margin-top:clamp(28px,4vw,44px);display:flex;align-items:center;justify-content:space-between;gap:28px;padding:clamp(22px,3vw,34px) clamp(24px,3.4vw,40px);
  border-radius:22px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(100deg,rgba(255,255,255,.06),rgba(255,255,255,.025) 60%,rgba(0,229,255,.06));
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 24px 48px -32px rgba(0,0,0,.85)}
.platform .pt-copy{display:flex;flex-direction:column;gap:6px;min-width:0}
.platform .pt-copy .k{margin-bottom:8px}
.platform .pt-copy b{font-family:var(--disp);font-weight:600;font-size:clamp(1.15rem,2vw,1.5rem);letter-spacing:-.01em;line-height:1.2}
.platform .pt-copy span:not(.k){font-size:.9rem;color:var(--soft)}
.platform img{flex:0 0 auto;height:clamp(54px,6vw,76px);width:auto;filter:drop-shadow(0 10px 24px rgba(0,0,0,.6))}
@media(max-width:700px){.platform{flex-direction:column;align-items:flex-start;gap:20px}.platform img{height:48px}}
@media(max-width:700px){.hall{height:clamp(420px,62vh,560px);border-radius:18px}.hall-hud .hint,.hall-hud .dots,.hall-hud .mast{display:none}.hall-hud .frame{inset:10px}}

/* --- wires: Relay's particle stream (assets/wires.js). A fixed canvas, opaque black screened over the world
       and UNDER the sections, exactly as Relay lays it: the section panels are translucent (.3) so the stream
       shows between the tiles, and every card is ink glass with a backdrop blur, so it frosts behind them.
       Nothing above the cards may carry opacity<1 (a backdrop root would hide the wires from the blur). The five colour roles the shaders read; Relay's own lime set is
       #c8f751 / #52c8ff / #eaff9e / #3d5410 / #ffffff. Desktop only. --- */
:root{--stream-main:#00E5FF;--stream-alt:#3B9EFF;--stream-core:#8CF4FF;--stream-deep:#062a40;--stream-spark:#ffffff}
#wires{position:fixed;top:0;left:0;width:100%;height:100vh;z-index:1;pointer-events:none;mix-blend-mode:screen}
@media(max-width:820px),(pointer:coarse){#wires{display:none}
  section.block,#always,#desk,#markets,#challenges,#proof{background:rgba(4,7,10,.76)}}  /* no stream on phones: solid panels, readable copy */

/* --- scroll-scrubbed section handoff (relay ScrollBlur): the block rises in as its top reaches the
       viewport centre and fades out as its bottom passes it. Native scroll-driven animations, no JS. --- */
@supports (animation-timeline: view()){
  @media(min-width:821px) and (prefers-reduced-motion:no-preference){
    section.block>.wrap{animation:sb-enter linear both;animation-timeline:view();animation-range:cover 0vh cover 45vh}
    section.block{animation:sb-leave linear both;animation-timeline:view();animation-range:exit calc(100% - 50vh) exit 100%}
  }
}
@keyframes sb-enter{from{transform:translateY(48px)}to{transform:none}}
@keyframes sb-leave{from{opacity:1;transform:none}to{opacity:.28;transform:translateY(-40px)}}

/* --- focus-in titles (relay "Фокусировка"): out of a blur while a soft mask sweeps left -> right --- */
@property --rvm{syntax:"<percentage>";inherits:false;initial-value:0%}
h2.rv,.lead.rv{--rvm:0%;filter:blur(10px);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--rvm) - 40%),transparent var(--rvm));mask-image:linear-gradient(90deg,#000 calc(var(--rvm) - 40%),transparent var(--rvm));
  transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1),filter .9s ease,--rvm 1.2s cubic-bezier(.2,.7,.2,1)}
h2.rv.in,.lead.rv.in{filter:blur(0);--rvm:140%}

/* --- typed eyebrows (relay TypeText): the mono label is clipped to whole characters as it types --- */
@property --t{syntax:"<percentage>";inherits:false;initial-value:0%}
.k .ty{display:inline-block;--t:0%;clip-path:inset(-2px calc(100% - var(--t)) -2px 0);transition:--t 1.1s steps(var(--n,12),end) .2s}
.k.rv.in .ty,.rv.in .k .ty{--t:100%}
/* --- drawn hairline (relay DrawLine): the eyebrow rule draws from the left --- */
.k.rv::before,.rv .k::before{transform:scaleX(0);transform-origin:left center;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.k.rv.in::before,.rv.in .k::before{transform:none}

/* --- counting stats: tabular while counting (set inline by fpn.js) --- */
.num[data-counted]{font-variant-numeric:tabular-nums}

/* --- nav breathing dot (relay hero.status) --- */
.live i{position:relative}
.live i::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--perp);animation:halo 1.8s ease-out infinite}
@keyframes halo{0%{transform:scale(1);opacity:.8}100%{transform:scale(3.2);opacity:0}}

/* --- cursor ring (relay character.cursor): fine pointers only, mounted by fpn.js --- */
.cur{position:fixed;top:0;left:0;z-index:9999;width:28px;height:28px;margin:-14px 0 0 -14px;border-radius:50%;border:1px solid rgba(0,229,255,.85);pointer-events:none;opacity:0;
  transition:transform .12s cubic-bezier(.2,.7,.2,1),width .25s,height .25s,margin .25s,opacity .3s,background .25s,scale .15s}
.cur.on{opacity:1}
.cur.over{width:44px;height:44px;margin:-22px 0 0 -22px;background:rgba(0,229,255,.12)}
.cur.down{scale:.82}
.cur.hide{opacity:0}

/* --- dot-field backdrop (relay backdrop): a 48px grid of specks above the plate, under the loop --- */
#world::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(circle,rgba(255,255,255,.085) 1px,transparent 1.6px) 0 0/48px 48px;
  -webkit-mask-image:radial-gradient(90% 80% at 50% 45%,#000 30%,transparent 100%);mask-image:radial-gradient(90% 80% at 50% 45%,#000 30%,transparent 100%)}
@media(prefers-reduced-motion:reduce){.live i::after,.hall-hud .hint::before{animation:none}}

#how .panel{margin-top:clamp(34px,5vw,56px)}

/* ============ payout cycle + rules (FFN Perps program, 2026-10-15) ============ */
.panel{margin-top:clamp(30px,5vw,50px);padding:clamp(22px,3vw,34px);border-radius:22px;overflow:hidden}
.panel h3{font-family:var(--disp);font-weight:600;font-size:clamp(1.3rem,2.2vw,1.7rem);letter-spacing:-.02em}
.ptable{width:100%;border-collapse:collapse;font-size:.9rem}
.ptable th{font-family:var(--mono);font-weight:500;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--soft);text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-2);vertical-align:bottom}
.ptable td{padding:13px 14px;border-bottom:1px solid rgba(255,255,255,.05);color:var(--soft);vertical-align:top}
.ptable td:first-child{color:var(--ink);font-weight:500}
.ptable tr:last-child td{border-bottom:0}
.rulebook{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:12px}
.rcard{padding:26px 24px}
.rcard h3{font-family:var(--disp);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;margin-bottom:14px}
.rcard ul{list-style:none;display:flex;flex-direction:column;gap:9px}
.rcard li{position:relative;padding-left:18px;color:var(--soft);font-size:.92rem;line-height:1.55}
.rcard li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
@media(max-width:760px){
  .rulebook{grid-template-columns:1fr}
  .ptable thead{display:none}
  .ptable,.ptable tbody,.ptable tr,.ptable td{display:block}
  .ptable tr{padding:10px 0;border-top:1px solid var(--line-2)}
  .ptable tr:first-child{border-top:0}
  .ptable td{padding:3px 0;border:0}
  .ptable td[data-l]::before{content:attr(data-l) ": ";color:var(--mute)}
}

/* ---------- readability (owner 2026-10-15, target screenshot: near-white copy, stream still visible) ----------
   The words carry the contrast: body copy close to white, headings full ink, a soft shadow to separate them from
   bright streaks. Panels stay light so the stream shows through, only slightly deeper than before. */
:root{--soft:#e3eae6;--mute:#a9b7b0}
.lead{color:#e9efeb}
@media(min-width:821px){
  section.block,#always,#desk{background:rgba(4,7,10,.42)}
  #markets{background:linear-gradient(180deg,rgba(7,12,17,.52),rgba(4,7,10,.42))}
  #challenges{background:linear-gradient(180deg,rgba(4,7,10,.42),rgba(11,18,25,.58) 50%,rgba(4,7,10,.42))}
  #proof{background:rgba(7,12,17,.52)}
}
section.block h2,section.block .lead,section.block p,section.block li{text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 16px rgba(4,7,10,.85)}

/* ---------- team pass (owner relayed 2026-10-15) ----------
   1. Hero scrim: a soft black field behind the headline and sub so the copy reads crisp while the ring and
      plate still show on the right. It sits under .heropad, above the canvas, and fades in with the copy
      (loop3d.js). Left weighted on desktop, top weighted on phones where the copy sits at the top. */
.hero-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background:
    radial-gradient(ellipse 62% 78% at 24% 52%,rgba(0,0,0,.55),rgba(0,0,0,.38) 48%,transparent 78%),
    linear-gradient(90deg,rgba(0,0,0,.32),rgba(0,0,0,.12) 46%,transparent 66%)}
#loop3d.no3d .hero-scrim{opacity:1}
@media(max-width:860px){
  .hero-scrim{background:
    radial-gradient(ellipse 120% 62% at 30% 30%,rgba(0,0,0,.55),rgba(0,0,0,.36) 52%,transparent 82%),
    linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.1) 60%,transparent)}
}
.hero .sub,.hero h1 .l2,.hero .eyebrow,.hero .credit{text-shadow:0 1px 2px rgba(0,0,0,.6)}
.hero h1 .gold-word,.hero h1 .perp-word{filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.hero .sub{color:#eef3f0}

/* 2. Challenges on solid black: no stream or plate behind the plan cards, at every width. */
#challenges{background:#000}
#challenges h2,#challenges .lead,#challenges p,#challenges li{text-shadow:none}
.tiers .tier{background:radial-gradient(90% 46% at 50% 0%,color-mix(in srgb,var(--ac) 12%,transparent),transparent 72%),#0a0c0f;
  border-color:rgba(255,255,255,.12);backdrop-filter:none;-webkit-backdrop-filter:none}

/* 3. Shorter plan cards: the headline lines, then "View full details" (the FFN store's pattern) for the rest. */
.tiers{align-items:start}
.tiers .tier ul.tier-head{flex:none;margin-bottom:6px}
.tiers .tier ul.tier-details{flex:none;margin-top:4px}
.tiers .tier ul.tier-details[hidden]{display:none}
.tier-more{display:flex;align-items:center;justify-content:center;gap:6px;margin:0 8px 14px;padding:10px 4px 2px;border:0;border-top:1px solid var(--line-2);
  background:transparent;color:var(--soft);font:inherit;font-size:.78rem;cursor:pointer;transition:color .2s}
.tier-more:hover{color:#fff}
.tier-more:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.tier-more .chev{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.tier-more[aria-expanded="true"] .chev{transform:rotate(180deg)}
.tier-more[aria-expanded="true"]{margin-bottom:0}
.tier-details+.btn{margin-top:10px}

/* ---------- Markets page (markets.html, assets/markets.js) ---------- */
.mk-page section.block.mk{padding-top:clamp(120px,16vh,170px);background:var(--bg)}
.mk-title{font-family:var(--disp);font-weight:600;font-size:clamp(2.2rem,5.4vw,4rem);line-height:1.02;letter-spacing:-.03em}
.mk-page .navlinks a[aria-current="page"]{color:var(--ink)}
.mk-page a:not(.btn):not(.navcta):not(.brand){text-decoration-color:var(--gold)}
.mk-counts{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:26px}
.mk-counts li{padding:7px 14px;border:1px solid var(--line-2);border-radius:999px;font-size:.86rem;color:var(--soft)}
.mk-counts b{font-weight:500;color:var(--ink)}
.mk-tools{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(28px,4vw,44px)}
.mk-search{flex:1 1 260px;min-width:0}
.mk-search input{width:100%;padding:12px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.04);color:var(--ink);font:inherit;font-size:.92rem}
.mk-search input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mk-tabs{display:flex;flex-wrap:wrap;gap:6px}
.mk-tabs button{padding:9px 14px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--soft);font:inherit;font-size:.82rem;cursor:pointer}
.mk-tabs button em{font-style:normal;font-family:var(--mono);font-size:.72rem;color:var(--mute);margin-left:4px}
.mk-tabs button[aria-pressed="true"]{border-color:var(--gold);color:var(--ink)}
.mk-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mk-group{margin-top:16px}
.mk-group[hidden],.mk-table tr[hidden]{display:none}
.mk-group h2{font-size:clamp(1.2rem,2vw,1.5rem);display:flex;align-items:center;gap:10px;max-width:none}
.mk-group h2 i{width:9px;height:9px;border-radius:50%;display:inline-block}
.mk-n{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.mk-table td:first-child{font-family:var(--mono);font-size:.86rem;white-space:nowrap}
.mk-table td:last-child,.mk-table th:last-child{text-align:right;white-space:nowrap}
.mk-empty{margin-top:20px;color:var(--soft)}
.mk-note ul{list-style:none;display:flex;flex-direction:column;gap:9px;margin:14px 0 22px}
.mk-note li{position:relative;padding-left:18px;color:var(--soft);font-size:.92rem;line-height:1.55}
.mk-note li::before{content:"";position:absolute;left:0;top:.6em;width:6px;height:6px;border-radius:50%;background:var(--gold)}
.mk-note .actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:760px){
  .mk-table thead{display:table-header-group}
  .mk-table{display:table;width:100%}.mk-table tbody{display:table-row-group}
  .mk-table tr{display:table-row;padding:0;border:0}
  .mk-table td{display:table-cell;padding:10px 8px;border-bottom:1px solid rgba(255,255,255,.05)}
  .mk-table th{padding:8px}
  .mk-table td:nth-child(2){font-size:.84rem;overflow-wrap:anywhere}
  .mk-table{table-layout:fixed}
  .mk-table th:first-child,.mk-table td:first-child{width:42%;padding-left:0}
  .mk-table th:last-child,.mk-table td:last-child{width:24%;white-space:normal;padding-right:0}
  .mk-table td:first-child{font-size:.8rem}
}