/* Homepage-only brand motion; yellow is confined to the selected headline. */
.hero h1 .hero-motion-toggle {
  /* 四角线条粗细：桌面 / 手机；数值越大越粗。 */
  --hero-corner-stroke: 3px;
  --hero-corner-stroke-mobile: 2px;
  --hero-text-hover: color-mix(in srgb, var(--text) 50%, #68686f);
  --hero-text-yellow: #a16b00;
  display: inline-flex; position: relative; isolation: isolate; align-items: center; gap: .65em;
  padding: .10em .21em; margin: .06em 0 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--text); font: inherit; line-height: inherit;
  letter-spacing: inherit; white-space: nowrap; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.hero h1 .hero-motion-from, .hero h1 .hero-motion-to {
  display: inline-block; position: relative; z-index: 1; min-height: 44px;
  padding: 0; margin: 0; border: 0; border-radius: 3px; background: transparent;
  color: var(--text); font: inherit; line-height: inherit; letter-spacing: inherit;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: color 150ms ease;
  -webkit-text-fill-color: currentColor;
}
.hero-motion-from:focus-visible, .hero-motion-to:focus-visible { outline: 2px solid var(--text); outline-offset: 6px; }
.hero h1 .hero-motion-toggle button[aria-pressed="true"] {
  color: var(--hero-text-yellow);
  -webkit-text-fill-color: currentColor;
}
:root[data-theme="dark"] .hero h1 .hero-motion-toggle { --hero-text-yellow: var(--action); --hero-text-hover: color-mix(in srgb, var(--text) 50%, #a1a1aa); }
.hero h1 .hero-selection {
  display: block; position: absolute; top: 0; left: 0; z-index: 0;
  pointer-events: none; opacity: 0;
  color: #eab308;
}
.hero-selection.is-moving { will-change: transform; }
@media (hover: hover) and (pointer: fine) {
  .hero h1 .hero-motion-toggle button[aria-pressed="false"]:hover { color: var(--hero-text-hover); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .hero-motion-toggle button { transition: none; }
}
.hero-corner { display: block; position: absolute; width: .23em; height: .23em; border: 0 solid currentColor; }
.hero-corner.tl { top: 0; left: 0; border-top-width: var(--hero-corner-stroke); border-left-width: var(--hero-corner-stroke); border-top-left-radius: 1px; }
.hero-corner.tr { top: 0; right: 0; border-top-width: var(--hero-corner-stroke); border-right-width: var(--hero-corner-stroke); border-top-right-radius: 1px; }
.hero-corner.bl { bottom: 0; left: 0; border-bottom-width: var(--hero-corner-stroke); border-left-width: var(--hero-corner-stroke); border-bottom-left-radius: 1px; }
.hero-corner.br { bottom: 0; right: 0; border-bottom-width: var(--hero-corner-stroke); border-right-width: var(--hero-corner-stroke); border-bottom-right-radius: 1px; }
@media (max-width: 600px) {
  .hero h1 .hero-motion-toggle { --hero-corner-stroke: var(--hero-corner-stroke-mobile); }
}