@charset "UTF-8";*{margin:0;padding:0;box-sizing:border-box}body{overflow:hidden}:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#experience{position:fixed;height:100%;width:100%;top:0;left:0;overflow:hidden}#experience #experience-canvas{height:100%;width:100%}.loading-screen{z-index:99;object-fit:fill;background-color:#1a1a1af5;justify-content:center;align-items:center;width:100vw;height:100vh;position:relative;inset:0%;display:flex;opacity:1;transition:opacity .5s ease}#start{height:50px}.overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(../images/texture.png);mix-blend-mode:soft-light;z-index:111;opacity:.2;pointer-events:none}.frame-container{position:fixed;inset:24px;pointer-events:none;display:flex;justify-content:center;align-items:center;z-index:80}.frame{position:absolute;width:100%;height:100%;object-fit:fill}.frame-container svg{width:100%;height:100%;display:block;preserveAspectRatio:none;transition:width .4s ease,height .4s ease}.logo{position:fixed;top:50px;left:60px;z-index:88;pointer-events:none}.logo img{height:30px;width:auto;display:block}.sound{position:fixed;top:44px;right:44px;z-index:88;pointer-events:none}.sound img{height:40px;width:auto;display:block}.instruction{position:fixed;top:33%;left:100px;z-index:88;pointer-events:none}.instruction img{height:120px;width:auto;display:block}.verse{position:fixed;top:35%;left:65vw;z-index:77;pointer-events:none}.verse img{height:195px;width:auto;display:block}.button-group{display:flex;align-items:center;justify-content:center;gap:32px;position:fixed;top:calc(35vh + 250px);left:65vw;z-index:77}.divider{width:1px;height:24px;background-color:#787e4e}.btn{height:32px;opacity:.75;cursor:pointer;transition:opacity .2s ease}.btn:hover,.btn:active{opacity:1}.wind-interaction{position:fixed;top:0;left:43%;pointer-events:none}.branch-bg{position:fixed;top:0;display:flex}.branch-bg img{width:50%;height:auto;left:45%}.branch{position:fixed;top:24px;display:flex;flex-direction:column;align-items:center;transform-origin:top center}#branch-1{left:54%}#branch-2{right:48%}.flower{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center;transform-origin:center center;transition:transform .3s ease-out}.flower img{width:100%;height:100%;object-fit:contain;border-radius:50%}.flower:not(:last-child):after{content:"";position:absolute;bottom:-56px;left:50%;transform:translate(-50%);width:1.2px;height:56px;background-color:#fff;opacity:0;transform-origin:top center;transition:transform .3s ease-out}#branch-1 .flower.idle:nth-child(1){transform:translate(0) rotate(0)}#branch-1 .flower.idle:nth-child(2){transform:translate(-2px) rotate(3deg)}#branch-1 .flower.idle:nth-child(3){transform:translate(-8px) rotate(6deg)}#branch-1 .flower.idle:nth-child(4){transform:translate(-20px) rotate(9deg)}#branch-1 .flower.idle:nth-child(5){transform:translate(-36px) rotate(12deg)}#branch-1 .flower.idle:nth-child(6){transform:translate(-56px) rotate(15deg)}#branch-1 .flower.idle:nth-child(7){transform:translate(-80px) rotate(18deg)}#branch-2 .flower.idle:nth-child(1){transform:translate(0) rotate(0)}#branch-2 .flower.idle:nth-child(2){transform:translate(-5px) rotate(5deg)}#branch-2 .flower.idle:nth-child(3){transform:translate(-20px) rotate(10deg)}#branch-2 .flower.idle:nth-child(4){transform:translate(-45px) rotate(15deg)}#branch-2 .flower.idle:nth-child(5){transform:translate(-80px) rotate(20deg)}#branch-2 .flower.idle:nth-child(6){transform:translate(-125px) rotate(25deg)}#branch-2 .flower.idle:nth-child(7){transform:translate(-180px) rotate(30deg)}#branch-1 .flower.idle:nth-child(1):not(:last-child):after{transform:translate(-50%) rotate(3deg)}#branch-1 .flower.idle:nth-child(2):not(:last-child):after{transform:translate(-50%) rotate(3deg)}#branch-1 .flower.idle:nth-child(3):not(:last-child):after{transform:translate(-50%) rotate(3deg)}#branch-1 .flower.idle:nth-child(4):not(:last-child):after{transform:translate(-50%) rotate(3deg)}#branch-1 .flower.idle:nth-child(5):not(:last-child):after{transform:translate(-50%) rotate(3deg)}#branch-1 .flower.idle:nth-child(6):not(:last-child):after{transform:translate(-50%) rotate(3deg)}#branch-2 .flower.idle:nth-child(1):not(:last-child):after{transform:translate(-50%) rotate(5deg)}#branch-2 .flower.idle:nth-child(2):not(:last-child):after{transform:translate(-50%) rotate(5deg)}#branch-2 .flower.idle:nth-child(3):not(:last-child):after{transform:translate(-50%) rotate(5deg)}#branch-2 .flower.idle:nth-child(4):not(:last-child):after{transform:translate(-50%) rotate(5deg)}#branch-2 .flower.idle:nth-child(5):not(:last-child):after{transform:translate(-50%) rotate(5deg)}#branch-2 .flower.idle:nth-child(6):not(:last-child):after{transform:translate(-50%) rotate(5deg)}@keyframes subtleSway{0%,to{transform:translate(var(--base-x, 0px)) rotate(var(--base-rotation, 0deg))}50%{transform:translate(calc(var(--base-x, 0px) + 2px)) rotate(calc(var(--base-rotation, 0deg) + 2deg))}}.flower.idle{animation:subtleSway 3s ease-in-out infinite}.flower:nth-child(1){animation-delay:0s}.flower:nth-child(2){animation-delay:.2s}.flower:nth-child(3){animation-delay:.4s}.flower:nth-child(4){animation-delay:.6s}.flower:nth-child(5){animation-delay:.8s}.flower:nth-child(6){animation-delay:1s}.flower:nth-child(7){animation-delay:1.2s}#branch-1 .flower:nth-child(1){--base-rotation: 0deg;--base-x: 0px}#branch-1 .flower:nth-child(2){--base-rotation: 3deg;--base-x: -2px}#branch-1 .flower:nth-child(3){--base-rotation: 6deg;--base-x: -8px}#branch-1 .flower:nth-child(4){--base-rotation: 9deg;--base-x: -20px}#branch-1 .flower:nth-child(5){--base-rotation: 12deg;--base-x: -36px}#branch-1 .flower:nth-child(6){--base-rotation: 15deg;--base-x: -56px}#branch-1 .flower:nth-child(7){--base-rotation: 18deg;--base-x: -80px}#branch-2 .flower:nth-child(1){--base-rotation: 0deg;--base-x: 0px}#branch-2 .flower:nth-child(2){--base-rotation: 5deg;--base-x: -5px}#branch-2 .flower:nth-child(3){--base-rotation: 10deg;--base-x: -20px}#branch-2 .flower:nth-child(4){--base-rotation: 15deg;--base-x: -45px}#branch-2 .flower:nth-child(5){--base-rotation: 20deg;--base-x: -80px}#branch-2 .flower:nth-child(6){--base-rotation: 25deg;--base-x: -125px}#branch-2 .flower:nth-child(7){--base-rotation: 30deg;--base-x: -180px}.rain-interaction{position:absolute;width:400px;height:400px;overflow:hidden;opacity:0;top:45%;left:32%;z-index:70;transform:translate(-50%,-50%);pointer-events:none}.rain-lines{position:absolute;width:100%;height:100%;top:0;left:0}.rain-line{position:absolute;width:.6px;background-color:#787e4e;opacity:0;transition:opacity .3s ease}.raindrop{position:absolute;width:100%;height:100%;top:0;left:0}#rain-1{position:relative;left:40%}#rain-2{position:relative;left:35%}.raindrop .rain{display:block;position:absolute;width:48px;height:48px;opacity:0;transition:opacity .2s ease}.raindrop .rain img{width:100%;height:100%;object-fit:contain}.loading-screen2{position:fixed;top:0;left:0;width:920px;height:100vh;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);mask-image:radial-gradient(circle at center,#0000 32%,#000 48% 80%,#000);-webkit-mask-image:radial-gradient(circle at center,rgba(0,0,0,0) 32%,rgb(0,0,0) 48%,rgb(0,0,0) 80%,rgb(0,0,0) 100%);mask-mode:alpha;-webkit-mask-composite:source-over;z-index:77;display:flex;align-items:center;justify-content:center;transition:opacity 1s ease}.falling-leaves{position:fixed;top:0;left:0;width:50vw;height:100vh;pointer-events:none;z-index:1000}.falling-leaves img{position:absolute;object-fit:contain}.rain-interaction.center{top:50%;left:50%;transform:translate(-50%,-50%)}.rain-interaction.top-right{top:100px;right:100px;transform:none}.rain-interaction.bottom-left{bottom:100px;left:100px;transform:none}@media (max-width: 768px){.rain-interaction{width:300px;height:300px}.raindrop .rain{width:36px;height:36px}}@keyframes fadeInRain{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.hand-detection-indicator{position:fixed;top:20px;left:20px;padding:10px 20px;background:#000000b3;color:#fff;border-radius:8px;font-family:monospace;font-size:14px;z-index:10000;opacity:0;transition:opacity .3s ease}.hand-detection-indicator.active{opacity:1}.hand-detection-progress{position:fixed;top:60px;left:20px;width:200px;height:4px;background:#ffffff4d;border-radius:2px;overflow:hidden;opacity:0;transition:opacity .3s ease}.hand-detection-progress.active{opacity:1}.hand-detection-progress-fill{height:100%;background:#4caf50;width:0%;transition:width .1s linear}