@font-face{font-family:Pixel;src:url('/assets/pixel.ttf') format('truetype');font-display:swap}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{margin:0;background:#f6f5e9;color:#142d25;font-family:Arial,Helvetica,sans-serif;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
button,a{-webkit-tap-highlight-color:transparent}
button:focus-visible,a:focus-visible{outline:3px solid #2c6860;outline-offset:6px}
img{max-width:100%;height:auto;display:block}

/* Header */
.header{height:102px;padding:0 5.5%;display:flex;align-items:center;justify-content:space-between;background:#f6f5e9;border-bottom:1px solid #142d2520;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:12px;font-weight:900;line-height:.9;font-size:24px;letter-spacing:-1.2px}
.brand-icon{width:48px;height:48px;object-fit:contain;image-rendering:pixelated}
.brand-bottom{display:block;font-size:11px;letter-spacing:4px;margin-top:10px;font-weight:700}
.header nav{display:flex;gap:42px;font-size:15px;font-weight:600}
.header nav a:hover{text-decoration:underline;text-underline-offset:7px}
.sound-button{display:flex;align-items:center;gap:10px;background:transparent;border:1px solid #142d2540;padding:12px 14px;font-size:13px;border-radius:3px}
.sound-state{font-size:12px;border:1px solid #142d2550;padding:3px;margin-left:8px}
.equalizer{height:17px;display:flex;align-items:center;gap:3px}
.equalizer i{width:3px;height:6px;background:currentColor}
.equalizer i:nth-child(2){height:15px}.equalizer i:nth-child(3){height:11px}.equalizer i:nth-child(4){height:8px}

/* Hero with the live Three.js scene */
.hero{min-height:680px;height:calc(100svh - 150px);max-height:840px;position:relative;background:#b9dbd1;isolation:isolate;overflow:hidden}
.hero-scene{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:pan-y}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#b9dbd1f0 0%,#b9dbd1b8 32%,#b9dbd100 60%);z-index:1;pointer-events:none}
.no-webgl .hero-scene{display:none}
.no-webgl .hero{background:#d7eadc url(/assets/owl-world.webp) center/cover}
.no-webgl .hero::before{background:linear-gradient(90deg,#c5e6dde6 0%,#c5e6dd80 38%,transparent 62%)}
.hero-content{position:relative;padding:80px 5.5% 110px;z-index:2;max-width:760px;pointer-events:none}
.hero-content a,.hero-content button{pointer-events:auto}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;display:flex;align-items:center;gap:10px;line-height:1.6}
.tiny-square{height:7px;width:7px;background:#142d25;display:inline-block}
h1{font-family:Pixel,'Courier New',monospace;font-size:clamp(30px,3.55vw,62px);line-height:1.52;letter-spacing:-1.8px;margin:27px 0 22px;font-weight:400}
h1 span{color:#245b36}
.hero-description{font-size:18px;line-height:1.65;margin:0 0 27px}
.hero-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;gap:35px;background:#d5f783;border:2px solid #142d25;box-shadow:4px 4px 0 #142d25;font-size:15px;font-weight:700;padding:18px 22px;transition:transform .15s,box-shadow .15s}
.button:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 #142d25}
.button span{font-size:24px;line-height:.6}
.button.is-pending{background:#f6f5e9;cursor:default}
.button.is-pending:hover{transform:none;box-shadow:4px 4px 0 #142d25}
.hero-note{font-size:12px;margin-top:22px}
.hero-note span{font-size:18px;margin-right:7px}
.hero-bottom{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-between;padding:24px 5.5%;font-size:12px;letter-spacing:1.5px;color:#fff;font-weight:700;background:linear-gradient(transparent,#0b231d80);z-index:2;pointer-events:none}
.hero-bottom a{pointer-events:auto}
.hero-bottom a span{margin-left:14px}

/* Ticker */
.ticker{background:#d5f783;border-top:2px solid #142d25;border-bottom:2px solid #142d25;height:62px;display:flex;align-items:center;overflow:hidden}
.ticker div{white-space:nowrap;font:12px Pixel,monospace;word-spacing:4px;animation:marquee 55s linear infinite}
.ticker span{font-family:Arial,sans-serif;font-size:27px;margin:0 40px;vertical-align:middle}

/* Sections */
.section{padding:84px 7%}
.section-intro{display:flex;justify-content:space-between;align-items:center;margin-bottom:43px}
.section-intro .eyebrow{margin:0}
.edition{font-size:12px;letter-spacing:1.2px;border-bottom:1px solid;padding-bottom:6px}
.world-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;margin-bottom:58px}
h2{font-size:clamp(40px,4.5vw,70px);font-weight:700;letter-spacing:-3px;line-height:1.07;margin:0}
h2 em{font-family:Georgia,serif;font-weight:400}
p{line-height:1.7}
.world-description{max-width:420px;font-size:18px}
.world-description p:first-child{margin-top:0}
.text-link{display:inline-block;margin-top:15px;font-size:14px;font-weight:700;border-bottom:1px solid;padding-bottom:8px}
.text-link span{margin-left:25px}
.hero-actions .text-link{margin-top:0}

/* Feature grid */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:45px;margin-top:67px}
.values article{border-top:1px solid #142d2550;padding-top:22px}
.value-number{font-family:monospace;font-size:12px}
.values h3{font-size:21px;letter-spacing:-.6px;margin:25px 0 10px}
.values p{font-size:14px;color:#43564b;margin:0}
.features{margin-top:0;row-gap:55px}

/* Worlds: dark card with the second live scene */
.worlds{background:#e9eddd;border-top:1px solid #142d2520;border-bottom:1px solid #142d2520}
.world-card{min-height:520px;background:#123f3b;position:relative;color:#f6f5e9;border:2px solid #142d25;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr);box-shadow:8px 9px 0 #142d2520}
.world-scene{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.world-scene:active{cursor:grabbing}
.world-card::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#123f3bd9 0%,#123f3b8c 34%,transparent 62%);z-index:1;pointer-events:none}
.no-webgl .world-scene{display:none}
.world-copy{position:relative;z-index:1;padding:48px;max-width:470px;pointer-events:none}
.world-copy a,.world-copy button{pointer-events:auto}
.tag{background:#d5f783;color:#142d25;font-size:12px;letter-spacing:1.3px;padding:8px 10px;display:inline-block;font-weight:700}
.world-card h3{font:22px/1.7 Pixel,monospace;letter-spacing:-.8px;margin:26px 0 15px}
.world-card p{font-size:15px;min-height:78px}
.world-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.world-tabs button{background:#f6f5e920;border:1px solid #f6f5e960;color:#f6f5e9;font-size:12px;font-weight:700;letter-spacing:1px;padding:10px 14px;text-transform:uppercase}
.world-tabs button:hover{background:#f6f5e935}
.world-tabs button[aria-selected="true"]{background:#d5f783;color:#142d25;border-color:#d5f783}
.scene-caption{position:absolute;bottom:23px;right:25px;font-size:12px;letter-spacing:1.4px;z-index:1;pointer-events:none}
.world-more{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:58px;align-items:start}
.world-more h3{font-size:clamp(28px,3vw,40px);letter-spacing:-1.5px;margin:0 0 15px;line-height:1.1}
.world-more p{margin:0;font-size:17px;max-width:460px}
.hazard-list{list-style:none;margin:0;padding:0}
.hazard-list li{border-top:1px solid #142d2550;padding:18px 0;font-size:15px;line-height:1.6}
.hazard-list li:last-child{border-bottom:1px solid #142d2550}
.hazard-list b{display:block;font-family:monospace;font-size:12px;letter-spacing:1px;margin-bottom:4px}

/* Screens */
.studio-heading{display:grid;grid-template-columns:1.3fr 1fr;gap:80px;align-items:end}
.studio-heading h2{font-size:clamp(38px,4vw,61px)}
.studio-heading>p{font-size:18px;max-width:420px;margin:0}
.phones{display:grid;grid-template-columns:repeat(5,1fr);gap:28px;margin-top:67px}
.phone{margin:0}
.phone img{border:3px solid #142d25;border-radius:26px;box-shadow:6px 6px 0 #142d25;background:#142d25;aspect-ratio:640/1389;object-fit:cover}
.phone figcaption{font-size:12px;letter-spacing:1.3px;font-weight:700;margin-top:18px;text-align:center}

/* Download */
.download{display:flex;align-items:center;gap:70px;padding-top:75px;padding-bottom:75px;background:#d5f783}
.download h2{font-size:60px;margin:20px 0}
.download p{font-size:16px}
.app-icon{width:min(280px,32vw);height:auto;border:3px solid #142d25;border-radius:22%;box-shadow:8px 9px 0 #142d25;flex-shrink:0}
.download-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:8px}
.download-actions .text-link{margin-top:0}
.download-actions .button{background:#f6f5e9}
.download-note{font-size:13px;color:#2f4a3c;margin-top:26px}

/* Footer */
footer{background:#142d25;color:#f6f5e9;padding:46px 5.5% 22px}
.footer-top{display:flex;align-items:center;justify-content:space-between;padding-bottom:35px}
.footer-top p{font-size:18px;line-height:1.4}
.footer-top strong{font-weight:400;color:#d5f783}
.back-top{font-size:12px;letter-spacing:1px}
.footer-bottom{border-top:1px solid #ffffff30;padding-top:22px;display:flex;justify-content:space-between;font-size:12px;color:#d3dbcc}
.footer-bottom a{text-decoration:underline;text-underline-offset:4px}
.skip-link{position:fixed;left:20px;top:-100px;z-index:100;background:#d5f783;padding:15px}
.skip-link:focus{top:15px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Footer links to support and legal pages */
.footer-links{display:flex;gap:26px}

/* Support, privacy and terms pages */
.page-hero{background:#b9dbd1;border-bottom:2px solid #142d25;padding:70px 7% 60px}
.page-hero h1{font-size:clamp(24px,3vw,44px);margin:22px 0 18px}
.page-hero p{font-size:18px;margin:0;max-width:640px}
.page-meta{font-size:12px;letter-spacing:1.2px;font-weight:700;margin-top:24px!important}
.page-body{display:grid;grid-template-columns:230px minmax(0,720px);gap:70px;padding:70px 7% 90px}
.page-toc{position:sticky;top:30px;align-self:start;font-size:13px}
.page-toc p{font-size:12px;font-weight:700;letter-spacing:1.4px;margin:0 0 12px}
.page-toc ol{list-style:none;margin:0;padding:0;border-top:1px solid #142d2550}
.page-toc li{border-bottom:1px solid #142d2550}
.page-toc a{display:block;padding:10px 0;line-height:1.4}
.page-toc a:hover{text-decoration:underline;text-underline-offset:4px}
.prose{font-size:16px;color:#2a3f34}
.prose>section{padding-bottom:22px;margin-bottom:34px;border-bottom:1px solid #142d2530}
.prose>section:last-child{border-bottom:0;margin-bottom:0}
.prose h2{font-size:clamp(26px,2.6vw,34px);letter-spacing:-1.2px;color:#142d25;margin:0 0 16px}
.prose h3{font-size:17px;color:#142d25;margin:26px 0 6px}
.prose p,.prose li{line-height:1.7}
.prose p{margin:0 0 14px}
.prose ul{padding-left:20px;margin:0 0 14px}
.prose li{margin-bottom:6px}
.prose a:not(.button){text-decoration:underline;text-underline-offset:3px;color:#1f5a4f}
.prose strong{color:#142d25}
.summary-box{background:#d5f783;border:2px solid #142d25;box-shadow:5px 5px 0 #142d25;padding:24px 26px;margin-bottom:44px}
.summary-box h2{font:13px/1.8 Pixel,monospace;letter-spacing:0;margin:0 0 12px}
.summary-box ul{margin:0}
.contact-card{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;background:#e9eddd;border:2px solid #142d25;padding:28px;margin-bottom:22px}
.contact-card p{margin:0}
.contact-email{font:clamp(12px,1.4vw,16px)/1.6 Pixel,monospace;color:#142d25;word-break:break-all}
.faq details{border-top:1px solid #142d2550}
.faq details:last-child{border-bottom:1px solid #142d2550}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font-weight:700;font-size:17px;color:#142d25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:14px Pixel,monospace;flex-shrink:0;line-height:1.7}
.faq details[open] summary::after{content:"–"}
.faq summary:focus-visible{outline:3px solid #2c6860;outline-offset:4px}
.faq details>div{padding:0 0 12px}

/* Sound state */
.is-playing .equalizer i{animation:bounce .5s infinite alternate}
.is-playing .equalizer i:nth-child(2){animation-delay:.2s}
.is-playing .equalizer i:nth-child(3){animation-delay:.4s}
@keyframes bounce{to{height:3px}}
@keyframes marquee{to{transform:translateX(-50%)}}

@media(min-width:1700px){.hero-content{padding-top:95px}}
@media(max-width:1100px){.phones{grid-template-columns:repeat(3,1fr)}.phone:nth-child(n+4){display:none}}
@media(max-width:900px){
.header{height:88px}.hero{min-height:640px;max-height:720px}.hero-content{padding-top:65px}
h1{font-size:32px;letter-spacing:-1.5px}.hero-description{font-size:16px}
.section{padding:60px 6%}.world-grid{gap:35px}.world-description{font-size:16px}
.studio-heading{gap:35px}.studio-heading>p{font-size:16px}.values{gap:20px}.features{row-gap:40px}
.world-copy{padding:35px}.world-more{grid-template-columns:1fr;gap:35px}
.download{gap:40px}.download h2{font-size:48px}
.page-body{grid-template-columns:1fr;gap:40px;padding:50px 6% 70px}.page-toc{position:static}.page-hero{padding:55px 6% 45px}
}
@media(max-width:600px){
.header{height:85px;padding:0 5%}.brand{font-size:20px;gap:7px}.brand-icon{width:39px;height:39px}
.brand-bottom{font-size:10px;letter-spacing:3px;margin-top:8px}.header nav{display:none}
.sound-button{padding:10px;font-size:12px;gap:7px}.sound-state{display:none}
.hero{height:760px;min-height:0;max-height:none}
.hero::before{background:linear-gradient(#b9dbd1f5,#b9dbd1c0 40%,#b9dbd100 64%)}
.hero-content{padding:45px 6% 0}.eyebrow{font-size:12px;letter-spacing:1.1px}
h1{font-size:clamp(18px,5.5vw,32px);line-height:1.7;letter-spacing:-1px;margin:25px 0 18px}
.hero-description{font-size:16px}.hero-actions{gap:18px}
.button{font-size:14px;padding:16px 18px;gap:28px}.hero-note{font-size:12px}
.hero-bottom{font-size:12px;letter-spacing:1px;padding:22px 6%}
.ticker{height:55px}.ticker div{font-size:12px}.ticker span{margin:0 25px}
.section{padding:50px 6%}.section-intro{margin-bottom:30px}
.edition{font-size:12px;max-width:140px;text-align:right;line-height:1.7}
.world-grid{grid-template-columns:1fr;gap:25px;margin-bottom:35px}
h2{font-size:48px;letter-spacing:-2px}.world-grid h2 br:nth-child(2){display:none}
.world-description{font-size:16px}
.values{grid-template-columns:1fr;margin-top:35px;gap:30px}.features{margin-top:0}.values h3{margin-top:15px}.values p{font-size:15px}
.world-card{min-height:600px}.world-card::before{background:linear-gradient(#123f3bee 0%,#123f3bcc 45%,transparent 68%)}.world-copy{padding:25px;max-width:100%}
.world-card h3{font-size:18px}.world-card p{font-size:14px;min-height:0}
.world-tabs button{padding:9px 11px;font-size:11px}.scene-caption{font-size:11px;right:15px;bottom:15px}
.world-more{margin-top:35px}.world-more p{font-size:16px}
.studio-heading{grid-template-columns:1fr;gap:25px}.studio-heading h2{font-size:43px}
.phones{grid-template-columns:repeat(5,72vw);gap:18px;margin-top:35px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 6% 12px;margin-left:-6%;margin-right:-6%;scrollbar-width:none}
.phones::-webkit-scrollbar{display:none}
.phone{scroll-snap-align:center}.phone:nth-child(n+4){display:block}
.download{flex-direction:column;align-items:flex-start;gap:25px}.download h2{font-size:48px}
.app-icon{width:150px}.download-actions{gap:18px}
.footer-top{flex-wrap:wrap;gap:20px}.footer-top p{font-size:16px}.back-top{width:100%;text-align:right}
.footer-bottom{font-size:12px;gap:15px;flex-wrap:wrap}.footer-sound{display:none}
.footer-links{width:100%;gap:22px}
.page-hero p{font-size:16px}.contact-card{padding:20px}.summary-box{padding:20px}.faq summary{font-size:16px}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}