@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";html.light{--base-clr: #e9e9ee;--subase-clr: #c0c0c0;--content-clr: #fdfdff;--line-clr: #42434a;--hover-clr: #c0c0c0;--hover-search-box-clr: #909090;--text-clr: #11121a;--accent-clr: #5e63ff;--secondary-text-clr: #b0b3c1;--shadow: #02061799;--muted: #64748b;--accent: #60a5fa;--glass: #ffffff08;--inside-box: #e4e4e44a;--button-background: #e2e8f0}html.dark{--base-clr: #1a1b21;--subase-clr: #2a2b31;--content-clr: #313137;--line-clr: #3c3d45;--hover-clr: #5e5f66;--hover-search-box-clr: #5e5f66;--text-clr: #e6e6ef;--accent-clr: #5e63ff;--accent: #60a5fa;--secondary-text-clr: #8a8c94;--muted: #94a3b8;--shadow: #fdf9e899;--glass: #000000;--inside-box: #5c5e5e4a;--button-background: #4a5568}*{margin:0;padding:0}html{font-family:Poppins,Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5rem;font-size:.8125rem}body{min-height:100vh;min-height:100dvh;background-color:var(--base-clr);color:var(--text-clr);display:grid;grid-template-columns:auto 1fr}#sidebar{box-sizing:border-box;height:100vh;width:250px;padding:5px 1em;border-right:1px solid var(--line-clr);background-color:var(--base-clr);position:sticky;top:0;align-self:start;transition:.3s ease-in-out;overflow:hidden;text-wrap:nowrap}#sidebar.close{padding:5px;width:50px}#sidebar ul{list-style:none}#sidebar>ul>li:first-child{display:flex;justify-content:flex-end;margin-bottom:16px;margin-top:13px}#sidebar #logo-link a:hover{background-color:transparent}#sidebar.close #logo-link a{opacity:0}#sidebar ul li.active a{color:var(--accent-clr);svg{fill:var(--accent-clr)}}#sidebar a,#sidebar .dropdown-btn,#sidebar .logo-link{border-radius:.5em;padding:.85em;text-decoration:none;color:var(--text-clr);display:flex;align-items:center;gap:1em}#sidebar .logo-link{width:100%}.dropdown-btn{width:100%;text-align:left;background:none;border:none;font:inherit;cursor:pointer}#sidebar svg{flex-shrink:0;fill:var(--text-clr)}#sidebar a span,#sidebar .dropdown-btn span{flex-grow:1}#sidebar a:hover,#sidebar .dropdown-btn:hover{background-color:var(--hover-clr)}#sidebar .sub-menu{display:grid;grid-template-rows:0fr;transition:.3s ease-in-out;>div{overflow:hidden}}#sidebar .sub-menu.show{grid-template-rows:1fr}.dropdown-btn svg{transition:.2s ease}.rotate svg:last-child{rotate:180deg}#sidebar .sub-menu a{padding-left:2em}#toggle-btn{margin-left:auto;padding:1em;border:none;border-radius:.5em;background:none;cursor:pointer;svg{transition:rotate .15s ease}}#toggle-btn:hover{background-color:var(--hover-clr)}#logo-link{width:100%;display:grid;place-items:center;margin:0,auto;padding:0}#logo{padding:0;margin:0;height:5rem;width:5.5rem}main{padding:min(30px,7%)}main p{color:var(--secondary-text-clr);margin-top:5px;margin-bottom:15px}.container{border:1px solid var(--line-clr);border-radius:1em;margin-bottom:20px;padding:min(3em,15%);h2,p{margin-top:1em}}@media (max-width: 800px){body{grid-template-columns:1fr}main{padding:2em 1em 60px}.container{border:none;padding:0}#sidebar.close{padding:5px;width:100%}#sidebar{height:60px;width:100%;border-right:none;border-top:1px solid var(--line-clr);padding:0;position:fixed;top:unset;bottom:0;opacity:1;>ul{padding:0;display:grid;grid-auto-columns:60px;grid-auto-flow:column;align-items:center;overflow-x:scroll}ul li{height:100%}ul a,ul .dropdown-btn{width:60px;height:60px;padding:0;border-radius:0;justify-content:center}ul li span,ul li:first-child,.dropdown-btn svg:last-child{display:none}ul li .sub-menu.show{position:fixed;bottom:60px;left:0;box-sizing:border-box;height:60px;width:100%;background-color:var(--hover-clr);border-top:1px solid var(--line-clr);display:flex;justify-content:center;>div{overflow-x:auto}li{display:inline-flex}a{box-sizing:border-box;padding:1em;width:auto;justify-content:center}}}}#header{box-sizing:border-box;width:100%;height:70px;padding:1em;margin-top:20px;left:0;position:sticky;display:flex;justify-content:space-between;overflow:visible;text-wrap:nowrap}#header svg{flex-shrink:0;fill:var(--text-clr)}a#home svg{width:100%;display:block}.search-box{min-width:200px;border-radius:5px;background-color:var(--subase-clr);overflow:visible;height:33px;margin:0 20px;flex:1}.row{height:100%;width:100%;display:flex;align-items:center}.row input{flex:1;height:100%;background:transparent;border:0;outline:0;width:10px;color:var(--text-clr);margin-left:10px}.row svg{margin-right:10px}.result-box{max-height:300px;overflow-y:scroll;background-color:var(--subase-clr);z-index:100;opacity:1}.result-box ul{border-top:1px solid var(--line-clr);padding:5px 0}.result-box ul li{list-style:none;border-radius:3px;padding:15px 10px;cursor:pointer}.result-box ul li:hover{background-color:var(--hover-search-box-clr)}.custom-scrollbar::-webkit-scrollbar{width:6px;background-color:var(--subase-clr)}.custom-scrollbar::-webkit-scrollbar-thumb{background-color:var(--line-clr)}#theme-toggle{border:none;border-radius:.5em;background:none;cursor:pointer}.link{text-decoration:none;color:green}.content{box-sizing:border-box;width:100%;flex-grow:1;padding:20px;display:flex;flex-direction:column;align-items:center}.title{width:100%;max-width:640px;text-align:justify}.horizontal-bar{border:1px solid var(--subase-clr);width:50%;width:640px;margin:10px 0 5px}.text-class{width:100%;max-width:640px;text-align:justify;text-justify:inter-word;margin:auto;word-wrap:break-word}.checkbox-container{display:grid;grid-template-columns:repeat(2,1fr);gap:20px 30px}.form-group{display:flex;justify-content:center;width:100%}.form-group input{flex-grow:1}#tokenLengthText{margin-right:5px}#tokenLength{margin-left:20px;flex-grow:1}.checkbox{display:inline-flex;justify-content:space-between;cursor:pointer}.checkbox__input{display:none}.checkbox__box{width:1.25em;height:1.25em;border:2px solid #cccccc;border-radius:3px;display:flex;align-items:center;justify-content:center;margin-left:10px;flex-shrink:0;transition:background-color .2s,border-color .2s}.checkbox__box:after{content:"✔";color:#eee;transform:scale(0);transition:background-color .2s,border-color .2s}.checkbox__input:checked+.checkbox__box{background-color:#5e63ff;border-color:#5e63ff}.checkbox__input:checked+.checkbox__box:after{transform:scale(1)}#textAreaTokenDisplay{background:var(--inside-box);border-radius:8px;border:1px solid var(--text-clr);text-align:center;word-break:break-all;width:100%;color:inherit;min-height:200px;overflow:auto;padding:.5rem;box-sizing:border-box}.button-group button{padding:12px 24px;border:none;border-radius:8px;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease;margin:10px;background:var(--button-background);color:inherit}.button-display:hover{transform:translateY(-3px);box-shadow:0 8px 15px var(--shadow)}.button-group button:active{transform:translateY(0);box-shadow:0 4px 8px var(--shadow)}.container-tool{margin:10px 0;width:600px;background-color:var(--content-clr);display:flex;justify-content:center;align-items:center;flex-direction:column;box-shadow:0 6px 18px var(--shadow);border:1px solid var(--text-clr);border-radius:12px;padding:1.5rem;gap:1.5rem}.grid{display:grid;width:100%;grid-template-columns:1fr 1fr;gap:14px}label{display:block;margin-bottom:.25rem}#dateInput{padding:10px;border-radius:8px;border:1px solid var(--text-clr);background:var(--inside-box);color:inherit}#msInput{padding:12.4px;border-radius:8px;border:1px solid var(--text-clr);background:var(--inside-box);color:inherit}#msInput::placeholder{color:var(--muted)}.explain{color:var(--muted);line-height:1.45}.result{background:var(--inside-box);padding:10px;border-radius:8px;border:1px solid var(--text-clr);min-height:65px}.result-title{color:var(--muted)}code{padding:2px 6px;border-radius:4px;font-family:monospace}.grid-item{display:flex;flex-direction:column;gap:.5rem}