@import url('https://fonts.googleapis.com/css2?family=DynaPuff:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500&family=Space+Grotesk:wght@400;500;600;700&display=swap');

:root { color-scheme: dark; --black:#050507; --panel:#0c0c11; --white:#f7f7f2; --muted:#9696a2; --line:rgba(255,255,255,.13); --violet:#7657ff; --blue:#15a8ff; --green:#8dff54; --spectrum:linear-gradient(110deg,var(--violet),var(--blue) 48%,var(--green)); --display:"DynaPuff",Arial,sans-serif; --body:"Space Grotesk",Arial,sans-serif; --mono:"IBM Plex Mono",Consolas,monospace; }
* { box-sizing:border-box; }
html { max-width:100%; overflow-x:clip; background:var(--black); scroll-behavior:smooth; }
body { max-width:100%; margin:0; overflow-x:clip; background:var(--black); color:var(--white); font-family:var(--body); -webkit-font-smoothing:antialiased; }
a { color:inherit; } button { font:inherit; } ::selection { background:var(--green); color:var(--black); }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:10px 14px; background:var(--white); color:var(--black); transform:translateY(-160%); }
.skip-link:focus { transform:none; } a:focus-visible,button:focus-visible { outline:2px solid var(--green); outline-offset:3px; }
.light-nav { position:absolute; z-index:10; inset:0 0 auto; height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 max(22px,calc((100vw - 1360px)/2)); border-bottom:1px solid var(--line); }
.light-brand { display:inline-flex; align-items:center; gap:10px; width:max-content; font:600 25px/1 var(--display); text-decoration:none; }
.light-brand img { width:34px; height:34px; }
.light-nav-status,.light-kicker { display:flex; align-items:center; gap:9px; color:var(--muted); font:500 10px var(--mono); text-transform:uppercase; }
.light-nav-status i,.light-kicker span { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 16px var(--green); }
.light-nav nav { display:flex; align-items:center; justify-content:flex-end; gap:25px; }
.light-nav nav a { color:#c8c8cf; font-size:13px; font-weight:600; text-decoration:none; }
.light-nav nav a:hover { color:var(--white); }
.light-nav-cta,.light-button { display:inline-flex; align-items:center; justify-content:center; gap:18px; min-height:44px; padding:0 18px; border:1px solid var(--line); border-radius:5px; text-decoration:none; transition:transform .2s ease,background .2s ease,color .2s ease; }
.light-nav-cta,.light-button-primary { border:0; background:var(--white); color:var(--black)!important; }
.light-nav-cta:hover,.light-button-primary:hover { background:var(--green); transform:translateY(-2px); }
.light-hero { position:relative; min-height:720px; height:100svh; display:grid; grid-template-columns:minmax(0,.9fr) minmax(470px,1.1fr); align-items:center; gap:clamp(35px,6vw,100px); overflow:hidden; padding:116px max(22px,calc((100vw - 1360px)/2)) 62px; }
.light-hero::after { content:"MOTION"; position:absolute; left:-1vw; bottom:-5vw; color:transparent; font:700 min(19vw,280px)/1 var(--display); -webkit-text-stroke:1px rgba(255,255,255,.055); pointer-events:none; }
.light-beam-canvas,.light-final-canvas,.motion-grid { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.motion-grid { opacity:.7; background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size:72px 72px; mask-image:linear-gradient(to right,transparent,#000 45%,#000); }
.light-hero-copy,.light-live-card { position:relative; z-index:2; min-width:0; }
.light-kicker { margin:0 0 22px; letter-spacing:.12em; }
.light-hero h1,.light-rules h2,.light-market-section h2,.light-proof h2 { margin:0; font:600 clamp(66px,7.2vw,112px)/.88 var(--display); letter-spacing:0; }
.light-hero h1 em,.light-rules h2 em,.light-market-section h2 em,.light-proof h2 em { background:var(--spectrum); color:transparent; font-style:normal; background-clip:text; -webkit-background-clip:text; }
.light-lede { max-width:510px; margin:28px 0 0; color:#b3b3bd; font-size:17px; line-height:1.6; text-wrap:pretty; }
.light-hero-actions { display:flex; align-items:center; gap:25px; margin-top:31px; }
.light-button { min-height:52px; padding-inline:22px; font-size:14px; font-weight:700; }
.light-text-link { display:inline-flex; gap:12px; color:#c6c6ce; font-size:13px; font-weight:600; text-decoration:none; }
.light-text-link:hover { color:var(--green); }
.light-live-card { width:100%; padding:18px; border:1px solid var(--line); border-radius:7px; background:rgba(8,8,12,.9); box-shadow:0 32px 90px rgba(0,0,0,.45); }
.light-live-card::before { content:"OUTCOME FIELD"; position:absolute; right:2px; top:-25px; color:#73737f; font:500 9px var(--mono); letter-spacing:.12em; }
.light-card-top,.light-demo-head,.light-demo-ticket,.light-card-meter { display:flex; align-items:center; justify-content:space-between; }
.light-card-top { padding-bottom:14px; border-bottom:1px solid var(--line); color:#7d7d88; font:500 9px var(--mono); text-transform:uppercase; }
.light-card-top b { display:flex; align-items:center; gap:7px; color:var(--green); font-weight:500; }
.light-card-top i { width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 1.8s ease infinite; }
.light-demo-head { padding:18px 2px 13px; }
.light-demo-head div { display:grid; gap:3px; }
.light-demo-head small,.light-demo-ticket small { color:#767681; font:500 8px var(--mono); text-transform:uppercase; }
.light-demo-head strong { font-size:29px; font-weight:600; font-variant-numeric:tabular-nums; }
.light-demo-head>span { color:#888894; font:500 8px var(--mono); text-transform:uppercase; }
.light-demo-head b { color:var(--white); }
.light-demo-stage { display:grid; grid-template-columns:minmax(140px,.75fr) minmax(230px,1.25fr); min-height:292px; border-block:1px solid var(--line); }
.demo-trace { position:relative; overflow:hidden; border-right:1px solid var(--line); background:repeating-linear-gradient(0deg,transparent 0 35px,rgba(255,255,255,.05) 35px 36px); }
.demo-trace::before { content:""; position:absolute; width:190%; height:80px; left:-95%; top:96px; border-top:4px solid var(--blue); border-radius:50%; transform:rotate(-8deg); box-shadow:0 -3px 18px rgba(21,168,255,.4); }
.demo-trace i { position:absolute; right:-6px; top:112px; width:12px; height:12px; border-radius:50%; background:var(--white); box-shadow:0 0 22px var(--blue); }
.light-demo-field { display:grid; grid-template-columns:1fr 1fr; gap:5px; padding:6px; }
.light-demo-field button { min-height:82px; display:grid; align-content:space-between; padding:12px; border:1px solid rgba(255,255,255,.11); border-radius:4px; background:#111117; color:var(--white); text-align:left; cursor:pointer; transition:transform .18s ease,border-color .18s ease,background .18s ease; }
.light-demo-field button:last-child { grid-column:span 2; min-height:55px; }
.light-demo-field button:hover { border-color:var(--blue); transform:translateY(-2px); }
.light-demo-field button span { color:#8b8b96; font:500 8px var(--mono); }
.light-demo-field button b { justify-self:end; font-size:19px; }
.light-demo-field button.is-picked { border-color:transparent; background:var(--spectrum); color:var(--black); }
.light-demo-field button.is-picked span { color:rgba(0,0,0,.62); }
.light-demo-ticket { gap:12px; padding:13px 0; border-bottom:1px solid var(--line); }
.light-demo-ticket>span { display:grid; gap:4px; }
.light-demo-ticket strong { font-size:13px; }
.light-demo-ticket a { min-height:36px; display:flex; align-items:center; gap:12px; padding:0 14px; border-radius:4px; background:var(--white); color:var(--black); font-size:11px; font-weight:700; text-decoration:none; }
.light-card-meter { gap:12px; padding-top:14px; color:#696974; font:500 8px var(--mono); text-transform:uppercase; }
.light-card-meter>i { flex:1; height:3px; overflow:hidden; background:#202027; }
.light-card-meter b { display:block; width:64%; height:100%; background:var(--spectrum); animation:meter 3.8s ease-in-out infinite; }
.light-card-meter em { color:#9898a2; font-style:normal; }
.light-scroll { position:absolute; z-index:3; left:max(22px,calc((100vw - 1360px)/2)); bottom:24px; display:flex; align-items:center; gap:10px; color:#676772; font:500 8px var(--mono); text-transform:uppercase; }
.light-scroll i { width:38px; height:1px; background:#53535d; }
.light-rules,.light-market-section,.light-proof { padding:clamp(86px,9vw,138px) max(22px,calc((100vw - 1360px)/2)); border-top:1px solid var(--line); }
.light-rules>header { display:grid; grid-template-columns:1fr minmax(280px,.55fr); align-items:end; gap:70px; }
.light-rules header p:last-child,.light-market-section>header>p,.light-proof-copy>p:not(.light-kicker) { margin:0 0 8px; color:#9999a4; font-size:15px; line-height:1.65; }
.light-rules h2,.light-market-section h2,.light-proof h2 { font-size:clamp(52px,6vw,86px); }
.light-rule-grid { list-style:none; display:grid; grid-template-columns:repeat(3,1fr); gap:0; margin:62px 0 0; padding:0; border-block:1px solid var(--line); }
.light-rule-grid li { min-height:255px; display:flex; flex-direction:column; padding:25px; border-right:1px solid var(--line); }
.light-rule-grid li:last-child { border:0; }
.light-rule-grid li>span,.light-market-number { color:#666671; font:500 8px var(--mono); }
.light-rule-grid h3 { max-width:12ch; margin:auto 0 12px; font:600 28px/1.05 var(--display); }
.light-rule-grid p { max-width:32ch; margin:0; color:#8e8e99; font-size:13px; line-height:1.55; }
.light-market-section { background:#09090c; }
.light-market-section>header { display:flex; align-items:flex-end; justify-content:space-between; gap:60px; }
.light-market-section>header>p { max-width:430px; }
.light-market-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:8px; margin-top:58px; }
.light-market-card { min-height:166px; display:grid; grid-template-columns:auto 52px 1fr auto; align-items:center; gap:16px; padding:20px; border:1px solid var(--line); border-radius:5px; background:#0f0f14; text-decoration:none; transition:background .2s ease,transform .2s ease,border-color .2s ease; }
.light-market-card:nth-child(3) { background:linear-gradient(145deg,rgba(118,87,255,.18),#0f0f14 55%); }
.light-market-card:nth-child(4) { background:linear-gradient(145deg,rgba(141,255,84,.1),#0f0f14 55%); }
.light-market-main { grid-row:span 2; min-height:340px; grid-template-columns:auto 86px 1fr; align-content:center; background:linear-gradient(150deg,rgba(21,168,255,.2),#0f0f14 55%); }
.light-market-card:hover { border-color:#858591; background:#17171e; transform:translateY(-3px); }
.light-market-card img { width:52px; height:52px; border-radius:50%; object-fit:cover; background:white; }
.light-market-main img { width:86px; height:86px; }
.light-market-number { align-self:start; }
.light-market-card div { display:grid; gap:4px; }
.light-market-card small,.light-market-card b { color:#74747f; font:500 8px var(--mono); text-transform:uppercase; }
.light-market-card strong { font:600 27px/1 var(--display); }
.light-market-main strong { font-size:46px; }
.light-market-card>i { width:34px; height:34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; font-style:normal; }
.light-proof { display:grid; grid-template-columns:1fr minmax(400px,.85fr); align-items:center; gap:clamp(55px,9vw,140px); }
.light-proof-copy>p:not(.light-kicker) { max-width:550px; margin:27px 0 31px; }
.light-proof-board { position:relative; overflow:hidden; padding:18px 24px; border:1px solid var(--line); background:#09090d; }
.light-proof-board header,.light-proof-board>div,.light-proof-board footer { position:relative; z-index:2; min-height:68px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.light-proof-board header { justify-content:flex-start; gap:11px; font:600 19px var(--display); }
.light-proof-board header img { width:34px; height:34px; }
.light-proof-board header b { margin-left:auto; color:var(--green); font:500 8px var(--mono); text-transform:uppercase; }
.light-proof-board>div>span,.light-proof-board footer { color:#74747e; font:500 8px var(--mono); text-transform:uppercase; }
.light-proof-board strong { display:flex; align-items:center; gap:8px; font-size:13px; }
.light-proof-board strong i { width:6px; height:6px; border-radius:50%; background:var(--green); }
.light-proof-board footer { border:0; }
.light-proof-board footer b { color:var(--green); }
.light-footer { min-height:98px; display:grid; grid-template-columns:1fr auto auto auto; align-items:center; gap:32px; padding:0 max(22px,calc((100vw - 1360px)/2)); border-top:1px solid var(--line); color:#73737e; font:500 8px var(--mono); text-transform:uppercase; }
.light-footer .light-brand { color:var(--white); text-transform:none; }
.light-footer>a:not(.light-brand) { color:#aaaab4; }
@keyframes pulse { 50% { opacity:.4; transform:scale(.75); } } @keyframes meter { 50% { width:91%; } }
@media(max-width:900px){ .light-nav{grid-template-columns:1fr auto;padding:0 18px}.light-nav-status,.light-nav nav>a:not(.light-nav-cta){display:none}.light-hero{height:auto;min-height:1040px;grid-template-columns:1fr;align-content:start;gap:62px;padding:130px 20px 70px}.light-hero-copy{max-width:680px}.light-live-card{max-width:650px;justify-self:center}.light-scroll{display:none}.light-rules>header{grid-template-columns:1fr;gap:25px}.light-rule-grid{grid-template-columns:1fr}.light-rule-grid li{min-height:210px;border-right:0;border-bottom:1px solid var(--line)}.light-rule-grid li:last-child{border-bottom:0}.light-market-section>header{align-items:flex-start;flex-direction:column;gap:24px}.light-market-grid{grid-template-columns:1fr 1fr}.light-market-main{grid-column:span 2;grid-row:auto;min-height:250px}.light-proof{grid-template-columns:1fr}.light-footer{grid-template-columns:1fr auto;padding-block:23px} }
@media(max-width:560px){ .light-nav{height:68px}.light-brand{font-size:21px}.light-brand img{width:31px;height:31px}.light-nav-cta{min-height:38px;padding:0 12px;font-size:11px}.light-hero{min-height:940px;gap:50px;padding:108px 15px 58px}.light-hero h1{font-size:clamp(50px,15vw,66px)}.light-lede{font-size:14px}.light-hero-actions{align-items:flex-start;flex-direction:column;gap:17px}.light-button{min-height:48px}.light-live-card{padding:11px}.light-demo-stage{grid-template-columns:82px 1fr;min-height:272px}.light-demo-field button{min-height:76px;padding:9px}.light-demo-field button b{font-size:16px}.light-card-meter em{display:none}.light-rules,.light-market-section,.light-proof{padding-inline:15px}.light-rules h2,.light-market-section h2,.light-proof h2{font-size:48px}.light-market-grid{grid-template-columns:1fr}.light-market-main{grid-column:auto;min-height:210px;grid-template-columns:auto 66px 1fr}.light-market-main img{width:66px;height:66px}.light-market-card{min-height:140px;padding:15px;grid-template-columns:auto 46px 1fr auto}.light-market-card img{width:46px;height:46px}.light-market-main strong{font-size:34px}.light-proof-board{padding:11px 15px}.light-footer{gap:16px}.light-footer>span:first-of-type{display:none} }
@media(prefers-reduced-motion:reduce){ *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important} }