:root{
  color-scheme:light;
  --bg:#f8f7f4;--fg:#242a29;--muted:#69716e;
  --card:#fff;--line:#e1e3df;--accent:#176b57;
}
:root.dark{
  color-scheme:dark;
  --bg:#141a19;--fg:#e8efec;--muted:#9aa9a2;
  --card:#1c2422;--line:#33413c;--accent:#7acbb1;
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font:16px/1.65 system-ui,-apple-system,Segoe UI,sans-serif;
}
.shell{max-width:1000px;margin:auto;padding:0 28px}
.top{
  display:flex;justify-content:space-between;align-items:center;
  padding:30px 0;border-bottom:1px solid var(--line)
}
.brand{text-decoration:none;color:var(--fg);font-weight:750;font-size:20px}
button,input,select{
  font:inherit;color:var(--fg);background:var(--card);
  border:1px solid var(--line);border-radius:9px;padding:10px 14px
}
button{cursor:pointer}
.hero{padding:90px 0 75px}
.eyebrow,.section-head{
  font-size:12px;letter-spacing:2px;font-weight:750;color:var(--accent)
}
h1{font-size:clamp(44px,8vw,78px);line-height:1.1;letter-spacing:-3px;margin:20px 0}
.hero p{max-width:660px;font-size:20px;color:var(--muted)}
.meta{display:flex;gap:12px;color:var(--muted);font-size:13px}
section{margin-bottom:75px}
.section-head{
  display:flex;justify-content:space-between;gap:12px;
  border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:25px
}
.live{color:var(--muted);letter-spacing:0}
.feature-card{
  background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:36px
}
.tag{font-size:12px;color:var(--accent);font-weight:700}
h2{font-size:35px;line-height:1.2;letter-spacing:-1px;margin:12px 0}
h3{font-size:20px;line-height:1.3;margin:12px 0}
.feature-card p,.note p{color:var(--muted)}
.toolbar{display:flex;gap:12px;margin-bottom:20px}
.toolbar input{flex:1;min-width:0}
.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.note{
  background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:24px
}
footer{
  display:flex;justify-content:space-between;gap:15px;
  border-top:1px solid var(--line);padding:25px 0 45px;
  color:var(--muted);font-size:13px
}
@media(max-width:650px){
  .shell{padding:0 18px}.hero{padding:65px 0}
  .cards{grid-template-columns:1fr}.toolbar{flex-direction:column}
  .feature-card{padding:23px}footer{flex-direction:column}
}