:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;background-color:#000;color:#ffffffde;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh}#app{width:100%;height:100%}video{transform:scaleX(-1)}#input-video{position:fixed;width:1px;height:1px;opacity:.01;pointer-events:none;top:0;left:0;z-index:-1}#output-canvas{transform:scaleX(-1);opacity:.8;pointer-events:none}#instruction-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;gap:20px;pointer-events:none;transition:opacity 1s ease-out;z-index:10}.instruction{display:flex;align-items:center;gap:15px;background:#0009;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:15px 25px;border-radius:30px;border:1px solid rgba(255,255,255,.1);box-shadow:0 4px 30px #0000001a;animation:fadeIn .5s ease-out backwards}.instruction:nth-child(2){animation-delay:.1s}.instruction:nth-child(3){animation-delay:.2s}.instruction .icon{font-size:24px}.instruction .text{font-size:16px;font-weight:500;letter-spacing:.5px;text-transform:uppercase}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.fade-out{opacity:0}#instruction-overlay.active{top:auto;left:10px;bottom:10px;transform:none;width:160px;gap:8px;z-index:200}#instruction-overlay.active .instruction{padding:6px 10px;border-radius:12px;background:#000000b3;border:1px solid rgba(255,255,255,.2);gap:8px}#instruction-overlay.active .instruction .icon{font-size:14px}#instruction-overlay.active .instruction .text{font-size:10px;white-space:nowrap}.planet-popup{position:absolute;top:0;left:0;pointer-events:auto;background:#05050ae6;padding:24px;border-radius:16px;width:260px;border:1px solid rgba(255,255,255,.15);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:0 20px 50px #000000e6;text-align:left;transform:translate(-50%,-100%);animation:popupFadeIn .3s cubic-bezier(.175,.885,.32,1.275);z-index:100}.planet-popup h3{margin:0 0 4px;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:#fff}.planet-popup p{margin:0 0 16px;font-size:.85rem;opacity:.8;line-height:1.5;color:#ffffffde}.planet-popup .stats{display:flex;flex-wrap:wrap;gap:8px;font-size:.75rem;opacity:.6;margin-bottom:0;font-weight:500}.planet-popup .stats span{background:#ffffff1a;padding:4px 8px;border-radius:6px;color:#fff}@keyframes popupFadeIn{0%{opacity:0;transform:translate(-50%,-90%) scale(.9)}to{opacity:1;transform:translate(-50%,-100%) scale(1)}}.gesture-debug-info{position:absolute;bottom:140px;left:10px;color:#0f0;font-family:monospace;font-size:12px;background:#000000b3;padding:8px;pointer-events:none;border-radius:4px;z-index:1000;border:1px solid rgba(0,255,0,.3)}#start-screen{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0009;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);display:flex;justify-content:center;align-items:center;z-index:9999;transition:opacity .5s ease-out}#start-screen.hidden{opacity:0;pointer-events:none}#start-screen .content{background:#141419e6;padding:40px 60px;border-radius:24px;border:1px solid rgba(255,255,255,.1);text-align:center;box-shadow:0 25px 50px -12px #00000080;max-width:400px}#start-screen h1{font-size:2.5rem;margin:0 0 10px;background:linear-gradient(to right,#fff,#a5b4fc);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}#start-screen p{color:#ffffffb3;margin:0 0 30px;font-size:1.1rem}#start-screen .permissions-note{display:flex;align-items:center;justify-content:center;gap:10px;background:#ffffff0d;padding:12px;border-radius:12px;margin-bottom:30px;font-size:.9rem;color:#fffc}#start-screen button{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border:none;padding:16px 32px;border-radius:12px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:0 10px 15px -3px #4f46e566}#start-screen button:hover{transform:translateY(-2px);box-shadow:0 20px 25px -5px #4f46e580}#start-screen button:active{transform:translateY(0)}