:root{--bg:#f6f4ff;--tx:#14172b;--mu:#5d6285;--cd:rgba(255,255,255,.72);--bd:rgba(80,70,160,.16);--p:#6a4cff;--m:#00b98a;--a:#ff9a1f;--sh:0 20px 50px -20px rgba(70,50,200,.3)}
:root[data-t=dark]{--bg:#0b1020;--tx:#eef0ff;--mu:#9aa0c7;--cd:rgba(26,32,66,.6);--bd:rgba(150,140,255,.18);--p:#8b73ff;--m:#2ee6a6;--a:#ffb547;--sh:0 20px 60px -20px rgba(0,0,0,.7)}
*{box-sizing:border-box;margin:0}html{scroll-behavior:smooth}
body{font:16px/1.65 'DM Sans',system-ui,sans-serif;background:var(--bg);color:var(--tx);overflow-x:hidden}
.bg{position:fixed;inset:0;z-index:-1;background:radial-gradient(600px 400px at 10% -5%,color-mix(in srgb,var(--p) 35%,transparent),transparent),radial-gradient(500px 400px at 95% 10%,color-mix(in srgb,var(--m) 25%,transparent),transparent),radial-gradient(500px 400px at 50% 110%,color-mix(in srgb,var(--a) 18%,transparent),transparent)}
a{color:var(--p)}h1,h2,h3,.logo{font-family:Sora,sans-serif;line-height:1.2}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:18px;padding:12px max(18px,calc((100vw - 1140px)/2));backdrop-filter:blur(16px);background:color-mix(in srgb,var(--bg) 70%,transparent);border-bottom:1px solid var(--bd)}
.logo{font-weight:800;font-size:20px;text-decoration:none;color:var(--tx);display:inline-flex;align-items:center;gap:8px}.logo b{color:var(--p)}
.lg{display:grid;place-items:center;width:32px;height:32px;border-radius:10px;background:linear-gradient(135deg,var(--p),var(--m));color:#fff;font-size:20px}
#nav{margin-left:auto;display:flex;gap:6px}#nav a{padding:8px 12px;border-radius:10px;text-decoration:none;color:var(--mu);font-weight:500}#nav a:hover{background:var(--cd);color:var(--tx)}
button{font:inherit;cursor:pointer}#theme,#burger{border:1px solid var(--bd);background:var(--cd);color:var(--tx);border-radius:10px;width:38px;height:38px}#burger{display:none}
.wrap{max-width:1140px;margin:0 auto;padding:0 18px}
.hero{text-align:center;padding:72px 18px 36px;max-width:820px;margin:auto}
.pill{display:inline-block;padding:6px 14px;border:1px solid var(--bd);border-radius:99px;background:var(--cd);color:var(--mu);font-size:14px;margin-bottom:18px}
.hero h1{font-size:clamp(34px,6vw,62px);font-weight:800;letter-spacing:-.02em}
.hero h1 span{background:linear-gradient(90deg,var(--p),var(--m),var(--a));background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fl 6s ease-in-out infinite alternate}
@keyframes fl{to{background-position:100% 0}}
.sub{color:var(--mu);font-size:18px;margin:14px auto;max-width:620px}.sub.left{margin-left:0}
.search input{width:100%;max-width:560px;padding:16px 20px;border-radius:16px;border:1px solid var(--bd);background:var(--cd);color:var(--tx);font-size:16px;box-shadow:var(--sh);backdrop-filter:blur(10px)}
input:focus,select:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--p);outline-offset:2px}
.sec{margin:42px 0 16px;font-size:26px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.card{display:block;padding:20px;border-radius:20px;background:var(--cd);border:1px solid var(--bd);text-decoration:none;color:var(--tx);backdrop-filter:blur(12px);transition:transform .25s,box-shadow .25s,border-color .25s}
.card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--p)}
.card i{font-style:normal;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,color-mix(in srgb,var(--p) 25%,transparent),color-mix(in srgb,var(--m) 25%,transparent));font-size:22px;margin-bottom:12px}
.card h3{font-size:18px;margin-bottom:4px}.card p{color:var(--mu);font-size:14.5px}.card.sm{padding:14px;display:flex;gap:12px;align-items:center}.card.sm i{margin:0;width:38px;height:38px}.card.sm h3{font-size:15px;margin:0}
.ad{min-height:0;margin:26px auto;max-width:970px;text-align:center}
.crumb{padding:22px 0 6px;color:var(--mu);font-size:14px}.crumb a{text-decoration:none}
.ph{font-size:clamp(28px,4.5vw,42px);font-weight:800}
.tool{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;margin-top:18px}
.tool form,.res{padding:24px;border-radius:24px;background:var(--cd);border:1px solid var(--bd);backdrop-filter:blur(14px);box-shadow:var(--sh)}
.fl{display:grid;gap:16px}label{display:grid;gap:6px;font-weight:500;font-size:14.5px;color:var(--mu)}
input,select{width:100%;padding:13px 14px;border-radius:12px;border:1px solid var(--bd);background:color-mix(in srgb,var(--bg) 70%,transparent);color:var(--tx);font:inherit;font-size:16px}
.res{background:linear-gradient(160deg,color-mix(in srgb,var(--p) 22%,var(--cd)),var(--cd))}
.big{font:800 clamp(30px,5vw,44px) Sora,sans-serif;background:linear-gradient(90deg,var(--p),var(--m));-webkit-background-clip:text;background-clip:text;color:transparent;word-break:break-all}
.big small{display:block;font:500 14px 'DM Sans';color:var(--mu);-webkit-text-fill-color:var(--mu)}
.row{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px dashed var(--bd)}.row:last-child{border:0}.row b{text-align:right}
.bar{height:10px;border-radius:9px;background:var(--a);overflow:hidden;margin:14px 0 4px}.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--p),var(--m));transition:width .5s}
.prose{max-width:820px;margin:36px auto}.prose.narrow{margin-top:30px}.prose h2{margin:28px 0 8px;font-size:22px}.prose p{margin:10px 0;color:var(--mu)}.prose .fo{padding:14px 16px;border-left:4px solid var(--m);background:var(--cd);border-radius:0 12px 12px 0;color:var(--tx);font-family:monospace;font-size:14.5px}
details{border:1px solid var(--bd);border-radius:14px;padding:12px 16px;margin:10px 0;background:var(--cd)}summary{cursor:pointer;font-weight:700}
.disp{font:700 28px monospace;text-align:right;margin-bottom:12px}.keys{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.keys button{padding:14px 0;border-radius:12px;border:1px solid var(--bd);background:var(--cd);color:var(--tx);font-size:17px;font-weight:600}.keys button:hover{border-color:var(--p)}.keys .op{background:var(--p);color:#fff;border:0}
footer{margin-top:60px;border-top:1px solid var(--bd);background:var(--cd);backdrop-filter:blur(12px);padding:36px 18px 20px}.fw{max-width:1140px;margin:auto;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
footer h4{margin-bottom:8px}footer a:not(.logo){display:block;color:var(--mu);text-decoration:none;padding:3px 0}footer a:hover{color:var(--p)}footer p{color:var(--mu);margin-top:10px;font-size:14.5px}.cp{text-align:center;max-width:1140px;margin:24px auto 0;border-top:1px solid var(--bd);padding-top:16px}
.ck{position:fixed;left:14px;right:14px;bottom:14px;max-width:620px;margin:auto;z-index:50;display:flex;gap:14px;align-items:center;padding:14px 18px;border-radius:16px;background:var(--bg);border:1px solid var(--p);box-shadow:var(--sh);font-size:14px}.ck button{background:var(--p);color:#fff;border:0;border-radius:10px;padding:9px 16px;font-weight:700}
@media(max-width:820px){.tool,.fw{grid-template-columns:1fr}#burger{display:block;margin-left:auto}#theme{order:2}#nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);padding:10px 18px;border-bottom:1px solid var(--bd)}#nav.o{display:flex}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}