:root { --ink:#e9f0f7; --muted:#92a1b1; --lime:#c5f569; --lime-dark:#87a94a; --line:rgba(204,225,242,.13); --panel:#101a27; --deep:#07101a; --display:"Manrope",system-ui,sans-serif; --mono:"DM Mono",monospace; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--deep); font-family:var(--display); overflow-x:hidden; } .grid-background { position:fixed; inset:0; z-index:-2; background:linear-gradient(rgba(149,181,203,.034) 1px,transparent 1px),linear-gradient(90deg,rgba(149,181,203,.034) 1px,transparent 1px); background-size:48px 48px; mask-image:linear-gradient(to bottom,black 5%,transparent 75%); }
.site-header,.section-shell,footer { width:min(1160px,calc(100% - 48px)); margin:auto; }.site-header { height:92px; display:flex; justify-content:space-between; align-items:center; }.brand { display:flex; align-items:center; gap:11px; color:#fff; text-decoration:none; font-size:14px; letter-spacing:-.3px; }.brand strong { color:var(--lime); font-weight:700; }.brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#0b1420; background:var(--lime); border-radius:10px 10px 10px 2px; font:700 11px var(--mono); }.site-nav { display:flex; align-items:center; gap:29px; }.site-nav a { color:var(--muted); font-size:13px; font-weight:600; text-decoration:none; }.site-nav a:hover { color:#fff; }.site-nav .nav-button { color:var(--lime); border:1px solid rgba(197,245,105,.35); padding:10px 15px; border-radius:6px; }.menu-toggle { display:none; }
.hero { min-height:610px; display:grid; grid-template-columns:1.01fr .99fr; align-items:center; gap:55px; padding:61px 0 75px; }.eyebrow { color:var(--lime); font:500 11px var(--mono); letter-spacing:1.45px; margin:0 0 18px; }.status-dot { display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:8px; background:var(--lime); box-shadow:0 0 0 5px rgba(197,245,105,.1); }.hero h1,.section-heading h2,.get-started h2 { font-size:clamp(39px,5vw,61px); line-height:1.08; letter-spacing:-3px; margin:0; font-weight:800; }.hero h1 em { color:var(--lime); font-style:normal; }.hero-text { color:var(--muted); max-width:500px; font-size:15px; line-height:1.75; margin:25px 0 29px; }.hero-actions { display:flex; gap:13px; }.button { border-radius:6px; font-size:13px; font-weight:700; text-decoration:none; padding:14px 19px; transition:transform .2s,background .2s; }.button:hover { transform:translateY(-2px); }.button-primary { color:#0b1420; background:var(--lime); }.button-primary span { margin-left:15px; font-size:17px; }.button-quiet { color:#d5e0e9; border:1px solid var(--line); }.hero-meta { display:flex; gap:30px; margin-top:46px; }.hero-meta div { display:flex; flex-direction:column; gap:3px; }.hero-meta strong { font-size:17px; letter-spacing:-.5px; }.hero-meta span { color:var(--muted); font-size:10px; }
.hero-visual { position:relative; transform:rotate(1.5deg); box-shadow:0 32px 70px rgba(0,0,0,.36); border:1px solid rgba(198,222,242,.22); border-radius:12px; overflow:hidden; background:#0d1724; }.window-bar { height:42px; display:flex; align-items:center; gap:6px; padding:0 13px; border-bottom:1px solid var(--line); background:#111e2d; }.window-bar>span { width:7px; height:7px; border-radius:50%; background:#526171; }.window-bar>span:nth-child(1){background:#ea7d78}.window-bar>span:nth-child(2){background:#d9bd67}.window-bar p { margin:0 auto; font:10px var(--mono); color:#8091a2; }.window-bar i { color:var(--lime); font:9px var(--mono); font-style:normal; }.game-stage { position:relative; height:330px; overflow:hidden; background:radial-gradient(circle at 50% 50%,#183154 0%,#0c1728 55%,#07101a 100%); }.stage-grid { position:absolute; inset:0; background:linear-gradient(rgba(158,202,241,.1) 1px,transparent 1px),linear-gradient(90deg,rgba(158,202,241,.1) 1px,transparent 1px); background-size:31px 31px; transform:perspective(300px) rotateX(51deg) scale(1.45) translateY(33px); transform-origin:center bottom; }.stage-orb { position:absolute; border-radius:50%; filter:blur(1px); }.orb-one { width:160px; height:160px; left:-45px; top:39px; background:rgba(69,111,222,.35); }.orb-two { width:100px; height:100px; right:21px; bottom:-22px; background:rgba(196,245,105,.16); }.player { position:absolute; left:47%; top:44%; width:45px; height:45px; border-radius:12px; background:var(--lime); box-shadow:0 0 0 9px rgba(197,245,105,.13),0 17px 21px rgba(0,0,0,.3); transform:rotate(16deg); }.player i { position:absolute; width:6px; height:6px; border-radius:50%; background:#17233a; top:14px; }.player i:first-child{left:12px}.player i:last-child{right:12px}.stage-card { position:absolute; top:17px; left:17px; display:flex; flex-direction:column; padding:10px 13px; background:rgba(8,16,27,.74); border:1px solid rgba(255,255,255,.1); border-radius:6px; }.stage-card span,.stage-card small { color:#8291a5; font:9px var(--mono); }.stage-card strong { margin:4px 0; font-size:14px; }.stage-hud { position:absolute; bottom:13px; right:14px; display:flex; gap:8px; }.stage-hud span { padding:7px 9px; color:#8291a5; background:rgba(7,16,26,.74); border-radius:4px; font:9px var(--mono); }.stage-hud b { color:var(--lime); }.window-footer { height:31px; display:flex; align-items:center; gap:14px; padding:0 14px; background:#101a27; color:#8494a6; font:9px var(--mono); }
.features { padding:116px 0; }.section-heading { display:grid; grid-template-columns:1fr 1.25fr; column-gap:70px; margin-bottom:47px; }.section-heading .eyebrow { grid-column:1; }.section-heading h2 { grid-column:1; grid-row:2; font-size:42px; }.section-heading>p:last-child { grid-column:2; grid-row:2; color:var(--muted); max-width:370px; align-self:end; line-height:1.75; font-size:14px; margin:0; }.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border:1px solid var(--line); border-radius:9px; overflow:hidden; }.feature-card { min-height:275px; padding:27px; background:rgba(14,25,38,.64); border-right:1px solid var(--line); border-bottom:1px solid var(--line); position:relative; }.feature-card:nth-child(3n){border-right:0}.feature-card:nth-last-child(-n+3){border-bottom:0}.feature-card:hover,.feature-highlight { background:#172638; }.feature-number { position:absolute; right:25px; top:24px; color:#627184; font:10px var(--mono); }.feature-icon { display:grid; place-items:center; width:35px; height:35px; margin-bottom:27px; color:var(--lime); border:1px solid rgba(197,245,105,.33); border-radius:7px; font-size:19px; }.camera-icon { border-radius:50%; }.feature-card h3 { font-size:16px; margin:0 0 9px; }.feature-card p { color:var(--muted); font-size:12px; line-height:1.7; max-width:260px; margin:0 0 19px; }.feature-card a { color:var(--lime); font:11px var(--mono); text-decoration:none; }.feature-card a span { margin-left:5px; }
.architecture { padding:110px 0; border-top:1px solid var(--line); }.section-heading.compact { display:block; margin-bottom:42px; }.section-heading.compact h2 { max-width:580px; font-size:42px; }.architecture-layout { display:grid; grid-template-columns:.9fr 1.1fr; gap:38px; align-items:stretch; }.module-list { border-top:1px solid var(--line); }.module-button { width:100%; padding:20px 5px; display:flex; gap:16px; align-items:center; color:#b8c5d1; text-align:left; background:transparent; border:0; border-bottom:1px solid var(--line); cursor:pointer; font-family:inherit; }.module-button b { color:#687789; font:10px var(--mono); }.module-button span { display:flex; flex-direction:column; gap:4px; }.module-button strong { font-size:13px; }.module-button small { color:#728297; font-size:11px; }.module-button i { margin-left:auto; color:var(--lime); opacity:0; font-style:normal; transition:opacity .2s,transform .2s; }.module-button.active,.module-button:hover { color:#fff; }.module-button.active i,.module-button:hover i { opacity:1; transform:translateX(3px); }.code-panel { min-height:326px; border:1px solid rgba(194,220,240,.2); border-radius:8px; overflow:hidden; background:#0a131d; box-shadow:0 19px 42px rgba(0,0,0,.21); }.code-top { height:43px; display:flex; align-items:center; gap:10px; padding:0 14px; border-bottom:1px solid var(--line); color:#8292a5; font:10px var(--mono); }.code-dots { display:flex; gap:5px; }.code-dots i { width:6px;height:6px;border-radius:50%;background:#5c6d80; }.code-top button { margin-left:auto; padding:5px 9px; color:var(--lime); background:transparent; border:1px solid rgba(197,245,105,.25); border-radius:3px; cursor:pointer; font:9px var(--mono); }.code-panel pre { margin:0; padding:24px; overflow:auto; }.code-panel code { color:#c2cfdd; font:12px/1.85 var(--mono); white-space:pre; }.syntax-keyword{color:#ff9db1}.syntax-object{color:#a9e8ff}.syntax-function{color:#d9ee91}.syntax-string{color:#f2c789}.syntax-comment{color:#617387}
.principles { padding:90px 0 115px; }.principles> .eyebrow { margin-bottom:30px; }.principles-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:54px; }.principles-grid article { border-top:1px solid var(--line); padding-top:22px; }.principles-grid span { color:var(--lime); font:500 21px var(--mono); }.principles-grid h3 { margin:23px 0 10px; font-size:17px; }.principles-grid p { color:var(--muted); margin:0; font-size:13px; line-height:1.75; }
.get-started { display:grid; grid-template-columns:1fr 1fr; gap:90px; margin-bottom:100px; padding:63px 72px; border-radius:12px; background:linear-gradient(120deg,#1c3344,#102031 68%,#10271f); overflow:hidden; position:relative; }.get-started:after { content:"LS"; position:absolute; right:25px; bottom:-69px; color:rgba(197,245,105,.055); font:800 260px var(--display); letter-spacing:-32px; }.get-started h2 { font-size:43px; position:relative; z-index:1; }.get-started-copy>p:not(.eyebrow) { color:#b1c0ca; font-size:13px; line-height:1.75; max-width:415px; margin:19px 0 25px; }.get-started-copy .button { position:relative; z-index:1; display:inline-block; }.steps { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:space-between; gap:27px; }.step { display:flex; gap:17px; }.step>b { width:25px;height:25px;flex:0 0 25px;display:grid;place-items:center;color:#1b2a37;background:var(--lime);border-radius:50%;font:10px var(--mono); }.step span { color:var(--lime); font:9px var(--mono); letter-spacing:1px; }.step h3 { margin:5px 0 4px; font-size:14px; }.step p { margin:0; color:#b3c2ce; font-size:12px; line-height:1.6; }.step code { display:inline-block; margin-top:7px; color:#fff; padding:6px 9px; border-radius:4px; background:#09131d; font:11px var(--mono); }.step p code { margin:0; padding:1px 4px; color:var(--lime); }
.cli-callout { display:grid; grid-template-columns:.55fr 1.1fr 1fr; align-items:center; gap:30px; margin-bottom:110px; padding:30px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }.cli-callout .eyebrow { margin:0; }.cli-callout h2 { margin:0 0 8px; font-size:21px; letter-spacing:-.8px; }.cli-callout p:not(.eyebrow) { margin:0; color:var(--muted); font-size:12px; line-height:1.6; }.cli-command { display:flex; align-items:center; gap:8px; padding:13px 14px; color:#dce7ef; background:#0b151f; border:1px solid rgba(197,245,105,.26); border-radius:6px; font:11px var(--mono); }.cli-command>span { color:var(--lime); }.cli-command button { margin-left:auto; color:var(--lime); background:transparent; border:0; cursor:pointer; font:10px var(--mono); }
footer { min-height:100px; display:flex; align-items:center; gap:35px; border-top:1px solid var(--line); color:#77889b; font-size:11px; } footer p { margin-left:auto; } footer span:last-child { font:10px var(--mono); }
@media (max-width:800px) { .site-header,.section-shell,footer{width:min(100% - 32px,600px)}.site-header{height:75px}.menu-toggle{display:flex;flex-direction:column;gap:5px;padding:5px;background:transparent;border:0}.menu-toggle span{display:block;width:21px;height:1px;background:#fff}.site-nav{display:none;position:absolute;top:68px;left:16px;right:16px;padding:17px;background:#132131;border:1px solid var(--line);border-radius:8px;flex-direction:column;align-items:stretch;gap:16px;z-index:3}.site-nav.open{display:flex}.site-nav .nav-button{text-align:center}.hero{grid-template-columns:1fr;gap:50px;padding:55px 0 70px}.hero h1{font-size:44px;letter-spacing:-2.3px}.hero-meta{gap:18px}.hero-visual{max-width:540px;width:100%;justify-self:center}.game-stage{height:270px}.section-heading{display:block}.section-heading h2{font-size:36px;margin-bottom:19px}.section-heading>p:last-child{font-size:13px}.feature-grid{grid-template-columns:1fr 1fr}.feature-card:nth-child(3n){border-right:1px solid var(--line)}.feature-card:nth-child(2n){border-right:0}.feature-card:nth-last-child(-n+3){border-bottom:1px solid var(--line)}.feature-card:nth-last-child(-n+2){border-bottom:0}.architecture-layout,.get-started{grid-template-columns:1fr;gap:35px}.get-started{padding:42px 29px;margin-bottom:65px}.principles-grid{gap:30px}.get-started h2{font-size:36px}footer{padding:23px 0;flex-wrap:wrap;gap:12px}footer p{margin-left:0;width:100%;order:3} }
@media (max-width:480px) { .hero h1{font-size:38px}.hero-meta{gap:12px}.hero-meta strong{font-size:14px}.hero-meta span{font-size:9px}.hero-actions{flex-wrap:wrap}.feature-grid,.principles-grid{grid-template-columns:1fr}.feature-card,.feature-card:nth-child(3n){border-right:0}.feature-card:nth-last-child(-n+2){border-bottom:1px solid var(--line)}.feature-card:last-child{border-bottom:0}.principles-grid{gap:25px}.principles{padding:65px 0}.window-footer{gap:8px;font-size:8px}.stage-hud{display:none}.section-heading h2,.get-started h2{font-size:32px}.code-panel pre{padding:17px}.code-panel code{font-size:10px} }
@media (max-width:800px) { .cli-callout { grid-template-columns:1fr; gap:22px; margin-bottom:70px; } }