:root {
  --bg: #070916; --surface: #100d20; --surface-2: #171127; --surface-3: #211633;
  --text: #f7f8ff; --muted: #9da6c7; --soft: #cfd3e7; --line: rgba(255,255,255,.09);
  --purple: #7b5cff; --purple-2: #9e4cff; --blue: #5a8dff; --pink: #e04ed8;
  --gradient: linear-gradient(135deg,#7957ff 0%,#8b55ff 48%,#4f8cff 100%);
  --shadow: 0 24px 70px rgba(0,0,0,.36); --radius: 22px; --copy-size: 16px;
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #f4f2fb; --surface: #fff; --surface-2: #f9f7ff; --surface-3: #eee9ff;
  --text: #201b31; --muted: #6c6680; --soft: #454059; --line: rgba(41,27,77,.10);
  --shadow: 0 20px 60px rgba(70,48,130,.13); color-scheme: light;
}
* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; scroll-padding-top: 76px; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--text); background: var(--bg); font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", "Noto Sans Lao", "Noto Sans Thai", Arial, sans-serif; line-height: 1.72; text-rendering: optimizeLegibility; }
button, select { font: inherit; }
a { color: inherit; }
.sr-only { position: absolute!important; width: 1px!important; height: 1px!important; padding: 0!important; margin: -1px!important; overflow: hidden!important; clip: rect(0,0,0,0)!important; white-space: nowrap!important; border: 0!important; }
.skip-link { position: fixed; left: 16px; top: -80px; z-index: 100; padding: 9px 13px; border-radius: 11px; color: #fff; background: var(--purple); transition: top .2s; }
.skip-link:focus { top: 12px; }
.ambient { position: fixed; z-index: -1; width: 520px; height: 520px; border-radius: 50%; filter: blur(110px); opacity: .14; pointer-events: none; }
.ambient-one { left: -260px; top: -180px; background: var(--purple); }
.ambient-two { right: -280px; top: 34%; background: var(--blue); }
.app-header { position: sticky; top: 0; z-index: 30; min-height: 60px; display: grid; grid-template-columns: 112px minmax(0,1fr) 112px; align-items: center; gap: 10px; padding: 8px max(16px, calc((100vw - 860px)/2)); padding-top: max(8px, env(safe-area-inset-top)); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 84%, transparent); backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); }
.back-button { width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 13px; color: var(--text); background: rgba(255,255,255,.04); cursor: pointer; }
.back-button span { display: block; margin-top: -3px; font-size: 30px; line-height: 1; }
.app-title { justify-self: center; min-width: 0; display: flex; align-items: center; gap: 9px; text-decoration: none; }
.brand-mark { flex: 0 0 auto; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: var(--gradient); box-shadow: 0 8px 22px rgba(123,92,255,.35); font-size: 13px; font-weight: 850; }
.app-title strong, .app-title small { display: block; line-height: 1.1; white-space: nowrap; }
.app-title strong { font-size: 13px; letter-spacing: .12em; }
.app-title small { max-width: 250px; margin-top: 4px; overflow: hidden; color: var(--muted); text-overflow: ellipsis; font-size: 10px; }
.language-control { justify-self: end; }
select { min-height: 38px; color: var(--text); background: rgba(255,255,255,.055); border: 1px solid var(--line); border-radius: 12px; padding: 7px 30px 7px 10px; }
.language-control select { width: 112px; font-size: 12px; }
button:focus-visible, select:focus-visible, a:focus-visible { outline: 3px solid rgba(123,92,255,.45); outline-offset: 2px; }
.app-shell { width: min(100% - 28px, 820px); margin: 18px auto 72px; }
.hero-card { position: relative; overflow: hidden; padding: clamp(24px,5vw,46px); border: 1px solid var(--line); border-radius: 28px; background: radial-gradient(circle at 92% 5%,rgba(90,141,255,.16),transparent 30%), radial-gradient(circle at 5% 95%,rgba(224,78,216,.10),transparent 32%), linear-gradient(155deg,rgba(30,23,54,.96),rgba(12,11,27,.98)); box-shadow: var(--shadow); }
.hero-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: linear-gradient(120deg,rgba(255,255,255,.06),transparent 26%); }
.availability-note { position: relative; width: fit-content; display: flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.035); font-size: 11px; }
.status-badge { position: relative; display: inline-flex; align-items: center; gap: 5px; margin-top: 24px; padding: 6px 10px; border: 1px solid rgba(139,108,255,.28); border-radius: 999px; color: #cbbfff; background: rgba(123,92,255,.13); font-size: 11px; font-weight: 750; }
h1 { position: relative; max-width: 720px; margin: 13px 0 11px; font-size: clamp(32px,6vw,52px); line-height: 1.08; letter-spacing: -.035em; }
.summary { position: relative; max-width: 680px; margin: 0; color: var(--muted); font-size: 16px; }
.metadata { position: relative; display: grid; grid-template-columns: repeat(3,1fr); margin: 28px 0 20px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.metadata div { padding: 0 18px; border-left: 1px solid var(--line); }
.metadata div:first-child { padding-left: 0; border-left: 0; }
.metadata dt { color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.metadata dd { margin: 4px 0 0; font-size: 13px; font-weight: 680; }
.operator-card { position: relative; display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.04); }
.operator-icon, .support-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; color: #fff; background: var(--gradient); font-weight: 850; }
.operator-card span, .support-card small { display: block; color: var(--muted); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; }
.operator-card strong { display: block; margin-top: 2px; line-height: 1.35; font-size: 13px; }
.operator-card p { margin: 3px 0 0; color: var(--muted); line-height: 1.45; font-size: 11px; }
.doc-nav { margin: 13px 0; padding: 7px; display: flex; gap: 7px; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--line); border-radius: 17px; background: rgba(15,12,30,.8); backdrop-filter: blur(18px); }
.doc-nav::-webkit-scrollbar { display: none; }
.doc-link { flex: 0 0 auto; min-width: 150px; max-width: 210px; padding: 10px 12px; border: 1px solid transparent; border-radius: 12px; color: var(--muted); text-decoration: none; font-size: 12px; line-height: 1.28; text-align: center; transition: .18s; }
.doc-link:hover { color: var(--text); background: rgba(255,255,255,.04); }
.doc-link.is-active { color: #fff; border-color: rgba(144,115,255,.32); background: linear-gradient(135deg,rgba(123,92,255,.24),rgba(90,141,255,.16)); box-shadow: inset 0 0 22px rgba(123,92,255,.08); }
.content-panel { padding: 8px 0; }
.jump-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin: 2px 2px 12px; }
.jump-row label { color: var(--muted); font-size: 12px; font-weight: 650; }
.jump-row select { width: min(68%,480px); font-size: 12px; }
.legal-copy { font-size: var(--copy-size); }
.legal-section { position: relative; margin: 12px 0; padding: clamp(20px,4vw,30px); border: 1px solid var(--line); border-radius: var(--radius); background: linear-gradient(155deg,rgba(23,17,39,.95),rgba(15,13,29,.96)); box-shadow: 0 14px 42px rgba(0,0,0,.18); }
.legal-section h2 { margin: 0 0 14px; font-size: clamp(19px,3vw,24px); line-height: 1.32; letter-spacing: -.015em; }
.legal-section p { margin: 0 0 13px; color: var(--soft); }
.legal-section p:last-child { margin-bottom: 0; }
.legal-section a { color: #ad9cff; text-underline-offset: 3px; }
.anchor { position: absolute; right: 20px; opacity: .2; color: var(--purple); text-decoration: none; }
.support-card { margin-top: 14px; padding: 15px; display: grid; grid-template-columns: 42px 1fr auto; gap: 12px; align-items: center; border: 1px solid rgba(139,108,255,.22); border-radius: 19px; background: linear-gradient(135deg,rgba(123,92,255,.12),rgba(90,141,255,.07)); text-decoration: none; }
.support-card strong { display: block; margin-top: 2px; color: #d9d2ff; font-size: 14px; }
.support-card > span:last-child { color: var(--muted); font-size: 28px; }
.article-footer { padding: 26px 10px 0; color: var(--muted); text-align: center; font-size: 10px; }
.floating-tools { position: fixed; right: max(16px,env(safe-area-inset-right)); bottom: max(16px,env(safe-area-inset-bottom)); z-index: 15; }
.floating-tools button { width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 14px; color: var(--text); background: rgba(23,17,39,.92); box-shadow: var(--shadow); cursor: pointer; }
#top-button { opacity: 0; pointer-events: none; transform: translateY(8px); transition: .2s; }
#top-button.is-visible { opacity: 1; pointer-events: auto; transform: none; }
html[data-font="large"] { --copy-size: 18px; }
html[data-font="xlarge"] { --copy-size: 20px; }
.is-embedded .app-header { display: none; }
.is-embedded .app-shell { margin-top: 0; padding-top: max(16px,env(safe-area-inset-top)); padding-bottom: env(safe-area-inset-bottom); }
@media(max-width:620px) {
  html { scroll-padding-top: 64px; }
  .app-header { min-height: 56px; grid-template-columns: 66px 1fr 118px; padding-left: 12px; padding-right: 12px; }
  .back-button { width: 36px; height: 36px; }
  .app-title small { display: none; }
  .language-control select { width: 118px; min-height: 35px; font-size: 11px; }
  .app-shell { width: 100%; margin-top: 0; }
  .hero-card { padding: 22px 16px 18px; border-width: 0 0 1px; border-radius: 0 0 24px 24px; }
  .availability-note { align-items: flex-start; border-radius: 10px; line-height: 1.4; }
  .status-badge { margin-top: 19px; }
  h1 { font-size: clamp(29px,9vw,39px); }
  .summary { font-size: 14px; }
  .metadata { margin-top: 23px; }
  .metadata div { padding: 0 8px; }
  .metadata dt { font-size: 9px; }
  .metadata dd { font-size: 11px; }
  .operator-card { grid-template-columns: 38px 1fr; }
  .operator-icon, .support-icon { width: 38px; height: 38px; border-radius: 12px; }
  .doc-nav { margin: 10px 12px; }
  .doc-link { min-width: 138px; }
  .content-panel { padding: 2px 12px; }
  .jump-row { margin: 8px 2px 10px; }
  .jump-row select { width: 72%; }
  .legal-section { padding: 20px 17px; border-radius: 18px; }
  .legal-section h2 { padding-right: 16px; font-size: 19px; }
  .legal-section p { font-size: 14px; line-height: 1.72; }
  .anchor { right: 15px; }
  .support-card { margin: 12px; }
  .article-footer { padding-bottom: 70px; }
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media print {
  :root { --bg:#fff; --surface:#fff; --surface-2:#fff; --text:#111; --soft:#222; --muted:#555; --line:#ddd; color-scheme:light; }
  body { background:#fff; font-size:10.5pt; }
  .ambient,.app-header,.doc-nav,.jump-row,.floating-tools,.support-card,.skip-link { display:none!important; }
  .app-shell { width:100%; margin:0; }
  .hero-card,.legal-section { background:#fff; box-shadow:none; break-inside:avoid; }
  .hero-card { border:0; padding:0 0 20px; }
  .legal-section { border-color:#ddd; }
}

/* Guild agreement: reuse the original palette and card system. */
.legal-intro { border-color: rgba(139,108,255,.24); }
.legal-section h3 { margin: 24px 0 12px; font-size: 1.05em; color: var(--text); line-height: 1.5; }
.legal-section .subclause { padding-left: 1.1em; margin-bottom: 9px; }
.legal-copy { overflow-wrap: anywhere; }
.reading-tools { display:flex; justify-content:flex-end; gap:8px; margin:10px 2px; }
.reading-tools button { min-height:36px; min-width:40px; padding:5px 12px; color:var(--soft); background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:11px; cursor:pointer; font-size:12px; }
.reading-tools button:hover { border-color:rgba(139,108,255,.4); color:var(--text); }
.entry-languages { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.entry-languages a { border-color:var(--line); background:rgba(123,92,255,.12); }
select option { background: var(--surface); color:var(--text); }
html[data-theme="light"] .hero-card { background:radial-gradient(circle at 92% 5%,rgba(90,141,255,.10),transparent 38%),linear-gradient(155deg,#fff,#f1edfc); }
html[data-theme="light"] .legal-section,
html[data-theme="light"] .locale-card { background:linear-gradient(155deg,#fff,#f8f5ff); }
html[data-theme="light"] .doc-nav { background:rgba(255,255,255,.92); }
html[data-theme="light"] .doc-link.is-active { color:#523ab7; }
html[data-theme="light"] .status-badge,
html[data-theme="light"] .legal-section a,
html[data-theme="light"] .support-card strong,
html[data-theme="light"] .landing-note a { color:#6541c7; }
html[data-theme="light"] .floating-tools button { background:rgba(255,255,255,.96); }
@media(max-width:620px) {
  html[data-document="guild"] .legal-section p { font-size:calc(var(--copy-size) - 1px); line-height:1.8; }
  html[data-document="guild"] h1 { line-height:1.2; overflow-wrap:anywhere; }
}
@media print {
  .reading-tools { display:none!important; }
  .hero-card,.legal-section { background:#fff!important; color:#111!important; box-shadow:none!important; }
  .legal-section { break-inside:auto; }
  .legal-section h2,.legal-section h3 { break-after:avoid; }
  .legal-section p { orphans:3; widows:3; }
  .status-badge,.legal-section a,.legal-section h3 { color:#222!important; }
}