@font-face{font-family:Barlow;src:url('assets/barlow-heavy.ttf') format('truetype');font-weight:900;font-display:swap}@font-face{font-family:Manrope;src:url('assets/manrope-regular.ttf') format('truetype');font-weight:400;font-display:swap}@font-face{font-family:Manrope;src:url('assets/manrope-bold.ttf') format('truetype');font-weight:700;font-display:swap}:root{--ink:#24251f;--paper:#f6f4e9;--orange:#ee865e;--green:#d7e7b6;--blue:#c6d6df;--ease:cubic-bezier(.16,1,.3,1)}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:90px;scrollbar-color:var(--ink) var(--paper)}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased}::selection{color:var(--paper);background:var(--ink)}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}button{border:0}button:focus-visible,a:focus-visible{outline:3px solid currentColor;outline-offset:6px}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Barlow,sans-serif;font-weight:900;line-height:.92;letter-spacing:-.025em}p{line-height:1.65}img,video{display:block;max-width:100%}.skip{position:fixed;left:20px;top:-100px;background:var(--paper);padding:14px;z-index:100}.skip:focus{top:20px}.loader{display:none}.js .loader{display:flex;position:fixed;z-index:99;inset:0;align-items:center;justify-content:center;flex-direction:column;background:var(--orange);gap:18px;transition:opacity .4s,visibility .4s}.loader-word{font:900 clamp(80px,15vw,200px)/.8 Barlow;letter-spacing:-.04em}.loader-word span{color:var(--paper)}.loader>span:nth-child(2){font-size:14px}.loader-line{height:3px;width:100px;background:var(--ink);transform-origin:left;animation:loader 1s ease-in-out infinite alternate}.js:not(.is-loading) .loader{opacity:0;visibility:hidden;pointer-events:none}.is-loading body{overflow:hidden}@keyframes loader{from{transform:scaleX(.2)}to{transform:scaleX(1)}}.header{position:absolute;z-index:20;top:25px;left:3.5%;right:3.5%;display:flex;align-items:center;justify-content:space-between;height:58px;gap:20px}.brand{font-size:32px;font-weight:700;letter-spacing:-.06em;display:flex;align-items:center}.brand-dot{font-family:Barlow;font-size:48px;line-height:.6;transform:translateY(7px);margin-left:3px}.nav-cta{display:flex;align-items:center;gap:16px;padding:15px 20px;border-radius:40px;background:var(--ink);color:var(--paper);font-size:13px;font-weight:700;transition:background .2s,transform .2s}.nav-cta:hover{background:#414337;transform:translateY(-2px)}.nav-cta svg{height:18px;width:18px}.hero{position:relative;min-height:760px;height:100svh;max-height:1300px;background:#e98663;overflow:hidden}.hero-art{position:absolute;inset:0;transform:scale(1);transform-origin:60% 70%;will-change:transform}.hero-art img,.hero-art video{width:100%;height:100%;object-fit:cover;object-position:center center}.hero-art video{position:absolute;inset:0;opacity:0;transition:opacity .5s}.hero-art video.is-ready{opacity:1}.hero-content{position:relative;padding:clamp(145px,19vh,250px) 0 0 5%;width:65%;z-index:2;pointer-events:none}.hero-content a{pointer-events:auto}.hero-ca-chip{pointer-events:auto;margin-bottom:22px;background:var(--ink);color:var(--paper)}h1{font-size:clamp(150px,20.4vw,360px);line-height:.74;position:relative;letter-spacing:-.035em;white-space:nowrap}.title-star{font-size:.38em;display:inline-block;vertical-align:top;transform:translate(6px,-.1em);color:var(--paper)}.intro{padding:105px 6% 90px;position:relative;border-bottom:1px solid #24251f24}.intro-copy{display:flex;align-items:flex-end;justify-content:space-between;gap:8%}.intro h2{font-size:clamp(38px,5.4vw,88px);max-width:850px}.intro h2 span{color:#617b50}.intro p{width:310px;flex-shrink:0;font-size:14px}.text-link{display:inline-flex;gap:30px;align-items:center;font-size:13px;font-weight:700;padding:12px 0;background:none;border-bottom:1px solid currentColor}.intro>.text-link{margin-top:36px}.text-link span{font-size:24px}.text-link:hover svg,.text-link:hover>span{transform:translate(3px,2px)}.story{position:relative;isolation:isolate}.scene{display:flex;position:relative;min-height:800px;overflow:hidden;align-items:center}.scene-cafe{background:var(--green)}.scene-train{background:var(--blue)}.scene-laptop{background:#303236;color:var(--paper)}.scene-skate{background:#f2ab75}.scene-copy{position:relative;z-index:3;width:44%;padding:60px 3% 70px 6%;pointer-events:auto}.scene-copy h2{font-size:clamp(58px,6.1vw,104px);max-width:650px;line-height:.94}.scene-copy h2 span{color:#587146}.scene-train h2 span{color:#527283}.scene-laptop h2 span{color:#ed956d}.scene-skate h2 span{color:#8b4531}.scene-copy>p{margin-top:26px;font-size:14px;line-height:1.75;max-width:340px}.scene-copy .interaction-note{font-size:11px;margin-top:20px;line-height:1.5;min-height:1.5em}.action{margin-top:30px;padding:18px 21px;background:var(--ink);color:var(--paper);border-radius:50px;display:inline-flex;align-items:center;gap:24px;font-size:12px;font-weight:700;min-height:56px;transition:transform .25s var(--ease),background .25s}.action:hover{transform:translateY(-3px);background:#414739}.action svg{height:19px;width:19px}.scene-laptop .action{background:var(--paper);color:var(--ink)}.scene-laptop .action:hover{background:#d7e7b6}.scene-media{position:relative;align-self:stretch;width:56%;overflow:hidden;clip-path:polygon(5% 0,100% 0,100% 100%,0 100%)}.scene-media>img,.scene-media>video{height:100%;width:100%;object-fit:cover;object-position:center;position:absolute;inset:0}.scene-media>video{opacity:0;transition:opacity .3s}.scene-media>video.is-ready{opacity:1}.matcha-stamp{position:absolute;z-index:4;right:8%;top:15%;font:900 clamp(28px,4vw,64px)/.9 Barlow;text-align:center;background:var(--green);padding:28px;border:3px solid var(--ink);border-radius:50%;transform:rotate(12deg) scale(0);transition:transform .6s var(--ease);color:var(--ink)}.matcha-stamp span{display:block;font-family:Manrope;font-size:40px;line-height:1.2}.matcha-secured .matcha-stamp{transform:rotate(12deg) scale(1)}.offline-stamp{position:absolute;z-index:4;top:42%;left:20%;font:900 clamp(55px,8vw,130px)/.8 Barlow;background:var(--green);color:var(--ink);padding:30px 36px;transform:rotate(-8deg) scale(0);transition:transform .5s var(--ease)}.logging-off .offline-stamp{transform:rotate(-8deg) scale(1)}.track{display:flex;align-items:center;gap:12px;font-size:11px;margin-top:24px;max-width:320px;min-height:30px}.equalizer{display:flex;align-items:center;gap:3px;height:22px;flex-shrink:0}.equalizer i{height:17px;width:3px;display:block;background:var(--ink);transform:scaleY(.35)}.equalizer i:nth-child(2){transform:scaleY(.8)}.equalizer i:nth-child(3){transform:scaleY(1)}.beat-on .equalizer i{animation:equalizer .65s ease-in-out infinite alternate}.beat-on .equalizer i:nth-child(2){animation-delay:-.2s}.beat-on .equalizer i:nth-child(3){animation-delay:-.4s}.beat-on .equalizer i:nth-child(4){animation-delay:-.1s}@keyframes equalizer{to{transform:scaleY(1.1)}}.snack-particles{position:absolute;inset:0;pointer-events:none;overflow:hidden}.chip{position:absolute;left:50%;top:53%;width:20px;height:28px;background:#f4ce64;border:2px solid #9e6930;border-radius:45%;transform:rotate(25deg);animation:chip 1s var(--ease) forwards}@keyframes chip{to{transform:translate(var(--x),var(--y)) rotate(var(--rotate));opacity:0}}.story-progress{display:none}.js .story{height:480svh}.js .story-stage{position:sticky;top:0;height:100svh;min-height:620px;overflow:hidden}.js .scene{position:absolute;inset:0;min-height:0;height:100%;clip-path:inset(100% 0 0);transition:clip-path .75s var(--ease);pointer-events:none;z-index:1}.js .scene.active{clip-path:inset(0);z-index:3;pointer-events:auto}.js .scene.previous{clip-path:inset(0);z-index:2}.js .scene-copy{transform:translateY(25px);opacity:0;transition:transform .65s .12s var(--ease),opacity .4s .12s}.js .scene.active .scene-copy{transform:none;opacity:1}.js .story-progress{display:block;position:absolute;left:0;bottom:0;right:0;height:3px;background:#24251f1a;z-index:8}.story-progress>span{display:block;height:100%;background:var(--ink);transform:scaleX(0);transform-origin:left;will-change:transform}.mood{padding:105px 8% 110px;background:var(--paper);position:relative;overflow:hidden}.mood-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px}.mood h2{font-size:clamp(65px,9vw,140px)}.mood h2 span{color:#7c8c65}.mood-heading p{font-size:14px;margin-bottom:5px}.mood-picker{display:flex;gap:10px;flex-wrap:wrap;margin:40px 0 48px}.mood-picker button{padding:13px 21px;border-radius:50px;background:transparent;border:1px solid #24251f55;font-size:13px;font-weight:700;transition:background .2s,color .2s,transform .2s}.mood-picker button[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.mood-picker button:hover{transform:translateY(-2px)}.mood-result{display:flex;gap:8%;align-items:center;max-width:1100px}.mood-portrait{width:42%;aspect-ratio:1;border-radius:45% 45% 8% 8%;overflow:hidden;transform:rotate(-3deg);background:var(--green)}.mood-portrait img{width:100%;height:100%;object-fit:cover;transition:opacity .2s}.mood-response{width:45%;padding-bottom:20px}.mood-response h3{font-size:clamp(48px,6vw,95px)}.mood-response p{font-size:14px;max-width:310px;margin-top:22px}.footer{background:var(--green);padding:45px 4% 22px;overflow:hidden}.footer-top{display:flex;justify-content:space-between;gap:30px;align-items:center}.footer-top p{font-size:clamp(15px,1.6vw,22px);font-weight:700;letter-spacing:-.025em}.footer-word{font:900 clamp(100px,25.5vw,460px)/.9 Barlow;letter-spacing:-.035em;display:block;white-space:nowrap;margin:46px 0 35px}.footer-word>span{font-size:.65em;display:inline-block;vertical-align:top;line-height:.75;transform:translateY(.03em);color:#688653}.footer-word{margin-top:28px}.action:disabled{cursor:default;background:#43513a;color:var(--paper);transform:none}.ca-chip{display:flex;align-items:center;gap:10px;padding:11px 18px;border-radius:50px;background:var(--ink);color:var(--paper);transition:background .2s,transform .2s;max-width:100%;min-width:0}.ca-chip:hover{background:#414337;transform:translateY(-2px)}.ca-chip-label{font-size:11px;font-weight:700;letter-spacing:.04em;flex-shrink:0;opacity:.75}.ca-chip-value{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.js .story-stage{min-height:0}
@media(min-width:1900px){.scene-copy{padding-left:8%}.hero-content{padding-left:8%}.intro,.mood{padding-left:10%;padding-right:10%}}
@media(max-width:1100px){.hero{min-height:700px}.hero-art img,.hero-art video{object-position:58% center}.hero-content{padding-top:175px}.intro-copy{display:block}.intro p{margin-top:30px;width:auto;max-width:470px}.scene-copy{padding-left:5%;width:43%}.scene-media{width:57%}.scene-copy h2{font-size:6.5vw}.scene-copy>p{font-size:12px}.action{padding:16px;gap:15px;font-size:11px}.mood-heading p{max-width:250px}.mood-result{gap:10%}.mood-response{width:48%}}
@media(max-width:700px){html{scroll-padding-top:20px}.header{top:18px;left:5%;right:5%;height:42px;gap:10px}.brand{font-size:26px}.brand-dot{font-size:37px;transform:translateY(6px)}.nav-cta{font-size:0;padding:12px;gap:0}.nav-cta svg{width:17px;height:17px}.hero{min-height:740px;height:100svh;max-height:1000px}.hero-art{inset:260px -13% 0 -58%;transform:none}.hero-art img,.hero-art video{object-position:64% center}.hero:before{content:'';position:absolute;inset:0 0 auto;height:330px;background:#ee8763}.hero-content{padding:115px 6% 0;width:100%}h1{font-size:29vw;line-height:.76}.title-star{font-size:.32em;transform:translate(4px,-.15em)}.intro{padding:65px 7% 60px}.intro h2{font-size:clamp(37px,8.8vw,60px);line-height:.98}.intro p{font-size:13px;max-width:340px;margin-top:24px}.intro>.text-link{margin-top:22px}.js .story{height:520svh}.js .story-stage{min-height:640px;height:100svh}.scene{flex-direction:column;min-height:920px;align-items:stretch}.scene-copy{width:100%;padding:38px 7% 18px;flex-shrink:0}.scene-copy h2{font-size:clamp(48px,11.5vw,76px);line-height:.9}.scene-copy>p{margin-top:14px;font-size:11px;line-height:1.6}.scene-copy>p br{display:none}.scene-copy>p:not(.interaction-note){max-width:270px}.action{margin-top:18px;padding:13px 17px;min-height:45px;font-size:10px;gap:24px}.action svg{height:16px;width:16px}.scene-copy .interaction-note{font-size:9px;margin-top:10px}.scene-media{width:100%;min-height:450px;flex:1;clip-path:polygon(0 4%,100% 0,100% 100%,0 100%);margin-top:-3px}.scene-media>img,.scene-media>video{object-position:50% 35%}.js .scene-media{min-height:0}.js .scene-copy{padding-top:32px;padding-bottom:20px}.scene-train .scene-copy h2{font-size:10.5vw}.scene-laptop .scene-copy h2{font-size:11vw}.track{font-size:9px;margin-top:12px;min-height:22px}.matcha-stamp{font-size:26px;padding:20px;top:10%;right:6%;border-width:2px}.matcha-stamp span{font-size:25px}.offline-stamp{top:37%;left:24%;font-size:60px;padding:20px}.mood{padding:65px 7% 70px}.mood-heading{display:block}.mood h2{font-size:18vw}.mood-heading p{font-size:12px;margin-top:24px;max-width:none}.mood-picker{gap:7px;margin:27px 0 32px}.mood-picker button{font-size:10px;padding:11px 14px}.mood-result{gap:7%;align-items:flex-start}.mood-portrait{width:45%;margin-top:5px}.mood-response{width:48%;padding:0}.mood-response h3{font-size:9.5vw;line-height:.95}.mood-response p{font-size:10px;margin-top:14px}.footer{padding:27px 6% 20px}.footer-top{align-items:flex-start;gap:20px}.footer-top p{font-size:13px;max-width:175px}.ca-chip{padding:9px 14px;max-width:46%}.ca-chip-value{font-size:10px}.footer-word{font-size:24.5vw;margin:40px 0 25px}}
@media(max-width:700px){.hero-art{inset:auto;left:-104%;bottom:0;width:220%;height:auto;aspect-ratio:16/9}.hero-art img,.hero-art video{object-position:center}.hero{background:#e58165}.hero:before{background:#e58165}.action,.mood-picker button{font-size:11px}.scene-copy .interaction-note,.track{font-size:11px}.scene-copy>p,.mood-response p{font-size:12px}.footer-word{margin-top:28px}}
@media(max-width:700px){.js .story-stage{min-height:0}.hero-art:after{content:'';position:absolute;inset:0 0 auto;height:80px;background:linear-gradient(#e58165,transparent);pointer-events:none}.mood-picker button{font-size:11px}}
@media(max-width:370px){.header{gap:8px}.brand{font-size:23px}.brand-dot{font-size:32px}.mood-picker button{padding:10px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.hero-art{will-change:auto}.js .scene-copy{transform:none}.js .story{height:auto}.js .story-stage{position:relative;height:auto;min-height:0}.js .scene{position:relative;clip-path:none;height:auto;min-height:800px;pointer-events:auto}.js .scene-copy{opacity:1}.js .story-progress{display:none}.scene-media>video,.hero-video{display:none!important}.js .scene-media{min-height:450px}@media(max-width:700px){.js .scene{min-height:850px}}}




.main-nav{display:flex;gap:4px;padding:5px;background:var(--ink);color:var(--paper);border-radius:50px}.main-nav a{font-family:Barlow,sans-serif;font-size:18px;font-weight:900;line-height:1;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;padding:11px 20px;border-radius:30px;transition:background .2s,color .2s}.main-nav a:hover{background:rgba(246,244,233,.12);color:var(--paper)}
@media(max-width:700px){.main-nav{gap:0;padding:4px}.main-nav a{font-size:16px;line-height:1.1;padding:11px 12px}}
@media(max-width:370px){.main-nav a{font-size:14px;padding:11px 6px;letter-spacing:.02em}}

.footer-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;margin:32px 0 0;background:#ef956e;overflow:hidden;border-radius:10px}
.footer-scene>p{min-width:0;padding:clamp(24px,4vw,70px);font:900 clamp(54px,8.5vw,160px)/.88 Barlow;letter-spacing:-.025em}
.footer-art{position:relative;aspect-ratio:1;min-width:0;overflow:hidden}
.footer-art img,.footer-art video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:center}
.footer-art video{opacity:0;transition:opacity .3s}
.footer-art video.is-ready{opacity:1}
@media(max-width:700px){.footer-scene{grid-template-columns:minmax(0,1fr);margin-top:26px;border-radius:6px}.footer-scene>p{padding:26px 24px;font-size:clamp(42px,12vw,76px);line-height:.9}}