/* ======================================================================
   design/tokens.css
   ====================================================================== */
:root, [data-theme="light"] {
  --paper: #f4f4f1;
  --card: #ffffff;
  --card-sunken: #ecece8;
  --ink: #15181d;
  --muted: #555b66;
  --hairline: #dcdcd6;
  --line-strong: #7f848e;
  --sign-yellow: #f7b500;
  --on-sign-yellow: #15181d;
  --yellow-text: #7a5600;
  --chevron: #15181d;
  --correct: #1e7b45;
  --correct-surface: #e4f3ea;
  --wrong: #c0392b;
  --wrong-surface: #fbeae8;
  --accent: #2f4fa3;
  --on-accent: #ffffff;
  --accent-soft: #e6ebf8;
  --accent-id: #c8102e;
  --accent-id-soft: #fbe7ea;
  --accent-ph: #0038a8;
  --accent-ph-soft: #e3eafa;
  --accent-th: #2d2a4a;
  --accent-th-soft: #e8e7f1;
  --accent-vn: #da251d;
  --accent-vn-soft: #fce8e7;
  --accent-my: #0f1b7a;
  --accent-my-soft: #e4e6f5;
  --focus: #2f4fa3;
  --scrim: #15181db3;
  --badge-critical: #c0392b;
  --badge-safety: #7a5600;
  --elevation-0: none;
  --elevation-1: 0 1px 2px #15181d14;
  --elevation-2: 0 8px 24px #15181d24;
}
[data-theme="dark"] {
  --paper: #15171b;
  --card: #22252b;
  --card-sunken: #1b1e23;
  --ink: #edeef0;
  --muted: #a3a9b4;
  --hairline: #353942;
  --line-strong: #6b7280;
  --sign-yellow: #f7b500;
  --on-sign-yellow: #15181d;
  --yellow-text: #f7b500;
  --chevron: #edeef0;
  --correct: #52c283;
  --correct-surface: #12291b;
  --wrong: #f07a6e;
  --wrong-surface: #301715;
  --accent: #8fa6ff;
  --on-accent: #15171b;
  --accent-soft: #242b45;
  --accent-id: #ff6b7a;
  --accent-id-soft: #3a1a21;
  --accent-ph: #7da2ff;
  --accent-ph-soft: #1e2745;
  --accent-th: #b0ace6;
  --accent-th-soft: #2a2842;
  --accent-vn: #ff7a70;
  --accent-vn-soft: #3d1e1c;
  --accent-my: #93a2ff;
  --accent-my-soft: #20244a;
  --focus: #8fa6ff;
  --scrim: #000000b3;
  --badge-critical: #f07a6e;
  --badge-safety: #f7b500;
  --elevation-0: none;
  --elevation-1: 0 1px 2px #00000066;
  --elevation-2: 0 8px 24px #00000099;
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;
  --measure: 68ch;
  --container: 1200px;
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --target-min: 44px;
  --button-height: 54px;
  --control-height: 44px;
  --border-plate: 3px;
  --border-control: 1.5px;
  --accent-rule-width: 56px;
  --duration-micro: 160ms;
  --duration-standard: 240ms;
  --duration-reveal: 360ms;
  --duration-slam: 620ms;
  --ease-standard: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-slam: cubic-bezier(0.34, 1.4, 0.64, 1);
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Noto Sans Thai", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.display-1 { font-family: var(--font-sans); font-size: 36px; line-height: 44px; font-weight: 800; letter-spacing: -0.01em; }
.display-2 { font-family: var(--font-sans); font-size: 28px; line-height: 36px; font-weight: 800; letter-spacing: -0.005em; }
.headline { font-family: var(--font-sans); font-size: 21px; line-height: 30px; font-weight: 700; }
.title-1 { font-family: var(--font-sans); font-size: 18px; line-height: 26px; font-weight: 700; }
.title-2 { font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 700; }
.body-1 { font-family: var(--font-sans); font-size: 17px; line-height: 26px; font-weight: 400; }
.body-2 { font-family: var(--font-sans); font-size: 15px; line-height: 23px; font-weight: 400; }
.caption { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 500; }
.eyebrow { font-family: var(--font-sans); font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: 0.127em; }
.label { font-family: var(--font-sans); font-size: 13px; line-height: 20px; font-weight: 700; }
.score { font-family: var(--font-sans); font-size: 56px; line-height: 64px; font-weight: 800; letter-spacing: -0.02em; }
.figure { font-family: var(--font-sans); font-size: 28px; line-height: 36px; font-weight: 800; }
.timer { font-family: var(--font-sans); font-size: 15px; line-height: 20px; font-weight: 700; letter-spacing: 0.02em; }
/* ======================================================================
   auto dark — generated by build.mjs
   ====================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
  --paper: #15171b;
  --card: #22252b;
  --card-sunken: #1b1e23;
  --ink: #edeef0;
  --muted: #a3a9b4;
  --hairline: #353942;
  --line-strong: #6b7280;
  --sign-yellow: #f7b500;
  --on-sign-yellow: #15181d;
  --yellow-text: #f7b500;
  --chevron: #edeef0;
  --correct: #52c283;
  --correct-surface: #12291b;
  --wrong: #f07a6e;
  --wrong-surface: #301715;
  --accent: #8fa6ff;
  --on-accent: #15171b;
  --accent-soft: #242b45;
  --accent-id: #ff6b7a;
  --accent-id-soft: #3a1a21;
  --accent-ph: #7da2ff;
  --accent-ph-soft: #1e2745;
  --accent-th: #b0ace6;
  --accent-th-soft: #2a2842;
  --accent-vn: #ff7a70;
  --accent-vn-soft: #3d1e1c;
  --accent-my: #93a2ff;
  --accent-my-soft: #20244a;
  --focus: #8fa6ff;
  --scrim: #000000b3;
  --badge-critical: #f07a6e;
  --badge-safety: #f7b500;
  --elevation-0: none;
  --elevation-1: 0 1px 2px #00000066;
  --elevation-2: 0 8px 24px #00000099;
  }
}
/* ======================================================================
   design/components/bundle.css
   ====================================================================== */
/* Driving Test — website stylesheet. Loaded after tokens.css. Every colour, size and duration is a token. */

/* ---------- territory accent re-pointing ---------- */
[data-territory="id"] { --accent: var(--accent-id); --accent-soft: var(--accent-id-soft); }
[data-territory="ph"] { --accent: var(--accent-ph); --accent-soft: var(--accent-ph-soft); }
[data-territory="th"] { --accent: var(--accent-th); --accent-soft: var(--accent-th-soft); }
[data-territory="vn"] { --accent: var(--accent-vn); --accent-soft: var(--accent-vn-soft); }
[data-territory="my"] { --accent: var(--accent-my); --accent-soft: var(--accent-my-soft); }

/* ---------- base ---------- */
.dt, .dt * { box-sizing: border-box; }
.dt {
  background: var(--paper); color: var(--ink);
  font-family: var(--font-sans); font-size: 15px; line-height: 23px;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.dt :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.dt a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
/* Vietnam: small links in ink (accent-vn is 4.47:1 on paper) */
[data-territory="vn"] .dt a:not(.dt-btn):not(.dt-link-large), .dt[data-territory="vn"] a:not(.dt-btn):not(.dt-link-large) { color: var(--ink); text-decoration-color: var(--accent); }
.dt a.dt-wordmark, .dt a.dt-territory-card, .dt a.dt-store, .dt .dt-menu a, .dt .dt-footer li a, .dt a.dt-btn { text-decoration: none; }
.dt a.dt-wordmark, .dt .dt-menu a, .dt .dt-footer li a { color: inherit; }
.dt a.dt-store { color: var(--paper); }
.dt a.dt-store.is-soon { color: var(--ink); }
.dt a.dt-territory-card { color: var(--ink); }
.dt img { display: block; max-width: 100%; }
.dt p { margin: 0; }
.dt h1, .dt h2, .dt h3, .dt h4 { margin: 0; font-weight: 700; }
.dt .tnum { font-variant-numeric: tabular-nums; }
.dt .measure { max-width: var(--measure); }
.dt .muted { color: var(--muted); }
.dt .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Thai: never caps or tracking; looser leading */
.dt :lang(th) { letter-spacing: 0 !important; text-transform: none !important; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere; }
.dt :lang(th).display-1, .dt :lang(th) .display-1 { line-height: 1.5; }
/* Vietnamese: headings never tighter than 1.2 */
.dt :lang(vi).display-1, .dt :lang(vi) .display-1, .dt :lang(vi).display-2, .dt :lang(vi) .display-2 { line-height: 1.25; }

/* ---------- motifs ---------- */
.dt-eyebrow { font: 700 11px/16px var(--font-sans); letter-spacing: 0.127em; text-transform: uppercase; color: var(--muted); }
.dt-eyebrow:lang(th), .dt-eyebrow.is-thai { font-size: 13px; line-height: 20px; letter-spacing: 0; text-transform: none; }
.dt-rule { display: block; width: var(--accent-rule-width); height: 4px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--accent) 0 44px, var(--sign-yellow) 44px 100%); }
.dt-rule.is-yellow-left { background: linear-gradient(90deg, var(--sign-yellow) 0 12px, var(--accent) 12px 100%); }
.dt-lane { border: 0; height: 0; border-top: 2px dashed var(--hairline); margin: var(--space-6) 0; }
.dt-lane.is-strong { border-top-color: var(--line-strong); }
.dt-chevrons { position: relative; isolation: isolate; overflow: hidden; }
.dt-chevrons::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .04;
  background: repeating-linear-gradient(-45deg, var(--chevron) 0 10px, transparent 10px 36px);
}
.dt-chevrons.is-accent::before { background: repeating-linear-gradient(-45deg, var(--on-accent) 0 10px, transparent 10px 36px); opacity: .10; }
.dt-plate { background: var(--card); border: var(--border-control) solid var(--hairline); border-radius: var(--radius-lg); }
.dt-plate.is-strong { border: var(--border-plate) solid var(--ink); }

