@import url('../fonts/fonts.css');:root{--ink:#111;--muted:#777;--line:#d8d8d8;--purple:#753bff;--lime:#c5f500;--orange:#ff8a00}*{box-sizing:border-box}body{margin:0;font-family:Inter,"IBM Plex Sans Thai",sans-serif;color:var(--ink);background:#fff}.wrap{max-width:1040px;margin:auto;padding:22px 28px 70px}header{border-bottom:3px solid #111;padding-bottom:18px}h1{font-size:clamp(34px,6vw,72px);letter-spacing:-.055em;line-height:.9;margin:0}.sub{color:var(--muted);max-width:760px}.nav{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.nav a,.button{border:1px solid #111;background:#fff;color:#111;padding:9px 12px;text-decoration:none;font-weight:700;font-size:12px;cursor:pointer}.nav a:hover,.button:hover{background:#111;color:#fff}.notice{border-left:8px solid var(--orange);padding:10px 14px;margin:22px 0;background:#fafafa;font-size:13px}.types{display:flex;gap:8px;flex-wrap:wrap;margin:18px 0}.types button{border:1px solid #111;padding:8px 12px;background:#fff;cursor:pointer}.types button.on{background:var(--purple);color:#fff;border-color:var(--purple)}form{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}.field{display:flex;flex-direction:column;gap:6px}.field.full{grid-column:1/-1}label{font-size:11px;text-transform:uppercase;letter-spacing:.08em;font-weight:700}input,select,textarea{border:1px solid #111;background:#fff;padding:11px 12px;font:inherit;font-size:14px}textarea{min-height:92px;resize:vertical}.actions{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap;border-top:1px solid #111;padding-top:18px;margin-top:8px}.preview{margin-top:28px}.preview pre{white-space:pre-wrap;background:#f5f5f5;padding:14px;overflow:auto;font:12px/1.5 "IBM Plex Mono",monospace}.ok{color:#236000}.err{color:#b00020}.small{font-size:12px;color:var(--muted)}@media(max-width:720px){.wrap{padding:16px}form{grid-template-columns:1fr}.field.full,.actions{grid-column:1}}