:root{
  --bg:#0b0f14;
  --panel:#0f1621;
  --line:#1d2a3a;
  --text:#e8eef6;
  --muted:#a9b7c7;
  --accent:#6fcbb2;
  --radius:16px;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  background:radial-gradient(1200px 600px at 20% 0%, #132033 0%, var(--bg) 60%);
  color:var(--text);
}
a{color:inherit;text-decoration:none}
.container{max-width:980px;margin:0 auto;padding:24px}
.header{display:flex;align-items:flex-end;justify-content:space-between;gap:16px}
.logo{margin:0;font-size:40px;letter-spacing:0.5px}
.tagline{margin:6px 0 0;color:var(--muted)}
.nav{display:flex;gap:16px;flex-wrap:wrap}
.nav a{padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:rgba(15,22,33,.6)}
.card{border:1px solid var(--line);background:rgba(15,22,33,.65);border-radius:var(--radius);padding:18px}
.list{margin:0;padding-left:18px}
.muted{color:var(--muted)}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}
.tile{border:1px solid var(--line);background:rgba(15,22,33,.45);border-radius:var(--radius);padding:16px}
.tile h3{margin:0 0 8px}
.footer{padding-top:8px}
@media (max-width:720px){
  .header{align-items:flex-start;flex-direction:column}
  .grid{grid-template-columns:1fr}
}