:root {
  --bg:#fff;
  --fg:#0b0f19;
  --muted:#6b7280;
  --accent:#1a73e8;
  --radius:16px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--fg); background:var(--bg);
}
.header{position:sticky; top:0; backdrop-filter:saturate(1.2) blur(6px); background:rgba(255,255,255,.85); border-bottom:1px solid #f1f5f9}
.wrap{min-height:100vh; display:flex; flex-direction:column}
.container{width:100%; max-width:1120px; margin:0 auto; padding:16px 24px}
.nav{display:flex; align-items:center; gap:24px}
.brand{display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit}
.brand span{font-weight:600}
.hero{padding:48px 0; text-align:center}
.hero h1{font-size:clamp(32px,4vw,48px); line-height:1.1; margin:16px 0}
.hero p{color:var(--muted); margin:12px 0 0}
.cta{display:flex; justify-content:center; gap:12px; margin-top:24px; flex-wrap:wrap}
.btn{border-radius:12px; padding:12px 18px; border:1px solid #e5e7eb; text-decoration:none; color:var(--fg); display:inline-flex; align-items:center; gap:8px}
.btn-primary{background:#000;color:#fff;border-color:#000}
.grid{display:grid; gap:16px}
@media(min-width:768px){.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
.card{border:1px solid #e5e7eb; border-radius:16px; padding:18px}
.footer{margin-top:auto; background:#000; color:#fff}
.footer a{color:#fff; text-underline-offset:3px}
.select{width:100%; padding:12px 14px; border:1px solid #e5e7eb; border-radius:12px}
.section{padding:32px 0}
.mono{font-family: ui-monospace, "SFMono-Regular", Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace}
.small{font-size:12px; color:#6b7280}
.break{word-break:break-word; overflow-wrap:anywhere}