:root{
  --bg:#ffffff;
  --text:#111111;
  --muted:#666666;
  --line:#e9e9e9;
  --soft:#f7f7f8;
  --brand:#ffd400;
  --brand-text:#111111;
  --max:980px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Yu Gothic UI","Hiragino Sans","Noto Sans",sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.7;
}
a{color:inherit}
.site-header{
  position:sticky; top:0; z-index:10;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid var(--line);
}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
.nav{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:68px}
.brand{font-weight:700; letter-spacing:.02em; text-decoration:none}
.nav-links{display:flex; flex-wrap:wrap; gap:14px; font-size:14px; color:var(--muted)}
.hero{padding:72px 0 36px}
.hero h1{font-size:clamp(32px,4.5vw,56px); line-height:1.08; margin:0 0 14px}
.hero p{font-size:18px; color:var(--muted); margin:0; max-width:760px}
.kicker{display:inline-block; font-size:13px; padding:7px 10px; background:var(--soft); border:1px solid var(--line); border-radius:999px; margin-bottom:18px}
.grid{display:grid; gap:20px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  border:1px solid var(--line);
  background:#fff;
  border-radius:18px;
  padding:22px;
}
.card h2,.card h3{margin-top:0; line-height:1.2}
.section{padding:24px 0 10px}
.section h2{font-size:28px; margin:0 0 8px}
.section p.lead{color:var(--muted); margin-top:0}
.btns{display:flex; flex-wrap:wrap; gap:12px; margin-top:24px}
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  min-height:48px; padding:0 18px; border-radius:12px;
  text-decoration:none; font-weight:700; border:1px solid var(--line);
  background:#fff;
}
.btn.primary{background:var(--brand); color:var(--brand-text); border-color:#f2d54a}
.badges{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.badge{font-size:13px; color:var(--muted); padding:7px 10px; border:1px solid var(--line); border-radius:999px; background:#fff}
.list{padding-left:18px; margin:10px 0}
.ad-slot{
  height:120px; border:1px dashed #d6d6d6; border-radius:16px; background:var(--soft);
  display:flex; align-items:center; justify-content:center; color:#8d8d8d; margin:26px 0;
  font-size:14px;
}
.lang-links{display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}
.lang-links a{font-size:14px; color:var(--muted); text-decoration:none; border-bottom:1px solid transparent}
.lang-links a:hover{border-color:var(--muted)}
.footer{border-top:1px solid var(--line); margin-top:42px; padding:28px 0 50px; color:var(--muted); font-size:14px}
.meta-links{display:flex; flex-wrap:wrap; gap:14px; margin-top:8px}
.table-like{display:grid; gap:12px}
.small{font-size:14px; color:var(--muted)}
.notice{border-left:4px solid var(--brand); padding:14px 16px; background:#fffbe5; border-radius:10px}
hr.sep{border:none; border-top:1px solid var(--line); margin:26px 0}
.codebox{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; background:var(--soft); border:1px solid var(--line); border-radius:12px; padding:12px; overflow:auto}
@media (max-width: 820px){
  .grid-2,.grid-3{grid-template-columns:1fr}
  .hero{padding-top:52px}
  .nav{align-items:flex-start; padding:12px 0}
}