:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;width:100%;height:100vh;overflow:hidden}#canvas-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1}#dom-container{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:center;align-items:center}#dom-container>*{pointer-events:auto}h1{font-size:3.2em;line-height:1.1}.camera-preview{position:fixed;bottom:20px;left:50%;transform:translate(-50%) scale(.7);width:120px;max-width:90vw;border-radius:12px;overflow:hidden;box-shadow:0 8px 32px #0000004d;border:2px solid rgba(255,255,255,.2);z-index:1000;pointer-events:none;border:4px solid rgb(223,128,249)}@media(min-width:768px){.camera-preview{width:320px}}.camera-preview canvas{width:100%;height:auto;display:block}.audio-button-container{position:fixed;top:130px;right:20px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:2000;opacity:.8;transition:opacity .3s ease,transform .3s ease;overflow:hidden}.audio-button-container:hover{opacity:1;transform:scale(1.1)}.sine-wave{width:200%;height:100%;stroke:#fff;stroke-width:2;fill:none;overflow:visible}.wave-group{animation:waveScroll 2s linear infinite}.paused .wave-group{animation-play-state:paused;opacity:.5}@keyframes waveScroll{0%{transform:translate(0)}to{transform:translate(-40px)}}.landing-page-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#3391e4,#5b5b5b);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:9999;transition:opacity .6s ease-out}.landing-page-hidden{opacity:0;pointer-events:none}.landing-page-visible{opacity:1;pointer-events:all}.tutorial-container{margin-bottom:10px;position:relative;width:250px;height:120px;display:flex;align-items:center;justify-content:center}.hand-icon{width:100px;height:100px;position:absolute;left:40%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));animation:handMove 5s ease-in-out infinite}.butterfly-icon{width:60px;height:60px;position:absolute;left:50%;top:20%;transform:translate(50%,-70%) rotate(-15deg);filter:drop-shadow(0 4px 12px rgba(0,0,0,.3));animation:butterflyFollow 5s ease-in-out infinite}.loading-bar-container{width:300px;height:4px;background-color:#fff3;border-radius:2px;overflow:hidden;position:relative}.loading-bar-fill{height:100%;background:linear-gradient(90deg,#4caf50,#8bc34a);border-radius:2px;box-shadow:0 0 20px #4caf50cc;transition:width .3s ease-out}.loading-text{color:#fff;font-size:14px;margin-top:12px;font-family:system-ui,-apple-system,sans-serif;opacity:.9}.start-button{margin-top:30px;padding:16px 48px;font-size:20px;font-weight:700;color:#fff;background:#fff3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:2px solid rgba(255,255,255,.3);border-radius:50px;box-shadow:0 8px 32px #0003;transition:all .3s ease}.start-button-visible{cursor:pointer;animation:pulse 2s ease-in-out infinite;opacity:1;transform:scale(1);pointer-events:all}.start-button-hidden{cursor:default;animation:none;opacity:0;transform:scale(.8);pointer-events:none}.start-button:hover{transform:scale(1.05);background:#ffffff4d}@keyframes handMove{0%,to{transform:translate(-50%,-50%)}50%{transform:translate(-10%,-80%)}}@keyframes butterflyFollow{0%,to{transform:translate(50%,-70%) rotate(-15deg)}50%{transform:translate(90%,-100%) rotate(-15deg)}}@keyframes pulse{0%,to{box-shadow:0 8px 32px #0003}50%{box-shadow:0 8px 32px #fff6}}.flowers-footer{position:absolute;bottom:0;left:0;width:100%;height:150px;pointer-events:none;z-index:1;display:flex;align-items:flex-end}.flower-1{width:150px;height:auto;margin-right:-40px;z-index:2;filter:drop-shadow(4px 4px 8px rgba(0,0,0,.3))}.flower-2{width:100px;height:auto;margin-bottom:0;transform:rotate(15deg);filter:drop-shadow(4px 4px 8px rgba(0,0,0,.3))}@media(max-width:768px){.flowers-footer{height:140px}.flower-1{width:100px}.flower-2{width:70px;margin-left:20px}@media(orientation:landscape){.flowers-footer{height:100px;padding-bottom:5px}.flower-1{width:80px}.flower-2{width:50px}}}.credits-container{position:absolute;bottom:20px;right:20px;font-family:system-ui,-apple-system,sans-serif;font-size:12px;color:#fff9;z-index:10;pointer-events:auto}.credit-link{color:#fff9;text-decoration:none;transition:color .3s ease}.credit-link:hover{color:#fff}.credit-separator{margin:0 8px;opacity:.4}