/* sign-plate verdict */
.dt-verdict { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 128px; padding: var(--space-3) var(--space-6); border: var(--border-plate) solid currentColor; border-radius: var(--radius-md); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1; transform: rotate(-4deg); }
.dt-verdict.is-pass { color: var(--correct); background: var(--correct-surface); }
.dt-verdict.is-fail { color: var(--wrong); background: var(--wrong-surface); }
.dt-verdict .big { font-size: 32px; }
.dt-verdict .small { font-size: 11px; letter-spacing: .127em; opacity: .85; }
.dt-verdict:lang(th) .big, .dt-verdict:lang(th) .small { letter-spacing: 0; text-transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .dt-verdict.is-animated { animation: dt-slam var(--duration-slam) var(--ease-slam) both; }
}
@keyframes dt-slam { from { transform: rotate(-6deg) scale(1.15); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }

/* ---------- buttons ---------- */
.dt-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--button-height); min-width: var(--target-min); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); border: var(--border-control) solid transparent; font: 700 16px/24px var(--font-sans); text-decoration: none; cursor: pointer; text-align: center; white-space: normal; transition: background var(--duration-micro) var(--ease-standard), border-color var(--duration-micro) var(--ease-standard), transform var(--duration-micro) var(--ease-standard); }
.dt-btn.is-primary { background: var(--accent); color: var(--on-accent); }
.dt-btn.is-primary:hover { filter: brightness(1.08); }
.dt-btn.is-primary:active { transform: translateY(1px); }
.dt-btn.is-outline { background: var(--card); color: var(--ink); border-color: var(--line-strong); }
.dt-btn.is-outline:hover { border-color: var(--ink); }
.dt-btn.is-ghost { background: transparent; color: var(--ink); min-height: var(--control-height); padding: var(--space-2) var(--space-3); }
.dt-btn.is-ghost:hover { background: var(--accent-soft); }
.dt-btn.is-small { min-height: var(--control-height); font-size: 15px; padding: var(--space-2) var(--space-4); }
.dt-btn[aria-disabled="true"], .dt-btn:disabled { opacity: .5; cursor: not-allowed; }
.dt-btn:lang(th) { line-height: 1.5; }
.dt-iconbtn { display: inline-grid; place-items: center; width: var(--target-min); height: var(--target-min); border-radius: var(--radius-sm); border: var(--border-control) solid var(--hairline); background: var(--card); color: var(--ink); cursor: pointer; }

/* ---------- badges & chips ---------- */
.dt-badge { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 24px; padding: 2px var(--space-2); border-radius: var(--radius-sm); border: 1.5px solid currentColor; font: 700 13px/20px var(--font-sans); white-space: nowrap; }
.dt-badge.is-critical { color: var(--badge-critical); background: var(--wrong-surface); }
.dt-badge.is-safety { color: var(--badge-safety); background: color-mix(in srgb, var(--sign-yellow) 14%, var(--card)); }
.dt-badge.is-neutral { color: var(--muted); border-color: var(--hairline); background: var(--card-sunken); }
.dt-badge.is-estimate { color: var(--yellow-text); border-color: currentColor; background: color-mix(in srgb, var(--sign-yellow) 14%, var(--card)); }
.dt-badge.is-published { color: var(--muted); border-color: var(--hairline); background: var(--card); }
.dt-chip { display: inline-flex; align-items: center; gap: var(--space-1); min-height: 28px; padding: 2px var(--space-2); border-radius: var(--radius-sm); font: 700 15px/20px var(--font-sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.dt-chip.is-timer { background: var(--sign-yellow); color: var(--on-sign-yellow); }
.dt-chip.is-soft { background: var(--accent-soft); color: var(--ink); }

/* ---------- header ---------- */
.dt-header { display: flex; align-items: center; gap: var(--space-4); min-height: 64px; padding: var(--space-2) var(--space-4); background: var(--card); border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.dt-wordmark { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--ink); text-decoration: none; }
.dt-wordmark .logo { width: 40px; height: 40px; flex: none; }
.dt-wordmark .name { font: 800 18px/22px var(--font-sans); letter-spacing: -.01em; }
.dt-wordmark .dt-rule { margin-top: 4px; height: 3px; width: 44px; background: linear-gradient(90deg, var(--accent) 0 34px, var(--sign-yellow) 34px 100%); }
.dt-header .grow { flex: 1 1 auto; }
.dt-switcher { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: var(--border-control) solid var(--line-strong); background: var(--card); color: var(--ink); font: 700 15px/20px var(--font-sans); cursor: pointer; }
.dt-switcher .flag { width: 20px; height: 14px; border-radius: 2px; border: 1px solid var(--hairline); overflow: hidden; flex: none; }
.dt-switcher .caret { width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); margin-left: var(--space-1); }
.dt-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 260px; padding: var(--space-2); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-md); box-shadow: var(--elevation-2); display: grid; gap: 2px; z-index: 5; }
.dt-menu a { display: flex; align-items: center; gap: var(--space-3); min-height: var(--target-min); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font-weight: 600; }
.dt-menu a .sub { color: var(--muted); font-weight: 400; font-size: 13px; margin-left: auto; }
.dt-menu a:hover, .dt-menu a[aria-current] { background: var(--accent-soft); }
.dt-menu a[aria-current]::after { content: "✓"; margin-left: var(--space-2); color: var(--accent); }
[data-territory="vn"] .dt-menu a[aria-current]::after { color: var(--ink); }

