@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@300;400;500;700&display=swap');
:root{--g:#00ff80;--b:#0000ff;--k:#000;--w:#fff}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--k);background-image:linear-gradient(to right,#151515 1px,transparent 1px);background-size:76px 100%;color:var(--w);font-family:'Noto Sans Thai',system-ui,-apple-system,'Segoe UI','Noto Sans SC',sans-serif;font-size:17px;line-height:1.6;overflow-x:hidden}
img{display:block;max-width:100%;height:auto}
a{color:var(--g);text-decoration:none}
h1,h2,h3{font-weight:700;letter-spacing:-.01em}
:focus-visible{outline:3px solid var(--b);outline-offset:2px}

.hd{position:sticky;top:0;z-index:40;background:var(--k);border-bottom:3px solid var(--g)}
.hd-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:1180px;margin:0 auto;padding:10px 14px}
.mark{display:inline-flex;align-items:center;justify-content:center;min-width:46px;min-height:44px;padding:4px;border:2px solid var(--g);color:var(--g);font-weight:700}
.mark img,.mark svg{width:26px;height:26px;object-fit:contain}
.mark-g{font-size:15px;line-height:1;letter-spacing:.04em;text-align:center}
.mark-i{width:26px;height:26px}
.find{display:flex;flex:1;max-width:330px;border:2px solid var(--g);background:var(--k)}
.find-i{flex:1;min-width:0;height:40px;padding:0 10px;border:0;background:var(--k);color:var(--w);font:inherit;font-size:16px}
.find-i::placeholder{color:#8b8b8b}
.find-b{height:40px;padding:0 15px;border:0;background:var(--g);color:var(--k);font:inherit;font-weight:700;font-size:16px;cursor:pointer}
.rail{border-top:2px solid #1c1c1c;overflow-x:auto;overscroll-behavior-x:contain}
.rail p{display:flex;gap:8px;width:max-content;min-width:100%;max-width:1180px;margin:0 auto;padding:9px 14px}
.rail a{display:inline-flex;align-items:center;min-height:40px;padding:6px 15px;border:2px solid var(--g);border-radius:999px;color:var(--g);font-size:16px;font-weight:700;white-space:nowrap}
.rail a:active{background:var(--g);color:var(--k)}

.hero{position:relative;display:grid;place-items:center;min-height:70vh;padding:64px 16px 72px;border-bottom:3px solid var(--g);background-image:radial-gradient(circle,rgba(0,255,128,.3) 1.4px,transparent 1.6px);background-size:22px 22px}
.hero-art{position:absolute;inset:0;pointer-events:none}
.pic{position:absolute;background:#101010;border:3px solid var(--w);object-fit:cover;filter:grayscale(.2) contrast(1.08)}
.pic-a{top:9%;left:4%;width:34vw;max-width:300px;height:min(32vh,230px);transform:rotate(-3deg)}
.pic-b{right:3%;bottom:7%;width:30vw;max-width:260px;height:min(28vh,200px);border-color:var(--g);transform:rotate(2.6deg)}
.hero-copy{position:relative;z-index:2;max-width:920px;text-align:center}
.hero-copy h1{display:inline-block;margin:0;padding:12px 16px;background:var(--k);border:3px solid var(--g);box-shadow:9px 9px 0 var(--b);font-size:clamp(1.85rem,8.4vw,4.4rem);line-height:1.08;word-break:break-word}

.wrap{max-width:1180px;margin:0 auto;padding:34px 16px 68px}
.body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:22px;align-items:start}

.side{position:sticky;top:116px;padding:16px;border:3px solid var(--g);background:#070707}
.side-h{margin:0 0 8px;color:var(--g);font-size:20px;letter-spacing:.08em}
.side hr{border:0;border-top:2px solid var(--g);margin:0 0 12px}
.side-l{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:2px;counter-reset:s}
.side-l li{counter-increment:s}
.side-l a{display:flex;align-items:center;gap:9px;min-height:40px;padding:6px 4px;border-bottom:1px dashed #2b2b2b;color:var(--w);font-size:16px;font-weight:500}
.side-l a::before{content:counter(s,decimal-leading-zero);min-width:20px;color:var(--g);font-size:12px;font-weight:700;letter-spacing:.06em}
.side-l a:active{color:var(--g)}
.top{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:2px solid var(--g);border-radius:999px;color:var(--g);font-size:16px;font-weight:700}

.doc{min-height:60vh;padding:24px 22px 36px;background:var(--w);border:3px solid var(--w);color:var(--k)}
.doc div{padding:0}
.doc div + div{margin-top:34px;padding-top:26px;border-top:3px solid var(--k)}
.doc div[id]{scroll-margin-top:134px}
.doc h2{margin:0 0 8px;font-size:clamp(1.4rem,4.6vw,2rem);line-height:1.14}
.doc h3{margin:26px 0 6px;font-size:1.18rem;line-height:1.3}
.doc hr{border:0;border-top:3px solid var(--k);margin:10px 0 16px}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px;padding-left:22px}
.doc li{margin-bottom:8px}
.doc strong{background:var(--g);padding:0 2px}
.doc em{background:#e9e9ff;padding:0 2px}
.doc a{color:var(--b);text-decoration:underline;text-underline-offset:3px}
.doc blockquote{margin:0 0 16px;padding:10px 14px;border-left:6px solid var(--b);background:#f1f1f1}
.doc table{width:100%;margin-bottom:16px;border-collapse:collapse;font-size:16px}
.doc th,.doc td{border:2px solid var(--k);padding:8px;text-align:left;vertical-align:top}
.doc code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;background:#eee;padding:1px 4px}

.ft{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:34px 16px 18px;border-top:3px solid var(--g);background:var(--k)}
.ft-brand{margin:0;color:var(--g);font-size:clamp(2rem,10vw,4.8rem);font-weight:700;line-height:.94;letter-spacing:-.02em;word-break:break-word}
.ft-links{display:flex;flex-wrap:wrap;align-content:start;gap:8px;margin:0}
.ft-links a{display:inline-flex;align-items:center;min-height:40px;padding:6px 13px;border:2px solid #2a2a2a;border-radius:999px;color:#d0d0d0;font-size:16px}
.ft-links a:active{border-color:var(--g);color:var(--g)}
.ft-c{grid-column:1/-1;padding-top:12px;border-top:2px solid #1e1e1e;color:#9a9a9a;text-align:center;font-size:15px}

.rv{opacity:0;transform:translateY(12px);transition:opacity .16s linear,transform .16s linear}
.rv.on{opacity:1;transform:none}

@media (max-width:860px){
  .body{grid-template-columns:minmax(0,1fr)}
  .doc{order:1}
  .side{position:static;order:2}
  .side-l{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
  .side-l a{min-height:40px;padding:6px 12px;border:2px solid #2b2b2b;border-bottom:2px solid #2b2b2b}
  .wrap{padding:22px 12px 48px}
  .doc{padding:18px 14px 28px}
  .hero{min-height:62vh;padding:48px 14px 56px}
  .hero-copy h1{box-shadow:6px 6px 0 var(--b)}
}
@media (max-width:640px){
  .ft{grid-template-columns:1fr;gap:14px}
  .ft-brand{font-size:clamp(2rem,13vw,3.4rem)}
  .pic{max-width:50vw;opacity:.92}
  .rail a{font-size:16px}
  .mark{min-width:42px;min-height:42px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
}

button[aria-expanded]{min-width:44px;min-height:44px}