html,body{height:100%;margin:0;background:#05060F;overflow-x:hidden}
#root{height:100%}
.app{width:100%;max-width:520px;height:100vh;height:100dvh;margin:0 auto;box-shadow:0 0 80px rgba(0,0,0,.5)}
.app nav{padding-bottom:calc(10px + env(safe-area-inset-bottom))!important}
.still,.still *,.still::before,.still::after,.still *::before,.still *::after{animation:none!important;transition:none!important}
select{font-family:inherit}
a{color:inherit}a:hover{color:inherit}
.skin-aurora{--bg:#0A0B1A;--sf:rgba(255,255,255,.07);--tx:#F5F7FF;--mu:#AEB6CC;--ac:#67E8F9;--act:#0A0B1A;--a2:#A78BFA;--b3:#22D3EE;--grad:linear-gradient(135deg,#22D3EE,#A78BFA);--hero:linear-gradient(120deg,#4C1D95,#0E7490,#6D28D9,#4C1D95);--herot:#FFFFFF;--line:rgba(255,255,255,.14);--glow:rgba(34,211,238,.45);--map:#141833;--road:#2A3060}
.skin-nap{--bg:#1A0F1F;--sf:rgba(255,255,255,.07);--tx:#FFF6F0;--mu:#CDB9C4;--ac:#FFB84D;--act:#1A0F1F;--a2:#FF5D8F;--b3:#FFB703;--grad:linear-gradient(135deg,#FFB703,#FF5D8F);--hero:linear-gradient(120deg,#9D174D,#C2410C,#BE185D,#9D174D);--herot:#FFFFFF;--line:rgba(255,255,255,.14);--glow:rgba(255,93,143,.45);--map:#2A1830;--road:#4A2C52}
.skin-ocean{--bg:#061A2E;--sf:rgba(255,255,255,.07);--tx:#F0F8FF;--mu:#A9BDD0;--ac:#5CCBFA;--act:#04121F;--a2:#34D399;--b3:#38BDF8;--grad:linear-gradient(135deg,#38BDF8,#34D399);--hero:linear-gradient(120deg,#1D4ED8,#0E7490,#1E40AF,#1D4ED8);--herot:#FFFFFF;--line:rgba(255,255,255,.14);--glow:rgba(56,189,248,.45);--map:#0C2742;--road:#1C4468}
.skin-erdo{--bg:#0B1F14;--sf:rgba(255,255,255,.07);--tx:#F3FBF2;--mu:#AFC4B4;--ac:#B8E05A;--act:#0B1F14;--a2:#34D399;--b3:#C5E063;--grad:linear-gradient(135deg,#C5E063,#34D399);--hero:linear-gradient(120deg,#166534,#0F766E,#15803D,#166534);--herot:#FFFFFF;--line:rgba(255,255,255,.14);--glow:rgba(197,224,99,.4);--map:#12301F;--road:#24553A}
.skin-feher{--bg:#F4F6FB;--sf:rgba(255,255,255,.82);--tx:#0F172A;--mu:#475569;--ac:#4F46E5;--act:#FFFFFF;--a2:#C084FC;--b3:#818CF8;--grad:linear-gradient(135deg,#4F46E5,#9333EA);--hero:linear-gradient(120deg,#4F46E5,#9333EA,#6366F1,#4F46E5);--herot:#FFFFFF;--line:#DDE3EE;--glow:rgba(79,70,229,.35);--map:#E2E8F4;--road:#FFFFFF}
.app,.app *{box-sizing:border-box}
.app{position:relative;transition:background .6s ease,color .6s ease}
.app::before,.app::after{content:"";position:absolute;z-index:0;border-radius:50%;filter:blur(70px);pointer-events:none}
.app::before{width:320px;height:320px;left:-130px;top:200px;background:var(--b3);opacity:.24;animation:drift1 14s ease-in-out infinite}
.app::after{width:340px;height:340px;right:-150px;bottom:40px;background:var(--a2);opacity:.26;animation:drift2 18s ease-in-out infinite}
.app > *{position:relative;z-index:1}
.app main::-webkit-scrollbar{display:none}
.app main{scrollbar-width:none}
.app button,.app input{font-family:inherit}
.app button{cursor:pointer;border:none}
.app input{transition:border-color .2s ease,box-shadow .2s ease}
.app input:focus{outline:none;border-color:var(--ac)!important;box-shadow:0 0 0 4px var(--glow)}
.card{backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);box-shadow:0 12px 32px rgba(0,0,0,.22),inset 0 1px 0 rgba(255,255,255,.12);transition:background .6s ease,border-color .6s ease}
.hero{background-size:300% 300%!important;animation:heroShift 12s ease infinite;box-shadow:0 14px 40px var(--glow)}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,255,255,.6) 1px,transparent 1.5px);background-size:26px 26px;opacity:.22;animation:stars 22s linear infinite;pointer-events:none}
.app button[style*="background: var(--ac)"]{background-image:var(--grad)!important;box-shadow:0 8px 22px var(--glow);position:relative;overflow:hidden}
.app button[style*="background: var(--ac)"]::after,.bar::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);animation:shine 3.2s ease-in-out infinite;pointer-events:none}
.bar{position:relative;overflow:hidden;background-image:var(--grad)!important;box-shadow:0 0 12px var(--glow);transition:width .6s cubic-bezier(.2,.9,.3,1)}
.app nav{backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-radius:22px 22px 0 0;box-shadow:0 -10px 30px rgba(0,0,0,.25)}
.app nav button{border-radius:16px;transition:transform .25s ease,background .25s ease,color .25s ease}
.app nav button[aria-pressed="true"]{background:var(--line)!important;transform:translateY(-3px)}
.app nav button[aria-pressed="true"] svg{filter:drop-shadow(0 0 8px var(--glow))}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(90px,-120px) scale(1.25)}}
@keyframes drift2{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-80px,-160px) scale(.8)}}
@keyframes heroShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes stars{from{background-position:0 0}to{background-position:260px 130px}}
@keyframes shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
@keyframes floatA{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-14px,12px) scale(1.15)}}
@keyframes floatB{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(12px,-10px) scale(.88)}}
@keyframes rise{from{opacity:0;transform:translateY(22px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes pop{0%{transform:scale(.6) rotate(-12deg)}70%{transform:scale(1.08) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes hover{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 var(--glow)}50%{box-shadow:0 0 0 8px transparent}}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@keyframes ring{0%{box-shadow:0 0 0 0 var(--glow)}100%{box-shadow:0 0 0 14px transparent}}
.blobA{animation:floatA 7s ease-in-out infinite;filter:blur(6px)}
.blobB{animation:floatB 9s ease-in-out infinite;filter:blur(6px)}
.screen > *{animation:rise .5s cubic-bezier(.2,.8,.2,1) both}
.screen > *:nth-child(2){animation-delay:.07s}
.screen > *:nth-child(3){animation-delay:.14s}
.screen > *:nth-child(4){animation-delay:.21s}
.screen > *:nth-child(5){animation-delay:.28s}
.logo{animation:pop .5s ease both,hover 4s ease-in-out .6s infinite;filter:drop-shadow(0 8px 16px var(--glow))}
.dot{animation:pulse 2s ease-in-out infinite}
.pin{animation:bob 2.6s ease-in-out infinite,ring 2.2s ease-out infinite}
.av{transition:background .4s ease}
.press{transition:transform .15s ease,box-shadow .2s ease}
.press:active{transform:scale(.94)}
@media (prefers-reduced-motion:reduce){.app::before,.app::after,.hero,.hero::before,.blobA,.blobB,.screen > *,.logo,.dot,.pin,.bar::after,.app button::after{animation:none!important}}
@keyframes point{0%,100%{transform:translateY(0)}50%{transform:translateY(12px)}}
.pointer{animation:point 1.1s ease-in-out infinite}