/* ---------- store badges ---------- */
.dt-badges { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: flex-start; padding-top: 10px; }
.dt-store { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--target-min); padding: var(--space-2) var(--space-4) var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--ink); color: var(--paper); text-decoration: none; line-height: 1.15; }
.dt-store .ico { width: 22px; height: 22px; flex: none; fill: currentColor; }
.dt-store .txt small { display: block; font-size: 10px; letter-spacing: .04em; opacity: .85; }
.dt-store .txt b { display: block; font-size: 16px; font-weight: 700; }
.dt-store.is-soon { background: var(--card); color: var(--ink); border: var(--border-control) solid var(--line-strong); }
.dt-store.is-soon .tag { position: absolute; top: -11px; right: 10px; padding: 1px var(--space-2); border-radius: var(--radius-pill); background: var(--sign-yellow); color: var(--on-sign-yellow); font: 700 11px/16px var(--font-sans); letter-spacing: .04em; }
.dt-store.is-soon .tag:lang(th) { letter-spacing: 0; }
.dt-disclaimer { font-size: 13px; line-height: 20px; color: var(--muted); }

/* ---------- cards ---------- */
.dt-territory-card { display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); color: var(--ink); text-decoration: none; transition: box-shadow var(--duration-micro) var(--ease-standard), border-color var(--duration-micro) var(--ease-standard); }
.dt-territory-card:hover { box-shadow: var(--elevation-1); border-color: var(--line-strong); }
.dt-territory-card .head { display: flex; align-items: center; gap: var(--space-3); }
.dt-territory-card .flag { width: 28px; height: 20px; border-radius: 3px; border: 1px solid var(--hairline); overflow: hidden; flex: none; }
.dt-territory-card h3 { font: 700 18px/26px var(--font-sans); }
.dt-territory-card h3 small { display: block; font: 500 13px/20px var(--font-sans); color: var(--muted); }
.dt-territory-card .count { font: 800 28px/36px var(--font-sans); font-variant-numeric: tabular-nums; }
.dt-territory-card .count small { font: 500 13px/20px var(--font-sans); color: var(--muted); margin-left: var(--space-1); }
.dt-territory-card .classes, .dt-territory-card .format { font-size: 15px; line-height: 23px; color: var(--muted); }
.dt-territory-card .cta { margin-top: var(--space-2); font-weight: 700; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
[data-territory="vn"] .dt-territory-card .cta, .dt-territory-card[data-territory="vn"] .cta { color: var(--ink); text-decoration-color: var(--accent); }

.dt-format-card { display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
.dt-format-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dt-format-card h3 { font: 700 18px/26px var(--font-sans); }
.dt-format-card .nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.dt-format-card .num b { display: block; font: 800 28px/36px var(--font-sans); font-variant-numeric: tabular-nums; }
.dt-format-card .num span { font-size: 13px; line-height: 20px; color: var(--muted); }
.dt-format-card .rule { font-size: 15px; line-height: 23px; }
.dt-format-card .note { display: flex; gap: var(--space-2); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-sm); background: var(--card-sunken); font-size: 13px; line-height: 20px; color: var(--muted); }
.dt-format-card .note.is-switch { border-left: 0; background: color-mix(in srgb, var(--sign-yellow) 14%, var(--card)); color: var(--yellow-text); }

.dt-feature { display: grid; gap: var(--space-2); padding: var(--space-5); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.dt-feature .ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); }
[data-territory="vn"] .dt-feature .ico { color: var(--ink); }
.dt-feature h3 { font: 700 16px/24px var(--font-sans); }
.dt-feature p { font-size: 15px; line-height: 23px; color: var(--muted); }

/* ---------- device frame & carousel ---------- */
.dt-device { position: relative; width: 300px; aspect-ratio: 440 / 956; padding: 10px; border-radius: 44px; background: var(--ink); box-shadow: var(--elevation-2); flex: none; }
.dt-device img { width: 100%; height: 100%; object-fit: cover; border-radius: 34px; }
.dt-device::after { content: ""; position: absolute; top: 20px; left: 50%; width: 92px; height: 26px; transform: translateX(-50%); background: var(--ink); border-radius: var(--radius-pill); }
.dt-device.is-small { width: 220px; border-radius: 34px; padding: 8px; }
.dt-device.is-small img { border-radius: 26px; }
.dt-device.is-small::after { width: 70px; height: 20px; top: 16px; }
.dt-carousel { display: grid; gap: var(--space-4); }
.dt-carousel .track { display: flex; gap: var(--space-6); overflow-x: auto; scroll-snap-type: x mandatory; padding: var(--space-4) var(--space-1) var(--space-2); scrollbar-width: none; }
.dt-carousel .track::-webkit-scrollbar { display: none; }
.dt-carousel figure { margin: 0; scroll-snap-align: center; display: grid; gap: var(--space-3); justify-items: center; flex: none; }
.dt-carousel figcaption { font-size: 13px; line-height: 20px; color: var(--muted); text-align: center; max-width: 220px; }
.dt-carousel .controls { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.dt-carousel .dots { display: flex; gap: var(--space-2); }
.dt-carousel .dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--hairline); }
.dt-carousel .dots i.on { background: var(--accent); width: 24px; border-radius: var(--radius-pill); }

