/* Shared brand, surfaces and navigation across the complete bilingual site. */
html:has(.site-theme) { background: #dfe2e8; }
.site-theme {
  --ink: #1b2230;
  --muted: #5d6778;
  --paper: #e3e7ee;
  --card: #f0f3f8;
  --line: #c4cddc;
  --mint: #d1dced;
  --mint-strong: #7f94bd;
  --orange: #a9b7d0;
  --yellow: #d7e1f2;
  --blue: #a8bde6;
  --shadow: 0 18px 50px #25354f14;
  color: var(--ink);
}
.site-theme .catalog-brand { width: fit-content; flex-shrink: 0; }
.site-theme .brand-symbol { display: block; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 6px 18px #2c375223; }
.site-theme .catalog-nav { min-height: 73px; gap: 20px; }
.site-theme .catalog-nav-links { flex-shrink: 0; }
.site-theme .language-menu summary:focus-visible { outline-color: #506cb080; }
.site-theme .language-menu-popover a:focus-visible { outline-color: #5a76ad; }
.site-theme .site-footer { padding-block: 54px 28px; border-top: 1px solid var(--line); }
.site-theme .footer-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr); gap: 36px; }
.site-theme .footer-copy { max-width: 340px; margin: 20px 0 0; font-size: 13px; line-height: 1.85; }
.site-theme .footer-links { align-content: start; gap: 10px; font-size: 13px; }
.site-theme .footer-links strong { color: #6a7485; font: 500 10px 'DM Mono',monospace; letter-spacing: .12em; text-transform: uppercase; }
.site-theme .footer-links a { width: fit-content; }
.site-theme .footer-bottom { margin-top: 36px; font-size: 11px; line-height: 1.8; }
.site-theme .button { border-radius: 999px; font-size: 13px; font-weight: 600; }
.site-theme .button:hover { transform: translateY(-2px); box-shadow: inset 0 1px #ffffff44,0 14px 30px #27355122; }
.site-theme .button:active { transform: none; }
.site-theme .card { border-radius: 20px; }
.site-theme .callout { border: 1px solid #b9c6db; border-left: 3px solid #8297bf; border-radius: 14px; background: linear-gradient(145deg,#f5f7fcaa,#d9e1ef88); }
.site-theme .faq-list details { border-color: var(--line); background: #f4f6fa66; }
.site-theme .faq-list summary { font-weight: 600; }
.site-theme .inspector { min-width: 0; border: 1px solid #b6c2d6; border-radius: 20px; background: linear-gradient(145deg,#f8faffaa,#d8e0ee99); box-shadow: inset 0 1px #fff,0 20px 45px #34405512; }
.site-theme .inspect-drop { border-color: #99aac8; background: #f4f7fc55; }
.site-theme .inspect-drop:hover { background: #f4f7fcbb; border-color: #647ba5; }
.site-theme .inspect-drop:focus-within { outline: 2px solid #506cb0; outline-offset: 4px; }
.site-theme .stat { min-width: 0; background: #dce4f0aa; }
.site-theme .ratio-option { border-color: #a3b1ca; color: #344563; font-weight: 600; background: linear-gradient(145deg,#f7faff,#d4ddeb); }
.site-theme .ratio-option.active { background: #bdcce4; box-shadow: inset 0 1px #fff8,0 4px 12px #34456314; }
.site-theme .ratio-result { background: #dae3f2; color: #435675; font-weight: 500; }
.site-theme .tool-message { color: #434d60; }
.site-theme .tool-message[data-state=error] { color: #923c40; }
.content-page .hero { padding: 80px 0 54px; border-bottom: 1px solid var(--line); background: radial-gradient(ellipse at 50% 0,#ffffff8c,transparent 65%),linear-gradient(145deg,#eef1f6,#d8dee9); }
.content-page .hero h1 { max-width: 960px; font: 500 clamp(42px,5.7vw,76px)/1.05 'Space Grotesk',Manrope,system-ui,sans-serif; letter-spacing: -.06em; }
.content-page:lang(zh-CN) .hero h1 { max-width: 900px; font-family: Manrope,system-ui,sans-serif; line-height: 1.18; letter-spacing: -.04em; }
.content-page .hero-copy { max-width: 760px; font-size: 18px; line-height: 1.8; }
.content-page .section { padding-block: 76px; }
.content-page .section.compact { padding-block: 52px; }
.content-page h2 { font-size: clamp(30px,3.7vw,48px); line-height: 1.13; letter-spacing: -.04em; }
.content-page h3 { font: 600 21px/1.25 'Space Grotesk',Manrope,system-ui,sans-serif; letter-spacing: -.025em; }
.content-page .section-heading p,.content-page .split-copy p { font-size: 16px; line-height: 1.85; }
.content-page .section-heading .eyebrow,.content-page .split-copy .eyebrow { font-size: 11px; line-height: 1.6; }
.content-page .breadcrumbs { margin-top: 26px; font-size: 12px; }
.content-page .visualizer-shell { padding: 20px; border: 1px solid #77849b; background: linear-gradient(145deg,#e6ebf3,#cbd5e5); box-shadow: inset 0 1px #fff,0 22px 65px #293c5b25; }
.content-page .visualizer-topbar { color: #65738a; }
.content-page .window-dots span { background: #8b9cb9; }
.content-page .controls { grid-template-columns: minmax(160px,1.25fr) repeat(4,minmax(100px,1fr)); }
.content-page .file-control,.content-page .field-control { min-width: 0; border-color: #aebbd0; background: linear-gradient(145deg,#f8faff99,#d7dfedaa); color: #28354b; }
.content-page .control-label { color: #62718a; font-weight: 500; }
.site-theme.content-page .studio-editor { padding: 20px 0; background: transparent; }
.content-page .canvas-wrap { border-color: #566782; background: #0b0e14; }
.site-theme [id] { scroll-margin-top: 24px; }
.site-theme #privacy { scroll-margin-top: 40px; }
@media (max-width: 880px) {
  .site-theme .footer-grid { grid-template-columns: 1fr 1fr; }
  .site-theme .footer-grid > div:first-child { grid-column: 1 / -1; }
  .content-page .controls { grid-template-columns: 1fr 1fr; }
  .content-page .file-control { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .site-theme .catalog-nav { min-height: 67px; padding: 12px 14px; gap: 12px; }
  .site-theme .catalog-nav-links { gap: 14px; }
  .site-theme .catalog-nav-links > a { display: inline; font-size: 9px; }
  .site-theme .catalog-brand { gap: 9px; font-size: 11px; }
  .site-theme .catalog-brand small { font-size: 7px; }
  .site-theme .language-menu summary { min-width: 90px; padding-inline: 10px; gap: 5px; }
  .site-theme .footer-grid { gap: 28px 16px; }
  .site-theme .site-footer { padding-top: 38px; }
  .content-page .hero { padding: 52px 0 38px; }
  .content-page .hero h1 { font-size: clamp(38px,10vw,54px); }
  .content-page .hero-copy { font-size: 16px; }
  .content-page .section,.content-page .section.compact { padding-block: 44px; }
  .content-page .card,.content-page .inspector { padding: 22px; }
  .content-page .visualizer-shell { padding: 10px; border-radius: 20px; }
  .site-theme.content-page .studio-editor { padding: 14px 0; }
}
@media (max-width: 360px) {
  .site-theme .catalog-nav-links { gap: 9px; }
  .site-theme .catalog-brand { font-size: 10px; gap: 7px; letter-spacing: .07em; }
  .site-theme .catalog-brand small { letter-spacing: .04em; }
}