@font-face{font-family:Coiny;src:url('assets/coiny.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{font-family:Coiny,ui-rounded,system-ui,sans-serif;color:#fff;background:#94e2ff;font-synthesis:none}*{box-sizing:border-box}body{margin:0}button{-webkit-tap-highlight-color:transparent;font:inherit;color:inherit;cursor:pointer}button:focus-visible{outline:3px solid #237ca2;outline-offset:6px}#experience{height:100svh;min-height:500px;position:relative;overflow:hidden;isolation:isolate}.sky{position:absolute;inset:0;z-index:-1;background:#94e2ff}canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}#bubble-depth{pointer-events:none}.brand-icon{position:absolute;left:2%;top:3%;width:clamp(48px,5.3vw,80px);height:clamp(48px,5.3vw,80px);object-fit:contain}
/* A web interpretation of Liquid Glass: a clear body, optical rim, and soft lift. */
.liquid-glass{
 position:relative;isolation:isolate;border:1px solid transparent;
 background:var(--glass-fill,linear-gradient(150deg,#ffffff26,#ffffff0a 48%,#d4edff20));
 box-shadow:inset 0 1px 1px #ffffff85,inset 0 -1px 1px #ffffff45,0 2px 4px #153b6110,0 8px 24px #153b6124;
 backdrop-filter:blur(var(--glass-blur,16px)) saturate(150%) brightness(1.06);
 -webkit-backdrop-filter:blur(var(--glass-blur,16px)) saturate(150%) brightness(1.06);
 text-shadow:0 1px 3px #19486755;
 transition:background-color .22s,box-shadow .22s,scale .24s cubic-bezier(.2,.8,.2,1);
 overflow:hidden;user-select:none;touch-action:manipulation
}
.liquid-glass::before{
 content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
 background:radial-gradient(ellipse at 22% 0%,#ffffff50,transparent 58%),radial-gradient(ellipse at 85% 110%,#ffffff30,transparent 52%);
 opacity:var(--glass-highlight,.65);transition:opacity .22s
}
.liquid-glass::after{
 content:'';position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
 background:linear-gradient(145deg,#fffffff0 0%,#ffffff65 22%,#ffffff12 43%,#ffffff28 62%,#ffffffab 86%,#ffffff38);
 -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
 -webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude
}
@media(hover:hover) and (pointer:fine){
 .liquid-glass:hover{background-color:#ffffff12;box-shadow:inset 0 1px 1px #ffffffa0,inset 0 -1px 1px #ffffff50,0 3px 6px #153b6112,0 10px 28px #153b612b}
 .liquid-glass:hover::before{opacity:.95}
}
.liquid-glass:active{scale:.96;background-color:#ffffff26;box-shadow:inset 0 1px 2px #ffffff95,0 2px 8px #153b611c;transition-duration:.12s}
.liquid-glass:active::before{opacity:1}
/* Keep the opening bubbles visible through the large Start control. */
.start-button{--glass-blur:6px;--glass-fill:linear-gradient(150deg,#ffffff10,#ffffff03 48%,#d4edff0c);--glass-highlight:.3}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.liquid-glass{background-color:#588ab5}}
@media(prefers-reduced-transparency:reduce){.liquid-glass{background:#5687ad;backdrop-filter:none;-webkit-backdrop-filter:none}}
.start-button{position:absolute;left:50%;top:49.9%;transform:translate(-50%,-50%);width:clamp(240px,25.8vw,390px);min-height:clamp(88px,14svh,138px);border-radius:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 18px 13px;gap:0}.start-title{font-size:clamp(44px,5.3vw,80px);line-height:1.08}.start-hint{font-size:clamp(16px,1.59vw,24px);line-height:1.25;white-space:nowrap}.wand-navigation{position:absolute;left:50%;top:91.8%;width:clamp(240px,25.5vw,386px);transform:translate(-50%,-50%);display:flex;justify-content:space-between;pointer-events:none}.wand-arrow{width:clamp(58px,6.1vw,92px);height:clamp(58px,6.1vw,92px);border-radius:50%;padding:0;pointer-events:auto}.wand-arrow img{position:absolute;width:calc(100% + 4px);height:calc(100% + 4px);left:-2px;top:-2px;object-fit:contain;clip-path:circle(35% at 50% 50%);pointer-events:none}.counter{position:absolute;left:86.7%;top:85.4%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;line-height:1;pointer-events:none}.counter #count{font-size:clamp(48px,6.62vw,100px);font-variant-numeric:tabular-nums}.counter>span+span{font-size:clamp(18px,1.99vw,30px);margin-top:4px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}#notice{position:absolute;left:50%;top:28%;transform:translateX(-50%);max-width:calc(100% - 40px);width:max-content;padding:14px 20px;border-radius:20px;border:1px solid #fff9;background:#ffffffd9;backdrop-filter:blur(14px);font:15px/1.6 system-ui,sans-serif;color:#215a75;text-align:center;z-index:4}[hidden]{display:none!important}
@media(max-width:600px){.brand-icon{left:20px;top:20px}.start-button{top:42%;width:min(76%,288px);min-height:94px}.start-title{font-size:48px}.start-hint{font-size:16px}.wand-navigation{top:88%;width:230px}.counter{left:auto;right:18px;top:auto;bottom:18px;transform:none}.counter #count{font-size:38px}.counter>span+span{font-size:16px}.wand-arrow{width:58px;height:58px}}
@media(max-height:550px) and (min-width:601px){.start-button{top:35%;min-height:78px}.start-title{font-size:40px}.start-hint{font-size:16px}.wand-navigation{top:88%}.counter{top:78%}.counter #count{font-size:48px}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

/* Inflated, pearlescent lettering follows the three-line Figma opening. */
#bubble-intro{position:absolute;top:16.5%;left:50%;transform:translateX(-50%);width:94%;pointer-events:none;z-index:2;text-align:center;font-size:min(13.23vw,20.4svh,200px);line-height:1}
.intro-word{display:flex;justify-content:center;height:1em;gap:0;white-space:nowrap}
.bubble-letter{position:relative;display:block;flex:none;border:0;padding:0 .005em;background:linear-gradient(155deg,#fff 4%,#f8f5ff 15%,#a1d7ed 24%,#fce4ff 34%,#ffffff 41%,#b6edee 51%,#fef3c1 66%,#ebc4ed 77%,#83cce8 90%,#fff 98%);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-stroke:1px #ffffffb3;font:inherit;line-height:1;text-shadow:0 1px 1px #ffffff60;filter:drop-shadow(1px 3px 0 #5cacc67a) drop-shadow(0 6px 5px #4796b32e);pointer-events:auto;cursor:crosshair;touch-action:manipulation;transform-origin:50% 60%;animation:intro-float var(--duration) var(--delay) ease-in forwards;transition:opacity .18s,filter .18s}
.bubble-letter::after{content:attr(data-letter);position:absolute;inset:0;color:transparent;background:linear-gradient(125deg,transparent 19%,#fffffff5 21%,#ffffffcc 23%,transparent 28%,transparent 61%,#fff9 63%,transparent 66%);background-clip:text;-webkit-background-clip:text;-webkit-text-stroke:0;pointer-events:none;opacity:.85}

.bubble-letter:focus-visible{outline:2px solid #237ca2;border-radius:25%;outline-offset:3px}.bubble-letter.popped{opacity:0;pointer-events:none;filter:blur(5px);transition:opacity .18s,filter .18s}.start-button{z-index:3;transition:opacity .65s,scale .24s cubic-bezier(.2,.8,.2,1),background-color .22s,box-shadow .22s}.start-button.intro-pending{opacity:0;scale:.94;pointer-events:none;visibility:hidden}.intro-droplet{position:absolute;z-index:4;width:2px;height:2px;border:0;border-radius:50%;background:#f2fbffb0;pointer-events:none;animation:intro-splash .6s ease-out forwards}
@keyframes intro-float{0%{transform:translate(0,0) rotate(0);opacity:1}30%{opacity:1}75%{opacity:.8}100%{transform:translate(var(--sway),-95svh) rotate(var(--tilt));opacity:0}}
@keyframes intro-splash{to{transform:translate(var(--dx),var(--dy)) scale(.2);opacity:0}}
@media(max-width:600px){#bubble-intro{top:18%;font-size:min(18vw,17svh)}}
@media(prefers-reduced-motion:reduce){.bubble-letter{animation:intro-fade 2s 6s forwards}.intro-droplet{display:none}.start-button{transition:none}@keyframes intro-fade{to{opacity:0}}}

/* Real sky photography drifts slowly in layered cloud banks. */
.sky{background:linear-gradient(#68afea,#b4def7);overflow:hidden}
.sky::before,.sky::after{content:'';position:absolute;inset:-8%;background:url('sky.jpg') center/cover no-repeat;will-change:transform;pointer-events:none}
.sky::before{animation:cloud-bank 110s ease-in-out infinite alternate}
.sky::after{mask-image:linear-gradient(120deg,transparent 46%,#000 88%);-webkit-mask-image:linear-gradient(120deg,transparent 46%,#000 88%);animation:cloud-bank-near 145s ease-in-out infinite alternate}
@keyframes cloud-bank{from{transform:translate(-2%,1%) scale(1.03)}to{transform:translate(3%,-1%) scale(1.07)}}
@keyframes cloud-bank-near{from{transform:translate(2%,0) scale(1.06)}to{transform:translate(-3%,-2%) scale(1.10)}}
.bubble-letter.rendered{background:none;-webkit-text-stroke:0;text-shadow:none;filter:drop-shadow(0 2px 1px #a9d9ec20)}
.bubble-letter.rendered::after{display:none}
.bubble-letter .bubble-glyph{position:absolute;inset:-.08em -.04em;width:calc(100% + .08em);height:calc(100% + .16em);pointer-events:none;object-fit:fill}
.bubble-letter.rendered.popped{filter:blur(5px)}
.counter{text-shadow:0 2px 10px #28608238}
@media(prefers-reduced-motion:reduce){.sky::before,.sky::after{animation:none;will-change:auto}}

.sound-toggle{position:absolute;top:3%;right:2%;z-index:5;border-radius:30px;padding:10px 16px;min-height:44px;font:500 14px/1.2 system-ui,sans-serif;color:#fff;text-shadow:0 1px 4px #24618c40}
@media(max-width:600px){.sound-toggle{top:20px;right:20px}}