:root{--bg:#07060b;--card:rgba(255,255,255,.045);--bd:rgba(255,255,255,.09);--tx:#ecebf3;--mu:#9a97ad;--a:#9146ff;--b:#ff4fd8;--c:#3ee6ff}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}body{font-family:Inter,system-ui,Segoe UI,sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;animation:float 18s ease-in-out infinite alternate}
.o1{width:520px;height:520px;background:var(--a);top:-120px;left:-100px}.o2{width:420px;height:420px;background:var(--b);top:30%;right:-140px;animation-delay:-6s;opacity:.35}.o3{width:380px;height:380px;background:var(--c);bottom:-160px;left:30%;animation-delay:-12s;opacity:.22}
@keyframes float{to{transform:translate(80px,60px) scale(1.15)}}
.grid{position:absolute;inset:0;background-image:linear-gradient(var(--bd) 1px,transparent 1px),linear-gradient(90deg,var(--bd) 1px,transparent 1px);background-size:64px 64px;mask-image:radial-gradient(ellipse at 50% 0,#000 20%,transparent 70%);opacity:.5}
.nav{position:sticky;top:14px;z-index:9;margin:14px auto;max-width:1100px;display:flex;align-items:center;gap:20px;padding:10px 14px 10px 22px;border:1px solid var(--bd);border-radius:999px;background:rgba(12,10,20,.6);backdrop-filter:blur(16px)}
.logo{font-weight:800;font-size:20px;color:var(--tx);text-decoration:none}.logo span{color:var(--a)}.links{display:flex;gap:18px;margin-left:auto}.links a{color:var(--mu);text-decoration:none;font-size:14px;transition:.2s}.links a:hover{color:var(--tx)}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;background:linear-gradient(135deg,var(--a),var(--b));color:#fff;font-weight:600;text-decoration:none;border:0;cursor:pointer;font-size:15px;transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s;box-shadow:0 8px 30px -8px var(--a)}
.btn:hover{transform:translateY(-2px) scale(1.03);box-shadow:0 14px 40px -8px var(--b)}.btn.sm{padding:9px 16px;font-size:13px}.btn.ghost{background:var(--card);border:1px solid var(--bd);box-shadow:none}
.hero{text-align:center;padding:90px 20px 40px;max-width:1000px;margin:auto}.pill{display:inline-block;padding:7px 14px;border:1px solid var(--bd);border-radius:999px;background:var(--card);font-size:13px;color:var(--mu)}
h1{font-size:clamp(40px,7.5vw,84px);line-height:1.02;letter-spacing:-.04em;margin:22px 0;font-weight:800}.grad{background:linear-gradient(90deg,var(--a),var(--b),var(--c),var(--a));background-size:300%;-webkit-background-clip:text;color:transparent;animation:sh 8s linear infinite}@keyframes sh{to{background-position:300%}}
.hero p{color:var(--mu);font-size:18px;max-width:620px;margin:auto;line-height:1.6}.cta{display:flex;gap:12px;justify-content:center;margin:32px 0 50px;flex-wrap:wrap}
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 15%,#000 85%,transparent)}.track{display:flex;gap:12px;width:max-content;animation:mq 40s linear infinite}.track span{padding:10px 16px;border:1px solid var(--bd);border-radius:12px;background:var(--card);white-space:nowrap;font-size:14px;color:var(--mu)}@keyframes mq{to{transform:translateX(-50%)}}
.tools-grid{max-width:1100px;margin:40px auto;padding:0 20px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tc{position:relative;padding:22px;border:1px solid var(--bd);border-radius:20px;background:var(--card);text-decoration:none;color:var(--tx);overflow:hidden;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s}
.tc:before{content:"";position:absolute;inset:0;background:radial-gradient(300px circle at var(--x,50%) var(--y,50%),rgba(145,70,255,.25),transparent 60%);opacity:0;transition:.3s}.tc:hover:before{opacity:1}.tc:hover{transform:translateY(-4px);border-color:rgba(145,70,255,.5)}
.tc i{font-style:normal;font-size:26px}.tc h3{margin:12px 0 6px;font-size:17px}.tc p{color:var(--mu);font-size:14px;line-height:1.5}
.tool{max-width:1100px;margin:90px auto;padding:0 20px;scroll-margin-top:90px}.tool h2{font-size:clamp(28px,4vw,42px);letter-spacing:-.03em}.tool .sub{color:var(--mu);margin:8px 0 24px}
.panel{display:grid;grid-template-columns:340px 1fr;gap:18px}.box{border:1px solid var(--bd);border-radius:22px;background:rgba(14,12,22,.7);backdrop-filter:blur(10px);padding:20px}
label{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mu);margin:14px 0 6px}label:first-child{margin-top:0}
input,select{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--bd);background:rgba(255,255,255,.04);color:var(--tx);font-size:15px;outline:none;transition:.2s}input:focus,select:focus{border-color:var(--a);box-shadow:0 0 0 3px rgba(145,70,255,.25)}select option{background:#15121f}
.chips{display:flex;flex-wrap:wrap;gap:6px}.chip{padding:7px 12px;border-radius:999px;border:1px solid var(--bd);background:transparent;color:var(--mu);cursor:pointer;font-size:13px;transition:.2s}.chip.on{background:rgba(145,70,255,.2);border-color:var(--a);color:#fff}
.box .btn{width:100%;justify-content:center;margin-top:18px}.row{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-bottom:12px;color:var(--mu);font-size:13px}
.res{display:grid;gap:8px}.res.cols{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.it{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--bd);border-radius:14px;background:var(--card);animation:pop .5s cubic-bezier(.2,.8,.2,1) both;transition:.2s}.it:hover{border-color:rgba(145,70,255,.5);background:rgba(145,70,255,.08)}
.it span{flex:1;font-size:15px;word-break:break-word}.it small{color:var(--mu);font-size:11px}.it button{background:none;border:0;color:var(--mu);cursor:pointer;font-size:15px;padding:4px}.it button:hover{color:#fff}.it .fav.on{color:#ffcc33}
@keyframes pop{from{opacity:0;transform:translateY(10px) scale(.98)}}.empty{color:var(--mu);padding:40px;text-align:center;border:1px dashed var(--bd);border-radius:14px}
.mini{background:var(--card);border:1px solid var(--bd);color:var(--tx);padding:7px 12px;border-radius:999px;cursor:pointer;font-size:12px}
.reveal{opacity:0;transform:translateY(24px);filter:blur(6px);transition:1s cubic-bezier(.2,.8,.2,1)}.reveal.in{opacity:1;transform:none;filter:none}
.toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,80px);background:#fff;color:#000;padding:10px 18px;border-radius:999px;font-weight:600;transition:.35s cubic-bezier(.2,.8,.2,1)}.toast.show{transform:translate(-50%,0)}
footer{text-align:center;color:var(--mu);padding:60px 20px;font-size:13px;border-top:1px solid var(--bd)}
@media(max-width:860px){.links{display:none}.panel{grid-template-columns:1fr}.tools-grid{grid-template-columns:1fr 1fr}.hero{padding-top:50px}}@media(max-width:520px){.tools-grid{grid-template-columns:1fr}.nav{margin:10px}}
.switch{position:sticky;top:76px;z-index:8;max-width:1100px;margin:30px auto 0;padding:0 20px}.sw{display:flex;gap:6px;overflow-x:auto;padding:8px;border:1px solid var(--bd);border-radius:18px;background:rgba(12,10,20,.75);backdrop-filter:blur(16px);scrollbar-width:none}.sw::-webkit-scrollbar{display:none}
.sw button{flex:none;padding:9px 14px;border-radius:12px;border:0;background:transparent;color:var(--mu);cursor:pointer;font-size:14px;transition:.25s}.sw button:hover{color:#fff}.sw button.on{background:linear-gradient(135deg,rgba(145,70,255,.35),rgba(255,79,216,.25));color:#fff}
.tool{display:none;margin-top:40px}.tool.act{display:block;animation:pop .6s cubic-bezier(.2,.8,.2,1)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:8px}.two label{margin-top:8px}
.ck{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--tx);text-transform:none;letter-spacing:0;margin:8px 0}.ck input{width:auto}
input[type=range]{padding:0;accent-color:var(--a)}.rv{float:right;color:var(--tx)}
.it .tag{font-size:10px;color:var(--a);border:1px solid rgba(145,70,255,.4);padding:2px 6px;border-radius:6px}.it pre{flex:1;white-space:pre-wrap;font:inherit;font-size:14px}
.acts{display:flex;gap:6px}.box details summary{cursor:pointer;color:var(--mu);font-size:13px;margin-top:14px}
@media(max-width:860px){.switch{top:70px}.two{grid-template-columns:1fr 1fr}}
body{padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}
.nav{top:calc(14px + env(safe-area-inset-top))}.toast{bottom:calc(24px + env(safe-area-inset-bottom))}
#inst{margin-left:auto}.links+#inst{margin-left:0}
.ios{position:fixed;inset:0;z-index:20;background:rgba(0,0,0,.6);backdrop-filter:blur(6px);display:flex;align-items:flex-end;justify-content:center;padding:20px calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) 20px}.ios[hidden]{display:none}
.iosb{max-width:420px;width:100%;background:#15121f;border:1px solid var(--bd);border-radius:22px;padding:22px;animation:pop .4s}.iosb p{color:var(--mu);line-height:1.9;margin:10px 0 4px}.iosb b{color:#fff}.iosb .btn{width:100%;justify-content:center;margin-top:12px}
@media(max-width:520px){#inst{padding:9px 12px;font-size:12px}.nav .btn.sm:last-child{display:none}}
.aick{margin-top:16px;padding:10px 12px;border:1px solid rgba(145,70,255,.4);border-radius:12px;background:rgba(145,70,255,.08)}.aick small{color:var(--mu)}
.sk{height:46px;border-radius:14px;background:linear-gradient(90deg,var(--card),rgba(145,70,255,.18),var(--card));background-size:200% 100%;animation:skl 1.2s linear infinite}@keyframes skl{to{background-position:-200% 0}}
.btn:disabled{opacity:.7;cursor:wait}