:root {
      --brand: #0052d9;
      --brand-hover: #266fe8;
      --brand-light: #e3ecff;
      --td-brand-color: #0052d9;
      --td-brand-color-hover: #266fe8;
      --td-brand-color-light: #e3ecff;
      --header-glass-bg: rgba(255, 255, 255, .42);
      --header-glass-border: rgba(255, 255, 255, .5);
      --header-solid-bg: #fff;
      --header-solid-hover: #f3f6fb;
      --header-text: rgba(0, 0, 0, .901961);
      --header-divider-glass: rgba(17, 35, 57, .08);
      --header-divider-solid: #e7e7e7;
      --menu-border: #dcdde1;
      --menu-header-stroke: #e7e8eb;
      --menu-active: #f2f3ff;
      --menu-placeholder: rgba(0, 0, 0, .4);
      --topbar-height: 50px;
      --hero-search-width: 936px;
      --hero-search-height: 48px;
      --hero-search-top: 188px;
      --hero-search-panel-gap: 8px;
      --hero-title-top: 50px;
      --hero-subtitle-top: 128px;
      --home-overview-top: 318px;
      --home-overview-stack-height: 374px;
      --home-overview-vulnerability-gap: var(--home-overview-gap);
      --home-vulnerability-top: calc(
        var(--home-overview-top)
        + var(--home-overview-stack-height)
        + var(--home-overview-vulnerability-gap)
      );
      
      --subtitle-viewport-width: 156px;
      --motion-fast: 140ms;
      --motion-normal: 190ms;
      --motion-standard: cubic-bezier(.2, .8, .2, 1);
      --home-content-offset-y: 28px;
      --home-page-footer-top: calc(var(--home-content-offset-y) + var(--home-vulnerability-top) + 289px);
      --home-app-height: calc(var(--home-page-footer-top) + 44px);
      --home-desktop-min-width: 1200px;
      --home-gutter-x: clamp(16px, 1.111111vw, 24px);
      --home-overview-gap: 16px;
      --home-card-inner-x: clamp(18px, 1.597222vw, 23px);
      --home-header-x: clamp(20px, 1.666667vw, 24px);
      --home-header-gap: clamp(14px, 1.388889vw, 20px);
      --page: #f2f4f8;
      --container: #fff;
      --stroke: #e9ecf1;
      --border: #e6e9ef;
      --text: rgba(0, 0, 0, .9);
      --text-secondary: rgba(0, 0, 0, .7);
      --text-placeholder: rgba(0, 0, 0, .5);
      --text-disabled: rgba(0, 0, 0, .3);
      --danger: #f64041;
      --danger-light: #fce8e8;
      --warning: #ff7800;
      --warning-light: #ffeddf;
      --radius-control: 3px;
      --radius-panel: 6px;
      --radius-card: 6px;
      --radius-segment: 4px;
      --radius-pill: 999px;
      --search-focus-border: #029cd4;
      --search-focus-heading-underline-default: 56px;
      --search-focus-heading-underline-hot: 53px;
      --font: "PingFang SC", "Microsoft YaHei", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    *, *::before, *::after { box-sizing: border-box; }
    html, body { min-width: 320px; min-height: 100%; margin: 0; }
    html { background: var(--page); }
    body {
      min-height: 100vh;
      overflow-x: auto;
      color: var(--text);
      background: var(--page);
      font-family: var(--font);
      font-size: 14px;
      line-height: 22px;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img { display: block; }
    a { color: inherit; text-decoration: none; }
    button.segment,
    button.footer-link,
    button.pager-control {
      appearance: none;
      -webkit-appearance: none;
      margin: 0;
      border: 0;
      font: inherit;
      text-align: inherit;
    }
    button.footer-link,
    button.pager-control { padding: 0; }
    button.segment,
    button.footer-link,
    button.pager-control { background: transparent; }

    .app {
      position: relative;
      width: 100%;
      min-width: var(--home-desktop-min-width);
      max-width: none;
      height: var(--home-app-height);
      margin: 0;
      overflow: hidden;
      background: var(--page);
    }
    .page-background {
      position: absolute;
      z-index: 0;
      top: 50px;
      left: 0;
      display: none;
      width: 100%;
      height: calc(100% - 50px);
      overflow: hidden;
      pointer-events: none;
    }

    
    .topbar {
      position: fixed;
      z-index: 10;
      top: 0;
      left: 0;
      width: 100%;
      height: 50px;
      overflow: visible;
      border-bottom: 1px solid var(--stroke);
      background: var(--container);
    }
    .brand {
      position: absolute;
      top: 15px;
      left: var(--home-header-x);
      width: 117px;
      height: 20px;
    }
    .brand img { width: 117px; height: 20px; }
    .primary-nav {
      position: absolute;
      top: 9px;
      left: calc(var(--home-header-x) + 135px);
      display: flex;
      height: 32px;
      align-items: center;
      gap: 8px;
    }
    .nav-item {
      position: relative;
      display: inline-flex;
      height: 32px;
      flex: 0 0 auto;
      align-items: center;
      gap: 8px;
      padding: 5px 12px;
      border-radius: var(--radius-control);
      color: var(--text);
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      white-space: nowrap;
      border: 0;
      outline: 0;
      background: transparent;
      font-family: inherit;
      cursor: pointer;
    }
    .nav-item[aria-current="page"],
    .nav-item[aria-expanded="true"] { color: var(--brand); background: var(--brand-light); }
    .nav-item img,
    .nav-item .nav-icon,
    .nav-item .nav-chevron { width: 16px; height: 16px; flex: 0 0 16px; }
    .nav-item:focus-visible,
    .utility-platform:focus-visible,
    .utility-language:focus-visible,
    .utility-avatar:focus-visible {
      outline: 2px solid rgba(0, 82, 217, .34);
      outline-offset: 2px;
    }
    .nav-item:hover:not([aria-current="page"]):not([aria-expanded="true"]) { background: #f2f4f8; }
    html[data-page="home"] .nav-item--developer { min-width: 132px; }
    html[data-page="home"] .primary-nav > .nav-item:nth-child(1) { width: 76px; }
    html[data-page="home"] .primary-nav > .nav-item:nth-child(2),
    html[data-page="home"] .primary-nav > .nav-item:nth-child(3) { width: 104px; }
    html[data-page="home"] .primary-nav > .nav-item:nth-child(4) { width: 76px; }
    html[data-page="home"] .primary-nav > .nav-item:nth-child(1),
    html[data-page="home"] .primary-nav > .nav-item:nth-child(2),
    html[data-page="home"] .primary-nav > .nav-item:nth-child(3),
    html[data-page="home"] .primary-nav > .nav-item:nth-child(4) { justify-content: center; }
    
    html[data-page="home"] .primary-nav > .nav-item:nth-child(4) > span { width: 28px; }
    html[data-page="home"] .nav-item--developer > .nav-chevron { margin-left: 4px; }
    .nav-chevron { transition: transform 160ms ease; }
    .nav-item[aria-expanded="true"] .nav-chevron,
    .utility-platform[aria-expanded="true"] .nav-chevron { transform: rotate(180deg); }
    .nav-item .skill-dot {
      position: absolute;
      top: 3px;
      right: 6px;
      width: 6px;
      height: 6px;
      border: 0;
      border-radius: 50%;
      background: transparent;
    }
    .utility-nav {
      position: absolute;
      top: 9px;
      right: var(--home-header-x);
      display: flex;
      height: 32px;
      align-items: center;
      gap: var(--home-header-gap);
    }
    .utility-platform {
      appearance: none;
      border: 0;
      display: inline-flex;
      width: 132px;
      height: 32px;
      flex: 0 0 132px;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 5px 12px;
      border-radius: var(--radius-control);
      background: var(--page);
      color: var(--text);
      font: inherit;
      cursor: pointer;
      white-space: nowrap;
    }
    .utility-platform img,
    .utility-platform .nav-icon,
    .utility-platform .nav-chevron { width: 16px; height: 16px; flex: 0 0 16px; }
    .utility-platform img:last-child,
    .utility-platform .nav-chevron { margin-left: 4px; }
    .utility-language {
      appearance: none;
      display: grid;
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: var(--radius-control);
      background: transparent;
      cursor: pointer;
    }
    .utility-language > img {
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
    }
    
    .utility-divider { position: relative; width: 0; height: 24px; flex: 0 0 0; background: transparent; }
    .utility-divider::before { position: absolute; top: 0; left: 0; width: 1px; height: 24px; background: var(--stroke); content: ""; transform: translateX(-.5px); }
    .utility-avatar {
      appearance: none;
      display: grid;
      width: 32px;
      height: 32px;
      flex: 0 0 32px;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: var(--brand-light);
      cursor: pointer;
    }
    .utility-avatar img { width: 20px; height: 20px; }

    
    .header-dropdown {
      position: absolute;
      z-index: 30;
      top: 53px;
      left: 0;
      border: .5px solid var(--menu-border);
      border-radius: var(--radius-panel);
      background: var(--container);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .header-dropdown[hidden] { display: none; }
    .header-dropdown--developer {
      display: flex;
      flex-direction: column;
      width: 132px;
      height: 70px;
      padding: 6px;
      gap: 2px;
      border: .5px solid var(--menu-border);
      box-shadow: 0 1px 4px rgba(0, 0, 0, .05);
    }
    .header-dropdown--platform {
      width: 158px;
      height: 120px;
      padding: 6px;
    }
    html[data-page="home"][data-locale="en-US"] .header-dropdown--platform {
      width: 224px;
    }
    html[data-page="home"][data-locale="en-US"] .platform-menu-title,
    html[data-page="home"][data-locale="en-US"] .platform-menu-meta {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .header-dropdown--profile {
      width: 320px;
      height: 148px;
      padding: 11px 19px 4px;
    }
    .menu-row {
      display: flex;
      width: 100%;
      height: 28px;
      align-items: center;
      padding: 3px 8px;
      border: 0;
      border-radius: var(--radius-control);
      color: var(--text-secondary);
      background: transparent;
      font: inherit;
      font-size: 14px;
      line-height: 22px;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
    }
    .menu-row:hover,
    .menu-row:focus-visible { color: var(--text); background: #f2f4f8; outline: 0; }
    .menu-row:focus-visible { box-shadow: inset 0 0 0 2px rgba(0, 82, 217, .20); }
    .platform-menu-item {
      position: relative;
      display: flex;
      width: 100%;
      height: 54px;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 5px 28px 5px 8px;
      border: 0;
      border-radius: var(--radius-control);
      color: var(--text);
      background: transparent;
      font: inherit;
      text-align: left;
      cursor: pointer;
    }
    .platform-menu-item + .platform-menu-item { border-top: .5px solid var(--menu-border); border-radius: 0 0 var(--radius-control) var(--radius-control); }
    .platform-menu-item:hover,
    .platform-menu-item:focus-visible { background: #f2f4f8; outline: 0; }
    .platform-menu-item:focus-visible { box-shadow: inset 0 0 0 2px rgba(0, 82, 217, .20); }
    .platform-menu-title { height: 22px; font-size: 14px; font-weight: 400; line-height: 22px; white-space: nowrap; }
    .platform-menu-meta { height: 20px; color: var(--menu-placeholder); font-size: 12px; line-height: 20px; white-space: nowrap; }
    .platform-menu-item img {
      position: absolute;
      top: 20px;
      right: 8px;
      display: block;
      width: 14px;
      height: 14px;
      object-fit: contain;
      opacity: .3;
      filter: none;
      transition: opacity 140ms ease, filter 140ms ease;
    }
    .platform-menu-item:hover img,
    .platform-menu-item:focus-visible img {
      opacity: 1;
      filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(2628%) hue-rotate(208deg) brightness(86%) contrast(103%);
    }
    .profile-name { height: 22px; color: var(--text); font-size: 14px; font-weight: 600; line-height: 22px; }
    .profile-api-row { display: flex; height: 24px; align-items: center; justify-content: space-between; margin-top: 2px; color: var(--menu-placeholder); font-size: 12px; line-height: 20px; }
    .profile-api-key { overflow: hidden; max-width: 264px; text-overflow: ellipsis; white-space: nowrap; }
    .profile-copy {
      display: grid;
      width: 20px;
      height: 20px;
      flex: 0 0 20px;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: var(--radius-control);
      background: transparent;
      cursor: pointer;
    }
    .profile-copy img { width: 16px; height: 16px; }
    .profile-copy:hover,
    .profile-copy:focus-visible { color: var(--td-brand-color); background: #f3f6fb; outline: 0; }
    .profile-copy img { transition: filter var(--motion-fast) ease; }
    .profile-copy:hover img,
    .profile-copy:focus-visible img { filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(2628%) hue-rotate(208deg) brightness(86%) contrast(103%); }
    .profile-tag { display: inline-flex; height: 24px; align-items: center; margin-top: 8px; padding: 2px 8px; border-radius: var(--radius-control); color: #2ba471; background: #e3f9e9; font-size: 12px; line-height: 20px; }
    .profile-separator { width: 100%; height: 1px; margin-top: 12px; background: var(--menu-border); }
    .profile-logout { display: flex; height: 28px; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 7px; padding: 3px 8px; border: 0; border-radius: var(--radius-control); color: var(--text); background: transparent; font: inherit; font-size: 14px; line-height: 22px; cursor: pointer; }
    .profile-logout img { width: 16px; height: 16px; }
    .profile-logout:hover,
    .profile-logout:focus-visible { color: var(--text); background: #f2f4f8; outline: 0; }
    .profile-logout:focus-visible { box-shadow: inset 0 0 0 2px rgba(0, 82, 217, .20); }
    .profile-copy.is-copied { color: #2ba471; background: #f3f6fb; }
    .profile-copy.is-copied img { opacity: .64; }
    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

    
    .search-focus-panel[hidden] { display: none !important; }
    .search-focus-panel {
      position: absolute;
      z-index: 6;
      display: block;
      overflow: hidden;
      top: calc(var(--topbar-height) + var(--hero-search-top) + var(--hero-search-height) + var(--hero-search-panel-gap));
      left: 50%;
      width: min(var(--hero-search-width), calc(100vw - 96px));
      height: 352px;
      border-radius: var(--radius-panel);
      background: var(--container);
      box-shadow: 0 24px 48px -12px rgba(19, 22, 27, .15);
      transform: translateX(-50%);
    }
    .search-focus-section,
    .search-focus-quick { position: absolute; z-index: 1; }
    .search-focus-section { top: 24px; height: 192px; }
    .search-focus-hot { left: 24px; width: 240px; }
    .search-focus-history { left: 380px; width: 240px; }
    .search-focus-help { left: 657px; right: 24px; }
    .search-focus-heading {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 2;
      isolation: isolate;
      height: 22px;
      margin: 0;
      color: var(--text);
      font-size: 14px;
      font-weight: 600;
      line-height: 22px;
      white-space: nowrap;
    }
    .search-focus-heading-row {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: max-content;
      height: 22px;
      align-items: center;
      gap: 4px;
    }
    .search-focus-heading-row .search-focus-heading {
      position: relative;
      top: auto;
      left: auto;
      flex: 0 0 auto;
      width: max-content;
    }
    .search-focus-hot .search-focus-heading { width: var(--search-focus-heading-underline-hot); }
    .search-focus-heading::before {
      position: absolute;
      top: 14px;
      left: 0;
      z-index: -1;
      width: var(--search-focus-heading-underline-default);
      height: 4px;
      border-radius: var(--radius-panel);
      background: #bbd3fb;
      content: "";
    }
    .search-focus-hot .search-focus-heading::before { width: var(--search-focus-heading-underline-hot); }
    html[data-page="home"][data-locale="en-US"] .search-focus-hot .search-focus-heading {
      width: max-content;
    }
    /* English underlines follow the visible heading, including in the mobile flow. */
    html[data-page="home"][data-locale="en-US"] .search-focus-heading {
      width: max-content;
    }
    html[data-page="home"][data-locale="en-US"] .search-focus-heading::before {
      width: 100%;
    }
    .search-focus-hot-list {
      position: absolute;
      top: 34px;
      left: 0;
      width: 240px;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .search-focus-hot-row {
      position: relative;
      display: flex;
      width: 240px;
      height: 22px;
      align-items: center;
      margin-bottom: 12px;
    }
    .search-focus-rank {
      width: 12px;
      height: 12px;
      flex: 0 0 12px;
      margin-right: 12px;
    }
    .search-focus-value,
    .search-focus-history-row,
    .search-focus-help-row {
      display: inline-flex;
      align-items: center;
      min-width: 0;
      padding: 0;
      border: 0;
      border-radius: var(--radius-control);
      color: var(--text);
      background: transparent;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-align: left;
      white-space: nowrap;
      cursor: pointer;
    }
    .search-focus-value { overflow: hidden; max-width: 170px; text-overflow: ellipsis; }
    .search-focus-value,
    .search-focus-history-row { transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease; }
    .search-focus-value:hover,
    .search-focus-history-row:hover {
      color: var(--brand);
      background: transparent;
    }
    .search-focus-value:hover,
    .search-focus-value:focus-visible,
    .search-focus-history-row:hover,
    .search-focus-history-row:focus-visible { background: transparent; outline: 0; }
    .search-focus-value:focus-visible,
    .search-focus-history-row:focus-visible,
    .search-focus-help-row:focus-visible,
    .search-focus-clear:focus-visible,
    .search-focus-refresh:focus-visible { box-shadow: inset 0 0 0 2px rgba(0, 82, 217, .20); }
    .search-focus-risk {
      position: absolute;
      top: 1px;
      right: 0;
      display: inline-flex;
      height: 20px;
      align-items: center;
      padding: 0 4px;
      border-radius: var(--radius-control);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
    }
    .search-focus-risk--severe { color: rgba(255, 255, 255, .9); background: var(--danger); }
    .search-focus-risk--high { color: var(--danger); background: var(--danger-light); }
    .search-focus-risk--medium { color: var(--warning); background: var(--warning-light); }
    .search-focus-risk--unknown { color: var(--text); background: var(--page); }
    .search-focus-clear,
    .search-focus-refresh {
      position: relative;
      top: auto;
      left: auto;
      display: grid;
      place-items: center;
      flex: 0 0 16px;
      width: 16px;
      height: 16px;
      padding: 0;
      border: 0;
      border-radius: var(--radius-control);
      background: transparent;
      cursor: pointer;
    }
    .search-focus-clear img { width: 16px; height: 16px; }
    .search-focus-clear:hover,
    .search-focus-refresh:hover { background: transparent; }
    .search-focus-history-list {
      position: absolute;
      top: 34px;
      left: 0;
      width: 240px;
    }
    .search-focus-history-row {
      display: flex;
      width: 240px;
      height: 22px;
      align-items: center;
      margin-bottom: 12px;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .search-focus-history-empty {
      position: absolute;
      top: 64px;
      left: 0;
      height: 20px;
      margin: 0;
      color: var(--text-placeholder);
      font-size: 12px;
      line-height: 20px;
      white-space: nowrap;
    }
    .search-focus-help-list {
      position: absolute;
      top: 34px;
      left: 0;
      width: 100%;
    }
    .search-focus-help-row {
      display: flex;
      width: 78px;
      height: 22px;
      align-items: center;
      justify-content: flex-start;
      min-width: 0;
      flex-wrap: nowrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .search-focus-help-row > span {
      display: block;
      flex: 1 1 auto;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    html[data-page="home"][data-locale="en-US"] .search-focus-help-row {
      width: max-content;
      max-width: 100%;
    }
    .search-focus-help-row { transition: color 140ms ease; }
    .search-focus-help-row:hover,
    .search-focus-help-row:focus-visible {
      color: var(--brand);
      background: transparent;
      outline: 0;
    }
    .search-focus-help-row img {
      display: block;
      width: 14px;
      height: 14px;
      flex: 0 0 14px;
      margin: 0;
      opacity: .3;
      filter: none;
      transition: none;
    }
    .search-focus-help-row:hover img,
    .search-focus-help-row:focus-visible img {
      opacity: 1;
      filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(2628%) hue-rotate(208deg) brightness(86%) contrast(103%);
    }
    .search-focus-quick {
      top: 240px;
      left: 24px;
      right: 24px;
      height: 80px;
    }
    .search-focus-quick-title { top: 0; }
    .search-focus-refresh img { width: 16px; height: 16px; }
    .search-focus-clear,
    .search-focus-refresh { transition: none; }
    .search-focus-clear img,
    .search-focus-refresh img {
      transform: scale(1);
      transform-origin: center;
      transition: transform 140ms cubic-bezier(.2, .8, .2, 1);
    }
    .search-focus-clear:hover img,
    .search-focus-refresh:hover img { transform: scale(1.08); }
    .search-focus-refresh.is-refreshing img { animation: search-focus-refresh-spin 320ms ease-out; }
    .search-focus-quick-grid {
      position: absolute;
      top: 34px;
      left: 0;
      display: grid;
      width: 100%;
      height: 48px;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 12px;
    }
    .search-focus-quick-card {
      position: relative;
      display: block;
      width: 100%;
      height: 48px;
      padding: 0;
      border: 0;
      border-radius: 0;
      color: var(--text);
      background: transparent;
      font: inherit;
      text-align: left;
      cursor: pointer;
      overflow: visible;
    }
    .quick-card-surface {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      padding: 4px 8px 4px 43px;
      border: 1px solid transparent;
      border-radius: var(--radius-panel);
      background:
        linear-gradient(var(--container), var(--container)) padding-box,
        linear-gradient(var(--stroke), var(--stroke)) border-box;
      box-shadow: none;
      transform: none;
      transition: color 160ms ease, background-color 160ms ease;
    }
    .quick-card-surface > img {
      position: absolute;
      top: 14px;
      left: 11px;
      width: 20px;
      height: 20px;
    }
    .quick-card-surface > span { display: block; min-width: 0; overflow: hidden; }
    .quick-card-surface strong,
    .quick-card-surface em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .quick-card-surface strong { height: 20px; font-size: 12px; font-weight: 600; line-height: 20px; }
    .quick-card-surface em { height: 20px; color: var(--text-secondary); font-size: 12px; font-style: normal; font-weight: 400; line-height: 20px; }
    .search-focus-quick-card:hover .quick-card-surface,
    .search-focus-quick-card:focus-visible .quick-card-surface {
      background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(
          110deg,
          #8eb7ff 0%,
          #4f86ff 18%,
          #65d9f3 38%,
          #8f9cff 58%,
          #5d8fff 78%,
          #8eb7ff 100%
        ) border-box;
      background-size: 100% 100%, 240% 240%;
      box-shadow: none;
      transform: none;
      animation: quick-card-border-flow 3.2s linear infinite;
    }
    .search-focus-quick-card:hover strong,
    .search-focus-quick-card:focus-visible strong { color: var(--brand); }
    .search-focus-quick-card:focus-visible {
      background: transparent;
      outline: 2px solid rgba(0, 82, 217, .28);
      outline-offset: 2px;
    }
    .quick-card-surface > img { transition: none; }
    .search-focus-quick-card:hover .quick-card-surface > img,
    .search-focus-quick-card:focus-visible .quick-card-surface > img {
      filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(2628%) hue-rotate(208deg) brightness(86%) contrast(103%);
    }
    @keyframes quick-card-border-flow {
      0% { background-position: 0 0, 0% 50%; }
      100% { background-position: 0 0, 200% 50%; }
    }
    @keyframes search-focus-refresh-spin {
      from { transform: rotate(0deg); }
      to { transform: rotate(180deg); }
    }

    
    .hero {
      position: absolute;
      z-index: 1;
      top: 50px;
      left: 0;
      width: 100%;
      height: 281px;
      overflow: hidden;
      background: #fff;
    }
    .hero-title,
    .hero-subtitle { position: absolute; margin: 0; white-space: nowrap; }
    .hero-title {
      top: var(--hero-title-top);
      left: 50%;
      width: max-content;
      max-width: calc(100% - 48px);
      height: auto;
      color: var(--home-ink, var(--text));
      font-size: 38px;
      font-weight: 600;
      line-height: 52px;
      text-align: center;
      transform: translateX(-50%);
    }
    .hero-subtitle {
      top: var(--hero-subtitle-top);
      left: 50%;
      display: block;
      width: max-content;
      height: 24px;
      color: var(--text-secondary);
      font-size: 16px;
      font-weight: 500;
      line-height: 24px;
      text-align: center;
      transform: translateX(-50%);
    }
    .hero-subtitle-viewport {
      display: inline-block;
      width: max-content;
      height: 24px;
      line-height: 24px;
      text-align: center;
      white-space: nowrap;
    }
    .hero-subtitle-text {
      display: inline;
      white-space: pre;
    }
    .hero-subtitle-caret {
      display: inline-block;
      width: auto;
      margin-left: 4px;
      font-size: 16px;
      font-weight: 500;
      height: 24px;
      line-height: 24px;
      opacity: 1;
      transform: translateY(-1px);
      pointer-events: none;
    }
    .hero-subtitle-caret.is-off {
      opacity: 0;
    }
    .search-shell {
      position: absolute;
      top: var(--hero-search-top);
      left: 50%;
      display: flex;
      width: min(var(--hero-search-width), calc(100vw - 96px));
      height: var(--hero-search-height);
      align-items: center;
      padding: 0 54px 0 20px;
      border: 1px solid rgba(255, 255, 255, .92);
      border-radius: 10px;
      background: rgba(255, 255, 255, .96);
      box-shadow:
        0 14px 38px rgba(84, 132, 186, .12),
        0 2px 8px rgba(75, 116, 160, .06),
        inset 0 1px 0 #fff;
      transform: translateX(-50%);
    }
    .search-input {
      min-width: 0;
      height: 22px;
      flex: 1 1 auto;
      padding: 0;
      border: 0;
      outline: 0;
      color: var(--text);
      background: transparent;
      font: inherit;
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }
    .search-input::placeholder { color: var(--text-placeholder); opacity: 1; }
    .search-input::-webkit-search-cancel-button { appearance: none; -webkit-appearance: none; }
    .search-submit {
      position: absolute;
      top: 2px;
      right: 3px;
      display: grid;
      width: 42px;
      height: 42px;
      place-items: center;
      padding: 0;
      border: 0;
      border-radius: 8px;
      background: var(--brand-hover);
      box-shadow: none;
      cursor: pointer;
      overflow: hidden;
      isolation: isolate;
      transition:
        background-color 200ms ease,
        box-shadow 200ms ease;
    }
    
    .search-submit::after {
      position: absolute;
      z-index: 0;
      top: -24px;
      bottom: -24px;
      left: -52px;
      width: 38px;
      content: "";
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .58), transparent);
      opacity: 0;
      pointer-events: none;
      transform: skewX(-18deg);
      transition:
        left 520ms cubic-bezier(.2, .75, .2, 1),
        opacity 180ms ease;
    }
    .search-submit:hover,
    .search-submit:focus-visible {
      background: var(--brand-hover);
      box-shadow:
        0 10px 22px rgba(0, 82, 217, .18),
        inset 0 1px 0 rgba(255, 255, 255, .18);
    }
    .search-submit:hover::after,
    .search-submit:focus-visible::after {
      left: calc(100% + 8px);
      opacity: .72;
    }
    .search-submit:focus-visible { outline: 2px solid rgba(0, 82, 217, .35); outline-offset: 2px; }
    .search-submit img {
      position: relative;
      z-index: 1;
      width: 24px;
      height: 24px;
      transform: translate(1px, 0);
    }

    .content { position: absolute; z-index: 2; inset: 0; transform: translateY(var(--home-content-offset-y)); }
    .overview-grid {
      position: absolute;
      top: var(--home-overview-top);
      left: var(--home-gutter-x);
      right: var(--home-gutter-x);
      display: grid;
      height: var(--home-overview-stack-height);
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: var(--home-overview-gap);
    }
    .card {
      position: absolute;
      overflow: hidden;
      border: 1px solid var(--border);
      border-radius: var(--radius-card);
      background: var(--container);
    }
    .overview-card {
      position: relative;
      top: auto;
      left: auto;
      width: auto;
      min-width: 0;
      height: 374px;
    }
    .card-header {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 54px;
    }
    .title-with-icon {
      position: absolute;
      top: 15px;
      left: 15px;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      height: 24px;
    }
    .title-icon { width: 24px; height: 24px; flex: 0 0 24px; }
    .card-title {
      margin: 0;
      color: var(--text);
      font-size: 16px;
      font-weight: 600;
      line-height: 24px;
      white-space: nowrap;
    }
    .segmented {
      position: absolute;
      top: 11px;
      right: 15px;
      display: inline-flex;
      height: 32px;
      align-items: center;
      padding: 3px;
      border-radius: var(--radius-panel);
      background: var(--page);
    }
    .hot-card .segmented { width: 194px; }
    .signal-card .segmented { width: 126px; }
    .segment {
      display: inline-flex;
      height: 26px;
      flex: 0 0 auto;
      align-items: center;
      justify-content: center;
      padding: 0 16px;
      border-radius: var(--radius-segment);
      color: var(--text-secondary);
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      white-space: nowrap;
    }
    .segment.is-selected {
      color: var(--text);
      background: #fff;
      box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
      font-weight: 600;
    }

    .hot-body {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .hot-list {
      position: absolute;
      top: 53px;
      left: var(--home-card-inner-x);
      right: var(--home-card-inner-x);
      width: auto;
      height: 270px;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .hot-row {
      position: absolute;
      left: 0;
      width: 100%;
      height: 54px;
    }
    .hot-row:nth-child(1) { top: 0; }
    .hot-row:nth-child(2) { top: 54px; }
    .hot-row:nth-child(3) { top: 108px; }
    .hot-row:nth-child(4) { top: 162px; }
    .hot-row:nth-child(5) { top: 216px; }
    .hot-row:not(:last-child)::after {
      position: absolute;
      top: 48px;
      left: 0;
      width: 100%;
      height: 1px;
      background: var(--border);
      content: "";
    }
    .hot-copy {
      position: absolute;
      top: 0;
      left: 34px;
      right: 40px;
      width: auto;
      height: 42px;
      overflow: hidden;
    }
    .hot-value {
      overflow: hidden;
      height: 22px;
      color: var(--text);
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .hot-meta {
      overflow: hidden;
      height: 20px;
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .rank-badge {
      position: absolute;
      top: 10px;
      left: 0;
      width: 22px;
      height: 22px;
    }
    .rank-base { position: absolute; top: 0; left: 1.375px; width: 19.25px; height: 22px; }
    .rank-number { position: absolute; }
    .rank-1 .rank-number { top: 5.42px; left: 8.19px; width: 4.033px; height: 10.443px; }
    .rank-2 .rank-number { top: 4.93px; left: 6.85px; width: 6.351px; height: 10.531px; }
    .rank-3 .rank-number { top: 4.91px; left: 6.68px; width: 6.644px; height: 10.619px; }
    .rank-4 .rank-number { top: 5.18px; left: 6.91px; width: 7.055px; height: 10.443px; }
    .rank-5 .rank-number { top: 4.91px; left: 6.80px; width: 6.409px; height: 10.531px; }
    .risk-tag {
      position: absolute;
      top: 9px;
      right: 0;
      display: inline-flex;
      height: 24px;
      align-items: center;
      padding: 0 8px;
      border-radius: var(--radius-control);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
    }
    .risk-tag.severe { color: rgba(255, 255, 255, .9); background: var(--danger); }
    .risk-tag.high { color: var(--danger); background: var(--danger-light); }
    .risk-tag.medium { color: var(--warning); background: var(--warning-light); }
    .risk-tag.unknown { color: var(--text); background: var(--page); }

    .card-footer {
      position: absolute;
      top: 325px;
      left: 0;
      width: 100%;
      height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 15px;
    }
    .footer-rule {
      position: absolute;
      top: 0;
      left: -1px;
      height: 1px;
    }
    .hot-card .footer-rule { width: calc(100% + 2px); }
    .signal-card .footer-rule { width: calc(100% + 2px); }
    .weekly-card .footer-rule { width: calc(100% + 2px); }
    .footer-link {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      color: var(--brand);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
    }
    .hot-card .footer-link { color: var(--text-secondary); }
    .footer-link img {
      width: 14px;
      height: 14px;
      filter: none;
      transform: none;
      transition: none;
    }
    .footer-link[data-action="copy-hot"]:hover { color: var(--brand); }
    .footer-link[data-action="copy-hot"]:hover img {
      filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(2628%) hue-rotate(208deg) brightness(86%) contrast(103%);
    }
    .pager {
      display: inline-flex;
      height: 24px;
      align-items: center;
      gap: 2px;
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
    }
    .pager img { width: 14px; height: 14px; }
    .pager-control { display: grid; width: 24px; height: 24px; place-items: center; }
    .pager-label { min-width: 24px; text-align: center; }

    .signal-body {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .signal-summary {
      position: absolute;
      top: 57px;
      left: var(--home-card-inner-x);
      right: var(--home-card-inner-x);
      width: auto;
      height: 66px;
      overflow: hidden;
      border-radius: var(--radius-control);
    }
    .summary-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      max-width: none;
      object-fit: fill;
    }
    .summary-date {
      position: absolute;
      top: 8px;
      left: 12px;
      color: var(--brand);
    }
    .summary-label {
      height: 18px;
      color: var(--brand-hover);
      font-size: 10px;
      font-weight: 600;
      line-height: 18px;
    }
    .summary-value {
      position: absolute;
      top: 22px;
      left: 0;
      height: 28px;
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
      white-space: nowrap;
    }
    .summary-divider {
      position: absolute;
      top: 16px;
      left: 81px;
      width: 1px;
      height: 34px;
      background: var(--border);
    }
    .summary-copy {
      position: absolute;
      top: 13px;
      left: 93px;
      right: 12px;
      width: auto;
      height: 40px;
      overflow: hidden;
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
    .signal-heading {
      position: absolute;
      top: 135px;
      left: var(--home-card-inner-x);
      right: var(--home-card-inner-x);
      width: auto;
      height: 20px;
      margin: 0;
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
    }
    .signal-list {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 300px;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .signal-item {
      position: absolute;
      left: 0;
      right: calc(var(--home-card-inner-x) * 2);
      width: auto;
      height: 42px;
    }
    .signal-item:nth-child(1) { top: 169px; }
    .signal-item:nth-child(2) { top: 219px; }
    .signal-item:nth-child(3) { top: 269px; }
    .signal-time,
    .signal-title,
    .signal-meta {
      position: absolute;
      overflow: hidden;
      height: 20px;
      font-size: 12px;
      line-height: 20px;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .signal-time { top: 0; left: 26px; color: var(--text-secondary); font-weight: 600; }
    .signal-item:nth-child(3) .signal-time { left: 23px; }
    .signal-title { top: 0; left: 82px; right: 0; width: auto; color: var(--text); font-weight: 600; }
    .signal-meta { top: 22px; left: 82px; right: 0; width: auto; color: var(--text-secondary); font-weight: 400; }
    .signal-timeline {
      position: absolute;
      top: 165px;
      left: 62px;
      width: 10px;
      height: 150px;
    }

    /* R1.4: English weekly labels are weekday names, not short HH:mm values.
       Match the actual locale (`en-US`) and reserve three non-overlapping zones:
       weekday | timeline | content. Keep weekday names intact; only content truncates. */
    html[data-locale="en-US"] .signal-card.is-weekly .signal-time {
      left: var(--home-card-inner-x);
      width: 76px;
      text-align: right;
      overflow: visible;
      text-overflow: clip;
    }
    html[data-locale="en-US"] .signal-card.is-weekly .signal-timeline {
      left: 108px;
    }
    html[data-locale="en-US"] .signal-card.is-weekly .signal-title,
    html[data-locale="en-US"] .signal-card.is-weekly .signal-meta {
      left: 128px;
    }

    /* R1.5: Chinese weekly weekday labels share one right edge before the
       timeline. This replaces the old per-row left-offset visual correction. */
    html[data-locale="zh-CN"] .signal-card.is-weekly .signal-time {
      left: var(--home-card-inner-x);
      width: 30px;
      text-align: right;
    }

    .weekly-body {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .latest-issue {
      position: absolute;
      top: 57px;
      left: var(--home-card-inner-x);
      width: calc(50% - 31px);
      height: 254px;
      overflow: hidden;
      border-radius: var(--radius-control);
    }
    .weekly-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .eyebrow,
    .issue-number,
    .issue-date,
    .issue-summary,
    .focus-title,
    .focus-tags {
      position: absolute;
      left: 12px;
      margin: 0;
    }
    .eyebrow {
      top: 8px;
      color: var(--brand-hover);
      font-size: 10px;
      font-weight: 600;
      line-height: 18px;
    }
    .issue-number {
      top: 30px;
      color: var(--brand);
      font-size: 20px;
      font-weight: 600;
      line-height: 28px;
    }
    .issue-date {
      top: 58px;
      color: var(--text-placeholder);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
    }
    .issue-summary {
      top: 86px;
      right: 12px;
      width: auto;
      color: var(--text);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
    .focus-title {
      top: 186px;
      color: var(--text);
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
    }
    .focus-tags {
      top: 214px;
      left: 12px;
      display: flex;
      gap: 4px;
      height: 20px;
    }
    .focus-tag {
      display: inline-flex;
      height: 20px;
      align-items: center;
      padding: 0 6px;
      border-radius: var(--radius-pill);
      background: var(--container);
      color: var(--text);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
    }
    .issue-archive {
      position: absolute;
      top: 57px;
      left: calc(50% + 2px);
      right: var(--home-card-inner-x);
      width: auto;
      height: 254px;
    }
    .archive-item {
      position: absolute;
      left: 0;
      width: 100%;
      height: 79px;
      padding: 10px 12px;
      border-radius: var(--radius-control);
      background: #f7f9fa;
    }
    .archive-item:nth-child(1) { top: 0; }
    .archive-item:nth-child(2) { top: 87px; }
    .archive-item:nth-child(3) { top: 174px; }
    .archive-title { height: 20px; color: var(--text); font-size: 12px; font-weight: 600; line-height: 20px; }
    .archive-summary {
      display: -webkit-box;
      overflow: hidden;
      height: 40px;
      margin: 2px 0 0;
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
    }

    .vulnerability-card {
      top: var(--home-vulnerability-top);
      left: var(--home-gutter-x);
      right: var(--home-gutter-x);
      width: auto;
      height: 289px;
    }
    .vulnerability-card .card-header { height: 60px; }
    .vulnerability-card .segmented { top: 15px; width: 210px; }
    .vulnerability-body {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    .vulnerability-list {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 181px;
      padding: 0;
      margin: 0;
      list-style: none;
    }
    .vulnerability-row {
      position: absolute;
      left: 19px;
      right: 19px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) max-content;
      grid-template-rows: 22px 20px;
      column-gap: 16px;
      height: 51px;
      width: auto;
    }
    .vulnerability-row:nth-child(1) { top: 59px; }
    .vulnerability-row:nth-child(2) { top: 120px; }
    .vulnerability-row:nth-child(3) { top: 181px; }
    .vulnerability-main {
      position: static;
      grid-column: 1;
      grid-row: 1 / 3;
      min-width: 0;
    }
    .vulnerability-title,
    .vulnerability-meta {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .vulnerability-title {
      width: 100%;
      height: 22px;
      color: var(--text);
      font-size: 14px;
      font-weight: 400;
      line-height: 22px;
    }
    .vulnerability-meta {
      position: static;
      width: 100%;
      height: 20px;
      margin-top: 3px;
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
    }
    .vulnerability-related-text {
      position: static;
      grid-column: 2;
      grid-row: 2;
      justify-self: end;
      align-self: start;
      width: max-content;
      color: var(--text-secondary);
      font-size: 12px;
      font-weight: 600;
      line-height: 20px;
      white-space: pre;
    }
    .vulnerability-severity {
      position: static;
      grid-column: 2;
      grid-row: 1;
      justify-self: end;
      align-self: start;
      width: max-content;
      display: inline-flex;
      height: 20px;
      align-items: center;
      padding: 0 4px;
      border-radius: var(--radius-control);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
    }
    .vulnerability-severity.high { color: var(--danger); background: var(--danger-light); }
    .vulnerability-severity.medium { color: var(--warning); background: var(--warning-light); }
    .vulnerability-row-rule {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
    }
    .vulnerability-card .card-footer { top: 240px; }
    .vulnerability-card .footer-rule { width: calc(100% + 2px); }
    .page-footer {
      position: absolute;
      z-index: 4;
      top: var(--home-page-footer-top);
      left: 50%;
      display: flex;
      width: 198px;
      height: 44px;
      align-items: center;
      justify-content: center;
      padding: 12px 0;
      color: rgba(0, 0, 0, .42);
      font-size: 12px;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
      transform: translateX(-50%);
    }




html[data-page="home"] {
  --home-ground: #f3f5f7;
  --home-aurora-01: #BFD6FF;
  --home-aurora-02: #B4D6FF;
  --home-aurora-03: #BDE2F6;
  --home-aurora-04: #A2F2FF;
  --home-aurora-05: #C2F1FF;
  --home-aurora-06: #C6E2F7;
  --home-aurora-07: #7DAFFF;
  --home-aurora-08: #BEF4FF;
  --home-aurora-09: #A5CEFF;
  --home-aurora-10: #7DA9FF;
  --home-aurora-11: #CFBBFF;
  --home-aurora-12: #BBB2FF;
  --home-aurora-13: #91AFFF;
  --home-aurora-14: #81B1FF;
  --home-aura-width: 93.333333vw;
  --home-aura-height: 390px;

  --home-aura-anchor-offset: 430.5px;

  --home-aura-blur-0: 165px;
  --home-aura-blur-50: 142px;
  --home-aura-blur-100: 150px;

  --home-aura-y-0: -4px;
  --home-aura-y-50: 8px;
  --home-aura-y-100: 18px;

  --home-aura-flow-duration: 8.1s;
  --home-aura-breathe-duration: 3.78s;
  --home-ink: var(--text);

}

html[data-page="home"] .hero {
  isolation: isolate;
  z-index: 4;
  background: transparent;
}

html[data-page="home"] .page-background {
  position: absolute;
  z-index: 0;
  
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #f8fbff 0,
    #f8fbff 350px,
    #f4f6f8 520px,
    var(--home-ground) 100%
  );
}

html[data-page="home"] .page-background::before {
  position: absolute;

  top: calc(
    var(--topbar-height)
    + var(--hero-search-top)
    - var(--home-aura-anchor-offset)
  );

  left: 50%;

  width: var(--home-aura-width);
  max-width: none;
  height: var(--home-aura-height);

  border-radius: 50%;
  content: "";
  pointer-events: none;

  opacity: .94;
  filter: blur(var(--home-aura-blur-100));

  transform:
    translate3d(-50%, var(--home-aura-y-0), 0)
    scale(.98);

  background-image: linear-gradient(
    180deg,
    var(--home-aurora-01),
    var(--home-aurora-02) 10%,
    var(--home-aurora-03) 18%,
    var(--home-aurora-04),
    var(--home-aurora-05) 38%,
    var(--home-aurora-06) 46%,
    var(--home-aurora-07) 56%,
    var(--home-aurora-08),
    var(--home-aurora-09),
    var(--home-aurora-10),
    var(--home-aurora-11) 88%,
    var(--home-aurora-12) 94%,
    var(--home-aurora-13),
    var(--home-aurora-14)
  );

  background-position: 50% 0%;
  background-size: 100% 380%;

  will-change:
    transform,
    opacity,
    background-position,
    filter;

  animation:
    home-spectrum-flow
      var(--home-aura-flow-duration)
      cubic-bezier(.45, .05, .55, .95)
      infinite
      alternate,
    home-spectrum-breathe
      var(--home-aura-breathe-duration)
      ease-in-out
      infinite
      alternate;
}

@media (min-width: 1920px) {
  html[data-page="home"] {
    --home-aura-width:
      calc(31.666667vw + 1184px);

    --home-aura-height:
      calc(3.385417vw + 325px);

    --home-aura-anchor-offset:
      calc(359.25px + 3.7109375vw);

    --home-aura-blur-0:
      calc(1.432292vw + 137.5px);

    --home-aura-blur-50:
      calc(1.232639vw + 118.333333px);

    --home-aura-blur-100:
      calc(1.302083vw + 125px);

    --home-aura-y-0:
      calc(-3.333333px - 0.034722vw);

    --home-aura-y-50:
      calc(6.666667px + 0.069444vw);

    --home-aura-y-100:
      calc(15px + 0.15625vw);
  }
}

@media (min-width: 2400px) {
  html[data-page="home"] {
    --home-aura-flow-duration: 8.4375s;
    --home-aura-breathe-duration: 3.9375s;
  }
}

@media (min-width: 2880px) {
  html[data-page="home"] {
    --home-aura-flow-duration: 8.775s;
    --home-aura-breathe-duration: 4.095s;
  }
}

@media (min-width: 3360px) {
  html[data-page="home"] {
    --home-aura-flow-duration: 9.1125s;
    --home-aura-breathe-duration: 4.2525s;
  }
}

@media (min-width: 3840px) {
  html[data-page="home"] {
    --home-aura-flow-duration: 9.45s;
    --home-aura-breathe-duration: 4.41s;
  }
}

html[data-page="home"] .hero-title,
html[data-page="home"] .hero-subtitle,
html[data-page="home"] .search-shell {
  z-index: 4;
}


html[data-page="home"] .card-header {
  z-index: 3;
}


html[data-page="home"] .hero-subtitle {
  color: transparent;
}

html[data-page="home"] .hero-subtitle-viewport {
  color: transparent;
}

html[data-page="home"] .hero-subtitle-text,
html[data-page="home"] .hero-subtitle-caret {
  color: transparent;
  background: linear-gradient(90deg, #0b8dff 0%, #216eed 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


html[data-page="home"] .search-shell:hover,
html[data-page="home"] .search-shell:focus-within {
  border-width: 1.5px;
  padding-left: 19.5px;
  padding-right: 53.5px;
  border-color: transparent;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(
      110deg,
      #8eb7ff 0%,
      #4f86ff 18%,
      #65d9f3 38%,
      #8f9cff 58%,
      #5d8fff 78%,
      #8eb7ff 100%
    ) border-box;
  background-size: 100% 100%, 240% 240%;
  animation: quick-card-border-flow 4.8s linear infinite;
  box-shadow:
    0 14px 38px rgba(84, 132, 186, .12),
    0 2px 8px rgba(75, 116, 160, .06),
    inset 0 1px 0 #fff;
}

html[data-page="home"] .search-shell:hover .search-submit,
html[data-page="home"] .search-shell:focus-within .search-submit {
  top: 1.5px;
  right: 2.5px;
}

html[data-page="home"] .search-input::placeholder {
  color: var(--text-placeholder);
}

html[data-page="home"] .search-input:focus {
  outline: 0;
}

@keyframes home-spectrum-flow {
  0% { background-position: 50% 0%; }
  100% { background-position: 50% 100%; }
}

@keyframes home-spectrum-breathe {
  0% {
    opacity: .86;
    filter: blur(var(--home-aura-blur-0));
    transform:
      translate3d(-50%, var(--home-aura-y-0), 0)
      scale(.98);
  }
  50% {
    opacity: 1;
    filter: blur(var(--home-aura-blur-50));
    transform:
      translate3d(-50%, var(--home-aura-y-50), 0)
      scale(1.06);
  }
  100% {
    opacity: .94;
    filter: blur(var(--home-aura-blur-100));
    transform:
      translate3d(-50%, var(--home-aura-y-100), 0)
      scale(1.10);
  }
}


.topbar {
  transition: background-color var(--motion-fast) ease, border-bottom-color var(--motion-fast) ease, box-shadow var(--motion-fast) ease;
}

.topbar.is-glass {
  background: var(--header-glass-bg);
  border-bottom: 1px solid var(--header-glass-border);
  box-shadow: none;
  -webkit-backdrop-filter: blur(24px) saturate(138%);
  backdrop-filter: blur(24px) saturate(138%);
}

.topbar.is-solid,
.topbar.is-scrolled,
.topbar.is-glass:hover,
.topbar.is-glass:focus-within,
.topbar.has-open-overlay {
  background: var(--header-solid-bg);
  border-bottom-color: #e7e7e7;
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

.topbar .nav-item,
.topbar .utility-platform,
.topbar .utility-language {
  color: var(--header-text, rgba(0, 0, 0, .901961));
  background: transparent;
  box-shadow: none;
}

.topbar .nav-item[aria-current="page"] {
  color: #0052d9;
  background: transparent;
}

.topbar .nav-item[aria-current="page"]::after {
  display: none;
}

.topbar .nav-item:hover,
.topbar .utility-platform:hover,
.topbar .utility-language:hover,
.topbar .nav-item[aria-expanded="true"],
.topbar .utility-platform[aria-expanded="true"] {
  color: #0052d9;
  background: rgba(0, 82, 217, .045);
}

.topbar .primary-nav .nav-item:focus-visible {
  color: #0052d9;
}

.topbar.is-solid .nav-item:hover,
.topbar.is-solid .utility-platform:hover,
.topbar.is-solid .utility-language:hover,
.topbar.is-solid .nav-item[aria-expanded="true"],
.topbar.is-solid .utility-platform[aria-expanded="true"] {
  background: var(--header-solid-hover);
}

.topbar .nav-item:focus-visible,
.topbar .utility-platform:focus-visible,
.topbar .utility-language:focus-visible,
.topbar .utility-avatar:focus-visible {
  outline: 2px solid rgba(0, 82, 217, .45);
  outline-offset: -2px;
}

.topbar .primary-nav .nav-item > .nav-icon {
  color: rgba(0, 0, 0, .901961);
  filter: none;
  transition: color var(--motion-fast) ease;
}

.topbar .primary-nav .nav-item > .nav-chevron {
  color: rgba(0, 0, 0, .901961);
  filter: none;
  transition: color var(--motion-fast) ease, transform 160ms ease;
}

.topbar .utility-language > img {
  filter: brightness(0) saturate(100%) invert(17%) sepia(18%) saturate(1078%) hue-rotate(169deg) brightness(90%) contrast(94%);
  transition: filter var(--motion-fast) ease;
}

.topbar .utility-platform > .nav-icon,
.topbar .utility-platform > .nav-chevron {
  color: rgba(0, 0, 0, .901961);
  filter: none;
  transition: color var(--motion-fast) ease, transform 160ms ease;
}

.topbar .primary-nav .nav-item[aria-current="page"] > .nav-icon,
.topbar .primary-nav .nav-item:hover > .nav-icon,
.topbar .primary-nav .nav-item:hover > .nav-chevron,
.topbar .primary-nav .nav-item[aria-expanded="true"] > .nav-icon,
.topbar .primary-nav .nav-item[aria-expanded="true"] > .nav-chevron,
.topbar .primary-nav .nav-item:focus-visible > .nav-icon,
.topbar .primary-nav .nav-item:focus-visible > .nav-chevron {
  color: #0052d9;
}

.topbar .utility-language:hover > img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(2628%) hue-rotate(208deg) brightness(86%) contrast(103%);
}

.topbar .utility-platform:hover > .nav-icon,
.topbar .utility-platform:hover > .nav-chevron,
.topbar .utility-platform[aria-expanded="true"] > .nav-icon,
.topbar .utility-platform[aria-expanded="true"] > .nav-chevron,
.topbar .utility-platform:focus-visible > .nav-icon,
.topbar .utility-platform:focus-visible > .nav-chevron {
  color: #0052d9;
}

.topbar .utility-platform[aria-expanded="true"] > .nav-icon,
.topbar .utility-platform[aria-expanded="true"] > .nav-chevron {
  color: #0052d9;
}

/* Inline SVG paths use currentColor, so every primary-nav and utility-platform icon follows the text exactly. */
.topbar .primary-nav .nav-icon path,
.topbar .primary-nav .nav-chevron path,
.topbar .utility-platform .nav-icon path,
.topbar .utility-platform .nav-chevron path {
  color: inherit;
}

.topbar .nav-item > .skill-dot {
  filter: none;
  opacity: 1;
}


html[data-page="home"] .utility-language > img,
html[data-page="home"] .utility-language:hover > img,
html[data-page="home"] .utility-language:focus-visible > img {
  filter: none;
}

.topbar .utility-avatar {
  border: 0;
  background: var(--brand-light);
  transition: box-shadow var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.topbar .utility-avatar:hover,
.topbar .utility-avatar[aria-expanded="true"] {
  background: var(--brand-light);
  box-shadow: 0 0 0 3px rgba(0, 82, 217, .08);
}

.topbar .utility-divider::before {
  background: var(--header-divider-glass);
  transition: background-color var(--motion-fast) ease;
}

.topbar.is-solid .utility-divider::before,
.topbar.is-scrolled .utility-divider::before,
.topbar.has-open-overlay .utility-divider::before,
.topbar.is-glass:hover .utility-divider::before,
.topbar.is-glass:focus-within .utility-divider::before {
  background: var(--header-divider-solid);
}

.profile-copy:hover,
.profile-copy:focus-visible {
  color: var(--td-brand-color);
  background: #f3f6fb;
  outline: 0;
}

.profile-copy:hover img,
.profile-copy:focus-visible img {
  filter: brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(2628%) hue-rotate(208deg) brightness(86%) contrast(103%);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar.is-glass {
    background: var(--container);
  }
}

@media (prefers-reduced-motion: reduce) {
  .topbar,
  .topbar .nav-item > .nav-icon,
  .topbar .nav-item > .nav-chevron,
  .topbar .utility-platform > .nav-icon,
  .topbar .utility-platform > .nav-chevron,
  .topbar .utility-language > img,
  .topbar .utility-avatar,
  .topbar .utility-divider::before,
  .quick-card-surface {
    transition: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page="home"] .page-background::before {
    animation: none;
    background-position: 50% 52%;
    opacity: .94;
    filter: blur(var(--home-aura-blur-100));
    transform:
      translate3d(-50%, var(--home-aura-y-50), 0)
      scale(1.06);
  }
}

html[data-page="home"] .segment {
  min-width: 0;
  flex: 1 1 0;
  padding: 0 8px;
  cursor: pointer;
  transform: none;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

html[data-page="home"] .segment:not(.is-selected):hover {
  color: var(--brand);
  background: rgba(0, 82, 217, .04);
}

html[data-page="home"] .footer-link {
  cursor: pointer;
  transition: color 140ms ease;
}

html[data-page="home"] .footer-link:hover {
  color: var(--brand-hover);
}

html[data-page="home"] .footer-link[data-action="copy-hot"]:hover {
  color: var(--brand);
}

html[data-page="home"] .pager-control {
  border-radius: var(--radius-control);
  cursor: pointer;
  transform: none;
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

html[data-page="home"] .pager-control:not(:disabled):hover {
  background: rgba(0, 82, 217, .06);
}

html[data-page="home"] .pager-control:disabled {
  opacity: .32;
  cursor: default;
}

html[data-page="home"] .hot-row,
html[data-page="home"] .signal-item,
html[data-page="home"] .archive-item,
html[data-page="home"] .vulnerability-row {
  cursor: pointer;
}

html[data-page="home"] .hot-row:hover .hot-value,
html[data-page="home"] .signal-item:hover .signal-title,
html[data-page="home"] .archive-item:hover .archive-title,
html[data-page="home"] .vulnerability-row:hover .vulnerability-title {
  color: var(--brand);
}

html[data-page="home"] .archive-item {
  transition: background-color 140ms ease;
}

html[data-page="home"] .archive-item:hover {
  background: #f4f8ff;
}

html[data-page="home"] .is-updating {
  opacity: .55;
}

html[data-page="home"] .is-ready {
  animation: home-data-fade-in 120ms ease-out;
}

@keyframes home-data-fade-in {
  from { opacity: .78; }
  to { opacity: 1; }
}

html[data-page="home"] .home-message {
  position: fixed;
  z-index: 80;
  top: calc(var(--topbar-height) + 16px);
  left: 50%;
  display: inline-flex;
  width: fit-content;
  min-height: 38px;
  max-width: min(560px, calc(100vw - 32px));
  align-items: center;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--radius-panel);
  color: var(--text);
  background: #fff;
  box-shadow:
    0 6px 28px 4px rgba(19, 44, 76, .08),
    0 14px 22px 1px rgba(19, 44, 76, .055),
    0 7px 10px -4px rgba(19, 44, 76, .10),
    inset 0 .5px 0 rgba(220, 220, 220, .92),
    inset 0 -.5px 0 rgba(220, 220, 220, .64);
  font-size: 14px;
  line-height: 22px;
  text-align: left;
  pointer-events: none;
  transform: translate(-50%, -32px);
}

html[data-page="home"] .home-message[hidden] {
  display: none;
}

html[data-page="home"] .home-message--success::before,
html[data-page="home"] .home-message--error::before,
html[data-page="home"] .home-message--info::before {
  display: inline-flex;
  flex: 0 0 20px;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  margin-right: 8px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
}

html[data-page="home"] .home-message--success::before {
  color: #0a8f55;
  background: #e7f8ef;
  content: "✓";
}

html[data-page="home"] .home-message--error::before {
  color: var(--danger);
  background: var(--danger-light);
  content: "!";
}

html[data-page="home"] .home-message--info::before {
  color: var(--brand);
  background: var(--brand-light);
  content: "i";
}

@media (max-width: 700px) {
  html[data-page="home"] .home-message {
    top: calc(var(--topbar-height) + 12px);
    max-width: calc(100vw - 24px);
    padding: 8px 12px;
    font-size: 13px;
    line-height: 20px;
  }

  html[data-page="home"] .home-message--success::before,
  html[data-page="home"] .home-message--error::before,
  html[data-page="home"] .home-message--info::before {
    flex-basis: 18px;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    font-size: 11px;
    line-height: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page="home"] .is-ready,
  html[data-page="home"] .search-submit,
  html[data-page="home"] .search-submit::after,
  html[data-page="home"] .search-focus-value,
  html[data-page="home"] .search-focus-history-row,
  html[data-page="home"] .search-focus-help-row,
  html[data-page="home"] .search-focus-help-row img,
  html[data-page="home"] .search-focus-quick-card,
  html[data-page="home"] .quick-card-surface,
  html[data-page="home"] .search-focus-clear,
  html[data-page="home"] .search-focus-clear img,
  html[data-page="home"] .search-focus-refresh,
  html[data-page="home"] .search-focus-refresh img,
  html[data-page="home"] .segment,
  html[data-page="home"] .footer-link,
  html[data-page="home"] .footer-link img,
  html[data-page="home"] .pager-control,
  html[data-page="home"] .archive-item {
    animation: none !important;
    transition: none !important;
    transform: none !important;
  }
  html[data-page="home"] .search-submit:hover::after,
  html[data-page="home"] .search-submit:focus-visible::after {
    left: -52px !important;
    opacity: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-page="home"] .hero-subtitle-caret {
    display: none;
    animation: none;
  }
  html[data-page="home"] .search-focus-quick-card:hover .quick-card-surface,
  html[data-page="home"] .search-focus-quick-card:focus-visible .quick-card-surface {
    animation: none;
    background-position: 0 0, 50% 50%;
  }
}


/* V19 — navigation icon state parity ----------------------------------------
   Header icons are local SVG files rendered through <img>, so CSS `color`
   alone cannot recolor them. Keep every primary/utility navigation glyph in
   lock-step with the text for default, hover, focus, open and active states. */
.topbar .primary-nav .nav-item > img.nav-icon,
.topbar .primary-nav .nav-item > img.nav-chevron,
.topbar .utility-platform > img.nav-icon,
.topbar .utility-platform > img.nav-chevron {
  filter:brightness(0) saturate(100%);
  transition:filter var(--motion-fast) ease, transform 160ms ease;
}
.topbar .primary-nav .nav-item[aria-current="page"] > img.nav-icon,
.topbar .primary-nav .nav-item:hover > img.nav-icon,
.topbar .primary-nav .nav-item:hover > img.nav-chevron,
.topbar .primary-nav .nav-item[aria-expanded="true"] > img.nav-icon,
.topbar .primary-nav .nav-item[aria-expanded="true"] > img.nav-chevron,
.topbar .primary-nav .nav-item:focus-visible > img.nav-icon,
.topbar .primary-nav .nav-item:focus-visible > img.nav-chevron,
.topbar .utility-platform:hover > img.nav-icon,
.topbar .utility-platform:hover > img.nav-chevron,
.topbar .utility-platform[aria-expanded="true"] > img.nav-icon,
.topbar .utility-platform[aria-expanded="true"] > img.nav-chevron,
.topbar .utility-platform:focus-visible > img.nav-icon,
.topbar .utility-platform:focus-visible > img.nav-chevron {
  filter:brightness(0) saturate(100%) invert(22%) sepia(89%) saturate(2628%) hue-rotate(208deg) brightness(86%) contrast(103%);
}