body{--dg-font-family:"Sarabun", sans-serif;background:#fff;margin:0;padding:24px 16px;font-family:Sarabun,sans-serif}main{max-width:900px;margin:0 auto}.intro{color:#334155;margin-bottom:16px;font-size:14px;line-height:1.6}.intro-note{margin:24px 0 0}.intro h1{color:#0f172a;margin:0 0 12px;font-size:1.5rem}.intro details{background:#eff6ff;border:1px solid #bfdbfe;border-left:4px solid #3b82f6;border-radius:10px}.intro summary{color:#1e3a8a;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:10px 14px;font-weight:600;list-style:none;display:flex}.intro summary::-webkit-details-marker{display:none}.intro summary:before{content:"";border-bottom:2px solid;border-right:2px solid;width:7px;height:7px;transition:transform .15s;transform:rotate(-45deg)}.intro details[open] summary:before{transform:rotate(45deg)}.intro summary:after{content:"ซ่อน";color:#475569;margin-left:auto;font-size:12px;font-weight:400}.intro details:not([open]) summary:after{content:"แสดง"}.intro summary:focus-visible{outline-offset:-2px;border-radius:8px;outline:2px solid #3b82f6}.intro-body{padding:0 16px 12px 31px}.intro p,.intro ul{margin:0 0 8px}.intro ul{padding-left:20px}.intro li::marker{color:#3b82f6}#log{min-height:1.5em;margin:12px 0 0;font-size:13px}#source{margin-top:32px}.source-card{background:#0f172a;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px #0f172a40}.source-head{background:#1e293b;border-bottom:1px solid #334155;align-items:center;gap:12px;padding:10px 14px;display:flex}.source-head .dots{gap:6px;display:flex}.source-head .dots i{background:#ef4444;border-radius:50%;width:11px;height:11px}.source-head .dots i:nth-child(2){background:#f59e0b}.source-head .dots i:nth-child(3){background:#22c55e}.source-head .file{color:#94a3b8;margin-right:auto;font:12px/1 ui-monospace,Cascadia Code,Consolas,monospace}.source-head button{color:#e2e8f0;font:inherit;cursor:pointer;background:0 0;border:1px solid #475569;border-radius:6px;padding:4px 12px;font-size:13px}.source-head button:hover{background:#334155}#source pre{color:#e2e8f0;counter-reset:line;max-height:28rem;margin:0;padding:16px 0;font:13px/1.6 ui-monospace,Cascadia Code,Consolas,monospace;overflow:auto}#source pre:focus-visible{outline-offset:-2px;outline:2px solid #60a5fa}#source .line{white-space:pre;width:max-content;min-width:100%;padding-right:16px;display:block}#source .line:before{content:counter(line);counter-increment:line;box-sizing:content-box;color:#64748b;text-align:right;-webkit-user-select:none;user-select:none;width:3.5ch;margin-right:16px;padding-left:16px;display:inline-block}.tok-comment{color:#64748b;font-style:italic}.tok-string{color:#a5d6a7}.tok-keyword{color:#c4a7ff}.tok-number{color:#fbbf77}.tok-call{color:#7dd3fc}.site-nav{border-bottom:1px solid #e2e8f0;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:20px;padding-bottom:12px;display:flex}.site-nav a{color:#475569;border-radius:8px;padding:6px 12px;font-size:14px;text-decoration:none}.site-nav a:hover{color:#0f172a;background:#f1f5f9}.site-nav a:focus-visible{outline-offset:1px;outline:2px solid #3b82f6}.site-nav a[aria-current=page]{color:#1d4ed8;background:#eff6ff;font-weight:600}.site-nav .brand{color:#0f172a;margin-right:8px;padding-left:0;font-weight:700}.site-nav .brand:hover{background:0 0}.intro h3{color:#1e3a8a;margin:16px 0 8px;font-size:.95rem}.intro pre{color:#e2e8f0;background:#0f172a;border-radius:8px;margin:0 0 8px;padding:12px 14px;font:12.5px/1.6 ui-monospace,Cascadia Code,Consolas,monospace;overflow:auto}.intro :not(pre)>code{color:#1e3a8a;background:#dbeafe;border-radius:4px;padding:1px 5px;font:.9em ui-monospace,Cascadia Code,Consolas,monospace}.source-toggle{background:#f8fafc;border:1px solid #cbd5e1;border-left:4px solid #0f172a;border-radius:10px}.source-toggle summary{color:#0f172a;cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;padding:10px 14px;list-style:none;display:flex}.source-toggle summary::-webkit-details-marker{display:none}.source-toggle summary:before{content:"";border-bottom:2px solid;border-right:2px solid;width:7px;height:7px;transition:transform .15s;transform:rotate(-45deg)}.source-toggle[open] summary:before{transform:rotate(45deg)}.source-toggle summary:after{content:"แสดง";color:#475569;margin-left:auto;font-size:12px}.source-toggle[open] summary:after{content:"ซ่อน"}.source-toggle summary:focus-visible{outline-offset:-2px;border-radius:8px;outline:2px solid #3b82f6}.source-toggle h2{margin:0;font-size:.95rem;font-weight:600}.source-toggle .source-card{margin:0 12px 12px}
