@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/BaiJamjuree-600-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/BaiJamjuree-700-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/BaiJamjuree-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bai Jamjuree'; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/BaiJamjuree-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/IBMPlexMono-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/IBMPlexMono-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/IBMPlexSansThai-400-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/IBMPlexSansThai-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/IBMPlexSansThai-500-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 500; font-display: swap; src: url(/fonts/IBMPlexSansThai-500-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/IBMPlexSansThai-600-thai.woff2) format('woff2'); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: 'IBM Plex Sans Thai'; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/IBMPlexSansThai-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
:root{
  --bg:#F3F5F6; --surface:#FFFFFF; --ink:#0F1E2A; --muted:#566673; --line:#D9E0E4;
  --accent:#E0413F; --accent-ink:#FFFFFF; --link:#0E6E73; --soft:#E7EEF0;
  --term-bg:#0F1E2A; --term-fg:#D7E3EA; --frame:#0B1620; --frame-line:#1C2B36;
  --warn:#B7791F; --err:#C53030;
  --f-display:"Bai Jamjuree","IBM Plex Sans Thai",system-ui,sans-serif;
  --f-body:"IBM Plex Sans Thai",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono","IBM Plex Sans Thai",ui-monospace,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0C151C; --surface:#13202A; --ink:#E4ECF0; --muted:#9AAAB5; --line:#24343F;
  --accent:#FF6866; --accent-ink:#1F0505; --link:#5BC2C7; --soft:#182A35;
  --term-bg:#071017; --frame:#03070A; --frame-line:#1A2832;
  --warn:#F6C177; --err:#FF8F8D; color-scheme:dark}}

/* Layout and header copied from the packethunter theme (style.css) so both sites match. */
*{box-sizing:border-box}
body{margin:0;background:var(--frame);color:var(--ink);font:400 18px/1.7 var(--f-body)}
a{color:var(--link)}
a:focus-visible,button:focus-visible,:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.sprite{position:absolute;width:0;height:0}
.sheet{max-width:1180px;margin:0 auto;background:var(--bg);box-shadow:0 0 0 1px var(--frame-line),0 30px 80px -30px rgba(0,0,0,.6)}
@media (min-width:1220px){.sheet{margin-block:28px;border-radius:14px;overflow:clip}}
.wrap{max-width:1080px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);line-height:1.25;text-wrap:balance;margin:0}
h2{font-size:clamp(1.5rem,3.2vw,2rem);font-weight:700;margin-bottom:20px}
h3{font-size:1.15rem;font-weight:600;margin:24px 0 10px}
h4{font:600 .95rem/1.4 var(--f-display);color:var(--muted);margin:14px 0 6px}
.eyebrow{font:500 .85rem/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 14px}
.section{padding-block:56px}
.band{background:color-mix(in srgb,var(--soft) 55%,var(--bg))}

header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;flex-wrap:wrap;align-items:center;gap:18px;padding-block:12px}
.brand{display:inline-flex;align-items:center;gap:14px;font:700 1.2rem/1 var(--f-display);letter-spacing:.07em;white-space:nowrap;color:var(--ink);text-decoration:none;margin-right:auto}
.brand .wm span{color:var(--accent);letter-spacing:.04em}
.ph-logo{width:34px;height:34px;flex:none;color:var(--accent)}
.brand .ph-logo{width:38px;height:38px}
.nav a.l{color:var(--ink);text-decoration:none;font-weight:500}
.nav a.l:hover{color:var(--link)}
.btn{display:inline-flex;align-items:center;gap:8px;font:600 .95rem/1 var(--f-body);padding:12px 18px;border-radius:8px;text-decoration:none;border:1px solid transparent}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.ghost{border-color:var(--line);color:var(--ink);background:var(--surface)}
.menu-btn{display:none;min-height:0;font:600 .95rem/1 var(--f-body);padding:10px 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.mnav{display:none;width:100%;flex-direction:column;padding-block:4px 10px}
.mnav a{padding:12px 4px;border-top:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:500}
@media (max-width:1100px) and (min-width:721px){.nav a.l{font-size:.95rem}.nav{gap:14px}}
@media (max-width:720px){.nav a.l{display:none}.menu-btn{display:inline-flex}.mnav.open{display:flex}}
@media (max-width:420px){.brand{font-size:.9rem;gap:8px;letter-spacing:.02em}.brand .ph-logo{width:28px;height:28px}.nav{gap:10px}.nav .btn.primary{display:none}.menu-btn{padding:9px 10px;font-size:.85rem}}
.lang-sw{font:600 .9rem/1 var(--f-body);color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:9px 10px;background:var(--surface)}
.lang-sw:hover{border-color:var(--link)}

.hero{position:relative;overflow:hidden;padding-block:48px 56px}
.hero .wrap{position:relative}
.hero-mark{position:absolute;right:-60px;top:-40px;width:320px;height:320px;color:var(--accent);opacity:.07;pointer-events:none}
.hero h1{font-size:clamp(2rem,5.2vw,3.4rem);font-weight:700;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--accent)}
.lead{font-size:1.1rem;color:var(--muted);max-width:52ch;margin:16px 0 24px}
.cta{display:flex;flex-wrap:wrap;gap:12px}

