@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--bg:#100e0c;--panel:#181410;--line:#ffffff14;--ink:#eee5d6;--muted:#a4998b;--amber:#efad69;--accent:#efad69}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;background:var(--bg);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px}a{color:inherit;text-decoration:none}button{font:inherit}header{height:96px;padding:0 6%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-family:'Manrope',sans-serif;font-weight:800;font-size:36px;letter-spacing:-3px}.brand span{color:var(--amber);font-size:25px;margin-left:4px;vertical-align:top}nav{display:flex;align-items:center;gap:36px;font-size:14px}nav>a:not(.nav-cta){color:#c2b6a5}.nav-cta{border:1px solid #75604b;padding:13px 20px;border-radius:4px}.nav-cta span{margin-left:20px}.hero{min-height:calc(100svh - 96px);position:relative;display:grid;grid-template-columns:1.05fr 1fr;align-items:center;padding:60px 6% 100px;overflow:hidden;background:radial-gradient(ellipse at 75% 55%,#35201055,transparent 58%)}.eyebrow{font-size:11px;letter-spacing:2px;font-weight:600;color:var(--amber)}.eyebrow i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--amber);margin-right:9px}h1,h2{font-family:'Manrope',sans-serif;font-weight:500;letter-spacing:-3.4px;line-height:1.1;margin:30px 0}h1{font-size:clamp(46px,5.4vw,84px)}em{font-family:Georgia,serif;font-weight:400;color:var(--amber)}p{color:var(--muted);line-height:1.8}.text-link{font-size:14px;display:inline-flex;gap:28px;margin-top:24px;border-bottom:1px solid #67513b;padding-bottom:12px}.hero-art{position:relative;min-height:500px;display:flex;align-items:center;justify-content:center}.hero-fox{width:100%;max-width:570px;position:relative;mix-blend-mode:lighten}.zzz{position:absolute;top:9%;right:27%;font-family:Georgia,serif;font-size:25px;color:var(--amber);transform:rotate(-12deg)}.zzz span{font-size:34px;position:relative;top:-20px}.zzz b{font-size:45px;position:relative;top:-45px;font-weight:400}.specimen{position:absolute;bottom:0;font-size:10px;letter-spacing:3px;color:var(--muted)}.hero-bottom{position:absolute;bottom:26px;left:6%;right:6%;display:flex;justify-content:space-between;color:#8a7e70;letter-spacing:2px;font-size:10px}.intro{padding:130px 8%;border-top:1px solid var(--line)}h2{font-size:clamp(38px,4.8vw,64px)}.intro>p{max-width:500px}.forest{width:100%;border-radius:8px;margin-top:30px}footer{padding:35px 6%;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:12px}a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--amber);outline-offset:5px}@media(max-width:760px){header{height:76px}nav{gap:18px}nav>a:not(.nav-cta){display:none}.hero{grid-template-columns:1fr;padding-top:50px}.hero-art{min-height:320px}.hero-fox{max-width:360px}h1{font-size:52px}.hero-copy{position:relative;z-index:2}.hero-art{margin-top:10px}.intro{padding:80px 6%}footer{gap:20px;flex-wrap:wrap}.desktop{display:none}.hero-bottom{font-size:8px}}
/* The opening is a scroll-controlled scene; the habitat is the working surface. */
header{position:relative;z-index:10;background:var(--bg)}.scroll-story{height:240svh;position:relative}.journey-anchor{position:absolute;top:70svh}.hero{position:sticky;top:0;height:100svh;min-height:620px}.hero-copy{z-index:3}.hero-art{height:100%;min-height:450px}.hero-pet{width:110%;max-width:610px;aspect-ratio:1;position:relative;z-index:2;animation:breathe 4s ease-in-out infinite;transform-origin:50% 80%}.hero-pet img{position:absolute;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 12px 45px #bd641326)}.fox-awake{opacity:var(--wake,0)}.fox-sleep{opacity:calc(1 - var(--wake,0))}.zzz{z-index:3;right:15%;top:13%;opacity:calc(1 - var(--wake,0));animation:dream 3s ease-in-out infinite}.orbit{position:absolute;width:90%;aspect-ratio:1;border:1px solid #c8924a14;border-radius:50%;transform:rotate(-20deg) scaleY(.8)}.orbit-two{width:115%;border-style:dashed;opacity:.6}.specimen{bottom:12px}.floating-elements{position:absolute;top:3%;display:flex;gap:45px;font-size:38px;opacity:var(--discover,0);transform:translateY(calc(20px * (1 - var(--discover,0))));z-index:3}.floating-elements span:nth-child(1){color:#eccc68}.floating-elements span:nth-child(2){color:#70b9d3}.floating-elements span:nth-child(3){color:#f98750}.floating-elements span:nth-child(4){color:#96bc6c}.story-steps{display:flex;gap:25px;margin-top:45px;font-size:12px;color:#675f55}.story-steps span{border-top:1px solid #ffffff21;padding-top:11px;min-width:94px;transition:color .4s}.story-steps small{display:block;font-size:11px;margin-top:5px}.story-steps .active{color:var(--amber);border-color:var(--amber)}.evolution-section,.habitat-section{padding:110px 6%;border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:50px;margin-bottom:38px}.section-heading h2{margin-bottom:0}.section-heading>p{max-width:400px;font-size:15px}.forest-stage{position:relative;border-radius:8px;overflow:hidden;border:1px solid #ffffff12}.forest{margin:0;display:block;border-radius:0}.forest-caption{position:absolute;bottom:0;padding:45px 28px 20px;width:100%;background:linear-gradient(transparent,#0c130ee6);display:flex;justify-content:space-between;font-size:10px;letter-spacing:2px}.forest-caption small{font-size:11px;letter-spacing:.5px;color:#c8c9b7}.evolution-tabs{display:grid;grid-template-columns:repeat(4,1fr);margin-top:20px;border:1px solid var(--line);border-radius:6px;overflow:hidden}button{cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--line);transition:background .2s,border-color .2s,transform .2s}button:hover{background:#ffffff09;border-color:#a5895e80}button:disabled{opacity:.35;cursor:default}.evolution-tabs button{display:flex;align-items:center;gap:15px;padding:23px 20px;text-align:left;border:0;border-right:1px solid var(--line);border-bottom:2px solid transparent}.evolution-tabs button:last-child{border-right:0}.evolution-tabs button[aria-selected=true]{background:#b67b1a0b;border-bottom-color:var(--accent)}.evolution-tabs b{display:block;font-size:16px;margin-top:5px;font-weight:500}.evolution-tabs small{font-size:9px;letter-spacing:1.6px;color:var(--muted)}.element{font-size:37px;width:31px;text-align:center}.electric{color:#e7c767}.water{color:#71afc9}.fire{color:#ee8c55}.leaf{color:#a0bb72}.tab-arrow{margin-left:auto;color:var(--muted)}.evolution-detail{display:grid;grid-template-columns:1fr 1fr;gap:60px;padding:40px 5px;min-height:200px}.evolution-detail h3{font-family:Manrope,sans-serif;font-weight:500;font-size:28px;line-height:1.35;max-width:400px;margin:15px 0 0}.evolution-detail p{margin:0 0 20px;font-size:15px}.food-line{display:flex;align-items:center;gap:18px;font-size:13px}.food-line span{font-size:9px;letter-spacing:1.5px;color:var(--muted)}.food-line b{font-weight:500;color:var(--accent)}.growth-note{display:flex;justify-content:space-between;padding:28px 0 0;border-top:1px solid var(--line);font-size:10px;letter-spacing:1.6px;color:var(--muted)}.growth-note i{font-style:normal;color:var(--amber)}.habitat-section{background:#13110e}.habitat{display:grid;grid-template-columns:170px minmax(250px,1fr) 305px;min-height:590px;border:1px solid #ffffff16;border-radius:9px;overflow:hidden;background:#15120f}.habitat-nav{padding:24px 10px 18px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:8px}.small-heading{font-size:9px;letter-spacing:2px;color:var(--muted);padding:0 12px 14px}.species{padding:13px 10px;display:flex;gap:12px;text-align:left;border:1px solid transparent;border-radius:4px;align-items:center;font-size:13px}.species>span{font-size:26px;width:22px;text-align:center}.species small{display:block;color:var(--muted);font-size:10px;margin-top:4px}.species.active{background:#e0a0520c;border-color:#e0a0522b}.nav-bottom{margin-top:auto;padding:20px 10px 0;font-size:8px;letter-spacing:1px;color:var(--muted)}.nav-bottom i{width:5px;height:5px;background:#8aab69;display:inline-block;border-radius:50%;margin-right:4px}.pet-view{position:relative;min-width:0;display:flex;flex-direction:column;align-items:center;background:radial-gradient(ellipse at 50% 45%,#58301924,transparent 68%);padding:24px 18px}.view-top{width:100%;display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:1.3px;color:var(--muted)}.live-dot{color:#a0b289}.live-dot:before{content:'•';margin-right:5px}.pet-space{width:100%;flex:1;min-height:320px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.pet-halo{position:absolute;width:78%;aspect-ratio:1;border:1px solid #b5854617;border-radius:50%}.pet-halo:after{content:'';position:absolute;inset:13%;border:1px dashed #b5854614;border-radius:50%}#pet-touch{width:95%;max-width:390px;aspect-ratio:1;border:0;background:transparent;transform:scale(var(--zoom,1));transition:transform .3s;position:relative;z-index:1}#pet-touch:hover{background:transparent}#pet-touch img{height:100%;width:100%;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 20px 22px #0008);pointer-events:none}#adult-fox{width:100%;height:100%;background-image:url('assets/evolutions.png');background-repeat:no-repeat;background-size:600% 200%;border-radius:45%;box-shadow:inset 0 0 35px 24px #15120f;image-rendering:pixelated}#adult-fox:not([hidden]){display:block}.pet-message{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:4;background:#262018e8;border:1px solid #d5a36430;padding:10px 14px;border-radius:10px;font-size:12px;white-space:normal;width:max-content;max-width:90%;text-align:center;color:#d4b590}.view-controls{display:flex;align-items:center;gap:14px;border:1px solid #ffffff14;border-radius:25px;padding:4px 12px}.view-controls button{border:0;width:25px;height:25px;font-size:19px}.view-controls span{font-size:11px;color:var(--muted);min-width:32px;text-align:center}.view-controls .control-divider{width:1px;min-width:1px;height:15px;background:var(--line)}.pet-hint{font-size:11px;font-family:Georgia,serif;font-style:italic;margin:14px 0 22px}.interaction-row{display:flex;gap:7px;width:100%;justify-content:center}.interaction-row button{padding:9px 11px;border-radius:4px;font-size:11px;background:#ffffff03}.pet-info{padding:25px 22px;border-left:1px solid var(--line);background:#1c171160}.pet-info .eyebrow{font-size:8px;letter-spacing:1.3px}.pet-info>h3{font-family:Georgia,serif;font-weight:400;font-size:44px;letter-spacing:-2px;margin:14px 0}.tags{display:flex;flex-wrap:wrap;gap:5px}.tags span{font-size:9px;padding:5px 9px;background:#ffffff06;border-radius:20px;color:#b8ae9e}.pet-info>p{font-size:12px;margin:20px 0}.mood-line{display:flex;justify-content:space-between;font-size:11px;padding:15px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);color:var(--muted)}.mood-line b{font-weight:400;color:var(--amber)}.feeding h4{font-weight:500;font-size:16px;margin:22px 0 5px}.feeding>p{font-size:11px;margin:0 0 16px}.food-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.food-grid button{padding:10px 5px;font-size:10px;border-radius:4px;text-align:left}.food-grid span{font-size:16px;margin:0 4px}.affinity-head{margin-top:22px;display:flex;justify-content:space-between;font-size:10px;color:var(--muted)}.affinity-head b{font-weight:400;color:var(--amber)}.affinity-track{height:3px;background:#ffffff0c;margin:9px 0}.affinity-track i{display:block;width:0%;height:100%;background:var(--amber);transition:width .4s}.feeding>.affinity-help{font-size:10px;line-height:1.5;margin:10px 0;color:#9a8a76}.primary-button{width:100%;padding:11px 8px;background:var(--amber);color:#21160f;border:0;border-radius:4px;font-size:12px}.primary-button:hover{background:#f6c186}.reset-link{display:block;border:0;font-size:10px;padding:10px 0;color:var(--muted)}.demo-note{font-size:10px;text-align:center;margin-top:20px;color:#877c6e}.closing{text-align:center;padding:120px 6%;background:radial-gradient(ellipse at 50% 100%,#60371218,transparent 65%)}.closing .nav-cta{display:inline-block;margin-top:20px;font-size:13px}#pet-hearts{position:absolute;top:35%;left:50%;z-index:4;color:#efae78;font-size:30px;pointer-events:none}.affection{animation:love .9s ease-out}.playful{animation:play .65s ease-in-out 2}.pet-resting{animation:breathe 4s ease-in-out infinite}#pet-touch.evolving{animation:evolve 1s ease-out}@keyframes breathe{50%{scale:1.02 1.025}}@keyframes dream{50%{translate:0 -12px;opacity:.7}}@keyframes love{from{translate:0 0;opacity:1}to{translate:20px -75px;opacity:0}}@keyframes play{25%{rotate:-7deg;translate:0 -16px}75%{rotate:7deg;translate:0 -9px}}@keyframes evolve{50%{filter:brightness(2);scale:.92}}
@media(min-width:1600px){.hero,.evolution-section,.habitat-section{padding-left:max(6%,calc((100vw - 1400px)/2));padding-right:max(6%,calc((100vw - 1400px)/2))}}@media(max-width:1050px){.habitat{grid-template-columns:130px minmax(220px,1fr) 265px}.pet-info{padding:22px 16px}.species{padding:12px 4px;font-size:11px}.evolution-tabs button{gap:9px;padding:18px 12px}.evolution-tabs b{font-size:14px}.tab-arrow{display:none}.section-heading{gap:25px}.section-heading>p{max-width:310px}.view-top{font-size:7px}.live-dot{display:none}.interaction-row button{padding:9px 7px;font-size:10px}}@media(max-width:760px){.scroll-story{height:225svh}.hero{height:100svh;min-height:650px;padding:35px 6% 48px;grid-template-rows:auto 1fr;align-content:start}.hero-copy .eyebrow{font-size:8px;letter-spacing:1.5px}h1{font-size:clamp(38px,9vw,53px);letter-spacing:-2px;margin:18px 0 14px}.hero-copy p{font-size:13px;line-height:1.6;margin:0}.text-link{margin-top:15px;font-size:11px}.story-steps{margin-top:18px;gap:15px}.story-steps span{min-width:70px;font-size:10px;padding-top:7px}.story-steps small{font-size:9px}.hero-art{height:100%;min-height:250px;margin-top:0}.hero-pet{width:80%;height:100%;max-height:360px;aspect-ratio:1}.hero-art .orbit{width:65%}.hero-art .orbit-two{width:80%}.zzz{top:9%;right:25%;font-size:17px}.zzz span{font-size:23px;top:-10px}.zzz b{font-size:28px;top:-23px}.specimen{bottom:0;font-size:8px}.floating-elements{top:4%;font-size:25px;gap:25px}.hero-bottom{bottom:14px;font-size:7px}.evolution-section,.habitat-section{padding:70px 5%}.section-heading{display:block;margin-bottom:28px}.section-heading h2{font-size:38px;letter-spacing:-2px}.section-heading>p{font-size:13px;margin-top:23px;max-width:100%}.forest-stage{height:260px}.forest{height:100%;width:100%;object-fit:cover;object-position:76% center}.forest-caption{padding:35px 12px 12px;font-size:7px}.forest-caption small{display:none}.evolution-tabs{grid-template-columns:1fr 1fr}.evolution-tabs button{padding:17px 12px;border-bottom:1px solid var(--line)}.evolution-tabs button[aria-selected=true]{box-shadow:inset 0 -2px var(--accent)}.element{font-size:30px}.evolution-detail{grid-template-columns:1fr;gap:22px;padding:30px 0;min-height:330px}.evolution-detail h3{font-size:25px}.evolution-detail p{font-size:13px}.growth-note{font-size:7px;letter-spacing:.4px;gap:9px}.habitat{grid-template-columns:1fr}.habitat-nav{flex-direction:row;overflow:auto;border-right:0;border-bottom:1px solid var(--line);padding:9px 8px;gap:4px}.small-heading,.nav-bottom{display:none}.species{min-width:max-content;padding:7px 10px;font-size:10px;gap:7px}.species>span{font-size:21px}.species small{font-size:8px}.pet-view{padding:20px 14px}.pet-space{height:330px;min-height:330px;flex:none}#pet-touch{max-width:300px}.pet-info{border-left:0;border-top:1px solid var(--line);padding:26px}.pet-info>h3{font-size:38px}.pet-info>p{font-size:14px}.tags span{font-size:11px}.feeding>p,.mood-line{font-size:12px}.food-grid button{padding:12px;font-size:13px}.affinity-head{font-size:12px}.feeding>.affinity-help{font-size:12px}.reset-link{font-size:12px}.interaction-row button{font-size:12px;padding:11px 16px}.demo-note{font-size:9px}.closing{padding:75px 6%}.closing h2{font-size:36px;letter-spacing:-2px}footer>span{font-size:10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.scroll-story{height:auto}.hero{position:relative}.fox-awake{opacity:1}.fox-sleep,.zzz{display:none}}
/* Transparent evolution sprites: no landscape or circular crop. */
#adult-fox{background:none;border-radius:0;box-shadow:none;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 18px 15px #0005);transform-origin:center}
#adult-fox[hidden],.pose-controls[hidden]{display:none}
#pet-touch{transform:translateX(var(--walk-x,0px)) scale(var(--zoom,1))}
#pet-touch.walking{width:55%;max-width:280px;transition:none}
.pose-controls{display:flex;gap:4px;border:1px solid var(--line);border-radius:6px;padding:4px;margin:6px 0 16px;background:#ffffff02}
.pose-controls button{font-size:14px;padding:9px 17px;border:1px solid transparent;border-radius:3px;color:var(--muted)}
.pose-controls button[aria-pressed=true]{color:var(--amber);border-color:#efad6940;background:#efad690c}
.pet-space{min-height:350px}.pet-message{pointer-events:none}
@keyframes dream{50%{translate:0 -12px}}
@media(max-width:760px){.pose-controls button{padding:9px 19px}.pet-space{min-height:330px}#pet-touch.walking{width:58%;max-width:210px}}