@font-face{font-family:Jakarta;src:url('/fonts/plus-jakarta-600.ttf')} 
:root{--background:145 12% 7%;--foreground:70 25% 96%;--muted:140 6% 65%;--accent:75 85% 65%;--line:140 8% 24%;--surface:140 10% 12%;--shadow:140 20% 3%;--metal:0 0% 65%;--rubber:0 0% 8%;--light:0 0% 100%;--ambient:140 19% 17%}
:root[data-scene=audio]{--background:0 0% 94%;--foreground:0 0% 8%;--muted:0 0% 42%;--accent:16 91% 58%;--line:0 0% 77%;--surface:0 0% 87%;--shadow:0 0% 35%}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:hsl(var(--background));color:hsl(var(--foreground));font-family:Jakarta,Arial,sans-serif}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible{outline:2px solid hsl(var(--accent));outline-offset:6px}
.stage{position:relative;height:100svh;min-height:540px;overflow:hidden}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}.nav{position:absolute;inset:24px 32px auto;z-index:2;display:flex;align-items:center;justify-content:space-between}.brand{font-size:24px;font-weight:600}.edition{font:11px Arial,sans-serif;text-transform:uppercase;letter-spacing:0}.headline{position:absolute;left:32px;top:20%;z-index:1;pointer-events:none}.headline p{font:11px Arial,sans-serif;margin:0 0 14px;text-transform:uppercase}.headline h1{font-size:64px;line-height:1.03;margin:0;font-weight:600;letter-spacing:0;max-width:420px}.headline h1 span{display:block;color:hsl(var(--accent))}.bottom{position:absolute;inset:auto 32px 26px;display:flex;justify-content:space-between;align-items:end;gap:20px;z-index:2}.bottom p{font:12px/1.5 Arial,sans-serif;max-width:170px;margin:0}.swatches{display:flex;gap:12px}.swatch{width:26px;height:26px;border-radius:50%;background:hsl(var(--swatch));border:2px solid hsl(var(--background));outline:1px solid hsl(var(--line));transition:transform .2s}.swatch[aria-pressed=true]{outline:2px solid hsl(var(--foreground));transform:scale(1.12)}.swatch[data-tone=lime]{--swatch:75 85% 65%}.swatch[data-tone=coral]{--swatch:16 91% 58%}.swatch[data-tone=blue]{--swatch:210 85% 62%}.explore{display:flex;align-items:center;gap:16px;border-bottom:1px solid hsl(var(--line));padding-bottom:8px;font-size:12px}.explore span{font-size:23px}.detail{padding:80px 32px;min-height:75svh;border-top:1px solid hsl(var(--line))}.detail small{font:11px Arial,sans-serif;text-transform:uppercase}.detail h2{font-size:48px;line-height:1.08;font-weight:600;max-width:700px;margin:24px 0}.detail p{font:16px/1.7 Arial,sans-serif;color:hsl(var(--muted));max-width:480px}.finish{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:50px}.finish div{border-top:1px solid hsl(var(--line));padding-top:16px}.finish strong{display:block;font-size:24px}.finish span{font:12px Arial,sans-serif;color:hsl(var(--muted))}.sound-line{width:100%;height:70px;display:flex;align-items:center;gap:5px;margin:30px 0}.sound-line i{display:block;width:5px;height:var(--height);background:hsl(var(--accent));animation:sound 1.4s ease-in-out infinite alternate;animation-delay:var(--delay)}@keyframes sound{to{transform:scaleY(.25)}}.fallback{position:absolute;top:48%;left:60%;font-size:20px;color:hsl(var(--accent));max-width:200px}
@media(min-width:1000px){.headline h1{font-size:80px;max-width:500px}.headline{top:24%;left:6%}.nav{left:6%;right:6%}.bottom{left:6%;right:6%}.detail{padding:100px 6%}}
@media(max-width:540px){.stage{min-height:480px}.nav{inset:20px 20px auto}.headline{top:16%;left:20px}.headline h1{font-size:44px;max-width:290px}.bottom{inset:auto 20px 20px;gap:12px}.bottom p{display:none}.detail{padding:60px 20px}.detail h2{font-size:36px}.finish{gap:12px}.finish strong{font-size:19px}}
.headline,.nav,.bottom{animation:arrival 1.4s cubic-bezier(.22,1,.36,1) both}.headline{animation-delay:.12s}.bottom{animation-delay:.28s}.headline h1 span{transition:color .65s cubic-bezier(.22,1,.36,1)}.swatch{transition:transform .4s cubic-bezier(.22,1,.36,1),outline-color .4s}.swatch:hover{transform:scale(1.2)}.explore span{animation:explore-drift 2.8s cubic-bezier(.22,1,.36,1) infinite}.sound-line i{animation-duration:2.2s;animation-timing-function:cubic-bezier(.45,0,.55,1);border-radius:3px;transition:background .65s}.detail{overflow:hidden}@keyframes arrival{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes explore-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}:root[data-scene=pour]{--background:80 14% 7%;--foreground:60 20% 95%;--muted:70 8% 66%;--accent:72 82% 66%;--line:70 10% 22%;--surface:78 22% 12%;--ambient:78 30% 22%;--can:60 12% 86%;--can-dark:70 8% 42%;--label:72 70% 62%;--label-ink:90 25% 10%}
.pour{height:300svh;position:relative}.pour-stage{position:sticky;top:0;height:100svh;min-height:540px;overflow:hidden;padding:28px 6%;background:radial-gradient(ellipse at 72% 58%,hsl(var(--ambient)) 0%,hsl(var(--surface)) 38%,hsl(var(--background)) 72%)}
.pour-top{display:flex;justify-content:space-between;font:11px Arial,sans-serif;text-transform:uppercase;color:hsl(var(--muted));border-bottom:1px solid hsl(var(--line));padding-bottom:18px}
.pour-copy{position:absolute;left:6%;top:27%;width:42%;z-index:3}.pour-copy small{color:hsl(var(--accent));font:700 12px Arial,sans-serif;text-transform:uppercase}.pour-copy h1{font-size:clamp(40px,5.6vw,84px);line-height:1;margin:18px 0 0;font-weight:600}.pour-copy p{color:hsl(var(--muted));max-width:360px;margin-top:22px;font-size:15px;line-height:1.5}
.pour-scene{position:absolute;right:9%;top:20%;width:420px;height:480px}.can{position:absolute;left:90px;top:40px;width:220px;height:270px;transform-origin:60% 85%;will-change:transform}
.can-body{position:absolute;inset:20px 0 0;border-radius:6% 6% 20% 20%/3% 3% 8% 8%;background:linear-gradient(90deg,hsl(var(--can-dark)),hsl(var(--can)) 18%,hsl(var(--can)) 60%,hsl(var(--can-dark)));box-shadow:inset -12px 0 28px hsl(var(--shadow)/.4),16px 30px 40px hsl(var(--shadow)/.55)}
.can-label{position:absolute;inset:34px 0 20px;background:linear-gradient(90deg,hsl(var(--label)/.75),hsl(var(--label)) 35%,hsl(var(--label)/.85));color:hsl(var(--label-ink));padding:22px 24px}.can-label b{display:block;font-size:58px;line-height:.85}.can-label i{display:block;font:9px Arial,sans-serif;margin-top:10px;font-style:normal;letter-spacing:.2em}.can-label em{display:block;font-style:normal;font-weight:700;font-size:22px;line-height:1.05;margin-top:22px;border-top:1px solid hsl(var(--label-ink)/.3);padding-top:14px}
.can-rim{position:absolute;left:0;right:0;top:0;height:40px;border-radius:50%;background:radial-gradient(ellipse,hsl(var(--accent)) 52%,hsl(var(--can)) 56%,hsl(var(--can-dark)) 70%)}.lid{position:absolute;left:-4px;right:-4px;top:-6px;height:42px;border-radius:50%;background:radial-gradient(ellipse at 40% 35%,hsl(var(--can)),hsl(var(--can-dark)));box-shadow:0 6px 0 hsl(var(--can-dark));will-change:transform,opacity}
.stream{position:absolute;left:70px;top:235px;width:26px;height:205px;border-radius:13px;background:linear-gradient(90deg,hsl(var(--label)/.8),hsl(var(--accent)),hsl(var(--label)/.8));transform-origin:top;transform:scaleY(0)}
.pool{position:absolute;left:0;top:405px;width:420px;height:84px;border-radius:50%;background:radial-gradient(ellipse at 45% 45%,hsl(var(--accent)),hsl(var(--label)/.85) 60%,hsl(var(--label)/.4));transform:scale(0);box-shadow:0 12px 30px hsl(var(--shadow)/.6)}
.drop{position:absolute;width:16px;height:22px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:hsl(var(--accent));opacity:0}.drop.a{left:150px;top:300px}.drop.b{left:180px;top:320px}
.pour-foot{position:absolute;left:6%;right:6%;bottom:30px;display:flex;align-items:center;gap:22px;font:12px Arial,sans-serif;color:hsl(var(--muted))}.pour-bar{flex:1;height:2px;background:hsl(var(--line))}.pour-bar span{display:block;height:100%;background:hsl(var(--accent));transform:scaleX(0);transform-origin:left}
.pour-after{padding:120px 6%;background:hsl(var(--background))}.pour-after h2{font-size:clamp(32px,4vw,56px);margin:0;max-width:640px}.swatches{display:flex;gap:12px;margin-top:32px}.swatches button{width:44px;height:44px;border-radius:50%;border:2px solid hsl(var(--line))}
@media(max-width:760px){.pour-copy{top:16%;width:88%}.pour-copy h1{font-size:40px}.pour-scene{right:50%;top:auto;bottom:70px;transform:translateX(50%) scale(.62);transform-origin:bottom center}}
:root[data-scene=story]{--background:230 22% 6%;--foreground:220 20% 96%;--muted:225 10% 64%;--accent:221 85% 62%;--line:228 14% 20%;--surface:228 20% 11%;--ambient:221 45% 22%;--device:228 10% 18%;--bezel:228 8% 30%}
.st-copy{position:absolute;left:6%;top:26%;width:36%;z-index:4}.st-copy small{color:hsl(var(--accent));font:700 12px Arial,sans-serif;text-transform:uppercase}.st-copy h1{font-size:clamp(38px,5vw,76px);line-height:1;margin:18px 0 0;font-weight:600}.st-copy p{color:hsl(var(--muted));max-width:340px;margin-top:20px;font-size:15px;line-height:1.5}
.st-scene{position:absolute;right:4%;top:15%;width:58%;height:70%;perspective:1400px}.st-laptop,.st-phone,.st-chip{position:absolute;will-change:transform;transform-style:preserve-3d}
.st-laptop{left:6%;top:8%;width:84%;aspect-ratio:1200/850;border-radius:14px;padding:10px;background:hsl(var(--device));box-shadow:0 0 0 1px hsl(var(--bezel)),0 40px 80px hsl(var(--shadow,230 30% 2%)/.7)}
.st-phone{right:2%;top:24%;width:22%;aspect-ratio:585/1266;border-radius:26px;padding:7px;background:hsl(var(--device));box-shadow:0 0 0 1px hsl(var(--bezel)),0 30px 60px hsl(230 30% 2%/.7)}
.st-screen{width:100%;height:100%;overflow:hidden;border-radius:6px;background:hsl(var(--surface))}.st-phone .st-screen{border-radius:20px}.st-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;transform-origin:30% 0;will-change:transform}
.st-chip{padding:12px 16px;border-radius:12px;background:hsl(var(--surface)/.9);border:1px solid hsl(var(--accent)/.5);font:600 13px Arial,sans-serif;white-space:nowrap;box-shadow:0 16px 40px hsl(230 30% 2%/.6);backdrop-filter:blur(8px)}.st-chip i{display:inline-block;width:8px;height:8px;border-radius:50%;background:hsl(var(--accent));margin-right:8px}
.st-glow{position:absolute;inset:20% 10%;border-radius:50%;background:hsl(var(--accent)/.35);filter:blur(80px);will-change:transform,opacity}
@media(max-width:760px){.st-copy{top:14%;width:88%}.st-scene{left:4%;right:4%;width:auto;top:auto;bottom:70px;height:48%}}
.play{display:flex;align-items:center;gap:10px;padding:10px 18px 10px 12px;border-radius:999px;border:1px solid hsl(var(--line));background:hsl(var(--background)/.7);color:hsl(var(--foreground));backdrop-filter:blur(8px);transition:transform .3s cubic-bezier(.22,1,.36,1),background .3s}.play:hover{transform:scale(1.05)}.play[aria-pressed=true]{background:hsl(var(--accent));color:hsl(var(--background))}
.eq{display:flex;align-items:end;gap:2px;height:14px}.eq i{width:3px;height:4px;border-radius:2px;background:currentColor;transition:height .3s}.playing .eq i{animation:eq .6s ease-in-out infinite alternate}.playing .eq i:nth-child(2){animation-delay:-.2s}.playing .eq i:nth-child(3){animation-delay:-.4s}.playing .eq i:nth-child(4){animation-delay:-.1s}@keyframes eq{from{height:3px}to{height:14px}}
.headline .hint{margin-top:18px;color:hsl(var(--muted));text-transform:none}
.playing .sound-line i{animation-duration:.5s}
/* Story responsiveness: chips stay inside the frame; phone leads on narrow screens and mobile-app examples. */
.pf .st-laptop{left:0;top:14%;width:74%}.pf .st-phone{left:auto;right:12%;top:4%;width:auto;height:94%}
@media(max-width:760px){.st-chip{padding:8px 11px;font-size:11px;border-radius:10px}#c1{left:2%!important;top:2%!important}#c2{right:2%!important;top:auto!important;bottom:30%}#c3{left:6%!important;bottom:8%!important}.pour-stage{padding:22px 5%}.st-copy h1{font-size:34px}.st-copy p{font-size:14px;margin-top:12px}.st-scene{height:52%;bottom:64px}}
/* Tint pour scene: geometry tuned to a sticky 400x440 stage, colours from tokens. */
.h-scene{position:absolute;width:400px;height:440px;right:13%;top:21%;isolation:isolate}
.h-can{position:absolute;left:80px;top:55px;width:235px;height:280px;transform:rotate(-10deg);will-change:transform}
.h-body{position:absolute;inset:22px 0 0;background:linear-gradient(90deg,hsl(var(--can-dark)) 0%,hsl(var(--can)) 17%,hsl(var(--can)/.85) 65%,hsl(var(--can-dark)));border-radius:5% 5% 22% 22%/2% 2% 8% 8%;box-shadow:inset -10px 0 30px hsl(0 0% 0%/.25),12px 28px 35px hsl(0 0% 0%/.3)}
.h-label{position:absolute;inset:35px 0 19px;background:linear-gradient(90deg,hsl(var(--label)/.8),hsl(var(--label)) 32%,hsl(var(--label)/.92) 75%,hsl(var(--label)/.7));padding:20px 27px;color:hsl(var(--label-ink));overflow:hidden}
.h-label strong{font-size:66px;line-height:.8;font-weight:900;display:block}.h-label>span{display:block;font-size:9px;margin-top:10px;letter-spacing:.2em}.h-line{height:1px;background:hsl(var(--label-ink)/.3);margin:14px 0}.h-label b{font-size:23px;line-height:1.05;display:block}.h-label small{font-size:7px;display:block;margin-top:14px;letter-spacing:.15em}
.h-opening{position:absolute;left:0;top:7px;width:235px;height:39px;border-radius:50%;background:radial-gradient(ellipse,hsl(var(--accent)) 55%,hsl(var(--label)/.6) 65%,hsl(var(--can)) 69%,hsl(var(--can-dark)) 76%);z-index:2;border:2px solid hsl(var(--can))}
.h-lid{position:absolute;left:-1px;top:1px;width:237px;height:40px;background:linear-gradient(160deg,hsl(var(--can)),hsl(var(--can-dark)));border:3px solid hsl(var(--can)/.8);border-radius:50%;z-index:5;box-shadow:0 4px 0 hsl(var(--can-dark)/.8);will-change:transform}.h-lid span{position:absolute;inset:5px 13px;border:1px solid hsl(var(--can-dark));border-radius:50%}
.h-base{position:absolute;bottom:-2px;left:0;width:235px;height:30px;border-radius:50%;border-bottom:5px solid hsl(var(--can)/.75);z-index:2}
.h-stream{position:absolute;width:32px;left:190px;top:170px;height:270px;background:linear-gradient(90deg,hsl(var(--label)/.8),hsl(var(--accent)),hsl(var(--label)/.9));transform:scaleY(0);transform-origin:top;border-radius:35% 35% 40% 60%;z-index:-1}
.h-drop{position:absolute;width:14px;height:29px;left:240px;top:290px;border-radius:50%;background:hsl(var(--accent));opacity:0}.h-drop.d2{left:170px;top:345px;width:9px;height:20px}
.h-pool{position:absolute;bottom:-20px;left:35px;width:330px;height:64px;border-radius:50%;background:linear-gradient(15deg,hsl(var(--label)/.6),hsl(var(--accent)) 65%,hsl(var(--accent)/.7));transform:scale(0);box-shadow:0 10px 25px hsl(0 0% 0%/.3);z-index:-2}
.h-shadow{position:absolute;width:240px;height:45px;bottom:0;left:90px;background:hsl(0 0% 0%/.45);filter:blur(15px);border-radius:50%}
@media(max-height:520px),(max-width:900px){.h-scene{right:4%;top:auto;bottom:40px;transform:scale(.55);transform-origin:bottom right}}
@media(max-width:760px){.h-scene{right:50%;left:auto;top:auto;bottom:80px;transform:translateX(50%) scale(.7);transform-origin:bottom center}}
@media(max-height:520px){.pour-stage{min-height:0}.h-scene{left:auto;right:4%;top:auto;bottom:34px;transform:scale(.42);transform-origin:bottom right}.pour-copy p{display:none}}

.h-can{z-index:3}.h-flow{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}#flow{stroke:hsl(var(--accent))}#core{stroke:hsl(0 0% 100%/.28)}#ring{stroke:hsl(var(--accent)/.6)}.h-flow circle{fill:hsl(var(--accent))}.h-pool{transform-origin:50% 50%}