/* ---------- quiz widget ---------- */
.dt-quiz { display: grid; gap: var(--space-4); padding: var(--space-4); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); }
@media (min-width: 768px) { .dt-quiz { padding: var(--space-6); } }
.dt-quiz .bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.dt-quiz .progress { height: 6px; border-radius: var(--radius-pill); background: var(--accent-soft); overflow: hidden; }
.dt-quiz .progress i { display: block; height: 100%; background: var(--accent); border-radius: var(--radius-pill); transition: width var(--duration-standard) var(--ease-standard); }
.dt-quiz .topic { font-size: 13px; line-height: 20px; color: var(--muted); }
.dt-quiz .badges { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.dt-quiz .picture { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--card-sunken); border: 1px solid var(--hairline); }
.dt-quiz .picture img { width: 100%; height: auto; display: block; }
.dt-quiz .picture .zoom { position: absolute; right: var(--space-2); bottom: var(--space-2); }
.dt-quiz .picture .video { position: absolute; inset: 0; display: grid; place-items: center; background: var(--scrim); color: #ffffff; }
.dt-quiz .picture .play { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--button-height); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); background: var(--card); color: var(--ink); font-weight: 700; border: 0; cursor: pointer; }
.dt-quiz .stem { font: 700 21px/30px var(--font-sans); }
.dt-quiz .stem:lang(th) { line-height: 1.55; }
.dt-quiz .options { display: grid; gap: var(--space-3); list-style: none; margin: 0; padding: 0; }
.dt-quiz .options.is-pictures { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1024px) { .dt-quiz .options.is-pictures { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.dt-option { position: relative; display: flex; align-items: flex-start; gap: var(--space-3); width: 100%; min-height: var(--button-height); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-control) solid var(--line-strong); background: var(--card); color: var(--ink); font: 400 17px/26px var(--font-sans); text-align: left; cursor: pointer; transition: border-color var(--duration-micro) var(--ease-standard), background var(--duration-reveal) var(--ease-standard); }
.dt-option:lang(th) { line-height: 1.6; }
.dt-option .key { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-strong); font: 700 13px/1 var(--font-sans); }
.dt-option .mark { margin-left: auto; flex: none; width: 24px; height: 24px; display: none; }
.dt-option:hover { border-color: var(--ink); }
.dt-option.is-selected { border-width: var(--border-plate); border-color: var(--accent); background: var(--accent-soft); padding: calc(var(--space-3) - 1.5px) calc(var(--space-4) - 1.5px); }
.dt-option.is-selected .key { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.dt-option.is-correct { border-color: var(--correct); background: var(--correct-surface); color: var(--correct); }
.dt-option.is-correct .key { border-color: var(--correct); background: var(--correct); color: #ffffff; }
.dt-option.is-wrong { border-color: var(--wrong); background: var(--wrong-surface); color: var(--wrong); }
.dt-option.is-wrong .key { border-color: var(--wrong); background: var(--wrong); color: #ffffff; }
.dt-option.is-correct .mark, .dt-option.is-wrong .mark { display: block; }
.dt-option.is-correct.is-answer .key { }
.dt-option .verdict { display: block; font: 700 13px/20px var(--font-sans); margin-top: 2px; }
.dt-option.is-picture { flex-direction: column; align-items: stretch; padding: var(--space-2); gap: var(--space-2); }
.dt-option.is-picture img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: var(--radius-sm); background: var(--card-sunken); }
.dt-option.is-picture .row { display: flex; align-items: center; gap: var(--space-2); padding: 0 var(--space-1); }
.dt-option.is-picture .mark { margin-left: auto; }
.dt-explain { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--card-sunken); border: 1px solid var(--hairline); font-size: 15px; line-height: 23px; }
.dt-explain .dt-eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); }
.dt-explain .src { font-size: 13px; line-height: 20px; color: var(--muted); }
.dt-quiz .actions { display: flex; gap: var(--space-3); justify-content: flex-end; flex-wrap: wrap; }
.dt-quiz .actions .dt-btn { flex: 1 1 200px; }
.dt-quiz .disclaimer { font-size: 13px; line-height: 20px; color: var(--muted); text-align: center; }

/* score */
.dt-score { display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.dt-score .value { font: 800 56px/64px var(--font-sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dt-score .value small { font: 700 18px/26px var(--font-sans); color: var(--muted); letter-spacing: 0; }
.dt-score .table { width: 100%; max-width: 420px; display: grid; }
.dt-score .table div { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) 0; border-top: 2px dashed var(--hairline); font-size: 15px; }
.dt-score .table div:first-child { border-top: 0; }
.dt-score .table b { font-variant-numeric: tabular-nums; }

/* loading / error */
.dt-skeleton { border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--card-sunken) 25%, var(--hairline) 50%, var(--card-sunken) 75%); background-size: 200% 100%; }
@media (prefers-reduced-motion: no-preference) { .dt-skeleton { animation: dt-shimmer 1.4s linear infinite; } }
@keyframes dt-shimmer { to { background-position: -200% 0; } }
.dt-error { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: var(--border-control) solid var(--wrong); background: var(--wrong-surface); color: var(--ink); }
.dt-error b { color: var(--wrong); display: flex; align-items: center; gap: var(--space-2); }

/* ---------- FAQ ---------- */
.dt-faq { display: grid; gap: var(--space-2); }
.dt-faq details { background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.dt-faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--button-height); padding: var(--space-3) var(--space-5); font: 700 18px/26px var(--font-sans); cursor: pointer; list-style: none; border-radius: var(--radius-md); }
.dt-faq summary::-webkit-details-marker { display: none; }
.dt-faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg); transition: transform var(--duration-micro) var(--ease-standard); margin-right: 4px; }
.dt-faq details[open] summary::after { transform: rotate(225deg); }
.dt-faq .body { padding: 0 var(--space-5) var(--space-5); font-size: 17px; line-height: 26px; color: var(--ink); max-width: var(--measure); }
.dt-faq .body p + p { margin-top: var(--space-3); }

/* ---------- footer ---------- */
.dt-footer { display: grid; gap: var(--space-6); padding: var(--space-10) var(--space-4); background: var(--card); border-top: 1px solid var(--hairline); color: var(--ink); }
.dt-footer .cols { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.dt-footer h4 { font: 700 13px/20px var(--font-sans); letter-spacing: .127em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.dt-footer h4:lang(th) { letter-spacing: 0; text-transform: none; }
.dt-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.dt-footer li a { color: var(--ink); text-decoration: none; display: inline-block; min-height: 32px; line-height: 32px; }
.dt-footer li a:hover { text-decoration: underline; }
.dt .dt-footer .sources a { text-decoration: underline; color: var(--ink); text-decoration-color: var(--line-strong); }
.dt-footer .bottom { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between; padding-top: var(--space-6); border-top: 2px dashed var(--hairline); font-size: 13px; color: var(--muted); }
.dt-footer .notaff { font-weight: 700; color: var(--ink); }

/* ---------- layout helpers for pages ---------- */
.dt-container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--space-4); }
@media (min-width: 768px) { .dt-container { padding: 0 var(--space-6); } }
.dt-section { padding: var(--space-10) 0; }
@media (min-width: 1024px) { .dt-section { padding: var(--space-16) 0; } }
.dt-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(var(--cols-m, 1), minmax(0, 1fr)); }
@media (min-width: 768px) { .dt-grid { gap: var(--space-6); grid-template-columns: repeat(var(--cols-t, 2), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .dt-grid { grid-template-columns: repeat(var(--cols-d, 3), minmax(0, 1fr)); } }
.dt-section-head { display: grid; gap: var(--space-3); margin-bottom: var(--space-8); }
.dt-section-head h2 { font: 800 28px/36px var(--font-sans); letter-spacing: -.005em; }
.dt-section-head h2:lang(th) { line-height: 1.5; }
.dt-step { display: grid; gap: var(--space-2); }
.dt-step .n { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--sign-yellow); color: var(--on-sign-yellow); font: 800 18px/1 var(--font-sans); }
.dt-step h3 { font: 700 18px/26px var(--font-sans); }
.dt-step p { font-size: 15px; line-height: 23px; color: var(--muted); }

/* header badges only on wide screens; they live in the hero below 1024 px */
.dt-header .header-badges { display: none; }
@media (min-width: 1024px) { .dt-header .header-badges { display: block; } }
.dt-header .header-badges .dt-store .txt small { display: none; }
.dt-header .header-badges .dt-store { min-height: 40px; padding: var(--space-1) var(--space-3); }

/* header at phone width: wordmark on its own row, the two switchers side by side */
@media (max-width: 767px) {
  .dt-header { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-2) var(--space-3); padding: var(--space-3) var(--space-4); }
  .dt-header .dt-wordmark { grid-column: 1 / -1; }
  .dt-header .grow { display: none; }
  .dt-header .dt-switcher { justify-content: center; }
}

