/* Mayhem Mode. Dark canvas, safety-orange signal, flowing rails outside the page width. Nothing clipped: every edge fades. */
:root{
  --bg:#0A0A0D; --s1:#111117; --s2:#16161D; --s3:#1D1D26; --fg:#F2F2F5; --fg-2:#A9AAB5; --fg-3:#70717C; --fg-4:#45464F;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); --line-3:rgba(255,255,255,.24);
  --acc:#CCFF00; --acc-2:#DBFF3D; --acc-dim:rgba(204,255,0,.12); --up:#22C55E; --down:#EF4444;
  --font:"Manrope",ui-sans-serif,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:22px; --r2:16px; --r3:10px; --ease:cubic-bezier(.2,.7,.2,1); --w:1120px;
}
*{box-sizing:border-box}
html{color-scheme:dark;background:var(--bg);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:400 15px/1.55 var(--font);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
::selection{background:var(--acc);color:#0A0A0D} :focus-visible{outline:2px solid var(--acc);outline-offset:2px;border-radius:8px}
button,input,select{font:inherit;color:inherit} a{color:inherit;text-decoration:none} img,svg{display:block;max-width:100%}
h1,h2,h3,p,ul,ol,dl,dd,figure{margin:0} ul,ol{padding:0;list-style:none}
.mono{font-family:var(--mono)} .wrap{max-width:var(--w);margin:0 auto;padding:0 24px} @media (max-width:640px){.wrap{padding:0 16px}}
.c2{color:var(--fg-2)} .c3{color:var(--fg-3)} .acc{color:var(--acc)} .up{color:var(--up)} .down{color:var(--down)}
.lbl{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.d1{font-size:clamp(2.6rem,5.8vw,4.6rem);line-height:1;letter-spacing:-.04em;font-weight:800;text-wrap:balance}
.d2{font-size:clamp(1.9rem,3.4vw,2.8rem);line-height:1.06;letter-spacing:-.035em;font-weight:800;text-wrap:balance}
.d3{font-size:1.25rem;letter-spacing:-.02em;font-weight:800} .lead{font-size:1.1rem;line-height:1.6;color:var(--fg-2)}

/* flowing rails: fixed, outside the container, faded top and bottom so nothing ends abruptly */
.rails{position:fixed;inset:0;pointer-events:none;z-index:0;mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent);-webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 88%,transparent)}
.rails>div{position:absolute;top:0;height:100%;width:200px;opacity:.55} .rails svg{width:100%;height:100%} .rails .l{left:max(-40px,calc(50% - var(--w)/2 - 220px))} .rails .r{right:max(-40px,calc(50% - var(--w)/2 - 220px));transform:scaleX(-1)}
.rails path{fill:none;stroke:var(--fg-4);stroke-width:1} .rails path.a{stroke:var(--acc);opacity:.6;stroke-dasharray:6 14;animation:flow 14s linear infinite} @keyframes flow{to{stroke-dashoffset:-400}}
@media (max-width:1380px){.rails{display:none}}
main,header,footer,.nav{position:relative;z-index:1}
.frame{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;z-index:0} .frame::before,.frame::after{content:"";position:absolute;top:0;bottom:0;width:1px;background:var(--line)} .frame::before{left:calc(50% - var(--w)/2)} .frame::after{right:calc(50% - var(--w)/2)} @media (max-width:1180px){.frame{display:none}}
footer{position:relative}

/* controls */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 20px;border-radius:999px;font-weight:700;font-size:14.5px;white-space:nowrap;cursor:pointer;border:1px solid transparent;transition:transform 140ms var(--ease),background 140ms,border-color 140ms,color 140ms}
.btn:active{transform:translateY(1px)} .btn:disabled{opacity:.5;cursor:not-allowed}
.btn-acc{background:var(--acc);color:#0A0A0D} .btn-acc:hover{background:var(--acc-2)}
.btn-white{background:var(--fg);color:#0A0A0D} .btn-white:hover{background:#fff}
.btn-outline{background:transparent;border-color:var(--line-3);color:var(--fg)} .btn-outline:hover{border-color:rgba(255,255,255,.4);background:var(--s2)}
.btn-ghost{background:transparent;color:var(--fg-2)} .btn-ghost:hover{color:var(--fg);background:var(--s2)}
.btn-sm{height:38px;padding:0 14px;font-size:13.5px} .btn-lg{height:54px;padding:0 26px;font-size:16px}
.card{background:var(--s1);border:1px solid var(--line);border-radius:var(--r)} .card-2{background:var(--s2);border:1px solid var(--line);border-radius:var(--r2)}
.tag{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;border:1px solid var(--line-2);color:var(--fg-2);background:var(--s1)} .tag.acc{color:var(--acc);border-color:rgba(204,255,0,.4);background:var(--acc-dim)} .tag.up{color:var(--up);border-color:rgba(34,197,94,.35)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--acc);display:inline-block;box-shadow:0 0 0 0 rgba(204,255,0,.5);animation:pulse 2.4s var(--ease) infinite;flex:none} @keyframes pulse{0%{box-shadow:0 0 0 0 rgba(204,255,0,.45)}70%{box-shadow:0 0 0 7px rgba(204,255,0,0)}100%{box-shadow:0 0 0 0 rgba(204,255,0,0)}}
.hazard{height:2px;background:linear-gradient(90deg,var(--acc),transparent);border-radius:2px;opacity:.8}
.rise{opacity:0;transform:translateY(12px);animation:rise 700ms var(--ease) forwards;animation-delay:var(--d,0ms)} @keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.rise{animation:none;opacity:1;transform:none}.dot{animation:none}.rails path.a{animation:none}.feed .row.enter{animation:none}.chart path.draw{animation:none;stroke-dashoffset:0}}

