:root { --background:hsl(40 20% 97%); --foreground:hsl(30 10% 15%); --secondary:hsl(40 15% 94%); --muted:hsl(30 8% 40%); --border:hsl(38 12% 88%); }
* { box-sizing:border-box; }
body { margin:0; color:var(--foreground); background:var(--background); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic","Noto Sans JP",sans-serif; line-height:1.9; }
a { color:inherit; text-underline-offset:4px; }
header { position:sticky; top:0; z-index:2; background:color-mix(in srgb,var(--background) 82%,transparent); border-bottom:1px solid color-mix(in srgb,var(--border) 58%,transparent); backdrop-filter:blur(14px); }
.header-inner,.footer-inner,main { width:min(100% - 48px,720px); margin-inline:auto; }
.header-inner { min-height:64px; display:flex; align-items:center; justify-content:space-between; }
.wordmark { font-size:1.05rem; font-weight:600; letter-spacing:-.025em; text-decoration:none; }
.back { color:var(--muted); font-size:.82rem; text-decoration:none; }
.back::before { content:"←"; margin-right:8px; }
main { min-height:calc(100vh - 176px); padding:92px 0 120px; }
.product { margin:0 0 18px; color:var(--muted); font-size:.75rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2rem,6vw,3.2rem); font-weight:500; line-height:1.4; letter-spacing:-.04em; }
.updated { margin:15px 0 0; color:var(--muted); font-size:.85rem; }
article { margin-top:58px; }
article>p:first-child { font-size:1.05rem; color:var(--foreground); }
h2 { margin:48px 0 14px; padding-top:8px; font-size:1.18rem; font-weight:600; letter-spacing:-.02em; }
article p,article li { color:var(--muted); }
ul,ol { padding-left:1.4rem; }
li+li { margin-top:8px; }
strong { color:var(--foreground); font-weight:600; }
.related { display:flex; flex-wrap:wrap; gap:20px; margin-top:64px; padding-top:24px; border-top:1px solid var(--border); }
.related a { font-size:.86rem; }
footer { background:color-mix(in srgb,var(--secondary) 45%,transparent); border-top:1px solid var(--border); }
.footer-inner { min-height:112px; display:flex; align-items:center; justify-content:space-between; }
.footer-inner p { margin:0; color:var(--muted); font-size:.8rem; }
@media(max-width:540px){ .header-inner,.footer-inner,main{width:min(100% - 36px,720px)} main{padding:66px 0 88px} article{margin-top:44px} h2{margin-top:40px} }