:root{--ink:#173b36;--muted:#6e827d;--cream:#f5f8f5;--white:#fff;--mint:#dcebe2;--green:#2e6658;--line:#dce5e0;--amber:#d88a3d;--danger:#b75247;--shadow:0 24px 70px rgba(23,59,54,.14)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:"DM Sans",sans-serif}button,input{font:inherit}.site-header{height:82px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 30px}.brand{display:flex;align-items:center;gap:11px;color:var(--ink);text-decoration:none;font:800 20px Manrope}.brand-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:50% 50% 48% 52%;background:var(--ink);color:white;font-size:16px}.ghost-button,.text-button{border:0;background:transparent;color:var(--ink);font-weight:600;cursor:pointer;padding:11px 15px}.ghost-button{border:1px solid var(--line);border-radius:30px;background:rgba(255,255,255,.45)}.hero{min-height:630px;max-width:1180px;margin:auto;padding:65px 30px 90px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:72px}.eyebrow,.section-kicker{text-transform:uppercase;letter-spacing:.17em;font-size:11px;font-weight:700;color:#53766c}.eyebrow{display:flex;align-items:center;gap:9px}.eyebrow span{width:25px;height:1px;background:#53766c}.hero h1{font:700 clamp(48px,6vw,76px)/1.04 Manrope;margin:20px 0 22px;letter-spacing:-.055em}.hero h1 em{font:400 1em Georgia,serif;color:#52776d}.hero-copy>p{font-size:18px;line-height:1.7;max-width:565px;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:15px;margin-top:30px}.primary-button{border:0;border-radius:8px;padding:16px 20px;background:var(--ink);color:white;font-weight:700;cursor:pointer;box-shadow:0 8px 20px rgba(23,59,54,.16)}.primary-button:hover{background:#24574f}.primary-button span{margin-left:22px}.primary-button:disabled{opacity:.45;cursor:not-allowed}.compact{padding:12px 16px}.trust-row{display:flex;gap:22px;color:#688078;font-size:12px;margin-top:35px}.water-card{position:relative;height:470px;border-radius:48% 48% 44% 46%;overflow:hidden;background:linear-gradient(145deg,#a9c9bd,#7da99f);box-shadow:var(--shadow);isolation:isolate}.water-card:after{content:"";position:absolute;inset:52% -20% -30%;background:rgba(241,250,247,.5);border-radius:50% 50% 0 0;transform:rotate(-7deg);backdrop-filter:blur(3px)}.water-glow{position:absolute;width:280px;height:280px;border-radius:50%;background:#dff2ea;filter:blur(50px);top:-90px;right:-40px;opacity:.7}.strip{position:absolute;z-index:2;width:56px;height:355px;background:#f7f0d3;left:52%;top:58%;transform:translate(-50%,-50%) rotate(-8deg);border-radius:4px;box-shadow:0 17px 38px rgba(29,68,59,.2);display:flex;flex-direction:column;align-items:center;padding-top:29px;gap:14px}.strip i{display:block;width:34px;height:30px;background:var(--pad);border-radius:2px}.result-pill{position:absolute;z-index:3;left:27px;right:27px;bottom:25px;background:rgba(255,255,255,.87);backdrop-filter:blur(15px);padding:16px 20px;border-radius:12px;display:flex;justify-content:space-between;align-items:center}.result-pill span{font-size:12px;color:#54736a}.result-pill i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#5a9f71;margin-right:5px}.how-it-works{background:white;text-align:center;padding:90px 30px 110px}.how-it-works h2{font:700 38px Manrope;margin:10px 0 52px;letter-spacing:-.04em}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:980px;margin:auto}.steps article{position:relative;padding:35px;background:#f7faf8;border-radius:15px}.steps article>span{position:absolute;right:20px;top:17px;color:#a5b6af;font-size:11px}.step-icon{font-size:28px;margin-bottom:18px}.steps h3{font:700 17px Manrope;margin:0 0 9px}.steps p{color:var(--muted);font-size:14px;line-height:1.6;margin:0}dialog{width:min(950px,calc(100% - 28px));max-height:92vh;border:0;border-radius:18px;padding:0;background:#fbfdfb;color:var(--ink);box-shadow:var(--shadow)}dialog::backdrop{background:rgba(11,35,31,.58);backdrop-filter:blur(4px)}.dialog-shell{position:relative;padding:42px;overflow:auto;max-height:92vh}.close-button{position:absolute;right:18px;top:15px;border:0;background:#edf3ef;width:34px;height:34px;border-radius:50%;font-size:24px;color:var(--ink);cursor:pointer}.progress{display:flex;gap:6px;margin-bottom:26px}.progress i{width:34px;height:3px;background:#dce6e1;border-radius:4px}.progress i.active{background:var(--ink)}.panel{display:none}.panel.active{display:block}.panel h2,.history-dialog h2{font:700 32px Manrope;letter-spacing:-.035em;margin:8px 0}.panel-lead{color:var(--muted);margin:0 0 26px}.upload-zone{display:flex;min-height:245px;border:1.5px dashed #9eb4ad;border-radius:15px;background:#f5f9f6;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;text-align:center;transition:.2s}.upload-zone:hover{border-color:var(--green);background:#eff6f1}.upload-zone input{display:none}.upload-zone b{margin:13px 0 5px}.upload-zone small{color:var(--muted)}.upload-icon{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--mint);font-size:24px}.image-workspace{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(270px,.6fr);gap:20px;align-items:start}.image-workspace canvas{width:100%;max-height:520px;object-fit:contain;background:#edf2ef;border-radius:12px;cursor:crosshair}.calibration-card{background:white;border:1px solid var(--line);padding:22px;border-radius:12px}.calibration-card>p{color:var(--muted);font-size:14px;line-height:1.5}.calibration-controls{display:flex;gap:8px}.calibration-controls input{width:90px;border:1px solid var(--line);border-radius:7px;padding:10px}.small-button{border:0;background:var(--mint);color:var(--ink);border-radius:7px;font-weight:700;padding:10px;cursor:pointer}.sample-chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0}.sample-chip{width:28px;height:28px;border-radius:50%;border:2px solid white;box-shadow:0 0 0 1px #cad8d1}.inline-actions,.panel-actions{display:flex;align-items:center;justify-content:space-between;margin-top:20px}.hidden{display:none!important}.picked-color{height:50px;border-radius:8px;background:#edf2ef;display:grid;place-items:center;font-size:13px;color:var(--muted);border:1px solid var(--line)}.results-header{display:flex;align-items:center;gap:17px;margin-bottom:25px}.score-ring{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#579073 var(--score),#e4ebe7 0);position:relative}.score-ring:after{content:"";position:absolute;inset:7px;background:#fbfdfb;border-radius:50%}.score-ring b{z-index:1;font:700 18px Manrope}.result-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.result-row{background:white;border:1px solid var(--line);border-radius:10px;padding:15px;display:grid;grid-template-columns:15px 1fr auto;gap:12px;align-items:center}.status-dot{width:10px;height:10px;border-radius:50%;background:var(--status)}.result-row b{display:block;font-size:14px}.result-row small{color:var(--muted)}.reading{font-weight:700}.advice{margin-top:22px;padding:20px;background:#edf5ef;border-radius:11px}.advice h3{margin:0 0 11px;font:700 17px Manrope}.advice ol{margin:0;padding-left:20px;color:#49665e;font-size:14px;line-height:1.65}.history-dialog{max-width:700px}.history-list{display:grid;gap:10px}.history-item{border:1px solid var(--line);background:white;border-radius:11px;padding:16px;display:flex;justify-content:space-between;align-items:center}.history-item small{display:block;color:var(--muted);margin-top:4px}.history-score{font:700 19px Manrope}.empty-state{text-align:center;color:var(--muted);padding:50px 10px}.toast{position:fixed;left:50%;bottom:25px;transform:translate(-50%,20px);background:var(--ink);color:white;border-radius:8px;padding:12px 18px;opacity:0;pointer-events:none;transition:.25s;z-index:10}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:45px}.water-card{height:360px}.hero h1{font-size:49px}.steps{grid-template-columns:1fr}.how-it-works{padding:70px 22px}.image-workspace{grid-template-columns:1fr}.dialog-shell{padding:38px 20px 25px}.result-grid{grid-template-columns:1fr}.trust-row{flex-direction:column;gap:8px}.site-header{padding:0 20px}.hero{padding-left:20px;padding-right:20px}.hero-actions{align-items:flex-start;flex-direction:column}.progress{margin-top:8px}}