:root{
  --teal:#0A6B73;
  --mint:#3CBFAE;
  --bg:#f7fafa;
  --surface:#ffffff;
  --text:#132b2d;
  --text-muted:#4b6063;
  --border:#dfe9e9;
  --link:#0A6B73;
  --max-width:860px;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0c1718;
    --surface:#122426;
    --text:#eaf2f2;
    --text-muted:#aac0c1;
    --border:#20393c;
    --link:#5fd2c4;
  }
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
.wrap{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 20px 64px;
}
header.site{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 0;
  border-bottom:1px solid var(--border);
  margin-bottom:32px;
  flex-wrap:wrap;
  gap:12px;
}
.brand{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:700;
  font-size:1.2rem;
}
.brand .dot{
  width:28px;height:28px;border-radius:9px;
  background:linear-gradient(135deg,var(--teal),var(--mint));
  flex-shrink:0;
}
nav.site a{
  color:var(--text-muted);
  text-decoration:none;
  margin-left:18px;
  font-size:0.95rem;
}
nav.site a:first-child{margin-left:0;}
nav.site a:hover,nav.site a.active{color:var(--teal);}
@media (prefers-color-scheme: dark){
  nav.site a:hover,nav.site a.active{color:var(--mint);}
}
h1{font-size:1.9rem;margin-top:0;}
h2{font-size:1.3rem;margin-top:2.2em;color:var(--teal);}
@media (prefers-color-scheme: dark){ h2{color:var(--mint);} }
h3{font-size:1.05rem;margin-top:1.6em;}
a{color:var(--link);}
.muted{color:var(--text-muted);font-size:0.92rem;}
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 22px;
  margin:18px 0;
}
.lang-toggle{
  display:inline-flex;
  border:1px solid var(--border);
  border-radius:999px;
  overflow:hidden;
  margin-bottom:28px;
}
.lang-toggle button{
  border:none;
  background:transparent;
  color:var(--text-muted);
  padding:8px 18px;
  font-size:0.9rem;
  cursor:pointer;
}
.lang-toggle button.active{
  background:var(--teal);
  color:#fff;
}
.lang-block{display:none;}
.lang-block.active{display:block;}
.btn{
  display:inline-block;
  background:var(--teal);
  color:#fff !important;
  padding:12px 22px;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
}
.btn:hover{background:var(--mint);}
.btn.secondary{
  background:transparent;
  color:var(--teal) !important;
  border:1px solid var(--teal);
}
.hero{
  text-align:center;
  padding:40px 0 20px;
}
.hero .tagline{
  color:var(--text-muted);
  font-size:1.1rem;
  max-width:520px;
  margin:12px auto 28px;
}
.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:24px;}
ul{padding-left:1.3em;}
li{margin-bottom:0.4em;}
footer.site{
  margin-top:48px;
  padding-top:20px;
  border-top:1px solid var(--border);
  color:var(--text-muted);
  font-size:0.85rem;
  text-align:center;
}
table{width:100%;border-collapse:collapse;margin:1em 0;}
th,td{border:1px solid var(--border);padding:8px 10px;text-align:left;font-size:0.92rem;}
th{background:var(--surface);}
details{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:10px;
  padding:12px 16px;
  margin:10px 0;
}
details summary{cursor:pointer;font-weight:600;}
code{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 6px;
  font-size:0.9em;
}