:root{--paper:#f7f6f0;--ink:#263329;--sub:#647067;--line:#dce0d4;--green:#e2edc4;--dark:#1e3027;--mono:ui-monospace,SFMono-Regular,Consolas,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.65}a{color:inherit;text-underline-offset:4px}a:hover{color:#668044}button,a{touch-action:manipulation}button{font:inherit}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #668044;outline-offset:5px}.header{max-width:1280px;margin:auto;padding:25px 40px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:30px}.brand{display:flex;align-items:center;font-size:24px;letter-spacing:-1px;font-weight:700;text-decoration:none;white-space:nowrap}.mark{background:var(--green);display:inline-flex;align-items:center;justify-content:center;margin-right:11px;width:39px;height:38px;border-radius:7px;font-family:Georgia,serif;font-size:24px}.mark span{font-weight:400;margin:0 -3px}.muted{color:var(--sub)}nav{display:flex;gap:29px}nav a,.github{font-size:13px;text-decoration:none}nav a[aria-current]{font-weight:700;border-bottom:2px solid #7d9655}.github{border:1px solid var(--line);border-radius:5px;padding:7px 13px}.home{max-width:1280px;margin:auto;padding:0 40px}.hero{display:grid;grid-template-columns:1.15fr 1fr;gap:65px;align-items:center;padding:80px 0 74px}.eyebrow,.section-number{font-family:var(--mono);font-size:10px;letter-spacing:1.1px;font-weight:500}.hero-copy>.eyebrow{display:flex;align-items:center;gap:7px}.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#758c50}.version{margin-left:6px;border:1px solid var(--line);padding:1px 7px;border-radius:10px;letter-spacing:0;color:var(--sub)}h1,h2,h3,p{margin-top:0}.hero h1{font-size:clamp(44px,5.4vw,70px);letter-spacing:-3.5px;line-height:1.02;margin:24px 0}.italic{font-family:Georgia,serif;font-weight:400;font-style:italic}.hero-copy>p{max-width:440px;color:var(--sub);font-size:16px;line-height:1.8}.actions{display:flex;gap:25px;align-items:center;margin-top:28px}.button{display:inline-flex;gap:40px;background:var(--dark);color:white;padding:12px 19px;font-size:13px;border-radius:5px;text-decoration:none}.button:hover{background:#3c5235;color:white}.text-link{font-size:13px;text-decoration:none}.install{margin-top:32px;font-family:var(--mono);font-size:12px}.install>span:first-child{color:#8c968a;margin-right:10px}.install-note{display:block;margin:3px 0 0 20px;color:#93998f;font:11px Arial}.demo{border:1px solid #cfd5c8;border-radius:9px;overflow:hidden;box-shadow:0 18px 35px -25px #667854;background:#fcfcf8}.demo-top{padding:13px 20px;font:11px var(--mono);display:flex;justify-content:space-between;border-bottom:1px solid var(--line)}.live{font-size:9px;color:var(--sub);letter-spacing:.5px}.live .dot{margin-right:5px}.counter{background:#e9efd9;padding:25px 24px 20px;text-align:center}.counter>.eyebrow{color:#68735d;font-size:9px}.counter strong{font-family:Georgia,serif;font-weight:400;display:block;font-size:78px;line-height:1.3}.counter-controls{display:flex;justify-content:space-between;align-items:center;font-size:10px;color:#68735d}.counter-controls button{border:1px solid #bdc7ae;background:transparent;width:35px;height:35px;border-radius:50%;font-size:23px;line-height:1;cursor:pointer;color:var(--ink)}.counter-controls button:hover{background:#d0deb8}.code-label{font:9px var(--mono);letter-spacing:1px;color:#879482;padding:20px 24px 0;background:var(--dark)}.demo pre{margin:0;padding:10px 24px 20px;border-radius:0;background:var(--dark);color:#e5e8d9;font:12px/1.65 var(--mono)}.token{color:#c9df96}.number{color:#e8c592}.demo-bottom{font-size:9px;padding:12px 20px;color:var(--sub);display:flex;justify-content:space-between;gap:8px}.principles{border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(3,1fr);padding:32px 0;gap:48px}.section-number{font-size:9px;color:#7c8676}.principles h2{font-size:19px;letter-spacing:-.4px;margin:10px 0 7px}.principles p{font-size:13px;color:var(--sub);line-height:1.8;margin:0}.quote{text-align:center;max-width:820px;margin:76px auto}.quote blockquote{font:30px/1.45 Georgia,serif;letter-spacing:-.4px;margin:22px 0 18px}.quote>p{font-size:12px;color:var(--sub)}.reading{padding:45px 0 75px;border-top:1px solid var(--line)}.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}.section-heading h2{font-size:30px;line-height:1.2;letter-spacing:-1px;margin:0}.section-heading>p{font-size:12px;color:var(--sub);margin:0}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.cards>a{border:1px solid var(--line);border-radius:5px;padding:22px;text-decoration:none;transition:background .15s}.cards>a:hover{background:var(--green)}.cards>a>span{display:flex;justify-content:space-between;font:10px var(--mono);color:var(--sub)}.cards h3{font-size:18px;letter-spacing:-.5px;margin:35px 0 5px}.cards p{font-size:11px;color:var(--sub);margin:0}footer{max-width:1200px;border-top:1px solid var(--line);margin:auto;padding:24px 0;display:flex;align-items:center;justify-content:space-between;gap:15px}footer .brand{font-size:18px}footer p{font-size:11px;color:var(--sub);margin:0}footer>div{display:flex;gap:20px;font-size:11px}footer a{text-decoration:none}.docs-shell{max-width:1200px;margin:auto;display:grid;grid-template-columns:220px minmax(0,1fr);gap:70px;padding:55px 0 90px}.sidebar{align-self:start;position:sticky;top:30px}.sidebar>.eyebrow{color:var(--sub);font-size:9px;display:block;margin-bottom:20px}.sidebar a:not(.source-link){display:flex;gap:15px;padding:11px 12px;font:10px var(--mono);text-decoration:none;border-radius:4px;align-items:center;color:var(--sub)}.sidebar a span{font:13px Arial;color:var(--ink)}.sidebar a[aria-current]{background:var(--green)}.sidebar-note{font:italic 15px/1.7 Georgia,serif;color:var(--sub);border-top:1px solid var(--line);padding-top:22px;margin:30px 10px 20px}.source-link{font-size:11px;color:var(--sub);margin-left:10px}.article{max-width:820px;min-width:0}.article-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:27px}.article-meta>a{font:10px var(--mono);color:var(--sub)}.article h1{font-size:48px;line-height:1.1;letter-spacing:-2px;margin-bottom:25px}.article h2{font-size:26px;letter-spacing:-.7px;line-height:1.3;margin:47px 0 17px;padding-top:22px;border-top:1px solid var(--line)}.article h3{font-size:19px;margin:28px 0 14px}.article p,.article li{font-size:15px;color:#536153;line-height:1.85}.article p a,.article li a{color:#3b6539}.article pre{padding:22px;background:#22352b;color:#e5ebdb;border-radius:6px;overflow:auto;font:12px/1.8 var(--mono);margin:24px 0;max-width:100%}.article code{font-family:var(--mono);font-size:.85em;background:#e9eddf;padding:2px 4px;border-radius:3px;color:#3d5439}.article pre code{background:none;color:inherit;padding:0;font-size:inherit}.article table{display:block;max-width:100%;overflow-x:auto;border-collapse:collapse;font-size:13px;margin:22px 0}.article th{text-align:left;background:#e9eddc}.article th,.article td{padding:12px 15px;border:1px solid var(--line);vertical-align:top}.article blockquote{border-left:3px solid #aabb89;margin:24px 0;padding:1px 20px;background:#edf0e2}.article iframe{width:100%;height:620px;border:1px solid var(--line);border-radius:7px;margin:20px 0}.article details{border:1px solid var(--line);padding:16px;border-radius:5px}.article summary{cursor:pointer}.skip{position:absolute;left:10px;top:-100px;background:white;z-index:10;padding:10px}.skip:focus{top:10px}::selection{background:#d3e1b2}@media(min-width:1500px){.hero{padding-top:100px;padding-bottom:100px}}@media(max-width:1250px){footer,.docs-shell{margin-left:40px;margin-right:40px}.docs-shell{gap:40px}.hero{gap:40px}}@media(max-width:850px){.header{padding:20px 24px;flex-wrap:wrap;gap:16px}.header nav{order:3;width:100%;justify-content:space-between;gap:15px;padding-top:7px}.header .github{margin-left:auto}.home{padding:0 24px}.hero{grid-template-columns:1fr;gap:38px;padding:45px 0}.hero-copy>p{max-width:520px}.hero h1{font-size:64px}.demo{max-width:600px;width:100%;justify-self:center}.principles{gap:22px}.principles h2{font-size:16px}.quote blockquote{font-size:25px}.cards{grid-template-columns:repeat(2,1fr)}footer{margin:0 24px;flex-wrap:wrap}.docs-shell{margin:0 24px;grid-template-columns:1fr;gap:20px;padding-top:25px}.sidebar{display:none}.article{max-width:none}.article h1{font-size:40px}.article-meta{margin-bottom:28px}}@media(max-width:480px){.hero h1{font-size:51px;letter-spacing:-2.4px}.hero-copy>.eyebrow{font-size:8px;letter-spacing:.6px}.hero-copy>p{font-size:15px}.actions{gap:20px}.button{gap:23px}.principles{grid-template-columns:1fr;padding:28px 0;gap:25px}.principles h2{font-size:20px}.principles p{max-width:320px}.quote{margin:50px 0}.quote blockquote{font-size:23px}.section-heading{align-items:start;gap:20px}.section-heading h2{font-size:24px}.section-heading>p{font-size:10px}.cards>a{padding:17px}.cards h3{font-size:17px}.cards p{font-size:11px}.article h1{font-size:36px}.article pre{padding:15px;font-size:11px}.article-meta .eyebrow{font-size:8px}.article-meta>a{font-size:9px}.article p,.article li{font-size:14px}footer p{order:3;width:100%}.article iframe{height:630px}}

.brand-logo{display:block;flex:none;width:39px;height:auto;margin-right:11px}.sidebar-group>.submenu-heading{display:block;color:var(--sub);font-size:9px;margin-top:27px;margin-bottom:10px}
@media(max-width:850px){.sidebar{display:block;position:static}.sidebar a:not(.source-link){display:inline-flex;margin:0 6px 6px 0;padding:8px 10px}.sidebar>.eyebrow{margin-bottom:10px}.sidebar-group>.submenu-heading{margin-top:15px}.sidebar-note,.sidebar>.source-link{display:none}}

@media(min-width:851px){.sidebar{max-height:calc(100vh - 60px);overflow-y:auto}}
@media(max-width:850px){.examples-menu{max-height:210px;overflow-y:auto;padding-bottom:4px}}

.mobile-navigation{display:none}
@media(max-width:850px){
  .header nav[aria-label="Main navigation"],.sidebar{display:none}
  .header .mobile-navigation{display:flex;order:3;width:100%;gap:12px;padding-top:0}
  .mobile-navigation label{flex:1;min-width:0;font:10px/1.5 var(--mono);color:var(--sub)}
  .mobile-navigation select{display:block;width:100%;min-width:0;min-height:44px;margin-top:5px;padding:8px;border:1px solid #a9b5a0;border-radius:5px;background:var(--paper);color:var(--ink);font:16px Arial,Helvetica,sans-serif;cursor:pointer}
  .mobile-navigation select:focus-visible{outline:3px solid #668044;outline-offset:3px}
}