:root{
  color-scheme: light;
  --bg:#fff;
  --text:#141614;
  --muted:#6f756f;
  --line:#e9ebe8;
  --soft:#f6f7f5;
  --soft2:#eef8f1;
  --green:#20bd62;
  --green-dark:#13964a;
  --shadow:0 24px 80px rgba(20,22,20,.10);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-size:15px;
  line-height:1.45;
}
a{color:inherit;text-decoration:none}
.topbar{
  position:sticky;
  top:0;
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding:18px clamp(18px,5vw,72px);
  background:rgba(255,255,255,.88);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(14px);
}
.brand{display:flex;align-items:center;gap:10px;min-width:max-content}
.brand img{border-radius:9px}
.brand strong{
  display:block;
  font-size:18px;
  font-weight:500;
  letter-spacing:0;
}
.brand strong::first-letter{text-transform:none}
.brand small{
  display:block;
  margin-top:-3px;
  color:var(--muted);
  font-size:9px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
nav{display:flex;align-items:center;gap:22px;color:var(--muted);font-size:13px}
nav a:hover{color:var(--text)}
main{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,48px)}
.hero{
  min-height:calc(100vh - 72px);
  display:grid;
  grid-template-columns:minmax(320px,.72fr) minmax(520px,1.28fr);
  align-items:center;
  gap:34px;
  padding:64px 0 44px;
}
.eyebrow{
  margin:0 0 12px;
  color:var(--green-dark);
  font-size:12px;
  font-weight:650;
  letter-spacing:.08em;
  text-transform:uppercase;
}
h1,h2,h3,p{margin-top:0}
h1{
  max-width:760px;
  margin-bottom:18px;
  font-size:clamp(42px,6vw,68px);
  line-height:.95;
  font-weight:560;
  letter-spacing:0;
}
h2{
  margin-bottom:10px;
  font-size:clamp(26px,4vw,44px);
  line-height:1.05;
  font-weight:560;
}
h3{margin-bottom:8px;font-size:17px;font-weight:620}
.lead{
  max-width:680px;
  color:#4f554f;
  font-size:19px;
}
.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid var(--line);
  font-weight:560;
}
.button.primary{background:#111713;color:#fff;border-color:#111713}
.button.primary:hover{background:#202820}
.button.ghost{background:#fff}
.button.ghost:hover{background:var(--soft)}
.app-preview{display:flex;justify-content:center}
.real-preview{justify-content:flex-start}
.app-screen{
  position:relative;
  width:min(100%,760px);
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:12px;
  background:#fff;
  box-shadow:var(--shadow);
}
.app-screen img{
  display:block;
  width:100%;
  height:auto;
}
.interactive-screen::before{
  content:"";
  position:absolute;
  inset:0 auto 0 -2px;
  width:19.5%;
  background:#fff;
  transform:translateX(-105%);
  transition:transform .24s ease;
  pointer-events:none;
  z-index:2;
}
.interactive-screen.show-pan::before{transform:translateX(0)}
.screen-hotspot{
  position:absolute;
  z-index:7;
  border:0;
  padding:0;
  border-radius:999px;
  background:rgba(32,189,98,.001);
  cursor:pointer;
}
.screen-hotspot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:999px;
  border:1px solid rgba(32,189,98,0);
  background:rgba(32,189,98,0);
  transition:background .18s ease,border-color .18s ease;
}
.screen-hotspot:hover::after,
.screen-hotspot.is-on::after{
  background:rgba(32,189,98,.14);
  border-color:rgba(32,189,98,.2);
}
.pan-hotspot{left:1.1%;top:1.2%;width:3.1%;height:4.3%}
.note-hotspot{right:4.35%;top:1.45%;width:3.2%;height:4.2%}
.web-hotspot{right:1.1%;top:1.45%;width:3.2%;height:4.2%}
.model-hotspot{right:8.6%;bottom:4.1%;width:7.4%;height:5.4%}
.preview-panel{
  position:absolute;
  z-index:5;
  pointer-events:none;
  opacity:0;
  transform:translateX(18px);
  transition:opacity .24s ease,transform .24s ease;
}
.preview-note{
  top:0;
  right:0;
  width:30%;
  height:100%;
  overflow:hidden;
  border-left:1px solid #eadf9c;
  background:#fff4c8;
  box-shadow:-8px 0 22px rgba(54,47,20,.08);
}
.interactive-screen.show-note .preview-note,
.interactive-screen.show-web .preview-web,
.interactive-screen.show-model .preview-model-menu{
  opacity:1;
  transform:translateX(0);
  pointer-events:auto;
}
.note-head{
  height:9%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 5%;
  border-bottom:1px solid #eadf9c;
}
.note-head b{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  border-radius:9px;
  background:#f4df83;
  font-size:12px;
  font-weight:560;
}
.note-head span{font-size:16px;color:#8a7431}
.note-tools{
  height:7%;
  display:flex;
  align-items:center;
  gap:7%;
  padding:0 7%;
  border-bottom:1px solid #eadf9c;
}
.note-tools span{
  width:12px;
  height:12px;
  border:1.6px solid #9b7f28;
  border-radius:2px;
}
.note-paper{
  height:84%;
  padding:9% 8% 0 17%;
  color:#a87e28;
  background:
    linear-gradient(90deg,transparent 0 20%,rgba(72,158,177,.32) 20.4%,transparent 20.8%),
    repeating-linear-gradient(0deg,transparent 0 31px,rgba(151,127,54,.24) 32px);
}
.note-paper small{
  display:block;
  margin-bottom:22px;
  font-size:10px;
}
.note-paper p{
  font-family:"Segoe Print","Bradley Hand",cursive;
  font-size:18px;
  color:#a87928;
  font-style:italic;
}
.preview-web{
  top:0;
  right:0;
  width:46%;
  height:100%;
  overflow:hidden;
  border-left:1px solid var(--line);
  background:#fff;
  box-shadow:-8px 0 22px rgba(20,22,20,.06);
}
.web-tabs{
  height:8.6%;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 5%;
  border-bottom:1px solid var(--line);
}
.web-tabs b{
  min-width:112px;
  padding:8px 14px;
  border-radius:8px 8px 0 0;
  background:#f4f4f3;
  font-size:12px;
  font-weight:520;
}
.web-tabs span{font-size:17px;color:#1e211e}
.web-bar{
  height:7.8%;
  display:flex;
  align-items:center;
  gap:18px;
  padding:0 5%;
  border-bottom:1px solid var(--line);
}
.web-bar span{
  width:10px;
  height:10px;
  border-top:1.5px solid #202420;
  border-left:1.5px solid #202420;
  transform:rotate(-45deg);
  opacity:.75;
}
.web-bar span:nth-child(2){transform:rotate(135deg);opacity:.28}
.web-bar strong{
  flex:1;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:center;
  font-size:13px;
  font-weight:400;
}
.web-page{
  display:grid;
  place-content:center;
  min-height:83%;
  padding:0 10%;
  text-align:center;
  color:#8b928b;
}
.web-page h4{
  margin:0 0 8px;
  color:#606760;
  font-size:14px;
}
.web-page p{font-size:13px}
.preview-model-menu{
  right:5.6%;
  bottom:9%;
  width:250px;
  padding:14px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  box-shadow:0 20px 60px rgba(20,22,20,.12);
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .2s ease,transform .2s ease;
}
.preview-model-menu label{
  display:block;
  padding:0 0 12px;
  border-bottom:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}
.preview-model-menu div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 0 0;
  font-size:13px;
}
.preview-model-menu b{font-weight:560}
.preview-model-menu span{
  color:var(--green-dark);
  font-size:12px;
}
.app-screen figcaption{
  position:absolute;
  z-index:5;
  left:28.55%;
  bottom:32.5%;
  width:132px;
  display:flex;
  align-items:center;
  gap:2px;
  min-height:15px;
  padding:0 4px;
  pointer-events:none;
  background:#fff;
  color:#606760;
  font-size:8px;
}
.app-screen figcaption span{
  color:#111713;
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
}
.app-screen figcaption b{
  display:inline-block;
  overflow:hidden;
  max-width:0;
  white-space:nowrap;
  font-weight:400;
  animation:typePreview 4.2s steps(18,end) infinite;
}
.app-screen figcaption::after{
  content:"";
  width:1px;
  height:11px;
  background:#111713;
  animation:cursorBlink .9s step-end infinite;
}
.demo-window{
  width:min(100%,720px);
  min-height:500px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
  box-shadow:var(--shadow);
}
.demo-top{
  height:44px;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 12px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.demo-icon-btn,
.demo-copy,
.demo-book,
.demo-globe,
.demo-pen{
  width:30px;
  height:30px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border:0;
  border-radius:50%;
  background:transparent;
  color:#141614;
  cursor:pointer;
  position:relative;
}
.demo-icon-btn:hover,
.demo-copy:hover,
.demo-book:hover,
.demo-globe:hover,
.demo-pen:hover,
.demo-book.active,
.demo-globe.active{
  background:#eef8f1;
  color:var(--green-dark);
}
.demo-icon-btn::before{
  content:"";
  width:16px;
  height:14px;
  border:1.8px solid currentColor;
  border-radius:2px;
}
.demo-icon-btn span:first-child{
  position:absolute;
  width:1.7px;
  height:14px;
  background:currentColor;
  left:13px;
}
.demo-icon-btn span:last-child{display:none}
.demo-pen::before{
  content:"";
  width:14px;
  height:2px;
  background:currentColor;
  transform:rotate(-42deg);
  border-radius:2px;
  box-shadow:5px -5px 0 -1px currentColor;
}
.demo-copy::before{
  content:"";
  width:12px;
  height:12px;
  border:1.7px solid currentColor;
  border-radius:2px;
  box-shadow:-4px -4px 0 -2px #fff,-5px -5px 0 -1px currentColor;
}
.demo-book::before{
  content:"";
  width:12px;
  height:15px;
  border:1.7px solid currentColor;
  border-radius:2px;
  box-shadow:inset 0 -4px 0 rgba(32,189,98,.16);
}
.demo-globe::before{
  content:"";
  width:16px;
  height:16px;
  border:1.7px solid currentColor;
  border-radius:50%;
  background:
    linear-gradient(currentColor,currentColor) 50% 50%/100% 1px no-repeat,
    linear-gradient(currentColor,currentColor) 50% 50%/1px 100% no-repeat;
}
.demo-spacer{flex:1}
.demo-brand{
  display:flex;
  align-items:center;
  gap:2px;
  min-width:0;
  margin:0 0 14px;
  font-size:17px;
}
.demo-brand b{
  color:var(--green);
  font-size:18px;
  font-weight:560;
  transform:translateY(-2px);
}
.demo-brand span{font-weight:520}
.demo-brand small{
  display:block;
  margin-left:-47px;
  margin-top:21px;
  color:#9aa09a;
  font-size:7px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.demo-toggle{
  display:flex;
  align-items:center;
  height:22px;
  padding:2px;
  border-radius:999px;
  background:var(--soft);
  color:#808780;
  font-size:12px;
}
.demo-toggle strong,
.demo-toggle span{
  min-width:52px;
  padding:1px 10px;
  border-radius:999px;
  text-align:center;
}
.demo-toggle strong{
  background:#fff;
  color:#111713;
  font-weight:650;
}
.demo-body{
  min-height:456px;
  display:grid;
  grid-template-columns:202px minmax(260px,1fr) 180px;
  grid-template-rows:minmax(0,1fr) 178px;
}
.demo-side{
  grid-row:1 / 3;
  display:flex;
  flex-direction:column;
  padding:8px 6px;
  border-right:1px solid var(--line);
  background:#fff;
}
.demo-label{
  margin:4px 0 8px 6px;
  color:#5f665f;
  font-size:11px;
  font-weight:750;
  letter-spacing:.07em;
  text-transform:uppercase;
}
.demo-thread{
  display:block;
  width:100%;
  min-height:25px;
  margin-bottom:2px;
  padding:4px 8px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#2d322d;
  text-align:left;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.demo-thread.pin::before{
  content:"+";
  margin-right:6px;
  color:#a2a8a2;
}
.demo-thread:hover,
.demo-thread.active{
  background:#eff0ee;
  box-shadow:inset 3px 0 0 var(--green);
}
.demo-group{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:11px 7px 5px;
  color:#5f665f;
  font-size:11px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.demo-group span::before{
  content:"";
  display:inline-block;
  margin-right:6px;
  width:0;
  height:0;
  border-left:4px solid currentColor;
  border-top:3px solid transparent;
  border-bottom:3px solid transparent;
  transform:rotate(90deg) translateX(-1px);
}
.demo-group em{
  color:#747a74;
  font-style:normal;
  font-weight:500;
}
.demo-side-footer{
  margin-top:auto;
  padding-top:12px;
  border-top:1px solid var(--line);
  color:#252a25;
  font-size:12px;
}
.demo-side-footer span,
.demo-side-footer b{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:23px;
  padding:2px 8px;
  font-weight:400;
}
.demo-side-footer b{
  color:#8a908a;
  font-size:11px;
}
.demo-side-footer i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--green);
}
.demo-chat{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:9px;
  padding:18px 16px 14px;
  background:#fff;
}
.demo-bubble{
  max-width:86%;
  padding:11px 13px;
  border-radius:16px;
  font-size:13px;
}
.demo-bubble.user{
  align-self:flex-end;
  background:var(--soft);
}
.demo-bubble.ai{
  align-self:flex-start;
  border:1px solid var(--line);
  background:#fff;
}
.demo-status{
  display:flex;
  align-items:center;
  gap:7px;
  color:#3fb950;
  font-size:12px;
}
.demo-status span{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--green);
  animation:statusPulse 1.3s ease-in-out infinite;
}
.demo-composer{
  margin-top:auto;
  min-height:70px;
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 9px 10px 14px;
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.demo-composer span{
  color:#111713;
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:15px;
}
.demo-composer input{
  min-width:0;
  flex:1;
  border:0;
  outline:0;
  color:#4f554f;
  font:inherit;
  font-size:13px;
}
.demo-composer i{
  color:#8a8f8a;
  font-style:normal;
  font-size:12px;
}
.demo-composer button{
  min-width:34px;
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#111713;
  color:#fff;
  font-weight:650;
  cursor:pointer;
  font-size:0;
  position:relative;
  display:grid;
  place-items:center;
}
.demo-composer button::before{
  content:"";
  width:9px;
  height:9px;
  border-left:2px solid currentColor;
  border-top:2px solid currentColor;
  transform:rotate(45deg) translate(1px,2px);
}
.demo-composer button::after{
  content:"";
  position:absolute;
  width:2px;
  height:13px;
  background:currentColor;
  transform:translateY(2px);
}
.demo-browser{
  min-width:0;
  border-left:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:#fff;
}
.demo-tabs{
  height:39px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:0 12px;
  border-bottom:1px solid var(--line);
}
.demo-tabs span{
  min-width:0;
  max-width:112px;
  padding:7px 12px;
  overflow:hidden;
  border-radius:9px;
  background:var(--soft);
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:12px;
}
.demo-tabs i{
  margin-left:auto;
  color:#3b413b;
  font-style:normal;
}
.demo-address{
  padding:10px 14px;
  border-bottom:1px solid var(--line);
  color:#202520;
  font-size:12px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.demo-page{
  padding:13px;
}
.demo-page-title{
  margin-bottom:12px;
  color:#6a716a;
  font-size:11px;
  font-weight:750;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.demo-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:7px;
  padding:8px 9px;
  border-radius:8px;
  background:#f5f6f4;
  font-size:12px;
}
.demo-row.good b{color:var(--green-dark)}
.demo-note{
  grid-column:2 / 4;
  display:flex;
  flex-direction:column;
  border-top:1px solid #eadfa8;
  background:#fff6ce;
}
.demo-note-title{
  width:max-content;
  margin:8px 0 0 10px;
  padding:6px 12px;
  border-radius:10px;
  background:#f2e7bd;
  color:#4f4321;
  font-size:12px;
  font-weight:650;
}
.demo-paper{
  flex:1;
  min-width:0;
  margin-top:6px;
  padding:18px 18px 11px 58px;
  color:#7d6933;
  background:
    linear-gradient(90deg,transparent 0 46px,rgba(111,153,184,.28) 47px 48px,transparent 49px),
    repeating-linear-gradient(#fff6ce 0 27px,#eadfa8 28px);
  font-size:13px;
  font-style:italic;
}
.demo-paper p{margin:0 0 8px}
.demo-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0;
  border-top:0;
  background:transparent;
}
.demo-actions button{
  min-height:27px;
  padding:0 10px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#303630;
  font:inherit;
  font-size:12px;
  cursor:pointer;
}
.demo-actions button:hover,
.demo-actions button.active{
  border-color:#bde7cc;
  background:#effbf3;
  color:#0f7b41;
}
.demo-window.pulse .demo-bubble.ai,
.demo-window.pulse .demo-page,
.demo-window.pulse .demo-paper{
  animation:demoRefresh .58s ease both;
}
.strip{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin:24px 0 70px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--soft);
}
.strip p{margin-bottom:0;color:var(--muted)}
.grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
  margin-bottom:76px;
}
.grid article{
  padding:22px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
}
.grid p{margin-bottom:0;color:var(--muted)}
.section-head{
  max-width:760px;
  margin-bottom:24px;
}
.section-head p:last-child{
  margin-bottom:0;
  color:#4f554f;
  font-size:18px;
}
.models{
  padding:8px 0 78px;
}
.model-stage{
  display:grid;
  grid-template-columns:1fr .82fr;
  gap:18px;
  align-items:stretch;
}
.model-panel,.download-card,.screen-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 48px rgba(20,22,20,.06);
}
.model-panel{
  padding:16px;
}
.panel-title{
  margin:0 0 12px;
  color:#8a908a;
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.model-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:66px;
  padding:13px 14px;
  border-radius:14px;
  background:var(--soft);
}
.model-row + .model-row{margin-top:8px}
.model-row.selected{
  background:#e9faef;
  box-shadow:inset 3px 0 0 var(--green);
}
.model-row strong,.model-row span{display:block}
.model-row strong{font-size:15px}
.model-row span{margin-top:3px;color:var(--muted);font-size:13px}
.model-row em{
  min-width:78px;
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  color:var(--green-dark);
  font-style:normal;
  font-size:12px;
  text-align:center;
}
.download-card{
  position:relative;
  overflow:hidden;
  padding:28px;
}
.download-card::before{
  content:"";
  position:absolute;
  inset:auto 22px 22px auto;
  width:88px;
  height:88px;
  border:1px solid #dcefe3;
  border-radius:24px;
  background:linear-gradient(135deg,#f5fff8,#fff);
  animation:floatCard 4.5s ease-in-out infinite;
}
.download-icon{
  position:relative;
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  margin-bottom:30px;
  border-radius:16px;
  background:#111713;
  color:var(--green);
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-weight:700;
}
.download-card h3{font-size:22px}
.download-card p{color:var(--muted)}
code{
  padding:2px 6px;
  border-radius:6px;
  background:var(--soft);
  color:#313631;
}
.progress{
  height:10px;
  overflow:hidden;
  border-radius:999px;
  background:#edf0ed;
}
.progress span{
  display:block;
  height:100%;
  width:42%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--green),#6dde98);
  animation:downloadProgress 5s ease-in-out infinite;
}
.download-card small{
  display:block;
  margin-top:12px;
  color:var(--muted);
}
.providers{
  padding:0 0 78px;
}
.provider-shell{
  display:grid;
  grid-template-columns:.9fr 1.45fr .9fr;
  gap:12px;
}
.provider-card{
  min-height:190px;
  padding:20px;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
}
.provider-card.local-first{
  background:#111713;
  color:#fff;
  border-color:#111713;
}
.key-card{
  position:relative;
  overflow:hidden;
}
.key-card::after{
  content:"";
  position:absolute;
  right:20px;
  top:20px;
  width:48px;
  height:48px;
  border-radius:16px;
  border:1px solid #dcefe3;
  background:
    linear-gradient(90deg,transparent 46%,#dcefe3 46% 54%,transparent 54%),
    linear-gradient(0deg,transparent 46%,#dcefe3 46% 54%,transparent 54%),
    #f6fff9;
}
.cloud-card{
  background:#fbfbfa;
}
.provider-card p{
  margin-bottom:0;
  color:var(--muted);
}
.provider-card.local-first p{color:#c7cec7}
.provider-kicker{
  display:inline-flex;
  margin-bottom:30px;
  padding:5px 10px;
  border-radius:999px;
  background:var(--soft);
  color:var(--green-dark);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.local-first .provider-kicker{
  background:rgba(32,189,98,.16);
  color:#62db91;
}
.provider-note{
  margin:14px 0 0;
  color:var(--muted);
  font-size:13px;
}
.logo-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:24px;
}
.provider-logo{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 12px;
  border:1px solid var(--line);
  border-radius:999px;
  background:#fff;
  color:#171b17;
  font-size:13px;
  font-weight:650;
}
.provider-logo.openai{
  border-color:#dfe6e1;
  font-weight:600;
}
.provider-logo.glm{
  color:#0f7b41;
  border-color:#bfe8cf;
  background:#f1fff6;
}
.provider-logo.zai{
  color:#202520;
  background:#f4f5f3;
}
.provider-logo.claude{
  color:#6c4e2d;
  border-color:#eadcc9;
  background:#fff8f0;
}
.compare{
  padding:0 0 78px;
}
.compare-table{
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:18px;
  background:#fff;
  box-shadow:0 14px 48px rgba(20,22,20,.05);
}
.compare-row{
  display:grid;
  grid-template-columns:1.05fr 1.55fr 1fr 1fr 1fr;
  gap:0;
  border-top:1px solid var(--line);
}
.compare-row:first-child{border-top:0}
.compare-row > div{
  min-width:0;
  padding:16px;
  border-left:1px solid var(--line);
}
.compare-row > div:first-child{border-left:0}
.compare-head{
  background:#fbfbfa;
  color:#6f756f;
  font-size:11px;
  font-weight:750;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.compare-row.highlight{
  background:#f4fff7;
  box-shadow:inset 3px 0 0 var(--green);
}
.compare-row strong{
  display:block;
  margin-bottom:3px;
  font-size:15px;
}
.compare-row b{
  display:block;
  margin-bottom:3px;
  font-size:13px;
}
.compare-row span{
  display:block;
  color:var(--muted);
  font-size:12px;
}
.screens{
  padding:0 0 78px;
}
.compact-head{margin-bottom:18px}
.screen-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}
.screen-card{
  min-height:290px;
  padding:18px;
}
.screen-card h3{margin-top:18px}
.screen-card p{margin-bottom:0;color:var(--muted)}
.screen-top{
  display:flex;
  align-items:center;
  gap:8px;
  height:32px;
  margin:-4px -4px 14px;
  color:#737973;
  font-size:12px;
}
.screen-top span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--green);
}
.screen-body{
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fbfbfa;
}
.search-line{
  width:100%;
  height:34px;
  margin-bottom:18px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
}
.result-line{
  height:12px;
  width:72%;
  margin-top:10px;
  border-radius:999px;
  background:#e8ebe7;
}
.result-line.wide{width:92%}
.result-line.short{width:48%}
.paper-mini{
  height:146px;
  padding:20px;
  border:1px solid #eadfa8;
  border-radius:14px;
  color:#aa9046;
  background:repeating-linear-gradient(#fff6ce 0 27px,#eadfa8 28px);
}
.paper-mini span{
  display:block;
  width:90px;
  margin-bottom:20px;
  border-bottom:1px solid #cdbb76;
  font-size:11px;
}
.paper-mini i{
  display:block;
  width:58%;
  height:10px;
  margin:11px 0;
  border-radius:999px;
  background:rgba(174,146,70,.35);
}
.paper-mini i:nth-child(3){width:74%}
.paper-mini i:nth-child(4){width:44%}
.terminal-mini{
  height:146px;
  padding:18px;
  border-radius:14px;
  background:#111713;
  color:#fff;
  font-family:ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size:12px;
}
.terminal-mini span{
  display:block;
  margin-bottom:14px;
}
.terminal-mini .dim{color:#899289}
.terminal-mini .ok{color:var(--green)}
.split{
  display:grid;
  grid-template-columns:.8fr 1fr;
  gap:48px;
  padding:54px 0;
  border-top:1px solid var(--line);
}
.split p:last-child{color:#4f554f;font-size:18px}
.requirements{
  padding:58px 0 70px;
  border-top:1px solid var(--line);
}
.req-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.req-list div{
  padding:18px;
  border:1px solid var(--line);
  border-radius:14px;
}
.req-list strong{display:block;margin-bottom:6px}
.req-list span{display:block;color:var(--muted)}
footer{
  display:flex;
  justify-content:space-between;
  gap:16px;
  padding:26px clamp(18px,5vw,72px);
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:13px;
}
footer a{color:var(--text)}
@keyframes downloadProgress{
  0%{width:18%}
  45%{width:72%}
  100%{width:92%}
}
@keyframes floatCard{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-10px)}
}
@keyframes statusPulse{
  0%,100%{transform:scale(.75);opacity:.45}
  50%{transform:scale(1);opacity:1}
}
@keyframes demoRefresh{
  0%{transform:translateY(8px);opacity:.35}
  100%{transform:translateY(0);opacity:1}
}
@keyframes typePreview{
  0%,12%{max-width:0}
  58%,82%{max-width:72px}
  100%{max-width:0}
}
@keyframes cursorBlink{
  50%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .progress span,.download-card::before,.demo-status span,.demo-window.pulse .demo-bubble.ai,.demo-window.pulse .demo-page,.demo-window.pulse .demo-paper,.app-screen figcaption b,.app-screen figcaption::after{animation:none}
  .app-screen figcaption b{max-width:none}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;min-height:auto}
  .app-preview{justify-content:flex-start}
  .grid,.req-list,.screen-grid{grid-template-columns:1fr 1fr}
  .provider-shell{grid-template-columns:1fr 1fr}
  .compare-table{
    display:grid;
    gap:10px;
    overflow:visible;
    border:0;
    box-shadow:none;
    background:transparent;
  }
  .compare-head{display:none}
  .compare-row{
    grid-template-columns:1fr;
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    background:#fff;
  }
  .compare-row > div{
    border-left:0;
    border-top:1px solid var(--line);
  }
  .compare-row > div:first-child{border-top:0}
  .model-stage{grid-template-columns:1fr}
  .split{grid-template-columns:1fr;gap:14px}
}
@media (max-width:640px){
  nav{display:none}
  .topbar{padding:14px 18px}
  .hero{padding-top:42px}
  .demo-window{min-height:auto}
  .demo-body{
    grid-template-columns:1fr;
    grid-template-rows:auto auto auto auto;
  }
  .demo-side{
    grid-row:auto;
    display:flex;
    gap:7px;
    overflow:auto;
    padding:10px;
    border-right:0;
    border-bottom:1px solid var(--line);
  }
  .demo-label{display:none}
  .demo-thread{
    width:auto;
    min-width:max-content;
    margin:0;
  }
  .demo-browser{
    border-left:0;
  }
  .demo-note{
    grid-column:auto;
    grid-template-columns:72px 1fr;
  }
  .demo-actions{padding:10px}
  .grid,.req-list,.screen-grid{grid-template-columns:1fr}
  .provider-shell{grid-template-columns:1fr}
  .strip{align-items:flex-start;flex-direction:column}
  footer{flex-direction:column}
}