:root{
  --green:#3FB877; --gold:#FFC83D; --ink:#2B2540; --cream:#FFF4EA;
  --sub:#6f6884; --line:#e7ddcf; --snap:#F0825C; --purple:#7C5CFF;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; color:var(--ink); background:var(--cream);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"PingFang SC","Microsoft YaHei",sans-serif;
  line-height:1.6; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(rgba(43,37,64,.05) 1.3px,transparent 1.4px);
  background-size:16px 16px;
}
a{color:inherit}
.wrap{max-width:820px; margin:0 auto; padding:0 20px}
header{position:sticky; top:0; z-index:5; background:rgba(255,244,234,.92); backdrop-filter:blur(8px); border-bottom:2px solid var(--ink)}
.bar{display:flex; align-items:center; justify-content:space-between; height:60px; max-width:820px; margin:0 auto; padding:0 20px}
.brand{display:flex; align-items:center; gap:9px; font-weight:900; font-size:18px; text-decoration:none}
.brand img{width:30px; height:30px}
.navcta{display:inline-block; background:var(--green); color:#fff; font-weight:800; text-decoration:none; padding:9px 16px; border:2px solid var(--ink); border-radius:999px; box-shadow:0 3px 0 var(--ink); font-size:14px}
.hero{text-align:center; padding:48px 0 18px}
.eyebrow{display:inline-block; background:var(--gold); color:var(--ink); font-weight:800; font-size:13px; padding:5px 14px; border:2px solid var(--ink); border-radius:999px; box-shadow:0 3px 0 var(--ink)}
h1{font-size:clamp(30px,6vw,46px); line-height:1.1; margin:18px 0 10px}
.lede{font-size:clamp(16px,2.4vw,19px); color:var(--sub); max-width:600px; margin:0 auto}
section{padding:26px 0}
h2{font-size:22px; margin:0 0 14px; padding-bottom:8px; border-bottom:2px solid var(--line)}
details{background:#fff; border:2px solid var(--ink); border-radius:12px; padding:0 18px; margin-bottom:12px}
summary{font-weight:800; cursor:pointer; padding:16px 0; list-style:none; font-size:17px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+"; float:right; color:var(--green); font-weight:900; margin-left:12px}
details[open] summary::after{content:"–"}
details p{margin:0 0 16px; color:var(--ink)}
details a{color:var(--purple); font-weight:700}
.final{text-align:center; background:var(--ink); color:#fff; border-radius:24px; padding:42px 24px; margin:30px 0}
.final h2{color:#fff; border:0}
.final p{color:#cfc8e0; max-width:520px; margin:0 auto 18px}
.btn{display:inline-block; font-weight:900; text-decoration:none; padding:14px 26px; border:2.5px solid #fff; border-radius:14px; box-shadow:0 5px 0 rgba(0,0,0,.25); font-size:17px; background:var(--snap); color:#fff}
.rel{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:8px}
.rel a{display:block; background:#fff; border:2px solid var(--ink); border-radius:14px; padding:16px; text-decoration:none; font-weight:800; box-shadow:0 4px 0 var(--ink); font-size:15px}
footer{border-top:2px solid var(--line); padding:30px 0 50px; text-align:center; color:var(--sub); font-size:14px}
footer a{font-weight:700; text-decoration:none; margin:0 8px}
@media(max-width:640px){ .rel{grid-template-columns:1fr} }

/* 日语排版覆盖：原先每个 ja 页各存一份内联 CSS，与 en/zh 版的唯一差别就是下面这些。 */
html[lang="ja"] body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic",Meiryo,sans-serif;
  line-height:1.7;
  /* 与上面的 JP 字族成对，缺一不可（#622）：理由写在 client/src/index.css 的 `:root:lang(ja)` 那一处，别在这里再抄一遍。 */
  line-break:strict;
}