.product-shell:has(.ukur-hujan){--p-bg:#f7f8fa;--p-ink:#252932;--p-muted:#596270;--p-line:#c3ccd8;--p-accent:#315cc8}.ukur-hujan{--uh-ink:#252932;--uh-muted:#536071;--uh-blue:#315cc8;max-width:1060px;color:var(--uh-ink);margin:0 auto;padding:20px 0 38px;font-family:DM Sans,sans-serif}.ukur-hujan *,.ukur-hujan :before,.ukur-hujan :after{box-sizing:border-box}.uh-layout{grid-template-columns:minmax(0,1fr) minmax(350px,.92fr);align-items:start;gap:clamp(26px,5vw,70px);display:grid}.uh-intro{margin-bottom:27px}.uh-kicker,.uh-stage-title,.uh-ruler,.uh-equation{font-family:IBM Plex Mono,monospace}.uh-kicker{color:var(--uh-blue);letter-spacing:.08em;font-size:11px;font-weight:700}.uh-intro h2{letter-spacing:-.04em;max-width:16ch;margin:8px 0;font:600 clamp(26px,3.3vw,39px)/1.12 Space Grotesk,sans-serif}.uh-intro p{color:var(--uh-muted);margin:0;line-height:1.5}.uh-fields{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;display:grid}.uh-field{flex-direction:column;gap:7px;min-width:0;font-size:13px;font-weight:700;display:flex}.uh-field small{color:var(--uh-muted);font-weight:400}.uh-input{background:#fff;border:1px solid #9ba9ba;border-radius:7px;align-items:center;min-width:0;height:48px;display:flex}.uh-input:focus-within{border-color:var(--uh-blue);box-shadow:0 0 0 3px #315cc826}.uh-input input{border-radius:inherit;width:100%;min-width:0;height:100%;color:var(--uh-ink);background:0 0;border:0;outline:0;padding:9px 10px;font:600 16px/1.2 DM Sans,sans-serif}.uh-input input::placeholder{color:#737f8e;opacity:1;font-weight:400}.uh-input b{color:var(--uh-muted);white-space:nowrap;padding:0 10px 0 0;font-size:11px}.uh-optional{grid-template-columns:1fr 1fr;gap:12px;margin-top:19px;display:grid}.uh-optional .uh-input input{font-size:14px;font-weight:500}.uh-actions{flex-wrap:wrap;gap:10px;margin-top:24px;display:flex}.uh-actions button,.uh-note button{cursor:pointer;border-radius:7px;min-height:44px;padding:10px 17px;font:700 14px DM Sans,sans-serif}.uh-primary{border:1px solid var(--uh-blue);background:var(--uh-blue);color:#fff}.uh-primary:hover{background:#244aa8}.uh-reset,.uh-note button{color:var(--uh-ink);background:0 0;border:1px solid #93a0b1}.uh-reset:hover,.uh-note button:hover{background:#e8edf4}.ukur-hujan :is(button,input):focus-visible{outline-offset:3px;outline:3px solid #a75327}.uh-error{color:#9d3028;margin:13px 0 0;font-weight:700}.uh-stage{background:#edf0f5;border-radius:17px;min-width:0;padding:21px 26px 28px}.uh-stage-title{color:var(--uh-muted);letter-spacing:.06em;justify-content:space-between;gap:10px;font-size:11px;font-weight:700;display:flex}.uh-visual{justify-content:center;align-items:stretch;height:230px;margin:25px 0 20px;display:flex}.uh-ruler{color:#596676;font-variant-numeric:tabular-nums;flex-direction:column;justify-content:space-between;align-items:end;width:36px;padding-right:8px;font-size:11px;line-height:1;display:flex}.uh-gauge{background:repeating-linear-gradient(0deg,#0000 0 calc(20% - 1px),#b2bdca calc(20% - 1px) 20%);border:3px solid #394353;border-top:0;border-radius:0 0 22px 22px;width:min(44%,150px);min-width:106px;height:100%;position:relative;overflow:hidden}.uh-gauge:before,.uh-gauge:after{content:"";z-index:2;background:#394353;width:18px;height:3px;position:absolute;top:0}.uh-gauge:before{left:0}.uh-gauge:after{right:0}.uh-water{background:#4975cf;width:100%;transition:height .25s ease-out;position:absolute;bottom:0;left:0}.uh-main-result{flex-direction:column;gap:2px;display:flex}.uh-main-result span,.uh-secondary-result span{color:var(--uh-muted);font-size:13px}.uh-main-result strong{letter-spacing:-.05em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;font:600 clamp(35px,5vw,58px)/1.02 Space Grotesk,sans-serif}.uh-main-result strong small{letter-spacing:0;font-size:.45em}.uh-secondary-result{flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 10px;margin-top:11px;display:flex}.uh-secondary-result strong{font-variant-numeric:tabular-nums;font:600 18px Space Grotesk,sans-serif}.uh-equation{color:var(--uh-muted);margin:16px 0 0;font-size:11px;line-height:1.5}.uh-limit{color:#8a3b2d;margin:8px 0 0;font-size:12px}.uh-empty{color:var(--uh-muted);flex-direction:column;gap:4px;display:flex}.uh-empty strong{color:var(--uh-ink);font-size:19px}.uh-note{border-top:1px solid #c7d0dc;margin-top:22px;padding-top:16px}.uh-note h3{margin:0 0 10px;font-size:15px}.uh-note pre{white-space:pre-wrap;overflow-wrap:anywhere;color:#364250;margin:0 0 11px;font:12px/1.55 IBM Plex Mono,monospace}.uh-note p{margin:8px 0 0;font-size:12px}.uh-footnote{max-width:72ch;color:var(--uh-muted);margin:25px 0 0;font-size:13px;line-height:1.55}@media (width<=800px){.uh-layout{grid-template-columns:1fr;gap:23px}.uh-intro h2{max-width:23ch}.uh-stage{width:100%;max-width:620px}}@media (width<=510px){.uh-fields{grid-template-columns:1fr;gap:13px}.uh-optional{grid-template-columns:1fr}.uh-stage{padding:19px}.uh-visual{height:190px;margin:20px 0}.uh-intro{margin-bottom:20px}}@media (prefers-reduced-motion:reduce){.uh-water{transition:none}}