.cat-length{color:#293632;background:#fff8ec;border:2px solid #22695f;border-radius:28px 40px 24px 36px;margin:3rem 0 5rem;overflow:hidden}.cat-length>header{padding:2.5rem 3rem 1.5rem;background:#d9e8db}.cat-length h2{font-size:clamp(2rem,4vw,3.4rem);line-height:1.08;max-width:19ch;margin:.65rem 0 1rem}.cat-length>header p{max-width:65ch}.cat-length-body{display:grid;grid-template-columns:minmax(240px,.8fr) minmax(0,1.2fr);padding:2.5rem 3rem;gap:3rem}.cat-length form,.cat-length-output{min-width:0}.cat-length fieldset{border:0;margin:0;padding:0;min-width:0}.cat-length legend{font-size:.82rem;font-weight:700;letter-spacing:.04em;margin-bottom:1.4rem}.cat-length label{display:block;font-size:.9rem;margin:0 0 1.1rem;font-weight:600}.cat-length :is(input,select){display:block;box-sizing:border-box;width:100%;min-width:0;border:1px solid #7da499;border-radius:12px;font:inherit;font-size:1rem;color:#293632;background:#fffdf8;padding:.8rem;margin-top:.4rem}.cat-length button{border:1px solid #22695f;background:#22695f;color:white;border-radius:999px;padding:.8rem 1.25rem;font:inherit;font-size:.88rem;cursor:pointer}.cat-length :is(input,select,button,a):focus-visible{outline:3px solid #9e5523;outline-offset:4px}.cat-length-help{font-size:.8rem!important;line-height:1.65}.cat-length-example{font-size:.8rem;padding:.8rem 1rem;border-radius:12px;background:#f9e3c6;line-height:1.5}.cat-length-bars{display:grid;gap:1.5rem;margin:1.6rem 0 2rem;padding:1.5rem 1.1rem;background:#f1f0df;border-radius:20px 12px 22px 14px}.cat-length-bars>div>span{display:block;font-size:.8rem;font-weight:700;margin-bottom:.55rem}.cat-length-bars i{display:block;height:24px;background:#8daf9b;border-radius:8px 13px 6px 12px;transition:width .25s ease}.cat-length-bars>div:nth-child(2) i{background:#f2b27b;border:1px dashed #9e5523}.cat-length-bars>div:nth-child(3) i{background:#22695f}.cat-length-result>span{font-size:.8rem;font-weight:700}.cat-length-result strong{display:block;font-size:2.8rem;line-height:1.1;margin:.6rem 0;color:#22695f}.cat-length-result p{font-size:.9rem;line-height:1.65}.cat-length-difference{border-top:1px solid #9fbeb0;padding-top:1rem}.cat-length-error{border:1px solid #ac542f;border-radius:12px;padding:1rem;background:#ffecdc;color:#78321b;font-size:.9rem;line-height:1.6}.cat-length-context{padding:1.5rem 3rem 2rem;border-top:1px solid #9fbeb0;background:#f3f2e2}.cat-length-context h3{font-size:1.4rem;margin:.4rem 0 1rem}.cat-length-context p{font-size:.9rem;line-height:1.7;max-width:82ch}.cat-length-context a{display:inline-block;font-size:.82rem;margin:.5rem 1.5rem .5rem 0;color:#22695f;text-underline-offset:4px}.cat-length [hidden]{display:none}.cat-length noscript p{padding:1rem 3rem}@media(max-width:760px){.cat-length>header{padding:1.5rem 1.25rem 1rem}.cat-length h2{font-size:2.15rem}.cat-length-body{grid-template-columns:1fr;padding:1.5rem 1.25rem;gap:1rem}.cat-length-context{padding:1.25rem}.cat-length{border-radius:22px 28px 20px 26px}.cat-length-result strong{font-size:2.2rem}.cat-length noscript p{padding:1rem 1.25rem}}@media(prefers-reduced-motion:reduce){.cat-length-bars i{transition:none}}