.hero-title-line {
  position: relative;
  display: block;
  width: max-content;
  max-width: 100%;
  isolation: isolate;
}
.hero-title-line .title-text { position: relative; display: block; }
.title-wipe,
.title-wipe-foreground {
  position: absolute;
  display: block;
  inset: -.08em -.025em;
  z-index: 2;
  pointer-events: none;
  background: var(--brand, #fd551d);
  clip-path: inset(0 100% 0 0);
}
.title-wipe-foreground { z-index: 3; background: var(--paper, #eee); }
html.gf-motion .hero-title-line .title-text,
html.gf-motion .hero .hero-intro,
html.gf-motion .hero .intro,
html.gf-motion .hero .hero-actions { opacity: 0; }
.scroll-reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .8s cubic-bezier(.16,1,.3,1); }
.scroll-reveal.is-visible { opacity: 1; transform: none; }
.brief-dialog { width: min(680px, calc(100vw - 32px)); max-height: calc(100svh - 48px); padding: 28px; border: 1px solid #eee3; background: #202021; color: #eee; margin: auto; }
.brief-dialog::backdrop { background: #000b; backdrop-filter: blur(8px); }
.brief-dialog-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 12px; }
.brief-dialog-top p { font-size: 22px; letter-spacing: -.03em; }
.brief-dialog-top button { padding: 8px 0 8px 16px; color: #fd7142; }
.brief-dialog-help { font-size: 14px; color: #a5a3a5; line-height: 1.6; margin-bottom: 20px; }
.brief-dialog textarea { width: 100%; min-height: min(420px, 48svh); resize: vertical; padding: 16px; border: 1px solid #eee3; background: #141314; color: #eee; font: 13px/1.7 Consolas, 'Microsoft YaHei', monospace; border-radius: 0; }
.brief-dialog textarea:focus { outline: 1px solid #fd551d; outline-offset: 2px; }

/* Keep real document scrolling, so focus, sticky sections and browser history work. */
html.gf-smooth-scroll { scroll-behavior: auto !important; }
main#main { position: relative; z-index: 1; }
.footer-reveal-wrapper { position: relative; background: var(--ink, #141314); }
.footer-reveal-wrapper > .site-footer { position: relative; background: var(--ink, #141314); }
@media (min-width: 1024px) and (hover: hover) and (pointer: fine) {
  html.gf-scroll-effects .hero-grid,
  html.gf-scroll-effects .footer-reveal-wrapper > .site-footer { will-change: transform; }
  html.gf-scroll-effects .footer-reveal-wrapper > .site-footer > .container { will-change: opacity; }
}
.footer-reveal-wrapper > .site-footer:focus-within > .container { opacity: 1 !important; }
.site-header {
  --header-foreground: #eee;
  --header-muted: #818081;
  --header-surface: #333;
}
.site-header[data-scroll-theme="light"] {
  --header-foreground: #141314;
  --header-muted: #777277;
  --header-surface: #d5d5d5;
}
.site-header[data-scroll-theme="brand"] {
  --header-foreground: #141314;
  --header-muted: #1a1a1a;
  --header-surface: #fd8d68;
}
.site-header .header-bar {
  color: var(--header-foreground);
  transition: padding 500ms cubic-bezier(.16,1,.3,1), background-color 500ms ease-out, color 500ms ease-out;
}
.site-header .brand-name > span { color: var(--header-muted); transition: color 500ms ease-out; }
.site-header .lang-toggle { color: inherit; }
.site-header .brand-symbol i { background: var(--header-foreground); }
.site-header.is-scrolled .header-bar,
.menu-is-open .site-header .header-bar { background: var(--header-surface); }
.menu-is-open .site-header .header-bar { padding-inline: 64px; }
.site-header.header-hidden:not(:focus-within) { transform: translateY(calc(-100% - 32px)); pointer-events: none; }
@media (max-width: 1023px) {
  .menu-is-open .site-header .header-bar { padding-inline: 24px; }
}
@media (max-width: 639px) {
  .menu-is-open .site-header .header-bar { padding-inline: 10px; }
}
@media (max-width: 1023px), (hover: none), (pointer: coarse), (pointer: none) {
  .hero-grid,
  .footer-reveal-wrapper > .site-footer { transform: none !important; will-change: auto !important; }
  .footer-reveal-wrapper > .site-footer > .container { opacity: 1 !important; will-change: auto !important; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-grid,
  .footer-reveal-wrapper > .site-footer { transform: none !important; will-change: auto !important; }
  .footer-reveal-wrapper > .site-footer > .container { opacity: 1 !important; will-change: auto !important; }
  html.gf-motion .hero-title-line .title-text,
  html.gf-motion .hero .hero-intro,
  html.gf-motion .hero .intro,
  html.gf-motion .hero .hero-actions { opacity: 1; }
  .scroll-reveal { opacity: 1; transform: none; transition: none; }
}