*{box-sizing:border-box;padding:0;margin:0}body,html{max-width:100vw;overflow-x:hidden;overflow-y:auto;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:#0a0e27;min-height:100vh;position:relative}.canvas-background{pointer-events:none;background:radial-gradient(#0a0e27,#000)}.canvas-background,.webgl-background-base{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.webgl-background-base{background:#0a0e27}.webgl-background{pointer-events:none}.starfield-background,.webgl-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.starfield-background{background-color:#000;background-image:radial-gradient(circle at top right,rgba(121,68,154,.13),transparent),radial-gradient(circle at 20% 80%,rgba(41,196,255,.13),transparent)}.starfield-canvas{position:fixed;width:100%;height:100%;z-index:0;pointer-events:none}.container{max-width:600px;margin:0 auto;min-height:100vh;padding:20px 20px 40px}.card,.container{position:relative;z-index:1}.card{background:hsla(0,0%,100%,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:24px;padding:32px;box-shadow:0 8px 32px rgba(0,0,0,.1);margin-bottom:20px;border:1px solid hsla(0,0%,100%,.2)}h1{text-align:center;font-size:2.5rem;margin-bottom:30px;font-weight:700;text-shadow:0 2px 20px hsla(0,0%,100%,.3);z-index:1;letter-spacing:-.5px}.button,h1{color:#fff;position:relative}.button{width:100%;padding:18px 24px;font-size:1.1rem;font-weight:600;background:hsla(0,0%,100%,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.3);border-radius:16px;cursor:pointer;transition:all .3s ease;margin-bottom:20px;box-shadow:0 4px 15px rgba(0,0,0,.2);overflow:hidden}.button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,hsla(0,0%,100%,.3),transparent);transition:left .5s}.button:hover:not(:disabled):before{left:100%}.button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 25px rgba(102,126,234,.5);background:hsla(0,0%,100%,.25);border-color:hsla(0,0%,100%,.4)}.button:active:not(:disabled){transform:translateY(0)}.button:disabled{opacity:.5;cursor:not-allowed;background:hsla(0,0%,100%,.1)}.loading{text-align:center;padding:20px;color:hsla(0,0%,100%,.9);font-size:1rem;background:hsla(0,0%,100%,.1);border-radius:12px;border:1px solid hsla(0,0%,100%,.2)}.error,.loading{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.error{background:hsla(0,100%,89%,.2);color:#ff6b6b;padding:16px;border-radius:12px;margin-bottom:20px;border:1px solid hsla(0,100%,71%,.3)}.output{margin-top:20px}.digipin-display{font-size:2rem;font-weight:800;text-align:center;padding:24px 16px;background:hsla(0,0%,100%,.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:20px;margin-bottom:20px;letter-spacing:2px;font-family:Courier New,monospace;border:2px solid hsla(0,0%,100%,.3);box-shadow:0 8px 32px rgba(0,0,0,.2),0 0 40px rgba(102,126,234,.3);animation:pulse 2s ease-in-out infinite;position:relative;cursor:pointer;transition:all .3s ease;white-space:nowrap;overflow-x:auto;color:#fff;-webkit-text-fill-color:#fff;text-shadow:0 0 10px rgba(102,126,234,.9),0 0 20px rgba(240,147,251,.7),0 0 30px rgba(79,172,254,.5),0 0 40px rgba(102,126,234,.3),2px 2px 4px rgba(0,0,0,.5);-webkit-user-select:all;-moz-user-select:all;user-select:all;background-image:linear-gradient(135deg,rgba(102,126,234,.2),rgba(240,147,251,.2) 50%,rgba(79,172,254,.2)),hsla(0,0%,100%,.15);z-index:1}.digipin-display:hover{transform:scale(1.02);box-shadow:0 12px 40px rgba(0,0,0,.3),0 0 60px rgba(102,126,234,.4);text-shadow:0 0 15px #667eea,0 0 25px rgba(240,147,251,.9),0 0 35px rgba(79,172,254,.7),0 0 45px rgba(102,126,234,.5),2px 2px 6px rgba(0,0,0,.6);color:#fff;-webkit-text-fill-color:#fff}.copied-badge{position:absolute;top:10px;right:10px;background:rgba(81,207,102,.9);color:#fff;padding:6px 12px;border-radius:20px;font-size:.75rem;font-weight:600;animation:slideIn .3s ease-out;z-index:10;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}@keyframes slideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.02)}}.coords{color:hsla(0,0%,100%,.9);font-size:.95rem;margin-bottom:16px;text-align:center;background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:12px;border-radius:12px;border:1px solid hsla(0,0%,100%,.2)}.coords div{margin:4px 0}.address{color:hsla(0,0%,100%,.9);font-size:.9rem;margin-bottom:16px;padding:16px;background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-radius:12px;border:1px solid hsla(0,0%,100%,.2)}.address-line{margin-bottom:6px;color:hsla(0,0%,100%,.85)}.address-line strong{color:hsla(0,0%,100%,.95);margin-right:8px}.actions{display:flex;gap:12px;margin-top:16px}.action-button{flex:1 1;padding:14px 20px;font-size:.95rem;font-weight:600;color:#fff;background:hsla(0,0%,100%,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.3);border-radius:12px;cursor:pointer;transition:all .3s ease;box-shadow:0 2px 10px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;gap:8px}.action-button:hover{background:hsla(0,0%,100%,.3);transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.3)}.action-button.secondary{background:hsla(208,7%,46%,.3);border-color:hsla(208,7%,46%,.4)}.action-button.secondary:hover{background:hsla(208,7%,46%,.4)}.action-button-icon{width:18px;height:18px;display:inline-block}.map-container{height:300px;width:100%;border-radius:16px;overflow:hidden;margin-top:16px;border:2px solid hsla(0,0%,100%,.3);box-shadow:0 4px 15px rgba(0,0,0,.2);background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.history-section{margin-top:20px}.history-title{color:#fff;font-size:1.5rem;margin-bottom:16px;font-weight:600;text-shadow:0 2px 10px hsla(0,0%,100%,.3)}.history-item{background:hsla(0,0%,100%,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:16px;padding:20px;margin-bottom:12px;box-shadow:0 4px 15px rgba(0,0,0,.1);border:1px solid hsla(0,0%,100%,.2);cursor:pointer;transition:all .3s ease}.history-item:hover{transform:translateY(-4px);box-shadow:0 8px 25px rgba(0,0,0,.2);background:hsla(0,0%,100%,.15);border-color:hsla(0,0%,100%,.3)}.history-digipin-wrapper{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}.history-digipin{font-size:1.4rem;font-weight:700;background:linear-gradient(135deg,#667eea,#f093fb);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:Courier New,monospace;letter-spacing:2px;flex:1 1}.history-copy-button{background:hsla(0,0%,100%,.15);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2);border-radius:8px;padding:8px;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;flex-shrink:0}.history-copy-button:hover{background:hsla(0,0%,100%,.25);transform:scale(1.1)}.history-copy-icon{width:18px;height:18px;color:hsla(0,0%,100%,.9);stroke-width:2.5}.history-meta{color:hsla(0,0%,100%,.8);font-size:.85rem;display:flex;justify-content:space-between;align-items:center;margin-top:8px}.clear-history{text-align:center;margin-top:16px}.clear-history-button{color:#fff;background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.3);padding:10px 20px;border-radius:12px;cursor:pointer;font-size:.9rem;transition:all .3s ease;box-shadow:0 2px 10px rgba(0,0,0,.2)}.clear-history-button:hover{background:hsla(0,0%,100%,.2);transform:translateY(-2px);box-shadow:0 4px 15px rgba(0,0,0,.3)}.permission-toggle{display:flex;align-items:center;justify-content:space-between;background:hsla(0,0%,100%,.1);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;padding:12px 16px;margin-bottom:20px;color:hsla(0,0%,100%,.9);font-size:.9rem}.permission-status{display:flex;align-items:center;gap:8px}.permission-indicator{width:10px;height:10px;border-radius:50%;background:#ff6b6b;animation:pulse-dot 2s ease-in-out infinite}.permission-indicator.granted{background:#51cf66}@keyframes pulse-dot{0%,to{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(1.2)}}.permission-button{padding:8px 16px;font-size:.85rem;font-weight:600;color:#fff;background:hsla(0,0%,100%,.2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid hsla(0,0%,100%,.3);border-radius:8px;cursor:pointer;transition:all .3s ease}.permission-button:hover{background:hsla(0,0%,100%,.3);transform:translateY(-1px)}.animation-controls{position:fixed;bottom:20px;right:20px;z-index:1000}.animation-toggle-button{width:56px;height:56px;border-radius:50%;background:hsla(0,0%,100%,.15);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.3);color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.3);transition:all .3s ease}.animation-toggle-button:hover{background:hsla(0,0%,100%,.25);transform:scale(1.1);box-shadow:0 6px 25px rgba(0,0,0,.4)}.animation-icon{width:24px;height:24px;stroke-width:2}.animation-menu{position:absolute;bottom:70px;right:0;background:hsla(0,0%,100%,.1);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid hsla(0,0%,100%,.2);border-radius:16px;padding:12px;min-width:200px;box-shadow:0 8px 32px rgba(0,0,0,.3);animation:slideUp .3s ease-out}@keyframes slideUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animation-menu-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid hsla(0,0%,100%,.2);color:#fff;font-weight:600;font-size:.9rem}.animation-close-button{background:transparent;border:none;color:#fff;font-size:24px;cursor:pointer;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:background .2s}.animation-close-button:hover{background:hsla(0,0%,100%,.1)}.animation-options{display:flex;flex-direction:column;gap:8px}.animation-option{display:flex;align-items:center;gap:12px;padding:12px;background:hsla(0,0%,100%,.1);border:1px solid hsla(0,0%,100%,.2);border-radius:12px;color:#fff;cursor:pointer;transition:all .2s ease;font-size:.95rem}.animation-option:hover{background:hsla(0,0%,100%,.2);transform:translateX(-4px)}.animation-option.active{background:rgba(102,126,234,.3);border-color:rgba(102,126,234,.5)}.animation-option-icon{font-size:1.2rem;width:24px;text-align:center}.animation-option-label{flex:1 1}.animation-check-icon{width:18px;height:18px;stroke-width:3}.liquid-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;background:linear-gradient(135deg,#667eea,#764ba2 25%,#f093fb 50%,#4facfe 75%,#667eea);background-size:400% 400%;animation:liquidFlow 20s ease infinite}@keyframes liquidFlow{0%{background-position:0 50%}50%{background-position:100% 50%}to{background-position:0 50%}}.minimal-background{background:radial-gradient(circle at 20% 50%,rgba(102,126,234,.3),transparent 50%),radial-gradient(circle at 80% 80%,rgba(240,147,251,.3),transparent 50%),radial-gradient(circle at 40% 20%,rgba(79,172,254,.2),transparent 50%),#0a0e27}.minimal-background,.no-background{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}.no-background{background:#0a0e27}@media (max-width:600px){h1{font-size:1.8rem}.digipin-display{font-size:1.4rem;letter-spacing:1.5px;padding:20px 12px}.card{padding:24px}.permission-toggle{flex-direction:column;gap:12px;align-items:flex-start}.action-button-icon{width:16px;height:16px}.animation-controls{bottom:15px;right:15px}.animation-toggle-button{width:48px;height:48px}.animation-icon{width:20px;height:20px}.animation-menu{min-width:180px;bottom:65px}}@media (max-width:400px){.digipin-display{font-size:1.2rem;letter-spacing:1px;padding:16px 8px}}