@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;450;500;550;600;650;700&family=Instrument+Serif:ital@0;1&display=swap');
:root{color-scheme:dark;--bg:#101613;--panel:#1a231e;--line:#303c33;--text:#f2f4ed;--muted:#a4b1a7;--green:#b3eda1;--ink:#172416;font-family:'DM Sans',sans-serif;font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:35px}body{margin:0;background:var(--bg);color:var(--text)}a{color:inherit;text-decoration:none}button,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}svg{width:22px;height:22px;flex-shrink:0}.svg-defs{position:absolute;width:0;height:0;overflow:hidden}.wrap{width:min(1280px,calc(100% - 96px));margin-inline:auto}.skip{position:absolute;top:-60px;left:20px;padding:12px;background:var(--green);color:var(--ink);z-index:10}.skip:focus{top:10px}:focus-visible{outline:3px solid var(--green);outline-offset:5px}a,button{transition:background .2s,color .2s,border-color .2s,transform .2s}.nav{height:104px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:24px}.brand{display:inline-flex;align-items:center;gap:10px;font-size:24px;font-weight:650;letter-spacing:-1px}.brand svg{width:30px;height:30px;color:var(--green)}nav{display:flex;gap:34px;color:#c0cac2;font-size:14px}nav a:hover,footer a:hover{color:var(--green)}.nav-download{display:flex;gap:14px;align-items:center;border:1px solid #4a584c;border-radius:8px;padding:11px 18px;font-size:14px;font-weight:600}.nav-download:hover{background:var(--panel)}.nav-download svg{width:16px;height:16px}.hero{display:grid;grid-template-columns:.9fr 1.15fr;gap:64px;align-items:center;padding-top:92px;padding-bottom:90px}.eyebrow{font-size:12px;line-height:1.8;letter-spacing:1.5px;font-weight:600;color:var(--green);margin:0 0 24px}.version{letter-spacing:.4px;margin-right:8px;padding:4px 7px;border:1px solid #55704e;border-radius:5px;font-size:12px}h1{font-weight:400;font-size:clamp(72px,7.1vw,104px);font-family:'Instrument Serif',Georgia,serif;line-height:1.03;letter-spacing:-3px;margin:0 0 25px}h1 em{font-weight:400;color:var(--green)}.intro{max-width:450px;font-size:18px;line-height:1.7;color:var(--muted);margin:0 0 30px}.hero-actions{display:flex;gap:12px;flex-wrap:wrap}.button{display:inline-flex;gap:10px;align-items:center;justify-content:center;padding:15px 18px;border-radius:8px;font-size:14px;font-weight:650;min-height:50px}.primary{color:var(--ink);background:var(--green);border:1px solid var(--green)}.primary:hover{background:#c5f7b6;transform:translateY(-2px)}.secondary{border:1px solid #4a584c}.secondary:hover{background:var(--panel)}.button svg{width:18px;height:18px}.compatibility{font-size:12px;color:var(--muted);line-height:1.7;margin-top:15px}.text-link{font-size:12px;color:var(--muted);line-height:2;display:inline-block;margin-top:14px}.text-link span{color:#d5ddd4}.hero-visual{min-width:0;scroll-margin-top:40px}.demo-label{display:flex;justify-content:space-between;gap:10px;color:var(--muted);font-size:10px;letter-spacing:1px;line-height:1.6;margin-bottom:12px}.live-label{color:var(--green);letter-spacing:0;white-space:nowrap}.desktop{height:356px;border:1px solid #6f8569;border-radius:15px;overflow:hidden;background:#86a37b;box-shadow:0 30px 80px #0005;position:relative}.desktop-bar{height:35px;background:#b5c9ac;display:flex;justify-content:space-between;align-items:center;padding:0 13px;color:#20321d;font-size:10px;gap:12px}.desktop-bar>div{display:flex;align-items:center;gap:12px}.desktop-bar svg{width:15px;height:15px}.desktop-bar strong{font-size:11px}.bar-right{font-size:9px}.window-canvas{position:absolute;inset:46px 12px 34px}.demo-window{position:absolute;background:#eaf0e3;color:#243320;border-radius:7px;border:1px solid #35472d;overflow:hidden;box-shadow:0 4px 10px #17231229;transition:left .5s cubic-bezier(.22,.7,.25,1),top .5s cubic-bezier(.22,.7,.25,1),width .5s cubic-bezier(.22,.7,.25,1),height .5s cubic-bezier(.22,.7,.25,1);min-width:0}.window-title{height:25px;background:#dce5d3;border-bottom:1px solid #bbcbb2;display:flex;align-items:center;padding:0 7px;gap:7px;white-space:nowrap;font-size:9px;overflow:hidden;cursor:pointer}.window-title:focus-visible{outline-offset:-3px;outline-color:#35542c}.traffic{display:flex;gap:3px}.traffic i{width:5px;height:5px;border-radius:50%;background:#91a587}.traffic i:first-child{background:#dc947f}.traffic i:nth-child(2){background:#ddc07b}.traffic i:nth-child(3){background:#94b882}.window-content{padding:13px 10px;font-size:10px;line-height:1.7;overflow:hidden;height:calc(100% - 25px)}.window-content h4{font-family:'Instrument Serif',Georgia,serif;font-size:26px;line-height:1.1;font-weight:400;margin:7px 0 14px}.window-content .tiny-label{font-size:8px;text-transform:uppercase;letter-spacing:1px;color:#63795c}.window-content p{margin:0 0 9px}.mock-code{background:#1c2b23;color:#b5c8b6}.mock-code .window-title{background:#293d30;border-color:#405944;color:#c9d8c8}.code-line{display:block;white-space:nowrap;font:10px/2.1 monospace}.code-line .mint{color:#b3eda1}.note-check{border-bottom:1px solid #c4d0ba;padding:6px 0;white-space:nowrap}.note-check:before{content:'✓';margin-right:6px;color:#5d8050}.mock-browser{background:#f2e8d5}.mock-browser .window-title{background:#e1d6bf;border-color:#c8bfae}.browser-tag{display:inline-block;border:1px solid #a69f8c;border-radius:20px;padding:3px 7px;font-size:8px;margin-top:10px}.desktop-bottom{position:absolute;bottom:0;height:27px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;padding:0 13px;color:#243721;font-size:9px}.desktop-bottom svg{height:13px;width:13px}.demo-controls{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:20px}.layout-tabs{display:flex;padding:4px;border:1px solid var(--line);border-radius:8px;background:#17201a}.layout-tabs button{background:none;border:0;color:var(--muted);font-size:13px;padding:9px 13px;border-radius:5px}.layout-tabs button[aria-pressed=true]{background:#d6e7cd;color:var(--ink);font-weight:600}.limit-label{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--muted)}select{background:#202c23;border:1px solid #40513f;color:var(--text);border-radius:5px;padding:7px;font-size:13px;min-width:45px}.demo-actions{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;min-height:45px}.demo-actions p{font-size:12px;color:var(--muted);line-height:1.5;max-width:240px}.demo-actions>div{display:flex;gap:6px;flex-shrink:0}.demo-actions button{border:1px solid #43523f;background:transparent;color:var(--text);border-radius:6px;padding:8px 10px;font-size:12px;min-height:34px}.demo-actions button:hover{background:var(--panel)}.demo-actions button:disabled{opacity:.4;cursor:default}.principles{display:flex;gap:25px;justify-content:space-between;padding:24px 0;border-block:1px solid var(--line);font-size:13px;color:var(--muted)}.principles span:before{content:'✳';color:var(--green);margin-right:10px;font-size:14px}.features{padding-top:94px;padding-bottom:75px}.section-heading{position:relative}.section-heading h2,h2{font-family:'Instrument Serif',Georgia,serif;font-size:52px;font-weight:400;line-height:1.1;letter-spacing:-.8px;margin:0}.section-heading>.eyebrow{margin-bottom:16px}.section-heading>p:last-child{position:absolute;right:0;bottom:0;color:var(--muted);font-size:16px;line-height:1.8}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px;margin-top:44px}.feature{border-top:1px solid #57634f;padding-top:24px}.feature-number{font-size:11px;letter-spacing:1.8px;color:#91a787}.feature h3{font-size:19px;font-weight:500;letter-spacing:-.35px;margin:18px 0 13px}.feature p{font-size:15px;line-height:1.8;color:var(--muted);margin:0}.mini-layouts,.speed-samples{height:100px;margin-top:20px;display:flex;align-items:center;gap:12px}.mini{width:86px;height:58px;border:1px solid #425540;border-radius:6px;padding:6px;display:grid;gap:4px;background:#1e2b21}.mini i{background:#78926d;border-radius:2px}.mini i:first-child{background:var(--green)}.columns-mini{grid-template-columns:repeat(3,1fr)}.focus-mini{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr}.focus-mini i:first-child{grid-row:span 2}.grid-mini{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.stack-visual{position:relative;height:100px;margin-top:20px}.stack-visual>div{position:absolute;width:145px;height:58px;border:1px solid #729067;background:#243924;border-radius:6px;top:12px;left:0}.stack-visual>div:nth-child(2){top:23px;left:12px;background:#365232}.stack-visual>div:nth-child(3){top:34px;left:24px;background:#b3eda1;border-color:#b3eda1;display:flex;padding:10px;gap:4px}.stack-visual span{width:4px;height:4px;border-radius:50%;background:#59864b}.speed-samples{gap:6px}.speed-samples span{border:1px solid #3d4f3c;border-radius:6px;color:var(--muted);font-size:13px;padding:10px 14px}.speed-samples .selected{border-color:var(--green);color:var(--green);background:#243522}.small-features{border-top:1px solid var(--line);padding-top:28px;margin-top:18px;display:grid;grid-template-columns:repeat(3,1fr);gap:36px}.small-features b{font-size:14px;font-weight:550}.small-features p{font-size:14px;color:var(--muted);line-height:1.7;margin:8px 0}.install{border-top:1px solid var(--line);padding-block:75px;display:grid;grid-template-columns:1fr 1fr;gap:80px}.install .eyebrow{margin-bottom:16px}.install h2{font-size:60px;margin-bottom:28px}.setup ol{list-style:none;padding:0;margin:0}.setup li{display:flex;gap:22px;margin-bottom:26px}.setup li>span{font-size:12px;color:var(--green);font-family:monospace;padding-top:4px}.setup h3{font-size:16px;font-weight:550;margin:0 0 7px}.setup p{font-size:14px;line-height:1.7;color:var(--muted);margin:0}.setup .build-note{font-size:12px;line-height:1.7;border-top:1px solid var(--line);padding-top:18px}footer{border-top:1px solid var(--line);padding-block:28px;display:flex;align-items:center;gap:25px;margin-bottom:15px}footer .brand{font-size:20px}footer .brand svg{width:24px;height:24px}footer>span{font-size:12px;color:var(--muted)}footer>a:last-child{margin-left:auto;font-size:13px;color:var(--muted)}
@media(min-width:1450px){.hero{gap:80px}.desktop{height:390px}}@media(max-width:1100px){.wrap{width:calc(100% - 56px)}.hero{gap:32px;grid-template-columns:1fr 1.1fr}.hero-actions{gap:8px}.button{padding:13px;font-size:13px}.demo-label{font-size:9px}.bar-right{display:none}.demo-actions{align-items:flex-start}.demo-actions p{max-width:180px}.feature-grid,.small-features{gap:24px}.section-heading>p:last-child{position:static}.principles{flex-wrap:wrap;justify-content:flex-start;gap:18px 32px}.install{gap:40px}}@media(max-width:800px){.nav{height:82px}.hero{grid-template-columns:1fr;padding-top:55px;gap:48px;padding-bottom:45px}.hero-copy{max-width:580px}h1{font-size:88px}.intro{max-width:520px}.hero-actions .button{padding:15px 20px;font-size:14px}.desktop{height:385px}.demo-label{font-size:11px}.bar-right{display:block}.demo-actions p{max-width:none}.feature-grid{grid-template-columns:1fr}.feature{display:grid;grid-template-columns:1fr 180px;column-gap:28px}.feature-number{grid-column:1 / -1}.feature h3{grid-column:1}.feature p{grid-column:1}.feature>div{grid-column:2;grid-row:2 / 4;margin:0;align-self:center}.mini-layouts{flex-wrap:wrap;gap:6px;height:auto}.mini{width:75px;height:48px}.speed-samples{flex-wrap:wrap;gap:6px}.small-features{grid-template-columns:1fr;gap:14px}.install{grid-template-columns:1fr;gap:40px}.features{padding-top:65px}}@media(max-width:520px){.wrap{width:calc(100% - 36px)}.nav{gap:12px}.brand{font-size:22px}.nav nav{display:none}.nav-download{padding:9px 12px}h1{font-size:74px;letter-spacing:-2px}.hero{padding-top:40px}.eyebrow{font-size:10px;letter-spacing:1px}.intro{font-size:16px}.hero-actions{gap:10px}.hero-actions .button{padding:14px;font-size:13px}.text-link{font-size:12px}.desktop{height:325px}.desktop-bar>div>span,.bar-right{display:none}.demo-label{font-size:9px;letter-spacing:.5px}.demo-controls{gap:8px}.layout-tabs button{padding:9px;font-size:12px}.limit-label{font-size:11px;gap:5px}.demo-actions{gap:7px}.demo-actions p{font-size:11px}.demo-actions button{padding:8px;font-size:11px}.window-content{padding:10px 7px}.window-content h4{font-size:21px}.principles{display:grid;grid-template-columns:1fr 1fr;gap:16px;font-size:11px;line-height:1.6}.principles span:before{margin-right:6px}.section-heading h2,h2{font-size:43px}.feature{display:block}.feature>div{margin-top:18px}.mini-layouts{height:75px;flex-wrap:nowrap}.mini{width:90px;height:58px}.speed-samples{height:75px}.install h2{font-size:52px}footer{flex-wrap:wrap;gap:16px}footer>span{display:none}.setup li{gap:16px}.feature p{font-size:15px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Functional demo controls */
:root{--motion-duration:320ms}[hidden]{display:none!important}.demo-controls{flex-wrap:wrap}.demo-window{transition-duration:var(--motion-duration);transition-timing-function:cubic-bezier(.4,0,.2,1)}.window-title{width:100%;color:inherit;text-align:left;border-inline:0;border-top:0;border-radius:0;font-family:inherit}.window-title strong{font-size:10px}.stack-controls{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}.stack-controls button,.animation-controls button{min-height:36px;border:1px solid #51604b;background:#1d2b20;color:var(--text);border-radius:6px;padding:8px 10px;font-size:12px}.stack-controls button:hover,.animation-controls button:hover{background:#34472e}.animation-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:13px;margin-top:12px}.animation-controls .limit-label{font-size:14px}.demo-feedback{font-size:12px;color:var(--muted);line-height:1.6;min-height:38px;margin:10px 0 0}.speed-samples{height:auto;flex-wrap:wrap;gap:6px;margin-top:12px}.speed-samples button{border:1px solid #596951;border-radius:6px;background:transparent;color:var(--muted);font-size:13px;min-height:40px;padding:9px 12px}.speed-samples button[aria-pressed=true]{border-color:var(--green);color:var(--green);background:#243522}.motion-track{display:flex;align-items:center;gap:8px;margin-top:24px;height:44px;padding-left:24px}.motion-track i{width:42px;height:32px;background:#78926d;border:1px solid #b3eda1;border-radius:4px}.motion-track i:first-child{background:var(--green)}.feature p{font-size:16px}
@media(min-width:521px) and (max-width:800px){.feature:has(.motion-track){display:block}.feature:has(.motion-track)>div{margin-top:12px}.feature:has(.motion-track) .speed-samples{margin-bottom:12px}}