:root{--ink:#1b1340;--bg:#f5f2ff;--card:#fff;--coral:#ff5d73;--sun:#ffc233;--mint:#19c9a0;--sky:#2d9cff;--violet:#7c4dff;--mut:#5d5784}
*{box-sizing:border-box;margin:0}
body{font:16px/1.6 'DM Sans',system-ui,sans-serif;color:var(--ink);background:var(--bg)}
h1,h2,h3,.logo{font-family:'Bricolage Grotesque','DM Sans',sans-serif;line-height:1.1}
a{color:inherit}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
header{background:var(--ink);color:#fff}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-size:26px;font-weight:800;text-decoration:none;letter-spacing:-.5px}
.logo i{font-style:normal;color:var(--sun)}
nav a{margin-left:20px;text-decoration:none;font-weight:500;opacity:.85}
nav a:hover{opacity:1;color:var(--sun)}
.hero{background:linear-gradient(120deg,var(--violet),var(--coral) 60%,var(--sun));color:#fff;padding:64px 0 72px}
.hero h1{font-size:clamp(38px,7vw,72px);font-weight:800;max-width:760px;letter-spacing:-1.5px}
.hero p{font-size:19px;max-width:560px;margin:18px 0 26px;opacity:.95}
.search{width:100%;max-width:480px;padding:15px 20px;border:0;border-radius:999px;font:inherit;font-size:17px;box-shadow:0 6px 0 rgba(27,19,64,.25)}
.search:focus{outline:3px solid var(--ink)}
.chips{display:flex;gap:10px;flex-wrap:wrap;margin:22px 0 0}
.chip{border:2px solid #fff;background:transparent;color:#fff;padding:6px 16px;border-radius:999px;font:inherit;font-weight:500;cursor:pointer}
.chip.on,.chip:hover{background:#fff;color:var(--ink)}
main{padding:36px 0 56px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:18px}
.card{display:block;background:var(--card);border-radius:18px;text-decoration:none;overflow:hidden;border:2px solid var(--ink);box-shadow:0 5px 0 var(--ink);transition:transform .12s}
.card:hover{transform:translateY(-3px)}
.card .top{height:78px;display:flex;align-items:center;padding:0 18px;font:700 28px 'JetBrains Mono',monospace;color:#fff}
.card .body{padding:14px 18px 18px}
.card h3{font-size:19px;margin-bottom:4px}
.card p{font-size:14px;color:var(--mut)}
.c-formatters{background:var(--sky)}.c-converters{background:var(--coral)}.c-generators{background:var(--mint)}.c-encoders{background:var(--violet)}.c-reference{background:#ff8a3d}.c-time{background:var(--sun);color:var(--ink)!important}
.ad{margin:26px 0;min-height:90px;border:2px dashed #c9c1ee;border-radius:12px;display:flex;align-items:center;justify-content:center;color:#a79fd0;font-size:13px}
.tool{background:#fff;border:2px solid var(--ink);border-radius:20px;box-shadow:0 6px 0 var(--ink);padding:26px}
.crumb{font-size:14px;color:var(--mut);margin-bottom:10px}
.tool h1{font-size:clamp(28px,5vw,42px);font-weight:800;margin-bottom:6px}
.sub{color:var(--mut);margin-bottom:6px}
.badge{display:inline-block;background:var(--mint);color:var(--ink);font-size:13px;font-weight:700;padding:3px 12px;border-radius:999px;margin:6px 0 18px}
.io{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.io{grid-template-columns:1fr}nav a{margin-left:12px}}
label{display:block;font-weight:700;font-size:14px;margin-bottom:6px}
textarea,input[type=text],input[type=number]{width:100%;border:2px solid var(--ink);border-radius:12px;padding:12px;font:14px/1.5 'JetBrains Mono',monospace;background:#faf9ff;color:var(--ink)}
textarea{min-height:260px;resize:vertical}
textarea:focus,input:focus{outline:3px solid var(--violet);outline-offset:1px}
.btns{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
button.b{font:700 15px 'DM Sans',sans-serif;border:2px solid var(--ink);background:var(--sun);color:var(--ink);padding:10px 20px;border-radius:12px;cursor:pointer;box-shadow:0 3px 0 var(--ink)}
button.b:active{transform:translateY(2px);box-shadow:none}
button.b.alt{background:var(--coral);color:#fff}
button.b.ghost{background:#fff}
.err{color:#d6204a;font-weight:700;margin-top:8px;min-height:24px}
.opt{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.opt input[type=text]{width:200px}
.perm{display:grid;grid-template-columns:repeat(4,auto);gap:10px 26px;justify-content:start;margin:10px 0}
.perm label{display:flex;gap:8px;align-items:center;margin:0}
.res{font:500 28px 'JetBrains Mono',monospace;background:var(--ink);color:var(--sun);border-radius:12px;padding:14px 20px;display:inline-block;margin:6px 12px 6px 0}
.info{margin-top:34px;max-width:720px}
.info h2{font-size:26px;margin:26px 0 10px}
.info h3{font-size:18px;margin:16px 0 4px}
.rel{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.rel a{background:#fff;border:2px solid var(--ink);border-radius:999px;padding:6px 16px;text-decoration:none;font-weight:500}
.rel a:hover{background:var(--sun)}
.page{background:#fff;border:2px solid var(--ink);border-radius:20px;padding:30px;max-width:760px}
.page h1{font-size:40px;margin-bottom:14px}.page p{margin-bottom:12px}
footer{background:var(--ink);color:#cfc8f5;padding:30px 0;font-size:14px}
footer a{margin-right:18px}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:3px solid var(--violet);outline-offset:2px}

.hero{padding:48px 0 52px}
.hero .stats{font-size:15px;opacity:.9;margin:16px 0 0}
.catnav{position:sticky;top:0;z-index:20;background:#fff;border-bottom:2px solid var(--ink)}
.catnav .wrap{display:flex;gap:8px;overflow-x:auto;padding-top:10px;padding-bottom:10px;scrollbar-width:none}
.catnav button{flex:none;display:flex;align-items:center;gap:8px;border:2px solid var(--ink);background:#fff;border-radius:999px;padding:6px 14px;font:700 14px 'DM Sans',sans-serif;color:var(--ink);cursor:pointer}
.catnav button:hover{background:var(--sun)}
.catnav i{font-style:normal;font-size:12px;background:var(--bg);border-radius:999px;padding:0 8px}
.dot{width:14px;height:14px;border-radius:50%;border:2px solid var(--ink);flex:none;display:inline-block}
.sec{margin-bottom:38px;scroll-margin-top:70px}
.sh{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.sh h2{font-size:28px;font-weight:800}
.sh .cnt{background:var(--ink);color:#fff;border-radius:999px;font-size:13px;font-weight:700;padding:1px 10px}
.sh p{color:var(--mut);flex-basis:100%;margin-top:-2px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.tcard{display:flex;gap:14px;align-items:center;background:#fff;border:2px solid var(--ink);border-radius:16px;padding:12px 14px;text-decoration:none;box-shadow:0 4px 0 var(--ink);transition:transform .12s,background .12s}
.tcard:hover{transform:translateY(-2px);background:#fffbe9}
.gl{flex:none;width:54px;height:54px;border-radius:14px;display:flex;align-items:center;justify-content:center;font:700 16px 'JetBrains Mono',monospace;color:#fff;border:2px solid var(--ink);overflow:hidden}
.tx{display:flex;flex-direction:column;min-width:0}
.tx b{font-size:16px;line-height:1.25}
.tx small{color:var(--mut);font-size:13px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.none{padding:30px 0;color:var(--mut);font-size:18px}
.c-popular{background:var(--sun)}