@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=IBM+Plex+Mono:wght@400;500;600&family=Inter:wght@400;500;600&display=swap');:root{color-scheme:dark;--bg:#090d13;--panel:#121923;--line:#27313c;--text:#f1f5f9;--muted:#9ca9b6;--cyan:#7de5e4;--red:#ed5c60}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,sans-serif}a{color:inherit;text-decoration:none}.wrap{max-width:1180px;margin:auto;padding-left:26px;padding-right:26px}.scanlines{position:fixed;inset:0;pointer-events:none;z-index:10;opacity:.08;background:repeating-linear-gradient(to bottom,transparent 0,transparent 3px,#000 4px)}.nav{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(26px,calc((100vw - 1128px)/2));gap:20px}.brand{font:700 17px 'IBM Plex Mono',monospace;white-space:nowrap}.brand small{display:block;color:#7e8d9b;font-size:9px;letter-spacing:2px;margin-top:4px}.dot,.live{display:inline-block;width:8px;height:8px;background:var(--red);border-radius:50%;box-shadow:0 0 12px var(--red)}nav{display:flex;gap:28px}nav a{font-size:12px;color:#b4bec8}nav a:hover,.lang:hover{color:var(--cyan)}.lang{border:1px solid #4b6670;background:transparent;color:white;padding:10px 15px;cursor:pointer;font-family:'IBM Plex Mono',monospace}.hero{padding-top:88px}.eyebrow,.section-label{font:600 11px 'IBM Plex Mono',monospace;color:var(--cyan);letter-spacing:2px}.live{background:var(--cyan);box-shadow:0 0 10px var(--cyan);margin-right:10px}.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-top:26px}h1,h2,h3{font-family:'Barlow Condensed',sans-serif}h1{font-size:clamp(64px,7vw,108px);font-weight:900;line-height:.89;letter-spacing:-1px;margin:15px 0 27px}h1 em{font-style:normal;color:var(--red)}.subtitle{display:block;color:var(--cyan);font-size:.3em;letter-spacing:5px;margin-top:20px}.lead{max-width:530px;font-size:16px;line-height:1.8;color:var(--muted)}.actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:30px}.actions a{font:600 11px 'IBM Plex Mono',monospace;letter-spacing:.3px;padding:17px 21px;border:1px solid var(--cyan)}.primary{background:var(--cyan);color:#061014}.secondary{color:var(--cyan)}.actions a:hover{transform:translateY(-2px);filter:brightness(1.12)}.monitor{height:360px;border:12px solid #1d2730;background:radial-gradient(ellipse at 50% 45%,#26313c,#080c11 70%);box-shadow:0 25px 70px #0009,inset 0 0 45px #000;border-radius:14px;display:flex;flex-direction:column;justify-content:space-between;padding:16px;position:relative;overflow:hidden}.monitor:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 4px,#ffffff08 5px);pointer-events:none}.monitor-head,.monitor-foot{display:flex;justify-content:space-between;font:10px 'IBM Plex Mono',monospace;color:#b8c8d2;letter-spacing:1px}.rec{color:var(--red)}.monitor-center{text-align:center;color:#738593;font:12px 'IBM Plex Mono',monospace;letter-spacing:4px}.eyes{color:#f2f2f2;font-size:34px;text-shadow:0 0 18px white;margin-bottom:28px}.metrics{display:grid;grid-template-columns:repeat(4,1fr);margin-top:95px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.metrics div{padding:25px 20px;border-right:1px solid var(--line)}.metrics div:last-child{border:0}.metrics b{display:block;font:700 35px 'Barlow Condensed',sans-serif}.metrics span{font:10px 'IBM Plex Mono',monospace;color:var(--muted);letter-spacing:1px}.section{padding-top:110px;padding-bottom:110px}h2{font-size:clamp(40px,5vw,64px);line-height:1.05;margin:20px 0 22px}.section-intro{max-width:750px;color:var(--muted);line-height:1.9}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:42px}.feature-grid article{background:var(--panel);border:1px solid var(--line);padding:28px;min-height:215px}.feature-grid article>span{font:13px 'IBM Plex Mono',monospace;color:var(--cyan)}h3{font-size:29px;margin:20px 0 10px}.feature-grid p,.engineering-copy p,.timeline p,.contact p{font-size:14px;line-height:1.8;color:var(--muted)}.engineering{background:#0e141c;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.engineering-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:center;margin-top:38px}.terminal{background:#070c11;border:1px solid #344451;box-shadow:0 12px 40px #0006}.terminal-bar{background:#1d2933;padding:15px;font:11px 'IBM Plex Mono',monospace;color:#e2eaf0;display:flex;justify-content:space-between}.terminal-bar span{color:var(--cyan)}pre{padding:24px;font:12px/2 'IBM Plex Mono',monospace;color:var(--cyan);white-space:pre-wrap}.chips{display:flex;flex-wrap:wrap;gap:9px;margin-top:25px}.chips span{border:1px solid #38545a;color:#bde5e5;font:11px 'IBM Plex Mono',monospace;padding:9px}.timeline{margin-top:38px;border-left:1px solid #45616c;padding-left:27px}.timeline div{position:relative;margin-bottom:30px}.timeline div:before{content:"";position:absolute;left:-33px;top:4px;width:10px;height:10px;border-radius:50%;background:var(--cyan)}.timeline strong{font:700 18px 'IBM Plex Mono',monospace}.timeline p{margin:8px 0}.contact{border-top:1px solid var(--line)}.contact p{max-width:690px}footer{padding:28px max(26px,calc((100vw - 1128px)/2));border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:24px;color:#788692;font:10px/1.7 'IBM Plex Mono',monospace}@media(max-width:850px){nav{display:none}.hero-grid,.engineering-grid{grid-template-columns:1fr}.hero{padding-top:56px}.monitor{height:290px}.metrics{margin-top:55px}.feature-grid{grid-template-columns:1fr}.section{padding-top:75px;padding-bottom:75px}footer{flex-direction:column}}@media(max-width:480px){h1{font-size:63px}.metrics{grid-template-columns:repeat(2,1fr)}.metrics div:nth-child(2){border-right:0}.metrics div:nth-child(-n+2){border-bottom:1px solid var(--line)}.actions a{width:100%;text-align:center}.monitor{height:250px}}