/* ======================================================================
   src/assets/site.css
   ====================================================================== */
/* Driving Test — site layer. Loaded after design/tokens.css and
   design/components/bundle.css, which are the design system's own files and are
   never edited here.

   Part 1 is the page-level layout the design's page showcases carry in their own
   <style> block (design/components/PageHome/preview.html), copied as it is.
   Part 2 is what a real site needs and a showcase does not: the disclosure
   menus, the language offer, prose pages, tables, the no-JavaScript quiz list,
   the picture dialog, focus and print. Every colour, size and duration is a
   token. */

/* ===================================================================== 1 */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; }

.hero { position: relative; padding: var(--space-10) 0; }
.hero .inner { display: grid; gap: var(--space-8); align-items: center; }
.hero .copy { display: grid; gap: var(--space-4); justify-items: start; }
.hero h1 { font: 800 32px/40px var(--font-sans); letter-spacing: -.01em; text-wrap: balance; }
.hero .lead { font-size: 17px; line-height: 26px; color: var(--muted); max-width: var(--measure); }
.hero .device-wrap { display: flex; justify-content: center; }
.hero .device-wrap .dt-device { width: 260px; }
.numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.numbers .n { padding: var(--space-4); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-md); }
.numbers .n b { display: block; font: 800 28px/36px var(--font-sans); font-variant-numeric: tabular-nums; }
.numbers .n span { font-size: 13px; line-height: 20px; color: var(--muted); }
.inside { display: grid; gap: var(--space-3); }
.inside .line { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3) 0; border-top: 2px dashed var(--hairline); font-size: 15px; line-height: 23px; }
.inside .line:first-child { border-top: 0; }
.inside .line .flag { width: 28px; height: 20px; border-radius: 3px; overflow: hidden; flex: none; margin-top: 2px; border: 1px solid var(--hairline); }
.steps { display: grid; gap: var(--space-6); }
.cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.sample { display: grid; gap: var(--space-6); padding: var(--space-4); }
.sample .side { display: grid; gap: var(--space-3); align-content: start; }
.faq-teaser { display: grid; gap: var(--space-6); }
.sources-block { display: grid; gap: var(--space-3); padding: var(--space-6); background: var(--card); border: 1px solid var(--hairline); border-radius: var(--radius-lg); font-size: 15px; line-height: 23px; }
.sources-block ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
@media (min-width: 768px) {
  .hero h1 { font-size: 36px; line-height: 44px; }
  .numbers { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sample { grid-template-columns: minmax(0, 1fr) 320px; padding: var(--space-6); }
}
@media (min-width: 1024px) {
  .hero { padding: var(--space-16) 0 0; }
  .hero .inner { grid-template-columns: 7fr 5fr; gap: var(--space-16); }
  .hero .device-wrap { justify-content: flex-end; align-self: end; }
  .hero .device-wrap .dt-device { width: 320px; margin-bottom: -120px; position: relative; z-index: 1; }
  .hero h1 { font-size: 44px; line-height: 52px; }
  .hero .lead { font-size: 19px; line-height: 29px; }
  .faq-teaser { grid-template-columns: 1fr 2fr; align-items: start; }
  /* The design pads the section after the hero by the 120 px the phone hangs
     below it. Here the hero clips the phone at its edge (overflow: hidden on
     the chevron ground), so that allowance would only be an empty band. */
  .after-hero { padding-top: var(--space-16); }
}
.quizwrap { max-width: 640px; margin: 0 auto; display: grid; gap: var(--space-6); }
.quizhead { display: grid; gap: var(--space-2); }

/* Thai and Vietnamese display type: the design's leading rules, applied to the
   hero and section titles whatever class they carry. */
.hero h1:lang(th), .prose-head h1:lang(th), .quizhead h1:lang(th) { line-height: 1.5; letter-spacing: 0; }
.hero h1:lang(vi), .prose-head h1:lang(vi), .quizhead h1:lang(vi), .dt-section-head h2:lang(vi) { line-height: 1.25; }
.hero h1, .dt-section-head h2, .prose-head h1 { overflow-wrap: anywhere; }

/* ===================================================================== 2 */
/* ---------- skip link, focus ---------- */
.skip-link { position: absolute; left: var(--space-4); top: -100px; z-index: 100; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--ink); color: var(--paper) !important; font-weight: 700; text-decoration: none !important; }
.skip-link:focus { top: var(--space-2); }
[tabindex="-1"]:focus { outline: none; }

/* ---------- header: sticky from tablet up, disclosure menus ---------- */
.dt-header { position: relative; z-index: 20; }
@media (min-width: 768px) {
  .dt-header { position: sticky; top: 0; transition: box-shadow var(--duration-micro) var(--ease-standard); }
  .dt-header.is-scrolled { box-shadow: var(--elevation-1); }
}
.dt-header.is-compact { min-height: 56px; }
.dt-dd { position: relative; display: inline-block; }
.dt-dd > summary { list-style: none; user-select: none; }
.dt-dd > summary::-webkit-details-marker { display: none; }
.dt-dd[open] > summary .caret { transform: translateY(2px) rotate(225deg); }
.dt-dd .dt-menu { list-style: none; margin: 0; max-width: calc(100vw - 2 * var(--space-4)); }
.dt-dd.is-end .dt-menu { left: auto; right: 0; }
.dt-dd .dt-menu .flag { display: inline-block; width: 20px; height: 14px; border-radius: 2px; border: 1px solid var(--hairline); overflow: hidden; flex: none; }
/* A flag's SVG is inline by default, so it sat on the text baseline: in the
   20 × 14 flags of the switcher and its menu, the line height pushed it down and
   the box's overflow: hidden cut off its lower part. As a block it fills the box. */
