:root{--fg:#1d2330;--muted:#5d6676;--bg:#fff;--soft:#f4f6fa;--line:#dde2ea;--accent:#2457d6;--danger:#c0362c;--ok:#1d7a46;--warn:#9a6700}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif;color:var(--fg);background:var(--bg)}
.top{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.8rem 1.5rem;border-bottom:1px solid var(--line);flex-wrap:wrap}
.brand{font-weight:700;color:var(--fg);text-decoration:none;font-size:1.1rem}.brand span{color:var(--muted);font-weight:400}
nav{display:flex;gap:1.1rem;align-items:center;flex-wrap:wrap}nav a{color:var(--fg);text-decoration:none}nav a:hover{color:var(--accent)}
main{max-width:900px;margin:0 auto;padding:1.5rem}
footer{max-width:900px;margin:2rem auto;padding:1rem 1.5rem;color:var(--muted);font-size:.85rem;border-top:1px solid var(--line)}
h1{font-size:1.8rem;line-height:1.25;margin:.5rem 0 1rem}h2{margin-top:2.2rem;font-size:1.35rem}h3{margin-top:1.6rem}
.hero p{font-size:1.08rem}
a{color:var(--accent)}
code{background:var(--soft);padding:.1em .35em;border-radius:4px;font-size:.92em}
.code{position:relative;margin:.6rem 0 1rem}.code pre{background:#0f1726;color:#e6edf6;padding:1rem 1.1rem;border-radius:8px;overflow-x:auto;margin:0;font-size:.88rem;line-height:1.5}
.code pre code{background:none;padding:0;color:inherit}
.copy{position:absolute;top:.5rem;right:.5rem;border:1px solid #3a4560;background:#1b2538;color:#e6edf6;border-radius:6px;padding:.15rem .6rem;cursor:pointer;font-size:.8rem}
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;border-radius:8px;padding:.55rem 1rem;font:inherit;cursor:pointer;text-decoration:none}
.btn.small{padding:.3rem .7rem;font-size:.9rem}.btn.secondary{background:var(--soft);color:var(--fg);border:1px solid var(--line)}.btn.danger{background:var(--danger)}
button.link{background:none;border:0;color:var(--muted);cursor:pointer;font:inherit;padding:0}
.inline{display:inline}
.card{border:1px solid var(--line);border-radius:10px;padding:1rem 1.2rem;margin:1rem 0;background:#fff}
.row{display:flex;gap:.8rem;align-items:flex-end;flex-wrap:wrap}
label{display:flex;flex-direction:column;gap:.3rem;font-size:.9rem;color:var(--muted)}
input{font:inherit;padding:.5rem .7rem;border:1px solid var(--line);border-radius:8px;min-width:16rem;color:var(--fg)}
.alert{padding:.7rem 1rem;border-radius:8px;border:1px solid}.alert.error{background:#fdecea;border-color:#f3c3be;color:var(--danger)}
.alert.ok{background:#e8f5ee;border-color:#bfe3cd;color:var(--ok)}.alert.warn{background:#fff6e0;border-color:#f0dca8;color:var(--warn)}
table{border-collapse:collapse;width:100%;margin:.6rem 0 1rem}th,td{text-align:left;padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
table.kv th{width:30%;font-weight:600;white-space:nowrap}
.muted{color:var(--muted)}.small{font-size:.82rem}
.usercode{font:700 2rem/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.15em;margin:.5rem 0}
details{margin:1rem 0}summary{cursor:pointer;color:var(--accent)}