/* Real project images and archival timeline */
.hero-shot{position:relative;display:flex;align-items:center;justify-content:center;background:#050608;border:1px solid #304858;border-radius:16px;padding:12px;min-width:0;box-shadow:0 0 65px rgba(0,190,220,.10)}
.hero-shot img{display:block;max-height:480px;max-width:100%;width:auto;object-fit:contain;image-rendering:pixelated}
.shot-note{position:absolute;bottom:12px;left:12px;background:#060a0dda;padding:6px 9px;font-family:monospace;color:#b4e0e8;font-size:11px}
.screenshot-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.screen-card{margin:0;background:#0b111a;border:1px solid #26323d;border-radius:12px;overflow:hidden}.screen-card a{display:block;padding:10px;background:#05070a;text-align:center}.screen-card img{width:100%;height:360px;object-fit:contain;image-rendering:pixelated}.screen-card figcaption{padding:12px;font-size:13px}.screen-card figcaption span{color:#74c9da}.screen-card a:hover{background:#10202a}.timeline.detailed{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.timeline.detailed>div{min-width:0}.timeline.detailed h3{font-size:15px;margin:8px 0}.timeline.detailed small{opacity:.6}.timeline.detailed p{font-size:13px}@media(max-width:950px){.screenshot-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.timeline.detailed{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:600px){.screenshot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.screen-card img{height:310px}.timeline.detailed{grid-template-columns:1fr}.hero-shot img{max-height:370px}}

/* Video showcase – native, accessible player with the original portrait framing. */
html{scroll-behavior:smooth;scroll-padding-top:92px}
.demo-section{position:relative;border-top:1px solid var(--line)}
.demo-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.demo-heading .section-intro{max-width:660px}
.demo-status,.detail-index{font:11px 'IBM Plex Mono',monospace;letter-spacing:.12em;color:#96dbe5;white-space:nowrap}
.status-led{display:inline-block;width:7px;height:7px;background:#27d6b7;border-radius:50%;box-shadow:0 0 13px #27d6b766;margin-right:8px}
.demo-layout{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(280px,.9fr);gap:40px;align-items:center;margin-top:38px}
.video-panel{background:#080d13;border:1px solid #304858;border-radius:16px;overflow:hidden;box-shadow:0 20px 80px rgba(0,0,0,.35),0 0 60px rgba(24,167,204,.07)}
.video-topline,.video-bottomline{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:13px 17px;color:#9cabb8;font:11px 'IBM Plex Mono',monospace;letter-spacing:.035em}
.video-topline{border-bottom:1px solid #253440}.video-bottomline{border-top:1px solid #253440}.video-bottomline a{color:#8ce7ee;text-decoration:none}.video-bottomline a:hover{text-decoration:underline}
.video-stage{background:radial-gradient(circle at 50% 35%,#18212e,#000 70%);display:flex;align-items:center;justify-content:center;padding:15px;max-height:740px;min-height:300px}
.video-stage video{display:block;max-height:700px;width:auto;max-width:100%;height:auto;aspect-ratio:658/972;object-fit:contain;background:#000;border:1px solid #253440;border-radius:4px}
.demo-details{max-width:420px}.demo-details h3{font-size:clamp(26px,3vw,40px);line-height:1.18;margin:18px 0}.demo-details>p{color:#9eafbd;line-height:1.8}.demo-specs{margin:30px 0;border-top:1px solid #293640}.demo-specs>div{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 0;border-bottom:1px solid #293640}.demo-specs span{font-size:13px;color:#92a5b3}.demo-specs strong{font:12px 'IBM Plex Mono',monospace;color:#e3e9ec;text-align:right}.demo-note{font-size:12px!important;color:#81909f!important}
/* Reveal animation: performant transform + opacity only. */
@media (prefers-reduced-motion: no-preference){.reveal-on-scroll{opacity:0;transform:translateY(18px);transition:opacity .65s ease,transform .65s cubic-bezier(.2,.75,.25,1);transition-delay:var(--reveal-delay,0ms)}.reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)}}
@media(max-width:850px){.demo-layout{grid-template-columns:1fr;gap:30px}.demo-details{max-width:none}.demo-heading{align-items:start;flex-direction:column}.video-stage{max-height:670px}.video-stage video{max-height:620px}}
@media(max-width:480px){.video-stage{padding:8px}.video-stage video{max-height:510px}.video-topline,.video-bottomline{font-size:9px;padding:12px}.demo-layout{margin-top:20px}.demo-specs>div{align-items:flex-start;flex-direction:column;gap:5px}.demo-specs strong{text-align:left}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reveal-on-scroll{opacity:1!important;transform:none!important;transition:none!important}}

/* Cropped source footage: remove embedded black recording borders; preserve both game screens. */
.demo-layout{grid-template-columns:minmax(0,480px) minmax(290px,1fr);align-items:center;gap:clamp(28px,5vw,72px);justify-content:center}
.video-panel{width:100%;max-width:480px;margin-inline:auto}
.video-stage{padding:0;min-height:0;max-height:none;background:#000;display:block}
.video-stage video{display:block;width:100%;max-width:none;max-height:none;height:auto;aspect-ratio:250/370;object-fit:contain;border:0;border-radius:0;background:#000}
.interaction-layout{display:grid;grid-template-columns:minmax(220px,.65fr) minmax(0,1.35fr);gap:34px;align-items:start;margin-top:32px}
.interaction-shot{display:block;width:100%;max-width:350px;justify-self:center;border:1px solid #284653;border-radius:14px;box-shadow:0 22px 65px #0007}
.interaction-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.interaction-grid article,.compare-card,.engineering-claim{background:linear-gradient(150deg,#121d28,#080d14);border:1px solid #2b4050;border-radius:12px;padding:22px}
.interaction-grid article span,.compare-tag,.engineering-claim>span{font:11px monospace;letter-spacing:.13em;color:#7bdde9}
.interaction-grid h3,.compare-card h3{margin:13px 0 8px;font-size:1.08rem}.interaction-grid p,.engineering-claim p{color:#a5bbc9;line-height:1.7;margin:0;font-size:.94rem}
.social-invite{margin-top:32px}.social-actions{margin-top:16px}.actions a.social-link{color:#fff;border:0}.actions a.social-youtube{background:#e62117}.actions a.social-instagram{background:linear-gradient(115deg,#833ab4,#c13584 55%,#f77737)}.actions a.social-link:hover{filter:brightness(1.12)}
.comparison-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin:30px 0 20px}
.compare-card.console{border-color:#287f91}.compare-row{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:13px 0;border-bottom:1px solid #2a3a48;font-size:.91rem}.compare-row span{color:#a7bbc9}.compare-row b{text-align:right;font-family:monospace;font-size:.88rem}.compare-card a{display:inline-block;margin-top:20px;color:#82dfe8;font-size:.8rem;overflow-wrap:anywhere}.engineering-claim h3{font-size:clamp(1.1rem,2.5vw,1.6rem);line-height:1.4}.engineering-claim small{display:block;margin-top:16px;color:#8da1ae;line-height:1.6}
@media(max-width:850px){.demo-layout,.interaction-layout,.comparison-grid{grid-template-columns:1fr}.video-panel{max-width:430px}.interaction-shot{max-width:310px}.interaction-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:540px){.interaction-grid{grid-template-columns:1fr}.video-stage video{max-height:none}.video-stage{max-height:none}.video-panel{max-width:100%}.compare-row{align-items:flex-start;flex-direction:column;gap:4px}.compare-row b{text-align:left}}