:root{color-scheme:light;--paper:#f7f6f1;--ink:#203633;--muted:#526760;--line:#d8dfd7;--green:#245d4f;--white:#fff;--blue:#246c90}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.65 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:var(--green);text-underline-offset:4px}a:hover{color:#103d33}a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,select:focus-visible{outline:3px solid #d9a33e;outline-offset:4px}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}.site-header,main.home,.site-footer,.demo-shell{width:min(1120px,calc(100% - 40px));margin-inline:auto}.site-header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:24px 0;border-bottom:1px solid var(--line)}.brand{text-decoration:none;display:flex;gap:12px;align-items:center;font-size:18px;font-weight:700}.brand-mark{font-family:serif;color:var(--green);font-size:26px}.brand small{display:block;font-size:12px;font-weight:400;letter-spacing:.02em;color:var(--muted)}.site-header nav{display:flex;gap:20px;font-size:14px}.eyebrow{color:var(--green);text-transform:uppercase;font-size:12px;letter-spacing:.12em;font-weight:700}.hero{padding:60px 0 40px;max-width:850px}.hero h1{font-family:Georgia,"Times New Roman",serif;font-weight:400;line-height:1.1;letter-spacing:-.035em;font-size:clamp(34px,5vw,57px);margin:16px 0 22px}.hero .lead{font-size:20px;max-width:750px;color:#3b554d}.hero p{max-width:740px}.tag{display:inline-flex;padding:4px 10px;border:1px solid var(--line);border-radius:4px;font-size:12px;color:var(--muted)}.section-heading{display:flex;gap:20px;align-items:baseline;justify-content:space-between;padding-top:15px}.section-heading h2{font:400 30px Georgia,serif}.section-heading p{font-size:14px;color:var(--muted)}.demo-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.demo-card{background:var(--white);border:1px solid var(--line);padding:25px;display:flex;flex-direction:column;border-radius:8px}.demo-card .number{font-size:13px;color:var(--muted);letter-spacing:.07em}.demo-card h3{font:400 28px/1.2 Georgia,serif;margin:17px 0 12px}.demo-card p{color:var(--muted);font-size:15px;margin:0 0 20px}.demo-card .watch{color:var(--ink);font-size:14px;border-top:1px solid var(--line);padding-top:16px}.button{display:inline-flex;justify-content:center;align-items:center;gap:8px;text-decoration:none;background:var(--green);border:1px solid var(--green);border-radius:5px;padding:10px 16px;color:white;font-weight:600;line-height:1.4}.button:hover{background:#17483c;color:white}.demo-card .button{margin-top:auto}.button.secondary{background:transparent;color:var(--green);border-color:var(--line)}.related{margin:20px 0 46px;padding:19px 22px;border-left:3px solid #a7bba6;background:#eef2e9;font-size:15px}.explanation{border-top:1px solid var(--line);padding:34px 0;display:grid;grid-template-columns:1fr 1.5fr;gap:55px}.explanation h2{font:400 30px/1.2 Georgia,serif;margin:6px 0}.explanation p{margin:0 0 14px}.explanation ul{padding-left:20px}.site-footer{border-top:1px solid var(--line);padding:24px 0 35px;font-size:13px;color:var(--muted)}.demo-shell{padding:26px 0 45px}.demo-intro{max-width:800px;margin:0 0 25px}.demo-intro h1{font:400 clamp(28px,4vw,42px)/1.15 Georgia,serif;margin:10px 0 15px}.demo-intro p{margin:9px 0}.guide{background:#edf3eb;border:1px solid #d5e1d0;padding:16px 20px;border-radius:6px;margin:20px 0;font-size:15px}.guide p{margin:5px 0}.guide ol{margin:7px 0;padding-left:23px}.controls-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;padding:15px;background:#fff;border:1px solid var(--line);border-radius:7px;margin:15px 0}.controls-bar button{padding:8px 14px;border:1px solid var(--line);background:white;border-radius:5px;min-height:42px}.controls-bar button.primary{background:var(--green);color:white;border-color:var(--green)}.controls-bar label{display:flex;align-items:center;gap:8px;font-size:14px}.controls-bar input[type=number]{width:94px;padding:7px;border:1px solid var(--line);border-radius:4px}.controls-bar input[type=range]{width:110px;accent-color:var(--green)}.view-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.view{margin:0;min-width:0;background:white;border:1px solid var(--line);border-radius:7px;overflow:hidden}.view canvas{display:block;width:100%;aspect-ratio:1}.view figcaption{padding:13px 16px;font-size:14px;line-height:1.5}.view figcaption b{display:block;font-size:16px}.metrics-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:16px 0}.metric-box{border:1px solid var(--line);border-radius:6px;background:white;padding:14px}.metric-box span{font-size:13px;color:var(--muted);display:block}.metric-box strong{font-size:23px;font-weight:500}.model-note{font-size:14px;color:var(--muted)}details.notes{border:1px solid var(--line);border-radius:6px;padding:14px 18px;margin:16px 0;background:white}summary{cursor:pointer;font-weight:600}.notes p,.notes li{font-size:14px}.trace{white-space:pre-wrap;font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--muted);max-height:180px;overflow:auto}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse;font-size:14px}th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}.legend{display:flex;flex-wrap:wrap;gap:18px;font-size:13px;color:var(--muted);margin:12px 0}.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}.river-stage{background:#f5f3ee;border:1px solid var(--line);border-radius:7px;overflow:hidden}.river-stage canvas{display:block;width:100%;height:620px}.running-status{font-size:14px;min-height:24px;color:var(--muted)}.toggle-row{display:flex;gap:14px;flex-wrap:wrap;font-size:14px}.toggle-row label{display:flex;gap:6px;align-items:center}
.concept-overview{margin:4px 0 54px;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgb(25 56 48 / 8%)}.concept-overview>a{display:block}.concept-overview img{display:block;width:100%;max-width:100%;height:auto}.concept-overview figcaption{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px 18px;align-items:start;padding:18px 22px;border-top:1px solid var(--line)}.concept-overview figcaption b{font:400 20px/1.35 Georgia,serif}.concept-overview figcaption span{font-size:14px;line-height:1.55;color:var(--muted)}.concept-overview figcaption a{font-size:13px;font-weight:650;white-space:nowrap}
.card-actions{display:grid;gap:10px;margin-top:auto}.demo-card .card-actions .button{margin-top:0}.standalone-link{text-align:center;font-size:13px;font-weight:650;text-decoration-thickness:1px}.standalone-link::before{content:"Portable example · ";color:var(--muted);font-weight:400}
.watershed-feature{margin:30px 0 48px;padding:30px;background:linear-gradient(145deg,#eaf0e8,#f4f2e9 58%,#e8f0f2);border:1px solid #ccd9d1;border-radius:12px}.feature-copy{max-width:850px}.feature-copy h2{font:400 clamp(27px,4vw,41px)/1.16 Georgia,serif;letter-spacing:-.02em;margin:9px 0 15px}.feature-copy p{max-width:760px;color:#405951;margin:0 0 12px}.feature-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}.screenshot-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:15px;margin-top:25px;min-width:0}.screenshot-card{min-width:0;text-decoration:none;color:inherit}.screenshot-card figure{height:100%;min-width:0;margin:0;background:white;border:1px solid var(--line);border-radius:9px;overflow:hidden;box-shadow:0 8px 24px rgb(25 56 48 / 8%);transition:transform .18s ease,box-shadow .18s ease}.screenshot-card:hover figure{transform:translateY(-2px);box-shadow:0 12px 28px rgb(25 56 48 / 13%)}.screenshot-card img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1346/926;object-fit:cover;object-position:top}.screenshot-card figcaption{display:grid;gap:2px;padding:14px 16px}.screenshot-card figcaption b{font:400 19px Georgia,serif;color:var(--ink)}.screenshot-card figcaption span{font-size:13px;line-height:1.5;color:var(--muted)}
.demo-previews{margin:0 0 48px}.preview-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.preview-card{min-width:0;text-decoration:none;color:inherit}.preview-card figure{height:100%;margin:0;background:var(--white);border:1px solid var(--line);border-radius:9px;overflow:hidden;transition:transform .18s ease,box-shadow .18s ease}.preview-card:hover figure{transform:translateY(-2px);box-shadow:0 10px 25px rgb(25 56 48 / 11%)}.preview-card img{display:block;width:100%;max-width:100%;height:auto;aspect-ratio:1348/925;object-fit:cover;object-position:top}.preview-card figcaption{display:grid;gap:3px;padding:15px 17px}.preview-card figcaption b{font:400 20px Georgia,serif;color:var(--ink)}.preview-card figcaption>span:last-child{font-size:13px;line-height:1.5;color:var(--muted)}.preview-label{color:var(--green);font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}
@media(max-width:760px){.demo-grid,.view-grid,.screenshot-grid,.preview-grid{grid-template-columns:1fr}.demo-card{padding:23px}.hero{padding:35px 0 25px}.hero .lead{font-size:18px}.explanation{grid-template-columns:1fr;gap:16px}.section-heading{display:block}.section-heading p{margin-top:-12px}.site-header nav{gap:12px}.brand small{max-width:130px}.metrics-row{grid-template-columns:repeat(2,minmax(0,1fr))}.river-stage canvas{height:520px}.view canvas{max-height:450px}.site-header,main.home,.site-footer,.demo-shell{width:calc(100% - 28px)}.watershed-feature{padding:22px;margin-bottom:36px}.feature-actions{display:grid}.feature-actions .button{width:100%}.concept-overview{margin-bottom:38px}.concept-overview figcaption{grid-template-columns:1fr;gap:7px}.concept-overview figcaption a{margin-top:4px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}