*{box-sizing:border-box}html,body{margin:0;background:#fff;color:#000;font-family:Arial,Helvetica,sans-serif}body{overflow:hidden}.hero{position:relative;width:100%;height:100svh;min-height:600px;isolation:isolate}#stage{position:absolute;inset:0;z-index:-1;touch-action:none;cursor:grab}#stage:active{cursor:grabbing}canvas{display:block;width:100%;height:100%}header{position:absolute;top:27px;left:0;width:100%;display:flex;justify-content:center;pointer-events:none}.brand{pointer-events:auto;display:block}.brand img{display:block;width:190px;height:auto}.copy{position:absolute;left:12%;top:29%;pointer-events:none}.name{font-size:15px;letter-spacing:-.35px;margin:0 0 21px}.intro{font-size:13px;line-height:1.65;margin:0 0 25px}h1{font-size:clamp(30px,3.2vw,46px);font-weight:400;line-height:1.07;letter-spacing:-1.9px;margin:0 0 30px}.vimeo{pointer-events:auto;color:#000;font-size:12px;text-decoration:none;border-bottom:1px solid #000;padding-bottom:5px;display:inline-flex;gap:22px}.vimeo span{font-size:16px}.play-hint{position:absolute;left:67%;bottom:19%;display:flex;align-items:center;gap:14px;font-size:12px;pointer-events:none}.spark{font-size:30px;font-weight:300}.play-hint small{display:block;font-size:11px;margin-top:6px;color:#000}footer{position:absolute;bottom:32px;left:5%;right:5%;display:flex;justify-content:space-between;align-items:center}.edition{font-size:9px;letter-spacing:1.6px}.divider{margin:0 12px}.controls{display:flex;align-items:center;gap:20px}.flavours{display:flex;gap:12px;align-items:center}button{color:#000;background:none;border:0;font:inherit;cursor:pointer}button:focus-visible,a:focus-visible{outline:2px solid #102c50;outline-offset:7px}.swatch{width:13px;height:13px;border-radius:50%;background:var(--swatch);padding:0;position:relative}.swatch.active:after{content:'';position:absolute;inset:-5px;border:1px solid #000;border-radius:50%}.rule{height:18px;width:1px;background:#ddd}#bounce{font-size:11px;padding:7px 0}#bounce span{margin-left:15px}#pause{font-size:14px;width:26px;height:26px}#status{position:absolute;top:51%;left:61%;font-size:12px;color:#000;pointer-events:none}#status:empty{display:none}@media(max-width:700px){.hero{min-height:620px}header{top:16px}.brand img{width:163px}.copy{left:8%;top:19%}.name{font-size:12px;margin-bottom:13px}.intro{font-size:11px;margin-bottom:17px}h1{font-size:30px;letter-spacing:-1.2px;margin-bottom:22px}.vimeo{font-size:10px}.play-hint{left:auto;right:8%;bottom:14%;font-size:10px;gap:8px}.play-hint small{font-size:9px}.spark{font-size:24px}footer{left:8%;right:8%;bottom:24px}.edition{display:none}.controls{width:100%;justify-content:flex-end;gap:18px}#status{left:45%;top:64%;font-size:10px}}@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto}}
header{left:calc(12% - 10px);top:calc(29% - 100px);width:auto;justify-content:flex-start}.brand img{width:210px}.play-hint{bottom:12%}@media(max-width:700px){header{left:calc(8% - 8px);top:35px}.brand img{width:180px}.copy{top:17%}.play-hint{bottom:12%}}
canvas{filter:brightness(1.12)}

.copy{left:15%}header{left:calc(15% - 10px)}.play-hint{left:64%}@media(max-width:700px){.copy{left:10%}header{left:calc(10% - 8px)}.play-hint{left:auto}}

html,body{background:#d5d8d6}canvas{filter:none}

.play-hint{left:64%;bottom:10.5%;gap:12px;align-items:center;min-width:250px;padding:11px 17px 11px 12px;border:1px solid rgba(0,0,0,.72);border-radius:999px;background:rgba(255,255,255,.7);box-shadow:0 9px 24px rgba(31,28,37,.12);backdrop-filter:blur(8px);font-size:14px;line-height:1;transform-origin:center;animation:hint-breathe 2.2s ease-in-out infinite}.gesture{position:relative;display:grid;flex:0 0 auto;place-items:center;width:36px;height:36px;border-radius:50%;background:#111;color:#fff}.gesture svg{position:relative;z-index:1;width:18px;height:23px;fill:#fff;animation:gesture-drag 1.8s ease-in-out infinite}.gesture-ring{position:absolute;inset:0;border:1px solid #111;border-radius:50%;animation:gesture-pulse 1.8s ease-out infinite}.hint-copy{display:flex;flex-direction:column;gap:5px;white-space:nowrap}.hint-copy strong{font-size:14px;letter-spacing:.12em;font-weight:700}.play-hint small{margin:0;font-size:12px;letter-spacing:.08em;color:#4a4650}.play-hint.is-playing{animation:none;transform:scale(.96);background:rgba(255,255,255,.92)}.play-hint.is-playing .gesture{background:#dc3299}.play-hint.has-played{animation:none;opacity:.7;box-shadow:none}.play-hint.has-played .gesture svg{animation:none}.play-hint.has-played .gesture-ring{display:none}@keyframes hint-breathe{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.025)}}@keyframes gesture-drag{0%,20%,100%{transform:translate(0,0) rotate(-8deg)}55%{transform:translate(5px,-4px) rotate(2deg)}}@keyframes gesture-pulse{0%{opacity:.65;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
@media(max-width:700px){.play-hint{left:auto;right:7%;bottom:12%;min-width:214px;padding:9px 13px 9px 9px}.gesture{width:32px;height:32px}.gesture svg{width:16px;height:21px}.hint-copy strong{font-size:12px}.play-hint small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.play-hint,.gesture svg,.gesture-ring{animation:none}}
.bear-cue{position:absolute;z-index:2;left:70%;top:47%;display:grid;place-items:center;width:82px;height:82px;border:2px solid rgba(255,255,255,.9);border-radius:50%;background:#111;color:#fff;box-shadow:0 10px 28px rgba(0,0,0,.28),inset 0 0 0 1px rgba(255,255,255,.18);pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.72);transition:opacity .28s ease,transform .38s cubic-bezier(.2,.8,.2,1)}.bear-cue.is-ready{opacity:1;transform:translate(-50%,-50%) scale(1);animation:bear-cue-float 1.8s ease-in-out infinite}.bear-cue svg{position:relative;z-index:1;width:30px;height:38px;fill:#fff;animation:gesture-drag 1.8s ease-in-out infinite}.bear-cue-ring{position:absolute;inset:-2px;border:2px solid rgba(17,17,17,.72);border-radius:50%;animation:bear-cue-pulse 1.8s ease-out infinite}.bear-cue.is-dismissed{opacity:0;transform:translate(-50%,-50%) scale(.35);animation:none}.bear-cue.is-dismissed svg,.bear-cue.is-dismissed .bear-cue-ring{animation:none}@keyframes bear-cue-float{0%,100%{margin-top:0}50%{margin-top:-7px}}@keyframes bear-cue-pulse{0%{opacity:.7;transform:scale(1)}100%{opacity:0;transform:scale(1.65)}}@media(max-width:700px){.bear-cue{left:62%;top:57%;width:66px;height:66px}.bear-cue svg{width:24px;height:31px}}@media(prefers-reduced-motion:reduce){.bear-cue,.bear-cue svg,.bear-cue-ring{animation:none}}
.bear-cue{--cue-color:#ef65cf;background:color-mix(in srgb,var(--cue-color) 80%,transparent);border-color:rgba(255,255,255,.86);box-shadow:0 10px 26px color-mix(in srgb,var(--cue-color) 30%,transparent),inset 0 1px 1px rgba(255,255,255,.35)}
.bear-cue-ring{border-color:color-mix(in srgb,var(--cue-color) 72%,transparent)}