/* Hangul.io theme: the editor's blue title bar and quiet working surfaces. */
:root {
  --site-primary: #2b579a;
  --site-primary-hover: #1e3f6f;
  --site-paper: #1b1b1f;
  --site-surface: #23232a;
  --site-inset: #2a2a33;
  --site-document: #23232a;
  --site-hover: #3a3a42;
  --site-highlight: #25364f;
  --site-ink: #e6e6e6;
  --site-muted: #b8b8c0;
  --site-line: #45454d;
  --site-accent: #79b8ff;
  --site-error: #ffc2cd;
  --site-error-surface: #41232c;
  --site-radius: 3px;
  --site-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --site-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', monospace;
  color-scheme: dark;
}
html[data-theme="light"] {
  --site-paper: #e4e1db;
  --site-surface: #ece9e3;
  --site-inset: #d5d2cc;
  --site-document: #eeeae4;
  --site-hover: #dcd8d1;
  --site-highlight: #d4deeb;
  --site-ink: #302d2a;
  --site-muted: #68625d;
  --site-line: #c5c0b8;
  --site-accent: #2b579a;
  --site-error: #8b3443;
  --site-error-surface: #f1dce0;
  color-scheme: light;
}
/* The editor and its reference pages use these legacy surface names. */
body, body.light-mode {
  font-family: var(--site-font);
  --bg-primary: var(--site-paper);
  --bg-secondary: var(--site-surface);
  --bg-tertiary: var(--site-inset);
  --bg-hover: var(--site-hover);
  --text-primary: var(--site-ink);
  --text-secondary: var(--site-muted);
  --border: var(--site-line);
  --code-bg: var(--site-surface);
  --accent: var(--site-accent);
  --accent-hover: var(--site-accent);
}
.site-header {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 18px;
  min-height: 32px;
  padding: 3px 12px;
  background: var(--site-primary);
  color: #fff;
  font: 12px/1.4 var(--site-font);
  position: relative;
  z-index: 110;
}
.site-header a { text-decoration: none; color: inherit; }
.site-brand { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; white-space: nowrap; }
.site-brand-icon { display: block; width: 20px; height: 20px; flex-shrink: 0; }
.site-brand-dot { color: inherit; }
.site-preferences { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.site-language { display: flex; border: 1px solid rgba(255,255,255,.24); border-radius: var(--site-radius); padding: 1px; gap: 2px; }
/* Reset product button styles so the shared icon remains centered. */
.site-header button { box-sizing: border-box; width: auto; padding: 0; margin: 0; font: 11px/1.4 var(--site-font); cursor: pointer; border: 0; color: #dce6f5; background: transparent; transition: background .15s, color .15s; }
.site-language button { padding: 2px 6px; border-radius: 2px; }
.site-language button.active { background: rgba(255,255,255,.2); color: #fff; }
.site-header button:hover { color: #fff; background: rgba(255,255,255,.12); }
.site-header .site-theme { width: 24px; height: 24px; display: grid; place-items: center; flex-shrink: 0; border-radius: 2px; }
.site-theme svg { width: 18px; height: 18px; grid-area: 1/1; display: block; }
html[data-theme="light"] .site-sun, html[data-theme="dark"] .site-moon { display: none; }
.site-header :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.site-header--compact { height: 32px; flex-wrap: nowrap; }
.site-header--compact .site-preferences { margin-left: 0; }
.site-document-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .9; }
@media (max-width: 700px) { .site-header { gap: 10px; padding: 3px 8px; } }
@media (max-width: 380px) { .site-header--compact .site-brand > span { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none!important; scroll-behavior: auto!important; transition: none!important; } }
@media print { .site-header { display: none; } }