/* nav */
.nav{position:sticky;top:0;z-index:40;background:rgba(10,10,13,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;gap:24px;height:64px}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:16px;letter-spacing:-.03em} .wordmark img{width:26px;height:26px;border-radius:7px}
.nav ul{display:none;gap:2px} @media (min-width:900px){.nav ul{display:flex}} .nav ul a{padding:8px 12px;border-radius:999px;font-size:14px;font-weight:600;color:var(--fg-2)} .nav ul a:hover,.nav ul a[aria-current]{color:var(--fg);background:var(--s2)}
.nav-right{margin-left:auto;display:flex;gap:8px;align-items:center}

/* hero */
.hero{padding:80px 0 56px} @media (min-width:960px){.hero{padding:104px 0 72px}}
.hero-grid{display:grid;gap:40px;align-items:center} @media (min-width:1000px){.hero-grid{grid-template-columns:1.05fr .95fr;gap:56px}}
.hero .lead{margin-top:22px;max-width:46ch} .hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:30px;align-items:center}
.addr{display:grid;gap:10px;padding:18px;background:var(--s1);border:1px solid var(--line-2);border-radius:var(--r2)}
.addr .a{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center} .addr code{font-family:var(--mono);font-size:13.5px;word-break:break-all;color:var(--fg);line-height:1.5}
.addr .copy{width:40px;height:40px;border-radius:12px;background:var(--s2);border:1px solid var(--line-2);display:grid;place-items:center;cursor:pointer;color:var(--fg-2)} .addr .copy:hover{color:var(--fg);border-color:var(--line-3)}
.addr .meta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--fg-3)} .addr .meta a{color:var(--fg-2);text-decoration:underline;text-underline-offset:3px}
.ponsbadge{display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px 0 6px;border-radius:999px;background:var(--s1);border:1px solid var(--line-2);font-size:13px;color:var(--fg-2)} .ponsbadge img{width:28px;height:28px;border-radius:8px} .ponsbadge b{color:var(--fg);font-weight:700} .ponsbadge:hover{border-color:var(--line-3);color:var(--fg)}

