:root{
  --bg:#ffffff; --fg:#1d2327; --muted:#5b6670; --line:#e3e7ea;
  --box:#f6f8f9; --link:#0b6bcb; --alert:#fff8e6; --alert-line:#e8c96a;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#14181b; --fg:#e8ecef; --muted:#9aa5ad; --line:#2b3238;
    --box:#1c2226; --link:#6cb6ff; --alert:#2a2415; --alert-line:#6b5a22;
  }
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Noto Sans JP",sans-serif;
  line-height:1.8; font-size:16px;
}
main{max-width:800px; margin:0 auto; padding:0 16px 48px}
a{color:var(--link)}
.head{border-bottom:1px solid var(--line); margin-bottom:24px}
.pr{background:var(--box); color:var(--muted); font-size:11px; text-align:center; padding:6px 16px; border-bottom:1px solid var(--line)}
.nav{max-width:800px; margin:0 auto; padding:12px 16px; display:flex; flex-wrap:wrap; gap:8px 16px; align-items:baseline}
.brand{font-weight:700; text-decoration:none; color:var(--fg); font-size:15px}
.navlinks{display:flex; flex-wrap:wrap; gap:14px; font-size:13px}
.navlinks a{text-decoration:none}
.crumb{font-size:12px; color:var(--muted); margin-bottom:8px}
.hero{padding:8px 0 4px}
h1{font-size:25px; line-height:1.5; margin:8px 0 12px; letter-spacing:.01em}
h2{font-size:19px; margin:32px 0 12px; padding-bottom:6px; border-bottom:2px solid var(--line)}
.box h2,.cta-title{border:0; padding:0; margin-top:0}
.lead{color:var(--muted); font-size:15px}
section{margin-bottom:8px}
.box{background:var(--box); border:1px solid var(--line); border-radius:10px; padding:18px 20px; margin:16px 0}
.box.alert{background:var(--alert); border-color:var(--alert-line)}
.box p:last-child,.box ul:last-child{margin-bottom:0}
.small{font-size:12px; color:var(--muted); line-height:1.7}
ul,ol{padding-left:1.3em}
li{margin:6px 0}
.pros li::marker{content:"○ "}
.cons li::marker{content:"△ "}
.steps li{margin:14px 0}
.code{letter-spacing:.14em; font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.ccard{display:flex; flex-direction:column; gap:4px; text-decoration:none; color:inherit;
  border:1px solid var(--line); border-left:5px solid var(--c); border-radius:10px; padding:14px 16px; background:var(--box)}
.ccard:hover{border-color:var(--c)}
.ccard-name{font-weight:700; font-size:15px}
.ccard-fee{font-size:12px; color:var(--muted)}
.ccard-for{font-size:12px; color:var(--muted); line-height:1.6}
.tablewrap{overflow-x:auto; margin:14px 0}
table{border-collapse:collapse; width:100%; font-size:14px}
th,td{border:1px solid var(--line); padding:9px 11px; text-align:left; vertical-align:top}
thead th{background:var(--box); font-size:13px; white-space:nowrap}
.cmp tbody th{background:var(--box); font-weight:700}
.spec th{background:var(--box); width:34%; white-space:nowrap}
.cta{--c:#333;--c2:#000; background:linear-gradient(135deg,var(--c) 0%,var(--c2) 100%);
  border-radius:12px; padding:22px 20px; margin:26px 0; text-align:center; color:#fff}
.cta-title{font-size:17px; font-weight:700; color:#fff}
.cta-reward{font-size:14px; opacity:.92; margin:6px 0 14px}
.cta-steps{background:rgba(255,255,255,.15); border:1px dashed rgba(255,255,255,.7); border-radius:8px;
  padding:10px; margin-bottom:16px; font-size:13px}
.cta-btn{display:inline-block; background:#FFD700; color:#222; font-weight:700; text-decoration:none;
  padding:13px 24px; border-radius:8px; font-size:15px}
.cta-note{font-size:12px; opacity:.85; margin-top:12px}
.more{display:inline-block; margin-top:8px; font-size:14px; font-weight:700; text-decoration:none}
.foot{border-top:1px solid var(--line); margin-top:40px; padding:24px 16px 48px; color:var(--muted); font-size:13px}
.foot p{max-width:800px; margin:6px auto}
@media (max-width:600px){
  h1{font-size:21px}
  .cmp thead{display:none}
  .cmp tr{display:block; border:1px solid var(--line); border-radius:8px; margin-bottom:12px; overflow:hidden}
  .cmp th,.cmp td{display:block; border:0; border-bottom:1px solid var(--line)}
  .cmp tr>*:last-child{border-bottom:0}
  .cmp td::before{content:attr(data-l) "："; color:var(--muted); font-size:12px; display:block}
}