.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cards li{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:10px;padding:16px 18px;font-size:1rem}
@media (max-width:640px){.cards{grid-template-columns:minmax(0,1fr)}}
.note{margin:18px 0 0;font-size:.97rem;color:var(--muted)}

.term{background:var(--term-bg);color:var(--term-fg);border-radius:12px;overflow:hidden;box-shadow:0 18px 40px -24px rgba(0,0,0,.5)}
.term .bar{display:flex;gap:6px;padding:10px 14px;border-bottom:1px solid rgba(255,255,255,.08)}
.term .bar i{width:10px;height:10px;border-radius:50%;background:#3A4B57}
pre{margin:0;overflow-x:auto;white-space:pre;font:400 .82rem/1.65 var(--f-mono)}
pre code{font:inherit}
.term pre{padding:16px 18px 20px}

/* Generator */
.grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:start}
.output{position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto}
@media (max-width:860px){.grid{grid-template-columns:minmax(0,1fr)}.output{position:static;max-height:none}}
form{font-size:1rem}
.field{margin:0 0 12px;flex:1 1 150px;min-width:0}
label{display:block;font-weight:600;font-size:.92rem;margin-bottom:4px}
input[type=text],select,textarea{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font:400 1rem/1.4 var(--f-body)}
textarea{font:400 .88rem/1.5 var(--f-mono);resize:vertical}
.row{display:flex;flex-wrap:wrap;gap:12px}
.row>div{flex:1 1 150px;min-width:0}
.hint{color:var(--muted);font-size:.86rem;font-weight:400;line-height:1.5;margin:4px 0 10px}
.check{font-weight:400;margin:6px 0;overflow-wrap:anywhere}
.check .hint{margin:0}
fieldset{border:1px solid var(--line);border-radius:8px;margin:0 0 12px;padding:8px 12px;min-width:0}
legend{font-weight:600;font-size:.92rem;padding:0 4px}
.step{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:12px}
.step-head,.out-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px}
.step-head h3,.out-head h3{margin:0;font-size:1rem}
.acts{display:flex;gap:4px}
button{min-height:40px;padding:10px 16px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);border-radius:8px;font:600 .95rem/1 var(--f-body);cursor:pointer}
button.ghost{background:var(--surface);border-color:var(--line);color:var(--ink);padding:6px 10px;font-size:.85rem;font-weight:500}
button.ghost:hover{border-color:var(--link)}
button:disabled{opacity:.4;cursor:default}
.add{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:0 0 16px}
.add .field{margin:0}
.out{margin-top:14px}
.out-head{margin-bottom:6px}
.out pre{background:var(--term-bg);color:var(--term-fg);padding:14px 16px;border-radius:10px}
.warnings,.errors{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin-bottom:12px;font-size:.92rem;line-height:1.55}
.warnings{border-left:4px solid var(--warn)}
.errors{border-left:4px solid var(--err)}
.warnings h3,.errors h3{margin:0 0 6px;font-size:1rem}
.warnings ul,.errors ul{margin:0;padding-left:20px}
.error{color:var(--err)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
#turnstile{min-height:70px}

footer.site-foot{border-top:1px solid var(--line);color:var(--muted);font-size:.95rem}
footer.site-foot .wrap{padding-block:28px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
footer.site-foot .tool-foot{display:block;padding-block:24px 0;font-size:.88rem}
.tool-foot p{margin:0 0 4px}
footer.site-foot a{color:var(--muted)}
.foot-brand{display:inline-flex;align-items:center;gap:10px}
[hidden]{display:none!important}