/* compare: two charts, same scale, same period */
.compare{display:grid;gap:14px} @media (min-width:900px){.compare{grid-template-columns:1fr 1fr}}
.cpanel{padding:18px 18px 14px;display:grid;gap:12px;position:relative;overflow:hidden}
.cpanel .h{display:flex;justify-content:space-between;align-items:center;gap:10px} .cpanel .h b{font-weight:800;letter-spacing:-.01em}
.cpanel .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .cpanel .stats div{padding:10px 12px;border-radius:var(--r3);background:var(--s2);border:1px solid var(--line)} .cpanel .stats small{display:block;font-size:11px;color:var(--fg-3)} .cpanel .stats b{display:block;font-family:var(--mono);font-size:14px;font-weight:500;margin-top:3px}
.chart{position:relative;height:250px;font-family:var(--mono)} .chart .ohlc{position:absolute;left:0;top:0;font-size:10.5px;color:var(--fg-3);display:flex;gap:10px;pointer-events:none;white-space:nowrap;overflow:hidden;max-width:100%} .chart .ohlc b{color:var(--fg-2);font-weight:500} .chart .ohlc i{font-style:normal} .chart .px{position:absolute;right:-2px;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:500;transform:translateY(-50%);pointer-events:none} .chart svg{width:100%;height:100%;overflow:visible} .chart .tick{font:10px var(--mono);fill:var(--fg-4)}
.chart path.draw{stroke-dasharray:2000;stroke-dashoffset:2000;animation:draw 2.2s var(--ease) forwards} @keyframes draw{to{stroke-dashoffset:0}}
.chart .tip{position:absolute;top:26px;left:0;max-width:calc(100% - 60px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:6px 8px;border-radius:8px;background:var(--s3);border:1px solid var(--line-2);font-family:var(--mono);font-size:11px;color:var(--fg-2);pointer-events:none;opacity:0;transition:opacity 120ms} .chart .tip.on{opacity:1}
.cpanel.on::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--acc)}
.replay{display:flex;justify-content:center;margin-top:14px}

/* flow diagram */
.flow{display:grid;gap:10px;align-items:stretch} @media (min-width:900px){.flow{grid-template-columns:1fr auto 1fr auto 1fr auto 1fr}}
.node{padding:18px;display:grid;gap:8px} .node .lbl{margin-bottom:2px} .node b{font-weight:800;letter-spacing:-.01em} .node p{font-size:13px;color:var(--fg-2)} .node img{width:28px;height:28px;border-radius:8px}
.arrow{display:grid;place-items:center;color:var(--fg-4)} @media (max-width:899px){.arrow{transform:rotate(90deg);height:24px}}

