@font-face {
  font-family: "Noto Sans Thai";
  src: url("/assets/fonts/noto-sans-thai-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Thai";
  src: url("/assets/fonts/noto-sans-thai-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Noto Sans Thai";
  src: url("/assets/fonts/noto-sans-thai-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/ibm-plex-mono-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("/assets/fonts/plex-mono-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Kanit";
  src: url("/assets/fonts/kanit-thai-light.woff2") format("woff2");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Kanit";
  src: url("/assets/fonts/kanit-thai-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Kanit";
  src: url("/assets/fonts/kanit-thai-medium.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Kanit";
  src: url("/assets/fonts/kanit-thai-semibold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;
}

@font-face {
  font-family: "Plex Thai Looped";
  src: url("/assets/fonts/plex-thai-looped-regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Plex Thai Looped";
  src: url("/assets/fonts/plex-thai-looped-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Plex Thai Looped";
  src: url("/assets/fonts/plex-thai-looped-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Plex Thai Looped";
  src: url("/assets/fonts/plex-thai-looped-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plex-mono-medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plex-mono-semibold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Plex Mono";
  src: url("/assets/fonts/plex-mono-bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --font-ui: "LINE Seed Sans TH", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --font-code: "IBM Plex Mono", "Plex Mono", Consolas, monospace;
  --type-caption: .75rem;
  --type-label: .875rem;
  --type-body: 1rem;
  --type-subheading: 1.125rem;
  --type-heading: 1.375rem;
  --type-section: 1.75rem;
  --type-display: 3.75rem;
  font-family: var(--font-ui);
  font-synthesis: none;
  font-kerning: normal;
}

[lang="th"] {
  --font-ui: "LINE Seed Sans TH", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --type-caption: .62rem;
  --type-label: .72rem;
  --type-body: .82rem;
  --type-subheading: .94rem;
  --type-heading: 1.05rem;
  --type-section: 1.35rem;
  --type-display: 3.4rem;
}

[lang="th"] h1,
[lang="th"] h2,
[lang="th"] h3 {
  font-weight: 600;
}

[lang="th"] .primary,
[lang="th"] .secondary {
  font-weight: 500;
}

body {
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0;
  text-rendering: optimizeLegibility;
}

button,
input,
output {
  font-family: inherit;
  line-height: 1.35;
}

h1,
h2,
h3 {
  font-weight: 700;
  text-wrap: balance;
}

h1,
[lang="th"] h1 {
  max-width: 8ch;
  font-size: var(--type-display);
  line-height: 1.02;
  letter-spacing: -.025em;
}

[lang="th"] h1,
[lang="th"] .auth-card h2,
[lang="th"] .panel-title h2 {
  letter-spacing: 0;
}

.lead {
  max-width: 52ch;
  font-size: var(--type-subheading);
  font-weight: 400;
  line-height: 1.72;
}

.brand b {
  font-size: var(--type-body);
  font-weight: 700;
  letter-spacing: -.01em;
}

.brand small,
.node-badge,
.card-head,
.panel-title p,
.preview-live,
.change-state,
footer,
.dialog-kicker {
  font-family: var(--font-code);
  font-size: var(--type-caption);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .07em;
}

.language button,
.online,
label,
.text-button,
.message,
.license-strip,
.presets > span,
.hotkey-list p,
pre,
.toast,
.preview-status {
  font-size: var(--type-label);
  line-height: 1.5;
}

.auth-card h2,
dialog h2 {
  font-size: var(--type-section);
  line-height: 1.2;
}

.panel-title h2 {
  font-size: var(--type-heading);
  line-height: 1.25;
}

.trust-row > span,
.key-field span,
.range-head output,
.preset,
.license-strip strong,
.preview-team,
.preview-distance,
.preview-status span,
.hotkey-list kbd,
pre {
  font-family: var(--font-code);
  font-variant-numeric: tabular-nums;
}

.trust-row > span,
.key-field span,
.preset,
.preview-team,
.preview-distance,
.preview-status span {
  font-size: var(--type-caption);
  font-weight: 600;
  letter-spacing: .035em;
}

.trust-row small {
  font-family: var(--font-ui);
  font-size: var(--type-caption);
  font-weight: 500;
  letter-spacing: 0;
}

.key-field input,
.primary,
.secondary {
  font-size: var(--type-body);
}

.primary,
.secondary {
  font-weight: 600;
  letter-spacing: 0;
}

.range-head {
  font-size: var(--type-label);
  line-height: 1.5;
}

.range-head output {
  font-size: var(--type-body);
  font-weight: 600;
}

.toggle-row b {
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.4;
}

.toggle-row small,
.expiry small {
  font-size: var(--type-label);
  line-height: 1.5;
}

.preview-status b {
  font-weight: 500;
}

@media (max-width: 850px) {
  :root { --type-display: 3.25rem; }
}

@media (max-width: 560px) {
  :root { --type-display: 2.75rem; }
  h1,
  [lang="th"] h1 { max-width: 10ch; }
}
@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("/assets/fonts/line-seed-sans-th-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("/assets/fonts/line-seed-sans-th-regular.woff2") format("woff2");
  font-style: normal;
  font-weight: 500;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("/assets/fonts/line-seed-sans-th-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("/assets/fonts/line-seed-sans-th-bold.woff2") format("woff2");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "LINE Seed Sans TH";
  src: url("/assets/fonts/line-seed-sans-th-extrabold.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}