:root{--bg:#0e0f0d;--ink:#0e0f0d;--ink2:#171815;--ink3:#21221e;--line:#ffffff17;--line2:#ffffff2a;--paper:#f0ede4;--text:#d8d5cb;--soft:#bdbab0;--mute:#94968c;--orange:#ef5b9d;--orange-soft:#ef5b9d22;--leaf:#d98ab6;--g1:#8b7cff;--g2:#ef5b9d;--g3:#ffae70;--forest:#3f2538;--rust:#5d273e;--glass:#0e0f0dcc;--shadow:0 20px 60px #0007;color-scheme:dark}
:root[data-theme=light]{--bg:#f6f3ec;--ink:#f6f3ec;--ink2:#ffffff;--ink3:#ece8de;--line:#1a1a1714;--line2:#1a1a1726;--paper:#161714;--text:#2f302b;--soft:#4c4d46;--mute:#77786f;--orange:#d84283;--orange-soft:#d842831a;--leaf:#b44d86;--g1:#8574ed;--g2:#e45191;--g3:#f39b5c;--forest:#f0d5e2;--rust:#f2d7df;--glass:#f6f3eccc;--shadow:0 20px 50px #2a22140f;color-scheme:light}
*{box-sizing:border-box}html{overflow-x:clip;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--paper);font-family:"Plus Jakarta Sans","Noto Sans Thai",sans-serif;line-height:1.6;-webkit-font-smoothing:antialiased;transition:background .3s,color .3s}
a{color:inherit;text-decoration:none}img{max-width:100%}button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px;border-radius:6px}
.wrap{width:min(100% - 32px,1180px);margin:0 auto}
.topbar{position:sticky;top:0;z-index:40;background:var(--glass);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .2s}
.topbar.scrolled{border-bottom-color:var(--line)}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;height:70px;gap:16px}
.brand{color:var(--orange);font-weight:800;font-size:1.22rem;letter-spacing:-.04em;display:flex;align-items:center;gap:10px}
.post-brand,.post-brand span{font-family:"Plus Jakarta Sans","Noto Sans Thai",sans-serif;color:var(--paper);font-size:1.18rem;font-weight:700;letter-spacing:-.055em}
.brand i{width:9px;height:9px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 5px var(--orange-soft)}
.topbar nav{display:flex;align-items:center;gap:4px;font-size:.92rem;color:var(--mute)}
.topbar nav a{padding:8px 13px;border-radius:999px;transition:color .15s,background .15s}.topbar nav a:hover{color:var(--paper);background:var(--ink3)}
.nbtn{display:inline-flex;align-items:center;gap:8px;background:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:7px 12px;cursor:pointer;color:var(--mute);font-size:.85rem;transition:border-color .15s,color .15s}
.nbtn:hover{border-color:var(--line2);color:var(--paper)}.nbtn kbd{font:inherit;font-size:.72rem;border:1px solid var(--line2);border-radius:5px;padding:0 5px}
.nbtn.ic{padding:8px;width:36px;height:36px;justify-content:center}
.eyebrow{color:var(--leaf);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase}
.tag{display:inline-block;font-size:.72rem;font-weight:700;color:var(--leaf);background:color-mix(in srgb,var(--leaf) 12%,transparent);padding:3px 10px;border-radius:999px}
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;color:var(--mute);font-size:.8rem}
.meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.6}
footer.site{border-top:1px solid var(--line);margin-top:100px}
footer.site .wrap{padding:36px 0 46px;color:var(--mute);font-size:.85rem;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer.site a:hover{color:var(--paper)}
.skel{background:linear-gradient(90deg,var(--ink2),var(--ink3),var(--ink2));background-size:200% 100%;animation:sk 1.4s infinite;border-radius:14px}
@keyframes sk{to{background-position:-200% 0}}
.empty{padding:60px 20px;text-align:center;color:var(--mute);border:1px dashed var(--line2);border-radius:16px}
.reveal{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.reveal{opacity:1;transform:none;transition:none}}
@media(max-width:640px){.topbar nav .hide-sm{display:none}.nbtn kbd{display:none}}