:root{--ink:#153d3b;--muted:#6c7c78;--green:#197563;--line:#dbe5df;--paper:#f5f7f2}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif}header{height:94px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 6%}.brand{font-size:27px;font-weight:700;text-decoration:none;color:var(--ink);letter-spacing:-1px}.mark{font-size:37px;vertical-align:middle;color:var(--green)}.brand-sub{font-size:12px;font-weight:400;letter-spacing:.4px;margin-left:17px;color:var(--muted)}.workspace{font-size:10px;letter-spacing:1.7px}.workspace i{display:inline-block;width:7px;height:7px;border-radius:50%;background:#70a48c;margin-left:10px}main{max-width:1400px;margin:auto;padding:0 6%}.intro{display:grid;grid-template-columns:1.3fr 1fr;align-items:center;padding:64px 0 48px;gap:30px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:bold;color:var(--green);margin:0 0 20px}h1{font-family:Georgia,serif;font-size:clamp(45px,5vw,72px);font-weight:400;line-height:1.05;letter-spacing:-2.8px;margin:0 0 24px}.lede{max-width:450px;color:var(--muted);font-size:15px;line-height:1.8}.water-art{height:275px;position:relative;display:grid;place-items:center;overflow:hidden;background:radial-gradient(ellipse,#dbeae0 0,transparent 67%)}.droplet{width:120px;height:150px;border-radius:5% 60% 55% 60%;transform:rotate(45deg);background:radial-gradient(at 30% 20%,#effff5 0%,#80b5a4 30%,#2d796c 70%,#0b514a 100%);box-shadow:18px 22px 35px #20564b24,inset -8px -9px 15px #0f65564d}.orbit{position:absolute;width:300px;height:100px;border:1px solid #a7c1b255;border-radius:50%;transform:rotate(-22deg)}.orbit-two{transform:rotate(28deg);width:370px;height:155px}.water-art>span{position:absolute;bottom:7px;left:15%;font-family:Georgia,serif;font-size:21px}.water-art small{display:block;font:8px Arial;letter-spacing:2px;margin-top:8px;color:var(--muted)}.stats{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:45px;padding:24px 0}.stats>div{padding-left:26px;border-left:1px solid var(--line)}.stats>div:first-child{border:0;padding-left:0}.stats strong{display:block;font-size:21px;font-weight:500;margin-bottom:7px}.stats span{font-size:11px;color:var(--muted)}.workbench{display:grid;grid-template-columns:1.8fr 1fr;gap:25px;align-items:start}.panel{background:white;border:1px solid var(--line);border-radius:12px;padding:30px}.panel-head{display:flex;align-items:center;justify-content:space-between;gap:15px}.panel .eyebrow{margin-bottom:12px}h2{font-family:Georgia,serif;font-weight:400;font-size:29px;letter-spacing:-.8px;margin:0}p.muted{color:var(--muted);font-size:12px;line-height:1.7;margin:15px 0 28px}.text-button{border:0;background:none;color:var(--green);font-size:11px;cursor:pointer;padding:10px 0}.fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:23px 18px}label{display:block;font-size:11px;font-weight:600;line-height:1.6;margin-bottom:8px}label span{display:block;font-size:10px;font-weight:400;color:var(--muted)}input{width:100%;padding:12px 10px;background:#fafbf8;border:1px solid var(--line);border-radius:6px;color:var(--ink);font-size:14px}input::placeholder{color:#a1aaa3;font-size:12px}.field small{display:block;color:#89958b;font-size:9px;margin-top:7px}.form-footer{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding-top:23px;margin-top:28px}
.samples{border-top:1px solid var(--line);margin-top:28px;padding-top:24px}
.samples .eyebrow{margin-bottom:8px}
.samples .muted{margin:0 0 16px}
.sample-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.sample{text-align:left;background:#f7faf6;border:1px solid var(--line);border-radius:8px;padding:13px 14px;cursor:pointer;color:var(--ink);font:inherit}
.sample:hover,.sample:focus-visible{border-color:var(--green);background:#eff7f1}
.sample strong{display:block;font-size:11.5px;margin-bottom:6px}
.sample small{display:block;color:var(--muted);font-size:9.5px;line-height:1.5}
.sample-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.sample-head strong{margin-bottom:0}
.verdict{font-style:normal;font-size:9px;font-weight:700;letter-spacing:.4px;padding:3px 7px;border-radius:999px;white-space:nowrap}
.verdict.ok{background:#e3f2ea;color:#116b52}
.verdict.warn{background:#fdeee2;color:#95602a}
.sample-values{margin-top:18px;overflow-x:auto}
.sample-values table{border-collapse:collapse;width:100%;font-size:11px}
.sample-values caption{text-align:left;color:var(--muted);font-size:9.5px;line-height:1.6;padding-bottom:8px}
.sample-values caption span{display:block}
.sample-values th,.sample-values td{border-top:1px solid var(--line);padding:7px 10px;text-align:right;vertical-align:middle;white-space:nowrap}
.sample-values td{font-variant-numeric:tabular-nums}
.sample-values thead th{color:var(--muted);font-size:9.5px;letter-spacing:.3px;text-transform:uppercase;text-align:right}
.sample-values thead th:first-child{text-align:left}
.sample-values th:first-child,.sample-values td:first-child{padding-left:0}
.sample-values th:last-child,.sample-values td:last-child{padding-right:0}
.sample-values th[scope="row"]{text-align:left;font-weight:600}
.sample-values th[scope="row"] span{color:#89958b;font-weight:400}
.sample-values tbody tr:last-child th,.sample-values tbody tr:last-child td{border-bottom:1px solid var(--line)}.primary{border:0;border-radius:6px;background:var(--green);color:#fff;padding:14px 20px;font-size:12px;cursor:pointer}.primary span{margin-left:18px}.primary:disabled{opacity:.6;cursor:wait}.result{background:#eaf0e7;min-height:340px;border-color:#dce6d8}.result-icon{font-size:52px;color:#71a28c;margin:25px 0 15px}.result h2{font-size:30px}.result p:not(.eyebrow){font-size:12px;line-height:1.8;color:#6a7d70;margin:17px 0 24px}.tag{font-size:8px;letter-spacing:1.2px;border:1px solid #c9d8c8;border-radius:20px;padding:7px 10px;display:inline-block}.note{display:flex;gap:13px;padding:23px 5px 10px}.note-icon{font-size:20px}.note h3{font-size:12px;margin:2px 0 8px}.note p,details p{font-size:11px;line-height:1.8;color:var(--muted);margin:0}details{padding:15px 5px;font-size:11px}summary{cursor:pointer;margin-bottom:10px}footer{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid var(--line);margin-top:64px;padding:25px 0 35px;font-size:10px;color:var(--muted)}footer .brand{font-size:20px}button:hover{filter:brightness(.92)}:focus-visible{outline:3px solid #72bba6;outline-offset:3px}@media(max-width:900px){.workbench{grid-template-columns:1fr}.intro{padding-top:45px}.fields{gap:18px}.workspace{display:none}aside{display:grid;grid-template-columns:1fr 1fr;gap:20px}aside details{grid-column:2}.result{grid-row:span 2}.note{padding:10px 0}}@media(max-width:600px){header{height:75px}.brand-sub{display:none}.intro{grid-template-columns:1fr;padding-bottom:25px;gap:0}.water-art{height:200px}.droplet{width:80px;height:100px}.stats{gap:10px;margin-bottom:25px}.stats>div{padding-left:12px}.stats strong{font-size:16px}.stats span{font-size:9px;line-height:1.5;display:block}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}
.sample-grid{grid-template-columns:1fr}.panel{padding:22px}h2{font-size:26px}.panel-head{align-items:flex-start}aside{display:block}.result{min-height:300px}.note{padding-top:23px}footer{flex-wrap:wrap;margin-top:35px}footer>span:last-child{width:100%}h1{letter-spacing:-1.5px}}

/* Responsive workspace and comfortable touch targets. */
header .brand, .intro>div, .workbench>*, aside>*, .field{min-width:0}
.stats{grid-template-columns:repeat(4,minmax(0,1fr))}
.stats strong{overflow-wrap:anywhere}
.sample-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.sample-head{flex-wrap:wrap}
.text-button,summary{min-height:44px}
input{min-height:46px;font-size:16px}
.primary{min-height:46px}
.sample-values{max-width:100%;overscroll-behavior-x:contain}
.sample-values table{min-width:450px}
@media(min-width:901px) and (max-width:1150px){.workbench{grid-template-columns:minmax(0,1.65fr) minmax(0,1fr);gap:20px}.panel{padding:24px}.fields{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.workbench{grid-template-columns:minmax(0,1fr)}.intro{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}aside{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:600px){header{padding:0 5%}main{padding:0 5%}.intro{grid-template-columns:minmax(0,1fr);padding-top:32px}.lede{font-size:14px}.stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:0;padding:0}.stats>div{padding:18px 12px;border-left:0}.stats>div:first-child{padding:18px 12px}.stats>div:nth-child(even){border-left:1px solid var(--line)}.stats>div:nth-child(n+3){border-top:1px solid var(--line)}.stats strong{font-size:19px}.stats span{font-size:11px}.panel{padding:20px}.fields{gap:20px 14px}label{font-size:12px}.field small{font-size:10px}.text-button{font-size:12px}.sample-grid{grid-template-columns:1fr}.sample{padding:16px}.sample strong{font-size:13px}.sample small{font-size:12px}.verdict{font-size:10px}.panel-head{flex-wrap:wrap;gap:6px}.panel-head .text-button{padding:10px 0}.result h2{font-size:28px}.note p,details p{font-size:12px}footer{line-height:1.6}}
@media(max-width:360px){.fields{grid-template-columns:minmax(0,1fr)}.form-footer{flex-direction:column-reverse;gap:8px}.primary{width:100%}h1{font-size:40px}.panel{padding:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Keep assessment feedback beside the action that produces it. */
.result { margin-top: 26px; min-height: 280px; scroll-margin-top: 20px; }
.result-icon { margin: 12px 0; font-size: 38px; }
.result [tabindex="-1"]:focus { outline: none; }
.result[data-state="complete"] { border-color: #197563; }
.result[data-state="error"] { background: #fff3e9; border-color: #cf9768; }
.result #retry { display: block; margin-top: 14px; }
.result #retry[hidden] { display: none; }
aside .samples { margin: 0; padding: 24px; }
aside .sample-grid { grid-template-columns: minmax(0, 1fr); }
aside .sample-values { font-size: 11px; }
@media(max-width:900px) { aside { display: block; } .result { min-height: 260px; } }
@media(max-width:600px) { .result { padding: 20px; } aside .samples { padding: 20px; } }

/* Gentle feedback without changing the size or position of the controls. */
.primary { min-width: 158px; touch-action: manipulation; transition: background-color .18s ease, box-shadow .18s ease, transform .12s ease; }
.primary:hover:not(:disabled) { background: #125f50; box-shadow: 0 3px 10px #153d3b1a; }
.primary:active:not(:disabled) { transform: translateY(1px); }
.primary:disabled { opacity: .8; }
.sample { touch-action: manipulation; transition: background-color .18s ease, border-color .18s ease, opacity .18s ease; }
.sample:disabled { cursor: wait; opacity: .7; }
.result { transition: background-color .22s ease, border-color .22s ease; }
.result #result-title { min-height: 2.2em; }
.result #result-body { min-height: 7.2em; }
.result[aria-busy="true"] .result-icon { animation: assess-spin 1.2s linear infinite; }
@keyframes assess-spin { to { transform: rotate(360deg); } }
@media(prefers-reduced-motion:reduce) {
 .primary, .sample, .result { transition: none; }
 .primary:active:not(:disabled) { transform: none; }
 .result[aria-busy="true"] .result-icon { animation: none; }
}