:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;min-heigh:100vh;color-scheme:light dark;color:#363636ed;background-image:linear-gradient(to bottom,#fff,#ababab);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{background-color:#7c7fe1;color:#fff}.navbar{display:flex;justify-content:center;align-items:center;background-color:#121212;padding:1rem 2rem;position:sticky;top:0;z-index:1000}.nav-links{display:flex;gap:1.5rem;padding:2rem;background-color:#121212;align-items:center;font-size:1.2rem;font-weight:500;justify-content:center}.nav-inactive{text-decoration:none;color:#888}.nav-active{text-decoration:underline;color:#fff}.hamburger{display:none;flex-direction:column;cursor:pointer;gap:.5rem}.bar{width:25px;height:3px;background-color:#fff;border-radius:2px;transition:all .3s ease}.hamburger.active span.bar:nth-child(1){transform:rotate(45deg) translate(9px,9px)}.hamburger.active span.bar:nth-child(2){opacity:0}.hamburger.active span.bar:nth-child(3){transform:rotate(-45deg) translate(7px,-7px)}@media(max-width:768px){.hamburger{display:flex}.nav-links{display:flex;flex-direction:column;position:absolute;top:50px;left:0;width:100%;background-color:#121212;padding:0;gap:1.5rem;max-height:0;overflow:hidden;opacity:0;transition:all .4s ease-in-out;pointer-events:none}.nav-links.active{display:flex;flex-direction:column;gap:1rem;transition:all .3s ease;align-self:center;max-height:500px;opacity:1;padding:2rem 0;pointer-events:auto}.navbar{justify-content:center;align-items:end;flex-direction:column}}.footer{background-color:#121212;color:#888;padding:1rem;border-top:1px solid #333;margin-top:5rem;text-align:center}.footer-content{display:flex;flex-direction:column;gap:.5rem;align-items:center}.footer-socials{display:flex;gap:1.5rem}.footer-socials a{color:#fff;text-decoration:none;font-size:.9rem;transition:color .3s ease}.footer-socials a:hover{color:#646cff}.footer-tagline{font-size:.8rem;font-style:italic;margin-top:.5rem}.header{display:flex;flex-direction:column;align-items:center;width:100vw;font-size:3.2em;line-height:1.1;font-weight:600}.header-case{display:flex;flex-direction:row;align-items:center;font-size:3.2em;line-height:1.1;font-weight:600;position:relative;z-index:20}@keyframes revealDown{0%{opacity:0;transform:translateY(-20%)}to{opacity:1;transform:translateY(0)}}@keyframes blur{0%{filter:blur(.3rem)}to{filter:blur(0)}}.header,.header-case{animation:revealDown 1.8s forwards,blur .8s forwards;transtion:ease-in}@media(max-width:768px){.header-case{font-size:2em;flex-direction:row;width:90%;align-items:center}}.area-layout{display:flex;justify-content:center;align-items:center;gap:2rem;margin-top:3rem;margin-bottom:2rem;flex-wrap:wrap;width:auto}@media(max-width:768px){.area-layout{gap:1em}}.full-container{display:flex;flex-direction:column;align-items:center;width:100vw;gap:2rem}.textarea-container{display:flex;flex-direction:row;align-items:center;gap:1rem}@media(max-width:768px){.textarea-container{flex-direction:column;width:90%;align-items:center}}textarea{width:35vw;height:300px;margin:10px 15px;padding:1rem;font-size:1rem;border-radius:8px;border:1px solid #ccc;background-color:#3b3b3b;color:#f1f1f1}@media(max-width:768px){textarea{width:auto}}.text-area{resize:none}.icon-convert{font-size:2rem;color:#7c7fe1}.copy-button{padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;border:none;border-radius:8px;cursor:pointer;width:auto;margin:0 15px;position:absolute;top:20px;right:10px}.convert-button{padding:.6em 1.2em;font-size:1.2em;font-weight:500;font-family:inherit;border:none;border-radius:8px;cursor:pointer;width:auto;margin:0 15px;position:relative;align-items:center}.convert-button:hover,.copy-button:hover{background-color:#525375;transform:scale(1.02);transition:all .1s ease}.convert-button:active,.copy-button:active{transform:scale(.95)}.output-area,.input-area{position:relative;display:flex;flex-direction:column}@media(max-width:768px){.input-area,.output-area{width:100%}}.textarea-container-counter{display:flex;align-items:center;gap:1rem;width:75%}.input-area-counter{position:relative;display:flex;flex-direction:column;width:100%;align-items:center}.output-area-counter{position:relative;display:flex;flex-direction:row;min-width:200px;justify-content:center;align-items:center;justify-items:center;gap:2rem}.counter-box{align-items:center;gap:1rem;width:auto;padding:10px;text-align:center;font-size:1.5rem;font-weight:500;background-color:#7c7fe1;color:#fff;border-radius:8px;width:inline}.text-area-counter{resize:both;width:90%}.type-select{position:absolute;display:flex;flex-direction:row;gap:2em;top:20px}.selector{left:0}.type-button{padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#fff;color:#646cff;border:none;border-radius:8px;cursor:pointer;width:auto;margin:0 15px;border-style:solid;border-width:medium;transition:all .1 ease}.type-button-active{padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#646cff;color:#fff;border:none;border-radius:8px;cursor:pointer;width:auto;margin:0 15px;top:20px;right:10px;transition:all .1 ease}.type-button:active{transform:scale(.95)}.type-button:hover{transform:scale(1.02);transition:all .1s ease}.pointer-icon{height:1.6875rem;width:1.375rem;fill:#000;stroke-width:1.5;margin:.3rem .4rem 0}.type-selection-active .pointer-icon{animation:rotateAnimation .5s forwards}.type-selection .pointer-icon{transition:ease;animation:reverseAnimation .5s forwards}@keyframes rotateAnimation{0%{transform:rotate(0)}to{transform:rotate(90deg)}}@keyframes reverseAnimation{0%{transform:rotate(90deg)}to{transform:rotate(0)}}.type-selection,.type-selection-active{font-size:1em;font-weight:500;font-family:inherit;background-color:#646cff00;color:#363636ed;border:none;border-radius:8px;cursor:pointer;width:auto;margin:0 .12em 0 15px;top:20px;right:10px;transition:all .4s ease;display:flex;flex-direction:row;align-items:center}.type-selection{border-style:solid;border-width:4px;border:4px solid transparent}.type-selection-active{border-style:solid;border:4px solid #646cff;border-width:4px;background-color:#646cff;color:#fff}.teks:hover{text-decoration:underline}.keluaran{display:flex;flex-direction:column;position:absolute;background-color:#646cff;color:#fff;padding:10px;font-size:.5em;z-index:20;border-radius:9px;gap:8px;top:110%;font-weight:600}@keyframes fadeIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.type-selection-active .keluaran{animation:fadeIn .5s forwards}.pilihan{padding:4px}.pilihan:hover{background-color:#5b5b5b;border-radius:8px}ul{list-style-type:none;padding-inline:10px;margin-block-start:.25em;margin-block-end:.25em}