.flag > svg { display: block; }
.dt-dd .dt-menu a .sub { white-space: nowrap; }
.dt-switcher { white-space: normal; text-align: left; }
.dt-header-download {
  white-space: nowrap;
  flex: none;
  font-weight: 700;
}
@media (max-width: 767px) {
  .dt-header {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "wordmark download"
      "country  language";
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-3) var(--space-4);
  }
  .dt-header > .dt-wordmark {
    grid-area: wordmark;
  }
  .dt-header > .dt-header-download {
    grid-area: download;
    justify-self: end;
    min-height: 40px;
    padding: var(--space-2) var(--space-4);
    box-sizing: border-box;
    font-size: 14px;
    line-height: 22px;
  }
  .dt-header > .grow {
    display: none;
  }
  .dt-header > .dt-dd:not(.is-end) {
    grid-area: country;
    display: block;
    width: 100%;
  }
  .dt-header > .dt-dd.is-end {
    grid-area: language;
    display: block;
    width: 100%;
  }
  .dt-header .dt-dd > summary.dt-switcher {
    display: flex;
    width: 100%;
    min-height: 40px;
    padding: var(--space-2) var(--space-3);
    justify-content: center;
    box-sizing: border-box;
    font-size: 14px;
  }
  .dt-dd .dt-menu {
    min-width: min(260px, calc(100vw - 2 * var(--space-4)));
  }
}
.dt-header .header-badges .dt-badges { padding-top: 10px; flex-wrap: nowrap; }

/* A "coming soon" badge is not a link, so it takes no pointer and no hover. */
span.dt-store { cursor: default; }
/* On /vn/ the design sets every link in ink (accent-vn is below AA for small
   text), and that rule outranks the design's own paper-on-ink store badge:
   ink text on an ink badge. The badge keeps its text. */
html[data-territory="vn"] body.dt a.dt-store:not(.is-soon) { color: var(--paper); }
.store-block { display: grid; gap: var(--space-2); }

/* ---------- language offer (home page only; un-hidden by site.js) ---------- */
.dt-langbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-4); background: var(--accent-soft); border-bottom: 1px solid var(--hairline); font-size: 15px; line-height: 23px; }
.dt-langbar[hidden] { display: none; }
.dt-langbar a { font-weight: 700; min-height: var(--target-min); display: inline-flex; align-items: center; }
.dt-langbar button { min-height: var(--target-min); padding: 0 var(--space-3); border: 0; background: transparent; color: var(--muted); font: inherit; text-decoration: underline; cursor: pointer; }

/* ---------- sections ---------- */
.dt-section.is-band { background: var(--card); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.dt-section.is-tight { padding-top: 0; }
.dt-section-head h2 { text-wrap: balance; }
.dt .more-link { margin-top: var(--space-6); }
.dt .more-link.center { text-align: center; margin-top: 0; }
.dt-link-large { font: 700 17px/26px var(--font-sans); }
.lead-2 { font-size: 17px; line-height: 26px; color: var(--muted); max-width: var(--measure); margin-bottom: var(--space-4) !important; }
.inside .line p { max-width: var(--measure); }
.inside-total { margin-top: var(--space-4) !important; font-size: 13px; line-height: 20px; }
.get { display: grid; }
.muted.small, .small { font-size: 13px; line-height: 20px; }
.strong { font-weight: 700; }
.side-title { font: 700 21px/30px var(--font-sans); }
.side-title:lang(th) { line-height: 1.55; }
.dt-notice { display: flex; gap: var(--space-2); align-items: flex-start; max-width: var(--measure); padding: var(--space-3); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--sign-yellow) 14%, var(--card)); color: var(--yellow-text); font-size: 15px; line-height: 23px; }
.dt-notice svg { flex: none; margin-top: 3px; }
.dt-format-card .note svg { flex: none; margin-top: 1px; }
.dt-format-card h3, .dt-territory-card h3, .dt-feature h3, .dt-step h3 { overflow-wrap: anywhere; }
.dt-badge { white-space: normal; }
.guide-card { display: grid; gap: var(--space-2); justify-items: start; margin-top: var(--space-6); padding: var(--space-5); }
.guide-card h3 { font: 700 18px/26px var(--font-sans); }
.guide-cta { display: grid; gap: var(--space-4); align-items: center; padding: var(--space-5); margin: var(--space-10) 0 var(--space-6); }
@media (min-width: 768px) { .guide-cta { grid-template-columns: minmax(0, 1fr) auto; padding: var(--space-6); } }
.good-to-know .gtk { display: grid; gap: var(--space-2); align-content: start; }
.good-to-know h3 { font: 700 18px/26px var(--font-sans); }
.good-to-know p { color: var(--muted); max-width: var(--measure); }
.plain-list { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-3); font-size: 17px; line-height: 26px; }

/* ---------- cards in a row: content to the top, the call to action to the bottom ----------
   A grid item stretches to its row, and a grid INSIDE it then spreads its own
   rows over the spare height — headings of neighbouring tiles stop lining up. */
.dt-step, .dt-feature, .dt-format-card, .numbers .n { align-content: start; }
.dt-territory-card { grid-template-rows: auto auto auto 1fr auto; }
.dt-territory-card .count { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--space-2); }
.dt-territory-card .count small { flex: 1 1 14ch; margin-left: 0; }
.dt-territory-card .format .dt-badge { vertical-align: 1px; }

/* ---------- breadcrumbs ---------- */
.crumbs ol { list-style: none; margin: 0 0 var(--space-6); padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-2); font-size: 13px; line-height: 20px; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: var(--space-2); color: var(--line-strong); }
.crumbs a { display: inline-block; padding: var(--space-1) 0; }
.quizwrap .crumbs ol { margin-bottom: 0; }

/* ---------- prose pages: guide, privacy, contact, FAQ ---------- */
.prose-wrap { max-width: 820px; }
.prose-head { display: grid; gap: var(--space-4); justify-items: start; margin-bottom: var(--space-8); }
.prose-head h1 { font: 800 32px/40px var(--font-sans); letter-spacing: -.01em; text-wrap: balance; }
@media (min-width: 768px) { .prose-head h1 { font-size: 36px; line-height: 44px; } }
.prose-head .lead { font-size: 19px; line-height: 29px; color: var(--muted); max-width: var(--measure); }
.prose { display: grid; gap: var(--space-10); }
.prose-section { display: grid; gap: var(--space-4); scroll-margin-top: 96px; }
.prose-section h2, .faq-group h2 { font: 800 24px/32px var(--font-sans); letter-spacing: -.005em; }
.prose-section h2:lang(th), .faq-group h2:lang(th) { line-height: 1.5; letter-spacing: 0; }
.prose-section h3 { font: 700 18px/26px var(--font-sans); }
.prose-section p, .prose-section li { font-size: 17px; line-height: 28px; max-width: var(--measure); }
.prose-section p:lang(th), .prose-section li:lang(th) { line-height: 1.75; }
.prose-section ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--space-2); }
.prose-section .prose-section { gap: var(--space-3); }
.faq-group { display: grid; gap: var(--space-4); margin-top: var(--space-10); scroll-margin-top: 96px; }
.toc { padding: var(--space-5); margin-bottom: var(--space-10); display: grid; gap: var(--space-3); }
.toc ol { margin: 0; padding-left: 1.4em; display: grid; gap: var(--space-1); font-size: 15px; line-height: 23px; }
.toc a { display: inline-block; padding: var(--space-1) 0; }
.contact-mail { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); margin-bottom: var(--space-10) !important; }
.contact-mail svg { flex: none; color: var(--accent); }
.contact-mail span { display: grid; gap: 2px; min-width: 0; }
.contact-mail a { overflow-wrap: anywhere; }

