@charset "UTF-8";
:root{--bg:#080e20;--ink:#f2f6f1;--muted:#bcc9ce;--green:#b7ef68;--line:#c3dbf023;--content:1180px;color-scheme:dark}*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:32px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 "Segoe UI",Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3,p,figure{margin:0}h1,h2,h3{line-height:1.18;letter-spacing:-.035em;font-weight:600}h2{font-size:clamp(26px,3vw,38px)}h3{font-size:clamp(24px,2.6vw,34px)}p{color:var(--muted)}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--green);outline-offset:6px}a:hover{color:var(--green)}::selection{background:var(--green);color:var(--bg)}[hidden]{display:none!important}.content-width{width:min(var(--content),84%);margin-inline:auto}.environment{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1;background:#080e20;contain:strict}.environment .space-canvas{display:block;position:absolute;inset:-70px -25px}.deep-space{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;will-change:transform}.header{height:104px;width:min(1340px,88%);margin:auto;display:flex;align-items:center;justify-content:space-between;gap:30px;position:relative;z-index:20}.brand{display:flex;align-items:center;gap:14px;flex-shrink:0}.brand img{width:150px;height:auto}.brand span{font-size:14px;letter-spacing:.06em}.header nav{display:flex;align-items:center;gap:30px;font-size:14px}.header nav a{padding:13px 0}.header-tools{display:flex;align-items:center}.motion-control{border:0;background:none;color:#bac7cf;font-size:11px;padding:10px 0 10px 14px;display:flex;gap:8px;align-items:center}.motion-control:hover{color:var(--ink)}.motion-control:disabled{opacity:.7;cursor:default}.menu-toggle{display:none}.skip{position:fixed;left:15px;top:10px;padding:12px;background:var(--green);color:#101a0a;z-index:100;transform:translateY(-150%)}.skip:focus{transform:none}main{overflow:clip}.hero{position:relative;min-height:690px;height:min(820px,calc(100svh - 104px));isolation:isolate}.hero-content{width:min(1100px,82%);height:100%;margin:auto;position:relative;z-index:3}.hero-copy{position:absolute;left:2%;top:8%;width:45%;max-width:450px;text-align:center}.featured-label{font-size:13px;color:#d2dfdb;margin-bottom:10px}.diz-title{position:relative;padding-top:38px;width:90%;max-width:400px;margin:auto;isolation:isolate}.diz-wordmark{width:100%;filter:drop-shadow(0 10px 24px #03081977)}.diz-planet{position:absolute;width:95px;top:0;right:23%;z-index:-1}.hero-description{font-size:19px;color:var(--ink);line-height:1.5;margin:24px 0 24px;text-shadow:0 2px 10px #000}.button{display:inline-flex;align-items:center;gap:36px;background:var(--green);color:#12200b;padding:13px 22px;border-radius:100px;font-size:14px;font-weight:600;transition:background .2s,transform .2s}.button:hover{color:#12200b;background:#cfff94;transform:translateY(-2px)}.status{display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;margin-top:18px;color:#c5d2c9}.dot{width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block}.hero-character{position:absolute;right:12%;top:1%;height:83%;width:35%;display:flex;align-items:center;justify-content:center;will-change:transform}.hero-character img{width:auto;height:100%;max-height:650px;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 30px #01081588)}.hero-landscape{position:absolute;z-index:1;left:0;right:0;bottom:-14%;height:61%;pointer-events:none;will-change:transform;mask-image:linear-gradient(#000 55%,transparent 98%)}.hero-landscape img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:brightness(.72) saturate(.87)}.scroll-cue{position:absolute;right:6%;bottom:25px;z-index:4;display:flex;align-items:center;gap:12px;color:#d6e4dd;font-size:12px}.scroll-cue span{font-size:23px}.worlds{position:relative;padding-bottom:40px}.journey-heading{width:min(var(--content),84%);margin:0 auto 15px;position:relative;z-index:3;padding:46px 0 18px;display:flex;align-items:center;justify-content:space-between;gap:30px}.journey-heading h2{font-size:30px}.world-nav{display:flex;gap:22px;font-size:13px;color:#ccdadb}.world{position:relative;padding:42px 0 40px;isolation:isolate}.world figure,.world-heading{width:min(var(--content),84%);margin-inline:auto}.world-heading{display:flex;gap:18px;align-items:baseline;position:relative;z-index:3;margin-bottom:20px}.world-number{font-size:12px;color:var(--green);letter-spacing:.04em}.world-heading p{font-size:14px;margin-left:auto}.world figure{position:relative;z-index:2}.shot{display:block;padding:0;border:0;background:transparent;width:100%;position:relative;overflow:hidden;text-align:left;border-radius:5px;box-shadow:0 25px 55px #01081866}.shot img{width:100%;height:auto;display:block}.expand{position:absolute;right:18px;bottom:18px;display:grid;place-items:center;width:38px;height:38px;border:1px solid #ffffff60;border-radius:50%;background:#070e22b3;font-size:23px;transition:background .2s,transform .2s}.shot:hover .expand{background:#324922;transform:translate(1px,-1px)}.scenic{position:absolute;z-index:1;pointer-events:none;will-change:transform}.scenic img{width:100%;height:auto}.scenic-ridge{width:min(430px,30vw);left:-12%;top:56%;filter:brightness(.56);transform-origin:left center;mask-image:linear-gradient(90deg,#000 55%,transparent 95%)}.scenic-ice{width:min(640px,45vw);right:-21%;top:-14%;opacity:.6;mask-image:linear-gradient(90deg,transparent,#000 45%);filter:brightness(.72)}.scenic-last{width:360px;left:-16%;bottom:-90px;filter:brightness(.35) hue-rotate(28deg);mask-image:linear-gradient(90deg,#000,transparent)}.world-ice figure{width:min(1260px,88%)}.world-ice .world-heading{width:min(1260px,88%)}.world-desert figure,.world-desert .world-heading{width:min(1120px,80%)}.world-fire figure{width:min(1260px,88%)}.world-fire .world-heading{width:min(1260px,88%)}.development-note{text-align:center;font-size:11px;padding-top:12px;color:#b1bec5}.studio{position:relative;display:grid;grid-template-columns:1fr 1.7fr;align-items:center;gap:80px;padding:70px 0 60px}.studio-brand{display:flex;align-items:center;justify-content:center;gap:18px}.studio-brand img{width:200px}.studio-brand span{font-size:18px;letter-spacing:.06em}.studio-copy h2{font-size:30px;margin-bottom:16px}.studio-copy p{font-size:16px;max-width:530px}.contact{display:flex;justify-content:space-between;gap:35px;align-items:center;padding:45px 0 65px}.contact h2{font-size:30px;margin-bottom:10px}.contact p{font-size:14px}.contact>a{font-size:clamp(18px,2.4vw,30px);padding-bottom:6px;border-bottom:1px solid #a4d26799}.contact>a span{margin-left:20px;color:var(--green)}footer{display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:12px;color:#c1ccd0;padding:25px 0 35px}footer .footer-name{color:var(--ink);font-size:14px}.footer-name span{display:none}footer>div{display:flex;gap:20px}dialog{background:#0d1729;color:var(--ink);border:1px solid #afc8e33b;padding:20px;width:min(1440px,96vw);max-height:96svh;border-radius:8px}dialog::backdrop{background:#020510ed}dialog img{max-height:73svh;max-width:100%;width:auto;margin:auto;object-fit:contain}.viewer-bar,.viewer-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:8px 0 18px;font-size:13px}.viewer-bar p{max-width:80%}dialog button{background:transparent;border:1px solid var(--line);border-radius:4px;padding:10px 15px}.viewer-controls{padding:20px 0 0}body:has(dialog[open]){overflow:hidden}.policy-page{background:#0a1120}.policy{max-width:900px;margin:auto;padding:60px 30px 100px}.policy h1{font-size:clamp(36px,6vw,60px);margin:25px 0}.policy h2{font-size:26px;margin:40px 0 18px}.policy p,.policy li{color:var(--muted);font-size:16px;line-height:1.8;margin-bottom:16px}.policy a{color:var(--green);text-decoration:underline}.review-note{padding:23px;border:1px solid #8c8050;background:#302c20;border-radius:5px;margin:30px 0}.review-note strong{color:#f6df9a}.eyebrow{font-size:13px;color:var(--green)}.policy-page footer{width:84%;margin:auto}.policy-page .motion-control{display:none!important}
@media(min-width:1700px){.hero-copy{top:10%}.hero-character{right:10%;top:0;height:88%}.hero-landscape{bottom:-20%;height:75%}}
@media(max-width:1100px){.header{width:90%;gap:22px}.brand img{width:120px}.brand{gap:10px}.brand span{font-size:12px}.header nav{gap:22px}.motion-control{font-size:10px}.hero{min-height:650px}.hero-copy{left:0;top:11%;width:47%}.hero-character{right:6%;width:36%;top:5%;height:80%}.diz-title{padding-top:30px}.diz-planet{width:80px}.hero-description{font-size:17px}.journey-heading{display:block}.world-nav{margin-top:20px}.studio{gap:40px}.studio-brand img{width:160px}.studio-brand{gap:12px}}
@media(max-width:700px){html{scroll-padding-top:24px}.content-width{width:88%}.environment .space-canvas{inset:-30px -65px}.deep-space{object-position:62% center}.header{height:86px;width:88%;gap:12px}.brand{gap:9px}.brand img{width:110px}.brand span{font-size:12px}.header-tools{gap:12px}.motion-control{font-size:0;padding:8px;width:30px;height:30px;justify-content:center}.motion-control span{font-size:15px}.menu-toggle{display:flex;gap:12px;align-items:center;background:#0c172a55;border:1px solid #d0e7f638;border-radius:50px;padding:8px 13px;font-size:12px}.header nav{display:none;position:absolute;top:76px;left:-7%;right:-7%;background:#0b1629f7;padding:18px 6%;border-bottom:1px solid var(--line)}.header nav.open{display:flex;flex-direction:column;align-items:stretch;gap:0}.header nav a{padding:12px}.hero{height:880px;min-height:0;max-height:none}.hero-content{width:88%}.hero-copy{width:100%;top:12px;left:0;max-width:none}.featured-label{font-size:12px;margin-bottom:7px}.diz-title{max-width:245px;width:72%;padding-top:24px}.diz-planet{width:66px;right:24%}.hero-description{font-size:16px;margin:14px 0 18px;line-height:1.5}.button{padding:11px 20px;gap:30px;font-size:13px}.status{font-size:11px;margin-top:12px}.hero-character{width:100%;height:400px;top:400px;right:0;max-width:none;align-items:center}.hero-character img{height:100%;max-width:240px;width:auto}.hero-landscape{height:330px;bottom:-10px;left:-35%;right:-35%;mask-image:linear-gradient(#000 50%,transparent 99%)}.hero-landscape img{object-position:52% 45%;filter:brightness(.62)}.scroll-cue{bottom:0;right:6%;font-size:11px;gap:8px}.scroll-cue span{font-size:19px}.journey-heading{width:88%;padding:34px 0 10px;margin-bottom:8px}.journey-heading h2{font-size:26px;max-width:270px}.world-nav{gap:25px;font-size:12px;margin-top:19px}.world{padding:28px 0 26px}.world figure,.world-heading,.world-ice figure,.world-ice .world-heading,.world-desert figure,.world-desert .world-heading,.world-fire figure,.world-fire .world-heading{width:92%}.world-heading{gap:10px;flex-wrap:wrap;align-items:baseline;margin-bottom:14px;padding:0 2%}.world-heading h3{font-size:24px}.world-heading p{width:100%;margin-left:26px;margin-top:-4px;font-size:12px}.world-number{font-size:11px}.shot{border-radius:3px;box-shadow:0 12px 30px #01081966}.shot img{height:auto;object-fit:contain}.expand{width:30px;height:30px;font-size:19px;right:10px;bottom:10px}.scenic-ridge{width:220px;left:-45%;top:30%;opacity:.7}.scenic-ice,.scenic-last{display:none}.development-note{font-size:10px;padding:6px 4% 0}.worlds{padding-bottom:15px}.studio{grid-template-columns:1fr;gap:25px;padding:45px 0 28px}.studio-brand{justify-content:flex-start;gap:15px}.studio-brand img{width:145px}.studio-brand span{font-size:15px}.studio-copy h2{font-size:26px;margin-bottom:13px}.studio-copy p{font-size:15px}.contact{align-items:flex-start;flex-direction:column;gap:22px;padding:35px 0 40px}.contact h2{font-size:27px}.contact>a{font-size:20px;max-width:100%}.contact>a span{margin-left:10px}footer{padding:20px 0 30px;flex-wrap:wrap;gap:16px 22px;font-size:11px}footer p{width:100%}footer>div{flex-direction:column}.viewer-bar{font-size:11px;align-items:start}.viewer-bar button{flex-shrink:0;padding:8px}.viewer-controls{font-size:11px}.viewer-controls button{padding:10px}.policy{padding:35px 6% 65px}.policy h1{font-size:38px}.policy p,.policy li{font-size:15px}}
@media(max-width:360px){.brand img{width:90px}.brand span{font-size:10px}.header-tools{gap:6px}.hero-character{top:415px}.contact>a{font-size:18px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}.deep-space,.scenic,.hero-character,.hero-landscape{will-change:auto}.button:hover{transform:none}}
html[data-motion="paused"]{scroll-behavior:auto}html[data-motion="paused"] .deep-space,html[data-motion="paused"] [data-depth]{will-change:auto}


/* Art-direction corrections after desktop and mobile visual review. */
.scenic-ridge{width:min(440px,31vw);left:-15%;top:58%;filter:brightness(.7);mask-image:none}
.scenic-last{width:340px;left:-16%;bottom:-70px;filter:brightness(.5);mask-image:none}
.scenic-ice{opacity:.45;mask-image:radial-gradient(ellipse at 100% 43%,#000 25%,transparent 76%)}
.motion-control{min-height:44px;min-width:44px}
@media(max-width:700px){.hero{height:790px}.hero-character{top:350px;height:350px}.hero-landscape{height:290px;bottom:0}.menu-toggle{min-height:44px}.motion-control{min-height:44px;min-width:36px}.scenic-ridge{width:170px;left:-39%;top:33%;opacity:.65}}
/* Keep the portrait character clear of the development status. */
@media(max-width:700px){.hero-character{top:390px;height:330px}}
@media(min-width:701px){.contact{padding-left:34%}footer a{text-shadow:0 2px 8px #030817,0 0 14px #030817}}

/* Standing hero: align his feet with the terrain and share its depth rate. */
@media(min-width:701px){.hero-character{top:6%}}
.hero-character::after{content:"";position:absolute;bottom:-2px;left:50%;width:55%;max-width:185px;height:13px;border-radius:50%;background:#02061280;filter:blur(7px);transform:translateX(-50%);z-index:-1}
@media(max-width:700px){.hero-character::after{width:105px;height:8px}}
@media(min-width:701px){.hero-character{top:12%}}

/* Supplied poster artwork, enlarged to approximately 150% of the previous hero. */
@media(min-width:1101px){.hero{height:1040px;min-height:1040px}.hero-character{top:0;right:-6%;width:65%;height:975px}.hero-character img{max-height:975px}}
@media(min-width:701px) and (max-width:1100px){.hero{height:920px;min-height:920px}.hero-character{top:7%;right:-6%;width:58%;height:800px}.hero-character img{max-height:800px}}
@media(max-width:700px){.hero{height:980px}.hero-character{top:390px;height:495px}.hero-character img{max-width:95vw;max-height:495px}.hero-landscape{height:340px}.hero-character::after{width:160px}}

/* Raise the faded foreground terrain behind Diz's hips. */
@media(min-width:701px){.hero-landscape{bottom:0;height:67%}}
@media(max-width:700px){.hero-landscape{bottom:0;height:470px}}

/* Terrain rises behind the torso; only the lower half fades away. */
.hero-landscape{mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 50%,transparent 100%)}
@media(min-width:701px){.hero-landscape{height:85%}}
@media(max-width:700px){.hero-landscape{height:610px}}

/* Lift the hero and terrain together, reducing the space above Diz. */
@media(min-width:1101px){.hero-character{top:-60px}.hero-landscape{bottom:60px}.hero{height:1040px;min-height:1040px}}
@media(min-width:701px) and (max-width:1100px){.hero-character{top:0}.hero-landscape{bottom:60px}.hero{height:920px;min-height:920px}}
@media(max-width:700px){.hero-character{top:340px}.hero-landscape{bottom:50px}.hero{height:980px}}

/* Let the raised hero extend into the space above main without clipping his head. */
main{overflow:visible}body{overflow-x:clip}

/* Higher treeline, with transparency confined to its bottom quarter. */
.hero-landscape{mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%);-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 75%,transparent 100%)}
@media(min-width:701px){.hero-landscape{bottom:105px}}
@media(max-width:700px){.hero-landscape{bottom:85px}}

/* Compact, consistent world gallery: two across, one on narrow screens. */
.worlds{width:min(1180px,84%);margin-inline:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 36px;padding-bottom:40px}
.journey-heading{grid-column:1/-1;width:100%;margin-bottom:0;padding-bottom:0}
.world{padding:12px 0 8px;min-width:0}
.world figure,.world-heading,.world-ice figure,.world-ice .world-heading,.world-desert figure,.world-desert .world-heading,.world-fire figure,.world-fire .world-heading{width:100%}
.world-heading{flex-wrap:wrap;gap:8px 12px;margin-bottom:14px}
.world-heading h3{font-size:26px}
.world-heading p{width:100%;margin-left:27px;font-size:13px}
.world .shot{aspect-ratio:1.9;background:#080e20}
.world .shot img{width:100%;height:100%;object-fit:cover}
.world .scenic{display:none}
.development-note{grid-column:1/-1;padding-top:0}
@media(max-width:700px){.worlds{width:92%;grid-template-columns:1fr;gap:18px}.journey-heading{width:96%;padding-top:34px}.world{padding:8px 0}.world-heading{width:96%;padding:0}.world-heading h3{font-size:24px}.world-heading p{margin-left:27px}.world figure{width:100%}.development-note{padding:0 4%}}

/* Extend the space scene to twice the viewport height for a longer backdrop. */
.environment .space-canvas{bottom:auto;height:calc(200% + 140px)}
@media(max-width:700px){.environment .space-canvas{height:calc(200% + 60px)}}

/* A floating platform between the page and deep-space parallax layers. */
.hero-platform{position:absolute;z-index:2;left:50%;margin-left:-135px;top:0;width:270px;pointer-events:none;will-change:transform}
.hero-platform img{width:100%;height:auto;filter:brightness(.8);}
@media(min-width:701px){.hero-landscape{bottom:140px}}
@media(max-width:700px){.hero-landscape{bottom:115px}.hero-platform{width:150px;left:76%;margin-left:-75px;top:300px}}
@media(prefers-reduced-motion:reduce){.hero-platform{will-change:auto}}
html[data-motion="paused"] .hero-platform{will-change:auto}

/* Platform sizes, silhouettes and motion suggest three different distances. */
.hero-platform-far{left:13%;top:55px;width:120px;margin-left:0;z-index:1;opacity:.65}
.hero-platform-far img{transform:scaleX(-1) rotate(-7deg);filter:brightness(.65) saturate(.8)}
.hero-platform-near{left:auto;right:-70px;top:370px;width:340px;margin-left:0;z-index:2}
.hero-platform-near img{transform:rotate(9deg);filter:brightness(.9)}
@media(max-width:1100px) and (min-width:701px){.hero-platform-near{right:-90px;width:270px;top:330px}.hero-platform-far{left:5%;width:100px}}
@media(max-width:700px){.hero-platform-far{left:-22px;top:180px;width:95px;margin-left:0}.hero-platform-near{left:auto;right:-65px;top:620px;width:180px;margin-left:0}.hero-platform-middle{left:82%;top:310px}}

/* Platforms sit behind the terrain, enlarged uniformly by 25%. */
.hero-platform,.hero-platform-far,.hero-platform-near{z-index:0}
.hero-platform-middle{width:337.5px;margin-left:-168.75px}
.hero-platform-far{width:150px}
.hero-platform-near{width:425px;top:290px}
@media(max-width:1100px) and (min-width:701px){.hero-platform-far{width:125px}.hero-platform-near{width:337.5px;top:270px}}
@media(max-width:700px){.hero-platform-middle{width:187.5px;margin-left:-93.75px}.hero-platform-far{width:118.75px}.hero-platform-near{width:225px;top:560px}}

/* Original Diz star field and distant planets. */
.deep-space{opacity:.8;object-position:center top}
.hero-platform-near{right:-140px;top:210px}
@media(max-width:1100px) and (min-width:701px){.hero-platform-near{right:-130px;top:200px}}
@media(max-width:700px){.hero-platform-near{right:-95px;top:500px}.deep-space{object-position:62% top}}

/* Tile at a distant scale rather than enlarging the planets with the canvas. */
.deep-space{background-image:url('/assets/v3/game-starfield-1600.webp');background-size:1000px 1000px;background-repeat:repeat;background-position:center top;opacity:.72}
@media(max-width:700px){.deep-space{background-image:url('/assets/v3/game-starfield-900.webp');background-size:700px 700px}}

/* Restore the original landscape beneath the studio, contact and footer. */
footer{position:relative;isolation:isolate}
footer::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:50%;bottom:0;transform:translateX(-50%);width:100vw;height:650px;background:url('/assets/v3/space-1600.webp') center bottom/cover no-repeat;mask-image:linear-gradient(to bottom,transparent 0%,#000 60%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 60%)}
@media(max-width:700px){footer::before{height:440px;background-position:25% bottom;background-image:url('/assets/v3/space-900.webp')}}

/* Keep the restored scenery behind all studio and contact content. */
body{position:relative;isolation:isolate}footer{isolation:auto}

/* A full-width grass-and-rock ledge shares Diz's exact vertical movement. */
.hero-ground{position:absolute;left:0;right:0;top:850px;height:260px;z-index:2;pointer-events:none;overflow:hidden;will-change:transform;mask-image:linear-gradient(#000 80%,transparent 100%)}
.hero-ground img{width:100%;height:100%;max-width:none;object-fit:cover;object-position:center 69%;filter:brightness(.8)}
@media(min-width:1101px){.hero-character{right:-10%}.hero-platform-near{top:140px}}
@media(min-width:701px) and (max-width:1100px){.hero-character{right:-10%}.hero-platform-near{top:140px}}
@media(min-width:701px){.hero-landscape{bottom:175px}}
@media(max-width:700px){.hero-character{right:-12px}.hero-platform-near{top:430px}.hero-landscape{bottom:145px}.hero-ground{height:190px}.hero-ground img{width:850px;max-width:none;position:absolute;left:50%;transform:translateX(-50%);object-position:center 69%}}
@media(prefers-reduced-motion:reduce){.hero-ground{will-change:auto}}
html[data-motion="paused"] .hero-ground{will-change:auto}

/* Place the planted foot on the grass and keep the ledge above the gallery. */
.hero-ground{height:190px}
.hero-ground img{position:absolute;left:-80px;width:calc(100% + 160px);object-position:center 60%}
@media(max-width:700px){.hero-ground{height:170px}.hero-ground img{left:50%;width:850px;object-position:center 60%}}

/* Show the whole platform silhouette, with the grass surface beneath Diz's feet. */
.hero-ground{height:auto;aspect-ratio:800/534;overflow:visible;mask-image:none;-webkit-mask-image:none}
.hero-ground img{position:static;left:auto;width:100%;height:auto;max-width:none;object-fit:contain;object-position:center;transform:none}
@media(max-width:700px){.hero-ground{height:auto;aspect-ratio:800/534}.hero-ground img{position:static;left:auto;width:100%;height:auto;transform:none}}

/* Broad open grass platform: natural silhouette, both ends beyond the viewport. */
.hero-ground{--ground-width:max(130vw,850px);width:var(--ground-width);left:calc((100% - var(--ground-width))/2);right:auto;aspect-ratio:2172/724;height:auto}
.hero-ground img{width:100%;height:auto;filter:brightness(.9)}
@media(max-width:700px){.hero-ground{height:auto;aspect-ratio:2172/724}.hero-ground img{width:100%;height:auto}}
/* Soft environmental occlusion plus two close contact shadows plant Diz's feet. */
.hero-character{isolation:isolate}
.hero-character::after{content:none}
.hero-character>img{position:relative;z-index:1;filter:none}
.diz-grounding{position:absolute;pointer-events:none;z-index:0}
.diz-grounding i{position:absolute;display:block;transform:translate(-50%,-50%);border-radius:50%}
.diz-cast-shadow{left:53%;top:96.7%;width:85%;height:8%;background:radial-gradient(ellipse,rgba(3,17,13,.43) 0%,rgba(3,17,13,.24) 35%,transparent 72%);transform:translate(-50%,-50%) rotate(-5deg)!important;filter:blur(5px)}
.diz-contact-left{left:20%;top:94.4%;width:30%;height:3.4%;background:radial-gradient(ellipse,rgba(1,10,9,.8) 0%,rgba(2,14,10,.5) 30%,transparent 72%);filter:blur(2px)}
.diz-contact-right{left:81%;top:98.3%;width:31%;height:3.3%;background:radial-gradient(ellipse,rgba(1,10,9,.85) 0%,rgba(2,14,10,.52) 30%,transparent 72%);filter:blur(2px)}
/* Keep the occlusion immediately against the soles, with a fuller body shadow. */
.diz-cast-shadow{top:95.5%;height:10%;background:radial-gradient(ellipse,rgba(2,12,9,.65) 0%,rgba(3,17,13,.4) 34%,transparent 73%);filter:blur(7px)}
.diz-contact-left{top:93.4%;height:3%;background:radial-gradient(ellipse,rgba(1,8,6,.95) 0%,rgba(2,12,9,.7) 38%,transparent 75%)}
.diz-contact-right{top:97.3%;height:3%;background:radial-gradient(ellipse,rgba(1,8,6,.95) 0%,rgba(2,12,9,.7) 38%,transparent 75%)}
/* Lift only the floor shadows closer behind the soles. */
.diz-cast-shadow{top:94.5%}
.diz-contact-left{top:92.4%}
.diz-contact-right{top:96.3%}
/* Further lift the floor shadows behind the feet. */
.diz-cast-shadow{top:93.5%}
.diz-contact-left{top:91.4%}
.diz-contact-right{top:95.3%}
/* Independent floating motion on the artwork leaves scroll parallax intact. */
.hero-platform img{animation:platform-bob 8s ease-in-out infinite;--float-rise:12px}
.hero-platform-far img{animation-duration:10.7s;animation-delay:-3.8s;--float-rise:7px}
.hero-platform-middle img{animation-duration:8.3s;animation-delay:-1.4s;--float-rise:12px}
.hero-platform-near img{animation-duration:6.9s;animation-delay:-4.6s;--float-rise:16px}
@keyframes platform-bob{0%,100%{translate:0 0}50%{translate:0 calc(-1 * var(--float-rise))}}
html[data-motion="paused"] .hero-platform img{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.hero-platform img{animation:none;translate:none}}
/* Slightly livelier floating with a small independent rocking rotation. */
.hero-platform img{animation:platform-bob 6.6s ease-in-out infinite,platform-rock 8s ease-in-out infinite;--rock-angle:1.2deg;--rock-start:-1.2deg}
.hero-platform-far img{animation-duration:8.6s,11.1s;animation-delay:-3.8s,-2.1s;--rock-angle:1deg;--rock-start:-1deg}
.hero-platform-middle img{animation-duration:6.6s,8.7s;animation-delay:-1.4s,-4.2s}
.hero-platform-near img{animation-duration:5.5s,7.3s;animation-delay:-4.6s,-1.3s;--rock-angle:1.6deg;--rock-start:-1.6deg}
@keyframes platform-rock{0%,100%{rotate:var(--rock-start)}50%{rotate:var(--rock-angle)}}
@media(prefers-reduced-motion:reduce){.hero-platform img{animation:none;translate:none;rotate:none}}

/* Texture-matched eyelids reveal briefly over the unmodified hero image. */
.diz-blink{position:absolute;z-index:2;pointer-events:none;clip-path:inset(20% 0 80% 0)}
.diz-blink i{position:absolute;inset:0;background:url('/assets/v3/diz-blink-eyes.webp') center/100% 100% no-repeat}
.blink-left{clip-path:polygon(35% 23.3%,43% 23.4%,50% 23.8%,55% 24.5%,54.2% 27.8%,51% 30%,46% 31%,41% 30.7%,37% 28.9%,35% 26%)}
.blink-right{clip-path:polygon(54.5% 24.5%,62% 23.7%,69% 23.1%,71.4% 23.8%,70.2% 27.3%,68% 29.6%,64% 30.7%,60% 30.8%,56% 28.9%,54.5% 26.5%)} 
@media(prefers-reduced-motion:reduce){.diz-blink{display:none}}

/* A small breath pivots at sole level; shadows and platform do not breathe. */
.diz-idle{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transform-origin:50% 97%;animation:diz-breathe 4.8s ease-in-out infinite;will-change:transform}
.diz-idle>img{position:relative;z-index:1;filter:none}
@keyframes diz-breathe{0%,100%{transform:scale(1,1)}42%{transform:scale(.995,1.012)}72%{transform:scale(1.004,.997)}}
html[data-motion="paused"] .diz-idle{animation-play-state:paused;will-change:auto}
@media(prefers-reduced-motion:reduce){.diz-idle{animation:none;transform:none;will-change:auto}}
/* Increase motion amplitude while retaining the established rhythm. */
.hero-platform-far img{--float-rise:14px;--rock-angle:2deg;--rock-start:-2deg}
.hero-platform-middle img{--float-rise:24px;--rock-angle:2.4deg;--rock-start:-2.4deg}
.hero-platform-near img{--float-rise:32px;--rock-angle:3.2deg;--rock-start:-3.2deg}
@keyframes diz-breathe{0%,100%{transform:scale(1,1)}42%{transform:scale(.99,1.024)}72%{transform:scale(1.008,.994)}}

/* Larger, higher game title; all sparkle layers share the title's 3D motion. */
@media(min-width:701px){.hero-character{right:calc(-10% - 28px)}}
@media(max-width:700px){.hero-character{right:-20px}}
.diz-title{width:135%;max-width:600px;padding-top:0;margin:-45px 0 0 50%;transform:translateX(-50%);perspective:1000px}
.logo-bob,.logo-y,.logo-z,.logo-wordmark-wrap{display:block;position:relative;transform-style:preserve-3d}
.logo-z{padding-top:56px}
.logo-wordmark-wrap{isolation:isolate}
.logo-wordmark-wrap .diz-wordmark{display:block;width:100%}
.logo-sparkle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:0}
.sparkle-a{opacity:1}
.diz-title .diz-planet{width:142.5px;right:23%;top:0}
@media(max-width:1100px) and (min-width:701px){.diz-title{margin-top:-30px}.logo-z{padding-top:45px}.diz-title .diz-planet{width:120px}}
@media(max-width:700px){.diz-title{width:108%;max-width:367.5px;margin-top:-18px}.logo-z{padding-top:36px}.diz-title .diz-planet{width:99px;right:24%}}
/* The planet is the dot of the I, with a small independent float. */
.diz-title .diz-planet{left:50%;right:auto;width:23.75%;margin-left:-11.875%;top:0}
@media(max-width:700px){.diz-title .diz-planet{width:27%;margin-left:-13.5%}}
.diz-title .diz-planet{left:52%}

/* Corner studio mark and space for the forthcoming landscape gameplay video. */
.header{width:100%;max-width:none;margin:0;padding-inline:15px}
@media(min-width:701px){.hero-character{right:calc(-10% - 52px)}.diz-title{margin-top:-90px}}
.hero-video-backing{position:relative;width:126%;max-width:570px;margin:12px 0 0 50%;left:0;transform:translateX(-50%);animation:video-backing-float 7.8s ease-in-out infinite;transform-origin:50% 50%;filter:drop-shadow(0 10px 16px #01071980)}
.hero-video-backing>img{width:100%;height:auto;display:block}
.hero-video-slot{position:absolute;left:9%;top:11.6%;width:82%;aspect-ratio:16/9;overflow:hidden;border-radius:8px}
.hero-video-slot video{display:block;width:100%;height:100%;object-fit:contain;background:#020715}
@keyframes video-backing-float{0%,100%{transform:translate(-50%,0) rotate(-.4deg)}50%{transform:translate(-50%,-7px) rotate(.4deg)}}
html[data-motion="paused"] .hero-video-backing{animation-play-state:paused}
@media(max-width:1100px) and (min-width:701px){.diz-title{margin-top:-65px}.hero-video-backing{width:120%}}
@media(max-width:700px){.header{padding-inline:16px}.header nav{left:0;right:0}.diz-title{margin-top:-32px}.hero-video-backing{width:104%;margin-top:14px}.hero{height:1220px}.hero-character{right:-26px;top:580px}}
@media(prefers-reduced-motion:reduce){.hero-video-backing{animation:none}}
@media(max-width:700px){.hero-platform-near{top:650px}}

/* Title overlaps the top fifteen percent of its gently rocking plinth. */
.diz-title{z-index:2}
.hero-video-backing{z-index:1;margin-top:-11.3%}
@media(min-width:701px){.diz-title{margin-top:-120px}}
@media(max-width:1100px) and (min-width:701px){.diz-title{margin-top:-95px}.hero-video-backing{margin-top:-10.7%}}
@media(max-width:700px){.diz-title{margin-top:-48px}.hero-video-backing{margin-top:-9.3%}}
@keyframes video-backing-float{0%,100%{transform:translate(-50%,0) rotate(-1.2deg)}50%{transform:translate(-50%,-14px) rotate(1.2deg)}}
/* Star positions come from existing white stars surrounded by black sky in the
   game texture. The same tiled coordinates and parallax keep planets clear. */
.sky-twinkles{position:absolute;inset:0;pointer-events:none;--star-tile:1000px}
.twinkle-tile{position:absolute;width:var(--star-tile);height:var(--star-tile);left:calc(50% + var(--tile-x)*var(--star-tile));top:calc(var(--tile-y)*var(--star-tile));transform:translateX(-50%)}
.twinkle-tile i{position:absolute;width:calc(var(--star-size)*2);height:calc(var(--star-size)*2);margin:-8px;background:#edf7ff;clip-path:polygon(50% 0,59% 39%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 39%);opacity:0;animation:sky-twinkle calc(var(--star-duration)/3) linear var(--star-delay) infinite}
@keyframes sky-twinkle{0%,63%,100%{opacity:0;transform:rotate(-24deg) scale(.55)}73%{opacity:.92;transform:rotate(0deg) scale(1.15)}84%{opacity:0;transform:rotate(30deg) scale(.65)}}
html[data-motion="paused"] .twinkle-tile i{animation-play-state:paused}
@media(max-width:700px){.sky-twinkles{--star-tile:700px}}
@media(prefers-reduced-motion:reduce){.sky-twinkles{display:none}}
/* Expandable games list leaves room for future titles. */
.games-menu{position:relative}
.games-menu summary{cursor:pointer;list-style:none;padding:13px 0}
.games-menu summary::-webkit-details-marker{display:none}
.games-menu summary::after{content:'⌄';margin-left:8px;color:var(--green)}
.games-options{position:absolute;top:100%;left:-18px;min-width:140px;padding:7px 18px;background:#0b1629f5;border:1px solid var(--line);border-radius:8px;box-shadow:0 10px 24px #0006}
.header nav .games-options a{display:block;padding:10px 0}
.contact-area .studio,.contact-area .contact{width:100%}
@media(max-width:700px){.games-menu summary{padding:12px 0}.games-options{position:static;margin-bottom:8px;box-shadow:none}}
@media(max-width:700px){.hero-platform-middle{top:520px}}

/* Compact title and a glowing future Play destination on the plinth edge. */
.diz-title{width:121.5%;max-width:540px}
.hero-video-backing{margin-top:-15.5%;margin-bottom:70px}
.play-coming{position:absolute;left:50%;bottom:-53px;transform:translateX(-50%);width:max-content;max-width:94%;text-align:center;z-index:3}
.play-coming-button{position:relative;display:flex;align-items:center;justify-content:center;gap:13px;min-height:61px;padding:12px 32px;border:1px solid #e4ffb6;border-radius:999px;background:linear-gradient(160deg,#e0ff9d 0%,#b7ef68 42%,#72c72d 100%);color:#132909;font:600 21px/1.25 "Segoe UI",Arial,sans-serif;letter-spacing:-.025em;box-shadow:inset 0 2px 1px #f6ffd9cc,inset 0 -3px 3px #3b8c2466,0 5px 18px #020a1480;animation:play-invitation 3s ease-in-out infinite;cursor:default}
.play-coming-button::before{content:"";position:absolute;inset:-5px;border-radius:inherit;border:1px solid #c7ff8270;pointer-events:none}
.play-triangle{display:block;width:21px;height:25px;background:linear-gradient(145deg,#17381c,#327434);clip-path:polygon(0 0,100% 50%,0 100%);filter:drop-shadow(0 1px 0 #fff5)}
.play-coming p{margin-top:13px;font-size:14px;line-height:1.3;font-weight:600;color:#f0f6ec;text-shadow:0 2px 6px #020719;letter-spacing:.035em}
@keyframes play-invitation{0%,100%{transform:scale(1);box-shadow:inset 0 2px 1px #f6ffd9cc,inset 0 -3px 3px #3b8c2466,0 5px 18px #020a1480,0 0 13px #b7ef6838}50%{transform:scale(1.035);box-shadow:inset 0 2px 1px #f6ffd9cc,inset 0 -3px 3px #3b8c2466,0 6px 22px #020a1480,0 0 32px #b7ef6870}}
html[data-motion="paused"] .play-coming-button{animation-play-state:paused}
@media(max-width:1100px) and (min-width:701px){.hero-video-backing{margin-top:-15%}}
@media(max-width:700px){.diz-title{width:97.2%;max-width:330.75px}.hero-video-backing{margin-top:-13%}.play-coming-button{min-height:51px;padding:10px 25px;font-size:19px}.play-coming{bottom:-49px}.play-coming p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.play-coming-button{animation:none}}

/* A lifted title stack and a polished, independently floating Play invitation. */
@media(min-width:701px){.diz-title{margin-top:-142px}}
@media(max-width:1100px) and (min-width:701px){.diz-title{margin-top:-117px}}
.hero-video-backing{margin-top:-20%}
.play-coming{bottom:-29px;animation:play-button-float 5.9s ease-in-out infinite;transform-origin:center}
.play-coming-button{min-height:77px;padding:12px 35px;gap:17px;border:1px solid #ecffd0;background:linear-gradient(165deg,#f1ffca 0%,#c9fa83 30%,#a3e856 64%,#75c936 100%);box-shadow:inset 0 2px 0 #fffde8,inset 0 -4px 5px #3b922860,0 6px 0 #367d34,0 11px 24px #01081db3;overflow:visible;animation:play-jewel-pulse 3.4s ease-in-out infinite}
.play-coming-button::before{inset:-6px;border:1px solid #caff9355;box-shadow:0 0 15px #aef56530}
.play-coming-button::after{content:"";position:absolute;top:4px;left:14%;right:14%;height:28%;border-radius:50%;background:linear-gradient(#ffffff65,#ffffff00);pointer-events:none}
.play-button-copy{display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1}
.play-button-title{font-size:22px;line-height:1.2;letter-spacing:-.025em;text-shadow:0 1px 0 #f1ffd580}
.play-button-soon{font-size:12px;line-height:1.25;letter-spacing:.055em;color:#315522;font-weight:600}
.play-coming .play-triangle{width:27px;height:31px;background:linear-gradient(150deg,#164c34,#2b7e3d);filter:drop-shadow(0 1px 0 #f5ffd8)}
@keyframes play-button-float{0%,100%{transform:translate(-50%,0) rotate(-1.3deg)}50%{transform:translate(-50%,-10px) rotate(1.3deg)}}
@keyframes play-jewel-pulse{0%,100%{scale:1;filter:drop-shadow(0 0 5px #b7ef6820)}50%{scale:1.025;filter:drop-shadow(0 0 15px #b7ef6860)}}
html[data-motion="paused"] .play-coming{animation-play-state:paused}
@media(max-width:1100px) and (min-width:701px){.hero-video-backing{margin-top:-19.5%}}
@media(max-width:700px){.diz-title{margin-top:-60px}.hero-video-backing{margin-top:-18%}.play-coming{bottom:-27px}.play-coming-button{min-height:68px;padding:10px 28px;gap:13px}.play-button-title{font-size:20px}.play-button-soon{font-size:11px}.play-coming .play-triangle{width:23px;height:27px}}
@media(prefers-reduced-motion:reduce){.play-coming,.play-coming-button{animation:none}}

/* Trailer sits just inside the menu surround with a fine PRKY-green edge. */
.hero-video-slot{left:11%;top:13.4%;width:78%;border:2px solid #b7ef68;border-radius:9px;background:#020715;box-shadow:0 0 12px #b7ef6825;isolation:isolate}
.hero-video-slot video{width:100%;height:100%;object-fit:contain}
.trailer-sound-toggle{position:absolute;inset:0;width:100%;height:100%;display:grid;place-items:center;border:0;padding:0;background:transparent;color:#ddffb6;cursor:pointer}
.trailer-speaker{display:grid;place-items:center;width:65px;height:65px;border-radius:50%;border:1px solid #d8ffa77d;background:linear-gradient(145deg,#0a1925c9,#06101bcf);box-shadow:0 4px 18px #0007,inset 0 1px 0 #ffffff20;backdrop-filter:blur(4px);transition:opacity .2s,transform .2s,background .2s}
.trailer-speaker svg{width:32px;height:32px}
.speaker-disable{display:none}
[data-trailer-mode="sound"] .speaker-enable{display:none}
[data-trailer-mode="sound"] .speaker-disable{display:block}
[data-trailer-mode="sound"] .trailer-speaker{opacity:.28;transform:scale(.8)}
@media(hover:hover) and (pointer:fine){.trailer-sound-toggle:hover .trailer-speaker{opacity:1;transform:scale(1);background:#102321e8}}
.trailer-sound-toggle:focus-visible .trailer-speaker{opacity:1;transform:scale(1);background:#102321e8}
.trailer-sound-toggle:focus-visible{outline:3px solid #dcffa1;outline-offset:-5px}
@media(max-width:700px){.trailer-speaker{width:49px;height:49px}.trailer-speaker svg{width:26px;height:26px}.hero-video-slot{border-width:1.5px;border-radius:6px}}

.hero-platform-far{left:-3%}
@media(max-width:1100px) and (min-width:701px){.hero-platform-far{left:-6%}}
@media(max-width:700px){.hero-platform-far{left:-65px}}

/* Size the sky to the shortened page's gentle parallax travel. */
.environment .space-canvas{height:calc(100% + 140px + var(--space-travel,80px))}
@media(max-width:700px){.environment .space-canvas{height:calc(100% + 60px + var(--space-travel,80px))}}

/* Portrait composition: clear trailer above an off-centre character vignette. */
@media(max-width:700px){
 .hero{height:990px}
 .hero-content{width:92%}
 .hero-copy{top:26px}
 .diz-title{width:91%;max-width:350px;margin-top:-25px}
 .hero-video-backing{width:102%;max-width:430px;margin-top:-18%;margin-bottom:60px}
 .hero-character{left:-100px;right:auto;top:425px;width:440px;height:510px}
 .hero-character img{max-width:none;width:auto;height:100%;max-height:510px}
 .hero-landscape{height:540px;bottom:75px;left:-60%;right:-45%}
 .hero-platform-far{left:-42px;top:35px;width:100px}
 .hero-platform-middle{left:auto;right:0;top:470px;width:150px;margin-left:0}
 .hero-platform-near{right:-90px;top:680px;width:240px}
 .studio{padding-top:30px;gap:23px}
 .studio-copy h2{font-size:28px;max-width:300px}
 .studio-copy p{line-height:1.7;max-width:380px}
 .contact{gap:19px;padding-top:26px}
 .contact>a{font-size:clamp(18px,5.2vw,23px)}
 footer{padding-bottom:28px}
}
@media(max-width:360px){
 .hero{height:925px}
 .hero-copy{top:24px}
 .hero-character{left:-105px;top:380px;width:415px;height:485px}
 .hero-character img{max-height:485px}
 .hero-platform-middle{top:430px;width:125px}
 .hero-platform-near{top:625px;width:210px}
}
@media(min-width:361px) and (max-width:700px){.hero{height:930px}.hero-character{top:365px}.hero-platform-middle{top:440px}.hero-platform-near{top:620px}}
/* Contain off-screen scenery and leave the studio clear of the foreground island. */
@media(max-width:700px){.hero{overflow:clip;height:1040px}}
@media(max-width:360px){.hero{height:990px}}

/* A smaller central Diz passes over the trailer without intercepting taps. */
@media(max-width:700px){
 .hero{height:850px}
 .hero-character{left:calc(50% - 110px);right:auto;top:380px;width:220px;height:255px;pointer-events:none}
 .hero-character *,.hero-ground{pointer-events:none}
 .hero-character img{height:100%;width:auto;max-height:255px;max-width:none}
 .hero-landscape{height:400px;bottom:70px}
 .hero-platform-middle{top:470px;right:-18px;width:140px}
 .hero-platform-near{top:610px;right:-80px;width:210px}
}
@media(max-width:700px){.hero-character{top:330px}}
@media(max-width:700px){.hero-character{z-index:4}}

/* Portrait scenery: a deeper landing surface with the treeline behind it. */
@media(max-width:700px){
 .hero-ground{margin-top:28px}
 .hero-landscape{bottom:185px}
 .hero-platform-near{top:410px;right:-85px}
}
@media(max-width:700px){.hero-platform-near{top:280px}}

/* Leave the Play invitation clear before the foreground starts to scroll. */
@media(max-width:700px){.hero-character{top:385px}}

/* Keep the portrait treeline above the moving foreground island. */
@media(max-width:700px){.hero-landscape{height:245px;bottom:340px}}
@media(max-width:700px){.hero-landscape{mask-image:none;-webkit-mask-image:none}}

/* Bring the island beside the trailer out on the left in portrait. */
@media(max-width:700px){.hero-platform-near{left:-85px;right:auto;top:330px}}

/* Let drifting mobile scenery cross the hero/studio boundary without a cut edge. */
@media(max-width:700px){
 .hero{overflow-x:clip;overflow-y:visible}
 .trailer-speaker{backdrop-filter:none}
}
/* A touch must not leave a sticky hover/focus icon over audible video. */
@media(hover:none),(pointer:coarse){
 .hero-video-slot[data-trailer-mode="sound"] .trailer-sound-toggle .trailer-speaker{opacity:0;transform:scale(.8)}
}
/* Browser toolbar collapse must not resize the fixed sky's drawing surface. */
@supports(height:100lvh){
 @media(max-width:700px){.environment{bottom:auto;height:100lvh}}
}
@media(max-width:700px){.hero-video-slot[data-trailer-mode="sound"] .trailer-sound-toggle .trailer-speaker{opacity:0;transform:scale(.8)}}