:root{--bg:#e9eff6;--sf:#fff;--sf2:#f2f5f9;--ink:#101828;--mut:#667085;--ln:#dbe3ee;--dk:#111a2c;--doc:#ff8f70;--hit:#4fd1b8;--txt:#ffcb4d;--uti:#7fb0ff;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media(prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0a0f18;--sf:#141b28;--sf2:#1c2536;--ink:#eef2f8;--mut:#98a2b3;--ln:#26314a;--dk:#1d283e}}
:root[data-theme=dark]{--bg:#0a0f18;--sf:#141b28;--sf2:#1c2536;--ink:#eef2f8;--mut:#98a2b3;--ln:#26314a;--dk:#1d283e}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:500 15px/1.55 "Plus Jakarta Sans",system-ui,sans-serif;min-height:100vh;overflow-x:hidden}
h1,h2,h3,.big,.stat b{font-family:Sora,"Plus Jakarta Sans",sans-serif;letter-spacing:-.02em}
a{color:inherit;text-decoration:none}
.themeing *{transition:background-color .55s,color .55s,border-color .55s,fill .55s,stroke .55s!important}
.c-doc{--c:var(--doc)}.c-hit{--c:var(--hit)}.c-txt{--c:var(--txt)}.c-uti{--c:var(--uti)}.c-all{--c:var(--ink)}
.app{max-width:1060px;margin:0 auto;padding:18px 18px 40px}
.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;animation:rise .7s both}
.brand{display:flex;align-items:center;gap:10px;font:700 18px Sora,sans-serif}
.brand i{width:42px;height:42px;border-radius:50%;background:var(--ink);color:var(--bg);display:grid;place-items:center;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.brand:hover i{transform:rotate(-14deg) scale(1.08)}
.iconbtn{width:44px;height:44px;border-radius:50%;border:0;background:var(--sf);color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .3s;flex:none}
.iconbtn:hover{transform:scale(1.1)}.iconbtn:active{transform:scale(.88)}
#th{background:var(--ink);color:var(--bg);position:relative;overflow:hidden}
#th svg{position:absolute;transition:transform .6s cubic-bezier(.5,1.5,.5,1),opacity .4s}
.moon{transform:rotate(-90deg) scale(.3);opacity:0}
[data-theme=dark] .sun{transform:rotate(90deg) scale(.3);opacity:0}
[data-theme=dark] .moon{transform:none;opacity:1}
:focus-visible{outline:3px solid var(--uti);outline-offset:2px}
@keyframes rise{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
@keyframes grow{from{height:6%}to{height:var(--h)}}
@keyframes breathe{0%,100%{transform:scaleY(1)}50%{transform:scaleY(.82)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-8px) rotate(3deg)}}
@keyframes pop{0%{transform:scale(.92);opacity:.4}60%{transform:scale(1.03)}100%{transform:none;opacity:1}}
@keyframes slidein{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero{background:var(--dk);color:#fff;border-radius:34px;padding:30px;display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap;position:relative;overflow:hidden;animation:rise .8s .1s both;border:1px solid var(--ln)}
.hl{flex:1 1 320px;display:flex;flex-direction:column;gap:6px}
.hl p{color:#a9b4c8;font-size:14px}.hl .sub{max-width:360px;margin-bottom:12px}
.big{font-size:76px;font-weight:700;line-height:1}
.search{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.1);border-radius:999px;padding:0 18px;height:52px;transition:background .3s,box-shadow .3s,transform .3s}
.search:focus-within{background:rgba(255,255,255,.18);box-shadow:0 0 0 3px var(--uti);transform:scale(1.015)}
.search input{flex:1;background:none;border:0;color:#fff;font:inherit;outline:0;min-width:0}
.search input::placeholder{color:#9aa7bf}
.bars{display:flex;gap:10px;align-items:flex-end;height:190px;flex:0 1 330px;min-width:240px}
.bars i{flex:1;border-radius:18px 18px 8px 8px;height:var(--h);animation:grow 1.2s calc(.3s + var(--i)*.09s) cubic-bezier(.2,.9,.3,1) backwards,breathe 4s calc(var(--i)*.4s) ease-in-out infinite;transform-origin:bottom;background:repeating-linear-gradient(135deg,rgba(0,0,0,.18) 0 2px,transparent 2px 7px),var(--c)}
.bars .c0{--c:var(--doc)}.bars .c1{--c:var(--hit)}.bars .c2{--c:var(--txt)}.bars .c3{--c:var(--uti)}
.soc{flex:0 1 350px;min-width:250px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.soc h2{font-size:24px}.soc p{color:#a9b4c8;font-size:14px;margin-bottom:6px}
.sl{display:flex;align-items:center;gap:12px;background:rgba(255,255,255,.08);border-radius:24px;padding:10px 12px 10px 10px;animation:rise .7s calc(.45s + var(--i)*.12s) cubic-bezier(.2,.8,.2,1) both;transition:transform .4s cubic-bezier(.3,1.6,.5,1),background .3s}
.sl:hover{transform:translateX(8px) scale(1.02);background:rgba(255,255,255,.17)}.sl:active{transform:scale(.97)}
.sl i{width:48px;height:48px;border-radius:50%;background:var(--b);display:grid;place-items:center;flex:none;position:relative;box-shadow:0 0 0 2px rgba(255,255,255,.22);transition:transform .5s cubic-bezier(.3,1.7,.5,1)}
.sl:hover i{transform:rotate(-12deg) scale(1.12)}
.sl i::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--b);animation:ping 2.4s calc(var(--i)*.5s) ease-out infinite}
@keyframes ping{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.65);opacity:0}}
.sl div{min-width:0}.sl b{display:block;font:700 15px Sora,sans-serif}.sl small{color:#a9b4c8;font-size:12.5px}
.sl .fb{margin-left:auto;background:#fff;color:#101828;border-radius:999px;padding:7px 14px;font-weight:700;font-size:13px;display:flex;align-items:center;gap:4px;flex:none}
.sl .fb .ic{transition:transform .4s cubic-bezier(.3,1.6,.5,1)}.sl:hover .fb .ic{transform:rotate(45deg)}
.pills{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 18px;animation:rise .7s .25s both}
.pill{border:0;background:var(--sf);color:var(--ink);font:600 14px inherit;font-family:inherit;border-radius:999px;padding:8px 8px 8px 18px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:transform .35s cubic-bezier(.3,1.6,.5,1),background .35s,color .35s}
.pill span{min-width:28px;height:28px;border-radius:50%;background:var(--sf2);display:grid;place-items:center;font-size:13px;transition:background .35s,color .35s}
.pill:hover{transform:translateY(-3px)}.pill:active{transform:scale(.94)}
.pill.on{background:var(--c);color:#101828}.pill.c-all.on{color:var(--bg)}.pill.on span{background:#101828;color:#fff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{position:relative;background:color-mix(in srgb,var(--c) 88%,#fff);color:#101828;border-radius:30px;padding:20px 20px 22px;min-height:190px;display:flex;flex-direction:column;gap:6px;animation:rise .7s calc(.3s + var(--i)*70ms) cubic-bezier(.2,.8,.2,1) both;transition:transform .45s cubic-bezier(.3,1.5,.5,1),box-shadow .45s;overflow:hidden}
.card::after{content:"";position:absolute;inset:auto -30% -60% auto;width:70%;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.28);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.card:hover{transform:translateY(-8px) rotate(-.6deg);box-shadow:0 22px 40px -18px color-mix(in srgb,var(--c) 80%,#000)}
.card:hover::after{transform:scale(1.7)}.card:active{transform:scale(.97)}
.ct{display:flex;justify-content:space-between;align-items:center;margin-bottom:auto;padding-bottom:18px}
.ico{width:50px;height:50px;border-radius:50%;background:#101828;color:#fff;display:grid;place-items:center;transition:transform .6s cubic-bezier(.3,1.6,.5,1)}
.card:hover .ico{transform:rotate(-12deg) scale(1.12)}
.tag{background:rgba(255,255,255,.6);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700}
.card h3{font-size:19px;position:relative;z-index:1}.card p{font-size:13.5px;opacity:.78;max-width:80%;position:relative;z-index:1}
.go{position:absolute;right:16px;bottom:16px;width:42px;height:42px;border-radius:50%;background:#101828;color:#fff;display:grid;place-items:center;z-index:1;transition:transform .5s cubic-bezier(.3,1.6,.5,1)}
.card:hover .go{transform:rotate(45deg) scale(1.1)}
.empty{grid-column:1/-1;text-align:center;color:var(--mut);padding:40px;animation:pop .5s both}
.tp{animation:none}
.th{background:color-mix(in srgb,var(--c) 88%,#fff);color:#101828;border-radius:34px;padding:20px 24px;display:flex;align-items:center;gap:16px;position:relative;overflow:hidden}
.th .iconbtn{background:#101828;color:#fff}
.th h1{font-size:26px;line-height:1.15}.th p{font-size:14px;opacity:.78;max-width:420px}
.bigico{margin-left:auto;width:78px;height:78px;border-radius:26px;background:#101828;color:#fff;display:grid;place-items:center;animation:float 5s ease-in-out infinite;flex:none}
.panel{background:var(--sf);border-radius:34px;padding:26px;margin-top:14px;display:flex;flex-direction:column;gap:18px;animation:rise .7s .15s both}
.panel h3{font-size:17px}
.how{margin-top:14px;background:var(--sf2);border-radius:26px;padding:18px 22px;color:var(--mut);animation:rise .7s .3s both}
.how b{color:var(--ink);font-family:Sora,sans-serif}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.fld{display:flex;flex-direction:column;gap:8px}.fld label{font-size:13.5px;color:var(--mut);font-weight:600}.fld label b{color:var(--ink)}
input[type=number],input[type=date],input[type=text],select,textarea{background:var(--sf2);color:var(--ink);border:2px solid transparent;border-radius:18px;padding:13px 16px;font:inherit;width:100%;outline:0;transition:border-color .3s,box-shadow .3s,transform .3s,background .3s}
input:not([type=range]):focus,select:focus,textarea:focus{border-color:var(--c);box-shadow:0 0 0 5px color-mix(in srgb,var(--c) 28%,transparent);transform:translateY(-2px)}
textarea{resize:vertical;min-height:150px}
input[type=range]{width:100%;accent-color:var(--c);height:28px;cursor:pointer}
.btn{border:0;background:var(--ink);color:var(--bg);font:700 15px inherit;font-family:inherit;height:52px;padding:0 26px;border-radius:999px;cursor:pointer;display:inline-flex;gap:8px;align-items:center;justify-content:center;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .3s,background .3s;animation:pop .5s both}
.btn:hover:not(:disabled){transform:translateY(-3px) scale(1.03)}.btn:active:not(:disabled){transform:scale(.94)}
.btn:disabled{opacity:.35;cursor:not-allowed}.btn.ghost{background:var(--sf2);color:var(--ink)}
.btn.busy::before{content:"";width:16px;height:16px;border:2.5px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
.btn:hover .ic{animation:spin .8s}
.acts{display:flex;gap:12px;flex-wrap:wrap}
.drop{border:2.5px dashed color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent);border-radius:28px;padding:34px 18px;display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;cursor:pointer;transition:transform .4s cubic-bezier(.3,1.5,.5,1),background .3s}
.drop:hover,.drop.over{transform:scale(1.02);background:color-mix(in srgb,var(--c) 24%,transparent)}
.drop .ic{color:var(--c);filter:brightness(.85);animation:float 3.5s ease-in-out infinite}.drop small{color:var(--mut)}
.list{list-style:none;padding:0;display:flex;flex-direction:column;gap:8px}
.list li{background:var(--sf2);border-radius:16px;padding:10px 16px;display:flex;justify-content:space-between;gap:10px;animation:slidein .45s calc(var(--i)*60ms) both}
.list li span{color:var(--mut);font-size:13px;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.stat{background:color-mix(in srgb,var(--c) 26%,var(--sf));border-radius:24px;padding:16px 18px;display:flex;flex-direction:column;gap:2px;animation:pop .55s both;transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.stat:hover{transform:translateY(-4px)}.stat span{font-size:13px;color:var(--mut)}.stat b{font-size:26px;overflow-wrap:anywhere}
.qrbox{background:#fff;border-radius:26px;padding:14px;width:min(100%,280px);margin:auto;color:#555;text-align:center;animation:pop .5s both}
.qrbox svg{width:100%;height:auto;display:block}
.pw{background:var(--sf2);border-radius:26px;padding:22px;display:flex;flex-direction:column;gap:12px}
.pw code{font:600 24px/1.3 ui-monospace,Menlo,monospace;overflow-wrap:anywhere;min-height:2.6em}
.bar{height:10px;border-radius:9px;background:var(--ln);overflow:hidden}.bar i{display:block;height:100%;width:0;border-radius:9px;transition:width .7s cubic-bezier(.2,.9,.3,1),background .7s}
.pw small{color:var(--mut)}
.chips{display:flex;gap:10px;flex-wrap:wrap}.chip span{display:flex;gap:6px;align-items:center;padding:10px 18px;border-radius:999px;background:var(--sf2);cursor:pointer;font-weight:600;transition:background .3s,transform .3s cubic-bezier(.3,1.6,.5,1),color .3s}
.chip .ic{width:0;opacity:0;transition:width .3s,opacity .3s}.chip input:checked+span{background:var(--c);color:#101828}.chip input:checked+span .ic{width:16px;opacity:1}
.chip span:active{transform:scale(.92)}
.swap{align-self:end}.row .swap{display:grid;place-items:center}
.qs{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:10px}
.qs button{border:2px solid transparent;background:var(--sf2);border-radius:18px;padding:6px;cursor:pointer;aspect-ratio:1;display:grid;place-items:center;animation:pop .5s calc(var(--i)*25ms) both;transition:transform .35s cubic-bezier(.3,1.7,.5,1),border-color .3s,box-shadow .3s}
.qs button:hover{transform:translateY(-4px) scale(1.06)}.qs button:active{transform:scale(.9)}
.qs button.on{border-color:var(--c);box-shadow:0 0 0 4px color-mix(in srgb,var(--c) 30%,transparent);transform:scale(1.08)}
.qs svg{width:100%;height:100%;border-radius:10px;display:block}
.qsn{color:var(--mut);font-size:13.5px;font-weight:600}.qsn b{color:var(--ink)}
.msg{color:var(--mut);text-align:center}
.foot{margin-top:40px;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
.foot div{background:var(--sf);border-radius:26px;padding:20px;animation:rise .7s both;transition:transform .4s cubic-bezier(.3,1.5,.5,1)}
.foot div:hover{transform:translateY(-5px)}.foot b{display:flex;gap:8px;align-items:center;font-family:Sora,sans-serif;margin-bottom:6px}.foot p{color:var(--mut);font-size:14px}
.dock{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--dk);border:1px solid var(--ln);border-radius:999px;padding:8px;display:flex;gap:8px;z-index:20;box-shadow:0 18px 40px -12px rgba(0,0,0,.45);animation:dockin .9s .5s cubic-bezier(.2,1.2,.3,1) both}
@keyframes dockin{from{transform:translate(-50%,120px)}to{transform:translate(-50%,0)}}
.dock button{width:56px;height:52px;border-radius:999px;border:0;background:transparent;color:#cfd7e6;cursor:pointer;display:grid;place-items:center;transition:background .35s,color .35s,transform .35s cubic-bezier(.3,1.7,.5,1)}
.dock button:hover{transform:translateY(-4px)}.dock button:active{transform:scale(.85)}.dock .on{background:#fff;color:#101828}
.toast{position:fixed;left:50%;bottom:28px;transform:translate(-50%,30px);background:var(--ink);color:var(--bg);padding:12px 22px;border-radius:999px;font-weight:700;opacity:0;pointer-events:none;transition:all .45s cubic-bezier(.3,1.6,.5,1);z-index:30}
.toast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:560px){.big{font-size:60px}.hero{padding:22px}.th{flex-wrap:wrap}.bigico{display:none}.panel{padding:18px}.pw code{font-size:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
@view-transition{navigation:auto}
.seo{margin-top:14px;background:var(--sf);border-radius:30px;padding:24px;display:flex;flex-direction:column;gap:12px;animation:rise .7s .35s both}
.seo h2{font-size:19px}.seo p{color:var(--mut)}
.seo details{background:var(--sf2);border-radius:18px;padding:14px 18px;transition:background .3s}
.seo summary{cursor:pointer;font-weight:700}.seo details p{margin-top:8px;animation:slidein .4s both}
.rel{display:flex;flex-wrap:wrap;gap:8px}.rel .pill{padding:9px 18px;font-size:13.5px}
.panel.txt p,.panel.txt li{color:var(--mut)}.panel.txt h2{font-size:18px}.panel.txt ul{padding-left:20px;display:flex;flex-direction:column;gap:6px}
.panel.txt a:not(.btn),.foot a{color:var(--ink);font-weight:700;text-decoration:underline}
.foot .copy{grid-column:1/-1;text-align:center;font-size:13px}
.home0 ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:8px}