:root{--bg:#F3F2EE;--ink:#16203A;--sub:#4C566A;--ai:#1F3A6E;--line:#D9DADE;--grid:#E6E6E2;--yama:#B77D0F}
@media (prefers-color-scheme:dark){:root{--bg:#0F1217;--ink:#E8EBF1;--sub:#A2AABA;--ai:#8AA6E6;--line:#2A303B;--grid:#1A1F27}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1.85;-webkit-font-smoothing:antialiased}
.wrap{max-width:720px;margin:0 auto;padding:56px 16px 88px}
header{padding:24px;border:1px solid var(--line);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:14px 14px;margin-bottom:36px}
.mark{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:2px solid var(--ai);color:var(--ai);font:700 18px ui-monospace,Menlo,monospace;margin-bottom:14px;position:relative}
.mark:after{content:"";position:absolute;right:-7px;bottom:-7px;width:12px;height:12px;background:var(--yama)}
h1{font-size:22px;margin:0 0 4px}
.app,.date{color:var(--sub);font-size:14px;margin:0}
h2{font-size:13px;letter-spacing:.14em;color:var(--sub);font-family:ui-monospace,Menlo,monospace;margin:34px 0 8px;font-weight:600}
p{margin:8px 0}ul{margin:8px 0;padding-left:1.2em}li{margin:5px 0}
a{color:var(--ai)}
nav{margin-top:44px;padding-top:20px;border-top:1px solid var(--line);font-size:14px}
footer{margin-top:48px;color:var(--sub);font-size:13px}