:root{
  --bg:#f4f5f7; --paper:#fff; --ink:#222; --muted:#666;
  --accent:#26384a; --soft:#eef2f6; --green:#eef8f1; --amber:#fff4df; --line:#d8dde3;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
header{background:linear-gradient(135deg,#18293b,#425a72);color:#fff;padding:36px 28px}
header h1{margin:0;font-size:36px}
header p{margin:8px 0 0;font-size:18px}
main{max-width:1200px;margin:0 auto;padding:26px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.card{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:22px;box-shadow:0 1px 5px rgba(0,0,0,.04);margin-bottom:18px}
.card h2,.card h3{margin-top:0;color:#26384a}
.button{display:inline-block;background:#26384a;color:white;text-decoration:none;border-radius:8px;padding:10px 14px;margin-top:8px}
.use{background:var(--green);border-left:6px solid #2f7b57;border-radius:9px;padding:14px;margin:18px 0}
.note{background:var(--amber);border-left:6px solid #c79a00;border-radius:9px;padding:14px;margin:18px 0}
table{width:100%;border-collapse:collapse;margin-top:12px}
th,td{border:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}
th{background:var(--soft)}
code{background:#eef0f2;border-radius:4px;padding:2px 5px}
footer{color:var(--muted);border-top:1px solid var(--line);margin-top:30px;padding-top:18px}