@import "https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap";:root{--bg1:white;--bg2:#f0f1f5;--bg3:#d0d3da;--bg4:#d6d9df;--bg5:#d5d7dd;--bgt:#ffffff80;--bgt2:#ffffff1a;--p1:#070707;--color1:#148eff;--c1:#21243f;--c2:#343d55;--c3:#3d4355;--c4:#454c5e;--ct:#0000000d;--ct0:#00000005;--blue:#248aff;--f-h:"IBM Plex Sans", sans-serif;--f-b:"IBM Plex Sans", sans-serif;--f-mono:"Jetbrains Mono", monospace;--f-serif:"Noto Serif", serif;--t:cubic-bezier(.04, .72, .47, .98);--br:5px}body{background-color:var(--bg1);font-family:var(--f-b);height:100%;margin:0;overflow:auto}html{scroll-behavior:smooth;height:100%;font-size:16px;overflow:hidden}h1,h2,h3,p,li,a:not(.button){margin-block:10px}.panel h1,.panel h2,.panel h3,.panel h4,.panel h5,.panel h6,.panel p,.panel li,.panel a{margin-block:0}h1{font-size:2.6rem;font-weight:700;font-family:var(--f-h)}h1,h2,h3,h4,h5,h6{color:var(--c1);font-family:var(--f-h)}h2{color:var(--c2);font-size:2.2rem;font-weight:570}h3{color:var(--c2);font-weight:540}h4,h5,h6{margin-block:5px;font-size:1rem;font-weight:500}p,label,li{font-family:var(--f-b);color:var(--c2)}p,li{font-size:.9rem}.faint{color:var(--c1);opacity:.4}.button>.faint{color:inherit}.small{margin-block:0;font-size:.8rem}label{font-size:.9rem}a{color:var(--c1);font-family:var(--f-b)}a:hover{opacity:.8}a:has(h2){color:var(--ct)}span{color:var(--c4)}kbd,code:not(pre>code){background-color:var(--bg2);box-shadow:inset 0 -2px 0 0 var(--bg4);border-radius:4px;padding:4px}::-webkit-scrollbar{width:7px;height:7px}::-webkit-scrollbar-track{background-color:var(--bg1);border-radius:20px}::-webkit-scrollbar-track:hover{background-color:var(--bg2)}::-webkit-scrollbar-track:active{background-color:var(--bg2)}::-webkit-scrollbar-thumb{border-radius:var(--br);background-color:var(--bg4)}::-webkit-scrollbar-thumb:hover{background-color:var(--bg4)}::-webkit-scrollbar-thumb:active{background-color:var(--bg4)}::selection{background-color:#ea87fd4b}.dropdown-container{height:fit-content;position:relative}.dropdown-container>a,.dropdown-container>button{display:block}.dropdown-container:hover>.dropdown{visibility:visible;opacity:1;transition:.2s var(--t);transform:translate(-50%)}.dropdown{visibility:hidden;background-color:var(--bg1);border-radius:var(--br);border:1px solid var(--bg4);opacity:0;transform-origin:0 0;z-index:100;width:max-content;min-width:270px;transition:.2s var(--t);flex-direction:column;padding:10px;display:flex;position:absolute;top:100%;left:50%;transform:translate(-50%)scale(.7)}.dropdown p{margin-left:12px}.dropdown button,.dropdown .button{box-sizing:border-box;width:100%;margin:0}.dropdown-menu-container{position:relative}.dropdown-menu{z-index:3;background-color:var(--bg1);border-radius:var(--br);border:1px solid var(--bg4);flex-direction:column;width:max-content;max-width:300px;padding:4px;display:flex;position:absolute;top:calc(100% + 5px);left:0}.dropdown-menu.up{top:auto;bottom:calc(100% + 5px)}.dropdown-menu a,.dropdown-menu button,.dropdown-menu form{box-sizing:border-box;width:100%;margin:0}.dropdown-menu hr{margin-block:5px}button,.button{border-radius:var(--br);border:1px solid var(--bg4);width:fit-content;font-size:.8rem;font-weight:550;font-family:var(--f-h);background-color:var(--bg1);color:var(--c1);text-wrap:nowrap;cursor:pointer;transition:.2s var(--t);padding:.6rem .9rem;text-decoration:none;display:inline-block;scale:1}button:hover,.button:hover{opacity:.8;transition:.2s var(--t)}button:active,.button:active{transition:.2s var(--t);transform:translateY(1px)}button.big,.button.big{padding:.8rem 1.2rem;font-size:.9rem}button.primary,.button.primary{background-color:var(--p1);color:var(--bg1);isolation:isolate;border:none;font-weight:600;position:relative;overflow:hidden}.primary:after{content:"";background-image:linear-gradient(180deg, var(--c3), var(--p1));opacity:0;z-index:-1;width:100%;height:100%;transition:all .2s ease-out;position:absolute;top:0;left:0}.primary:hover,.primary:hover:after{opacity:1}button.clear,.button.clear{background-color:#0000;border:none}button.clear:hover,.button.clear:hover{background-color:var(--ct)}button.grey,.button.grey{background-color:var(--bg2);border-color:var(--bg2)}button.grey:hover,.button.grey:hover{opacity:.7}.btn-col{align-items:center;gap:5px;margin-block:10px;display:flex}.btn-col-tight{flex-flow:row;gap:0;display:flex}.btn-col-tight button,.btn-col-tight .button{border-radius:0}.btn-col-tight button:first-child,.btn-col-tight .button:first-child,.btn-col-tight button.btn-col-first,.btn-col-tight .button.btn-col-first{border-radius:var(--br) 0 0 var(--br)}.btn-col-tight button:last-child,.btn-col-tight .button:last-child,.btn-col-tight button.btn-col-last,.btn-col-tight .button.btn-col-last,.btn-col-tight input:last-child{border-radius:0 var(--br) var(--br) 0}.btn-col:has(input){align-items:stretch}button[disabled],.button[disabled]{opacity:.5;cursor:not-allowed}button.semiclear,.button.semiclear{border:1px solid var(--ct);background-color:#0000}button.semiclear:hover,.button.semiclear:hover{background-color:var(--ct)}button.red,.button.red{color:#fff;background-color:red}button.red:hover,.button.red:hover{opacity:.8}button.bare,.button.bare{background:var(--ct);border:none}button.wide,.button.wide{box-sizing:border-box;width:100%}form{flex-direction:column;justify-content:center;gap:10px;display:flex}input,textarea,select{font-size:15px;font-family:var(--f-b);border-radius:var(--br);background-color:var(--bg2);color:var(--c2);cursor:pointer;transition:.2s var(--t);border:none;outline:0 solid #0000;padding:.5rem .8rem}select,input[type=file]{width:fit-content}select{padding-right:2.2rem}input[type=file]{border:2px dashed var(--bg4);background-color:var(--bg1);box-sizing:border-box;text-align:center;cursor:pointer;width:fit-content;padding:20px}input[type=file]:hover{background-color:var(--ct0)}input[type=file]::file-selector-button{display:none}input[type=range]{padding:0}.dark-mode input,.dark-mode textarea,.dark-mode select{background-color:var(--bg2)}.light-mode input,.light-mode textarea,.light-mode select{background-color:var(--bg1)}input:focus,textarea:focus,select:focus{box-shadow:0 0 0 5px var(--ct);transition:.2s var(--t);background-color:#fff}.solid input,.solid textarea,.solid select{background-color:var(--bg1)}input[type=color]{border-radius:7px;width:40px;height:40px;padding:0}input[type=color]::-webkit-color-swatch-wrapper{padding:0}input[type=color]::-webkit-color-swatch{border:none;padding:0}input[data-coloris]{box-sizing:border-box;width:100%}input[type=file]::file-selector-button{font-family:var(--f-h);border-radius:var(--br);border:1px solid var(--bg4);background-color:var(--bg3);color:var(--c2);padding:10px;font-size:15px}.btn-input-col{box-sizing:border-box;align-items:center;gap:10px;width:fit-content;height:fit-content;display:flex;position:relative}.btn-input-col input{border-radius:999px;width:min(100dvw - 100px,500px);padding:15px;position:relative}.btn-input-col button,.btn-input-col .button{box-sizing:border-box;border-radius:999px;justify-content:center;align-items:center;height:calc(100% - 10px);display:flex;position:absolute;top:5px;right:5px}.panel{border-radius:var(--br);border:1px solid var(--bg4);background-color:var(--bg1);flex-direction:column;justify-content:start;gap:10px;width:fit-content;margin-block:10px;padding:.7rem 1rem;display:flex;position:relative}.light-mode .panel{border:1px solid var(--bg3);background-color:var(--bg2)}.panel>.panel,.panel .btn-col{margin:0}.panel.sectioned{gap:0;padding:0}.panel.sectioned>.panel-section{flex-direction:column;gap:10px;padding:.7rem 1rem;display:flex}.panel.sectioned>.panel-section:not(:last-child){border-bottom:1px solid var(--bg4)}.panel.big{width:min(100%,700px)}.panel.clear{background-color:#0000;border:none}.panel.clear.really{padding:0}.floating{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:11;background-color:#00000075;width:calc(100% + 200px);height:calc(100% + 200px);position:fixed;top:-100px;left:-100px}.floating>.panel{transform-origin:0;background-color:var(--bg1);position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.panel.center{justify-content:center;align-items:center}@keyframes in{0%{opacity:0;scale:.6}to{opacity:1;scale:1}}@keyframes out{0%{opacity:1;scale:1}to{opacity:0;scale:.6}}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}.close{cursor:pointer;border:none;position:absolute;top:10px;right:10px;background-color:#0000!important}.panel.solid{background-color:var(--bg2);border:1px solid var(--bg3)}.gb{border-radius:calc(var(--br) + 2px);width:fit-content;height:fit-content;margin-block:5px;padding:2px}.gb.red{background:linear-gradient(135deg,#ff007748,#ff562c)}.gb.blue{background:linear-gradient(135deg,#0026ff31,#2c80ff)}.gb.green{background:linear-gradient(135deg,#00ff7748,#0f752e)}.gb.blue>.panel{background:radial-gradient(circle at 50% 100%,#000d57,#000)}.light-mode .gb.blue>.panel{background:radial-gradient(circle at 50% 100%,#bbdeff,#fff)}.gb.green>.panel{background:radial-gradient(circle at 50% 100%,#0f752e,#000)}.light-mode .gb.green>.panel{background:radial-gradient(circle at 50% 100%,#daffcb,#fff)}.gb.red>.panel{background:radial-gradient(circle at 50% 100%,#750000,#000)}.light-mode .gb.red>.panel{background:radial-gradient(circle at 50% 100%,#fff,#ffd7d7)}.gb>.panel{border:none;margin:0}.loading{vertical-align:middle;aspect-ratio:1;border:2px solid;border-color:inherit;border-top:2px solid #0000;border-radius:50%;height:calc(100% - 20px);min-height:.57rem;margin-bottom:2px;margin-left:3px;animation:.4s linear infinite load;display:inline-block}.loading.big{color:var(--c1);border-width:4px;height:2em;margin-block:10px;margin-inline:auto;display:block}@keyframes load{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.material-symbols-outlined{font-size:inherit;transform:translateY(13%)}hr{border:none;border-bottom:1px solid var(--bg4);width:100%;margin-block:10px}.panel hr{margin-block:0}form{flex-direction:column;gap:15px;display:flex}.grid{flex-wrap:wrap;gap:10px;display:flex}.grid>.panel{box-sizing:border-box;width:100%;margin-block:0}.highlighted{background-color:var(--bg2);border:1px solid var(--bg4);background-image:radial-gradient(circle, var(--bg3) 1px, transparent 1px);border-radius:var(--br);padding-left:10px;background-size:20px 20px;flex-wrap:nowrap;margin:0;padding-block:10px;overflow-x:auto}.highlighted a{flex-shrink:0}.error,.success,.warning,.info{border-radius:var(--br);padding:10px 12px;display:inline-block}.error{color:#750909;background-color:#ff000057}.success{color:#097509;background-color:#00ff0057}.warning{color:#757509;background-color:#ffd00057}.info{color:#073f3f;background-color:#00aeff3b}.dark-mode .success{color:#b7f5b7;background-color:#00ff0057}.dark-mode .error{color:#f5b7b7;background-color:#ff000057}.dark-mode .warning{color:#f5f5b7;background-color:#ffd00057}.dark-mode .info{color:#b7f5f5;background-color:#00ffff57}.error *,.success *,.warning *,.info *{margin:0}.notifications{z-index:1000;flex-direction:column;gap:5px;display:flex;position:fixed;bottom:10px;right:10px}.notification{border-radius:var(--br);animation:slide-in .2s var(--t);padding:10px}@keyframes slide-in{0%{transform:translate(100%)}to{transform:translate(0)}}.flex{flex-wrap:wrap;gap:10px;display:flex}.flex.center{justify-content:center;align-items:center}.flex>.panel{margin-block:0}.bento-grid{gap:10px;margin-block:20px;display:grid}.bento-grid.s1{grid-template-columns:repeat(2,1fr);grid-template-areas:"box-1 box-1""box-2 box-3"}.bento-grid>.panel{box-sizing:border-box;width:100%;margin-block:0}.tooltip-container{width:fit-content;height:fit-content;position:relative}.tooltip{visibility:hidden;box-sizing:border-box;border-radius:var(--br);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);color:#fff;opacity:0;transform-origin:0 100%;z-index:11;width:max-content;max-width:400px;transition:.15s var(--t);background-color:#000000b3;padding:7px 14px;position:absolute;top:-5px;left:50%;transform:translate(-50%)translateY(-100%)scale(.8)}.tooltip-container:hover .tooltip{visibility:visible;opacity:1;transition:.15s var(--t);scale:1}.password-field{width:100%;position:relative}.password-field .password-input{box-sizing:border-box;width:100%}.password-field .password-toggle{width:32px;height:32px;color:var(--c2);cursor:pointer;transition:.15s var(--t);background:0 0;border:none;border-radius:999px;justify-content:center;align-items:center;padding:0;display:inline-flex;position:absolute;top:50%;right:8px;transform:translateY(-50%)}.password-field .password-toggle:hover{background-color:var(--ct);border-color:var(--ct2)}.password-field .password-toggle:active{transform:translateY(-50%)scale(.98)}.password-field .password-toggle:focus-visible{box-shadow:0 0 0 4px var(--ct);outline:none}.password-field .password-toggle-icon{transform:translateY(13%);font-size:18px!important}input[type=password]::-ms-reveal{width:0;height:0;display:none}input[type=password]::-ms-clear{width:0;height:0;display:none}@keyframes fade{0%{opacity:1}to{opacity:0}}pre{color:#fff;white-space:pre-wrap;background-color:#2e2f33;margin:0;padding:10px}code{background-color:#0000!important}.code{border-radius:var(--br);flex-direction:column;gap:0;max-width:min(100%,500px);display:flex;overflow:auto hidden}.code-header{box-sizing:border-box;background-color:#1e2022;width:100%}div.code-header>button{color:#fff;background-color:#0000;border:none}.spacer{width:100%;height:20px}table.table{border-collapse:collapse;text-align:left;width:100%;font-size:.9rem}table.table th{font-family:var(--f-h);color:var(--c1);border-bottom:2px solid var(--bg3);text-transform:uppercase;letter-spacing:.05em;padding:14px 18px;font-size:.85rem;font-weight:550}table.table td{color:var(--c2);border-bottom:1px solid var(--bg3);vertical-align:middle;padding:14px 18px}table.table tr:last-child td{border-bottom:none}table.table tbody tr{transition:background-color .15s}table.table tbody tr:hover{background-color:var(--bg2)}.panel:has(.table){background-color:var(--bg1);width:100%;padding:0;overflow:hidden}.flex-row{flex-direction:row;align-items:center;gap:8px;display:flex}.flex-between{flex-direction:row;justify-content:space-between;align-items:center;gap:16px;margin-bottom:1.5rem;display:flex}button.danger,.button.danger{color:#fff;background-color:#ef4343;border-color:#ef4343}button.danger:hover,.button.danger:hover{opacity:1;background-color:#ed2c2c;border-color:#ed2c2c}.tool-card,.category-card{background-color:var(--bg1);border:1px solid var(--bg4);border-radius:var(--br);padding:10px 14px;text-decoration:none;transition:all .1s ease-out;margin:0!important}.tool-card:hover,.category-card:hover{border:1px solid var(--bg1);box-shadow:0 4px 10px var(--ct);transform:translateY(-2px)}.tool-card img,.category-card img{border-radius:8px;width:60px}.tool-card.css-tools,.category-card.css-tools{background-image:radial-gradient(circle at 100% 0,#6bc6ff7e,#fff 30%)}.tool-card.css-tools>img{background-color:#41a1ff}.tool-card.tool-card.hashing-and-encryption-tools,.category-card.hashing-and-encryption-tools{background-image:radial-gradient(circle at 100% 0,#ff816b7e,#fff 30%)}.tool-card.hashing-and-encryption-tools>img{background:radial-gradient(circle at 0 0,#fc522f,#e62500)}.tool-card.writing-tools,.category-card.writing-tools{background-image:radial-gradient(circle at 100% 0,#7c6bff7e,#fff 30%)}.tool-card.design-tools,.category-card.design-tools{background-image:radial-gradient(circle at 100% 0,#46e5677e,#fff 30%)}.card-cta{flex-wrap:wrap;align-items:center;gap:4px;display:flex}.tool-card>.card-cta>i{opacity:0;transition:all .1s ease-out;transform:translateY(1px)translate(-10px)}.tool-card:hover>.card-cta>i{opacity:1;transition:all .3s ease-out;transform:translateY(1px)translate(0)}.chip{color:var(--c1);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);cursor:pointer;background-color:#0000;border:1px solid #e6e6e6;border-radius:100px;margin:0;padding:5px 9px;font-size:.78rem;text-decoration:none}.logo{vertical-align:middle;height:1rem;transform:translateY(-2px)}.btn-toggle-group{background-color:var(--bg2);border-radius:var(--br);cursor:pointer;width:fit-content;padding:5px}.btn-toggle-group>button,.btn-toggle-group>.button{background-color:#0000;border:none;margin:0}.btn-toggle-group>button:hover{background-color:var(--ct)}.btn-toggle-group>button.selected,.btn-toggle-group>.button.selected{background-color:var(--bg1)}@media (width<=800px){.grid a{box-sizing:border-box;width:100%}}
