:root{--ink:#142b25;--muted:#62736b;--green:#174f3d;--green-dark:#102d24;--cream:#f8faf7;--line:#dfe6dd;--light:#eef4e9;--accent:#dcf78f;--white:#fff;--shadow:0 18px 50px #172d2910;color-scheme:light}
body{background:var(--cream);font-family:Inter,"Segoe UI",-apple-system,BlinkMacSystemFont,Arial,sans-serif;-webkit-font-smoothing:antialiased}h1,h2,h3{text-wrap:balance}h1,h2{font-weight:650;letter-spacing:-.055em}p{line-height:1.75}a,button,input,select,textarea{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #477e29;outline-offset:5px}.container{width:min(1240px,calc(100% - 96px))}.site-header{position:sticky;top:0;z-index:30;min-height:94px;height:auto;gap:24px;padding-block:20px;background:#f8faf7ed;backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.brand{font-size:24px;letter-spacing:-1.1px;gap:10px;font-weight:740;flex-shrink:0}.brand-mark{width:34px;height:34px;border-radius:11px;background:var(--green-dark);color:var(--accent);font-size:25px;line-height:1;padding-bottom:3px}.brand small{font-size:9px;letter-spacing:.05em;background:#e6eede;border:1px solid #d6e2cb;padding:3px 6px;border-radius:5px;color:var(--green);margin-left:0}.header-nav,.example-nav{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:550}.header-nav a:not(.button){color:#566a60}.header-nav a:not(.button):hover{color:var(--ink)}.header-nav a[aria-current=page]{color:var(--green);font-weight:750}.button{min-height:46px;padding:14px 22px;border-radius:11px;font-size:13px;font-weight:650;letter-spacing:-.015em;transition:background .18s,transform .18s,border-color .18s}.button.primary{background:var(--green-dark);color:white;border:1px solid var(--green-dark)}.button.primary:hover{background:#235340;border-color:#235340;transform:translateY(-2px)}.button.secondary{background:white;color:var(--ink);border-color:#d5dfd2}.button.secondary:hover{background:#eef4e9;border-color:#b1c4a7}.button.ghost{background:#f5f8f1;border-color:var(--line)}.button.small{min-height:36px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:.13em}.eyebrow:before{width:5px;height:5px;vertical-align:2px}.tag{border:1px solid #dce7d3;background:#eff5e9;color:var(--green);font-size:10px;padding:5px 10px}.field label{font-weight:600;color:var(--ink)}.field input,.field select,.field textarea{min-height:48px;border-color:#d7e0d2;background:#fbfcf9;border-radius:10px;font-variant-numeric:tabular-nums}.field input:hover{border-color:#b2c4a9}.field input:focus,.field select:focus,.field textarea:focus{border-color:#658e50;outline:3px solid #d7ebc7;background:white}.field [aria-invalid=true]{border-color:var(--red);background:#fff7f4}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:35px 0 40px;border-top:1px solid var(--line);font-size:12px}.site-footer nav{display:flex;gap:24px;flex-wrap:wrap}.site-footer a{color:var(--muted);text-decoration:none}.site-footer a:hover{color:var(--green);text-decoration:underline}.footer-signature{display:flex;flex-direction:column;gap:5px}.footer-signature strong{color:var(--ink);font-size:17px;letter-spacing:-.035em}.footer-signature small{font-size:11px;color:var(--muted)}.note{font-size:12px;line-height:1.7}.micro{line-height:1.7}.skip-link,.demo-skip{z-index:80}.text-link{font-weight:650;color:var(--green)}
@media(max-width:1050px){.container{width:calc(100% - 64px)}.header-nav,.example-nav{gap:18px}}
@media(max-width:850px){.header-nav a:not(.button){display:inline-flex}.site-header{flex-wrap:wrap;gap:16px}.header-nav{flex-wrap:wrap}}
@media(max-width:650px){.container{width:calc(100% - 36px)}.site-header{padding:17px 0;min-height:78px;position:relative;gap:15px}.brand{font-size:23px}.header-nav{width:100%;justify-content:space-between;gap:12px;font-size:12px}.header-nav .button{min-height:40px;padding:11px 14px;font-size:12px}.site-footer{align-items:start;flex-direction:column;gap:24px;padding:28px 0 35px}.site-footer nav{gap:18px}.field input,.field select,.field textarea{font-size:16px}.button{min-height:46px}.button:hover{transform:none}}
@media(max-width:360px){.header-nav{justify-content:start;gap:16px}.header-nav .button{width:100%}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.button:hover{transform:none}}