:root { color-scheme: dark; --bg:#0c1020; --surface:#171c31; --line:#343b59; --text:#f7f3ea; --muted:#aeb5cc; --accent:#f2b45e; font-family:"Hiragino Sans","Yu Gothic UI",system-ui,sans-serif; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; background:radial-gradient(ellipse at top right,#4a244b55,transparent 65%),var(--bg); color:var(--text); line-height:1.85; }
a { color:var(--accent); text-underline-offset:3px; overflow-wrap:anywhere; }
a:focus-visible { outline:3px solid var(--accent); outline-offset:4px; }
header,main,footer { width:min(100% - 32px,860px); margin-inline:auto; }
header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; padding:24px 0; border-bottom:1px solid var(--line); }
.brand { font-size:1.3rem; font-weight:800; text-decoration:none; color:var(--text); }
nav { display:flex; flex-wrap:wrap; gap:12px; }
nav a { display:inline-flex; align-items:center; min-height:44px; }
main { padding:32px 0 12px; }
h1 { font-size:clamp(1.65rem,5vw,2.5rem); line-height:1.4; margin:12px 0 20px; }
h2 { font-size:clamp(1.3rem,4vw,1.65rem); line-height:1.5; margin:44px 0 16px; padding-top:20px; border-top:1px solid var(--line); }
h3 { font-size:1.05rem; margin:24px 0 10px; }
p { margin:12px 0; }
.lead { color:var(--muted); font-size:1.05rem; }
.updated { color:var(--muted); font-size:.8rem; }
.cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:24px 0; }
.card { display:block; padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); color:var(--text); text-decoration:none; }
.card strong { display:block; margin-bottom:8px; color:var(--accent); font-size:1.1rem; }
.card span { color:var(--muted); }
.example { padding:18px; margin:18px 0; border-left:3px solid var(--accent); border-radius:8px; background:var(--surface); }
.table-wrap { overflow-x:auto; margin:18px 0; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; text-align:left; font-size:.95rem; }
th,td { padding:12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { background:var(--surface); }
tr:last-child td { border-bottom:0; }
ol,ul { padding-left:1.5em; }
li { margin:8px 0; }
.button { display:inline-flex; align-items:center; min-height:48px; padding:10px 20px; border-radius:12px; background:var(--accent); color:#291c0a; text-decoration:none; font-weight:700; }
footer { padding:28px 0 36px; margin-top:24px; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; }
.guide-ad-preview { position:fixed; left:0; right:0; bottom:0; padding:16px 12px calc(16px + env(safe-area-inset-bottom)); min-height:66px; text-align:center; background:#171c31f5; border-top:1px solid var(--line); font-size:.8rem; z-index:5; }
body.has-ad-preview { padding-bottom:100px; }
@media(max-width:550px) { .cards { grid-template-columns:1fr; } th,td { padding:9px; } }