/* ---------- tables ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--card); }
.dt-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 23px; }
.dt-table th, .dt-table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-top: 2px dashed var(--hairline); }
.dt-table thead th { border-top: 0; font: 700 13px/20px var(--font-sans); color: var(--muted); white-space: nowrap; }
.dt-table tbody th { font-weight: 700; min-width: 11em; }
.dt-table td.tnum { font-weight: 700; white-space: nowrap; }
.cat-list { list-style: none; margin: 0; padding: 0; border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--card); counter-reset: cat; }
.cat-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 2px dashed var(--hairline); max-width: none; counter-increment: cat; font-size: 15px; line-height: 23px; }
.cat-list li:first-child { border-top: 0; }
.cat-list li span::before { content: counter(cat) ". "; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- footer ---------- */
.dt-footer { margin-top: auto; }
.dt-footer .footer-inner { display: grid; gap: var(--space-6); }
.dt-footer .foot-h { font: 700 13px/20px var(--font-sans); letter-spacing: .127em; text-transform: uppercase; color: var(--muted); margin-bottom: var(--space-3); }
.dt-footer .foot-h:lang(th) { letter-spacing: 0; text-transform: none; }
.dt-footer .footer-tagline { margin-top: var(--space-3); font-size: 13px; line-height: 20px; max-width: 280px; }
.dt-footer .sources ul { font-size: 13px; line-height: 20px; }
.dt-footer .sources li span { color: var(--ink); }
.dt-footer li a[aria-current] { font-weight: 700; }

/* ---------- carousel ---------- */
.dt-carousel .track { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { .dt-carousel .track { scroll-behavior: auto; } }
.dt-carousel .controls[hidden] { display: none; }
.dt-iconbtn.is-flipped svg { transform: scaleX(-1); }
.dt-iconbtn.is-large { width: var(--button-height); height: var(--button-height); border-radius: var(--radius-md); border-color: var(--line-strong); flex: none; }
.dt-iconbtn:disabled { opacity: .4; cursor: not-allowed; }
.dt-iconbtn:hover:not(:disabled) { border-color: var(--ink); }

/* ---------- the sample quiz ----------
   Without JavaScript: a list of question cards, each with a <details> answer.
   With JavaScript (.is-enhanced, set by site.js): one card at a time, Study-mode
   feedback, then the score plate. */
.quiz { display: grid; gap: var(--space-4); }
.quiz .list-title { font: 700 18px/26px var(--font-sans); }
.quiz.is-enhanced .list-title, .quiz.is-enhanced > noscript { display: none; }
.dt-quiz .picture img { max-height: 60vh; object-fit: contain; }
.dt-quiz .stem { overflow-wrap: anywhere; }
.dt-option { font-family: inherit; }
.dt-option .text { overflow-wrap: anywhere; min-width: 0; }
.dt-option:disabled { cursor: default; opacity: 1; }
.dt-option:disabled:not(.is-correct):not(.is-wrong) { color: var(--muted); border-color: var(--hairline); }
.dt-option:disabled:hover { border-color: inherit; }
.dt-option.is-correct:disabled:hover { border-color: var(--correct); }
.dt-option.is-wrong:disabled:hover { border-color: var(--wrong); }
.dt-option:disabled:not(.is-correct):not(.is-wrong):hover { border-color: var(--hairline); }
.dt-option .mark { color: currentColor; }
/* Not enhanced: the option buttons do nothing, so they are not offered as
   controls — the <details> answer is the interaction. */
[data-quiz]:not(.is-enhanced) .dt-option { pointer-events: none; }
[data-quiz]:not(.is-enhanced) .progress { display: none; }
details.answer { border: 1px solid var(--hairline); border-radius: var(--radius-md); background: var(--card-sunken); }
details.answer > summary { min-height: var(--target-min); display: flex; align-items: center; padding: var(--space-2) var(--space-4); font-weight: 700; cursor: pointer; border-radius: var(--radius-md); }
details.answer > .answer-line { padding: 0 var(--space-4) var(--space-3); font-size: 15px; line-height: 23px; }
details.answer > .dt-explain { margin: 0 var(--space-3) var(--space-3); background: var(--card); }
[data-quiz].is-enhanced details.answer { border: 0; background: transparent; }
[data-quiz].is-enhanced details.answer > summary, [data-quiz].is-enhanced details.answer > .answer-line { display: none; }
[data-quiz].is-enhanced details.answer > .dt-explain { margin: 0; background: var(--card-sunken); }
[data-quiz].is-enhanced details.answer:not([open]) { display: none; }
.quiz.is-enhanced .q[hidden], .quiz .result[hidden], .quiz-actions[hidden] { display: none; }
.quiz-actions { display: flex; gap: var(--space-3); }
.quiz-actions .dt-btn { flex: 1 1 200px; }
.quiz-foot { text-align: center; font-size: 13px; line-height: 20px; color: var(--muted); }
.dt-score .actions { display: flex; flex-wrap: wrap; gap: var(--space-3); width: 100%; justify-content: center; }
.dt-score .actions .dt-btn { flex: 1 1 200px; }
.dt-score .dt-lane { width: 100%; margin: var(--space-2) 0; }
.dt-score .result-text { max-width: 38ch; }
.dt-score .store-block { justify-items: center; }
.dt-score .dt-badges { justify-content: center; }
.dt-score h2.dt-eyebrow { margin: 0; }
.sample .dt-quiz.is-teaser { border: 0; padding: 0; background: transparent; }
.sample .teaser-next { margin-top: var(--space-2); }

/* ---------- enlarged picture ---------- */
.dt-lightbox { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1100px); max-height: 94vh; }
.dt-lightbox::backdrop { background: var(--scrim); }
.dt-lightbox img { display: block; max-width: 100%; max-height: 88vh; margin: 0 auto; border-radius: var(--radius-md); background: var(--card); box-shadow: var(--elevation-2); }
.dt-lightbox form { display: flex; justify-content: flex-end; margin-bottom: var(--space-2); }

