:root{
  --paper:#F4F6F2; --page:#FEFFFD; --sunk:#EAEEE6;
  --line:#DEE3D9; --ink:#1E2622; --ink-2:#4A544D; --ink-3:#77807A;
  --green:#1B6B58; --green-w:#E6F1EC; --gold:#95701A; --gold-w:#FAF1DE;
  --shadow:0 1px 2px rgba(30,45,38,.04), 0 14px 34px -26px rgba(30,45,38,.34);
  --f-display:"Noto Serif Thai", Georgia, serif;
  --f-body:"IBM Plex Sans Thai","Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#101410; --page:#181D19; --sunk:#1F251F; --line:#2E352F;
  --ink:#E8ECE5; --ink-2:#B5BDB5; --ink-3:#848D85;
  --green:#7FD3BB; --green-w:#17332C; --gold:#E5BA72; --gold-w:#2F2614;
  --shadow:0 1px 2px rgba(0,0,0,.45), 0 14px 34px -26px rgba(0,0,0,.85);
}}
*{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-body);
     line-height:1.72;-webkit-font-smoothing:antialiased}
h1,h2{font-family:var(--f-display);margin:0;line-height:1.34;text-wrap:balance}
p{margin:0}
a{color:inherit}
.wrap{max-width:720px;margin:0 auto;padding:32px 20px 72px}
.card{background:var(--page);border:1px solid var(--line);border-radius:16px;
      padding:24px;box-shadow:var(--shadow)}
.btn{display:block;width:100%;text-align:center;text-decoration:none;
     background:var(--green);color:var(--paper);font-weight:600;font-size:17px;
     padding:15px 20px;border-radius:12px;border:0;cursor:pointer}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line);font-weight:500}
.muted{color:var(--ink-3);font-size:14px}