@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap");

:root{
  --bg:#fdfdfd;
  --fg:#202124;
  --accent:#18a0fb;
  --accent-lite:#e3f3ff;
  --border:#dfe1e5;
  --radius:.75rem;
  --gap:1.5rem;
}

@media(prefers-color-scheme:dark){
  :root{
    --bg:#1e1f23;
    --fg:#f5f8fa;
    --accent:#5ab4ff;
    --accent-lite:#29364b;
    --border:#3a3c44;
  }
}

*,
*::before,
*::after{box-sizing:border-box}

body{
  margin:0;
  font-family:"Inter",sans-serif;
  background:var(--bg);
  color:var(--fg);
  line-height:1.6;
}

img,
iframe{width:100%;height:auto;display:block;border-radius:var(--radius)}

.frame{width:min(95%,36rem);margin-inline:auto;padding-block:var(--gap)}

.hero{text-align:center;margin-bottom:var(--gap)}
.hero-media{margin-top:var(--gap)}

.content h2{color:var(--accent);margin-top:0}
.content h3{color:var(--accent);font-size:1.05rem;margin-top:1rem}

.block{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:var(--radius);
  padding:var(--gap);
  margin-bottom:var(--gap);
  box-shadow:0 3px 6px rgba(0,0,0,.05);
}

table{width:100%;border-collapse:collapse;font-size:.9rem;margin-top:1rem}
th,td{border:1px solid var(--border);padding:.6rem;text-align:left}
thead{background:var(--accent-lite)}