:root{--navy:#1d1660;--cream:#fffaf0;--yellow:#ffe34d;--mint:#8af2d9;--pink:#c2225f}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--navy);font:500 16px/1.8 "Hiragino Maru Gothic ProN","Hiragino Sans","Noto Sans JP",sans-serif}
main{max-width:640px;margin:0 auto;padding:28px 20px 48px}
h1{margin:0 0 6px;font-size:28px;line-height:1.3;font-weight:900}
h2{margin:32px 0 8px;padding-bottom:4px;font-size:18px;font-weight:900;border-bottom:4px solid var(--yellow)}
.lead{margin:0 0 20px;font-weight:700}
.by,.updated{margin:0;font-size:13px;opacity:.7}
p,li{margin:8px 0}
ul{padding-left:1.3em}
a{color:var(--navy);font-weight:700;text-decoration-thickness:2px;text-underline-offset:3px}
a:focus-visible{outline:3px solid var(--pink);outline-offset:2px}
.card{margin:12px 0;padding:12px 16px;background:#fff;border:2px solid var(--navy);border-radius:14px;box-shadow:0 3px 0 var(--navy)}
.card h3{margin:0 0 4px;font-size:15px;font-weight:900}
.card p{margin:0}
.pill{display:inline-block;padding:2px 12px;border:2px solid var(--navy);border-radius:999px;background:var(--mint);font-size:13px;font-weight:900}
nav{margin-top:32px;font-size:14px}
.hero{padding:18px 16px;margin-bottom:8px;background:var(--yellow);border:3px solid var(--navy);border-radius:20px;box-shadow:0 4px 0 var(--navy)}