/* Self-hosted Google Sans for Latin and Noto Sans SC for Chinese. */
:root {
  --font-ui: "Google Sans", "Noto Sans SC", "Microsoft YaHei UI", sans-serif;
  font-family: var(--font-ui);
  font-weight: 400;
  font-optical-sizing: auto;
  font-synthesis: none;
  font-kerning: normal;
  font-feature-settings: "kern" 1, "liga" 1;
}
body, button, input, textarea { font-family: var(--font-ui); }
button, input, textarea { letter-spacing: 0; }
.brand { font-weight: 500; letter-spacing: -.35px; line-height: 1.2; }
.home-zone h1 { font-weight: 400; letter-spacing: .15px; line-height: 1.3; }
.nav-item { font-weight: 400; line-height: 1.4; }
.nav-item.active { font-weight: 600; }
.side-label { font-weight: 400; line-height: 1.4; }
.history-row>button:first-child { font-weight: 400; line-height: 1.5; }
.profile { font-weight: 500; }
.composer textarea { font-weight: 400; letter-spacing: 0; }
input::placeholder, textarea::placeholder { font-weight: 400; color: #a7a9ac; opacity: 1; }
.model-button, .pill, .tab { font-weight: 500; }
.menu-item { font-weight: 400; line-height: 1.35; }
.menu-item .subtext { font-weight: 400; line-height: 1.4; }
.menu-label { font-weight: 400; line-height: 1.4; }
.search-head input, .search-result { font-weight: 400; line-height: 1.4; }
.search-result .date { font-variant-numeric: tabular-nums; }
.message { font-weight: 400; line-height: 1.7; letter-spacing: 0; overflow-wrap: anywhere; }
.answer strong { font-weight: 600; }
.artifact-info { font-weight: 500; }
.artifact-date, .disclaimer { font-weight: 400; }
.custom-header h1 { font-weight: 400; line-height: 1.25; letter-spacing: -.3px; }
.custom-header p { font-weight: 400; line-height: 1.5; }
.skill-name { font-weight: 500; line-height: 1.35; }
.skill-desc { font-weight: 400; line-height: 1.45; }
.category-title { font-weight: 400; line-height: 1.4; }
.field>span { font-weight: 400; line-height: 1.4; }
.field input, .field textarea { font-weight: 400; line-height: 1.6; }
.back-link { font-weight: 400; }
.modal-title { font-weight: 500; line-height: 1.4; }
.notice { font-weight: 400; line-height: 1.8; }
.dark input::placeholder, .dark textarea::placeholder { color: #969ba1; }

/* Screenshot type scale, in CSS pixels; independent of layout scaling. */
.brand { font-size: 18px; }
.home-zone h1 { font-size: 36px; }
.nav-item, .profile { font-size: 14px; }
.side-label { font-size: 13px; }
.history-row>button:first-child { font-size: 14px; }
.composer textarea { font-size: 16px; line-height: 26px; }
.model-button { font-size: 14px; }
.pill, .tab { font-size: 14px; }
.menu-item { font-size: 14px; }
.menu-item .subtext, .menu-label { font-size: 12px; }
.search-head input, .search-result { font-size: 16px; }
.recent-label, .search-result .date { font-size: 14px; }
.message { font-size: 18px; line-height: 1.65; }
.user-bubble { font-size: 17px; }
.artifact-date, .disclaimer { font-size: 12px; }
.custom-header h1 { font-size: 25px; }
.custom-header p { font-size: 14px; }
.custom-search input { font-size: 13px; }
.category-title { font-size: 16px; }
.skill-name { font-size: 17px; }
.skill-desc { font-size: 12px; }
.field>span { font-size: 13px; }
.field input, .field textarea { font-size: 14px; }
.back-link { font-size: 16px; }
.modal-title { font-size: 22px; }
.notice { font-size: 14px; }
svg.material-icon { fill: currentColor; stroke: none; stroke-width: 0; }
.menu-item svg.material-icon, .nav-item svg.material-icon { stroke: none; }
.brand-row svg.material-icon { width: 16px; height: 16px; }
.nav-item svg.material-icon { width: 18px; height: 18px; }
.side-footer svg.material-icon { width: 18px; height: 18px; }
.composer .icon-btn svg.material-icon { width: 20px; height: 20px; }
.composer .plus svg.material-icon { width: 22px; height: 22px; }
.model-button svg.material-icon { width: 16px; height: 16px; }
.pill svg.material-icon, .topbar>.icon-btn svg.material-icon { width: 18px; height: 18px; }
.actions svg.material-icon { width: 18px; height: 18px; }
.menu-item svg.material-icon { width: 18px; height: 18px; }
.model-menu .menu-item>svg.material-icon { width: 16px; height: 16px; }
.skill-icon svg.material-icon { width: 22px; height: 22px; }
.search-result svg.material-icon { width: 20px; height: 20px; }
.model-menu { min-width: 170px; width: 170px; }
.submenu { min-width: 140px; width: 140px; }
.settings-menu { width: 240px; }
.actions .icon-btn { width: 31px; height: 31px; padding: 6px; }
.composer .icon-btn { width: 32px; height: 32px; padding: 6px; }
.composer-wrap { width: min(660px, calc(100% - 48px)); }
@media(max-width:700px) {
  .composer-wrap { width: calc(100% - 24px); }
  .home-zone h1 { font-size: clamp(22px, 5.3vw, 28px); }
  .composer textarea { font-size: 16px; }
  .composer .model-button { font-size: 13px; }
  .pill, .tab { font-size: 13px; }
  .menu-item { font-size: 14px; }
  .search-head input, .search-result { font-size: 15px; }
  .recent-label, .search-result .date { font-size: 12px; }
  .message, .user-bubble { font-size: 16px; }
  .disclaimer { font-size: 10px; }
  .custom-header h1 { font-size: 23px; }
  .custom-header p { font-size: 13px; }
  .skill-name { font-size: 16px; }
  .field input, .field textarea { font-size: 16px; }
}