/* engine cards + feed */
.three{display:grid;gap:14px} @media (min-width:900px){.three{grid-template-columns:repeat(3,1fr)}}
.ecard{padding:22px;display:grid;gap:10px;align-content:start} .ecard .pct{font-family:var(--mono);font-size:2rem;font-weight:500;letter-spacing:-.03em} .ecard h3{font-size:1.05rem;letter-spacing:-.015em} .ecard p{font-size:13.5px;color:var(--fg-2)}
.feed{overflow:hidden} .feed .h{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.feed .rows{max-height:320px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--s3) transparent;mask-image:linear-gradient(to bottom,#000 85%,transparent);-webkit-mask-image:linear-gradient(to bottom,#000 85%,transparent)}
.feed .row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center;padding:11px 18px;border-bottom:1px solid var(--line);font-size:13px} .feed .row:last-child{border-bottom:0}
.feed .row .k{font-family:var(--mono);font-size:11px;padding:3px 7px;border-radius:6px;border:1px solid var(--line-2)} .feed .row .k.buy{color:var(--up);border-color:rgba(34,197,94,.35)} .feed .row .k.sell{color:var(--down);border-color:rgba(255,92,92,.35)} .feed .row .k.hold{color:var(--acc);border-color:rgba(204,255,0,.4)}
.feed .row .t{font-family:var(--mono);font-size:11px;color:var(--fg-3)} .feed .row .v{font-family:var(--mono);font-size:12.5px} .feed .row.enter{animation:enter 500ms var(--ease)} @keyframes enter{from{background:var(--acc-dim);opacity:0;transform:translateY(-6px)}to{opacity:1}}

/* numbers, steps, table */
.numbers{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} @media (min-width:800px){.numbers{grid-template-columns:repeat(4,1fr)}}
.numbers>div{background:var(--s1);padding:22px} .numbers b{display:block;font-family:var(--mono);font-size:1.9rem;font-weight:500;letter-spacing:-.03em} .numbers span{display:block;margin-top:6px;font-size:12.5px;color:var(--fg-3)}
.steps{display:grid;gap:14px} @media (min-width:900px){.steps{grid-template-columns:repeat(3,1fr)}} .step{padding:22px;display:grid;gap:10px;align-content:start} .step .n{width:32px;height:32px;border-radius:50%;background:var(--acc);color:#0A0A0D;display:grid;place-items:center;font-weight:800;font-size:13px} .step h3{font-size:1.05rem;letter-spacing:-.015em} .step p{font-size:13.5px;color:var(--fg-2)} .step code{font-family:var(--mono);font-size:12px;background:var(--s2);border:1px solid var(--line);padding:2px 6px;border-radius:6px;word-break:break-all} .step code.block{display:block;padding:10px 12px;border-radius:10px;font-size:12.5px;line-height:1.5;margin:4px 0 2px}
.tbl{overflow:hidden} .tbl .scroll{overflow:auto} table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:640px} th{text-align:left;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;color:var(--fg-3);padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap} td{padding:12px 18px;border-bottom:1px solid var(--line);white-space:nowrap} tr:last-child td{border-bottom:0} td.num,th.num{text-align:right;font-family:var(--mono)} tbody tr:hover{background:var(--s2)}
.ico{width:32px;height:32px;border-radius:9px;background:var(--s3);border:1px solid var(--line-2);display:inline-grid;place-items:center;font-family:var(--mono);font-size:10px;color:var(--fg-2);vertical-align:middle;margin-right:10px}
.section{padding:88px 0} @media (min-width:960px){.section{padding:112px 0}} .section-h{max-width:58ch;margin-bottom:40px} .section-h .lead{margin-top:12px}
.split{display:grid;gap:40px} @media (min-width:900px){.split{grid-template-columns:1fr 1fr;gap:64px;align-items:start}}
.kv{display:grid} .kv>div{display:grid;grid-template-columns:1fr auto;gap:16px;padding:14px 0;border-top:1px solid var(--line)} .kv>div:last-child{border-bottom:1px solid var(--line)} .kv b{font-weight:700} .kv span{color:var(--fg-3);font-size:12.5px;display:block} .kv em{font-style:normal;font-family:var(--mono);font-size:13px;color:var(--fg-2)}
details{border-top:1px solid var(--line)} details:last-child{border-bottom:1px solid var(--line)} summary{list-style:none;cursor:pointer;padding:18px 0;font-weight:700;display:flex;justify-content:space-between;align-items:center;gap:16px} summary::-webkit-details-marker{display:none} summary::after{content:"";width:9px;height:9px;border-right:1.5px solid var(--fg-3);border-bottom:1.5px solid var(--fg-3);transform:rotate(45deg);transition:transform 160ms;margin-right:4px} details[open] summary::after{transform:rotate(-135deg)} details p{padding-bottom:18px;color:var(--fg-2);max-width:64ch}
.cta{padding:96px 0} .cta .card{padding:56px 24px;text-align:center;background:linear-gradient(var(--s1),var(--s1)) padding-box;position:relative;overflow:hidden} .cta .lead{margin:12px auto 26px;max-width:46ch}
footer{padding:56px 0 40px;font-size:13px;color:var(--fg-2);border-top:1px solid var(--line)} .foot{display:grid;gap:28px} @media (min-width:800px){.foot{grid-template-columns:2fr 1fr 1fr 1fr}} .foot h4{margin:0 0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-4)} .foot li{margin:6px 0} .foot a:hover{color:var(--fg)}
.legal{margin-top:32px;padding-top:16px;border-top:1px solid var(--line);font-size:11px;line-height:1.6;color:var(--fg-4);max-width:100ch}
.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,16px);opacity:0;padding:10px 16px;border-radius:999px;font-size:13.5px;font-weight:600;background:var(--fg);color:#0A0A0D;transition:all 200ms var(--ease);z-index:80;pointer-events:none} .toast.show{opacity:1;transform:translate(-50%,0)}