/* ---------- motion: painted, placed, indicated ----------
   Road-marking motion. Rules and lane dividers are painted from the left, icons
   and step numbers are set down like sign plates, the Download button
   indicates. Nothing bounces or spins, and nothing loops: every sequence ends
   inside five seconds (WCAG 2.2.2). Every animation sits inside
   prefers-reduced-motion: no-preference, so reduced motion gets the still page;
   site.js stands down too. The hero's H1 and lead never move (one of them is
   the LCP element on a phone), and the hero capture moves by transform only,
   so the preloaded image paints at once.

   Scroll reveals are site.js's: it marks .is-pending only what starts below the
   fold, and swaps it for .is-revealed as it enters. Without JavaScript, or for
   a crawler, nothing is ever hidden. The keyframes that run from a `from`
   alone end on the element's own style, and none of them holds its end state,
   so hover transforms keep working afterwards. */
:root { --motion-rise: 16px; --motion-stagger: 70ms; }
.arr { display: inline-block; }

@keyframes dt-settle { from { opacity: 0; transform: translateY(var(--motion-rise)); } }
@keyframes dt-paint { from { transform: scaleX(0); } }
@keyframes dt-rise-into-place { from { transform: translateY(56px); } }
@keyframes dt-place { from { opacity: 0; transform: scale(.55) rotate(-8deg); } }
@keyframes dt-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes dt-slide-next { from { opacity: 0; transform: translateX(28px); } }
@keyframes dt-slide-prev { from { opacity: 0; transform: translateX(-28px); } }
/* A turn signal: two flashes of sign yellow — a quick rise, a hold, a fade, as
   a lamp does — then a rest. Run twice, the flashing is over 3.4 s in. */
@keyframes dt-indicate {
  0%, 16%, 27.5%, 43.5%, 100% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--sign-yellow) 0%, transparent), 0 0 16px 4px color-mix(in srgb, var(--sign-yellow) 0%, transparent); }
  3%, 11%, 30.5%, 38.5% { box-shadow: 0 0 0 4px var(--sign-yellow), 0 0 16px 4px color-mix(in srgb, var(--sign-yellow) 55%, transparent); }
}
@keyframes dt-coverflow { 0%, 100% { transform: scale(.88); } 50% { transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* The hero, on load: the eyebrow, the rule, the buttons, the badges, in turn;
     the phone rises into place. */
  .hero .copy > .dt-eyebrow, .prose-head > .dt-eyebrow { animation: dt-settle var(--duration-reveal) var(--ease-standard) backwards; }
  .hero .copy > .dt-rule, .prose-head > .dt-rule, .quizhead .dt-rule { transform-origin: left center; animation: dt-paint var(--duration-slam) var(--ease-standard) 140ms backwards; }
  .hero .cta-row > * { animation: dt-settle var(--duration-reveal) var(--ease-standard) 260ms backwards; }
  .hero .cta-row > :nth-child(2) { animation-delay: 330ms; }
  .hero .store-block { animation: dt-settle var(--duration-reveal) var(--ease-standard) 420ms backwards; }
  .hero .device-wrap .dt-device { animation: dt-rise-into-place 900ms var(--ease-standard) 60ms backwards; }

  /* The signature: once the hero has settled, Download indicates. */
  .dt-header-download { animation: dt-indicate 2.4s linear 1.2s 2; }

  /* Scroll reveals (classes set by site.js). */
  .is-pending { opacity: 0; transform: translateY(var(--motion-rise)); }
  .is-revealed { animation: dt-settle var(--duration-slam) var(--ease-standard) calc(var(--i, 0) * var(--motion-stagger)) backwards; }
  hr.dt-lane { transform-origin: left center; }
  hr.dt-lane.is-pending { opacity: 1; transform: scaleX(0); }
  hr.dt-lane.is-revealed { animation: dt-paint 1100ms var(--ease-standard) backwards; }
  .dt-section-head { --rule-delay: 200ms; }
  .dt-section-head.is-pending .dt-rule { transform: scaleX(0); }
  .dt-section-head.is-revealed .dt-rule { transform-origin: left center; animation: dt-paint var(--duration-slam) var(--ease-standard) calc(var(--i, 0) * var(--motion-stagger) + var(--rule-delay)) backwards; }
  .dt-step.is-revealed .n, .dt-feature.is-revealed .ico { animation: dt-place var(--duration-slam) var(--ease-slam) calc(var(--i, 0) * var(--motion-stagger) + 180ms) backwards; }
  /* The sample card deals its options after it lands. */
  .sample.is-revealed .options > li { animation: dt-settle var(--duration-reveal) var(--ease-standard) 240ms backwards; }
  .sample.is-revealed .options > li:nth-child(2) { animation-delay: 300ms; }
  .sample.is-revealed .options > li:nth-child(3) { animation-delay: 360ms; }
  .sample.is-revealed .options > li:nth-child(4) { animation-delay: 420ms; }

  /* Answers open, they do not appear. */
  .dt-faq details[open] > .body, [data-quiz].is-enhanced details.answer[open] > .dt-explain { --motion-rise: 6px; animation: dt-settle var(--duration-standard) var(--ease-standard); }

  /* The quiz: the next question slides in from the side it comes from; the
     tick or cross is set down; on the score screen the verdict plate slams
     (the design's), then the lane is painted and the store badges arrive. */
  .dt-quiz.q.is-in-next { animation: dt-slide-next var(--duration-standard) var(--ease-standard) backwards; }
  .dt-quiz.q.is-in-prev { animation: dt-slide-prev var(--duration-standard) var(--ease-standard) backwards; }
  .dt-option .mark { animation: dt-pop var(--duration-standard) var(--ease-slam) backwards; }
  .dt-score > .dt-lane { transform-origin: left center; animation: dt-paint var(--duration-slam) var(--ease-standard) 420ms backwards; }
  .dt-score > .dt-lane ~ * { animation: dt-settle var(--duration-reveal) var(--ease-standard) 560ms backwards; }
  .dt-score > .store-block { animation-delay: 660ms; }

  .dt-carousel .dots i { transition: width var(--duration-standard) var(--ease-standard), background-color var(--duration-standard) var(--ease-standard); }
}

/* The capture in the middle of the carousel comes forward, driven by the
   scroll itself — where the browser can; elsewhere the carousel is as it was. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .dt-carousel figure > .dt-device { animation: dt-coverflow linear both; animation-timeline: view(inline); }
  }
}

/* Hover, on devices that have it: what is a link lifts, its arrow leans on. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  a.dt-territory-card, a.dt-store { transition: box-shadow var(--duration-micro) var(--ease-standard), border-color var(--duration-micro) var(--ease-standard), transform var(--duration-standard) var(--ease-standard); }
  a.dt-territory-card:hover { transform: translateY(-3px); }
  a.dt-store:hover { transform: translateY(-2px); box-shadow: var(--elevation-1); }
  .arr { transition: transform var(--duration-standard) var(--ease-standard); }
  a:hover .arr { transform: translateX(4px); }
}

/* ---------- reduced motion: every duration to zero ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ---------- print: the content, not the chrome ---------- */
@media print {
  .dt-header, .dt-footer .cols, .dt-langbar, .dt-carousel .controls, .quiz-actions, .skip-link, .store-block, .hero .device-wrap { display: none !important; }
  .dt-faq details > .body, details.answer > * { display: block !important; }
  .is-pending { opacity: 1 !important; transform: none !important; }
  body { background: #fff; }
}