*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media (prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}.flex,.v-stack{display:flex}.flex-row{flex-direction:row}.flex-col,.v-stack{flex-direction:column}.flex-wrap{flex-wrap:wrap}.justify-start{justify-content:flex-start}.justify-end{justify-content:flex-end}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.justify-around{justify-content:space-around}.items-start{align-items:flex-start}.items-end{align-items:flex-end}.items-center{align-items:center}.v-stack{gap:2rem}.card,.input-card,.output-card{background-color:#24232b;width:100%;border-radius:3px;padding-block:1rem;padding-inline:2rem;color:#fbfafc}.card__accent{color:#a4ffaf}.card__text{text-transform:capitalize}.card .btn,.input-card .btn,.output-card .btn{font-size:1.3rem}.output-card{display:flex;justify-content:space-between;padding-inline:1rem;width:100%}.output-card__input{font-size:1.6rem;color:#fbfafc;background:none;border:none;width:100%}.output-card__input:focus{outline:none}.input-card .card__accent{font-size:2rem}.input-card .slider{width:100%}.input-card>*{margin-block:1.3rem}.input-card__list{all:unset;padding-inline:.4rem;gap:.8rem;list-style:none;display:flex;flex-direction:column}.input-card__list li{display:flex;align-items:center;gap:1rem}.input-card__rating{padding:1rem;background:#18171f;height:55px}.input-card__rating span{text-transform:uppercase;color:#57565e;border-radius:2px;font-size:.9rem}.input-card__rating .bars{display:flex;justify-content:space-between;gap:.5rem;position:relative}.input-card .bars:before{content:attr(data-label);position:absolute;top:50%;transform:translate(-120%,-50%)}.input-card__rating .bars>*{width:6px;height:20px;outline:1px solid #fbfafc;border-radius:0}.input-card .bar__item--weak{outline:1px solid red;background-color:red}.input-card .bar__item--medium{outline:1px solid yellow;background-color:#ff0}.input-card .bar__item--strong{outline:1px solid #a4ffaf;background-color:#a4ffaf}.input-card .btn{width:100%;height:55px}.btn{all:unset;cursor:pointer;display:flex;align-items:center;justify-content:center;user-select:none}.btn--primary{color:#a4ffaf}.btn--secondary{text-transform:uppercase;background-color:#a4ffaf;color:#18171f;border-radius:2px;gap:1rem;transition:all ease .1s}@media (hover: hover){.btn--secondary:hover{color:#a4ffaf;background-color:transparent;box-shadow:inset 0 0 2px #a4ffaf}}.slider{-webkit-appearance:none;appearance:none;height:6px;background-color:#18171f;position:relative}.slider:hover{cursor:pointer}.slider:active::-webkit-slider-thumb,.slider:active::-moz-range-thumb{background-color:#18171f;border:1px solid #a4ffaf}.slider::-webkit-slider-thumb,.slider::-moz-range-thumb{-webkit-appearance:none;appearance:none;border:none;z-index:2;width:28px;height:28px;position:absolute;background-color:#fbfafc;border-radius:999px}.checkbox{position:relative}.checkbox__input{position:absolute;opacity:0;cursor:pointer;top:0;left:0;height:100%;width:25px;z-index:99}.checkbox__box{width:17px;height:17px;background-color:transparent;border-radius:1px;position:relative;border:1px solid #a4ffaf}.checkbox input:checked~.checkbox__box{background:#a4ffaf}.checkbox input:checked~.checkbox__box>.checkbox__mark{display:block}.checkbox__mark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#18171f;display:none;font-size:.8rem}.checkbox__mark svg{vertical-align:middle}*{font-family:Cascadia Code,monospace}body{background-image:linear-gradient(180deg,#18171f,#0d0d0d)}main.hero{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-width:500px;width:90%}main.hero .hero__title{text-align:center;text-transform:capitalize;color:#57565e;font-size:1.75rem}