@font-face { font-family: "CHJ Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-cyrillic-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0460-052F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F; }
@font-face { font-family: "CHJ Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-cyrillic-wght-normal.woff2) format("woff2"); unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "CHJ Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-greek-wght-normal.woff2) format("woff2"); unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF; }
@font-face { font-family: "CHJ Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-vietnamese-wght-normal.woff2) format("woff2"); unicode-range: U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB; }
@font-face { font-family: "CHJ Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-ext-wght-normal.woff2) format("woff2"); unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "CHJ Inter"; font-style: normal; font-display: swap; font-weight: 100 900; src: url(fonts/inter-latin-wght-normal.woff2) format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }

/* macOS is the reference look: it keeps its system font, and WebView2 and WebKitGTK get Inter, the closest match,
   with the same form controls and scrollbars. Scripts Inter does not
   cover fall back to the system font. Colors stay with each page; only what differs between engines is set here. */
:root {
  color-scheme: dark;
  --chj-font: -apple-system, BlinkMacSystemFont, "CHJ Inter", system-ui, "Segoe UI", "Noto Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  accent-color: #42a5ff;
}
html, body { font-family: var(--chj-font) !important; }
button:not(.mono), select:not(.mono), input:not(.mono), textarea:not(.mono) { font-family: var(--chj-font); }
select {
  appearance: none; -webkit-appearance: none;
  padding-right: 28px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238ea5bf' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
  background-size: 10px 6px !important;
}
select[multiple] { padding-right: 10px !important; background-image: none !important; }
select option { background: #0d1b2b; color: #e8f0fa; }
input[type="checkbox"], input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex: none; display: inline-grid; place-content: center;
  width: 16px; height: 16px; margin: 0; padding: 0;
  border: 1px solid #3f5d7c; background: #0d1b2b; cursor: pointer;
}
input[type="checkbox"] { border-radius: 4px; }
input[type="radio"] { border-radius: 50%; }
input[type="checkbox"]:checked, input[type="radio"]:checked { border-color: #42a5ff; background: #2f8fe6; }
input[type="checkbox"]:checked::before { content: ""; width: 9px; height: 7px; background: #fff; clip-path: polygon(14% 44%, 0 58%, 38% 100%, 100% 16%, 85% 3%, 37% 68%); }
input[type="radio"]:checked::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
input[type="checkbox"]:disabled, input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; }
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid #42a5ff; outline-offset: 2px; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { border: 2px solid transparent; border-radius: 6px; background: rgba(142,165,191,.34) padding-box; }
::-webkit-scrollbar-thumb:hover { background: rgba(142,165,191,.55) padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* One scale: the main page and all modules use the same text, control and panel sizes. */
body { font-size: 14px; line-height: 1.45; }
h1 { font-size: 20px !important; letter-spacing: -.01em !important; }
h2 { font-size: 16px !important; letter-spacing: -.005em !important; }
h3 { font-size: 14px !important; }
button, select, textarea, input:not([type="checkbox"]):not([type="radio"]) { font-size: 13px !important; }
.button, select, input:not([type="checkbox"]):not([type="radio"]) { border-radius: 8px !important; }
.button { padding: 7px 12px !important; line-height: 1.3; }
select, input:not([type="checkbox"]):not([type="radio"]) { min-height: 32px; padding-top: 5px !important; padding-bottom: 5px !important; }
.panel, .card { border-radius: 12px !important; }
.eyebrow { font-size: 10px !important; }
