@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--bg:#030913;--panel:#091320;--text:#edf5fb;--muted:#a4b6c8;--cyan:#44d8fa;--line:#ffffff19;--heading:'Space Grotesk','Segoe UI',sans-serif;--gold:#ffc145}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:36px}body{margin:0;background:var(--bg);color:var(--text);font-family:'DM Sans','Segoe UI',sans-serif;-webkit-font-smoothing:antialiased;line-height:1.6}body.modal-open{overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer;color:inherit}button:disabled{cursor:default;opacity:.4}a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--cyan);outline-offset:6px}img{display:block;max-width:100%}p,h1,h2,h3,figure{margin:0}h1,h2,h3{font-family:var(--heading);line-height:1.12;font-weight:500}em{color:var(--cyan);font-style:normal}[hidden]{display:none!important}.wrap{width:min(1180px,calc(100% - 96px));margin-inline:auto}.eyebrow{font-size:10px;font-weight:600;letter-spacing:2px;color:var(--cyan);line-height:1.7}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 14px #00c8fa66;flex-shrink:0}.skip{position:fixed;top:-100px;left:20px;z-index:100;background:var(--cyan);color:var(--bg);padding:12px}.skip:focus{top:10px}
.site-header{height:100px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:20px}.brand{font-family:var(--heading);font-size:29px;font-weight:700;line-height:1;letter-spacing:-1.4px;position:relative;padding-right:20px}.brand>span{display:block;font-family:'DM Sans',sans-serif;font-size:8px;letter-spacing:5.5px;font-weight:400;margin-top:7px;margin-left:3px;color:#b3c4d2}.brand i{position:absolute;right:1px;top:3px;width:6px;height:6px;border-radius:50%;background:var(--cyan)}nav{display:flex;align-items:center;gap:30px;font-size:12px}nav a:hover,.text-link:hover,.footer a:hover{color:var(--cyan)}.lang{border:1px solid #ffffff30;border-radius:30px;background:transparent;padding:9px 14px;min-height:40px;font-size:11px}.lang span{margin-left:8px;color:var(--cyan)}.lang:hover{border-color:var(--cyan)}
.hero{position:relative;display:grid;grid-template-columns:1.25fr 1fr;align-items:center;gap:30px;padding-block:50px 55px}.hero-copy{position:relative;z-index:1}.hero .eyebrow{display:flex;align-items:center;gap:10px}.hero h1{font-size:clamp(48px,5.2vw,72px);letter-spacing:-3.6px;line-height:1.07;margin-top:22px}.accent{color:var(--cyan)}.hero-description{font-size:15px;line-height:1.9;max-width:430px;color:var(--muted);margin-top:23px}.button{display:inline-flex;align-items:center;justify-content:center;gap:26px;padding:14px 21px;min-height:49px;border-radius:7px;font-size:12px;font-weight:700;line-height:1.4;border:1px solid transparent;transition:background .2s,transform .2s}.button>span:last-child{font-size:20px}.primary{background:var(--cyan);color:#03131c;box-shadow:0 0 28px #00c8fa0d}.primary:hover{background:#8ceaff;transform:translateY(-2px)}.hero .button{margin-top:28px}.hero-art{position:relative;min-width:0;text-align:center;align-self:center}.hero-art img{width:100%;height:auto;max-width:440px;margin:auto;mask-image:radial-gradient(ellipse,#000 44%,transparent 73%)}.art-caption{display:block;font-size:8px;letter-spacing:2.3px;color:#8da7ba;margin-top:-17px;position:relative}
.game-section{border-block:1px solid var(--line);background:radial-gradient(ellipse at 95% 20%,#133c4c26,transparent 55%),linear-gradient(140deg,#0b1320,#060e19);padding-block:34px 55px}.section-topline{display:flex;align-items:center;justify-content:space-between;gap:16px}.status{border:1px solid #ffffff20;border-radius:30px;padding:6px 12px;font-size:10px;color:#b7c6d2;display:inline-flex;gap:7px;align-items:center}.status .dot{width:5px;height:5px}.game-feature{display:grid;grid-template-columns:1.1fr .9fr;gap:90px;align-items:center;margin-top:38px}.game-name{display:flex;gap:14px;align-items:center}.game-name img{width:44px;height:44px;border-radius:12px}.game-name h2{font-size:21px;letter-spacing:-.5px}.game-hook{font-size:clamp(37px,4.2vw,57px);letter-spacing:-2.4px;margin-block:22px}.game-lead{font-size:17px;line-height:1.6;margin-bottom:18px;max-width:450px;color:#deedf6}.description{color:var(--muted);font-size:13px;line-height:1.95;max-width:520px;margin-bottom:14px}.game-actions{display:flex;align-items:center;gap:23px;flex-wrap:wrap;margin-top:25px}.text-link{display:inline-flex;align-items:center;gap:10px;font-size:12px;color:#d6e5ee;line-height:1.7}.text-link>span[aria-hidden]{color:var(--cyan);font-size:20px}.game-facts{display:flex;gap:20px;flex-wrap:wrap;list-style:none;padding:0;margin:22px 0 0;font-size:10px;color:var(--muted)}.game-facts li:before{content:'✓';margin-right:6px;color:var(--cyan)}
.demo-scene{scroll-margin-top:24px;background:radial-gradient(ellipse at 15% 35%,#2ec4b616,transparent 65%),linear-gradient(#202a50,#382350);border:1px solid #ffffff25;box-shadow:0 30px 70px #0005,inset 0 1px 0 #ffffff10;border-radius:25px;padding:21px 24px;overflow:hidden;max-width:440px;width:100%;justify-self:end;min-width:0}.demo-topline{font-size:8px;letter-spacing:1.5px;font-weight:600;display:flex;align-items:center;gap:8px;color:#ced9f2}.demo-badge{font-size:7px;letter-spacing:1px;margin-left:auto;border:1px solid #c7faff40;color:#b9f6ff;border-radius:4px;padding:3px 6px}.demo-heading{display:flex;justify-content:space-between;align-items:center;margin:19px 0 13px;text-align:center}.demo-heading>div:first-child{flex:1;padding-left:48px}.demo-heading h3{font-size:29px;font-weight:600;letter-spacing:-.5px}.demo-heading p{font-size:11px;color:#c1c8e0;margin-top:3px}.arrow-count{width:48px;height:54px;border-radius:13px;background:#ffffff0a;border:1px solid #ffffff12;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1.15}.arrow-count>span{font-size:16px;color:#c2cce4}.arrow-count strong{font-size:21px}.rule-chip{font-size:9px;text-align:center;padding:7px;background:#ffffff08;border-radius:8px;border:1px solid #ffffff08;color:#c7d0e8}.board-holder{position:relative;width:min(100%,292px);margin:20px auto}.puzzle-board{position:relative;display:grid;grid-template-columns:repeat(var(--columns,3),1fr);gap:9px;padding:11px;background:#ffffff0b;border:1px solid #ffffff12;border-radius:20px;aspect-ratio:1;isolation:isolate}.puzzle-slot{position:relative;aspect-ratio:1;background:#0d0a293f;border-radius:24%}.arrow-tile{position:absolute;inset:0 0 6px;border:0;border-radius:25%;background:var(--tile);box-shadow:0 6px 0 color-mix(in srgb,var(--tile),#000 36%),0 11px 0 #0002;padding:10%;touch-action:manipulation;user-select:none;z-index:2;transition:filter .15s}.arrow-tile:before{content:'';position:absolute;inset:4px 6px auto;height:34%;border-radius:26px;background:#ffffff28;pointer-events:none}.arrow-tile svg{width:100%;height:100%;display:block;transform:rotate(var(--angle));filter:drop-shadow(0 2px 0 #0002);position:relative}.arrow-tile:hover{filter:brightness(1.12)}.arrow-tile:active{translate:0 3px}.arrow-tile.hinted{outline:3px solid #fff2a8;outline-offset:3px;animation:hintpulse 1s ease-in-out infinite}.arrow-tile.blocked{animation:shake .3s}.arrow-tile.exiting{pointer-events:none;z-index:8;animation:escape .3s ease-in forwards}.preview-source{outline:2px solid white;outline-offset:3px}.preview-turn:after{content:'↻';position:absolute;z-index:5;right:-6px;top:-9px;background:var(--gold);color:#2d1f4d;width:24px;height:24px;border-radius:50%;font-size:20px;line-height:24px;text-align:center;box-shadow:0 2px 8px #0005}.preview-turn .arrow-tile{outline:2px solid var(--gold);outline-offset:3px}.preview-path:after{content:'• • •';position:absolute;inset:0;display:grid;place-content:center;color:white;letter-spacing:2px;font-size:12px}.preview-blocked{outline:2px solid #ff6b6b}.just-turned:before{content:'';position:absolute;inset:-5px;border:2px solid #bdf3ff;border-radius:30%;animation:ring-fade .6s both;z-index:4;pointer-events:none}.win-burst{position:absolute;inset:0;display:none;place-items:center;color:var(--gold);font-size:80px;pointer-events:none;text-shadow:0 0 40px #ffc14560}.won .win-burst{display:grid;animation:celebrate .5s}.demo-status{min-height:38px;font-size:10px;color:#d1d6ef;text-align:center;line-height:1.65;margin:8px 0 14px}.demo-controls{display:flex;gap:10px}.demo-controls button{flex:1;border:1px solid #ffffff15;border-radius:12px;background:#ffffff08;padding:7px;min-height:45px;font-size:9px;line-height:1.3;display:flex;align-items:center;justify-content:center;gap:6px}.demo-controls button>span:first-child{font-size:21px}.demo-controls button:hover:enabled{background:#ffffff18}.demo-bottom{border-top:1px solid #ffffff12;padding-top:12px;margin-top:15px;display:flex;align-items:center;justify-content:space-between;gap:8px;color:#b9c5e1;font-size:8px}.demo-bottom button{border:0;border-radius:6px;background:var(--cyan);color:#03131c;padding:8px;font-size:9px;font-weight:600}.how-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:56px;padding-top:30px;border-top:1px solid var(--line)}.step-number{display:flex;gap:12px;align-items:center;font-size:9px;color:#8ca4b9;letter-spacing:1px;margin-bottom:10px}.step-number>span{color:var(--cyan);font-size:21px;line-height:1}.how-grid h3{font-size:16px;margin-bottom:9px}.how-grid p{color:var(--muted);font-size:12px;line-height:1.9;max-width:310px}
.gallery-section{padding-block:75px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px}.section-heading h2{font-size:clamp(30px,3.3vw,43px);letter-spacing:-1.8px;margin-top:15px}.section-description{font-size:13px;color:var(--muted);line-height:1.9;max-width:550px;margin-top:18px}.gallery-controls{display:flex;gap:8px}.gallery-controls button,.lightbox-bar button{width:42px;height:42px;border:1px solid #ffffff25;border-radius:50%;background:transparent;font-size:19px}.gallery-controls button:hover,.lightbox-bar button:hover{background:#44d8fa14;border-color:var(--cyan)}.gallery{display:flex;gap:21px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 3px 20px;margin-top:32px;scrollbar-color:#22526b #07111c;scrollbar-width:thin}.shot{flex:0 0 calc((100% - 63px)/4);scroll-snap-align:start;min-width:0}.shot>button{display:block;position:relative;width:100%;padding:0;border:1px solid #ffffff20;border-radius:14px;background:#11182d;overflow:hidden}.shot>button:after{content:'↗';position:absolute;right:10px;bottom:12px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#030913d9;color:white;border:1px solid #ffffff30;font-size:16px}.shot img{width:100%;height:auto;transition:transform .3s,filter .3s}.shot>button:hover img{transform:scale(1.025);filter:brightness(1.08)}.shot figcaption{display:flex;gap:12px;padding-top:17px}.shot figcaption>span{font-size:8px;color:var(--cyan);margin-top:3px}.shot h3{font-size:13px;line-height:1.5;letter-spacing:-.2px}.shot figcaption p{font-size:10px;color:var(--muted);line-height:1.7;margin-top:5px}.gallery-help{color:#8aa0b5;font-size:9px;margin-top:8px}
.watch-section{display:grid;grid-template-columns:1fr 1.1fr;gap:95px;align-items:center;padding-block:40px 85px}.trailer-panel{position:relative;text-align:center;padding:24px 20px;border:1px solid var(--line);border-radius:20px;background:radial-gradient(ellipse,#132d42,transparent 70%)}.trailer-panel video{display:block;width:min(100%,245px);height:auto;aspect-ratio:9/16;border:1px solid #ffffff25;border-radius:14px;background:#171e38;margin:auto;box-shadow:0 20px 40px #0004}.trailer-caption{display:block;font-size:8px;color:#89a3b9;letter-spacing:1.8px;margin-top:21px}.watch-copy h2{font-size:clamp(40px,4.3vw,59px);letter-spacing:-2.5px;margin-top:18px}.benefits{list-style:none;padding:0;margin:26px 0 0;display:grid;gap:23px}.benefits li{display:flex;gap:17px;align-items:start}.benefits li>span{display:grid;place-items:center;flex-shrink:0;width:33px;height:33px;border:1px solid #44d8fa30;background:#44d8fa07;color:var(--cyan);border-radius:9px;font-size:22px;line-height:1}.benefits strong{font-size:13px;font-weight:500}.benefits p{font-size:11px;color:var(--muted);line-height:1.8;margin-top:4px}.studio-section{padding-block:50px;background:#08111d;border-block:1px solid var(--line)}.studio-inner{display:grid;grid-template-columns:1fr 1fr;gap:18px 80px}.studio-inner .eyebrow{grid-column:1/-1}.studio-inner h2{font-size:38px;letter-spacing:-1.5px;max-width:390px}.studio-body p{font-size:13px;line-height:1.9;color:var(--muted)}.studio-body .text-link{margin-top:18px}.contact-section{display:flex;justify-content:space-between;align-items:center;gap:35px;padding-block:65px}.contact-section h2{font-size:46px;letter-spacing:-2px;margin-top:15px}.contact-section p:last-child{max-width:470px;color:var(--muted);font-size:12px;margin-top:16px;line-height:1.9}.contact-section .button{flex-shrink:0;min-width:170px}.footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding-block:28px 35px;border-top:1px solid var(--line);color:#8ba2b5;font-size:9px}.footer .brand{color:#dcebf3;font-size:22px}.footer .brand span{font-size:6px;letter-spacing:4px;margin-top:6px}.footer>div{display:flex;gap:24px}
dialog{padding:12px;background:#08111b;border:1px solid #ffffff30;border-radius:17px;max-width:94vw;max-height:94dvh;overflow:auto;color:var(--text);box-shadow:0 30px 90px #000a}dialog::backdrop{background:#000d;backdrop-filter:blur(8px)}dialog img{display:block;height:77dvh;max-width:85vw;object-fit:contain;width:auto;border-radius:8px}.close{position:absolute;top:20px;right:20px;width:36px;height:36px;display:grid;place-items:center;background:#030913e8;color:white;border:1px solid #ffffff50;border-radius:50%;font-size:25px;z-index:2}.lightbox-bar{display:flex;align-items:center;justify-content:center;gap:35px;font-size:11px;padding-top:10px}.lightbox-bar button{width:33px;height:33px;font-size:16px}
@keyframes escape{to{transform:translate(var(--exit-x),var(--exit-y));opacity:0}}@keyframes ring-fade{from{opacity:.8}to{opacity:0;scale:1.15}}@keyframes hintpulse{50%{filter:brightness(1.2)}}@keyframes shake{25%,75%{translate:-4px}50%{translate:4px}}@keyframes celebrate{from{opacity:0;scale:.4;rotate:-20deg}to{opacity:1;scale:1;rotate:0deg}}
@media(min-width:1500px){.hero{padding-block:65px 70px}.hero-art img{max-width:470px}.game-feature{gap:110px}}
@media(max-width:1050px){.wrap{width:calc(100% - 56px)}.hero{gap:0}.hero h1{font-size:56px;letter-spacing:-2.9px}.hero-description{font-size:13px}.hero-art img{max-width:380px}.game-feature{gap:45px}.game-hook{font-size:46px}.game-actions{gap:17px}.description{font-size:12px}.demo-scene{padding:20px}.how-grid{gap:30px}.shot{flex-basis:calc((100% - 42px)/3)}.watch-section{gap:55px}.studio-inner{gap:20px 45px}}
@media(max-width:760px){.wrap{width:calc(100% - 40px)}.site-header{height:80px}nav{gap:18px;font-size:11px}.nav-extra{display:none}.brand{font-size:25px}.hero{grid-template-columns:1fr;padding-block:40px 27px;gap:0}.hero-copy{max-width:540px}.hero h1{font-size:clamp(42px,9.6vw,65px);letter-spacing:-2.5px;margin-top:20px}.hero .eyebrow{font-size:8px;letter-spacing:1.4px}.hero-description{font-size:13px;max-width:410px;margin-top:20px}.hero .button{margin-top:23px}.hero-art{margin:4px auto 0;width:100%;max-width:330px}.hero-art img{width:100%;max-width:320px}.art-caption{font-size:7px;letter-spacing:1.7px;margin-top:-23px}.game-section{padding-block:25px 38px}.section-topline{gap:12px;align-items:start}.section-topline .eyebrow{font-size:8px;letter-spacing:1.3px;max-width:150px}.status{font-size:8px;padding:5px 8px}.game-feature{grid-template-columns:1fr;gap:33px;margin-top:30px}.game-hook{font-size:clamp(36px,9.4vw,56px);letter-spacing:-1.9px;margin-block:20px}.game-name h2{font-size:20px}.game-name img{width:41px;height:41px}.game-lead{font-size:16px;max-width:410px}.description{font-size:12px;max-width:530px}.game-actions{gap:18px}.button{padding:13px 18px;font-size:11px;gap:20px}.text-link{font-size:11px}.game-facts{font-size:9px;gap:18px;margin-top:19px}.demo-scene{justify-self:center;max-width:400px;padding:20px}.board-holder{width:min(100%,280px)}.demo-status{font-size:10px}.demo-bottom{font-size:8px}.how-grid{grid-template-columns:1fr;gap:24px;margin-top:33px;padding-top:25px}.how-grid article{display:grid;grid-template-columns:45px 1fr;column-gap:15px}.step-number{grid-row:1/3;align-items:start;flex-direction:column;gap:6px;padding-top:4px}.step-number>span{font-size:24px}.how-grid h3{font-size:16px;margin-bottom:7px}.how-grid p{max-width:440px;font-size:11px}.gallery-section{padding-block:48px}.section-heading{gap:16px;align-items:end}.section-heading .eyebrow{font-size:8px;letter-spacing:1.3px}.section-heading h2{font-size:30px;letter-spacing:-1.2px;margin-top:12px;max-width:300px}.gallery-controls{gap:6px}.gallery-controls button{width:34px;height:34px;font-size:16px}.section-description{font-size:12px;margin-top:16px}.gallery{gap:16px;margin-top:25px}.shot{flex-basis:65%;max-width:250px}.shot figcaption{padding-top:14px;gap:10px}.shot h3{font-size:13px}.shot figcaption p{font-size:10px}.gallery-help{font-size:8px}.watch-section{grid-template-columns:1fr;gap:30px;padding-block:10px 50px}.watch-copy{grid-row:1}.watch-copy h2{font-size:43px;letter-spacing:-2px}.watch-copy .eyebrow{font-size:8px;letter-spacing:1.4px}.benefits{gap:20px}.benefits p{font-size:11px}.trailer-panel{width:100%;max-width:420px;margin:auto;padding-block:23px}.trailer-panel video{width:220px}.trailer-caption{font-size:7px;letter-spacing:1.3px}.studio-section{padding-block:35px}.studio-inner{grid-template-columns:1fr;gap:17px}.studio-inner .eyebrow{font-size:8px;letter-spacing:1.4px}.studio-inner h2{font-size:33px;max-width:400px}.studio-body p{font-size:12px}.studio-body .text-link{font-size:10px}.contact-section{display:block;padding-block:45px}.contact-section h2{font-size:40px;letter-spacing:-1.7px}.contact-section .eyebrow{font-size:8px;letter-spacing:1.5px}.contact-section p:last-child{font-size:12px}.contact-section .button{margin-top:24px;min-width:160px}.footer{flex-wrap:wrap;gap:23px;padding-block:26px;font-size:8px}.footer .brand{font-size:22px}.footer>p{margin-left:auto}.footer>div{width:100%;justify-content:space-between}dialog img{height:auto;max-height:76dvh;max-width:82vw}.close{top:17px;right:17px}}
@media(max-width:360px){.wrap{width:calc(100% - 32px)}nav{gap:11px}.hero h1{font-size:39px}.section-heading h2{font-size:26px}.gallery-controls button{width:30px;height:30px}.game-facts{gap:12px}.demo-scene{padding:16px}.rule-chip{font-size:8px}.demo-bottom{flex-wrap:wrap}.game-hook{font-size:35px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
