@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800;900&display=swap');
:root{color-scheme:dark;--base:#071c25;--deep:#06151e;--panel:#102935;--text:#f2f8fa;--muted:#b3c8d0;--cyan:#55d6ed;--gold:#f5d064}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--base);color:var(--text);font:16px/1.6 'DM Sans',system-ui,sans-serif}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Outfit,system-ui,sans-serif;line-height:1.12}a{color:inherit}img{max-width:100%;display:block}.nav{position:sticky;top:0;z-index:20;background:rgba(4,20,28,.9);backdrop-filter:blur(18px);border-bottom:1px solid #2c5b69}.nav-inner{height:74px;max-width:1200px;margin:auto;padding:0 25px;display:flex;justify-content:space-between;align-items:center}.brand{font:800 21px Outfit,sans-serif;text-decoration:none;white-space:nowrap;letter-spacing:.04em}.brand span:last-child{color:var(--cyan)}.brand-star{color:var(--gold);margin-right:8px}.nav nav{display:flex;gap:32px;align-items:center}.nav nav a{text-decoration:none;font-size:14px;font-weight:700;color:#c5dce4}.nav nav a:hover{color:white}.nav .nav-cta{background:#163b49;padding:10px 18px;border:1px solid var(--cyan);border-radius:12px;color:white}.hero{min-height:660px;display:flex;align-items:center;position:relative;overflow:hidden;border-bottom:1px solid #193f4a;background:radial-gradient(ellipse at 79% 40%,#166270 0%,#103b4c 25%,#071c25 64%)}.hero::before{content:'';position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(#6aaabf55 1px,transparent 1px);background-size:50px 50px;opacity:.27}.hero-inner{max-width:1200px;width:100%;padding:100px 25px;margin:auto;position:relative;z-index:2}.hero-inner>*{max-width:580px}.eyebrow,.overline{font-size:12px;font-weight:800;letter-spacing:.19em;color:var(--cyan);text-transform:uppercase}.eyebrow{border:1px solid #356a77;display:inline-flex;gap:10px;align-items:center;border-radius:40px;padding:8px 14px;background:#0d2e3c}.pulse{width:8px;height:8px;border-radius:50%;background:#70e0bc;box-shadow:0 0 15px #70e0bc}.hero-logo{margin:27px 0 5px;display:flex;gap:10px}.mini{width:40px;height:40px;display:grid;place-items:center;border-radius:50%;border:2px solid}.fire{border-color:#ff6d4e}.water{border-color:#58b2ff}.earth{border-color:#94ba68}.air{border-color:#b7a8fb}h1{font-size:clamp(54px,7vw,100px);font-weight:900;letter-spacing:-.055em;line-height:.97;text-shadow:0 5px 20px #0006}h1 em{font-style:normal;color:var(--gold)}.hero-subtitle{margin-top:22px;font:700 clamp(21px,2.8vw,29px) Outfit,sans-serif;color:#c3f5f3}.hero-copy{margin-top:15px;color:#c5dce4;max-width:520px;font-size:17px}.hero-actions{display:flex;gap:13px;flex-wrap:wrap;margin-top:28px}.btn{border:0;display:inline-flex;align-items:center;justify-content:center;gap:15px;text-decoration:none;font:800 15px Outfit,sans-serif;min-height:51px;border-radius:12px;padding:12px 23px;cursor:pointer}.btn-primary{background:linear-gradient(135deg,#f7d67a,#ebb758);color:#09242c;box-shadow:0 5px 25px #e8b44a30}.btn-primary:hover{filter:brightness(1.1)}.btn-outline{border:1px solid #6abaca;background:#153d4a;color:white}.hero-details{margin-top:31px;display:flex;gap:17px;flex-wrap:wrap;color:#c2d9e0;font-size:12px;font-weight:700}.hero-screen{position:absolute;width:255px;right:max(8%,calc((100vw - 1170px)/2));top:48px;transform:rotate(7deg);border:7px solid #133e4d;border-radius:32px;overflow:hidden;box-shadow:0 30px 95px #000b,0 0 50px #3bd1e033;z-index:1}.hero-screen img{width:100%;height:515px;object-fit:cover;object-position:top}.section{max-width:1200px;margin:auto;padding:100px 25px}.section-title{text-align:center;max-width:720px;margin:auto}.section h2,.music h2{font-size:clamp(36px,4.8vw,58px);font-weight:800;letter-spacing:-.035em;margin:13px 0 18px}.section h2 span,.music h2 i{color:var(--cyan);font-style:normal}.section-title p,.section-heading p{color:var(--muted);max-width:690px;margin:auto;font-size:17px}.cycle{display:flex;align-items:center;justify-content:center;gap:13px;flex-wrap:wrap;margin-top:43px}.cycle-card{border:1px solid #376472;background:#112f3b;border-radius:15px;width:130px;min-height:135px;display:flex;align-items:center;flex-direction:column;justify-content:center;font-size:38px}.cycle-card b{font:800 13px Outfit,sans-serif;margin-top:8px;letter-spacing:.12em}.c-fire{border-color:#b65e48}.c-water{border-color:#508abe}.c-earth{border-color:#739457}.c-air{border-color:#8d83b7}.beats{font-size:13px;color:var(--muted);font-weight:800}.section-heading{text-align:center;margin-bottom:43px}.modes{padding-top:55px}.feature-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.feature{border:1px solid #305360;border-radius:20px;background:linear-gradient(145deg,#183745,#0b2633);padding:28px 22px;min-height:275px}.feature-journey{border-color:#907647}.feature-icon{width:49px;height:49px;display:grid;place-items:center;background:#245360;border:1px solid #4bd5e9;border-radius:14px;color:var(--gold);font-size:26px;margin-bottom:22px}.feature h3{font-size:23px;margin-bottom:12px}.feature p{color:#b9d0d7;font-size:14px}.music{padding:75px max(25px,calc((100vw - 1100px)/2));display:grid;grid-template-columns:1fr 1.3fr;gap:75px;align-items:center;background:linear-gradient(115deg,#143a46,#102e3c 55%,#252344);border-block:1px solid #376477}.music-art{height:300px;border-radius:32px;background:radial-gradient(circle,#1c808e,#142b48 54%,#1c2540);display:grid;place-items:center;font-size:115px;color:#c5f5f4;position:relative;overflow:hidden;text-shadow:0 0 35px #6bdde3}.music-ring{position:absolute;border:2px solid #6dd9dc35;border-radius:50%;width:230px;height:230px}.music-ring.two{width:340px;height:340px}.music h2 i{color:#ecbbef}.music p{color:#c6d6e5;font-size:17px;max-width:550px}.music-pill{display:inline-block;margin-top:23px;color:#e0eff7;font-size:13px;border:1px solid #527284;border-radius:22px;padding:8px 16px}.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:17px}.gallery figure{margin:0;background:#122e3b;border:1px solid #345b69;border-radius:17px;padding:8px 8px 14px;min-width:0;box-shadow:0 12px 30px #0003;transition:transform .2s}.gallery figure:hover{transform:translateY(-7px)}.gallery img{width:100%;aspect-ratio:945/2048;object-fit:cover;border-radius:11px}.gallery figcaption{text-align:center;font:700 14px Outfit,sans-serif;margin-top:13px;color:#d1e9ed}.beta{max-width:980px}.beta-panel{border:1px solid #497587;border-radius:27px;background:radial-gradient(circle at 95% 0%,#194c5f,#102c3b 55%,#0c2734);padding:clamp(30px,6vw,65px);text-align:center;box-shadow:0 20px 55px #0004}.beta-panel h2{margin-bottom:15px}.beta-panel h2 span{color:var(--gold)}.beta-panel>p{color:var(--muted);max-width:570px;margin:auto}.beta-form{max-width:490px;text-align:left;margin:30px auto 0;display:flex;flex-direction:column;gap:9px}.beta-form label{font-size:14px;font-weight:800;margin-top:8px}.beta-form input[type=email],.beta-form select{width:100%;padding:14px 16px;border:1px solid #517b87;background:#071e29;color:white;border-radius:11px;font:500 16px 'DM Sans',sans-serif;min-height:53px}.beta-form input:focus,.beta-form select:focus{outline:2px solid var(--cyan);outline-offset:2px}.check{display:flex;align-items:flex-start;gap:12px;color:#d1dfe4;font-weight:500!important;line-height:1.5;margin:10px 0}.check input{margin-top:5px;accent-color:#53d5e6}.beta-form button{margin-top:5px;width:100%}.form-note,.privacy-note{font-size:12px!important;color:#a6c3cc!important;line-height:1.6}.form-note{text-align:center;margin-top:8px!important}.privacy-note{max-width:550px!important;margin:22px auto 0!important}.privacy-note a{color:#a6edf2}#tally-container{margin:30px auto 0;max-width:590px;background:white;border-radius:14px;overflow:hidden}#tally-frame{width:100%;height:490px;border:0;display:block}footer{background:#06141d;border-top:1px solid #244451;padding:38px 24px;text-align:center}footer p{color:#b6d4d7;margin:7px 0 20px;font-size:14px}footer small{font-size:12px;color:#91b0bb}@media(max-width:1100px){.hero-screen{right:4%;width:210px}.hero-screen img{height:435px}.hero-inner>*{max-width:60%}.feature-grid{grid-template-columns:repeat(2,1fr)}.gallery-grid{gap:10px}}@media(max-width:720px){.nav-inner{height:65px;padding:0 16px}.brand{font-size:17px}.nav nav{gap:12px}.nav nav a:not(.nav-cta){display:none}.nav .nav-cta{font-size:12px;padding:8px 12px}.hero{min-height:auto}.hero-inner{padding:70px 22px 65px;text-align:center}.hero-inner>*{max-width:100%}.hero-logo,.hero-actions,.hero-details{justify-content:center}.hero-screen{display:none}h1{font-size:clamp(55px,14vw,88px)}.hero-copy{margin-inline:auto}.section{padding:65px 18px}.modes{padding-top:25px}.cycle{gap:8px}.cycle-card{width:73px;min-height:95px;font-size:27px}.cycle-card b{font-size:10px}.beats{font-size:10px}.final-beat{width:100%;text-align:center}.feature-grid{grid-template-columns:1fr 1fr;gap:10px}.feature{padding:18px 14px;min-height:260px}.feature h3{font-size:19px}.feature p{font-size:13px}.music{grid-template-columns:1fr;padding:65px 22px;gap:25px}.music-art{height:230px}.gallery-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;padding:4px 2px 20px}.gallery figure{flex:0 0 55%;scroll-snap-align:center}.beta-panel{padding:32px 19px}.beta-form{margin-top:20px}}@media(max-width:390px){.feature-grid{grid-template-columns:1fr}.feature{min-height:0}.hero-details{gap:9px}.cycle-card{width:65px}.beats{font-size:9px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.gallery figure{transition:none}}
[hidden]{display:none!important}

/* v2: a true four-element loop and fully visible uncropped gameplay images. */
.element-wheel{width:min(100%,480px);aspect-ratio:1;position:relative;margin:42px auto 0;isolation:isolate}
.wheel-arrows{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wheel-arrows path{fill:none;stroke:#eac96f;stroke-width:8;stroke-linecap:round;filter:drop-shadow(0 2px 4px #0007)}
.wheel-core{position:absolute;inset:38%;border-radius:50%;background:#122e3b;border:1px solid #5ba4a9;display:flex;flex-direction:column;justify-content:center;align-items:center;font:700 clamp(9px,2vw,13px) Outfit,sans-serif;line-height:1.05;letter-spacing:.045em;color:#f0f9fa;box-shadow:0 0 30px #36bfd522;text-align:center}
.wheel-core strong{color:#55d6ed;font-size:1.18em}
.wheel-node{position:absolute;width:24%;height:24%;min-width:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;background:#102d3c;border:2px solid;border-radius:50%;box-shadow:0 8px 24px #0008;text-align:center}
.wheel-node strong{font:800 clamp(10px,2.5vw,15px) Outfit,sans-serif;letter-spacing:.04em}
.wheel-icon{font-size:clamp(24px,6vw,45px);line-height:1.1}
.wheel-fire{top:0;left:38%;border-color:#ff7459}.wheel-air{top:38%;right:0;border-color:#b7a8fb}.wheel-earth{bottom:0;left:38%;border-color:#94ba68}.wheel-water{top:38%;left:0;border-color:#58b2ff}
.wheel-caption{text-align:center;font-size:14px;color:var(--muted);margin-top:16px}
.gallery-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;align-items:start}
.gallery figure{min-width:0;padding:13px 13px 17px}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:center;border-radius:10px}
.gallery figcaption{font-size:16px}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}}
@media(max-width:600px){.gallery-grid{display:grid;grid-template-columns:1fr;overflow:visible;gap:22px;padding:0}.gallery figure{width:min(100%,410px);margin-inline:auto;flex:none}.element-wheel{width:min(100%,370px)}.wheel-arrows path{stroke-width:8}}

/* v3: improved arrowheads and a six-image 3x2 gallery layout. */
.gallery-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.gallery-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.gallery-grid{grid-template-columns:1fr}}

/* v4: replace custom wheel with provided transparent element-cycle artwork and remove beta note copy. */
.element-cycle-display{margin:42px auto 0;display:flex;justify-content:center;align-items:center}
.element-cycle-display img{width:min(100%,400px);height:auto;display:block;filter:drop-shadow(0 10px 26px rgba(0,0,0,.35))}
.beta-form{margin-bottom:0}
@media(max-width:600px){.element-cycle-display img{width:min(100%,320px)}}