:root {
  --ink: #0b1020;
  --ink-2: #111830;
  --ink-3: #18213d;
  --line: rgba(214, 180, 106, 0.18);
  --gold: #d6b46a;
  --gold-soft: #e9d3a0;
  --text: #e8e2d4;
  --muted: #a6a08f;
  --radius: 14px;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Apple SD Gothic Neo", "Hiragino Sans", "PingFang SC",
    "Noto Sans", "Noto Sans Myanmar", "Myanmar Sangam MN", "Khmer Sangam MN", "Lao Sangam MN",
    "Sinhala Sangam MN", "Kailasa", "Noto Serif Tibetan", "Devanagari Sangam MN", Roboto, sans-serif;
  --serif: "Iowan Old Style", "Palatino", "Nanum Myeongjo", "Hiragino Mincho ProN", "Songti SC", Georgia, serif;
}

* { box-sizing: border-box; }

html { background: var(--ink); color-scheme: dark; scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: hidden;
  min-height: 100vh;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 50% -200px, rgba(214, 180, 106, 0.12), transparent 70%),
    linear-gradient(180deg, var(--ink-2), var(--ink) 420px);
  -webkit-font-smoothing: antialiased;
  word-break: normal;
  overflow-wrap: anywhere;
}

/* Scripts that need more vertical room */
body.lang-my, body.lang-km, body.lang-lo, body.lang-si, body.lang-bo, body.lang-th, body.lang-ne { line-height: 1.95; }
body.lang-ko, body.lang-ja, body.lang-zh { word-break: keep-all; }

a { color: var(--gold-soft); text-decoration-color: rgba(233, 211, 160, 0.4); text-underline-offset: 3px; }
a:hover { color: #fff; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.loading { text-align: center; color: var(--muted); padding: 40vh 0 0; }

/* Header */
.top {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; gap: 16px;
  padding: 12px max(20px, env(safe-area-inset-left));
  background: rgba(11, 16, 32, 0.82);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; color: var(--gold); text-decoration: none; font-family: var(--serif); font-size: 19px; letter-spacing: 0.04em; }
.brand img { border-radius: 8px; }
.nav { display: flex; gap: 18px; margin-left: auto; font-size: 14px; }
.nav a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--gold-soft); }
.lang { position: relative; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.lang svg { width: 18px; height: 18px; }
.lang select {
  appearance: none; -webkit-appearance: none;
  background: var(--ink-3); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 14px; font: inherit; font-size: 14px; cursor: pointer;
}

@media (max-width: 720px) {
  .top { flex-wrap: wrap; gap: 10px; }
  .nav { order: 3; width: 100%; min-width: 0; margin: 0; justify-content: space-between; gap: 10px; font-size: 13px; overflow-x: auto; }
  .lang { margin-left: auto; }
}

/* Documents */
.doc { max-width: 780px; min-width: 0; margin: 0 auto; padding: 48px 22px 72px; }
.doc h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 5vw, 42px); color: var(--gold); margin: 0 0 6px; letter-spacing: 0.01em; line-height: 1.3; }
.doc h2 { font-size: 20px; color: var(--gold-soft); margin: 44px 0 12px; padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.45; }
.doc h3 { font-size: 16px; color: var(--text); margin: 24px 0 6px; }
.doc p, .doc li { color: var(--text); }
.doc ul, .doc ol { padding-left: 1.3em; }
.doc li { margin: 6px 0; }
.doc section { scroll-margin-top: 90px; }
.meta { color: var(--muted); font-size: 14px; margin: 0 0 18px; }
.notice {
  font-size: 14px; color: var(--muted);
  background: rgba(214, 180, 106, 0.06); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 16px; margin: 0 0 24px;
}
.toc { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 6px 22px 12px; margin: 28px 0 8px; }
.toc h2 { border: 0; margin: 14px 0 4px; padding: 0; font-size: 15px; color: var(--muted); }
.toc ol { list-style: none; padding: 0; margin: 0; columns: 2; column-gap: 28px; }
.toc li { margin: 4px 0; font-size: 14px; break-inside: avoid; }
.toc a { text-decoration: none; color: var(--text); }
.toc a:hover { color: var(--gold-soft); }
@media (max-width: 620px) { .toc ol { columns: 1; } }

.table-wrap { overflow-x: auto; margin: 16px 0; border: 1px solid var(--line); border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--line); }
th { color: var(--gold-soft); background: var(--ink-2); font-weight: 600; }
tr:last-child td { border-bottom: 0; }
.top-link { margin-top: 48px; font-size: 14px; }

/* Support */
.contact-card { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 4px 24px 12px; margin: 28px 0; }
.contact-card h2 { border: 0; padding: 0; margin: 18px 0 4px; }
.mail { font-size: 20px; margin: 4px 0; }
details { border-bottom: 1px solid var(--line); padding: 14px 0; }
summary { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; gap: 12px; }
summary::-webkit-details-marker { display: none; }
summary::before { content: "+"; color: var(--gold); font-weight: 400; width: 14px; flex: none; }
details[open] summary::before { content: "−"; }
details p { margin: 10px 0 2px 26px; color: var(--muted); }

/* Home */
.home { max-width: 960px; margin: 0 auto; padding: 0 22px 64px; }
.hero {
  position: relative; text-align: center; padding: 72px 12px 64px; margin: 0 -22px;
  background:
    linear-gradient(180deg, rgba(11, 16, 32, 0.35), rgba(11, 16, 32, 0.92) 85%),
    url("/assets/hero.jpg") center 30% / cover no-repeat;
  border-bottom: 1px solid var(--line);
}
.hero-icon { border-radius: 26px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--line); }
.hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(40px, 8vw, 64px); color: var(--gold); margin: 22px 0 4px; letter-spacing: 0.06em; }
.kicker { font-family: var(--serif); font-size: clamp(18px, 3vw, 22px); color: var(--gold-soft); margin: 0 0 14px; }
.lead { max-width: 560px; margin: 0 auto 28px; color: var(--text); }
.store-badge {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 20px 9px 16px; border-radius: 12px;
  background: #000; color: #fff; text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.store-badge:hover { color: #fff; border-color: var(--gold); }
.store-badge svg { width: 26px; height: 32px; }
.store-badge span { display: flex; flex-direction: column; text-align: left; line-height: 1.15; }
.store-badge small { font-size: 11px; }
.store-badge b { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 40px 0; }
.features article { background: var(--ink-2); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.features h2 { font-family: var(--serif); font-weight: 500; font-size: 20px; color: var(--gold-soft); margin: 0 0 6px; }
.features p { margin: 0; color: var(--muted); }
.links { text-align: center; }
.links h2 { font-size: 15px; color: var(--muted); font-weight: 500; }
.links div { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.links a { padding: 10px 20px; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.links a:hover { border-color: var(--gold); }

/* Footer */
.foot { border-top: 1px solid var(--line); padding: 28px 22px 40px; text-align: center; font-size: 13px; color: var(--muted); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-bottom: 12px; }
.foot nav a { color: var(--text); text-decoration: none; }
.foot p { margin: 6px 0; }
.foot a { color: var(--muted); }
.copy { opacity: 0.7; }