@import './site-motion.css';
/* 首页、工作台与任务入口共用品牌、字体和外层容器；编辑器内部布局各自负责。 */
:root {
  --site-font: "Avenir Next", "Noto Sans SC", ui-sans-serif, -apple-system, BlinkMacSystemFont, sans-serif;
  --site-max-width: 1120px;
  --site-gutter: 24px;
  --site-language-height: 44px;
  --site-width: min(var(--site-max-width), calc(100% - 2 * var(--site-gutter)));
  --site-scrollbar-thumb: #7c89a3;
  --site-scrollbar-hover: #65758f;
  --site-scrollbar-active: #465a7c;
  scrollbar-gutter: stable;
  font-family: var(--site-font);
  font-size: 13px;
  font-synthesis: none;
}
/* Fill short viewports; the footer consumes spare space and stays in normal flow on long pages. */
body { display: flex; flex-direction: column; min-block-size: 100dvh; }
/* Keep native scrolling across pages, menus, inputs and nested panels. */
@media (forced-colors: none) {
  @supports selector(::-webkit-scrollbar) {
    ::-webkit-scrollbar { width: 10px; height: 10px; }
    ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; }
    ::-webkit-scrollbar-thumb {
      min-height: 36px;
      min-width: 36px;
      border: 2px solid transparent;
      border-radius: 999px;
      background-color: var(--site-scrollbar-thumb);
      background-clip: padding-box;
    }
    ::-webkit-scrollbar-thumb:hover { background-color: var(--site-scrollbar-hover); }
    ::-webkit-scrollbar-thumb:active { background-color: var(--site-scrollbar-active); }
    ::-webkit-scrollbar-button { display: none; }
  }
  @supports not selector(::-webkit-scrollbar) {
    * { scrollbar-width: thin; scrollbar-color: var(--site-scrollbar-thumb) transparent; }
  }
}
h2 { font-size: 15px; font-weight: 650; }
/* Reserve the same header space for a 44px language control and its vertical padding. */
.site-header-inner { min-block-size: 68px; width: var(--site-width); margin-inline: auto; display: flex; align-items: center; gap: 8px 32px; padding-block: 12px; }
.brand { min-block-size: var(--site-language-height); display: inline-flex; align-items: center; gap: 8px; color: #304ecf; font-weight: 750; text-decoration: none; }
.brand > img { display: block; inline-size: 32px; block-size: 32px; flex: 0 0 32px; }
.brand > span { font-size: 14px; overflow-wrap: anywhere; }
@media (max-width: 700px) { :root { --site-gutter: 16px; } }

/* The three native tool links follow the same ordering in every header. */
.site-header-inner { flex-wrap: wrap; }
.site-header-inner > .brand { order: 0; }
.tool-navigation { order: 1; display: flex; flex-wrap: wrap; gap: 8px 24px; margin-inline-end: auto; }
.tool-navigation a { color: #57637d; text-decoration: none; padding-block: 5px; border-bottom: 2px solid transparent; }
.tool-navigation a:hover, .tool-navigation a[aria-current="page"] { color: #304ecf; border-bottom-color: #304ecf; }
.tool-navigation a:focus-visible { outline: 2px solid #304ecf; outline-offset: 1px; }
.site-header-inner > .language-control, .site-header-inner > .workbench-language { order: 2; }
@media (max-width: 850px) { .tool-navigation { order: 3; inline-size: 100%; margin: 0; gap: 8px 18px; } }

/* Shared chrome has one geometry on every surface. */
.site-header, .studio-header { background: #fff; border-bottom: 1px solid #dfe5f2; }
.site-header-inner { max-width: none; padding: 12px 0; gap: 8px 32px; font: 13px/1.5 var(--site-font); }
.site-header-inner .brand { color: #304ecf; text-decoration: none; }
.site-header-inner .brand > span { color: inherit; font-size: 14px; }
.site-header-inner .brand > img { margin: 0; border: 0; border-radius: 0; }
.site-header-inner .tool-navigation { font-size: 13px; line-height: 1.5; }
.site-header-inner .tool-navigation a { color: #57637d; text-decoration: none; }
.site-header-inner .tool-navigation a:is(:hover, [aria-current="page"]) { color: #304ecf; border-bottom-color: #304ecf; }
.site-header-inner > :is(.language-control, .workbench-language) { order: 2; inline-size: 160px; flex: 0 0 160px; margin: 0; margin-inline-start: auto; }
.site-header-inner .workbench-language > label { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
.site-footer { margin: auto 0 0; padding: 0; border-top: 1px solid #dfe5f2; background: #fff; color: #57637d; font: 13px/1.5 var(--site-font); }
.site-footer .footer-inner { width: var(--site-width); margin: auto; padding: 20px 0 8px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; font-size: 13px; }
.site-footer .footer-brand { color: #304ecf; font-weight: 650; text-decoration: none; }
.site-footer .footer-note { color: #57637d; font-size: 12px; }
.site-footer .footer-inner nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-inline-start: auto; }
.site-footer .footer-link { display: inline-flex; align-items: center; min-height: 36px; padding: 8px 0; color: #57637d; border: 0; font: inherit; text-decoration: none; cursor: pointer; }
.site-footer .footer-link:hover, .site-footer [aria-current="page"] { color: #304ecf; }
.site-footer .language-links { width: var(--site-width); margin: auto; padding: 0 0 14px; }
.site-footer #languageLinks { display: flex; flex-wrap: wrap; gap: 0 20px; padding-top: 8px; }
.site-footer #languageLinks a { margin: 0; }
@media (max-width: 700px) {
  .site-footer .footer-inner nav { width: 100%; margin-inline-start: 0; }
  .site-footer .footer-note { display: inline; }
}

body:has(.export-bar:not([hidden])) .site-footer { padding-bottom: 84px; }

/* One searchable language control on tools and reading pages, independent of page styles. */
.site-header-inner :is(.language-control, .workbench-language) { position: relative; }
.site-header-inner .choices { margin: 0; font: 13px/1.5 var(--site-font); }
.site-header-inner :is(.language-control, .workbench-language) .choices[data-type*="select-one"] .choices__inner {
  display: flex; align-items: center; height: var(--site-language-height); min-height: var(--site-language-height);
  padding: 10px 28px 10px 36px; border: 1px solid #e2e7f0; border-radius: 8px; color: #304ecf; font: inherit;
  background: #f5f7fc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23304ecf' stroke-width='1.5'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='9'/%3E%3Cpath d='M3 12h18M5 6.5h14M5 17.5h14'/%3E%3C/svg%3E") 11px center / 18px 18px no-repeat;
}
.site-header-inner :is(.language-control, .workbench-language) .choices__list--single { width: 100%; padding: 0; }
.site-header-inner .choices__list--single .choices__item { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.site-header-inner .choices[data-type*="select-one"]::after { border: 0; width: 6px; height: 6px; border-inline-end: 1.5px solid #57637d; border-bottom: 1.5px solid #57637d; transform: rotate(45deg); top: 18px; right: 13px; margin: 0; }
.site-header-inner .choices[data-type*="select-one"].is-open::after { transform: rotate(225deg); top: 21px; }
.site-header-inner :is(.language-control, .workbench-language) .choices:is(:hover, .is-focused, .is-open) .choices__inner { border-color: #b5c3f1; background-color: #edf0ff; }
.site-header-inner .choices:focus-visible { outline: 2px solid #9cabe6; outline-offset: 1px; }
.site-header-inner :is(.language-control, .workbench-language) .choices__list--dropdown { inset-inline: auto 0; width: min(320px, calc(100vw - 48px)); margin-top: 8px; padding: 6px; border: 1px solid #dfe5f2; border-radius: 10px; box-shadow: 0 12px 32px #202b481a; z-index: 40; }
.site-header-inner :is(.language-control, .workbench-language) .choices__input { box-sizing: border-box; width: 100%; margin: 0 0 6px; padding: 11px 10px; border: 0; border-bottom: 1px solid #e2e7f0; border-radius: 6px 6px 0 0; background: #fff; color: #202b48; font: 16px/1.5 var(--site-font); }
.site-header-inner :is(.language-control, .workbench-language) .choices__input:focus { outline: none; border-bottom-color: #304ecf; }
.site-header-inner :is(.language-control, .workbench-language) .choices__list--dropdown .choices__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: min(360px, 65vh); overscroll-behavior: contain; }
.site-header-inner :is(.language-control, .workbench-language) .choices__list--dropdown .choices__item { min-height: 48px; padding: 9px 10px; border-radius: 6px; color: #202b48; font: 13px/1.5 var(--site-font); overflow-wrap: anywhere; }
.site-header-inner :is(.language-control, .workbench-language) .choices__list--dropdown :is(.is-highlighted, .is-selected) { background: #edf0ff; color: #304ecf; }
.site-header-inner .choices__description { display: block; margin-top: 2px; color: #6c7690; font-size: 10px; }
.site-header-inner .choices__item--choice.has-no-results { grid-column: 1 / -1; }
.site-header-inner .choices.is-disabled { opacity: .55; }
.site-header-inner > :is(.language-control, .workbench-language) > select { width: 100%; min-height: var(--site-language-height); padding: 10px; border: 1px solid #e2e7f0; border-radius: 8px; background: #f5f7fc; color: #304ecf; font: inherit; }
[dir="rtl"] .site-header-inner .choices[data-type*="select-one"]::after { right: auto; left: 13px; }
[dir="rtl"] .site-header-inner :is(.language-control, .workbench-language) .choices[data-type*="select-one"] .choices__inner { padding-inline: 36px 28px; background-position: right 11px center; }
@media (max-width: 850px) {
  .site-header-inner { column-gap: 12px; }
  .site-header-inner > :is(.language-control, .workbench-language) { margin-inline-start: auto; }
}
@media (max-width: 360px) {
  .site-header-inner > :is(.language-control, .workbench-language) { inline-size: 140px; flex-basis: 140px; }
}