/* ============================================================================
   ดอเดวิด — เปลือกร่วมทุกหน้า (realdordavidx.com)
   🔒 พื้นหลังชุดนี้ยกค่ามาจาก David/Template Remotion/src/ChannelBg.tsx ตรงๆ
      เป็น "หน้าตาประจำช่อง" — แก้ค่าตรงนี้ = หน้าเว็บกับคลิปจะไม่เข้ากันอีกต่อไป
   🔒 สีเน้น (ทอง/ม่วง/เขียว) ใช้กับ "ตัวหนังสือกับเส้น" เท่านั้น
      แสงและพื้นเป็นขาวเย็นเสมอ — สีเน้นห้ามไปทำพื้น/แสง
   ========================================================================== */
:root{
  --bg:#06060a; --line:rgba(255,255,255,.055); --card:#0c0c0c; --card2:#101010;
  --bord:rgba(255,255,255,.12); --bord2:rgba(255,255,255,.3);
  --txt:#f4f4f4; --mut:#9a9a9a; --dim:#6f6f6f;
  --acc:#FFC61A;            /* ทอง = สีประจำตัวดอเดวิด */
  --urania:#9f6bff; --krib:#b7ff3c; --duang:#7fd8ff;
  --r:18px; --rs:14px;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{overflow-x:clip;font-family:'Kanit',sans-serif;color:var(--txt);min-height:100vh;background:var(--bg);
  -webkit-font-smoothing:antialiased}

/* ── ชั้นพื้นหลัง: ยึดกับหน้าจอ ไม่เลื่อนตามเนื้อหา ── */
.bg{position:fixed;inset:0;pointer-events:none;z-index:0}
.bg.base{background:radial-gradient(ellipse 118% 86% at 50% 22%,#17161f 0%,#101019 40%,#0a0a11 76%,#06060a 100%)}
.bg.grid{
  background-image:
    repeating-linear-gradient(90deg,var(--line) 0,var(--line) 1.5px,transparent 1.5px,transparent 108px),
    repeating-linear-gradient(0deg,var(--line) 0,var(--line) 1.5px,transparent 1.5px,transparent 108px);
  -webkit-mask-image:radial-gradient(ellipse 96% 78% at 50% 44%,#000 42%,transparent 90%);
  mask-image:radial-gradient(ellipse 96% 78% at 50% 44%,#000 42%,transparent 90%)}
.bg.lamp{background:radial-gradient(ellipse 58% 24% at 50% 22%,rgba(255,255,255,.055),transparent 70%)}
.bg.grain{opacity:.055;mix-blend-mode:soft-light;background-size:300px 300px;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.veil{position:fixed;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 96% 74% at 50% 42%,transparent 42%,rgba(0,0,0,.74) 100%)}

.wrap{position:relative;z-index:1;max-width:520px;margin:0 auto;
  padding:46px 20px calc(44px + env(safe-area-inset-bottom))}
.wrap.wide{max-width:620px}
.nbw{white-space:nowrap}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* ── ป้ายหัวข้อเล็ก (eyebrow) ── */
/* 🔤 ไทยถ่างตัวอักษรไม่ได้เหมือนอังกฤษ — .16em ทำให้อ่านเป็น "เ ค รื่ อ ง มื อ"
      ใช้ .04em พอ และไม่ต้อง uppercase (ไทยไม่มีตัวใหญ่อยู่แล้ว) */
.eyebrow{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em;
  color:var(--dim);display:flex;align-items:center;gap:10px;margin-bottom:12px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--bord),transparent)}

/* ── แถบกลับหน้าแรก ── */
.back{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:var(--mut);font-size:13.5px;
  padding:8px 14px 8px 11px;border:1px solid var(--bord);border-radius:999px;background:rgba(255,255,255,.02);
  transition:color .18s,border-color .18s}
@media(hover:hover){.back:hover{color:var(--txt);border-color:var(--bord2)}}

/* ── การ์ดพื้นฐาน ── */
.card{background:var(--card);border:1px solid var(--bord);border-radius:var(--r);padding:20px 18px}

/* ── ปุ่มหลัก ── */
.btn{display:flex;align-items:center;justify-content:center;gap:9px;width:100%;
  border:0;border-radius:14px;padding:15px 18px;font-family:inherit;font-size:16px;font-weight:600;
  background:var(--acc);color:#141006;cursor:pointer;letter-spacing:.2px;
  transition:transform .16s ease,filter .16s ease}
.btn:active{transform:scale(.987)}
@media(hover:hover){.btn:hover{filter:brightness(1.08)}}
.btn.ghost{background:transparent;border:1px solid var(--bord);color:var(--txt)}
@media(hover:hover){.btn.ghost:hover{border-color:var(--bord2);background:rgba(255,255,255,.03);filter:none}}

footer{position:relative;z-index:1;margin-top:44px;text-align:center;color:var(--dim);font-size:12.5px;font-weight:400;
  padding-bottom:calc(10px + env(safe-area-inset-bottom))}
footer a{color:var(--mut);text-decoration:none;border-bottom:1px solid var(--bord)}

/* 🔤 กันคำไทยแตกกลางคำตอนจอแคบ */
h1,h2,h3,p,.stx b,.ptx b{text-wrap:pretty}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}