@font-face{font-family:Hand;src:url('/demo-assets/patrick-hand.woff2') format('woff2');font-display:block}
@font-face{font-family:Sketch;src:url('/demo-assets/caveat.woff2') format('woff2');font-weight:400 700;font-display:block}
:root{color-scheme:light;--ink:#213b36;--paper:#f9fcfa;--accent:#28654e}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px}body{margin:0;color:var(--ink);background:var(--paper);font-family:Hand,system-ui,sans-serif;letter-spacing:0}a{color:inherit;text-underline-offset:5px}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible{outline:3px solid #ed926d;outline-offset:6px}svg{width:22px;height:22px;stroke-width:1.7;flex:none}a{touch-action:manipulation}
.skip{position:fixed;top:-100px;left:20px;z-index:30;padding:12px;background:#fff;color:#123}.skip:focus{top:10px}
.world{position:fixed;inset:0;overflow:hidden;pointer-events:none;z-index:-1}.map-image{width:100%;height:100%;object-fit:cover;object-position:center}.map-wash{position:absolute;inset:0;background:rgba(250,253,251,.79)}canvas{position:absolute;inset:0;width:100%;height:100%}
.topbar{position:fixed;z-index:10;left:0;right:0;top:0;display:flex;align-items:center;gap:20px;padding:20px 4%;pointer-events:none}.topbar>*{pointer-events:auto}.brand{font-family:Sketch,Hand,sans-serif;font-size:36px;font-weight:700;text-decoration:none}.preview{font-size:13px;opacity:.7;margin-left:auto}.download-top{display:grid;place-items:center;width:46px;height:46px;border:1px solid currentColor;border-radius:50%;background:#f9fcfad9}
.chapter{position:relative;min-height:104svh;padding:130px 9% 135px;display:flex;align-items:center}.chapter.first{min-height:90svh;padding-top:130px;padding-bottom:140px}.words{max-width:560px;position:relative;z-index:2}.eyebrow{text-transform:uppercase;font-family:system-ui,sans-serif;font-size:11px;font-weight:600;letter-spacing:0;margin:0 0 22px}.words h1{font-size:112px;line-height:1;letter-spacing:0;font-family:Sketch,Hand,sans-serif;margin:0 0 30px}.words h2{font-size:76px;font-family:Sketch,Hand,sans-serif;line-height:1.02;margin:0 0 26px;font-weight:600}.words p{max-width:415px;font-size:22px;line-height:1.5;margin:0 0 24px}.words .eyebrow{font-size:11px}.words .lead{font-size:30px;line-height:1.3;margin-bottom:20px}.words .small-print{font-family:system-ui,sans-serif;font-size:13px;line-height:1.65;max-width:410px;margin-top:26px}
.primary{display:inline-flex;align-items:center;justify-content:center;gap:18px;min-height:52px;padding:10px 22px;background:var(--accent);color:#fff;text-decoration:none;border-radius:5px;font-size:20px;border:1px solid #183e30;box-shadow:3px 4px 0 #163b2926}.text-link{display:inline-flex;align-items:center;gap:10px;font-size:20px}.actions{display:flex;align-items:flex-start;flex-direction:column;gap:24px}.legal{display:flex;flex-wrap:wrap;gap:16px;margin-top:35px;font-family:system-ui,sans-serif;font-size:12px;line-height:1.5}.next-chapter{position:absolute;bottom:52px;left:9%;width:44px;height:44px;display:grid;place-items:center;border:1px solid currentColor;border-radius:50%}.scene-caption{position:absolute;bottom:63px;left:calc(9% + 62px);font-size:14px;max-width:250px}
.map-dock{position:fixed;right:4%;bottom:48px;display:flex;gap:7px;align-items:center;z-index:10}.map-dock a{width:46px;height:46px;display:grid;place-items:center;background:#fbfdf9ed;border:1px solid #496957;border-radius:6px;text-decoration:none;box-shadow:2px 3px 0 #234c3520;color:#244438}.map-dock a:hover,.download-top:hover{background:#dfefe4}.chapter-count{font-size:13px;padding:0 0 0 8px;min-width:50px}.map-credit{position:fixed;bottom:0;right:0;left:0;z-index:12;background:#f9fcf9ed;color:#304139;padding:7px 12px;text-align:right;font-family:system-ui,sans-serif;font-size:10px;line-height:1.5}.map-credit a{text-decoration:none}.map-credit a:hover{text-decoration:underline}
.resident{position:absolute;object-fit:contain;filter:drop-shadow(0 8px 1px #27433218)}.mushroom{width:230px;height:230px;right:12%;top:15%;transform:rotate(8deg)}.letter{width:74px;height:74px;left:68%;top:64%}.soot{width:105px;height:105px;left:74%;top:43%}.visitor{width:175px;height:175px;left:0;top:62%}.hand-note{font-family:Sketch,Hand,sans-serif;font-size:29px;line-height:1.25;transform:rotate(-4deg);border-left:2px solid #d78461;padding-left:18px;margin:32px 0 0 8px;max-width:280px}.walker,.second-walker{position:absolute;width:19px;height:19px;border:3px solid #fff;border-radius:50%;background:#316bca;box-shadow:0 0 0 5px #316bca25;transform:translate(-50%,-50%)}.second-walker{background:#c47753;box-shadow:0 0 0 5px #c4775325}.walker span,.second-walker span{position:absolute;inset:-12px;border:1px solid currentColor;border-radius:50%;opacity:.24}
body[data-demo="yuvam"]{color:#f3f6ef;background:#111916;--accent:#b2e0c5}body[data-demo="yuvam"] .world{background:#111916}body[data-demo="yuvam"] .map-image{filter:brightness(.64)}body[data-demo="yuvam"] .words{text-shadow:0 2px 12px #111916}body[data-demo="yuvam"] .first .words{max-width:none}body[data-demo="yuvam"] .chapter.first{justify-content:center;text-align:center}body[data-demo="yuvam"] .first p{margin-left:auto;margin-right:auto}body[data-demo="yuvam"] .first .next-chapter{left:calc(50% - 22px)}body[data-demo="yuvam"] .primary{color:#163b29;text-shadow:none}body[data-demo="yuvam"] .topbar .download-top{background:#18271feb}body[data-demo="yuvam"] .map-credit{background:#111916ed;color:#c9d7cf}body[data-demo="yuvam"] .walker{background:#afdfc7;box-shadow:0 0 0 5px #afdfc733}body[data-demo="yuvam"] .words h1{font-size:124px}body[data-demo="yuvam"] .last .words{max-width:550px}body[data-demo="yuvam"] .preview{color:#d4e8da}
@media(min-width:1500px){.words{max-width:620px}.chapter{padding-left:13%}.next-chapter{left:13%}.scene-caption{left:calc(13% + 62px)}.mushroom{right:17%}}
@media(max-width:760px){.topbar{padding:14px 6%;gap:12px}.brand{font-size:30px}.preview{font-size:10px}.download-top{width:38px;height:38px}.chapter{padding:115px 7% 150px;min-height:108svh}.chapter.first{min-height:93svh;padding-top:180px;align-items:flex-start}.words{max-width:100%}.words h1,body[data-demo="yuvam"] .words h1{font-size:70px;margin-bottom:23px}.words h2{font-size:56px}.words p{font-size:20px;max-width:320px}.words .lead{font-size:26px}.eyebrow{margin-bottom:18px}.words .small-print{font-size:12px}.mushroom{width:105px;height:105px;top:82px;right:9%;transform:rotate(9deg)}.letter{width:55px;height:55px}.soot{width:70px;height:70px}.visitor{width:100px;height:100px}.resident{opacity:.85}.map-dock{right:5%;bottom:43px;gap:6px}.map-dock a{width:40px;height:40px}.chapter-count{font-size:11px;min-width:43px}.next-chapter{left:7%;bottom:52px}.scene-caption{display:none}.map-credit{font-size:9px;padding:6px 10px;text-align:center}.map-credit>span{display:none}.primary{font-size:18px;gap:12px;padding:10px 18px}.map-wash{background:rgba(250,253,251,.87)}body[data-demo="yuvam"] .chapter.first{align-items:center;padding-top:100px}body[data-demo="yuvam"] .words h1{font-size:67px}body[data-demo="yuvam"] .chapter:not(.first) .words{background:#111916c4;padding:22px 18px;margin-left:-18px;margin-right:-10px;border-radius:0}.legal{gap:12px;font-size:11px}.hand-note{font-size:26px}}
@media(max-width:360px){.words h1,body[data-demo="yuvam"] .words h1{font-size:60px}.words h2{font-size:50px}.preview{max-width:70px}.primary{font-size:17px}.chapter{padding-left:6%;padding-right:6%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.first .words{transform:none!important}}
body[data-demo="yuvam"]:not(.scene-ready) .map-image{visibility:hidden}
body:not(.scene-ready) .walker,body:not(.scene-ready) .second-walker,body:not(.scene-ready) .soot,body:not(.scene-ready) .visitor{visibility:hidden}
.letter{opacity:.3}
i[data-lucide]{display:inline-flex;width:22px;height:22px;flex:none}
.topbar .language-slot{display:block;width:154px;height:42px;pointer-events:none}
.topbar .language-picker{width:154px;height:42px;flex:none}.topbar .language-picker select{width:100%}
.words{width:100%}
body[data-demo="yuvam"] .map-image{filter:brightness(.42)}
.soot{top:54%}.letter{top:70%}
.next-chapter::after{content:'Leave a little something';position:absolute;left:58px;white-space:nowrap;font-size:17px}
body[data-demo="ovayuva"] .scene-caption{display:none}
body[data-demo="yuvam"] .next-chapter::after{content:'Your first street';left:50%;top:52px;transform:translateX(-50%);font-size:15px}
body[data-demo="yuvam"] .first .next-chapter{bottom:100px}
@media(max-width:760px){.mushroom{width:84px;height:84px;top:82px}}
[hidden]{display:none!important}
.topbar{background:#f9fcfa}body[data-demo="yuvam"] .topbar{background:#111916}
.walker span,.second-walker span{border:2px solid #dd79a7;color:#dd79a7;animation:location-pulse 2.4s ease-out infinite;will-change:transform,opacity}
.second-walker span{animation-delay:-1.2s}
@keyframes location-pulse{0%{transform:scale(.55);opacity:.55}85%,100%{transform:scale(1.2);opacity:0}}
.scene-paused .walker span,.scene-paused .second-walker span,.is-offscreen span{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.walker span,.second-walker span{animation:none;opacity:.3;will-change:auto}}
.product-link{font-size:17px;text-decoration:none;white-space:nowrap;margin-left:auto}.product-link+.preview{margin-left:0}
.mushroom{transform:none}.soot{top:65%;left:82%;width:85px;height:85px}.letter{top:70%;left:72%}.visitor{width:96px;height:96px}
.words{isolation:isolate;background:transparent}body[data-demo="ovayuva"] .words{text-shadow:0 1px 3px #f9fcfa,0 -1px 3px #f9fcfa,2px 0 4px #f9fcfa}.words .primary{text-shadow:none}
.join-link{margin:16px 0}.first .join-link{margin-top:0}.last .join-link{display:flex;width:fit-content;margin-bottom:24px}
@media(max-width:760px){.topbar .preview{display:none}.product-link{font-size:16px}.soot{top:66%;left:72%;width:60px;height:60px}.letter{top:70%;left:70%;width:48px;height:48px}.visitor{width:60px;height:60px}body[data-demo="yuvam"] .chapter:not(.first) .words{background:transparent;padding:0;margin:0}.chapter.first{padding-bottom:160px}.first .words .text-link{display:flex;margin-top:16px;font-size:18px}}
.words h2,.words .lead,.hand-note{white-space:pre-line;overflow-wrap:anywhere}.words a{max-width:100%}.primary>span{min-width:0;overflow-wrap:anywhere}
.map-credit>span::after{content:' · '}
.first .join-link{margin-right:18px}
.next-chapter::after,body[data-demo="yuvam"] .next-chapter::after{content:none}
.next-label{position:absolute;left:58px;width:220px;font-size:17px;line-height:1.3;text-align:left}
body[data-demo="yuvam"] .next-label{left:50%;top:52px;transform:translateX(-50%);font-size:15px;text-align:center}
.language-picker{display:inline-flex;align-items:center;gap:8px;font:14px system-ui,sans-serif}.language-picker>span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.language-picker select{font:inherit;color:inherit;background:var(--paper);border:1px solid #728578;border-radius:4px;padding:9px 6px;max-width:180px;min-height:42px}
body[data-demo="yuvam"] .language-picker select{background:#17261e;color:#f3f6ef}.language-picker select:focus-visible{outline:3px solid #d88963;outline-offset:3px}
@media(max-width:760px){.topbar{display:grid;grid-template-columns:1fr auto;gap:4px 12px}.topbar .language-picker{grid-column:2;grid-row:1}.topbar .product-link{grid-column:1 / -1;grid-row:2;margin-left:0;font-size:14px}.topbar .brand{grid-column:1;grid-row:1}.mushroom{top:113px}.language-picker select{max-width:154px}.next-label{max-width:200px}.words .eyebrow{overflow-wrap:anywhere}}
