﻿:root{
  --brand:#0ea5e9;
  --brand-dark:#0369a1;
  --bg:#f8fafc;
  --card:#ffffff;
  --muted:#64748b;
  --border:#e2e8f0;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  background:var(--bg);
  color:#0f172a;
}

.page{
  padding:16px;
}

.article-card{
  max-width:900px;
  margin:0 auto 16px;
  background:var(--card);
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 12px 30px rgba(15,23,42,0.08);
  padding:18px 22px 20px;
}

.article-header{
  max-width:900px;
  margin:0 auto 10px;
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.article-banner{
  height:64px;
  width:auto;
}

.article-headings{
  flex:1;
  min-width:200px;
}

.article-title{
  font-size:1.4rem;
  font-weight:700;
  color:var(--brand-dark);
}

.article-subtitle{
  font-size:0.9rem;
  color:var(--muted);
}

.article-tag{
  display:inline-block;
  margin-top:4px;
  font-size:0.75rem;
  padding:3px 8px;
  border-radius:999px;
  background:#ecfeff;
  color:var(--brand-dark);
  border:1px solid #bae6fd;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
}

h2{
  font-size:1.02rem;
  margin:10px 0 6px;
  color:var(--brand-dark);
}

p{
  font-size:0.92rem;
  line-height:1.55;
  margin-bottom:6px;
}

ul{
  margin:4px 0 8px 18px;
  font-size:0.9rem;
}

li{margin-bottom:3px;}

.formula{
  font-family:"JetBrains Mono","Fira Code",Consolas,monospace;
  font-size:0.86rem;
  background:#f1f5f9;
  border-radius:6px;
  padding:6px 8px;
  display:inline-block;
  margin:4px 0 10px;
}

.effect-table{
  width:100%;
  border-collapse:collapse;
  font-size:0.88rem;
  margin:8px 0 10px;
}

.effect-table th,
.effect-table td{
  border:1px solid var(--border);
  padding:6px 8px;
  text-align:left;
}

.effect-table th{
  background:#e0f2fe;
  font-weight:600;
}

.article-footer{
  max-width:900px;
  margin:0 auto;
  border-top:1px solid var(--border);
  padding-top:6px;
  text-align:right;
  font-size:0.8rem;
  color:var(--muted);
}
