:root {
        --bg: #050914;
        --panel: rgba(10, 18, 31, 0.82);
        --panel-strong: rgba(11, 18, 31, 0.94);
        --stroke: rgba(255, 255, 255, 0.1);
        --stroke-strong: rgba(255, 255, 255, 0.18);
        --text: #f5f8ff;
        --muted: #91a0ba;
        --muted-strong: #c5d0e3;
        --lime: #9cff63;
        --sky: #88d7ff;
        --ink: #07100d;
        --shadow: 0 30px 90px rgba(0, 0, 0, 0.45);
        --preview-surface:
          radial-gradient(circle at 50% 0%, rgba(136, 215, 255, 0.12), transparent 52%),
          radial-gradient(circle at 20% 12%, rgba(156, 255, 99, 0.1), transparent 32%),
          linear-gradient(180deg, rgba(10, 18, 31, 0.9), rgba(7, 13, 23, 0.98));
      }

      * {
        box-sizing: border-box;
      }

      #hs-eu-cookie-confirmation {
        position: fixed !important;
        right: clamp(12px, 2.4vw, 24px) !important;
        bottom: clamp(12px, 2.4vw, 24px) !important;
        left: auto !important;
        z-index: 2147483000 !important;
        max-width: min(390px, calc(100vw - 24px)) !important;
        border: 1px solid rgba(255, 255, 255, 0.14) !important;
        border-radius: 20px !important;
        color: var(--text) !important;
        background:
          radial-gradient(circle at 8% 0%, rgba(156, 255, 99, 0.11), transparent 34%),
          radial-gradient(circle at 92% 18%, rgba(136, 215, 255, 0.06), transparent 38%),
          linear-gradient(145deg, rgba(6, 11, 21, 0.66), rgba(12, 20, 34, 0.58)) !important;
        box-shadow:
          0 24px 70px rgba(0, 0, 0, 0.38),
          inset 0 1px 0 rgba(255, 255, 255, 0.22),
          inset 0 -1px 0 rgba(255, 255, 255, 0.06) !important;
        backdrop-filter: blur(24px) saturate(1.38) !important;
        -webkit-backdrop-filter: blur(24px) saturate(1.38) !important;
        font-family: "Inter", sans-serif !important;
      }

      #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner,
      #hs-eu-cookie-confirmation .hs-eu-cookie-confirmation-inner,
      #hs-eu-cookie-confirmation [class*="cookie-confirmation"],
      #hs-eu-cookie-confirmation [class*="cookie-notification"],
      #hs-eu-cookie-confirmation [class*="consent-banner"],
      #hs-eu-cookie-confirmation div,
      #hs-eu-cookie-confirmation section,
      #hs-eu-cookie-confirmation article,
      #hs-eu-cookie-confirmation form {
        border: 0 !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
      }

      #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner,
      #hs-eu-cookie-confirmation .hs-eu-cookie-confirmation-inner {
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 16px 18px !important;
      }

      #hs-eu-cookie-confirmation *,
      #hs-eu-cookie-confirmation #hs-eu-policy-wording,
      #hs-eu-cookie-confirmation #hs-eu-policy-wording *,
      #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer,
      #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer * {
        font-family: "Inter", sans-serif !important;
        font-size: 13px !important;
        letter-spacing: -0.01em !important;
        line-height: 1.42 !important;
        text-align: left !important;
      }

      #hs-eu-cookie-confirmation div,
      #hs-eu-cookie-confirmation p,
      #hs-eu-cookie-confirmation span,
      #hs-eu-cookie-confirmation label,
      #hs-eu-cookie-confirmation li,
      #hs-eu-cookie-confirmation small,
      #hs-eu-cookie-confirmation h1,
      #hs-eu-cookie-confirmation h2,
      #hs-eu-cookie-confirmation h3,
      #hs-eu-cookie-confirmation h4,
      #hs-eu-cookie-confirmation strong,
      #hs-eu-cookie-confirmation #hs-eu-policy-wording,
      #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer {
        color: rgba(245, 248, 255, 0.9) !important;
      }

      #hs-eu-cookie-confirmation p,
      #hs-eu-cookie-confirmation #hs-eu-policy-wording,
      #hs-eu-cookie-confirmation #hs-eu-cookie-disclaimer {
        margin: 0 0 10px !important;
        padding: 0 !important;
      }

      #hs-eu-cookie-confirmation h1,
      #hs-eu-cookie-confirmation h2,
      #hs-eu-cookie-confirmation h3,
      #hs-eu-cookie-confirmation h4,
      #hs-eu-cookie-confirmation strong {
        font-size: 13px !important;
        line-height: 1.25 !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em !important;
      }

      #hs-eu-cookie-confirmation a {
        color: var(--sky) !important;
        text-decoration-color: rgba(136, 215, 255, 0.45) !important;
      }

      #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-buttons-area,
      #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        align-items: center !important;
        justify-content: flex-start !important;
        margin-top: 12px !important;
      }

      #hs-eu-cookie-confirmation button,
      #hs-eu-cookie-confirmation [role="button"],
      #hs-eu-cookie-confirmation input[type="button"],
      #hs-eu-cookie-confirmation input[type="submit"],
      #hs-eu-cookie-confirmation #hs-eu-confirmation-button,
      #hs-eu-cookie-confirmation #hs-eu-decline-button,
      #hs-eu-cookie-confirmation #hs-eu-cookie-settings-button,
      #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group a {
        display: inline-flex !important;
        min-height: 36px !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 8px 13px !important;
        border: 1px solid rgba(255, 255, 255, 0.16) !important;
        border-radius: 999px !important;
        background: rgba(255, 255, 255, 0.08) !important;
        background-color: rgba(255, 255, 255, 0.08) !important;
        color: var(--text) !important;
        text-decoration: none !important;
        font-family: "Inter", sans-serif !important;
        font-size: 12px !important;
        font-weight: 800 !important;
        letter-spacing: 0.02em !important;
        box-shadow: none !important;
      }

      #hs-eu-cookie-confirmation button:hover,
      #hs-eu-cookie-confirmation [role="button"]:hover,
      #hs-eu-cookie-confirmation input[type="button"]:hover,
      #hs-eu-cookie-confirmation input[type="submit"]:hover,
      #hs-eu-cookie-confirmation #hs-eu-confirmation-button:hover,
      #hs-eu-cookie-confirmation #hs-eu-decline-button:hover,
      #hs-eu-cookie-confirmation #hs-eu-cookie-settings-button:hover,
      #hs-eu-cookie-confirmation #hs-eu-confirmation-button-group a:hover {
        transform: translateY(-1px);
        border-color: rgba(156, 255, 99, 0.38) !important;
      }

      #hs-eu-cookie-confirmation #hs-eu-confirmation-button,
      #hs-eu-cookie-confirmation button[id*="confirmation"],
      #hs-eu-cookie-confirmation input[id*="confirmation"] {
        background: linear-gradient(180deg, #caff8a, var(--lime)) !important;
        background-color: var(--lime) !important;
        color: #06110d !important;
        border-color: transparent !important;
      }

      #hs-eu-cookie-confirmation #hs-eu-decline-button,
      #hs-eu-cookie-confirmation #hs-eu-cookie-settings-button {
        color: rgba(245, 248, 255, 0.92) !important;
      }

      html.hfviewer-demo-mode #hs-eu-cookie-confirmation,
      html.hfviewer-demo-mode-2 #hs-eu-cookie-confirmation,
      html.hfviewer-space-cookie-consent-known #hs-eu-cookie-confirmation {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
      }

      @media (max-width: 640px) {
        #hs-eu-cookie-confirmation {
          right: auto !important;
          bottom: 12px !important;
          left: 50% !important;
          width: calc(100vw - 24px) !important;
          min-width: 0 !important;
          max-width: calc(100vw - 24px) !important;
          border-radius: 18px !important;
          transform: translateX(-50%) !important;
        }

        #hs-eu-cookie-confirmation #hs-eu-cookie-confirmation-inner,
        #hs-eu-cookie-confirmation .hs-eu-cookie-confirmation-inner {
          width: 100% !important;
          min-width: 0 !important;
          max-width: 100% !important;
          padding: 15px 16px !important;
        }
      }

      html,
      body {
        margin: 0;
        min-height: 100%;
        background: #050914;
      }

      body {
        position: relative;
        min-height: 100vh;
        min-height: 100dvh;
        color: var(--text);
        font-family: "Inter", sans-serif;
      }

      body::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at 14% 18%, rgba(128, 93, 255, 0.18), transparent 24%),
          radial-gradient(circle at 78% 16%, rgba(156, 255, 99, 0.12), transparent 24%),
          radial-gradient(circle at 72% 78%, rgba(136, 215, 255, 0.14), transparent 25%),
          linear-gradient(180deg, #050914 0%, #07111d 52%, #050914 100%);
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }

      body::after {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
        background-size: 76px 76px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.7), transparent 92%);
      }

      a {
        color: inherit;
        text-decoration: none;
      }

      .page {
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      .landing-nav-wrap {
        width: min(1480px, calc(100% - 52px));
        margin: 0 auto;
      }

      .landing-nav-wrap[hidden] {
        display: none;
      }

      .glow {
        position: absolute;
        border-radius: 999px;
        filter: blur(24px);
        opacity: 0.72;
        pointer-events: none;
      }

      .glow--left {
        top: 160px;
        left: -54px;
        width: 240px;
        height: 240px;
        background: rgba(156, 255, 99, 0.08);
      }

      .glow--right {
        top: 260px;
        right: 5%;
        width: 280px;
        height: 280px;
        background: rgba(136, 215, 255, 0.1);
      }

      .shell {
        width: min(1480px, calc(100% - 52px));
        margin: 0 auto;
        padding: 22px 0 72px;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "hero nav";
        align-items: start;
        column-gap: 36px;
      }

      [data-page][hidden] {
        display: none !important;
      }

      html.hfviewer-direct-viewer-route body.route-landing,
      html.hfviewer-direct-viewer-route .page.route-landing {
        background: var(--bg);
      }

      html.hfviewer-direct-viewer-route body.route-landing [data-page="landing"],
      html.hfviewer-direct-viewer-route body.route-landing .landing-footer[data-page="landing"] {
        display: none !important;
      }

      /* hfnx boot anti-flash (see head script): until the end-of-document
         script adds body.hfnx-active, hide EVERY landing section - the hero
         chrome, gallery rails, community showcase, footer - so nothing paints
         mid-parse (the showcase's white cards used to flash at the top of
         the viewport before the hfnx hero existed) */
      html.hfnx-boot body:not(.hfnx-active) [data-page="landing"],
      html.hfnx-boot body:not(.hfnx-active) .landing-nav-wrap {
        display: none !important;
      }
      /* ...and the landing page container itself: even empty it holds ~94px
         of padding during boot, and its jump to full height at activation
         was the last CLS source on the landing (not on direct viewer routes,
         where the page div hosts the early viewer placeholder) */
      html.hfnx-boot:not(.hfviewer-direct-viewer-route) body:not(.hfnx-active) .page.route-landing {
        display: none !important;
      }

      /* CLS guard: these sections sit below the hfnx grid, but the grid gets
         its height asynchronously (models.json) - if they render before it,
         they first paint high in the viewport and then jump ~2000px down.
         Keep them out of layout until the grid has rendered cards. */
      body.hfnx-active:not(.hfnx-grid-ready) [data-page="landing"]:not(main.hero) {
        display: none !important;
      }
      /* the ambient glows must not move when the landing container swaps
         from the boot shell to the full hfnx layout (their top values equal
         their settled viewport position, so fixed is visually identical) */
      html.hfnx-boot .glow,
      body.hfnx-active [data-page="landing"] .glow {
        position: fixed;
      }

      /* early LCP hero shell: same title and typography as the hfnx hero so
         the largest contentful paint happens at first paint instead of after
         the whole document parses; replaced in place at activation */
      .hfnx-boot-hero {
        display: none;
      }
      /* never on direct model/family routes - the landing (and its hero)
         stays hidden there */
      html.hfviewer-direct-viewer-route .hfnx-boot-hero {
        display: none !important;
      }
      html.hfnx-boot body:not(.hfnx-active) .hfnx-boot-hero {
        display: block;
        /* matches the settled hfnx hero h1 position (y=112) so the swap to
           the real hero does not shift the title */
        padding: 112px 24px 0;
        text-align: center;
      }
      html.hfnx-boot body:not(.hfnx-active) .hfnx-boot-hero h1 {
        margin: 0 auto;
        white-space: nowrap;
        max-width: none;
        width: 100%;
        color: var(--text, #f5f8ff);
        font-size: clamp(1.3rem, 4.2vw, 3.3rem);
        font-weight: 800;
        line-height: 1.04;
        letter-spacing: -0.04em;
      }
      html.hfnx-boot body:not(.hfnx-active) .hfnx-boot-hero h1 em {
        font-style: normal;
        color: var(--lime, #9cff63);
      }

      .landing-footer {
        grid-column: 1 / -1;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 12px 0 0;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.5;
        text-align: center;
      }

      .landing-footer[hidden] {
        display: none;
      }

      .landing-footer a {
        color: var(--muted-strong);
        text-decoration: underline;
        text-decoration-color: rgba(197, 208, 227, 0.36);
        text-underline-offset: 0.2em;
      }

      .landing-footer a:hover,
      .landing-footer a:focus-visible {
        color: var(--text);
        text-decoration-color: rgba(245, 248, 255, 0.6);
      }

      .nav {
        grid-area: nav;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 18px;
        margin-right: -14px;
        padding-top: 6px;
        padding-bottom: 0;
      }

      .nav[hidden] {
        display: none;
      }

      .brand {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        width: max-content;
        max-width: none;
      }

      .brand-stack {
        position: relative;
        display: inline-flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 10px;
      }

      .brand-stack::after {
        content: "";
        position: absolute;
        top: 100%;
        left: -22px;
        right: -22px;
        height: 38px;
        pointer-events: auto;
      }
      /* the bridge is a mouse-travel affordance for the dropdown; on touch
         devices it just swallows taps on whatever wraps beneath the brand
         (Catalog/Embed/Extension on phones) */
      @media (hover: none) {
        .brand-stack::after { display: none; }
      }

      .brand-stack__trigger {
        position: relative;
        z-index: 2;
        width: 100%;
        min-height: 52px;
        align-items: center;
        justify-content: flex-start;
        transition: opacity 180ms ease;
      }

      .brand-stack__menu {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        display: grid;
        gap: 12px;
        width: max-content;
        justify-items: stretch;
        overflow: visible;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
        transition: opacity 220ms ease, transform 220ms ease;
      }

      .brand-stack__menu::before {
        content: "";
        position: absolute;
        left: -22px;
        right: -22px;
        top: -28px;
        height: 34px;
      }

      @media (hover: hover) {
        .brand-stack:hover .brand-stack__menu,
        .brand-stack:focus-within .brand-stack__menu {
          opacity: 1;
          transform: translate(0, 0);
          pointer-events: auto;
        }
      }
      /* touch (landing only): the trigger tap-toggles the menu via is-open */
      .brand-stack.is-open .brand-stack__menu {
        opacity: 1;
        transform: translate(0, 0);
        pointer-events: auto;
      }

      .brand-stack:hover .brand-stack__trigger:not(:hover),
      .brand-stack:focus-within .brand-stack__trigger:not(:focus-visible),
      .brand-stack:has(.brand-stack__item:hover) .brand-stack__trigger,
      .brand-stack:has(.brand-stack__item:focus-visible) .brand-stack__trigger,
      .brand-stack:has(.brand-stack__item.is-nearest) .brand-stack__trigger {
        opacity: 0.62;
      }

      .brand-stack__item {
        width: 100%;
        min-height: 52px;
        align-items: center;
        opacity: 0.72;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .brand-stack__item .brand__sub {
        line-height: 1.08;
      }

      .brand-stack__item:hover,
      .brand-stack__item:focus-visible,
      .brand-stack__item.is-nearest {
        opacity: 1;
        transform: translateY(-1px);
        outline: none;
      }

      .brand__mark {
        width: 44px;
        height: 44px;
        min-width: 44px;
        flex: 0 0 44px;
        aspect-ratio: 1 / 1;
        border-radius: 14px;
        background:
          radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.38), transparent 18%),
          linear-gradient(135deg, rgba(156, 255, 99, 0.95), rgba(136, 215, 255, 0.9));
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26);
      }

      .brand__text {
        display: grid;
        gap: 3px;
        min-width: max-content;
        flex: 0 0 auto;
        overflow: visible;
      }

      .brand__name {
        font-family: "Inter", sans-serif;
        font-size: 1.04rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: lowercase;
      }

      .brand__sub {
        color: var(--muted);
        font-size: 0.76rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .brand__mark--deploy {
        background:
          radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.34), transparent 18%),
          linear-gradient(135deg, rgba(83, 135, 255, 0.94), rgba(120, 227, 142, 0.9));
      }

      .brand__mark--hub {
        background:
          radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.34), transparent 18%),
          linear-gradient(135deg, rgba(255, 173, 74, 0.96), rgba(83, 226, 196, 0.88));
      }

      .brand__mark--models {
        background:
          radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.34), transparent 18%),
          linear-gradient(135deg, rgba(255, 111, 145, 0.94), rgba(255, 209, 92, 0.9));
      }

      .pill {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 11px 16px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--stroke);
        color: var(--muted-strong);
        font-size: 0.88rem;
        line-height: 1.1;
      }

      button.pill {
        font-family: inherit;
        font-size: 0.88rem;
        line-height: 1.1;
        cursor: pointer;
      }

      .pill:disabled {
        cursor: default;
        opacity: 0.74;
      }

      .pill--outline {
        color: var(--text);
        border-color: var(--stroke-strong);
      }

      .pill::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--lime);
      }

      .pill--icon::before {
        content: none;
      }

      .pill__icon {
        display: inline-flex;
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
      }

      .pill__icon svg {
        width: 100%;
        height: 100%;
      }

      .pill__label--mobile,
      .pill__label--mobile-arrow,
      .pill__label--short {
        display: none;
      }

      .pill__customize-link {
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .pill__icon--desktop {
        display: inline-flex;
      }

      .pill--home {
        gap: 10px;
      }

      .pill--home::before,
      .pill--back-home::before,
      .pill--hf-link::before {
        content: none;
      }

      .pill--back-home {
        gap: 9px;
      }

      .pill--back-home .pill__icon {
        color: currentColor;
      }

      .pill--hf-link .pill__icon {
        display: inline-flex;
        color: #ffffff;
      }

      .viewer-bookmark-button {
        --bookmark-accent: #88d7ff;
      }

      .viewer-bookmark-button[hidden],
      .viewer-community-articles__bookmark[hidden] {
        display: none !important;
      }

      .viewer-bookmark-button::before {
        content: none;
      }

      .viewer-bookmark-button__icon {
        display: inline-flex;
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
        color: currentColor;
      }

      .viewer-bookmark-button__icon svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor;
      }

      .viewer-bookmark-button.is-bookmarked {
        border-color: rgba(156, 255, 99, 0.32);
        background:
          radial-gradient(circle at 50% 0%, rgba(156, 255, 99, 0.2), transparent 64%),
          linear-gradient(180deg, rgba(156, 255, 99, 0.15), rgba(136, 215, 255, 0.055)),
          rgba(7, 16, 29, 0.76);
        color: #e7ffd8;
      }

      .viewer-route__actions .pill {
        white-space: nowrap;
      }

      .viewer-route__actions--home-icon .pill--home {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        gap: 0;
      }

      .viewer-route__actions--home-icon .pill--home .pill__label--desktop {
        display: none;
      }

      .viewer-route__actions--hf-icon .pill--hf-link {
        width: 44px;
        height: 44px;
        padding: 0;
        justify-content: center;
        gap: 0;
      }

      .viewer-route__actions--hf-icon .pill--hf-link .pill__label--desktop {
        display: none;
      }

      .viewer-route__actions--embed-short #viewer-model-card-btn .pill__label--full,
      .viewer-route__actions--write-short #viewer-write-article-btn .pill__label--full {
        display: none;
      }

      .viewer-route__actions--embed-short #viewer-model-card-btn .pill__label--short,
      .viewer-route__actions--write-short #viewer-write-article-btn .pill__label--short {
        display: inline;
      }

      .viewer-route__actions--embed-short #viewer-model-card-btn {
        min-width: 0 !important;
      }

      .viewer-route__actions--embed-icon #viewer-model-card-btn {
        width: 44px;
        min-width: 44px !important;
        height: 44px;
        padding: 0;
        justify-content: center;
        gap: 0;
      }

      .viewer-route__actions--embed-icon #viewer-model-card-btn .pill__label--full,
      .viewer-route__actions--embed-icon #viewer-model-card-btn .pill__label--short {
        display: none;
      }

      /* --- Release-watch affordances (pill, popover, notify upsell) ----- */
      .viewer-watch-button[hidden],
      .owner-gallery-watch[hidden] {
        display: none !important;
      }

      .viewer-watch-button__icon {
        display: inline-flex;
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        color: currentColor;
      }

      .viewer-watch-button__icon svg {
        width: 100%;
        height: 100%;
        display: block;
        fill: currentColor;
      }

      .viewer-watch-button .pill__label--full {
        display: inline-block;
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
      }

      .viewer-watch-button .pill__label--short {
        display: none;
      }

      .viewer-watch-button.is-watching,
      .owner-gallery-watch.is-watching {
        border-color: rgba(156, 255, 99, 0.32);
        background:
          radial-gradient(circle at 50% 0%, rgba(156, 255, 99, 0.2), transparent 64%),
          linear-gradient(180deg, rgba(156, 255, 99, 0.15), rgba(136, 215, 255, 0.055)),
          rgba(7, 16, 29, 0.76);
        color: #e7ffd8;
      }

      /* Subtle glass hover for the release-watch pill, matching the other
         top-bar action pills. Kept off the .is-watching active state so the
         green "watching" affordance still reads. */
      .viewer-watch-button:not(.is-watching):hover,
      .viewer-watch-button:not(.is-watching):focus-visible {
        border-color: rgba(255, 255, 255, 0.26);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)),
          rgba(11, 22, 38, 0.85);
        color: #f4f8ff;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.14),
          0 0 0 1px rgba(255, 255, 255, 0.06);
      }

      .viewer-route__actions--watch-short .viewer-watch-button .pill__label--full {
        display: none;
      }

      .viewer-route__actions--watch-short .viewer-watch-button .pill__label--short {
        display: inline;
      }

      .viewer-route__actions--watch-icon .viewer-watch-button {
        width: 44px;
        min-width: 44px !important;
        height: 44px;
        padding: 0;
        justify-content: center;
        gap: 0;
      }

      .viewer-route__actions--watch-icon .viewer-watch-button .pill__label--full,
      .viewer-route__actions--watch-icon .viewer-watch-button .pill__label--short {
        display: none;
      }

      .viewer-route__actions--bookmark-icon .viewer-bookmark-button {
        width: 44px;
        min-width: 44px !important;
        height: 44px;
        padding: 0;
        justify-content: center;
        gap: 0;
      }

      .viewer-route__actions--bookmark-icon .viewer-bookmark-button .pill__label {
        display: none;
      }

      .viewer-route__actions--discuss-icon #viewer-discuss-btn {
        width: 44px;
        min-width: 44px !important;
        height: 44px;
        padding: 0;
        justify-content: center;
        gap: 0;
      }

      .viewer-route__actions--discuss-icon #viewer-discuss-btn .pill__label {
        display: none;
      }

      .viewer-route__actions--install-short #viewer-discuss-btn.is-install .pill__label--full {
        display: none;
      }

      .viewer-route__actions--install-short #viewer-discuss-btn.is-install .pill__label--short {
        display: inline;
      }

      .viewer-route__actions--discuss-icon #viewer-discuss-btn.is-diff {
        width: auto;
        min-width: 44px !important;
        padding: 0 10px;
        gap: 5px;
      }

      .viewer-route__actions--discuss-icon #viewer-discuss-btn.is-diff .pill__label,
      .viewer-route__actions--discuss-icon #viewer-discuss-btn.is-diff .viewer-diff-counts {
        display: inline-flex;
      }

      #viewer-discuss-btn.is-diff {
        gap: 7px;
        border-color: rgba(157, 143, 224, 0.34);
        background: linear-gradient(180deg, rgba(157, 143, 224, 0.12), rgba(157, 143, 224, 0.05));
      }

      #viewer-discuss-btn.is-install {
        gap: 9px;
        border-color: rgba(136, 215, 255, 0.28);
        background:
          linear-gradient(135deg, rgba(156, 255, 99, 0.08), rgba(136, 215, 255, 0.08)),
          rgba(255, 255, 255, 0.035);
        color: #eef8ff;
      }

      #viewer-discuss-btn.is-install:hover,
      #viewer-discuss-btn.is-install:focus-visible {
        border-color: rgba(156, 255, 99, 0.52);
        background:
          linear-gradient(135deg, rgba(156, 255, 99, 0.14), rgba(136, 215, 255, 0.13)),
          rgba(255, 255, 255, 0.045);
      }

      #viewer-discuss-btn.is-install .pill__icon {
        width: 21px;
        height: 21px;
        flex: 0 0 21px;
      }

      #viewer-discuss-btn.is-install .pill__icon img {
        display: block;
        width: 100%;
        height: 100%;
      }

      .viewer-diff-icon {
        display: inline-grid;
        grid-template-rows: 1fr 1fr;
        place-items: center;
        width: 20px;
        height: 19px;
        font-size: 9px;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.035em;
        line-height: .82;
      }

      .viewer-diff-icon__plus,
      .viewer-diff-counts__plus { color: #68d89b; }

      .viewer-diff-icon__minus,
      .viewer-diff-counts__minus { color: #ff7b91; }

      .viewer-diff-counts {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding-left: 7px;
        border-left: 1px solid rgba(255, 255, 255, 0.11);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
        font-weight: 750;
        letter-spacing: -0.015em;
      }

      .viewer-diff-menu {
        position: fixed;
        z-index: 1300;
        width: min(340px, calc(100vw - 24px));
        padding: 7px;
        border: 1px solid rgba(157, 143, 224, 0.28);
        border-radius: 15px;
        background: rgba(8, 15, 27, 0.98);
        box-shadow: 0 22px 65px rgba(0, 0, 0, 0.48), inset 0 1px rgba(255, 255, 255, 0.055);
      }

      .viewer-diff-menu[hidden] { display: none; }

      .viewer-diff-menu__item {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 14px;
        width: 100%;
        padding: 10px 11px;
        border: 0;
        border-radius: 10px;
        background: transparent;
        color: #edf2fb;
        font: inherit;
        text-align: left;
        text-decoration: none;
      }

      .viewer-diff-menu__item:hover,
      .viewer-diff-menu__item:focus-visible {
        outline: none;
        background: rgba(157, 143, 224, 0.12);
        text-decoration: none;
      }

      .viewer-diff-menu__model {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 13px;
        font-weight: 650;
      }

      .viewer-diff-menu .viewer-diff-counts {
        min-width: 62px;
        justify-content: flex-end;
        border-left: 0;
        padding-left: 0;
        font-size: 12px;
      }

      /* Hover / focus affordance for the top-bar action pills (dark theme):
         brighten the border + surface a touch so the row reads as interactive.
         Applies to every pill in the row, Discuss included. */
      .viewer-route__actions .pill {
        transition:
          border-color 140ms ease,
          background-color 140ms ease,
          box-shadow 140ms ease,
          color 140ms ease;
      }

      .viewer-route__actions .pill:hover,
      .viewer-route__actions .pill:focus-visible {
        border-color: rgba(255, 255, 255, 0.26);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05)),
          rgba(11, 22, 38, 0.85);
        color: #f4f8ff;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.14),
          0 0 0 1px rgba(255, 255, 255, 0.06);
      }

      .viewer-route__actions .pill:focus-visible {
        outline: none;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.14),
          0 0 0 2px rgba(9, 15, 25, 0.9),
          0 0 0 4px rgba(255, 255, 255, 0.55);
      }

      /* Mobile: HF / embed / watch / bookmark are all icon-only so the whole
         action row fits on one line on 360px-class devices. */
      @media (max-width: 860px) {
        .viewer-route__actions .viewer-bookmark-button,
        .viewer-route__actions .viewer-watch-button,
        .viewer-route__actions #viewer-discuss-btn,
        .viewer-route__actions #viewer-model-card-btn {
          width: 44px;
          min-width: 44px !important;
          height: 44px;
          padding: 0;
          justify-content: center;
          gap: 0;
        }

        .viewer-route__actions .viewer-bookmark-button .pill__label,
        .viewer-route__actions .viewer-watch-button .pill__label--full,
        .viewer-route__actions .viewer-watch-button .pill__label--short,
        .viewer-route__actions #viewer-discuss-btn .pill__label,
        .viewer-route__actions #viewer-model-card-btn .pill__label--full,
        .viewer-route__actions #viewer-model-card-btn .pill__label--short {
          display: none;
        }

        .viewer-route__actions #viewer-discuss-btn.is-diff {
          width: auto;
          min-width: 44px !important;
          padding: 0 10px;
          gap: 5px;
        }

        .viewer-route__actions #viewer-discuss-btn.is-diff .pill__label,
        .viewer-route__actions #viewer-discuss-btn.is-diff .viewer-diff-counts {
          display: inline-flex;
        }
      }

      .owner-gallery-watch {
        margin: 10px 0 4px;
        /* the head is a grid: the inline axis needs justify-self, or the
           pill stretches to the full column width */
        justify-self: start;
        width: fit-content;
      }

      .hf-watch-popover {
        position: absolute;
        z-index: 1200;
        width: min(360px, calc(100vw - 24px));
        padding: 16px 18px;
        border: 1px solid rgba(156, 255, 99, 0.28);
        border-radius: 16px;
        background:
          linear-gradient(120deg, rgba(156, 255, 99, 0.07), rgba(136, 215, 255, 0.05)),
          rgba(7, 14, 26, 0.97);
        box-shadow:
          0 24px 70px rgba(0, 0, 0, 0.55),
          0 0 0 1px rgba(255, 255, 255, 0.04);
        text-align: left;
      }

      .hf-watch-popover::after {
        content: "";
        position: absolute;
        top: -6.5px;
        left: var(--watch-popover-tip-x, 50%);
        width: 11px;
        height: 11px;
        transform: translateX(-50%) rotate(45deg);
        background: rgb(13, 22, 32);
        border-left: 1px solid rgba(156, 255, 99, 0.28);
        border-top: 1px solid rgba(156, 255, 99, 0.28);
        border-right: 0;
        border-bottom: 0;
        /* only the protruding half: the inner half painted over the box's
           translucent background showed as a dark diamond */
        clip-path: polygon(-2px -2px, calc(100% + 2px) -2px, calc(100% + 2px) 28%, 28% calc(100% + 2px), -2px calc(100% + 2px));
        pointer-events: none;
      }

      .hf-watch-popover__close {
        position: absolute;
        top: 10px;
        right: 12px;
        width: 26px;
        height: 26px;
        border: none;
        border-radius: 8px;
        background: none;
        cursor: pointer;
        color: var(--muted, #91a0ba);
        font-size: 17px;
        line-height: 26px;
        padding: 0;
      }

      .hf-watch-popover__close:hover {
        color: var(--text, #f5f8ff);
        background: rgba(255, 255, 255, 0.06);
      }

      .hf-watch-popover__title {
        margin: 0 0 4px;
        padding-right: 26px;
        font-size: 15px;
        font-weight: 700;
        color: var(--text, #f5f8ff);
      }

      .hf-watch-popover__sub {
        margin: 0 0 12px;
        font-size: 13px;
        color: var(--muted, #91a0ba);
        line-height: 1.5;
      }

      .hf-watch-popover__row {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
      }

      .hf-watch-popover__email {
        flex: 1 1 160px;
        padding: 10px 14px;
        border-radius: 11px;
        background: rgba(255, 255, 255, 0.05);
        border: 1px solid var(--stroke, rgba(255, 255, 255, 0.1));
        color: var(--text, #f5f8ff);
        font: 14px "Inter", sans-serif;
        outline: none;
        min-width: 0;
      }

      .hf-watch-popover__email:focus {
        border-color: rgba(156, 255, 99, 0.45);
      }

      .hf-watch-popover__btn {
        padding: 10px 18px;
        border: 0;
        border-radius: 11px;
        cursor: pointer;
        background: var(--lime, #9cff63);
        color: #07100d;
        font: 700 14px "Inter", sans-serif;
        white-space: nowrap;
      }

      .hf-watch-popover__btn:disabled {
        opacity: 0.55;
        cursor: default;
      }

      .hf-watch-popover__btn--ghost {
        background: rgba(255, 255, 255, 0.07);
        color: var(--text, #f5f8ff);
      }

      .hf-watch-popover__optin {
        display: flex;
        gap: 6px;
        align-items: flex-start;
        margin-top: 11px;
        color: var(--muted, #91a0ba);
        font-size: 12px;
        line-height: 1.5;
        cursor: pointer;
      }

      .hf-watch-popover__optin input {
        margin-top: 2px;
        accent-color: var(--lime, #9cff63);
      }

      .hf-watch-popover__optin a {
        color: var(--muted-strong, #c5d0e3);
        text-decoration: underline;
      }

      .hf-watch-popover__feedback {
        margin: 10px 0 0;
        font-size: 13px;
        color: var(--lime, #9cff63);
      }

      .hf-watch-popover__feedback.is-error {
        color: #ff9d9d;
      }

      .hf-watch-popover__meta {
        margin: 8px 0 0;
        font-size: 12px;
        color: var(--muted, #91a0ba);
        line-height: 1.5;
      }

      .hf-watch-popover__meta a {
        color: var(--muted-strong, #c5d0e3);
        text-decoration: underline;
      }

      .hf-watch-popover__meta button {
        border: 0;
        padding: 0;
        background: none;
        cursor: pointer;
        color: var(--muted-strong, #c5d0e3);
        font: inherit;
        text-decoration: underline;
      }

      .hf-watch-popover__recent {
        margin: 0 0 12px;
        padding: 9px 11px 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 12px;
        background: rgba(255, 255, 255, 0.03);
      }

      .hf-watch-popover__recent-label {
        margin: 0 0 5px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--muted, #91a0ba);
      }

      .hf-watch-popover__recent-item {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 12px;
        padding: 3px 0;
        color: var(--text, #f5f8ff);
        font-size: 13px;
        text-decoration: none;
      }

      .hf-watch-popover__recent-item:hover .hf-watch-popover__recent-name {
        text-decoration: underline;
      }

      .hf-watch-popover__recent-name {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        min-width: 0;
      }

      .hf-watch-popover__recent-when {
        flex: none;
        font-size: 12px;
        color: var(--muted, #91a0ba);
      }

      .hf-watch-popover__recent-all {
        display: inline-block;
        margin-top: 5px;
        font-size: 12px;
        color: var(--muted-strong, #c5d0e3);
        text-decoration: underline;
      }

      .hf-login-popover__btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: 100%;
        padding: 11px 16px;
        border: 0;
        border-radius: 11px;
        cursor: pointer;
        background: #ffffff;
        color: #111827;
        font: 700 14px "Inter", sans-serif;
        transition: transform 0.14s ease, filter 0.14s ease;
      }

      .hf-login-popover__btn:hover:not(:disabled),
      .hf-login-popover__btn:focus-visible:not(:disabled) {
        transform: translateY(-1px);
        filter: brightness(0.97);
        outline: none;
      }

      .hf-login-popover__btn:disabled {
        opacity: 0.6;
        cursor: default;
      }

      .hf-login-popover__btn img {
        width: 22px;
        height: 20px;
        display: block;
      }

      .hf-watch-upsell {
        margin-top: 10px;
        display: flex;
        gap: 10px;
        align-items: center;
        flex-wrap: wrap;
      }

      .hf-watch-upsell__text {
        margin: 0;
        font-size: 13px;
        color: var(--muted-strong, #c5d0e3);
      }

      .hf-watch-upsell__btn {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 16px;
        border-radius: 999px;
        border: 1px solid rgba(156, 255, 99, 0.4);
        background: rgba(156, 255, 99, 0.1);
        color: var(--lime, #9cff63);
        font: 700 13px "Inter", sans-serif;
        cursor: pointer;
        transition: background 0.14s ease, border-color 0.14s ease;
      }

      .hf-watch-upsell__btn:hover:not(:disabled) {
        background: rgba(156, 255, 99, 0.18);
        border-color: rgba(156, 255, 99, 0.6);
      }

      .hf-watch-upsell__btn:disabled {
        opacity: 0.55;
        cursor: default;
      }

      .hf-watch-upsell__icon {
        display: inline-flex;
        width: 14px;
        height: 14px;
      }

      .hf-watch-upsell__icon svg {
        width: 100%;
        height: 100%;
        fill: currentColor;
      }

      .hf-watch-upsell__done {
        color: var(--lime, #9cff63);
        font-size: 13px;
        font-weight: 600;
      }

      .hero {
        grid-area: hero;
        padding-top: 0;
      }

      .hero__content {
        position: relative;
        z-index: 2;
        max-width: min(1180px, 100%);
      }

      .hero__media {
        position: relative;
        z-index: 1;
        display: none;
      }

      .hero-video-card {
        position: relative;
        isolation: isolate;
        height: 100%;
        border-radius: 34px;
        padding: 1px;
        background:
          linear-gradient(135deg, rgba(156, 255, 99, 0.42), rgba(136, 215, 255, 0.28) 42%, rgba(255, 255, 255, 0.08)),
          rgba(255, 255, 255, 0.06);
        box-shadow:
          0 42px 110px rgba(0, 0, 0, 0.46),
          0 0 0 1px rgba(255, 255, 255, 0.07),
          0 0 80px rgba(136, 215, 255, 0.1);
      }

      .hero-video-card::before,
      .hero-video-card::after {
        content: "";
        position: absolute;
        pointer-events: none;
        border-radius: inherit;
      }

      .hero-video-card::before {
        inset: -18px;
        z-index: -1;
        background:
          radial-gradient(circle at 78% 18%, rgba(136, 215, 255, 0.22), transparent 38%),
          radial-gradient(circle at 16% 82%, rgba(156, 255, 99, 0.16), transparent 35%);
        filter: blur(20px);
        opacity: 0.74;
      }

      .hero-video-card::after {
        inset: 1px;
        z-index: 2;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16);
      }

      .hero-video-card__inner {
        position: relative;
        overflow: hidden;
        height: 100%;
        border-radius: 33px;
        background:
          radial-gradient(circle at 50% 0%, rgba(136, 215, 255, 0.14), transparent 50%),
          linear-gradient(180deg, rgba(9, 17, 30, 0.96), rgba(4, 8, 15, 0.98));
      }

      .hero-video-card__video {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

      .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        padding: 9px 14px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--stroke);
        color: var(--muted-strong);
        font-size: 0.79rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .eyebrow::before {
        content: "";
        flex: 0 0 10px;
        width: 10px;
        min-width: 10px;
        height: 10px;
        min-height: 10px;
        aspect-ratio: 1 / 1;
        border-radius: 999px;
        background: var(--lime);
        box-shadow: 0 0 0 8px rgba(156, 255, 99, 0.09);
      }

      .hero h1 {
        margin: 26px 0 18px;
        font-family: "Inter", sans-serif;
        font-size: clamp(4.2rem, 6vw, 6.8rem);
        line-height: 0.93;
        letter-spacing: -0.06em;
        max-width: 10.5ch;
      }

      .hero h1 span {
        color: var(--lime);
      }

      .hero__lede {
        max-width: 56ch;
        margin: 0 0 30px;
        color: var(--muted-strong);
        font-size: 1.14rem;
        line-height: 1.75;
      }

      .cta {
        position: relative;
        z-index: 3;
        padding: 20px;
        border-radius: 30px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
          var(--panel-strong);
        border: 1px solid rgba(156, 255, 99, 0.2);
        box-shadow: var(--shadow);
        overflow: visible;
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      }

      .cta::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(156, 255, 99, 0.12), rgba(136, 215, 255, 0.08), transparent 60%);
      }

      .cta--active {
        z-index: 24;
        border-color: rgba(156, 255, 99, 0.42);
        box-shadow:
          var(--shadow),
          0 0 0 1px rgba(156, 255, 99, 0.18),
          0 0 40px rgba(156, 255, 99, 0.12);
        transform: translateY(-2px);
      }

      .cta__label {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        color: var(--muted-strong);
        font-size: 0.95rem;
        margin-bottom: 14px;
      }

      .cta__hint {
        color: var(--muted);
        font-size: 0.88rem;
      }

      .cta__row {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr auto auto;
        gap: 14px;
      }

      .input-stack {
        display: grid;
        min-width: 0;
        position: relative;
        z-index: 40;
      }

      .input-shell {
        position: relative;
      }

      .input-shell svg {
        position: absolute;
        left: 18px;
        top: 50%;
        width: 24px;
        height: 24px;
        color: #80ccce;
        display: block;
        pointer-events: none;
        transform: translateY(-50%);
      }

      .input-shell input {
        width: 100%;
        height: 82px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        background: rgba(4, 9, 17, 0.88);
        color: var(--text);
        padding: 0 26px 0 58px;
        font-family: "Inter", sans-serif;
        font-size: 1.08rem;
        outline: none;
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.05);
        transition: border-color 160ms ease, border-radius 160ms ease;
      }

      .input-shell input::placeholder {
        color: rgba(197, 208, 227, 0.5);
      }

      .input-shell input[aria-invalid="true"] {
        border-color: rgba(255, 130, 130, 0.72);
        box-shadow:
          inset 0 0 0 1px rgba(255, 130, 130, 0.16),
          0 0 0 1px rgba(255, 130, 130, 0.1);
      }

      .input-feedback {
        position: relative;
        z-index: 3;
        margin: 10px 2px 0;
        padding: 11px 14px;
        border: 1px solid rgba(255, 161, 161, 0.28);
        border-radius: 16px;
        background:
          linear-gradient(180deg, rgba(70, 25, 32, 0.74), rgba(34, 13, 20, 0.72)),
          rgba(18, 8, 12, 0.9);
        color: #ffd5d5;
        font-size: 0.91rem;
        line-height: 1.45;
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.26),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .input-feedback[hidden] {
        display: none;
      }

      .cta__button {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        height: 82px;
        padding: 0 34px;
        border: 0;
        border-radius: 24px;
        background: linear-gradient(135deg, var(--lime), #baff82);
        color: var(--ink);
        font-family: "Inter", sans-serif;
        font-size: 1.06rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        cursor: pointer;
        box-shadow:
          0 18px 42px rgba(156, 255, 99, 0.18),
          inset 0 -1px 0 rgba(0, 0, 0, 0.18);
        transition:
          transform 180ms cubic-bezier(0.2, 0.78, 0.2, 1),
          background 180ms ease,
          color 180ms ease,
          box-shadow 180ms ease;
      }

      .cta__button::before {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        pointer-events: none;
        opacity: 0;
        background:
          radial-gradient(circle at 24% 16%, rgba(255, 255, 255, 0.56), transparent 30%),
          linear-gradient(120deg, rgba(255, 255, 255, 0.2), rgba(156, 255, 99, 0.04) 48%, rgba(136, 215, 255, 0.18));
        transition: opacity 180ms ease;
      }

      .cta__button:hover,
      .cta__button:focus-visible {
        transform: translateY(-3px) scale(1.012);
        background: linear-gradient(135deg, #b2ff73, #d8ff9a);
        color: #05110d;
        box-shadow:
          0 24px 58px rgba(156, 255, 99, 0.28),
          0 0 0 1px rgba(216, 255, 154, 0.16),
          inset 0 -1px 0 rgba(0, 0, 0, 0.18);
      }

      .cta__button:hover::before,
      .cta__button:focus-visible::before {
        opacity: 1;
      }

      .cta__button:focus-visible {
        outline: 2px solid rgba(186, 255, 130, 0.5);
        outline-offset: 4px;
      }

      .cta__button--secondary {
        border: 1px solid rgba(255, 255, 255, 0.12);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
          rgba(8, 15, 28, 0.94);
        color: var(--text);
        box-shadow:
          0 18px 42px rgba(7, 14, 28, 0.22),
          inset 0 -1px 0 rgba(255, 255, 255, 0.04);
      }

      .cta__button--secondary::before {
        background:
          radial-gradient(circle at 24% 18%, rgba(136, 215, 255, 0.24), transparent 32%),
          linear-gradient(120deg, rgba(255, 255, 255, 0.12), rgba(136, 215, 255, 0.1) 50%, rgba(156, 255, 99, 0.11));
      }

      .cta__button--secondary:hover,
      .cta__button--secondary:focus-visible {
        border-color: rgba(136, 215, 255, 0.34);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.09), rgba(136, 215, 255, 0.035)),
          rgba(10, 19, 34, 0.98);
        color: #f8fbff;
        box-shadow:
          0 24px 54px rgba(6, 13, 26, 0.34),
          0 0 0 1px rgba(136, 215, 255, 0.1),
          0 0 34px rgba(136, 215, 255, 0.12),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .cta__button--secondary:disabled {
        cursor: default;
        opacity: 0.62;
        box-shadow: none;
        transform: none;
      }

      .hf-models-launch {
        position: relative;
        z-index: 2;
        display: inline-flex;
        flex-wrap: nowrap;
        align-items: center;
        gap: 12px;
        margin-top: 14px;
        padding: 20px;
        border-radius: 30px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02)),
          var(--panel-strong);
        border: 1px solid rgba(156, 255, 99, 0.2);
        box-shadow: var(--shadow);
      }

      .proof__item.hf-models-launch {
        display: grid;
        align-content: start;
        gap: 10px;
        margin-top: 0;
        padding: 16px 18px;
        border-radius: 20px;
      }

      .hf-models-launch[hidden] {
        display: none !important;
      }

      .hf-models-launch::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(156, 255, 99, 0.12), rgba(136, 215, 255, 0.08), transparent 60%);
      }

      .hf-models-launch__button,
      .hf-models-login__button,
      .hf-models-dashboard__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        min-height: 52px;
        border: 1px solid rgba(255, 210, 86, 0.28);
        border-radius: 18px;
        background:
          linear-gradient(135deg, rgba(255, 214, 91, 0.18), rgba(255, 255, 255, 0.05)),
          rgba(7, 14, 26, 0.88);
        color: #fff4c2;
        font-family: "Inter", sans-serif;
        font-size: 0.98rem;
        font-weight: 760;
        letter-spacing: -0.01em;
        cursor: pointer;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.24);
      }

      .hf-models-launch__button {
        position: relative;
        z-index: 2;
        overflow: hidden;
        isolation: isolate;
        flex: 0 0 auto;
        padding: 0 20px;
        transition:
          transform 180ms cubic-bezier(0.2, 0.78, 0.2, 1),
          border-color 180ms ease,
          background 180ms ease,
          color 180ms ease,
          box-shadow 180ms ease;
      }

      .hf-models-launch__button::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        opacity: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at 22% 18%, rgba(255, 236, 158, 0.34), transparent 31%),
          linear-gradient(118deg, rgba(255, 218, 91, 0.22), rgba(255, 255, 255, 0.08) 42%, rgba(136, 215, 255, 0.14));
        transition: opacity 180ms ease;
      }

      .hf-models-launch__button:hover,
      .hf-models-launch__button:focus-visible {
        transform: translateY(-3px) scale(1.01);
        border-color: rgba(255, 223, 118, 0.56);
        background:
          linear-gradient(135deg, rgba(255, 222, 103, 0.25), rgba(255, 255, 255, 0.075)),
          rgba(9, 17, 31, 0.95);
        color: #fff9da;
        box-shadow:
          0 22px 50px rgba(0, 0, 0, 0.31),
          0 0 0 1px rgba(255, 224, 128, 0.08),
          0 0 34px rgba(255, 204, 75, 0.14);
      }

      .hf-models-launch__button:hover::after,
      .hf-models-launch__button:focus-visible::after {
        opacity: 1;
      }

      .hf-models-launch__button img {
        transition:
          transform 180ms cubic-bezier(0.2, 0.78, 0.2, 1),
          filter 180ms ease;
      }

      .hf-models-launch__button > * {
        position: relative;
        z-index: 1;
      }

      .hf-models-launch__button:hover img,
      .hf-models-launch__button:focus-visible img {
        transform: translateY(-1px) scale(1.04) rotate(-2deg);
        filter: drop-shadow(0 7px 12px rgba(255, 213, 86, 0.22));
      }

      .hf-models-launch__button:focus-visible {
        outline: 2px solid rgba(255, 232, 144, 0.46);
        outline-offset: 3px;
      }

      .proof__item.hf-models-launch .hf-models-launch__button {
        width: 100%;
        min-height: 46px;
        padding: 0 14px;
        border-radius: 16px;
      }

      .hf-models-launch__button img,
      .hf-models-login__button img {
        height: 25px;
        width: auto;
        aspect-ratio: 95 / 88;
        flex: 0 0 auto;
        object-fit: contain;
      }

      .hf-models-launch__hint {
        position: relative;
        z-index: 2;
        color: rgba(197, 208, 227, 0.72);
        flex: 0 1 auto;
        font-size: 0.91rem;
        font-weight: 400;
        min-width: 0;
      }

      .proof__item.hf-models-launch .hf-models-launch__hint {
        font-size: 0.86rem;
        line-height: 1.45;
      }

      .hf-models-launch__hint strong {
        color: rgba(255, 255, 255, 0.96);
      }

      .hf-models-launch__button {
        text-decoration: none;
      }

      .hf-models-page {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        display: grid;
        align-items: start;
        gap: 24px;
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(28px, 5vw, 58px);
      }

      .hf-article-login-page {
        align-content: center;
        align-items: center;
        padding-top: clamp(14px, 2vw, 28px);
        padding-bottom: clamp(14px, 2vw, 28px);
        min-height: calc(100dvh - clamp(22px, 3.4vw, 44px));
      }

      .hf-models-page:not(.hf-article-login-page) {
        align-content: center;
        align-items: center;
        padding: clamp(14px, 2.2vw, 24px) clamp(24px, 4.4vw, 52px);
      }

      .hf-models-page[hidden] {
        display: none;
      }

      .hf-models-page.is-feature-exiting {
        position: fixed;
        inset: 0;
        z-index: 30;
        overflow: hidden;
        pointer-events: none;
        animation: hf-feature-dashboard-exit 780ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
      }

      .hf-models-page.is-feature-transition-ready {
        position: fixed;
        inset: 0;
        z-index: 30;
        overflow: hidden;
        pointer-events: none;
      }

      .page.route-hf-models .shell {
        display: block;
        width: 100%;
        padding: 0;
        grid-template-columns: none;
        grid-template-areas: none;
      }

      .page.route-hf-models {
        overflow: visible;
      }

      .page.route-hf-feature-preview .shell {
        display: block;
        width: 100%;
        padding: 0;
        grid-template-columns: none;
        grid-template-areas: none;
      }

      .page.route-hf-article-login .shell,
      .page.route-hf-article-picker .shell {
        display: block;
        width: 100%;
        padding: clamp(8px, 1vw, 14px) 0 clamp(8px, 1vw, 12px);
        grid-template-columns: none;
        grid-template-areas: none;
      }

      .hf-models-shell {
        box-sizing: border-box;
        display: grid;
        align-content: start;
        align-self: start;
        gap: 26px;
        width: min(1180px, 100%);
        min-width: 0;
        margin: 0 auto;
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-shell {
        width: min(1240px, 100%);
      }

      .hf-models-page:not(.hf-article-login-page)::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(circle at 84% 20%, rgba(59, 202, 223, 0.1), transparent 30%),
          radial-gradient(circle at 8% 0%, rgba(126, 75, 255, 0.18), transparent 34%),
          linear-gradient(135deg, rgba(17, 14, 43, 0.5) 0%, #060c1e 68%, rgba(2, 7, 15, 0.86) 100%);
      }

      .hf-article-login-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(circle at 14% 10%, rgba(125, 78, 255, 0.18), transparent 36%),
          radial-gradient(circle at 84% 30%, rgba(67, 213, 239, 0.13), transparent 34%),
          linear-gradient(180deg, rgba(3, 7, 18, 0.18), rgba(2, 7, 15, 0.82));
      }

      .hf-models-login,
      .hf-models-loading,
      .hf-models-dashboard {
        box-sizing: border-box;
        max-width: 100%;
        min-width: 0;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 30px;
        background:
          radial-gradient(circle at 18% 0%, rgba(255, 214, 91, 0.12), transparent 34%),
          linear-gradient(180deg, rgba(10, 19, 34, 0.88), rgba(4, 9, 17, 0.9));
        box-shadow:
          0 24px 70px rgba(0, 0, 0, 0.32),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .hf-models-login {
        position: relative;
        display: grid;
        align-content: start;
        align-self: start;
        gap: 0;
        justify-self: center;
        padding: clamp(24px, 5vw, 44px);
        width: min(760px, 100%);
        max-width: 760px;
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login {
        zoom: 0.9;
        isolation: isolate;
        overflow: hidden;
        width: min(980px, 100%);
        max-width: 980px;
        min-height: min(570px, calc(100dvh - clamp(28px, 4.4vw, 48px)));
        padding: clamp(10px, 1vw, 14px) clamp(22px, 2.6vw, 32px);
        border-color: rgba(125, 151, 215, 0.36);
        border-radius: clamp(30px, 4vw, 48px);
        background:
          radial-gradient(ellipse at 100% 0%, #060c1e 0 29%, rgba(6, 12, 30, 0.97) 38%, rgba(6, 12, 30, 0) 56%),
          radial-gradient(ellipse at 100% 100%, #040918 0 27%, rgba(4, 9, 24, 0.95) 39%, rgba(4, 9, 24, 0) 58%),
          radial-gradient(circle at 18% 18%, rgba(123, 89, 255, 0.2), transparent 36%),
          radial-gradient(circle at 76% 46%, rgba(68, 210, 239, 0.075), transparent 32%),
          linear-gradient(135deg, rgba(17, 23, 50, 0.94), #070d1e 58%, #070d1e 100%);
        box-shadow:
          0 34px 100px rgba(0, 0, 0, 0.44),
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          inset 0 0 0 1px rgba(255, 255, 255, 0.035);
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login::before {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(148, 116, 255, 0.12), transparent 38%, rgba(6, 12, 30, 0.04)),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 86px),
          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.014) 0 1px, transparent 1px 86px);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.86), rgba(0, 0, 0, 0.48));
      }

      .hf-models-login__layout {
        display: grid;
        grid-template-columns: minmax(0, 0.82fr) minmax(500px, 0.88fr);
        align-items: center;
        gap: clamp(0px, 1.8vw, 28px);
        width: 100%;
      }

      .hf-models-login__copy {
        position: relative;
        z-index: 3;
        display: grid;
        align-content: center;
        gap: clamp(9px, 1.1vw, 15px);
        min-width: 0;
      }

      .hf-models-login__eyebrow-pill {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        width: fit-content;
        max-width: 100%;
        min-height: 44px;
        padding: 0 18px 0 10px;
        border: 1px solid rgba(139, 255, 176, 0.16);
        border-radius: 999px;
        background:
          linear-gradient(90deg, rgba(121, 255, 158, 0.13), rgba(134, 160, 255, 0.055)),
          rgba(14, 22, 44, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 16px 38px rgba(0, 0, 0, 0.26);
        color: rgba(139, 255, 176, 0.92);
        font-size: 0.78rem;
        font-weight: 820;
        letter-spacing: 0.24em;
        text-transform: uppercase;
      }

      .hf-models-login__eyebrow-icon {
        display: inline-grid;
        place-items: center;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        border-radius: 999px;
        background:
          radial-gradient(circle at 35% 28%, rgba(255, 255, 255, 0.34), transparent 32%),
          linear-gradient(135deg, rgba(120, 255, 150, 0.94), rgba(47, 175, 91, 0.88));
        box-shadow:
          0 0 0 6px rgba(120, 255, 150, 0.08),
          0 0 30px rgba(120, 255, 150, 0.32);
      }

      .hf-models-login__eyebrow-icon img {
        width: 20px;
        height: 18px;
        object-fit: contain;
        filter: saturate(0) brightness(0) invert(1);
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login__eyebrow-pill {
        gap: 9px;
        min-height: 36px;
        padding: 0 14px 0 7px;
        font-size: 0.68rem;
        letter-spacing: 0.2em;
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login__eyebrow-icon {
        width: 25px;
        height: 25px;
        box-shadow:
          0 0 0 4px rgba(120, 255, 150, 0.07),
          0 0 22px rgba(120, 255, 150, 0.26);
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login__eyebrow-icon img {
        width: 17px;
        height: 15px;
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login h2 {
        position: relative;
        z-index: 2;
        max-width: none;
        width: max-content;
        padding-right: 0.1em;
        font-size: clamp(2.85rem, 3.6vw, 4.05rem);
        line-height: 1.02;
        letter-spacing: -0.08em;
        white-space: nowrap;
        text-wrap: nowrap;
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login h2 span,
      .hf-article-login-page .hf-models-login h2 span {
        color: #a278ff;
        background: linear-gradient(92deg, #7e5cff 4%, #b978ff 48%, #7b6cff 96%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 18px 44px rgba(111, 78, 255, 0.34);
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login h2 span {
        display: inline-block;
        padding-right: 0.08em;
        padding-bottom: 0.14em;
        margin-bottom: -0.14em;
      }

      .hf-models-login__lead {
        margin: -2px 0 0;
        color: rgba(203, 214, 236, 0.8);
        font-size: clamp(0.95rem, 1.12vw, 1.08rem);
        line-height: 1.45;
      }

      .hf-models-login__allows {
        margin: 0;
        color: rgba(247, 250, 255, 0.94);
        font-size: 0.96rem;
        font-weight: 780;
      }

      .hf-models-login__features {
        display: grid;
        max-width: 510px;
        margin: 0;
        padding: 0;
        list-style: none;
      }

      .hf-models-login__feature {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        align-items: center;
        gap: 14px;
        min-width: 0;
        padding: 7px 0;
        border-bottom: 1px solid rgba(197, 208, 227, 0.11);
        color: rgba(224, 234, 249, 0.9);
        font-size: clamp(0.93rem, 1.08vw, 1.02rem);
        line-height: 1.28;
      }

      .hf-models-login__feature:last-child {
        border-bottom-color: transparent;
      }

      .hf-models-login__feature-icon {
        display: grid;
        place-items: center;
        width: 46px;
        height: 46px;
        border-radius: 12px;
        background: rgba(20, 18, 61, 0.96);
        box-shadow:
          0 12px 22px rgba(0, 0, 0, 0.25),
          inset 0 -14px 26px rgba(5, 6, 24, 0.22);
      }

      .hf-models-login__feature img {
        width: 33px;
        height: 33px;
        border-radius: 0;
        object-fit: contain;
        background: transparent;
        filter: drop-shadow(0 8px 14px rgba(76, 42, 180, 0.22));
      }

      .hf-models-login__feature:first-child img {
        width: 30px;
        height: 30px;
      }

      .hf-models-login__visual {
        position: absolute;
        inset: 0 0 0 auto;
        z-index: 1;
        display: grid;
        align-items: center;
        justify-items: end;
        justify-self: end;
        min-width: 0;
        width: min(58%, 670px);
        min-height: 0;
        margin: 0;
        pointer-events: none;
      }

      .hf-models-login__visual::before {
        content: "";
        position: absolute;
        inset: 8% 0 4%;
        border-radius: 44px;
        background:
          radial-gradient(circle at 75% 40%, rgba(65, 236, 226, 0.18), transparent 34%),
          radial-gradient(circle at 42% 50%, rgba(126, 85, 255, 0.18), transparent 38%);
        filter: blur(28px);
        pointer-events: none;
      }

      .hf-models-login__visual img {
        position: relative;
        width: min(124%, 690px);
        max-width: none;
        height: auto;
        margin-right: 0;
        object-fit: contain;
        transform: translate(clamp(8px, 1.2vw, 18px), clamp(4px, 0.8vw, 12px));
        transform-origin: 100% 0;
        filter: drop-shadow(0 34px 64px rgba(0, 0, 0, 0.36));
        -webkit-mask-image: linear-gradient(
          90deg,
          transparent 0%,
          rgba(0, 0, 0, 0.08) 3%,
          rgba(0, 0, 0, 0.58) 11%,
          #000 23%,
          #000 100%
        );
        mask-image: linear-gradient(
          90deg,
          transparent 0%,
          rgba(0, 0, 0, 0.08) 3%,
          rgba(0, 0, 0, 0.58) 11%,
          #000 23%,
          #000 100%
        );
      }

      .hf-models-loading {
        display: grid;
        align-content: start;
        align-self: start;
        gap: 18px;
        justify-self: center;
        padding: clamp(24px, 5vw, 44px);
        width: min(760px, 100%);
        max-width: 760px;
      }

      .hf-models-login .eyebrow {
        justify-self: start;
        width: max-content;
        max-width: 100%;
      }

      .hf-models-loading .eyebrow {
        justify-self: start;
        width: max-content;
        max-width: 100%;
      }

      .hf-models-login[hidden],
      .hf-models-loading[hidden],
      .hf-models-dashboard[hidden] {
        display: none;
      }

      .hf-models-login h2,
      .hf-models-loading h2,
      .hf-models-dashboard h2 {
        margin: 0;
        color: var(--text);
        font-size: clamp(2rem, 4vw, 3.6rem);
        line-height: 0.94;
        letter-spacing: -0.07em;
      }

      .hf-models-login p,
      .hf-models-loading p,
      .hf-models-dashboard__intro,
      .hf-models-dashboard__notice {
        margin: 0;
        color: rgba(197, 208, 227, 0.76);
        font-size: 1rem;
        line-height: 1.6;
      }

      .hf-models-login__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login__actions {
        align-items: center;
        flex-wrap: nowrap;
      }

      .hf-models-login .hf-models-login__optin,
      .hf-article-login .hf-models-login__optin {
        display: flex; align-items: flex-start; gap: 11px;
        margin: 0; max-width: 460px; cursor: pointer;
        font-size: 14px; line-height: 1.55; color: var(--muted-strong, #c5d0e3);
        text-align: left;
      }
      .hf-models-login__optin input {
        margin: 2px 0 0; width: 18px; height: 18px; flex: none;
        accent-color: #9cff63; cursor: pointer;
      }
      .hf-models-login__optin:hover { color: var(--muted-strong, #c5d0e3); }

      .hf-models-login .hf-models-login__notice {
        max-width: 620px;
        color: rgba(197, 208, 227, 0.52);
        font-size: 0.78rem;
        line-height: 1.45;
      }

      .hf-models-login .hf-models-login__notice a {
        color: #fff4c2;
        text-underline-offset: 0.2em;
      }

      .hf-article-login-page .hf-models-shell {
        align-self: center;
        width: min(1380px, 100%);
      }

      .hf-article-login-page .hf-models-login {
        isolation: isolate;
        overflow: hidden;
        width: min(1380px, 100%);
        max-width: 1380px;
        min-height: min(764px, calc(100dvh - clamp(64px, 8vw, 92px)));
        padding: clamp(28px, 3.9vw, 54px) clamp(30px, 4.2vw, 58px) clamp(14px, 1.7vw, 22px);
        border-color: rgba(124, 151, 218, 0.36);
        border-radius: clamp(30px, 3.8vw, 46px);
        background:
          radial-gradient(ellipse at 100% 0%, #060c1e 0 29%, rgba(6, 12, 30, 0.97) 38%, rgba(6, 12, 30, 0) 56%),
          radial-gradient(circle at 18% 18%, rgba(123, 89, 255, 0.19), transparent 36%),
          radial-gradient(circle at 80% 42%, rgba(67, 215, 241, 0.11), transparent 34%),
          linear-gradient(135deg, rgba(14, 22, 48, 0.94), rgba(3, 9, 21, 0.96) 54%, rgba(2, 10, 18, 0.99));
        box-shadow:
          0 34px 100px rgba(0, 0, 0, 0.44),
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          inset 0 0 0 1px rgba(255, 255, 255, 0.035);
      }

      .hf-article-login-page .hf-models-login::before {
        content: "";
        position: absolute;
        inset: 1px;
        z-index: -1;
        border-radius: inherit;
        pointer-events: none;
        background:
          linear-gradient(90deg, rgba(148, 116, 255, 0.12), transparent 34%, rgba(88, 217, 240, 0.1)),
          repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.026) 0 1px, transparent 1px 86px),
          repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 86px);
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.42));
      }

      .hf-article-login-page .hf-models-login:not(.is-invite) {
        align-content: start;
      }

      .hf-article-login__head {
        position: relative;
        z-index: 3;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 20px;
      }

      .hf-article-login:not(.is-invite) .hf-article-login__head {
        display: none;
      }

      .page.route-hf-article-login .blogs-with-graphs,
      .page.route-hf-article-picker .blogs-with-graphs,
      .page.route-hf-models .blogs-with-graphs,
      .page.route-hf-feature-preview .blogs-with-graphs,
      body.route-hf-feature-preview .blogs-with-graphs {
        display: none !important;
      }

      .hf-article-login__head .eyebrow {
        position: relative;
        display: inline-flex;
        align-items: center;
        gap: 14px;
        flex: 0 0 auto;
        min-height: 47px;
        padding: 0 20px 0 13px;
        border: 1px solid rgba(184, 198, 226, 0.16);
        border-radius: 999px;
        background: rgba(15, 24, 45, 0.72);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.09),
          0 16px 38px rgba(0, 0, 0, 0.28);
        color: rgba(232, 238, 252, 0.9);
        font-size: 0.88rem;
        font-weight: 760;
        letter-spacing: 0.18em;
        text-transform: uppercase;
      }

      .hf-article-login__head .eyebrow::before {
        content: "";
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        border-radius: 999px;
        background:
          radial-gradient(circle at 36% 30%, rgba(255, 255, 255, 0.42), transparent 35%),
          linear-gradient(135deg, rgba(142, 255, 95, 0.95), rgba(45, 171, 76, 0.9));
        box-shadow:
          0 0 0 9px rgba(139, 255, 95, 0.08),
          0 0 26px rgba(139, 255, 95, 0.32);
      }

      .hf-article-login__layout {
        display: grid;
        grid-template-columns: minmax(500px, 0.98fr) minmax(470px, 1.02fr);
        align-items: center;
        gap: clamp(8px, 1.8vw, 28px);
        width: 100%;
      }

      .hf-article-login__copy-column {
        position: relative;
        z-index: 3;
        display: grid;
        align-self: start;
        align-content: center;
        gap: clamp(16px, 1.9vw, 26px);
        min-width: 0;
        max-width: 680px;
      }

      .hf-article-login-page .hf-models-login:not(.is-invite) .hf-article-login__copy-column {
        align-self: start;
      }

      .hf-article-login-page .hf-models-login h2 {
        max-width: 680px;
        font-size: clamp(2.25rem, 3vw, 2.65rem);
        line-height: 0.98;
        letter-spacing: -0.08em;
        text-wrap: balance;
      }

      .hf-article-login.is-invite #hf-article-login-title {
        max-width: 100%;
        color: rgba(166, 178, 197, 0.62);
        overflow-wrap: break-word;
        word-break: normal;
      }

      .hf-article-login.is-invite #hf-article-login-title strong {
        color: var(--text);
        font-weight: 860;
      }

      .hf-article-login.is-invite #hf-article-login-title strong {
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .hf-article-login__model {
        display: inline-flex;
        align-items: center;
        width: fit-content;
        max-width: min(46%, 330px);
        min-height: 47px;
        padding: 0 22px;
        border-radius: 999px;
        border: 1px solid rgba(91, 156, 239, 0.46);
        background: rgba(8, 20, 43, 0.64);
        color: rgba(237, 245, 255, 0.94);
        font-size: clamp(0.92rem, 1.1vw, 1.14rem);
        font-weight: 760;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.09),
          0 14px 42px rgba(47, 129, 255, 0.12);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .hf-article-login__copy {
        display: grid;
        gap: clamp(10px, 1.25vw, 17px);
      }

      .hf-article-login__copy a {
        color: #fff4c2;
        font-weight: 760;
        text-underline-offset: 0.2em;
      }

      .hf-article-login__feature-list {
        display: grid;
        gap: 0;
        margin: 2px 0 0;
        padding: 0;
        list-style: none;
        max-width: 420px;
        color: rgba(224, 234, 249, 0.91);
        font-size: clamp(1rem, 1.24vw, 1.18rem);
      }

      .hf-article-login__feature-list li {
        position: relative;
        min-height: 62px;
        padding: 10px 0 10px 42px;
        border-bottom: 1px solid rgba(197, 208, 227, 0.1);
        line-height: 1.42;
      }

      .hf-article-login__feature-list li::before {
        content: "";
        position: absolute;
        left: 7px;
        top: 20px;
        width: 12px;
        height: 12px;
        border-radius: 999px;
        background: linear-gradient(135deg, rgba(154, 255, 92, 0.98), rgba(61, 184, 85, 0.92));
        box-shadow:
          0 0 0 8px rgba(142, 255, 82, 0.06),
          0 0 22px rgba(142, 255, 82, 0.4);
      }

      .hf-article-login__feature-list li:last-child {
        border-bottom-color: transparent;
      }

      .hf-article-login__example {
        margin: -3px 0 0;
        max-width: 570px;
        color: rgba(197, 208, 227, 0.76);
        font-size: clamp(0.98rem, 1.15vw, 1.08rem);
        line-height: 1.5;
      }

      .hf-article-login.is-invite h2 {
        color: rgba(166, 178, 197, 0.62);
        font-weight: 560;
        overflow-wrap: break-word;
        word-break: normal;
      }

      .hf-article-login.is-invite h2 strong {
        color: rgba(235, 248, 255, 0.98);
        font-weight: 900;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .hf-article-login__visual {
        position: relative;
        z-index: 1;
        display: grid;
        align-self: stretch;
        align-items: center;
        justify-items: end;
        min-width: 0;
        min-height: clamp(460px, 48vw, 650px);
        margin: clamp(-24px, -2vw, -10px) 0 clamp(-34px, -2.5vw, -18px) clamp(-72px, -4.4vw, -28px);
      }

      .hf-article-login__visual::before {
        content: "";
        position: absolute;
        inset: 12% 0 2% 18%;
        border-radius: 50%;
        background:
          radial-gradient(circle at 72% 42%, rgba(92, 218, 246, 0.2), transparent 38%),
          radial-gradient(circle at 46% 58%, rgba(134, 85, 255, 0.24), transparent 42%);
        filter: blur(32px);
        opacity: 0.8;
        pointer-events: none;
      }

      .hf-article-login__visual img {
        position: relative;
        width: min(100%, 850px);
        max-width: none;
        height: auto;
        object-fit: contain;
        transform: translateX(clamp(-48px, -4.2vw, -22px));
        transform-origin: 100% 50%;
        filter: drop-shadow(0 36px 70px rgba(0, 0, 0, 0.4));
      }

      .hf-article-picker-page {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        display: grid;
        min-height: 100vh;
        min-height: 100dvh;
        padding: clamp(24px, 4vw, 48px);
      }

      .hf-watchlist-page {
        min-height: 100vh;
        padding: clamp(28px, 5vw, 56px) clamp(18px, 4vw, 48px) 80px;
        max-width: 1180px;
        margin: 0 auto;
      }
      .hf-watchlist-page[hidden] { display: none !important; }
      .hf-watchlist-head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
      .hf-watchlist-head h1 { margin: 0; font-size: clamp(28px, 4vw, 40px); letter-spacing: -0.04em; }
      .hf-watchlist-lede { color: var(--muted, #91a0ba); font-size: 15px; margin: 10px 0 22px; max-width: 640px; }
      .hf-watchlist-search {
        width: 100%; max-width: 460px; padding: 13px 18px 13px 44px;
        background: rgba(255, 255, 255, 0.05) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235c6b81' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 15px center / 17px 17px;
        border: 1px solid rgba(156, 255, 99, 0.22); border-radius: 14px;
        color: var(--text, #f5f8ff); font: 500 15px "Inter", sans-serif; outline: none;
      }
      .hf-watchlist-search:focus { border-color: rgba(156, 255, 99, 0.55); }
      .hf-watchlist-status { color: var(--muted, #91a0ba); font-size: 12.5px; margin: 12px 0 0; min-height: 18px; }
      .hf-watchlist-grid {
        margin-top: 22px;
        display: grid; gap: 14px;
        grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
      }
      .hf-watchlist-card {
        position: relative;
        display: flex; flex-direction: column; align-items: center; gap: 10px;
        padding: 26px 18px 18px;
        border: 1px solid var(--stroke, rgba(255,255,255,0.1)); border-radius: 22px;
        background: rgba(255, 255, 255, 0.04);
        text-align: center;
        transition: border-color 160ms ease, transform 160ms ease, background 160ms ease;
      }
      .hf-watchlist-card:hover { border-color: rgba(156, 255, 99, 0.35); transform: translateY(-3px); }
      .hf-watchlist-card__logo {
        width: 84px; height: 84px; border-radius: 22px; object-fit: cover;
        background: rgba(136, 215, 255, 0.12);
        box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
      }
      .hf-watchlist-card__logo--user { border-radius: 50%; }
      .hf-watchlist-card__logo--letter {
        display: flex; align-items: center; justify-content: center;
        font-size: 32px; font-weight: 800; color: #88d7ff;
      }
      .hf-watchlist-card__name { font-weight: 800; font-size: 16.5px; letter-spacing: -0.02em; word-break: break-word; }
      .hf-watchlist-card__facts { color: var(--muted-strong, #c5d0e3); font-size: 12.5px; line-height: 1.55; }
      .hf-watchlist-card__facts b { color: var(--text, #f5f8ff); }
      .hf-watchlist-card__stats { color: var(--muted, #91a0ba); font-size: 11.5px; display: flex; gap: 10px; }
      .hf-watchlist-card__watch {
        margin-top: 4px;
        padding: 8px 20px; border-radius: 999px; cursor: pointer;
        border: 1px solid rgba(156, 255, 99, 0.4);
        background: transparent; color: var(--lime, #9cff63);
        font: 700 12.5px "Inter", sans-serif; letter-spacing: 0.02em;
        transition: background 150ms ease, color 150ms ease;
      }
      .hf-watchlist-card__watch:hover { background: rgba(156, 255, 99, 0.12); }
      .hf-watchlist-card__watch.is-watching {
        background: var(--lime, #9cff63); color: #07100d; border-color: var(--lime, #9cff63);
      }
      .hf-watchlist-empty { color: var(--muted, #91a0ba); margin-top: 26px; }
      /* landing search CTA: green bell pill in the results status row */
      .hfnx-watchcta {
        display: inline-flex; align-items: center; gap: 7px;
        margin-left: 12px; padding: 7px 16px; border-radius: 999px; cursor: pointer;
        border: 1px solid rgba(156, 255, 99, 0.5);
        background: rgba(156, 255, 99, 0.12);
        color: var(--lime, #9cff63);
        font: 600 13px "Inter", sans-serif;
        vertical-align: middle;
        transition: background 150ms ease, border-color 150ms ease, color 150ms ease;
      }
      .hfnx-watchcta:hover:not(:disabled):not(.is-watching),
      .hfnx-watchcta:focus-visible:not(:disabled):not(.is-watching) {
        background: rgba(156, 255, 99, 0.2);
        border-color: rgba(156, 255, 99, 0.72);
        outline: none;
      }
      .hfnx-watchcta__icon { display: inline-flex; width: 13px; height: 13px; flex: 0 0 auto; color: currentColor; }
      .hfnx-watchcta__icon svg { width: 100%; height: 100%; display: block; fill: currentColor; }
      .hfnx-watchcta.is-watching {
        cursor: default;
        border-color: rgba(156, 255, 99, 0.32);
        background:
          radial-gradient(circle at 50% 0%, rgba(156, 255, 99, 0.2), transparent 64%),
          linear-gradient(180deg, rgba(156, 255, 99, 0.15), rgba(136, 215, 255, 0.055)),
          rgba(7, 16, 29, 0.76);
        color: #e7ffd8;
      }
      .hfnx-watchcta:disabled { opacity: 0.6; cursor: wait; }

      .hf-article-picker-page[hidden] {
        display: none;
      }

      .hf-article-picker-page::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: -1;
        pointer-events: none;
        background:
          radial-gradient(circle at 12% 12%, rgba(123, 89, 255, 0.18), transparent 32%),
          radial-gradient(circle at 88% 18%, rgba(92, 218, 246, 0.13), transparent 34%),
          linear-gradient(145deg, rgba(4, 9, 20, 0.98), rgba(5, 11, 24, 0.98) 48%, rgba(2, 8, 16, 0.99));
      }

      .hf-article-picker-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
        gap: clamp(20px, 3vw, 34px);
        width: min(1220px, 100%);
        margin: 0 auto;
        align-self: center;
      }

      .hf-article-picker-panel,
      .hf-article-picker-aside {
        box-sizing: border-box;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 32px;
        background:
          radial-gradient(circle at 18% 0%, rgba(156, 255, 99, 0.1), transparent 28%),
          linear-gradient(180deg, rgba(9, 18, 34, 0.9), rgba(4, 9, 18, 0.94));
        box-shadow:
          0 26px 78px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .hf-article-picker-panel {
        display: grid;
        align-content: start;
        gap: 22px;
        min-width: 0;
        padding: clamp(24px, 3.6vw, 42px);
      }

      .hf-article-picker-head {
        display: grid;
        gap: 12px;
      }

      .hf-article-picker-head .eyebrow {
        justify-self: start;
      }

      .hf-article-picker-head h2 {
        margin: 0;
        max-width: 760px;
        color: var(--text);
        font-size: clamp(2.2rem, 4.4vw, 4.6rem);
        line-height: 0.95;
        letter-spacing: -0.08em;
      }

      .hf-article-picker-head h2 span {
        color: #9cff63;
        background: linear-gradient(94deg, #b9ff76 4%, #83ffad 50%, #88d7ff 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-shadow: 0 18px 42px rgba(105, 255, 160, 0.22);
      }

      .hf-article-picker-lede {
        margin: 0;
        max-width: 760px;
        color: rgba(207, 219, 238, 0.78);
        font-size: clamp(1rem, 1.4vw, 1.12rem);
        line-height: 1.62;
      }

      .hf-article-picker-type-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
      }

      .hf-article-picker-type {
        display: grid;
        gap: 6px;
        min-width: 0;
        padding: 14px 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.035);
      }

      .hf-article-picker-type strong {
        color: rgba(239, 249, 255, 0.96);
        font-size: 0.78rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .hf-article-picker-type span {
        color: rgba(198, 211, 231, 0.74);
        font-size: 0.92rem;
        line-height: 1.45;
      }

      .hf-article-picker-search-row {
        display: flex;
        align-items: center;
        gap: 12px;
      }

      .hf-article-picker-search {
        box-sizing: border-box;
        width: 100%;
        min-height: 56px;
        padding: 0 18px;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 18px;
        background: rgba(0, 0, 0, 0.28);
        color: rgba(241, 248, 255, 0.96);
        font: inherit;
        font-size: 1.02rem;
        outline: none;
        transition:
          border-color 160ms ease,
          box-shadow 160ms ease,
          background 160ms ease;
      }

      .hf-article-picker-search:focus {
        border-color: rgba(136, 215, 255, 0.42);
        background: rgba(0, 0, 0, 0.36);
        box-shadow:
          0 0 0 4px rgba(136, 215, 255, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }

      .hf-article-picker-search::placeholder {
        color: rgba(197, 208, 227, 0.46);
      }

      .hf-article-picker-status {
        min-height: 22px;
        margin: -6px 0 0;
        color: rgba(197, 208, 227, 0.66);
        font-size: 0.92rem;
        line-height: 1.45;
      }

      .hf-article-picker-actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
      }

      .hf-article-picker-results {
        display: grid;
        gap: 12px;
        min-width: 0;
      }

      .hf-article-picker-empty {
        margin: 0;
        padding: 18px;
        border: 1px dashed rgba(136, 215, 255, 0.18);
        border-radius: 18px;
        color: rgba(197, 208, 227, 0.68);
        background: rgba(255, 255, 255, 0.025);
      }

      .hf-article-picker-card {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr) auto;
        gap: 16px;
        align-items: center;
        min-width: 0;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 22px;
        background:
          radial-gradient(circle at 7% 0%, rgba(156, 255, 99, 0.07), transparent 28%),
          rgba(255, 255, 255, 0.035);
        transition:
          border-color 160ms ease,
          background 160ms ease,
          transform 160ms ease;
      }

      .hf-article-picker-card:hover {
        border-color: rgba(136, 215, 255, 0.22);
        background:
          radial-gradient(circle at 7% 0%, rgba(156, 255, 99, 0.1), transparent 28%),
          rgba(255, 255, 255, 0.052);
        transform: translateY(-1px);
      }

      .hf-article-picker-card__thumb {
        display: grid;
        place-items: center;
        width: 112px;
        height: 78px;
        overflow: hidden;
        border-radius: 16px;
        background:
          radial-gradient(circle at 50% 18%, rgba(136, 215, 255, 0.13), transparent 36%),
          rgba(0, 0, 0, 0.22);
      }

      .hf-article-picker-card__thumb img {
        display: block;
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }

      .hf-article-picker-card__dot {
        width: 16px;
        height: 16px;
        border-radius: 999px;
        background: linear-gradient(135deg, #9cff63, #88d7ff);
        box-shadow:
          0 0 0 9px rgba(156, 255, 99, 0.07),
          0 0 28px rgba(136, 215, 255, 0.22);
      }

      .hf-article-picker-card__body {
        display: grid;
        gap: 8px;
        min-width: 0;
      }

      .hf-article-picker-card__repo {
        color: rgba(241, 248, 255, 0.96);
        font-weight: 820;
        letter-spacing: -0.025em;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .hf-article-picker-card__meta {
        color: rgba(197, 208, 227, 0.62);
        font-size: 0.86rem;
        line-height: 1.4;
      }

      .hf-article-picker-badges {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }

      .hf-article-picker-badge {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0 9px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        color: rgba(221, 233, 246, 0.82);
        font-size: 0.68rem;
        font-weight: 820;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .hf-article-picker-badge--owner {
        border-color: rgba(136, 215, 255, 0.24);
        background: rgba(136, 215, 255, 0.1);
        color: rgba(205, 244, 255, 0.96);
      }

      .hf-article-picker-badge--community {
        border-color: rgba(156, 255, 99, 0.22);
        background: rgba(156, 255, 99, 0.085);
        color: rgba(226, 255, 213, 0.94);
      }

      .hf-article-picker-badge--published {
        border-color: rgba(255, 214, 91, 0.26);
        background: rgba(255, 214, 91, 0.09);
        color: rgba(255, 238, 184, 0.96);
      }

      .hf-article-picker-badge--not-ready {
        border-color: rgba(255, 165, 124, 0.24);
        background: rgba(255, 165, 124, 0.075);
        color: rgba(255, 221, 204, 0.9);
      }

      .hf-article-picker-card__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 0 16px;
        border: 1px solid rgba(156, 255, 99, 0.28);
        border-radius: 999px;
        background: rgba(156, 255, 99, 0.1);
        color: rgba(230, 255, 221, 0.96);
        font: inherit;
        font-size: 0.82rem;
        font-weight: 820;
        letter-spacing: -0.01em;
        white-space: nowrap;
        cursor: pointer;
        transition:
          border-color 160ms ease,
          background 160ms ease,
          box-shadow 160ms ease,
          transform 160ms ease,
          opacity 160ms ease;
      }

      .hf-article-picker-card__button:hover:not(:disabled),
      .hf-article-picker-card__button:focus-visible:not(:disabled) {
        border-color: rgba(156, 255, 99, 0.48);
        background: rgba(156, 255, 99, 0.16);
        box-shadow: 0 12px 28px rgba(156, 255, 99, 0.1);
        transform: translateY(-1px);
        outline: none;
      }

      .hf-article-picker-card__button:disabled {
        cursor: default;
        opacity: 0.58;
      }

      .hf-article-picker-aside {
        display: grid;
        align-content: start;
        gap: 18px;
        min-width: 0;
        padding: 18px;
      }

      .hf-article-picker-screenshot {
        display: block;
        width: 100%;
        /* the img carries width/height attributes; without this the fixed
           attribute height wins over the fluid width and squishes the shot */
        height: auto;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.11);
        background: #07111d;
        box-shadow:
          0 18px 54px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .hf-article-picker-aside h3 {
        margin: 0;
        color: rgba(241, 248, 255, 0.96);
        font-size: clamp(1.35rem, 2vw, 1.8rem);
        line-height: 1.02;
        letter-spacing: -0.055em;
      }

      .hf-article-picker-aside p {
        margin: 0;
        color: rgba(197, 208, 227, 0.74);
        line-height: 1.55;
      }

      @media (max-width: 980px) {
        .hf-article-picker-page {
          padding: 20px;
        }

        .hf-article-picker-shell {
          grid-template-columns: minmax(0, 1fr);
        }

        .hf-article-picker-aside {
          order: -1;
        }
      }

      @media (max-width: 640px) {
        .hf-article-picker-panel {
          padding: 22px 18px;
          border-radius: 26px;
        }

        .hf-article-picker-type-grid {
          grid-template-columns: minmax(0, 1fr);
        }

        .hf-article-picker-card {
          grid-template-columns: 72px minmax(0, 1fr);
          align-items: start;
        }

        .hf-article-picker-card__thumb {
          width: 72px;
          height: 58px;
        }

        .hf-article-picker-card__button {
          grid-column: 1 / -1;
          justify-self: stretch;
        }
      }

      .hf-models-login__button,
      .hf-models-dashboard__button {
        padding: 0 22px;
        text-decoration: none;
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login__button {
        flex: 0 1 360px;
        min-width: 0;
        white-space: nowrap;
      }

      .hf-models-page:not(.hf-article-login-page) .hf-models-login__back {
        flex: 0 0 auto;
        min-width: 136px;
        white-space: nowrap;
      }

      @supports not (zoom: 1) {
        .hf-models-page:not(.hf-article-login-page) .hf-models-login {
          transform: scale(0.9);
          transform-origin: center center;
        }
      }

      .hf-models-login__button {
        position: relative;
        overflow: hidden;
        isolation: isolate;
        transition:
          transform 180ms cubic-bezier(0.2, 0.78, 0.2, 1),
          border-color 180ms ease,
          background 180ms ease,
          color 180ms ease,
          box-shadow 180ms ease;
      }

      .hf-models-login__button::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: 0;
        border-radius: inherit;
        opacity: 0;
        pointer-events: none;
        background:
          radial-gradient(circle at 18% 20%, rgba(255, 236, 158, 0.3), transparent 30%),
          linear-gradient(110deg, rgba(255, 218, 91, 0.24), rgba(255, 255, 255, 0.08) 44%, rgba(255, 196, 78, 0.18));
        transition: opacity 180ms ease;
      }

      .hf-models-login__button > * {
        position: relative;
        z-index: 1;
      }

      .hf-models-login__button img {
        transition:
          transform 180ms cubic-bezier(0.2, 0.78, 0.2, 1),
          filter 180ms ease;
      }

      .hf-models-login__button:hover,
      .hf-models-login__button:focus-visible {
        transform: translateY(-2px);
        border-color: rgba(255, 223, 118, 0.56);
        background:
          linear-gradient(135deg, rgba(255, 222, 103, 0.25), rgba(255, 255, 255, 0.075)),
          rgba(9, 17, 31, 0.95);
        color: #fff9da;
        box-shadow:
          0 22px 48px rgba(0, 0, 0, 0.3),
          0 0 0 1px rgba(255, 224, 128, 0.08),
          0 0 34px rgba(255, 204, 75, 0.14);
      }

      .hf-models-login__button:hover::before,
      .hf-models-login__button:focus-visible::before {
        opacity: 1;
      }

      .hf-models-login__button:hover img,
      .hf-models-login__button:focus-visible img {
        transform: translateY(-1px) scale(1.04) rotate(-2deg);
        filter: drop-shadow(0 7px 12px rgba(255, 213, 86, 0.22));
      }

      .hf-models-login__button:focus-visible {
        outline: 2px solid rgba(255, 232, 144, 0.46);
        outline-offset: 3px;
      }

      .hf-models-login__back {
        border-color: rgba(197, 208, 227, 0.12);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.018)),
          rgba(7, 14, 26, 0.74);
        color: rgba(197, 208, 227, 0.74);
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }

      .hf-models-login__button[hidden],
      .hf-models-dashboard__button[hidden] {
        display: none;
      }

      @media (min-width: 861px) and (max-height: 700px) {
        .hf-models-page:not(.hf-article-login-page) {
          padding-top: clamp(8px, 1.55vw, 14px);
          padding-bottom: clamp(8px, 1.55vw, 14px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login {
          min-height: min(552px, calc(100dvh - clamp(16px, 3.1vw, 28px)));
          padding-top: clamp(10px, 1.25vw, 16px);
          padding-bottom: clamp(10px, 1.25vw, 16px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login h2 {
          font-size: clamp(2.76rem, 3.48vw, 3.86rem);
          line-height: 1.02;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__copy {
          gap: clamp(8px, 1.05vh, 13px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__lead {
          font-size: 0.96rem;
          line-height: 1.4;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__allows {
          font-size: 0.94rem;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature {
          grid-template-columns: 43px minmax(0, 1fr);
          gap: 13px;
          padding: 6px 0;
          font-size: 0.96rem;
          line-height: 1.25;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature-icon {
          width: 43px;
          height: 43px;
          border-radius: 12px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature img {
          width: 31px;
          height: 31px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature:first-child img {
          width: 28px;
          height: 28px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__visual {
          min-height: clamp(300px, 75vh, 585px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__visual img {
          width: min(138%, 650px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__actions {
          gap: 12px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__button,
        .hf-models-page:not(.hf-article-login-page) .hf-models-login__back {
          min-height: 50px;
          padding-left: 20px;
          padding-right: 20px;
        }
      }

      @media (min-width: 861px) and (max-height: 620px) {
        .hf-models-page:not(.hf-article-login-page) {
          padding-top: clamp(6px, 1.15vw, 12px);
          padding-bottom: clamp(6px, 1.15vw, 12px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login {
          min-height: min(506px, calc(100dvh - clamp(12px, 2.3vw, 22px)));
          padding-top: clamp(8px, 1vw, 12px);
          padding-bottom: clamp(8px, 1vw, 12px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login h2 {
          font-size: clamp(2.56rem, 3.25vw, 3.24rem);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__copy {
          gap: clamp(7px, 0.95vh, 10px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__lead {
          line-height: 1.34;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature {
          grid-template-columns: 40px minmax(0, 1fr);
          gap: 12px;
          padding: 4px 0;
          font-size: 0.93rem;
          line-height: 1.22;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature-icon {
          width: 40px;
          height: 40px;
          border-radius: 11px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature img {
          width: 29px;
          height: 29px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature:first-child img {
          width: 26px;
          height: 26px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__visual {
          min-height: clamp(245px, 62vh, 500px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__visual img {
          width: min(132%, 610px);
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__button,
        .hf-models-page:not(.hf-article-login-page) .hf-models-login__back {
          min-height: 48px;
        }
      }

      .hf-models-dashboard {
        --hf-models-column-title-sticky-top: max(12px, env(safe-area-inset-top));
        display: grid;
        gap: 22px;
        padding: clamp(18px, 4vw, 32px);
      }

      .hf-models-dashboard__top {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 18px;
      }

      .hf-models-dashboard__heading {
        display: grid;
        gap: 14px;
      }

      /* org pills opposite the dashboard title: load an org's public
         non-gated models on demand, unload with the x */
      .hf-models-dashboard__orgs {
        margin-left: auto;
        display: grid;
        gap: 8px;
        justify-items: end;
        align-self: start;
        max-width: min(46vw, 560px);
      }
      .hf-org-row {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex-wrap: wrap;
        gap: 7px;
      }
      .hf-org-row__label {
        color: var(--muted);
        font-size: 12px;
        white-space: nowrap;
      }
      .hf-org-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 4px 11px 4px 5px;
        border: 1px solid var(--stroke);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--muted-strong);
        font: 600 12.5px "Inter", sans-serif;
        cursor: pointer;
        transition: border-color 140ms ease, color 140ms ease, background 140ms ease;
      }
      .hf-org-pill:hover {
        border-color: var(--stroke-strong);
        color: var(--text);
        background: rgba(255, 255, 255, 0.07);
      }
      .hf-org-pill img {
        width: 20px;
        height: 20px;
        border-radius: 6px;
        object-fit: cover;
        background: #fff;
      }
      .hf-org-pill.is-loaded {
        border-color: rgba(156, 255, 99, 0.35);
        color: var(--text);
      }
      .hf-org-pill__x {
        margin-left: 2px;
        color: var(--muted);
        font-size: 13px;
        line-height: 1;
      }
      .hf-org-pill.is-loaded:hover .hf-org-pill__x { color: var(--red, #ff7a7a); }

      .hf-models-dashboard__stats {
        display: flex;
        align-self: start;
        flex-wrap: wrap;
        gap: 9px;
        align-items: center;
      }

      .hf-models-dashboard__stat {
        display: inline-grid;
        grid-template-columns: auto 1fr;
        align-items: center;
        gap: 8px;
        min-height: 42px;
        padding: 0 13px;
        border: 1px solid rgba(136, 215, 255, 0.14);
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
          rgba(4, 11, 20, 0.72);
        color: rgba(223, 247, 255, 0.78);
        font: inherit;
        font-size: 0.82rem;
        font-weight: 760;
        cursor: pointer;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 12px 28px rgba(0, 0, 0, 0.16);
      }

      .hf-models-dashboard__stat[hidden] {
        display: none;
      }

      .hf-models-dashboard__stat:hover,
      .hf-models-dashboard__stat:focus-visible {
        border-color: rgba(136, 215, 255, 0.28);
        color: rgba(235, 248, 255, 0.96);
        outline: none;
      }

      .hf-models-dashboard__stat-count {
        display: inline-grid;
        place-items: center;
        min-width: 28px;
        min-height: 28px;
        padding: 0 8px;
        border-radius: 999px;
        background: rgba(156, 255, 99, 0.13);
        color: rgba(229, 255, 214, 0.96);
        font-size: 0.88rem;
        font-weight: 860;
        box-shadow: inset 0 0 0 1px rgba(156, 255, 99, 0.16);
      }

      .hf-models-dashboard__user {
        display: flex;
        align-items: center;
        justify-content: end;
        gap: 12px;
        min-width: 0;
        color: rgba(197, 208, 227, 0.72);
        font-weight: 700;
        text-align: left;
      }

      .hf-models-dashboard__user span {
        min-width: 0;
        overflow-wrap: anywhere;
      }

      .hf-models-dashboard__identity {
        display: grid;
        justify-items: start;
        gap: 7px;
        min-width: 0;
      }

      .hf-models-dashboard__name {
        color: rgba(235, 248, 255, 0.88);
      }

      .hf-models-dashboard__avatar {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.08);
        object-fit: cover;
        border: 1.5px solid rgba(235, 248, 255, 0.82);
        box-shadow:
          0 10px 24px rgba(0, 0, 0, 0.24),
          0 0 0 5px rgba(136, 215, 255, 0.07);
      }

      .hf-models-dashboard__org-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 7px;
        min-width: 0;
        max-width: 100%;
      }

      .hf-models-dashboard__org-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 0;
        min-width: 0;
        max-width: 100%;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: rgba(235, 248, 255, 0.82);
        padding: 0;
        font-size: 0.82rem;
        overflow-wrap: anywhere;
      }

      .hf-models-dashboard__org-avatar {
        width: 22px;
        height: 22px;
        flex: 0 0 auto;
        border: 1px solid rgba(235, 248, 255, 0.62);
        border-radius: 6px;
        background: rgba(255, 255, 255, 0.1);
        object-fit: cover;
        box-shadow: 0 0 0 3px rgba(136, 215, 255, 0.07);
      }

      .hf-models-dashboard__org-chip--detected {
        color: rgba(235, 248, 255, 0.82);
      }

      .hf-models-dashboard__org-chip button {
        border: 0;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font: inherit;
        padding: 0;
      }

      .hf-models-dashboard__columns {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 16px;
      }

      .hf-models-dashboard__bookmarks {
        display: grid;
        gap: 12px;
      }

      .hf-models-dashboard__bookmarks .hf-models-column {
        min-height: 0;
        background:
          radial-gradient(circle at 12% 0%, rgba(156, 255, 99, 0.09), transparent 42%),
          rgba(255, 255, 255, 0.035);
      }

      .hf-models-dashboard__bookmarks[hidden] {
        display: none;
      }

      .hf-bookmarks-page {
        display: grid;
        gap: 22px;
        padding: clamp(18px, 4vw, 32px);
      }

      .hf-bookmarks-page[hidden] {
        display: none;
      }

      .hf-bookmarks-page__top {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 18px;
      }

      .hf-bookmarks-page__heading {
        display: grid;
        gap: 14px;
      }

      .hf-bookmarks-page__heading h2 {
        margin: 0;
        color: rgba(235, 248, 255, 0.96);
        font-size: clamp(2rem, 4.5vw, 4.2rem);
        line-height: 0.96;
        letter-spacing: -0.07em;
      }

      .hf-bookmarks-page__intro {
        margin: 0;
        color: rgba(197, 208, 227, 0.72);
        font-size: 1rem;
        line-height: 1.6;
      }

      .hf-bookmarks-grid {
        position: relative;
        min-height: 220px;
      }

      .hf-bookmarks-grid .hf-model-card {
        position: absolute;
        top: 0;
        left: 0;
        will-change: transform;
      }

      .hf-models-column {
        display: grid;
        align-content: start;
        gap: 12px;
        min-height: 240px;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.035);
      }

      .hf-models-column[hidden] {
        display: none;
      }

      .hf-models-column h3 {
        position: sticky;
        top: var(--hf-models-column-title-sticky-top, 12px);
        z-index: 9;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
        margin: -4px 0 0;
        padding: 9px 11px;
        border: 1px solid rgba(136, 215, 255, 0.13);
        border-radius: 16px;
        background:
          radial-gradient(circle at 12% 0%, rgba(156, 255, 99, 0.08), transparent 42%),
          linear-gradient(180deg, rgba(7, 14, 25, 0.94), rgba(4, 9, 17, 0.82));
        backdrop-filter: blur(18px);
        box-shadow:
          0 14px 32px rgba(0, 0, 0, 0.22),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
        color: var(--text);
        font-size: 1rem;
        letter-spacing: -0.02em;
      }

      .hf-models-column__intro {
        margin: -2px 0 0;
        color: rgba(197, 208, 227, 0.62);
        font-size: 0.88rem;
        line-height: 1.45;
      }

      .hf-models-column__list {
        display: grid;
        gap: 10px;
        container: hf-model-card-list / inline-size;
      }

      .hf-models-column__list--bookmarks {
        grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
        align-items: stretch;
      }

      .hf-models-empty {
        padding: 14px;
        border: 1px dashed rgba(197, 208, 227, 0.18);
        border-radius: 18px;
        color: rgba(197, 208, 227, 0.58);
        font-size: 0.92rem;
        line-height: 1.5;
      }

      .hf-model-card {
        display: grid;
        gap: 10px;
        padding: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 18px;
        background: rgba(4, 9, 17, 0.68);
        transform-origin: top left;
      }

      @media (prefers-reduced-motion: reduce) {
        .hf-models-dashboard__columns {
          transition: none;
        }
      }

      .hf-model-card__repo {
        color: var(--text);
        font-size: 0.94rem;
        font-weight: 800;
        letter-spacing: -0.02em;
        overflow-wrap: anywhere;
      }

      .hf-model-card__meta {
        color: rgba(197, 208, 227, 0.58);
        font-size: 0.82rem;
      }

      .hf-model-card__preview {
        width: 100%;
        height: clamp(176px, 20vw, 280px);
        min-height: 116px;
        max-height: 280px;
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.04);
        object-fit: contain;
      }

      .hf-model-card__preview-link {
        display: block;
        border-radius: 14px;
        overflow: hidden;
      }

      .hf-model-card__preview-link:focus-visible {
        outline: 2px solid rgba(136, 215, 255, 0.76);
        outline-offset: 3px;
      }

      .hf-model-card__preview-link .hf-model-card__preview {
        display: block;
      }

      .hf-model-card__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .hf-model-card__showcase-chip {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        width: fit-content;
        padding: 3px 10px;
        border: 1px solid rgba(255, 214, 91, 0.32);
        border-radius: 999px;
        background: rgba(255, 214, 91, 0.1);
        color: rgba(255, 236, 179, 0.92);
        font-size: 11px;
        font-weight: 660;
        letter-spacing: 0.02em;
        line-height: 1.4;
        white-space: nowrap;
      }

      .hf-model-card__showcase-chip::before {
        content: "";
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: rgba(255, 214, 91, 0.8);
      }

      .hf-model-card__showcase-chip.is-live {
        border-color: rgba(156, 255, 99, 0.34);
        background: rgba(156, 255, 99, 0.1);
        color: rgba(214, 255, 183, 0.95);
      }

      .hf-model-card__showcase-chip.is-live::before {
        background: rgba(156, 255, 99, 0.85);
      }

      .hf-model-card__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid rgba(136, 215, 255, 0.2);
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.08);
        color: #dff7ff;
        font: inherit;
        font-weight: 760;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
      }

      @container hf-model-card-list (min-width: 360px) {
        .hf-model-card[data-dashboard-bucket="ready"] {
          grid-template-columns: minmax(0, 1fr) minmax(136px, 34%);
          grid-template-areas:
            "repo repo"
            "meta meta"
            "preview actions";
          align-items: stretch;
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__repo {
          grid-area: repo;
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__meta {
          grid-area: meta;
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__preview-link {
          grid-area: preview;
          display: flex;
          min-width: 0;
          min-height: clamp(190px, 20vw, 280px);
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__actions {
          grid-area: actions;
          display: grid;
          grid-template-columns: 1fr;
          grid-auto-rows: max-content;
          align-content: start;
          align-self: start;
          min-width: 0;
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__button {
          width: 100%;
          min-height: 42px;
          height: auto;
          padding: 8px 10px;
          flex-direction: row;
          white-space: nowrap;
        }
      }

      .hf-button-icon {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
      }

      .hf-models-dashboard__button--primary {
        width: 100%;
        min-height: 64px;
        border-color: rgba(156, 255, 99, 0.32);
        background: linear-gradient(135deg, var(--lime), #baff82);
        color: var(--ink);
      }

      .hf-models-dashboard__button--secondary {
        width: 100%;
        min-height: 58px;
        border-color: rgba(255, 214, 91, 0.3);
      }

      .hf-feature-page {
        position: relative;
        z-index: 2;
        height: 100vh;
        height: 100dvh;
        min-height: 680px;
        padding: clamp(22px, 3.2vw, 42px) clamp(18px, 3vw, 46px);
        overflow: hidden;
        background:
          radial-gradient(circle at 83% 0%, rgba(139, 255, 165, 0.16), transparent 34%),
          radial-gradient(circle at 34% 5%, rgba(88, 80, 255, 0.2), transparent 38%),
          radial-gradient(circle at 50% 120%, rgba(45, 118, 255, 0.15), transparent 44%),
          linear-gradient(180deg, #040817 0%, #081120 48%, #020711 100%);
        opacity: 1;
      }

      .hf-feature-page::before,
      .hf-feature-page::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .hf-feature-page::before {
        inset: 0;
        background:
          linear-gradient(90deg, rgba(0, 0, 0, 0.28), transparent 28%, transparent 68%, rgba(0, 0, 0, 0.22)),
          radial-gradient(circle at 50% 62%, rgba(136, 215, 255, 0.07), transparent 42%);
        opacity: 0.9;
      }

      .hf-feature-page::after {
        left: 6%;
        right: 4%;
        bottom: -18vh;
        height: 44vh;
        background:
          radial-gradient(ellipse at 36% 0%, rgba(135, 176, 255, 0.2), transparent 52%),
          radial-gradient(ellipse at 62% 5%, rgba(156, 255, 99, 0.11), transparent 48%);
        filter: blur(28px);
        opacity: 0.8;
      }

      .hf-feature-page[hidden] {
        display: none;
      }

      .hf-feature-page.is-transition-overlay {
        position: fixed;
        inset: 0;
        z-index: 40;
        overflow: hidden;
        animation: hf-feature-page-overlay-in 680ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
      }

      .hf-feature-page.is-transition-prepared {
        position: fixed;
        inset: 0;
        z-index: 40;
        overflow: hidden;
        opacity: 0;
        animation: none;
      }

      .hf-feature-page.is-returning-dashboard-prepared,
      .hf-feature-page.is-returning-dashboard {
        position: fixed;
        inset: 0;
        z-index: 40;
        overflow: hidden;
        pointer-events: none;
      }

      .hf-feature-page.is-returning-dashboard {
        animation: hf-feature-page-return-out 780ms cubic-bezier(0.2, 0.78, 0.2, 1) both;
      }

      .hf-feature-page.is-returning-dashboard-snapshot,
      .hf-feature-page.is-returning-dashboard-snapshot.is-returning-dashboard {
        position: fixed;
        inset: 0;
        z-index: 80;
        overflow: hidden;
        pointer-events: none;
      }

      .hf-feature-page.is-entering .hf-feature-preview-pane,
      .hf-feature-page.is-entering .hf-feature-action-pane {
        opacity: 0;
        transform: translateY(16px);
      }

      .hf-feature-page.is-flying-card .hf-feature-preview-pane {
        opacity: 1;
        transform: none;
        transition: none;
      }

      .hf-feature-shell {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(330px, 390px);
        align-items: center;
        gap: clamp(18px, 2.2vw, 36px);
        width: min(1540px, 100%);
        height: 100%;
        min-height: 0;
        margin: 0 auto;
      }

      .hf-feature-preview-pane,
      .hf-feature-action-pane {
        transition: opacity 340ms ease, transform 340ms ease;
      }

      .hf-feature-preview-pane {
        position: relative;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 12px;
        min-width: 0;
        min-height: 0;
        overflow: visible;
        perspective: 1600px;
        transform-style: preserve-3d;
      }

      .hf-feature-showcase-stage {
        --hf-feature-stage-y-offset: 0px;
        position: relative;
        display: grid;
        place-items: start center;
        width: min(1040px, 100%);
        height: clamp(540px, calc(100dvh - 132px), 668px);
        min-height: 0;
        margin-left: 0;
        isolation: isolate;
        perspective: 1650px;
        transform: translateY(var(--hf-feature-stage-y-offset));
        transform-style: preserve-3d;
      }

      .hf-feature-showcase-stage::before,
      .hf-feature-showcase-stage::after {
        content: "";
        position: absolute;
        pointer-events: none;
      }

      .hf-feature-showcase-stage::before {
        left: 2%;
        right: 2%;
        bottom: 4px;
        height: 270px;
        border-radius: 50%;
        background:
          linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, 0.05) 18%, rgba(6, 14, 34, 0.1) 26%, transparent 54%),
          radial-gradient(ellipse at 52% 22%, rgba(255, 255, 255, 0.36), transparent 10%),
          radial-gradient(ellipse at 48% 32%, rgba(112, 178, 255, 0.29), transparent 39%),
          radial-gradient(ellipse at 58% 43%, rgba(156, 255, 99, 0.14), transparent 47%),
          radial-gradient(ellipse at 50% 70%, rgba(0, 7, 22, 0.66), transparent 66%);
        filter: blur(24px);
        opacity: 0.98;
        transform: rotateX(69deg) translateY(38px);
        transform-origin: center;
        z-index: 0;
      }

      .hf-feature-showcase-stage::after {
        left: 17%;
        right: 17%;
        bottom: 62px;
        height: 138px;
        border-radius: 999px;
        background:
          radial-gradient(ellipse at 44% 32%, rgba(239, 247, 255, 0.28), transparent 18%),
          radial-gradient(ellipse at 49% 49%, rgba(4, 10, 24, 0.76), transparent 44%),
          radial-gradient(ellipse at 56% 60%, rgba(84, 136, 210, 0.24), transparent 68%);
        filter: blur(19px);
        opacity: 0.74;
        transform: rotateX(70deg) translateY(38px);
        transform-origin: center;
        z-index: 1;
      }

      .hf-feature-backdrop-cards {
        position: absolute;
        inset: 0;
        z-index: 2;
        pointer-events: none;
        transform-style: preserve-3d;
      }

      .hf-feature-main-card-wrap {
        --hf-feature-main-reflection-gap: -32px;
        --hf-feature-main-reflection-width: 110%;
        --hf-feature-main-card-y: 12.75px;
        --hf-feature-card-projection-scale: 1.092715;
        position: relative;
        z-index: 8;
        width: clamp(326px, 18.8vw, 347.5px);
        overflow: visible;
        transform: translateY(var(--hf-feature-main-card-y));
        transform-style: flat;
        transform-origin: center top;
        animation: hf-feature-main-card-enter 980ms cubic-bezier(0.18, 0.84, 0.23, 1) 120ms both;
      }

      .hf-feature-main-card-wrap.is-entered,
      .hf-feature-page.has-flight-complete .hf-feature-main-card-wrap {
        animation: none;
        filter: none !important;
        opacity: 1;
        transform: translateY(var(--hf-feature-main-card-y));
        transform-style: flat;
      }

      .hf-feature-main-card-wrap.is-entered .hf-feature-showcase-card,
      .hf-feature-main-card-wrap.is-entered .hf-feature-card-target,
      .hf-feature-main-card-wrap.is-entered .hf-feature-card-target .community-card__viewer,
      .hf-feature-page.has-flight-complete .hf-feature-showcase-card,
      .hf-feature-page.has-flight-complete .hf-feature-card-target,
      .hf-feature-page.has-flight-complete .hf-feature-card-target .community-card__viewer {
        filter: none !important;
        opacity: 1;
      }


      .hf-feature-main-card-wrap::before,
      .hf-feature-main-card-wrap::after {
        content: "";
        position: absolute;
        pointer-events: none;
        transform-origin: center;
      }

      .hf-feature-main-card-wrap::before {
        left: -18%;
        right: -18%;
        bottom: -52px;
        height: 136px;
        border-radius: 50%;
        background:
          radial-gradient(ellipse at 50% 28%, rgba(255, 255, 255, 0.2), transparent 14%),
          radial-gradient(ellipse at 50% 43%, rgba(0, 3, 12, 0.66), transparent 42%),
          radial-gradient(ellipse at 52% 66%, rgba(78, 132, 206, 0.24), transparent 70%);
        filter: blur(22px);
        opacity: 0.94;
        transform: rotateX(72deg) translateZ(-30px);
        z-index: -1;
      }

      .hf-feature-main-card-wrap::after {
        left: 0;
        right: 0;
        bottom: -28px;
        height: 46px;
        border-radius: 999px;
        background:
          radial-gradient(ellipse at 50% 50%, rgba(238, 248, 255, 0.32), rgba(102, 158, 230, 0.14) 44%, transparent 74%);
        filter: blur(11px);
        opacity: 0.68;
        transform: rotateX(72deg) translateZ(-22px);
        z-index: -1;
      }

      .hf-feature-card-reflection {
        position: absolute;
        top: calc(100% + var(--hf-feature-main-reflection-gap));
        left: calc((100% - var(--hf-feature-main-reflection-width)) / 2);
        z-index: -2;
        width: var(--hf-feature-main-reflection-width);
        height: min(178px, 20vh);
        overflow: hidden;
        border-radius: 32px;
        pointer-events: none;
        opacity: 0.84;
        mix-blend-mode: screen;
        transform: none;
        transform-origin: center top;
        will-change: opacity, transform;
        clip-path: inset(0 round 32px);
        -webkit-mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.76) 0%,
            rgba(0, 0, 0, 0.48) 14%,
            rgba(0, 0, 0, 0.22) 36%,
            rgba(0, 0, 0, 0.06) 62%,
            transparent 92%
          ),
          linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.76) 0%,
            rgba(0, 0, 0, 0.48) 14%,
            rgba(0, 0, 0, 0.22) 36%,
            rgba(0, 0, 0, 0.06) 62%,
            transparent 92%
          ),
          linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
        mask-composite: intersect;
      }

      .hf-feature-card-reflection__inner {
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        transform: translateY(-1px) scaleX(1) scaleY(-1);
        transform-origin: center bottom;
        filter: blur(5.2px) saturate(0.74) brightness(0.78) contrast(0.92);
        opacity: 0.88;
        will-change: filter, opacity;
        clip-path: inset(0 round 32px);
      }

      .hf-feature-card-reflection .community-card {
        min-height: auto;
        overflow: hidden;
        border-radius: 32px;
        clip-path: inset(0 round 32px);
        border-color: rgba(184, 218, 255, 0.22);
        background:
          linear-gradient(180deg, rgba(215, 235, 255, 0.2), rgba(116, 166, 225, 0.08));
        box-shadow: none;
      }

      .hf-feature-card-reflection .community-card__viewer {
        filter: blur(1px) drop-shadow(0 22px 38px rgba(46, 112, 210, 0.18));
      }

      .hf-feature-card-reflection .community-card__embed,
      .hf-feature-card-reflection .community-card__top,
      .hf-feature-card-reflection .community-card__tabs,
      .hf-feature-card-reflection .community-card__actions {
        pointer-events: none;
      }

      .hf-feature-page.is-flying-card .hf-feature-main-card-wrap,
      .hf-feature-page.has-flight-complete .hf-feature-main-card-wrap {
        animation: none;
        transform: translateY(var(--hf-feature-main-card-y));
      }

      .community-card.hf-feature-showcase-card {
        --community-card-panel-height: calc(380px * var(--hf-feature-card-projection-scale));
        --community-card-top-height: calc(54px * var(--hf-feature-card-projection-scale));
        --community-card-summary-min-height: calc(63px * var(--hf-feature-card-projection-scale));
        --community-card-embed-min-height: calc(176px * var(--hf-feature-card-projection-scale));
        flex: 0 0 auto;
        min-height: auto;
      }

      .hf-feature-showcase-card {
        width: 100%;
        min-height: auto;
        flex: none;
        transform-origin: center;
      }

      .hf-feature-showcase-card.community-card {
        min-height: auto;
        height: calc(426px * var(--hf-feature-card-projection-scale));
        padding: calc(14px * var(--hf-feature-card-projection-scale));
        border-radius: calc(24px * var(--hf-feature-card-projection-scale));
      }

      .hf-feature-showcase-card .community-card__top {
        gap: calc(11px * var(--hf-feature-card-projection-scale));
        padding-bottom: calc(14px * var(--hf-feature-card-projection-scale));
      }

      .hf-feature-showcase-card .community-card__avatar {
        width: calc(38px * var(--hf-feature-card-projection-scale));
        height: calc(38px * var(--hf-feature-card-projection-scale));
        flex-basis: calc(38px * var(--hf-feature-card-projection-scale));
        border-radius: 999px;
      }

      .hf-feature-showcase-card .community-card__repo {
        font-size: clamp(
          calc(1.06rem * var(--hf-feature-card-projection-scale)),
          calc(1.25vw * var(--hf-feature-card-projection-scale)),
          calc(1.26rem * var(--hf-feature-card-projection-scale))
        );
      }

      .hf-feature-showcase-card .community-card__tabs {
        gap: calc(18px * var(--hf-feature-card-projection-scale));
        min-height: calc(38px * var(--hf-feature-card-projection-scale));
        font-size: calc(0.82rem * var(--hf-feature-card-projection-scale));
      }

      .hf-feature-showcase-card .community-card__summary {
        display: -webkit-box;
        flex: 0 0 auto;
        min-height: var(--community-card-summary-min-height);
        height: var(--community-card-summary-min-height);
        max-height: calc(84px * var(--hf-feature-card-projection-scale));
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        padding: calc(10px * var(--hf-feature-card-projection-scale)) 0
          calc(12px * var(--hf-feature-card-projection-scale));
        font-size: calc(0.86rem * var(--hf-feature-card-projection-scale));
        line-height: 1.48;
      }

      .hf-feature-showcase-card .community-card__model {
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
      }

      .hf-feature-showcase-card .community-card__embed {
        flex: 1 1 var(--community-card-embed-min-height);
        min-height: var(--community-card-embed-min-height);
        height: auto;
        padding: calc(8px * var(--hf-feature-card-projection-scale));
        border-radius: calc(16px * var(--hf-feature-card-projection-scale));
        clip-path: inset(0 round calc(16px * var(--hf-feature-card-projection-scale)));
      }

      .hf-feature-showcase-card .community-card__embed .community-card__viewer {
        border-radius: calc(14px * var(--hf-feature-card-projection-scale));
        clip-path: inset(0 round calc(14px * var(--hf-feature-card-projection-scale)));
      }

      .hf-feature-showcase-card .community-card__embed[data-embed-style="summary-card"] .community-card__viewer {
        aspect-ratio: 1200 / 630;
        height: auto;
        max-height: 100%;
        object-fit: cover;
      }

      .hf-feature-showcase-card .community-card__actions {
        gap: calc(12px * var(--hf-feature-card-projection-scale));
        margin-top: calc(10px * var(--hf-feature-card-projection-scale));
      }

      .hf-feature-showcase-card .community-card__link {
        font-size: calc(0.78rem * var(--hf-feature-card-projection-scale));
      }

      .hf-feature-page.is-flying-card .hf-feature-showcase-card {
        transition: none;
      }

      .hf-feature-showcase-card .community-card__panel {
        height: var(--community-card-panel-height);
        min-height: 0;
        overflow: hidden;
      }

      .hf-feature-showcase-card .community-card__panel--model {
        flex: 1 1 auto;
        height: auto;
        min-height: 0;
        overflow: visible;
      }

      .hf-feature-showcase-card .community-card__summary {
        min-height: var(--community-card-summary-min-height);
      }

      .hf-feature-card-target {
        flex: 1 1 var(--community-card-embed-min-height);
        width: 100%;
        min-height: var(--community-card-embed-min-height);
      }

      .hf-feature-card-target.is-flying-destination .community-card__viewer {
        visibility: hidden;
      }

      .hf-feature-granularity .viewer-granularity__slider {
        width: clamp(132px, 16vw, 188px);
        height: 28px;
        cursor: pointer;
        touch-action: none;
      }

      .hf-feature-card-target.is-loading {
        position: relative;
      }

      .hf-feature-card-target.is-loading::after {
        content: "Loading card...";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: #64748b;
        font-size: 0.82rem;
        font-weight: 700;
        background: rgba(248, 250, 252, 0.82);
      }

      .hf-feature-backdrop-card {
        --x: 0px;
        --y: 0px;
        --z: -260px;
        --rot-y: 0deg;
        --rot-z: 0deg;
        --scale: 0.72;
        --opacity: 1;
        --reflection-stack: 1;
        --reflection-brightness: 0.74;
        --reflection-y-offset: 4px;
        --reflection-local-top: 404px;
        --reflection-gap: 0px;
        --reflection-height: 178px;
        --reflection-spread: 32px;
        --reflection-clip-left: 0%;
        --reflection-clip-right: 0%;
        --reflection-scale-y: -0.42;
        --reflection-blur-boost: 8.8px;
        --brightness: 0.82;
        --saturate: 0.84;
        --card-bg-top: #10233b;
        --card-bg-bottom: #09182b;
        --ambient-wash: rgba(86, 132, 196, 0.16);
        --ambient-edge: rgba(5, 12, 28, 0.4);
        --floor-wash: #081323;
        --veil-top: 0.1;
        --veil-mid: 0.24;
        --veil-bottom: 0.62;
        --blur: 0.6px;
        --delay: 0ms;
        --stack: 2;
        position: absolute;
        left: 50%;
        top: 54px;
        width: var(--card-width, 206px);
        height: var(--card-height, 404px);
        min-height: var(--card-height, 404px);
        display: flex;
        flex-direction: column;
        box-sizing: border-box;
        padding: 15px;
        border: 1px solid rgba(130, 167, 211, 0.28);
        border-radius: 19px;
        background:
          radial-gradient(circle at 50% 8%, var(--ambient-wash), transparent 42%),
          linear-gradient(180deg, var(--card-bg-top), var(--card-bg-bottom));
        color: rgba(231, 242, 255, 0.84);
        box-shadow:
          0 26px 80px rgba(0, 0, 0, 0.42),
          inset 0 1px 0 rgba(255, 255, 255, 0.09);
        opacity: var(--opacity);
        filter: blur(var(--blur)) saturate(var(--saturate)) brightness(var(--brightness));
        transform:
          translateX(-50%)
          translate3d(var(--x), var(--y), var(--z))
          rotateY(var(--rot-y))
          rotateZ(var(--rot-z))
          scale(var(--scale-x, var(--scale)), var(--scale-y, var(--scale)));
        transform-origin: center;
        transform-style: preserve-3d;
        overflow: hidden;
        animation: hf-feature-backdrop-card-enter 1050ms cubic-bezier(0.18, 0.84, 0.23, 1) var(--delay) both;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card,
      .hf-feature-page.is-feature-all .hf-feature-backdrop-reflection {
        --hf-feature-all-cycle-duration: var(--hf-feature-all-cycle-duration-active, 490ms);
        --hf-feature-all-cycle-easing: var(--hf-feature-all-cycle-easing-active, cubic-bezier(0.25, 0.8, 0.25, 1));
        animation: none;
        transition:
          filter var(--hf-feature-all-cycle-duration) var(--hf-feature-all-cycle-easing),
          width var(--hf-feature-all-cycle-duration) var(--hf-feature-all-cycle-easing),
          height var(--hf-feature-all-cycle-duration) var(--hf-feature-all-cycle-easing),
          opacity var(--hf-feature-all-cycle-duration) var(--hf-feature-all-cycle-easing),
          transform var(--hf-feature-all-cycle-duration) var(--hf-feature-all-cycle-easing),
          box-shadow var(--hf-feature-all-cycle-duration) var(--hf-feature-all-cycle-easing),
          border-color var(--hf-feature-all-cycle-duration) var(--hf-feature-all-cycle-easing);
      }

      .hf-feature-page.is-feature-all.is-feature-all-folding .hf-feature-backdrop-card {
        animation: hf-feature-backdrop-card-enter 1050ms cubic-bezier(0.18, 0.84, 0.23, 1) var(--delay) both;
        transition: none;
      }

      .hf-feature-page.is-feature-all.is-feature-all-folding .hf-feature-backdrop-reflection {
        animation: hf-feature-backdrop-reflection-enter 1120ms cubic-bezier(0.18, 0.84, 0.23, 1) var(--delay) both;
        transition: none;
      }

      .hf-feature-page.is-returning-dashboard .hf-feature-backdrop-card {
        animation: hf-feature-backdrop-card-exit 680ms cubic-bezier(0.32, 0, 0.42, 1) calc(156ms - var(--delay)) both;
        transition: none;
      }

      .hf-feature-page.is-returning-dashboard .hf-feature-backdrop-reflection {
        animation: hf-feature-backdrop-reflection-exit 700ms cubic-bezier(0.32, 0, 0.42, 1) calc(156ms - var(--delay)) both;
        transition: none;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__top,
      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__avatar,
      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__repo,
      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__tabs,
      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__summary,
      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__embed,
      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__actions {
        transition: none;
      }

      .hf-feature-page.is-feature-all .hf-feature-main-card-wrap {
        visibility: hidden;
        pointer-events: none;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-cards {
        pointer-events: auto;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card:not(.hf-feature-backdrop-card--center),
      .hf-feature-page.is-feature-all .hf-feature-backdrop-reflection {
        pointer-events: none;
        --reflection-z-offset: 0px;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-reflection {
        clip-path: inset(0 round 19px);
        -webkit-mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.48) 14%,
            rgba(0, 0, 0, 0.22) 36%,
            rgba(0, 0, 0, 0.06) 62%,
            transparent 92%
          );
        mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.48) 14%,
            rgba(0, 0, 0, 0.22) 36%,
            rgba(0, 0, 0, 0.06) 62%,
            transparent 92%
          );
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card--center:not(.hf-feature-backdrop-card--reflection-inner) {
        cursor: pointer;
        pointer-events: auto;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card {
        padding: 17px;
        border-radius: 25px;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__top {
        gap: 12px;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__avatar {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 999px;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__repo {
        font-size: 1.12rem;
        letter-spacing: -0.03em;
        line-height: 1.05;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__tabs {
        gap: 20px;
        padding-top: 16px;
        font-size: 0.74rem;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__summary {
        margin-top: 16px;
        font-size: 0.94rem;
        line-height: 1.42;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__embed {
        margin-top: 16px;
        padding: 10px;
        border-radius: 17px;
        overflow: visible;
        clip-path: none;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-card__actions {
        padding-top: 13px;
        font-size: 0.78rem;
      }

      .hf-feature-backdrop-card--center {
        padding: 17px;
        border-radius: 25px;
        border-color: rgba(226, 232, 240, 0.98);
        box-shadow:
          0 32px 92px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.98);
      }

      .hf-feature-backdrop-card--center .hf-feature-backdrop-card__top {
        gap: 12px;
      }

      .hf-feature-backdrop-card--center .hf-feature-backdrop-card__avatar {
        width: 42px;
        height: 42px;
        flex-basis: 42px;
        border-radius: 999px;
      }

      .hf-feature-backdrop-card--center .hf-feature-backdrop-card__repo {
        font-size: 1.12rem;
        letter-spacing: -0.03em;
        line-height: 1.05;
      }

      .hf-feature-backdrop-card--center .hf-feature-backdrop-card__tabs {
        gap: 20px;
        padding-top: 16px;
        font-size: 0.74rem;
      }

      .hf-feature-backdrop-card--center .hf-feature-backdrop-card__summary {
        margin-top: 16px;
        font-size: 0.94rem;
        line-height: 1.42;
      }

      .hf-feature-backdrop-card--center .hf-feature-backdrop-card__embed {
        margin-top: 16px;
        padding: 10px;
        border-radius: 17px;
      }

      .hf-feature-backdrop-card--center .hf-feature-backdrop-card__actions {
        padding-top: 13px;
        font-size: 0.78rem;
      }

      .hf-feature-backdrop-card--user {
        border-color: rgba(226, 232, 240, 0.86);
        background:
          radial-gradient(circle at 50% 0%, rgba(136, 215, 255, 0.08), transparent 48%),
          linear-gradient(180deg, #ffffff, #f4f8fc);
        color: #172033;
        box-shadow:
          0 24px 76px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.96);
      }

      .hf-feature-backdrop-card--user::after {
        background:
          linear-gradient(110deg, rgba(255, 255, 255, 0.48), transparent 30%, transparent 72%, rgba(136, 215, 255, 0.1)),
          radial-gradient(ellipse at 50% 48%, transparent 42%, rgba(226, 232, 240, 0.42) 100%);
      }

      .hf-feature-backdrop-card--user .hf-feature-backdrop-card__top {
        border-bottom-color: rgba(148, 163, 184, 0.22);
      }

      .hf-feature-backdrop-card--user .hf-feature-backdrop-card__avatar {
        background: #eef2f7;
        box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
      }

      .hf-feature-backdrop-card--user .hf-feature-backdrop-card__repo {
        color: #172033;
      }

      .hf-feature-backdrop-card--user .hf-feature-backdrop-card__tabs {
        color: #6b7280;
      }

      .hf-feature-backdrop-card--user .hf-feature-backdrop-card__tabs span:first-child {
        color: #1f2937;
      }

      .hf-feature-backdrop-card--user .hf-feature-backdrop-card__summary {
        color: #4b5563;
      }

      .hf-feature-backdrop-card--user .hf-feature-backdrop-card__embed {
        border-color: rgba(226, 232, 240, 0.9);
        background:
          radial-gradient(circle at 50% 0%, rgba(136, 215, 255, 0.1), transparent 52%),
          linear-gradient(180deg, #f8fafc, #eef2f7);
      }

      .hf-feature-backdrop-card--user .hf-feature-backdrop-card__actions {
        color: #334155;
      }

      .hf-feature-backdrop-card:not(.hf-feature-backdrop-card--reflection-inner) {
        z-index: var(--stack);
      }

      .hf-feature-backdrop-card::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
          linear-gradient(110deg, rgba(255, 255, 255, 0.13), transparent 28%, transparent 72%, rgba(136, 215, 255, 0.08)),
          radial-gradient(ellipse at 50% 48%, transparent 18%, var(--ambient-edge) 88%),
          linear-gradient(
            180deg,
            rgba(7, 16, 33, var(--veil-top)) 0%,
            rgba(8, 23, 37, var(--veil-mid)) 54%,
            rgba(4, 12, 27, var(--veil-bottom)) 100%
          );
        pointer-events: none;
      }

      .hf-feature-backdrop-card.hf-feature-backdrop-card--user::after {
        background:
          linear-gradient(110deg, rgba(255, 255, 255, 0.48), transparent 30%, transparent 72%, rgba(136, 215, 255, 0.1)),
          radial-gradient(ellipse at 50% 48%, transparent 42%, rgba(226, 232, 240, 0.42) 100%);
      }

      .hf-feature-page.is-feature-all
        .hf-feature-backdrop-card.hf-feature-backdrop-card--center:not(.hf-feature-backdrop-card--reflection-inner)::after {
        opacity: 0;
      }

      .hf-feature-page.is-feature-all
        .hf-feature-backdrop-card.hf-feature-backdrop-card--center:not(.hf-feature-backdrop-card--reflection-inner)
        :is(
          .hf-feature-backdrop-card__top,
          .hf-feature-backdrop-card__avatar,
          .hf-feature-backdrop-card__repo,
          .hf-feature-backdrop-card__tabs,
          .hf-feature-backdrop-card__summary,
          .hf-feature-backdrop-card__embed,
          .hf-feature-backdrop-card__actions
        ) {
        opacity: 1;
        filter: none;
      }

      .hf-feature-backdrop-reflection {
        position: absolute;
        left: 50%;
        top: calc(54px + var(--reflection-local-top) + var(--reflection-gap));
        z-index: var(--reflection-stack);
        width: calc(var(--card-width, 206px) + var(--reflection-spread));
        height: var(--reflection-height);
        overflow: hidden;
        border-radius: 19px;
        pointer-events: none;
        opacity: 0.76;
        filter: blur(calc(var(--blur) + var(--reflection-blur-boost))) saturate(0.48) brightness(var(--reflection-brightness)) contrast(0.68);
        mix-blend-mode: screen;
        clip-path: inset(0 var(--reflection-clip-right) 0 var(--reflection-clip-left) round 19px);
        -webkit-mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.76) 0%,
            rgba(0, 0, 0, 0.48) 14%,
            rgba(0, 0, 0, 0.22) 36%,
            rgba(0, 0, 0, 0.06) 62%,
            transparent 92%
          ),
          linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.76) 0%,
            rgba(0, 0, 0, 0.48) 14%,
            rgba(0, 0, 0, 0.22) 36%,
            rgba(0, 0, 0, 0.06) 62%,
            transparent 92%
          ),
          linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
        mask-composite: intersect;
        transform:
          translateX(-50%)
          translate3d(var(--x), var(--y), calc(var(--z) + var(--reflection-z-offset, -24px)))
          rotateY(var(--rot-y))
          rotateZ(var(--rot-z))
          scale(var(--scale-x, var(--scale)), var(--scale-y, var(--scale)));
        transform-origin: center top;
        animation: hf-feature-backdrop-reflection-enter 1120ms cubic-bezier(0.18, 0.84, 0.23, 1) var(--delay) both;
      }

      .hf-feature-backdrop-reflection::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background:
          linear-gradient(
            180deg,
            transparent 0%,
            color-mix(in srgb, var(--floor-wash) 30%, transparent) 42%,
            color-mix(in srgb, var(--floor-wash) 72%, transparent) 76%,
            var(--floor-wash) 100%
          );
        opacity: 0.28;
        pointer-events: none;
      }

      .hf-feature-backdrop-reflection .hf-feature-backdrop-card--reflection-inner {
        position: absolute;
        top: auto;
        right: calc(var(--reflection-spread) / 2);
        bottom: 100%;
        left: calc(var(--reflection-spread) / 2);
        z-index: auto;
        width: auto;
        opacity: 1;
        border-color: rgba(154, 198, 247, 0.12);
        box-shadow: none;
        filter: none;
        mix-blend-mode: normal;
        clip-path: none;
        mask-image: none;
        -webkit-mask-image: none;
        transform: translateY(-1px) scaleY(-1);
        transform-origin: center bottom;
        animation: none;
      }

      .hf-feature-backdrop-reflection--user {
        opacity: 0.5;
        mix-blend-mode: screen;
        /* the user cards are WHITE - blurred they reflect as a uniform milky
           slab whose box edges read as sharp cutoffs. Fade faster vertically
           and wider at the sides so only the contact glow survives. */
        -webkit-mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 16%,
            rgba(0, 0, 0, 0.12) 36%,
            rgba(0, 0, 0, 0.03) 56%,
            transparent 78%
          ),
          linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
        -webkit-mask-composite: source-in;
        mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.3) 16%,
            rgba(0, 0, 0, 0.12) 36%,
            rgba(0, 0, 0, 0.03) 56%,
            transparent 78%
          ),
          linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
        mask-composite: intersect;
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-reflection--user {
        clip-path: inset(0 round 19px);
        -webkit-mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.36) 16%,
            rgba(0, 0, 0, 0.14) 38%,
            rgba(0, 0, 0, 0.035) 58%,
            transparent 80%
          );
        mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.68) 0%,
            rgba(0, 0, 0, 0.36) 16%,
            rgba(0, 0, 0, 0.14) 38%,
            rgba(0, 0, 0, 0.035) 58%,
            transparent 80%
          );
      }

      .hf-feature-backdrop-reflection--user .hf-feature-backdrop-card--reflection-inner {
        border-color: rgba(226, 232, 240, 0.14);
        background:
          radial-gradient(circle at 50% 0%, rgba(211, 231, 255, 0.1), transparent 48%),
          linear-gradient(180deg, rgba(255, 255, 255, 0.4), rgba(203, 213, 225, 0.1));
      }

      .hf-feature-backdrop-reflection--center {
        border-radius: 32px;
        opacity: 0.84;
        clip-path: inset(0 round 32px);
      }

      .hf-feature-page.is-feature-all .hf-feature-backdrop-reflection--center {
        border-radius: 32px;
        clip-path: inset(0 round 32px);
        opacity: 0.84;
        -webkit-mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.5) 14%,
            rgba(0, 0, 0, 0.23) 36%,
            rgba(0, 0, 0, 0.065) 62%,
            transparent 92%
          );
        mask-image:
          linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.8) 0%,
            rgba(0, 0, 0, 0.5) 14%,
            rgba(0, 0, 0, 0.23) 36%,
            rgba(0, 0, 0, 0.065) 62%,
            transparent 92%
          );
      }

      .hf-feature-backdrop-reflection--center .hf-feature-backdrop-card--reflection-inner {
        border-radius: 25px;
        clip-path: inset(0 round 25px);
      }

      .hf-feature-backdrop-card__top {
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding-bottom: 12px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.12);
      }

      .hf-feature-backdrop-card__avatar {
        width: 22px;
        height: 22px;
        flex: 0 0 22px;
        border-radius: 999px;
        object-fit: cover;
        background: rgba(226, 232, 240, 0.18);
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1);
      }

      .hf-feature-backdrop-card__repo {
        display: -webkit-box;
        min-width: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: rgba(241, 246, 255, 0.78);
        font-size: 0.86rem;
        font-weight: 780;
        line-height: 1.12;
        overflow-wrap: anywhere;
      }

      .hf-feature-backdrop-card__owner {
        color: rgba(171, 189, 218, 0.58);
      }

      .hf-feature-backdrop-card__tabs {
        display: flex;
        flex: 0 0 auto;
        gap: 12px;
        padding: 14px 0 10px;
        border-bottom: 1px solid rgba(226, 232, 240, 0.1);
        color: rgba(203, 213, 225, 0.58);
        font-size: 0.58rem;
        font-weight: 800;
      }

      .hf-feature-backdrop-card__tabs span:first-child {
        position: relative;
        color: rgba(255, 255, 255, 0.78);
      }

      .hf-feature-backdrop-card__tabs span:first-child::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: -11px;
        height: 2px;
        border-radius: 999px;
        background: #f7b627;
      }

      .hf-feature-backdrop-card__embed {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        justify-content: center;
        min-height: 0;
        height: auto;
        margin-top: 10px;
        padding: 8px;
        overflow: hidden;
        border: 1px solid rgba(136, 215, 255, 0.12);
        border-radius: 14px;
        background:
          radial-gradient(circle at 50% 8%, rgba(136, 215, 255, 0.12), transparent 48%),
          rgba(0, 0, 0, 0.24);
        clip-path: inset(0 round 14px);
      }

      .hf-feature-backdrop-card__viewer {
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        border-radius: 10px;
        clip-path: inset(0 round 10px);
        object-fit: contain;
        filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.36));
      }

      .hf-feature-backdrop-card__embed[data-embed-style="summary-card"] {
        border-radius: 16px;
        clip-path: inset(0 round 16px);
      }

      .hf-feature-backdrop-card__embed[data-embed-style="summary-card"] .hf-feature-backdrop-card__viewer {
        aspect-ratio: 1200 / 630;
        height: auto;
        max-height: 100%;
        border-radius: 14px;
        clip-path: inset(0 round 14px);
        object-fit: cover;
      }

      .hf-feature-backdrop-card__summary {
        display: -webkit-box;
        flex: 0 0 auto;
        min-height: 0;
        max-height: 68px;
        margin: 12px 0 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        color: rgba(203, 213, 225, 0.62);
        font-size: 0.72rem;
        line-height: 1.55;
      }

      .hf-feature-backdrop-card__actions {
        display: flex;
        flex: 0 0 auto;
        justify-content: space-between;
        gap: 8px;
        margin-top: 12px;
        color: rgba(235, 248, 255, 0.72);
        font-size: 0.58rem;
        font-weight: 850;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .hf-feature-controls {
        --hf-feature-controls-offset: 8px;
        position: relative;
        z-index: 12;
        display: grid;
        gap: 12px;
        justify-self: center;
        width: min(390px, 100%);
        margin-top: var(--hf-feature-controls-offset);
        margin-left: 0;
        padding: 14px;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 22px;
        background:
          radial-gradient(circle at 12% 0%, rgba(255, 214, 91, 0.13), transparent 40%),
          rgba(4, 9, 17, 0.72);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.24);
      }

      .hf-feature-cycle-btn {
        position: absolute;
        top: 50%;
        z-index: 14;
        display: grid;
        width: 46px;
        height: 46px;
        place-items: center;
        border: 1px solid rgba(184, 218, 255, 0.24);
        border-radius: 999px;
        background:
          radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.2), transparent 54%),
          rgba(9, 18, 34, 0.62);
        color: #f8fbff;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.28);
        cursor: pointer;
        transform: translateY(-50%);
        transition:
          background 180ms ease,
          border-color 180ms ease,
          opacity 180ms ease,
          transform 180ms ease;
      }

      .hf-feature-cycle-btn[hidden] {
        display: none;
      }

      .hf-feature-cycle-btn:hover,
      .hf-feature-cycle-btn:focus-visible {
        border-color: rgba(184, 218, 255, 0.42);
        background:
          radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.28), transparent 54%),
          rgba(16, 30, 52, 0.78);
        outline: none;
        transform: translateY(-50%) scale(1.04);
      }

      .hf-feature-cycle-btn span {
        display: block;
        font-size: 2.15rem;
        font-weight: 760;
        line-height: 0.7;
        transform: translateY(-1px);
      }

      .hf-feature-cycle-btn--prev {
        left: clamp(18px, 4vw, 70px);
      }

      .hf-feature-cycle-btn--next {
        right: clamp(18px, 4vw, 70px);
      }

      .hf-feature-animated {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px 16px;
      }

      .hf-feature-animated[hidden] {
        display: none;
      }

      .hf-feature-animated__toggle {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        color: rgba(220, 228, 242, 0.9);
        font-size: 0.9rem;
        cursor: pointer;
        user-select: none;
      }

      .hf-feature-focus {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 220px;
        min-width: 200px;
        transition: opacity 140ms ease;
      }

      .hf-feature-focus.is-disabled {
        opacity: 0.38;
        pointer-events: none;
      }

      .hf-feature-focus__shell {
        position: relative;
        flex: 1 1 auto;
      }

      .hf-feature-focus__shell input {
        width: 100%;
        box-sizing: border-box;
        padding: 7px 10px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.3);
        color: #f5f8ff;
        font: inherit;
        font-size: 0.88rem;
        outline: none;
      }

      .hf-feature-focus__shell input:focus {
        border-color: rgba(136, 215, 255, 0.45);
      }

      .hf-feature-focus__search {
        position: absolute;
        z-index: 40;
        top: calc(100% + 6px);
        left: 0;
        right: 0;
        max-height: 230px;
        overflow-y: auto;
        padding: 6px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 12px;
        background: #0b1220;
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
      }

      .hf-feature-focus__item {
        display: block;
        width: 100%;
        padding: 7px 9px;
        border: 0;
        border-radius: 8px;
        background: transparent;
        color: #dce4f2;
        font: inherit;
        font-size: 0.86rem;
        text-align: left;
        cursor: pointer;
      }

      .hf-feature-focus__item:hover,
      .hf-feature-focus__item:focus {
        background: rgba(136, 215, 255, 0.12);
      }

      .hf-feature-focus__hint {
        margin-left: 8px;
        color: rgba(197, 208, 227, 0.5);
        font-size: 0.76rem;
      }

      .hf-feature-granularity.is-dimmed {
        opacity: 0.38;
        pointer-events: none;
      }

      .hf-feature-granularity {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: 10px;
        min-width: 0;
        color: rgba(235, 248, 255, 0.88);
      }

      .hf-feature-granularity[hidden] {
        display: none;
      }

      .hf-feature-style {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        min-width: 0;
        margin: 0;
        padding: 0;
        border: 0;
      }

      .hf-feature-style label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 42px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        color: rgba(235, 248, 255, 0.76);
        font-size: 0.86rem;
        font-weight: 760;
        cursor: pointer;
      }

      .hf-feature-style label:has(input:checked) {
        border-color: rgba(255, 214, 91, 0.42);
        background: rgba(255, 214, 91, 0.14);
        color: #fff4c2;
      }

      .hf-feature-style input {
        width: 14px;
        height: 14px;
        accent-color: #ffd65b;
      }

      .hf-feature-tune-panel {
        position: fixed;
        right: 16px;
        bottom: 66px;
        z-index: 2147483000;
        display: grid;
        gap: 12px;
        width: min(360px, calc(100vw - 32px));
        max-height: min(720px, calc(100dvh - 32px));
        padding: 14px;
        overflow: auto;
        border: 1px solid rgba(136, 215, 255, 0.22);
        border-radius: 22px;
        background:
          radial-gradient(circle at 14% 0%, rgba(255, 214, 91, 0.12), transparent 38%),
          linear-gradient(180deg, rgba(8, 18, 32, 0.96), rgba(3, 8, 17, 0.94));
        color: rgba(235, 248, 255, 0.9);
        box-shadow:
          0 24px 80px rgba(0, 0, 0, 0.46),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(18px);
      }

      .hf-feature-tune-panel[hidden] {
        display: none;
      }

      .hf-feature-tune-toggle {
        position: fixed;
        top: 16px;
        right: 392px;
        z-index: 2147483001;
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid rgba(136, 215, 255, 0.24);
        border-radius: 999px;
        background:
          radial-gradient(circle at 14% 0%, rgba(156, 255, 99, 0.16), transparent 46%),
          rgba(5, 14, 25, 0.92);
        color: rgba(235, 248, 255, 0.9);
        font: inherit;
        font-size: 0.74rem;
        font-weight: 820;
        cursor: pointer;
        box-shadow:
          0 14px 42px rgba(0, 0, 0, 0.42),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px);
      }

      .hf-feature-tune-toggle[aria-expanded="false"] {
        right: 16px;
      }

      .hf-feature-tune-toggle[hidden] {
        display: none;
      }

      @media (max-width: 820px) {
        .hf-feature-tune-toggle {
          right: 16px;
        }
      }

      .hf-feature-tune-panel__head {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 12px;
      }

      .hf-feature-tune-panel__head strong {
        display: block;
        color: #fff;
        font-size: 0.94rem;
        letter-spacing: -0.02em;
      }

      .hf-feature-tune-panel__head span {
        display: block;
        margin-top: 3px;
        color: rgba(197, 208, 227, 0.58);
        font-size: 0.72rem;
        line-height: 1.35;
      }

      .hf-feature-tune-panel__actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: end;
        gap: 8px;
      }

      .hf-feature-tune-panel__actions button {
        min-height: 30px;
        padding: 0 10px;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.08);
        color: rgba(235, 248, 255, 0.86);
        font: inherit;
        font-size: 0.72rem;
        font-weight: 780;
        cursor: pointer;
      }

      .hf-feature-tune-panel__fields {
        display: grid;
        gap: 10px;
      }

      .hf-feature-tune-control {
        display: grid;
        gap: 6px;
        padding: 10px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.035);
      }

      .hf-feature-tune-control__top,
      .hf-feature-tune-control__row {
        display: grid;
        align-items: center;
        gap: 8px;
      }

      .hf-feature-tune-control__top {
        grid-template-columns: minmax(0, 1fr) auto auto;
      }

      .hf-feature-tune-control__row {
        grid-template-columns: minmax(0, 1fr) 78px;
      }

      .hf-feature-tune-control__top label {
        color: rgba(235, 248, 255, 0.86);
        font-size: 0.78rem;
        font-weight: 760;
      }

      .hf-feature-tune-control__value {
        color: #fff4c2;
        font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
        font-size: 0.72rem;
      }

      .hf-feature-tune-control__reset {
        min-height: 26px;
        padding: 0 8px;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.07);
        color: rgba(235, 248, 255, 0.78);
        font: inherit;
        font-size: 0.68rem;
        font-weight: 780;
        cursor: pointer;
      }

      .hf-feature-tune-control__reset:disabled {
        cursor: default;
        opacity: 0.44;
      }

      .hf-feature-tune-control input[type="range"] {
        width: 100%;
        accent-color: var(--lime);
      }

      .hf-feature-tune-control input[type="number"] {
        width: 100%;
        min-height: 30px;
        padding: 0 8px;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.22);
        color: #fff;
        font: inherit;
        font-size: 0.76rem;
      }

      .hf-feature-tune-panel__hint {
        margin: 0;
        color: rgba(197, 208, 227, 0.52);
        font-size: 0.72rem;
        line-height: 1.38;
      }

      .hf-feature-action-pane {
        position: relative;
        display: grid;
        align-content: start;
        gap: 18px;
        justify-self: start;
        min-width: 0;
        width: min(100%, 390px);
        padding: clamp(20px, 2.4vw, 28px);
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 34px;
        background:
          radial-gradient(circle at 10% 0%, rgba(156, 255, 99, 0.14), transparent 30%),
          radial-gradient(circle at 86% 0%, rgba(136, 215, 255, 0.11), transparent 36%),
          linear-gradient(180deg, rgba(10, 21, 36, 0.82), rgba(4, 10, 20, 0.9));
        backdrop-filter: blur(20px);
        box-shadow:
          0 36px 110px rgba(0, 0, 0, 0.42),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
        overflow: hidden;
      }

      .hf-feature-action-pane::before {
        content: "";
        position: absolute;
        inset: 1px;
        border-radius: 33px;
        background:
          linear-gradient(135deg, rgba(255, 255, 255, 0.07), transparent 28%, transparent 72%, rgba(136, 215, 255, 0.04));
        pointer-events: none;
      }

      .hf-feature-back {
        position: relative;
        z-index: 1;
        justify-self: start;
        min-height: 40px;
        padding: 0 14px;
        border: 1px solid rgba(197, 208, 227, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        color: rgba(197, 208, 227, 0.72);
        font: inherit;
        font-size: 0.86rem;
        font-weight: 720;
        cursor: pointer;
      }

      .hf-feature-action-copy {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 16px;
        transition: gap 260ms ease;
      }

      .hf-feature-action-copy .eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 38px;
        padding: 0 18px;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        color: rgba(235, 248, 255, 0.84);
        letter-spacing: 0.2em;
      }

      .hf-feature-action-copy .eyebrow::before {
        content: "";
        width: 11px;
        height: 11px;
        border-radius: 999px;
        background: #9cff63;
        box-shadow:
          0 0 0 5px rgba(156, 255, 99, 0.12),
          0 0 22px rgba(156, 255, 99, 0.7);
      }

      .hf-feature-action-copy h2 {
        margin: 0;
        color: #ffffff;
        max-width: 390px;
        font-size: clamp(3.1rem, 4.1vw, 5rem);
        line-height: 0.86;
        letter-spacing: -0.095em;
        text-shadow:
          0 1px 0 rgba(255, 255, 255, 0.36),
          0 24px 46px rgba(0, 0, 0, 0.35);
      }

      .hf-feature-action-copy h2 span {
        display: block;
      }

      .hf-feature-action-copy p,
      .hf-feature-manual-panel p,
      .hf-feature-readme-preview p,
      .hf-feature-feedback {
        margin: 0;
        color: rgba(197, 208, 227, 0.74);
        font-size: 1rem;
        line-height: 1.65;
      }

      .hf-feature-action-copy p a {
        color: rgba(224, 247, 255, 0.96);
        font-weight: 760;
        text-decoration-color: rgba(136, 215, 255, 0.46);
        text-underline-offset: 0.18em;
      }

      .hf-feature-action-copy p a:hover,
      .hf-feature-action-copy p a:focus-visible {
        color: #ffffff;
        text-decoration-color: rgba(156, 255, 99, 0.72);
      }

      .hf-feature-action-copy p {
        max-height: 8rem;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        transition:
          max-height 280ms cubic-bezier(0.2, 0.78, 0.2, 1),
          opacity 180ms ease,
          transform 240ms ease;
      }

      .hf-feature-action-pane.is-manual-open .hf-feature-action-copy {
        gap: 10px;
      }

      .hf-feature-action-pane.is-manual-open .hf-feature-action-copy p,
      #hf-feature-action-description.is-manual-collapsed {
        max-height: 0;
        opacity: 0;
        transform: translateY(-6px);
        pointer-events: none;
      }

      .hf-feature-action-grid {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px;
        transition: gap 260ms cubic-bezier(0.2, 0.78, 0.2, 1);
      }

      .hf-feature-action {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        min-height: 50px;
        padding: 0 18px;
        border: 1px solid rgba(136, 215, 255, 0.2);
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.08);
        color: #dff7ff;
        font: inherit;
        font-weight: 780;
        text-decoration: none;
        cursor: pointer;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transform: translateY(0) scale(1);
        transition:
          transform 160ms cubic-bezier(0.2, 0.78, 0.2, 1),
          border-color 160ms ease,
          background 160ms ease,
          box-shadow 160ms ease,
          color 160ms ease;
      }

      .hf-feature-action-label {
        min-width: 0;
      }

      .hf-feature-action--primary {
        border-color: rgba(156, 255, 99, 0.34);
        background: linear-gradient(135deg, var(--lime), #baff82);
        color: var(--ink);
        box-shadow:
          0 14px 34px rgba(156, 255, 99, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.48);
      }

      .hf-feature-action--manual {
        border-color: rgba(255, 214, 91, 0.34);
        background: rgba(255, 214, 91, 0.08);
        color: #fff4c2;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }

      #hf-feature-manual-btn {
        max-width: 320px;
        max-height: 58px;
        overflow: hidden;
        white-space: nowrap;
        transition:
          max-width 300ms cubic-bezier(0.2, 0.78, 0.2, 1),
          max-height 300ms cubic-bezier(0.2, 0.78, 0.2, 1),
          min-height 300ms cubic-bezier(0.2, 0.78, 0.2, 1),
          padding 300ms cubic-bezier(0.2, 0.78, 0.2, 1),
          border-width 220ms ease,
          border-color 180ms ease,
          background 180ms ease,
          box-shadow 180ms ease,
          color 180ms ease,
          opacity 180ms ease,
          transform 220ms cubic-bezier(0.2, 0.78, 0.2, 1);
      }

      .hf-feature-action-pane.is-manual-open .hf-feature-action-grid {
        gap: 12px;
      }

      .hf-feature-action-pane.is-manual-open #hf-feature-manual-btn {
        max-width: 0;
        max-height: 0;
        min-height: 0;
        padding: 0;
        border-width: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        opacity: 0;
        transform: translateY(-6px) scale(0.96);
        pointer-events: none;
      }

      .hf-feature-action-pane.is-manual-open #hf-feature-auto-btn {
        margin-top: 10px;
      }

      .hf-feature-action--copy {
        border-color: rgba(136, 215, 255, 0.28);
        background: rgba(136, 215, 255, 0.1);
        color: #e7fbff;
      }

      .hf-feature-action:hover:not(:disabled),
      .hf-feature-action:focus-visible:not(:disabled) {
        transform: translateY(-1px) scale(1.01);
        border-color: rgba(224, 247, 255, 0.45);
        box-shadow:
          0 13px 28px rgba(0, 0, 0, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.22);
        outline: none;
      }

      .hf-feature-action--primary:hover:not(:disabled),
      .hf-feature-action--primary:focus-visible:not(:disabled) {
        border-color: rgba(231, 255, 199, 0.72);
        background: linear-gradient(135deg, #b9ff7a, #ddffbc);
        box-shadow:
          0 18px 38px rgba(156, 255, 99, 0.26),
          inset 0 1px 0 rgba(255, 255, 255, 0.56);
      }

      .hf-feature-action--manual:hover:not(:disabled),
      .hf-feature-action--manual:focus-visible:not(:disabled) {
        border-color: rgba(255, 230, 137, 0.58);
        background: rgba(255, 214, 91, 0.14);
        color: #fff8d9;
      }

      .hf-feature-action--copy:hover:not(:disabled),
      .hf-feature-action--copy:focus-visible:not(:disabled) {
        border-color: rgba(136, 215, 255, 0.54);
        background: rgba(136, 215, 255, 0.16);
        color: #ffffff;
      }

      .hf-feature-action:active:not(:disabled) {
        transform: translateY(1px) scale(0.985);
        box-shadow:
          0 7px 16px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.14);
      }

      .hf-feature-action:disabled {
        cursor: wait;
        opacity: 0.62;
      }

      .hf-feature-action[hidden] {
        display: none !important;
      }

      .hf-feature-action.is-loading::after {
        content: "";
        width: 0.9em;
        height: 0.9em;
        border: 2px solid currentColor;
        border-right-color: transparent;
        border-radius: 999px;
        animation: hf-feature-spin 760ms linear infinite;
      }

      .hf-feature-manual-panel,
      .hf-feature-readme-preview {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 12px;
        min-width: 0;
        padding: 16px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.04);
        animation: hf-feature-panel-in 260ms ease both;
      }

      .hf-feature-manual-panel {
        flex: 1 0 100%;
        width: 100%;
        grid-column: 1 / -1;
        max-height: 760px;
        overflow: hidden;
        opacity: 1;
        transform-origin: top left;
        transition:
          max-height 320ms cubic-bezier(0.2, 0.78, 0.2, 1),
          opacity 220ms ease,
          transform 280ms cubic-bezier(0.2, 0.78, 0.2, 1),
          padding 280ms cubic-bezier(0.2, 0.78, 0.2, 1),
          border-color 220ms ease,
          background 220ms ease;
      }

      .hf-feature-manual-panel.is-collapsing {
        display: grid;
        max-height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-color: transparent;
        background: transparent;
        opacity: 0;
        transform: translateY(-8px) scaleY(0.98);
        pointer-events: none;
      }

      .hf-feature-manual-panel[hidden]:not(.is-collapsing),
      .hf-feature-readme-preview[hidden] {
        display: none;
      }

      .hf-feature-panel-head,
      .hf-feature-preview-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        min-width: 0;
      }

      .hf-feature-panel-head h3,
      .hf-feature-preview-head h3 {
        margin: 0;
        color: var(--text);
        font-size: 1rem;
      }

      .hf-feature-panel-head a {
        color: #fff4c2;
        font-size: 0.84rem;
        font-weight: 760;
        white-space: nowrap;
      }

      .hf-feature-manual-close {
        min-height: 30px;
        padding: 0 11px;
        border: 1px solid rgba(197, 208, 227, 0.14);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.055);
        color: rgba(235, 248, 255, 0.78);
        font: inherit;
        font-size: 0.75rem;
        font-weight: 760;
        cursor: pointer;
        transition:
          transform 150ms ease,
          border-color 150ms ease,
          background 150ms ease,
          color 150ms ease;
      }

      .hf-feature-manual-close:hover,
      .hf-feature-manual-close:focus-visible {
        border-color: rgba(224, 247, 255, 0.38);
        background: rgba(255, 255, 255, 0.095);
        color: #ffffff;
        outline: none;
        transform: translateY(-1px);
      }

      .hf-feature-manual-close:active {
        transform: translateY(1px) scale(0.98);
      }

      .hf-feature-readme-fallback {
        display: grid;
        gap: 12px;
        padding: 16px;
        border: 1px solid rgba(255, 214, 91, 0.18);
        border-radius: 18px;
        background:
          radial-gradient(circle at 8% 0%, rgba(255, 214, 91, 0.12), transparent 42%),
          rgba(255, 255, 255, 0.045);
      }

      .hf-feature-readme-fallback strong {
        color: #fff4c2;
      }

      .hf-feature-readme-steps {
        display: grid;
        gap: 8px;
        margin: 0;
        padding-left: 1.2em;
        color: rgba(235, 248, 255, 0.78);
        font-size: 0.92rem;
        line-height: 1.5;
      }

      .hf-feature-readme-steps li {
        padding-left: 2px;
      }

      .hf-feature-readme-steps li::marker {
        color: #ffd65b;
        font-weight: 800;
      }

      .hf-feature-readme-step-button {
        min-height: 34px;
        margin: 0 4px;
        padding: 0 12px;
        font-size: 0.78rem;
        line-height: 1;
        vertical-align: middle;
      }

      .hf-feature-readme-steps li > .hf-feature-readme-step-button:first-child {
        margin-left: 0;
      }

      .hf-feature-readme-inline-link {
        color: #fff4c2;
        font-weight: 800;
        text-decoration: none;
        border-bottom: 1px solid rgba(255, 214, 91, 0.45);
      }

      .hf-feature-readme-inline-link:hover,
      .hf-feature-readme-inline-link:focus-visible {
        color: #ffffff;
        border-bottom-color: rgba(255, 255, 255, 0.72);
        outline: none;
      }

      .hf-feature-manual-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .hf-feature-readme-preview pre {
        max-height: min(54vh, 620px);
        min-height: 240px;
        margin: 0;
        padding: 16px;
        overflow: auto;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 18px;
        background: rgba(0, 0, 0, 0.28);
        color: #e8f7ff;
        font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
        font-size: 0.82rem;
        line-height: 1.55;
        white-space: pre-wrap;
      }

      .hf-feature-placement-screen {
        position: relative;
        z-index: 6;
        width: min(100%, 1500px);
        margin: 0 auto;
        animation: hf-feature-panel-in 260ms ease both;
      }

      .hf-feature-placement-screen[hidden] {
        display: none;
      }

      .hf-feature-page.is-placing-readme {
        height: auto;
        min-height: 100dvh;
        overflow: auto;
      }

      .hf-feature-page.is-placing-readme .hf-feature-shell {
        display: none;
      }

      .hf-feature-placement-shell {
        display: grid;
        gap: 18px;
        min-height: min(860px, calc(100dvh - 64px));
        padding: clamp(16px, 2vw, 24px);
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 36px;
        background:
          radial-gradient(circle at 12% 0%, rgba(156, 255, 99, 0.13), transparent 30%),
          radial-gradient(circle at 82% 8%, rgba(136, 215, 255, 0.13), transparent 36%),
          linear-gradient(180deg, rgba(9, 20, 35, 0.9), rgba(3, 8, 16, 0.94));
        box-shadow:
          0 42px 130px rgba(0, 0, 0, 0.44),
          inset 0 1px 0 rgba(255, 255, 255, 0.11);
      }

      .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-shell {
        grid-template-columns: minmax(300px, 400px) minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
        align-items: stretch;
        height: min(920px, calc(100dvh - 44px));
        min-height: min(720px, calc(100dvh - 44px));
      }

      .hf-feature-placement-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: start;
        gap: 18px;
      }

      .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-head {
        grid-column: 1;
        grid-row: 1;
        grid-template-columns: 1fr;
        align-content: start;
      }

      .hf-feature-placement-actions {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
      }

      .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-actions {
        justify-content: flex-start;
        flex-wrap: wrap;
        margin-top: 8px;
      }

      .hf-feature-placement-move-stack {
        display: grid;
        grid-template-columns: minmax(148px, 1fr);
        gap: 7px;
      }

      .hf-feature-placement-screen .hf-feature-back {
        min-height: 38px;
        padding: 0 16px;
        border-radius: 10px;
        border-color: rgba(197, 208, 227, 0.16);
        background: rgba(255, 255, 255, 0.05);
        color: rgba(216, 225, 241, 0.86);
        font-size: 0.84rem;
        font-weight: 640;
        letter-spacing: 0.012em;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          color 160ms ease;
      }

      .hf-feature-placement-screen .hf-feature-placement-move-stack .hf-feature-back {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding-inline: 14px;
        text-align: center;
      }

      /* the display rule above must not resurrect [hidden] buttons (the
         move-ALL pair only exists in the feature-all flow) */
      .hf-feature-placement-screen .hf-feature-placement-move-stack .hf-feature-back[hidden] {
        display: none;
      }

      .hf-feature-placement-move-stack .hf-feature-move-icon {
        width: 14px;
        height: 14px;
        flex: none;
        opacity: 0.85;
      }

      .hf-feature-placement-move-stack .hf-feature-action {
        width: 100%;
      }

      .hf-feature-placement-screen .hf-feature-back:hover,
      .hf-feature-placement-screen .hf-feature-back:focus-visible {
        border-color: rgba(197, 208, 227, 0.3);
        background: rgba(255, 255, 255, 0.09);
        color: #ffffff;
        outline: none;
      }

      .hf-feature-placement-screen .hf-feature-action {
        min-height: 42px;
        padding: 0 20px;
        border-radius: 12px;
        font-size: 0.92rem;
        letter-spacing: 0.012em;
      }

      .hf-feature-placement-screen .hf-feature-action--primary {
        border-radius: 12px;
      }

      .hf-feature-placement-head .eyebrow {
        width: fit-content;
        min-height: 30px;
        padding: 0 12px;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        color: rgba(235, 248, 255, 0.84);
        font-size: 0.68rem;
        letter-spacing: 0.18em;
      }

      .hf-feature-placement-head h2 {
        margin: 8px 0 0;
        color: #ffffff;
        font-size: clamp(2.1rem, 3.1vw, 4rem);
        line-height: 0.96;
        letter-spacing: -0.07em;
      }

      .hf-feature-placement-head h2 + p {
        margin-top: clamp(12px, 1.2vw, 18px);
      }

      .hf-feature-placement-head p,
      .hf-feature-placement-readme-head p {
        margin: 0;
        color: rgba(197, 208, 227, 0.72);
        font-size: 0.92rem;
        line-height: 1.5;
      }

      .hf-feature-placement-status {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        width: fit-content;
        min-height: 38px;
        padding: 0 14px;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.24);
        color: rgba(235, 248, 255, 0.82);
        font-size: 0.86rem;
        font-weight: 720;
      }

      .hf-feature-placement-status[hidden] {
        display: none;
      }

      .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-status {
        grid-column: 1;
        grid-row: 2;
        align-self: start;
        max-width: 100%;
      }

      .hf-feature-spinner {
        width: 15px;
        height: 15px;
        border: 2px solid rgba(235, 248, 255, 0.78);
        border-right-color: transparent;
        border-radius: 999px;
        animation: hf-feature-spin 760ms linear infinite;
      }

      @keyframes hf-feature-spin {
        to {
          transform: rotate(1turn);
        }
      }

      .hf-feature-placement-workspace {
        display: grid;
        grid-template-columns: minmax(220px, 0.22fr) minmax(0, 1fr);
        gap: 18px;
        min-height: 0;
      }

      .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-workspace {
        grid-column: 2;
        grid-row: 1 / span 2;
        min-height: 0;
      }

      .hf-feature-placement-workspace--full {
        grid-template-columns: minmax(0, 1fr);
      }

      .hf-feature-placement-side,
      .hf-feature-placement-readme {
        min-width: 0;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 28px;
        background:
          radial-gradient(circle at 15% 0%, rgba(136, 215, 255, 0.08), transparent 42%),
          rgba(255, 255, 255, 0.04);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .hf-feature-placement-side {
        display: grid;
        align-content: start;
        gap: 14px;
        padding: 16px;
      }

      .hf-feature-placement-side[hidden] {
        display: none;
      }

      .hf-feature-placement-models {
        display: grid;
        gap: 8px;
        max-height: 190px;
        overflow: auto;
        padding-right: 4px;
        scrollbar-color: rgba(136, 215, 255, 0.28) transparent;
        scrollbar-width: thin;
      }

      .hf-feature-placement-models[hidden] {
        display: none;
      }

      .hf-feature-placement-model {
        display: grid;
        grid-template-columns: 28px minmax(0, 1fr);
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 42px;
        padding: 7px 9px;
        border: 1px solid rgba(136, 215, 255, 0.14);
        border-radius: 14px;
        background: rgba(255, 255, 255, 0.045);
        color: rgba(235, 248, 255, 0.8);
        font: inherit;
        font-size: 0.8rem;
        font-weight: 720;
        text-align: left;
        cursor: pointer;
      }

      .hf-feature-placement-model.is-active {
        border-color: rgba(156, 255, 99, 0.42);
        background: rgba(156, 255, 99, 0.1);
        color: #ffffff;
      }

      .hf-feature-placement-model img {
        width: 28px;
        height: 28px;
        border-radius: 999px;
        object-fit: cover;
      }

      .hf-feature-placement-model span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .hf-feature-placement-readme {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        padding: 16px;
        overflow: hidden;
      }

      .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-readme {
        min-height: 0;
        height: 100%;
      }

      .hf-feature-placement-readme-head {
        display: flex;
        align-items: start;
        justify-content: space-between;
        gap: 14px;
        padding-bottom: 12px;
      }

      .hf-feature-placement-readme-head h3 {
        margin: 0 0 4px;
        color: #ffffff;
        font-size: 1.08rem;
      }

      .hf-feature-placement-canvas {
        --hf-feature-placement-doc-zoom: 0.6;
        display: flex;
        align-items: flex-start;
        justify-content: center;
        min-height: 0;
        overflow: auto;
        padding: 10px 16px 16px;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: #0f172a;
        scrollbar-color: #94a3b8 transparent;
        scrollbar-width: thin;
      }

      .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-canvas {
        max-height: 100%;
        overscroll-behavior: contain;
      }

      .hf-feature-placement-canvas::-webkit-scrollbar,
      .hf-feature-placement-models::-webkit-scrollbar {
        width: 9px;
        height: 9px;
      }

      .hf-feature-placement-canvas::-webkit-scrollbar-thumb,
      .hf-feature-placement-models::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: rgba(148, 163, 184, 0.62);
      }

      .hf-feature-placement-doc {
        display: grid;
        gap: 0;
        width: min(880px, 100%);
        min-width: min(680px, 100%);
        margin: 0 auto;
        padding: 34px 42px 46px;
        border: 1px solid rgba(203, 213, 225, 0.76);
        border-radius: 30px;
        background: #ffffff;
        box-shadow:
          0 28px 90px rgba(15, 23, 42, 0.16),
          0 1px 0 rgba(255, 255, 255, 0.92) inset;
        box-sizing: border-box;
        transform-origin: top center;
        zoom: var(--hf-feature-placement-doc-zoom, 0.52);
      }

      .hf-feature-placement-doc.is-compressed-bottom {
        align-self: start;
      }

      .hf-feature-placement-canvas.is-unrolling-placement .hf-feature-placement-doc {
        animation: hf-feature-placement-unroll 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
      }

      @keyframes hf-feature-placement-unroll {
        from {
          opacity: 0.82;
          transform: translateY(-18px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .hf-feature-placement-torn-divider {
        position: relative;
        height: 74px;
        margin: 10px -42px 16px;
        overflow: hidden;
        background:
          linear-gradient(135deg, transparent 0 14px, rgba(226, 232, 240, 0.84) 14px 16px, transparent 16px 32px) 0 0 / 32px 32px,
          linear-gradient(225deg, transparent 0 14px, rgba(226, 232, 240, 0.84) 14px 16px, transparent 16px 32px) 0 100% / 32px 32px;
        opacity: 0.92;
      }

      .hf-feature-placement-torn-divider::before {
        content: "";
        position: absolute;
        inset: 23px 34px;
        border-radius: 999px;
        background:
          radial-gradient(circle at 50% 50%, rgba(148, 163, 184, 0.28), transparent 62%),
          linear-gradient(90deg, transparent, rgba(148, 163, 184, 0.26), transparent);
        filter: blur(4px);
      }

      @supports not (zoom: 1) {
        .hf-feature-placement-doc {
          transform: scale(var(--hf-feature-placement-doc-zoom, 0.52));
        }
      }

      .hf-feature-placement-slot {
        position: relative;
        display: grid;
        place-items: center;
        min-height: 0;
        height: 0;
        margin: 0;
        padding: 0;
        overflow: visible;
        border: 0;
        border-radius: 16px;
        color: #0369a1;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        pointer-events: none;
        transition:
          min-height 240ms cubic-bezier(0.2, 0.78, 0.2, 1),
          margin 240ms cubic-bezier(0.2, 0.78, 0.2, 1),
          background 220ms ease,
          border-color 220ms ease,
          box-shadow 220ms ease;
      }

      .hf-feature-placement-canvas.is-dragging-placement .hf-feature-placement-slot,
      .hf-feature-placement-slot.is-active {
        pointer-events: auto;
      }

      .hf-feature-placement-slot::before {
        content: "Release to place graph";
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 1;
        padding: 16px 24px;
        border: 1px solid rgba(3, 105, 161, 0.22);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.9);
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.96);
        box-shadow: 0 18px 42px rgba(15, 23, 42, 0.14);
        font-size: clamp(1.35rem, 2.35vw, 2.2rem);
        letter-spacing: 0.045em;
        transition:
          opacity 160ms ease,
          transform 220ms cubic-bezier(0.2, 0.78, 0.2, 1);
        white-space: nowrap;
      }

      .hf-feature-placement-slot::after {
        content: "";
        position: absolute;
        inset: -18px 0;
        border-radius: 18px;
        background: transparent;
      }

      .hf-feature-placement-slot-hit {
        position: absolute;
        inset: -18px 0;
        display: block;
        border-radius: 18px;
      }

      .hf-feature-placement-slot.is-active .hf-feature-placement-slot-hit {
        display: none;
      }

      .hf-feature-placement-slot.is-active {
        height: auto;
        min-height: 0;
        margin: 12px 0;
        pointer-events: auto;
        cursor: default;
      }

      .hf-feature-placement-slot.is-drag-over {
        height: auto;
        min-height: var(--hf-feature-placement-slot-height, 210px);
        margin: 12px 0;
        border: 1px dashed rgba(3, 105, 161, 0.28);
        border-color: rgba(3, 105, 161, 0.28);
        background:
          radial-gradient(circle at 50% 0%, rgba(14, 165, 233, 0.12), transparent 48%),
          rgba(14, 165, 233, 0.08);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7);
      }

      .hf-feature-placement-slot.is-active:not(.is-drag-over) {
        background: transparent;
        box-shadow: none;
      }

      .hf-feature-placement-slot.is-active,
      .hf-feature-placement-slot.is-drag-over {
        justify-items: stretch;
        text-align: left;
      }

      .hf-feature-placement-slot.is-drag-over::before {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
      }

      .hf-feature-placement-screen.is-placement-variant-split.is-balanced-drop-mode
        .hf-feature-placement-slot.is-drag-over {
        min-height: calc(var(--hf-feature-placement-slot-height, 210px) * 0.5);
      }

      .hf-feature-placement-balanced-before {
        transform: translateY(calc(var(--hf-feature-placement-slot-height, 210px) * -0.5));
      }

      .hf-feature-placement-balanced-before,
      .hf-feature-placement-block,
      .hf-feature-placement-slot,
      .hf-feature-placement-torn-divider {
        transition:
          transform 240ms cubic-bezier(0.2, 0.78, 0.2, 1),
          min-height 240ms cubic-bezier(0.2, 0.78, 0.2, 1),
          margin 240ms cubic-bezier(0.2, 0.78, 0.2, 1),
          background 220ms ease,
          border-color 220ms ease,
          box-shadow 220ms ease;
      }

      .hf-feature-placement-insert-preview {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 10px;
        justify-self: start;
        width: min(560px, 100%);
        max-width: 100%;
        margin: 12px 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        text-align: left;
        text-transform: none;
        letter-spacing: normal;
        cursor: grab;
        user-select: none;
        will-change: transform, opacity, filter;
        transition:
          opacity 180ms ease,
          transform 360ms cubic-bezier(0.16, 1, 0.3, 1),
          filter 220ms ease;
      }

      .hf-feature-placement-drag-marker {
        position: fixed;
        z-index: 64;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 0;
        padding: 15px 26px 16px;
        border: 1px solid rgba(156, 255, 99, 0.42);
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(24, 39, 27, 0.97), rgba(9, 19, 13, 0.97));
        color: rgba(228, 255, 205, 0.98);
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: 720;
        letter-spacing: 0.004em;
        line-height: 1.25;
        white-space: nowrap;
        cursor: pointer;
        user-select: none;
        opacity: 1;
        box-shadow:
          0 30px 64px rgba(0, 0, 0, 0.58),
          0 12px 26px rgba(0, 0, 0, 0.44),
          inset 0 1px 0 rgba(255, 255, 255, 0.12);
        transform: translate(-50%, -100%);
        transition: opacity 200ms ease;
      }

      .hf-feature-placement-drag-marker::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -7.5px;
        width: 15px;
        height: 15px;
        margin-left: -7.5px;
        transform: rotate(45deg);
        background: rgba(9, 19, 13, 0.97);
        border-right: 1px solid rgba(156, 255, 99, 0.42);
        border-bottom: 1px solid rgba(156, 255, 99, 0.42);
        border-bottom-right-radius: 4px;
      }

      .hf-feature-placement-drag-marker.is-pointing-up {
        transform: translate(-50%, 0);
      }

      .hf-feature-placement-drag-marker.is-pointing-up::after {
        bottom: auto;
        top: -7.5px;
        background: linear-gradient(315deg, transparent 46%, rgba(24, 39, 27, 0.97) 46%);
        border: 0;
        border-left: 1px solid rgba(156, 255, 99, 0.42);
        border-top: 1px solid rgba(156, 255, 99, 0.42);
        border-top-left-radius: 4px;
      }

      .hf-feature-placement-drag-marker.is-side {
        transform: translate(0, -50%);
      }

      .hf-feature-placement-drag-marker.is-side::after {
        left: -7.5px;
        right: auto;
        top: 50%;
        bottom: auto;
        margin-left: 0;
        margin-top: -7.5px;
        background: linear-gradient(225deg, transparent 46%, rgba(24, 39, 27, 0.97) 46%);
        border: 0;
        border-left: 1px solid rgba(156, 255, 99, 0.42);
        border-bottom: 1px solid rgba(156, 255, 99, 0.42);
        border-bottom-left-radius: 4px;
      }

      .hf-feature-placement-drag-marker__arrow {
        display: none;
        font-size: 16px;
        line-height: 1;
        color: rgba(156, 255, 99, 0.95);
      }

      .hf-feature-placement-drag-marker.is-offscreen .hf-feature-placement-drag-marker__arrow {
        display: inline;
      }

      .hf-feature-placement-drag-marker.is-offscreen.is-pointing-up
        .hf-feature-placement-drag-marker__arrow::before {
        content: "\2191";
      }

      .hf-feature-placement-drag-marker.is-offscreen:not(.is-pointing-up)
        .hf-feature-placement-drag-marker__arrow::before {
        content: "\2193";
      }

      .hf-feature-placement-drag-marker.is-hidden {
        opacity: 0;
        pointer-events: none;
      }

      .hf-feature-placement-insert-preview:active {
        cursor: grabbing;
      }

      .hf-feature-placement-insert-preview.is-dragging {
        opacity: 0.62;
        transform: scale(0.985);
        filter: saturate(0.9);
      }

      .hf-feature-placement-drag-ghost {
        position: fixed;
        left: -10000px;
        top: -10000px;
        z-index: -1;
        pointer-events: none;
        opacity: 0.96;
        transform: none !important;
        /* zoom is set inline to the doc zoom so the drag image shows the
           card exactly as it renders in the README (title size included) */
      }

      .hf-feature-placement-drag-ghost .hf-feature-placement-insert-preview {
        width: 100%;
        margin: 0;
        transform: none !important;
      }

      .hf-feature-placement-drag-ghost .hf-feature-placement-insert-heading,
      .hf-feature-placement-drag-ghost .hf-feature-placement-insert-preview img {
        flex: none;
        max-width: none;
        max-height: none;
        transform: none !important;
      }

      .hf-feature-placement-insert-heading {
        margin: 0 0 2px -8px;
        width: fit-content;
        max-width: 100%;
        padding: 5px 8px 0.38em;
        border: 1px solid transparent;
        border-bottom-color: rgba(148, 163, 184, 0.32);
        border-radius: 12px;
        color: #0f172a;
        font-size: clamp(1.55rem, 3.3vw, 2.25rem);
        font-weight: 760;
        letter-spacing: -0.045em;
        line-height: 1.15;
        text-transform: none;
        cursor: text;
        outline: none;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          box-shadow 160ms ease;
      }

      .hf-feature-placement-insert-heading:hover,
      .hf-feature-placement-insert-heading:focus {
        border-color: rgba(37, 99, 235, 0.18);
        box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.07);
        background: rgba(14, 165, 233, 0.045);
      }

      .hf-feature-placement-insert-preview img {
        display: block;
        width: auto;
        max-width: min(560px, 100%);
        height: auto;
        max-height: 270px;
        border-radius: 16px;
        object-fit: contain;
        background: transparent;
        filter: drop-shadow(0 18px 30px rgba(15, 23, 42, 0.16));
        pointer-events: none;
        transform: translateZ(0) scale(1);
        transition:
          filter 180ms ease,
          transform 180ms cubic-bezier(0.2, 0.78, 0.2, 1);
        user-select: none;
      }

      .hf-feature-placement-insert-preview:hover img {
        filter: drop-shadow(0 30px 46px rgba(15, 23, 42, 0.22));
        transform: translateY(-2px) scale(1.018);
      }

      .hf-feature-placement-insert-preview.is-dragging img {
        filter: drop-shadow(0 16px 24px rgba(15, 23, 42, 0.14));
        transform: translateY(0) scale(1);
      }

      .hf-feature-placement-block {
        padding: 8px 0;
        border-bottom: 0;
      }

      .hf-feature-placement-block:last-child {
        border-bottom: 0;
      }

      .hf-feature-placement-block--heading {
        padding-top: 16px;
      }

      .hf-feature-placement-block h1,
      .hf-feature-placement-block h2,
      .hf-feature-placement-block h3,
      .hf-feature-placement-block h4,
      .hf-feature-placement-block h5,
      .hf-feature-placement-block h6,
      .hf-feature-placement-block p,
      .hf-feature-placement-block pre,
      .hf-feature-placement-block blockquote,
      .hf-feature-placement-block ul,
      .hf-feature-placement-block ol,
      .hf-feature-placement-block table,
      .hf-feature-placement-block figure {
        margin: 0;
      }

      .hf-feature-placement-block h1,
      .hf-feature-placement-block h2 {
        padding-bottom: 0.28em;
        border-bottom: 1px solid rgba(148, 163, 184, 0.28);
        color: #0f172a;
        font-size: clamp(1.35rem, 2.7vw, 2.15rem);
        font-weight: 760;
        letter-spacing: -0.045em;
        line-height: 1.12;
      }

      .hf-feature-placement-block h3,
      .hf-feature-placement-block h4,
      .hf-feature-placement-block h5,
      .hf-feature-placement-block h6 {
        color: #0f172a;
        font-size: clamp(1rem, 1.8vw, 1.45rem);
        font-weight: 740;
        letter-spacing: -0.025em;
        line-height: 1.15;
      }

      .hf-feature-placement-block p,
      .hf-feature-placement-block li,
      .hf-feature-placement-block blockquote {
        color: #334155;
        font-size: 0.9rem;
        line-height: 1.55;
      }

      .hf-feature-placement-block--placeholder {
        padding-block: 5px;
      }

      .hf-feature-placement-ellipsis {
        width: fit-content;
        max-width: 100%;
        padding: 3px 0;
        color: #64748b;
        font-size: 1rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        line-height: 1;
      }

      .hf-feature-placement-image-preview {
        display: grid;
        justify-items: start;
        gap: 8px;
      }

      .hf-feature-placement-image-preview img {
        display: block;
        max-width: min(620px, 100%);
        max-height: 280px;
        border-radius: 10px;
        object-fit: contain;
      }

      .hf-feature-placement-block ul,
      .hf-feature-placement-block ol {
        padding-left: 1.45em;
      }

      .hf-feature-placement-block a {
        color: #2563eb;
        text-decoration-color: rgba(37, 99, 235, 0.35);
        text-underline-offset: 0.16em;
      }

      .hf-feature-placement-block code {
        padding: 0.08em 0.32em;
        border-radius: 0.38em;
        background: rgba(15, 23, 42, 0.07);
        color: #0f172a;
        font-family: "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;
        font-size: 0.9em;
      }

      .hf-feature-placement-block pre {
        max-height: 180px;
        overflow: hidden;
        padding: 12px;
        border-radius: 14px;
        background: #0f172a;
        color: #dbeafe;
        font-size: 0.76rem;
        line-height: 1.45;
      }

      .hf-feature-placement-block pre code {
        display: block;
        padding: 0;
        background: transparent;
        color: inherit;
        white-space: pre-wrap;
      }

      .hf-feature-placement-block blockquote {
        padding: 10px 13px;
        border-left: 4px solid #cbd5e1;
        background: rgba(241, 245, 249, 0.72);
      }

      .hf-feature-placement-block table {
        display: table;
        width: 100%;
        border-collapse: collapse;
        border: 1px solid #cbd5e1;
        border-radius: 10px;
        font-size: 0.82rem;
        table-layout: fixed;
      }

      .hf-feature-placement-block th,
      .hf-feature-placement-block td {
        padding: 8px 10px;
        border: 1px solid #cbd5e1;
        color: #334155;
        text-align: left;
        vertical-align: top;
      }

      .hf-feature-placement-block th {
        background: #f1f5f9;
        color: #0f172a;
        font-weight: 760;
      }

      .hf-feature-placement-block img {
        max-width: 100%;
        max-height: 280px;
        border-radius: 10px;
        object-fit: contain;
      }

      .hf-feature-placement-block figure {
        display: grid;
        justify-items: start;
        gap: 6px;
      }

      .hf-feature-placement-block hr {
        width: 100%;
        height: 1px;
        margin: 6px 0;
        border: 0;
        background: rgba(148, 163, 184, 0.38);
      }

      .hf-feature-fly-card {
        position: fixed;
        z-index: 10000;
        pointer-events: none;
        overflow: hidden;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        contain: layout style paint;
        will-change: left, top, width, height, opacity;
        visibility: hidden;
      }

      .hf-feature-fly-card img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-position: center center;
      }

      /* morphing flight: the clone carries the dashboard-art look on one
         layer and the framed showcase-card look on another, crossfading
         mid-flight so it takes off matching the READY card and lands
         matching the community-card preview exactly */
      .hf-feature-fly-card__layer {
        position: absolute; inset: 0;
        transition: opacity 620ms ease 140ms;
      }
      .hf-feature-fly-card__layer img {
        width: 100%; height: 100%; object-fit: contain; object-position: center;
      }
      .hf-feature-fly-card__layer--well {
        border-radius: 12px;
        background:
          radial-gradient(circle at 50% 0%, rgba(136, 215, 255, 0.12), transparent 52%),
          radial-gradient(circle at 20% 12%, rgba(156, 255, 99, 0.1), transparent 32%),
          linear-gradient(180deg, rgba(9, 16, 29, 0.92), rgba(5, 9, 20, 0.98)), #050914;
      }
      .hf-feature-fly-card__layer--well img { padding: 6.9% 6.2% 5.5%; box-sizing: border-box; }
      .hf-feature-fly-card__layer--end { opacity: 0; }
      .hf-feature-fly-card.is-morphing .hf-feature-fly-card__layer--start { opacity: 0; }
      .hf-feature-fly-card.is-morphing .hf-feature-fly-card__layer--end { opacity: 1; }

      .hf-feature-cycle-clone {
        margin: 0 !important;
        pointer-events: none;
        transform-origin: center center;
        animation: none !important;
        transition: none !important;
        will-change: left, top, width, height, opacity, filter;
      }

      .hf-feature-cycle-clone--fixed {
        position: fixed;
        z-index: 9999;
        transform: none !important;
      }

      .hf-feature-cycle-clone * {
        pointer-events: none !important;
      }

      .hf-feature-cycle-clone img {
        opacity: 1 !important;
        visibility: visible !important;
      }

      .hf-feature-cycle-clone .hf-feature-backdrop-reflection,
      .hf-feature-cycle-clone .hf-feature-card-reflection {
        display: none !important;
      }

      .hf-feature-cycle-stage-overlay {
        position: absolute;
        inset: 0;
        z-index: 18;
        pointer-events: none;
        transform-style: preserve-3d;
      }

      .hf-feature-cycle-stage-overlay .hf-feature-backdrop-card,
      .hf-feature-cycle-stage-overlay .hf-feature-backdrop-reflection {
        animation: none !important;
        transition: none !important;
      }

      .hf-feature-cycle-stage-overlay .hf-feature-backdrop-card--user:not(.hf-feature-backdrop-card--reflection-inner) {
        background:
          radial-gradient(circle at 50% 0%, rgba(136, 215, 255, 0.08), transparent 48%),
          linear-gradient(180deg, #ffffff, #f4f8fc);
        mix-blend-mode: normal !important;
      }

      .hf-feature-page.is-feature-cycle-measuring .hf-feature-backdrop-card,
      .hf-feature-page.is-feature-cycle-measuring .hf-feature-backdrop-reflection,
      .hf-feature-page.is-feature-cycle-measuring .hf-feature-backdrop-card__top,
      .hf-feature-page.is-feature-cycle-measuring .hf-feature-backdrop-card__avatar,
      .hf-feature-page.is-feature-cycle-measuring .hf-feature-backdrop-card__repo,
      .hf-feature-page.is-feature-cycle-measuring .hf-feature-backdrop-card__tabs,
      .hf-feature-page.is-feature-cycle-measuring .hf-feature-backdrop-card__summary,
      .hf-feature-page.is-feature-cycle-measuring .hf-feature-backdrop-card__embed,
      .hf-feature-page.is-feature-cycle-measuring .hf-feature-backdrop-card__actions {
        transition: none !important;
      }

      .hf-feature-page.is-feature-cycle-animating .hf-feature-main-card-wrap,
      .hf-feature-page.is-feature-cycle-animating .hf-feature-backdrop-cards {
        visibility: hidden;
      }

      .hf-feature-page.is-feature-cycle-animating .hf-feature-cycle-stage-overlay,
      .hf-feature-page.is-feature-cycle-animating .hf-feature-cycle-clone {
        visibility: visible;
      }

      html.hf-feature-cycle-transition::view-transition-old(root) {
        animation: none;
        opacity: 0;
        mix-blend-mode: normal;
      }

      html.hf-feature-cycle-transition::view-transition-new(root) {
        animation: none;
        opacity: 1;
        mix-blend-mode: normal;
      }

      html.hf-feature-cycle-transition::view-transition-group(*) {
        animation-duration: var(--hf-feature-all-cycle-duration-active, 490ms);
        animation-timing-function: var(--hf-feature-all-cycle-easing-active, cubic-bezier(0.25, 0.8, 0.25, 1));
      }

      html.hf-feature-cycle-transition::view-transition-image-pair(*) {
        isolation: isolate;
      }

      html.hf-feature-cycle-transition::view-transition-old(*),
      html.hf-feature-cycle-transition::view-transition-new(*) {
        animation-duration: var(--hf-feature-all-cycle-duration-active, 490ms);
        animation-timing-function: var(--hf-feature-all-cycle-easing-active, cubic-bezier(0.25, 0.8, 0.25, 1));
        mix-blend-mode: normal;
      }

      @keyframes hf-feature-backdrop-card-enter {
        from {
          opacity: 0;
          filter: blur(9px) saturate(0.72);
          transform:
            translateX(-50%)
            translate3d(var(--from-x, 0px), var(--from-y, 46px), -560px)
            rotateY(var(--from-rot-y, 0deg))
            rotateZ(var(--from-rot-z, 0deg))
            scale(var(--from-scale, 0.48));
        }
        62% {
          opacity: 1;
        }
        to {
          opacity: var(--opacity);
          filter: blur(var(--blur)) saturate(var(--saturate)) brightness(var(--brightness));
          transform:
            translateX(-50%)
            translate3d(var(--x), var(--y), var(--z))
            rotateY(var(--rot-y))
            rotateZ(var(--rot-z))
            scale(var(--scale-x, var(--scale)), var(--scale-y, var(--scale)));
        }
      }

      @keyframes hf-feature-backdrop-reflection-enter {
        from {
          opacity: 0;
          filter: blur(calc(var(--blur) + 11px)) saturate(0.48) brightness(0.62);
          transform:
            translateX(-50%)
            translate3d(var(--from-x, 0px), calc(var(--from-y, 46px) + 18px), -610px)
            rotateY(var(--from-rot-y, 0deg))
            rotateZ(var(--from-rot-z, 0deg))
            scale(var(--from-scale, 0.48));
        }
        64% {
          opacity: 0.76;
        }
        to {
          opacity: 0.76;
          filter: blur(calc(var(--blur) + var(--reflection-blur-boost))) saturate(0.48) brightness(var(--reflection-brightness)) contrast(0.68);
          transform:
            translateX(-50%)
            translate3d(var(--x), var(--y), calc(var(--z) - 24px))
            rotateY(var(--rot-y))
            rotateZ(var(--rot-z))
          scale(var(--scale-x, var(--scale)), var(--scale-y, var(--scale)));
        }
      }

      @keyframes hf-feature-backdrop-card-exit {
        from {
          opacity: var(--opacity);
          filter: blur(var(--blur)) saturate(var(--saturate)) brightness(var(--brightness));
          transform:
            translateX(-50%)
            translate3d(var(--x), var(--y), var(--z))
            rotateY(var(--rot-y))
            rotateZ(var(--rot-z))
            scale(var(--scale-x, var(--scale)), var(--scale-y, var(--scale)));
        }
        46% {
          opacity: var(--opacity);
        }
        to {
          opacity: 0;
          filter: blur(9px) saturate(0.72);
          transform:
            translateX(-50%)
            translate3d(var(--from-x, 0px), var(--from-y, 46px), -560px)
            rotateY(var(--from-rot-y, 0deg))
            rotateZ(var(--from-rot-z, 0deg))
            scale(var(--from-scale, 0.48));
        }
      }

      @keyframes hf-feature-backdrop-reflection-exit {
        from {
          opacity: 0.76;
          filter: blur(calc(var(--blur) + var(--reflection-blur-boost))) saturate(0.48) brightness(var(--reflection-brightness)) contrast(0.68);
          transform:
            translateX(-50%)
            translate3d(var(--x), var(--y), calc(var(--z) - 24px))
            rotateY(var(--rot-y))
            rotateZ(var(--rot-z))
            scale(var(--scale-x, var(--scale)), var(--scale-y, var(--scale)));
        }
        42% {
          opacity: 0.76;
        }
        to {
          opacity: 0;
          filter: blur(calc(var(--blur) + 11px)) saturate(0.48) brightness(0.62);
          transform:
            translateX(-50%)
            translate3d(var(--from-x, 0px), calc(var(--from-y, 46px) + 18px), -610px)
            rotateY(var(--from-rot-y, 0deg))
            rotateZ(var(--from-rot-z, 0deg))
            scale(var(--from-scale, 0.48));
        }
      }

      @keyframes hf-feature-main-card-enter {
        from {
          opacity: 0;
          filter: blur(6px);
          transform: translate3d(0, 94px, -120px) rotateX(7deg) scale(0.86);
        }
        62% {
          opacity: 1;
          filter: blur(0);
        }
        to {
          opacity: 1;
          filter: blur(0);
          transform: translateY(var(--hf-feature-main-card-y)) rotateX(0deg) scale(1);
        }
      }

      @keyframes hf-feature-dashboard-exit {
        from {
          opacity: 1;
          filter: blur(0);
          transform: scale(1);
        }
        34% {
          opacity: 1;
          filter: blur(0);
          transform: scale(1);
        }
        to {
          opacity: 0;
          filter: blur(7px);
          transform: scale(0.985);
        }
      }

      @keyframes hf-feature-page-overlay-in {
        from {
          opacity: 0;
        }
        to {
          opacity: 1;
        }
      }

      @keyframes hf-feature-page-return-out {
        from {
          opacity: 1;
          filter: blur(0);
          transform: scale(1);
        }
        34% {
          opacity: 1;
          filter: blur(0);
          transform: scale(1);
        }
        to {
          opacity: 0;
          filter: blur(7px);
          transform: scale(1.012);
        }
      }

      @keyframes hf-feature-panel-in {
        from {
          opacity: 0;
          transform: translateY(10px);
        }
        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @keyframes hf-article-visual-skeleton {
        0% {
          background-position: -180% 0, center, center, center;
        }
        100% {
          background-position: 180% 0, center, center, center;
        }
      }

      @media (max-width: 900px) {
        .hf-feature-page {
          height: auto;
          min-height: 100vh;
          min-height: 100dvh;
          padding: max(14px, env(safe-area-inset-top)) clamp(12px, 3.8vw, 22px) calc(24px + env(safe-area-inset-bottom));
          overflow-x: hidden;
          overflow-y: auto;
          -webkit-overflow-scrolling: touch;
        }

        .hf-feature-page.is-transition-overlay,
        .hf-feature-page.is-transition-prepared {
          height: 100vh;
          height: 100dvh;
          overflow: hidden;
        }

        .hf-feature-page::before {
          background:
            linear-gradient(180deg, rgba(0, 0, 0, 0.18), transparent 30%, rgba(0, 0, 0, 0.26)),
            radial-gradient(circle at 50% 26%, rgba(136, 215, 255, 0.08), transparent 48%);
        }

        .hf-feature-page::after {
          left: -12%;
          right: -12%;
          bottom: 18%;
          height: 34vh;
          opacity: 0.56;
        }

        .hf-feature-shell {
          grid-template-columns: 1fr;
          align-items: start;
          gap: 16px;
          width: min(560px, 100%);
          height: auto;
          min-height: 0;
        }

        .hf-feature-preview-pane {
          position: relative;
          top: auto;
          align-content: start;
          gap: 10px;
          width: 100%;
        }

        .hf-feature-showcase-stage {
          width: 100%;
          height: clamp(444px, 68dvh, 560px);
          min-height: 0;
          place-items: start center;
          perspective: 1180px;
        }

        .hf-feature-showcase-stage::before {
          left: -10%;
          right: -10%;
          bottom: 6px;
          height: 210px;
          filter: blur(22px);
          opacity: 0.82;
        }

        .hf-feature-showcase-stage::after {
          left: 9%;
          right: 9%;
          bottom: 52px;
          height: 104px;
          filter: blur(17px);
          opacity: 0.6;
        }

        .hf-feature-main-card-wrap {
          width: min(318px, 78vw);
          transform: translateY(18px);
          animation: none;
        }

        .hf-feature-page.is-flying-card .hf-feature-main-card-wrap {
          transform: translateY(18px);
        }

        .hf-feature-page.has-flight-complete .hf-feature-main-card-wrap {
          transform: translateY(18px);
        }

        .hf-feature-controls {
          width: 100%;
          justify-self: center;
          margin-left: 0;
          margin-top: -14px;
          padding: 12px;
          border-radius: 20px;
          background:
            radial-gradient(circle at 12% 0%, rgba(255, 214, 91, 0.1), transparent 42%),
            linear-gradient(180deg, rgba(8, 17, 31, 0.88), rgba(4, 9, 17, 0.82));
          backdrop-filter: blur(14px);
        }

        .hf-feature-backdrop-card {
          filter: blur(var(--blur)) saturate(var(--saturate)) brightness(0.78);
        }

        .hf-feature-page.is-feature-all .hf-feature-backdrop-cards {
          display: none;
        }

        .hf-feature-action-pane {
          justify-self: stretch;
          width: 100%;
          gap: 16px;
          padding: clamp(18px, 4.6vw, 24px);
          border-radius: 28px;
        }

        .hf-feature-action-pane::before {
          border-radius: 27px;
        }

        .hf-feature-back {
          min-height: 42px;
        }

        .hf-feature-action-copy {
          gap: 12px;
        }

        .hf-feature-action-copy .eyebrow {
          width: fit-content;
          max-width: 100%;
          min-height: 34px;
          padding: 0 14px;
          font-size: 0.68rem;
          letter-spacing: 0.16em;
        }

        .hf-feature-action-copy h2 {
          max-width: 330px;
          font-size: clamp(2.45rem, 13vw, 4.4rem);
          line-height: 0.88;
        }

        .hf-feature-action-copy p,
        .hf-feature-manual-panel p,
        .hf-feature-readme-preview p,
        .hf-feature-feedback {
          font-size: 0.94rem;
          line-height: 1.56;
        }

        .hf-feature-action-grid,
        .hf-feature-manual-actions {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 10px;
        }

        .hf-feature-action {
          min-height: 48px;
          padding: 0 14px;
          text-align: center;
        }
      }

      @media (max-width: 620px) {
        .hf-feature-page {
          padding: max(12px, env(safe-area-inset-top)) 12px calc(20px + env(safe-area-inset-bottom));
        }

        .hf-feature-showcase-stage {
          height: clamp(402px, 63dvh, 486px);
        }

        .hf-feature-backdrop-cards {
          display: none;
        }

        .hf-feature-main-card-wrap {
          --hf-feature-main-reflection-gap: 0px;
          --hf-feature-main-reflection-width: 104%;
          --hf-feature-main-card-y: 12px;
          --hf-feature-card-projection-scale: 1;
          width: min(296px, 78vw);
          transform: translateY(12px);
        }

        .hf-feature-card-reflection {
          height: min(132px, 17vh);
          border-radius: 24px;
          opacity: 0.58;
          mix-blend-mode: screen;
        }

        .hf-feature-card-reflection__inner,
        .hf-feature-card-reflection .community-card {
          border-radius: 24px;
          clip-path: inset(0 round 24px);
        }

        .hf-feature-page.is-flying-card .hf-feature-main-card-wrap {
          transform: translateY(12px);
        }

        .hf-feature-page.has-flight-complete .hf-feature-main-card-wrap {
          transform: translateY(12px);
        }

        .hf-feature-controls {
          margin-top: -8px;
        }

        .hf-feature-granularity {
          grid-template-columns: 1fr auto;
          gap: 8px;
        }

        .hf-feature-granularity .viewer-granularity__slider {
          grid-column: 1 / -1;
          grid-row: 2;
          width: 100%;
        }

        .hf-feature-granularity .viewer-granularity__value {
          justify-self: end;
        }

        .hf-feature-action-pane {
          padding: 16px;
          border-radius: 24px;
        }

        .hf-feature-action-pane::before {
          border-radius: 23px;
        }

        .hf-feature-style {
          grid-template-columns: 1fr;
        }

        .hf-feature-action-grid,
        .hf-feature-manual-actions,
        .hf-feature-action {
          width: 100%;
        }

        .hf-feature-action-grid,
        .hf-feature-manual-actions {
          grid-template-columns: 1fr;
        }

        .hf-feature-manual-panel,
        .hf-feature-readme-preview {
          padding: 13px;
          border-radius: 20px;
        }

        .hf-feature-placement-shell {
          min-height: auto;
          padding: 13px;
          border-radius: 24px;
        }

        .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-shell {
          grid-template-columns: 1fr;
          grid-template-rows: auto auto auto;
          height: auto;
          min-height: auto;
        }

        .hf-feature-placement-head {
          grid-template-columns: 1fr;
        }

        .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-head,
        .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-status,
        .hf-feature-placement-screen.is-placement-variant-split .hf-feature-placement-workspace {
          grid-column: auto;
          grid-row: auto;
        }

        .hf-feature-placement-head h2 {
          font-size: clamp(2rem, 11vw, 3.2rem);
        }

        .hf-feature-placement-workspace {
          grid-template-columns: 1fr;
        }

        .hf-feature-placement-side {
          border-radius: 22px;
        }

        .hf-feature-placement-readme {
          min-height: 62dvh;
          padding: 12px;
          border-radius: 22px;
        }

        .hf-feature-placement-readme-head {
          flex-direction: column;
        }

        .hf-feature-placement-canvas {
          --hf-feature-placement-doc-zoom: 0.7;
          padding: 12px;
          border-radius: 18px;
        }

        .hf-feature-placement-slot:hover,
        .hf-feature-placement-slot.is-active,
        .hf-feature-placement-slot.is-drag-over {
          --hf-feature-placement-slot-height: 210px;
        }

        .hf-feature-readme-fallback {
          padding: 13px;
          border-radius: 16px;
        }

        .hf-feature-readme-preview pre {
          max-height: 240px;
          min-height: 126px;
          font-size: 0.74rem;
        }

        .hf-feature-panel-head,
        .hf-feature-preview-head {
          align-items: stretch;
          flex-direction: column;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .hf-feature-page.is-entering .hf-feature-preview-pane,
        .hf-feature-page.is-entering .hf-feature-action-pane,
        .hf-feature-preview-pane,
        .hf-feature-action-pane,
        .hf-feature-manual-panel,
        .hf-feature-readme-preview {
          transition: none;
          animation: none;
          transform: none;
        }

        .hf-feature-main-card-wrap,
        .hf-feature-backdrop-card {
          animation: none;
        }
      }

      .hf-admin-page {
        position: relative;
        z-index: 2;
        padding: clamp(24px, 4vw, 48px);
      }

      .hf-admin-page[hidden] {
        display: none;
      }

      .hf-admin-shell {
        display: grid;
        gap: 20px;
        width: min(1380px, 100%);
        margin: 0 auto;
      }

      .hf-admin-top,
      .hf-admin-controls,
      .hf-admin-case,
      .hf-admin-empty {
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 30px;
        background:
          radial-gradient(circle at 16% 0%, rgba(255, 209, 102, 0.11), transparent 32%),
          linear-gradient(180deg, rgba(10, 19, 34, 0.91), rgba(4, 9, 17, 0.93));
        box-shadow:
          0 24px 70px rgba(0, 0, 0, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .hf-admin-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding: clamp(18px, 3vw, 28px);
      }

      .hf-admin-top h2 {
        margin: 0;
        color: var(--text);
        font-size: clamp(2rem, 4vw, 3.6rem);
        line-height: 0.95;
        letter-spacing: -0.07em;
      }

      .hf-admin-top p,
      .hf-admin-status,
      .hf-admin-case__meta,
      .hf-admin-case__reason,
      .hf-admin-empty {
        margin: 0;
        color: rgba(197, 208, 227, 0.72);
        line-height: 1.55;
      }

      .hf-admin-controls {
        display: grid;
        gap: 16px;
        padding: clamp(16px, 2.4vw, 24px);
      }

      .hf-admin-action-row,
      .hf-admin-filter-row,
      .hf-admin-stats,
      .hf-admin-case__actions {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
      }

      .hf-admin-action-row {
        align-items: stretch;
      }

      .hf-admin-stats {
        gap: 8px;
      }

      .hf-admin-stat,
      .hf-admin-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 32px;
        padding: 0 11px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        color: rgba(235, 248, 255, 0.82);
        font-size: 0.78rem;
        font-weight: 780;
      }

      .hf-admin-chip--open {
        color: #fff2b4;
        border-color: rgba(255, 209, 102, 0.28);
        background: rgba(255, 209, 102, 0.1);
      }

      .hf-admin-chip--resolved {
        color: #c9ffd0;
        border-color: rgba(156, 255, 99, 0.22);
        background: rgba(156, 255, 99, 0.08);
      }

      .hf-admin-chip--hidden {
        color: #ffd4d4;
        border-color: rgba(255, 132, 132, 0.2);
        background: rgba(255, 96, 96, 0.08);
      }

      .hf-admin-filter {
        min-height: 38px;
        padding: 0 13px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.035);
        color: rgba(223, 247, 255, 0.76);
        font: inherit;
        font-size: 0.88rem;
        font-weight: 760;
        cursor: pointer;
      }

      .hf-admin-filter.is-active {
        border-color: rgba(156, 255, 99, 0.3);
        background: rgba(156, 255, 99, 0.12);
        color: #eaffdc;
      }

      .hf-admin-list {
        display: grid;
        gap: 14px;
      }

      .hf-admin-empty {
        padding: 22px;
        text-align: center;
      }

      .hf-admin-empty[hidden] {
        display: none;
      }

      .hf-admin-case {
        display: grid;
        gap: 16px;
        padding: clamp(16px, 2.4vw, 24px);
      }

      .hf-admin-case__head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
      }

      .hf-admin-case__title {
        display: grid;
        gap: 8px;
        min-width: 0;
      }

      .hf-admin-case__title h3 {
        margin: 0;
        color: var(--text);
        font-size: clamp(1.2rem, 2.2vw, 1.8rem);
        line-height: 1.1;
        letter-spacing: -0.04em;
        overflow-wrap: anywhere;
      }

      .hf-admin-case__repo {
        color: #9cff63;
        font-weight: 820;
        text-decoration: none;
        overflow-wrap: anywhere;
      }

      .hf-admin-case__repo:hover,
      .hf-admin-case__repo:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      .hf-admin-case__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(280px, 0.45fr);
        gap: 14px;
      }

      .hf-admin-case__panel {
        display: grid;
        gap: 10px;
        min-width: 0;
        padding: 14px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        background: rgba(0, 0, 0, 0.16);
      }

      .hf-admin-case__panel-title {
        margin: 0;
        color: rgba(235, 248, 255, 0.78);
        font-size: 0.76rem;
        font-weight: 840;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .hf-admin-case__excerpt {
        color: rgba(235, 248, 255, 0.86);
        line-height: 1.65;
        overflow-wrap: anywhere;
      }

      .hf-admin-case__comment {
        border-left: 3px solid rgba(255, 209, 102, 0.48);
        padding-left: 12px;
        color: rgba(235, 248, 255, 0.86);
        line-height: 1.6;
      }

      .hf-admin-case__actions {
        justify-content: flex-end;
      }

      @media (max-width: 820px) {
        .hf-admin-top,
        .hf-admin-case__head {
          display: grid;
        }

        .hf-admin-case__body {
          grid-template-columns: 1fr;
        }

        .hf-admin-case__actions {
          justify-content: flex-start;
        }
      }

      .hf-article-page {
        position: relative;
        z-index: 2;
        box-sizing: border-box;
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        padding: 0;
        overflow: hidden;
      }

      .hf-article-page[hidden] {
        display: none;
      }

      .hf-article-page [hidden] {
        display: none !important;
      }

      .page.route-hf-article-editor {
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
      }

      .page.route-hf-article-editor .shell {
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        grid-template-columns: none;
        grid-template-areas: none;
      }

      .hf-article-shell {
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0;
        width: 100%;
        height: 100%;
        margin: 0 auto;
        min-height: 0;
      }

      .hf-article-top,
      .hf-article-editor,
      .viewer-community-articles {
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 30px;
        background:
          radial-gradient(circle at 18% 0%, rgba(156, 255, 99, 0.1), transparent 32%),
          linear-gradient(180deg, rgba(10, 19, 34, 0.9), rgba(4, 9, 17, 0.92));
        box-shadow:
          0 24px 70px rgba(0, 0, 0, 0.3),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .viewer-community-articles {
        background:
          linear-gradient(180deg, rgba(6, 14, 25, 0.96) 0, rgba(5, 13, 24, 0.94) 44rem, rgba(5, 13, 24, 0.94) 100%);
        isolation: isolate;
        overflow: clip;
      }

      .viewer-community-articles::before,
      .viewer-community-articles::after {
        content: "";
        position: absolute;
        z-index: 0;
        pointer-events: none;
        border-radius: 999px;
      }

      .viewer-community-articles::before {
        top: -240px;
        left: clamp(-280px, -18vw, -140px);
        width: min(820px, 92vw);
        height: 660px;
        background:
          radial-gradient(ellipse at center, rgba(156, 255, 99, 0.14) 0%, rgba(156, 255, 99, 0.1) 24%, rgba(156, 255, 99, 0.04) 50%, rgba(156, 255, 99, 0) 74%);
      }

      .viewer-community-articles::after {
        top: -210px;
        right: clamp(-260px, -16vw, -120px);
        width: min(780px, 86vw);
        height: 620px;
        background:
          radial-gradient(ellipse at center, rgba(136, 215, 255, 0.1) 0%, rgba(136, 215, 255, 0.066) 28%, rgba(136, 215, 255, 0.026) 54%, rgba(136, 215, 255, 0) 76%);
      }

      .hf-article-top {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: stretch;
        justify-content: space-between;
        gap: clamp(16px, 2vw, 30px);
        padding: clamp(12px, 1.65vw, 22px) clamp(16px, 2.2vw, 34px);
        border-top: 0;
        border-right: 0;
        border-left: 0;
        border-radius: 0 0 28px 28px;
      }

      .hf-article-top .eyebrow {
        justify-self: start;
        margin-bottom: 0;
        gap: 9px;
        padding: 0;
        border-color: transparent;
        background: transparent;
        box-shadow: none;
        font-size: 0.7rem;
        letter-spacing: 0.13em;
      }

      .hf-article-top .eyebrow::before {
        flex-basis: 8px;
        width: 8px;
        min-width: 8px;
        height: 8px;
        min-height: 8px;
        box-shadow: 0 0 0 6px rgba(156, 255, 99, 0.08);
      }

      .hf-article-top__copy {
        display: grid;
        align-content: start;
        gap: 8px;
        min-width: 0;
      }

      .hf-article-top:not(.is-intro-open) .hf-article-top__copy {
        gap: 5px;
      }

      .hf-article-top__permission[hidden] {
        display: none;
      }

      .hf-article-status {
        margin: 0;
        color: rgba(197, 208, 227, 0.72);
        line-height: 1.55;
      }

      .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;
      }

      .hf-article-actions {
        display: flex;
        flex-wrap: nowrap;
        align-content: center;
        align-items: center;
        gap: 8px;
        justify-content: flex-end;
        max-width: min(1120px, 58vw);
        min-width: min-content;
      }

      .hf-article-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 38px;
        padding: 0 13px;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.11), rgba(136, 215, 255, 0.055)),
          rgba(4, 11, 20, 0.58);
        color: #dff7ff;
        font: inherit;
        font-size: 0.9rem;
        font-weight: 760;
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 10px 26px rgba(0, 0, 0, 0.16);
        transition:
          transform 160ms ease,
          border-color 160ms ease,
          background 160ms ease;
      }

      .hf-article-button:hover,
      .hf-article-button:focus-visible {
        border-color: rgba(136, 215, 255, 0.36);
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.16), rgba(136, 215, 255, 0.08)),
          rgba(4, 11, 20, 0.68);
        transform: translateY(-1px);
      }

      .hf-article-button--ghost {
        color: rgba(223, 247, 255, 0.76);
        background: rgba(255, 255, 255, 0.035);
        border-color: rgba(255, 255, 255, 0.1);
        box-shadow: none;
      }

      .hf-article-button--danger {
        color: #ffd9d9;
        border-color: rgba(255, 132, 132, 0.22);
        background: rgba(255, 96, 96, 0.08);
      }

      .hf-article-button--primary {
        border-color: rgba(156, 255, 99, 0.32);
        background: linear-gradient(135deg, var(--lime), #baff82);
        color: var(--ink);
        box-shadow:
          0 18px 38px rgba(156, 255, 99, 0.16),
          inset 0 1px 0 rgba(255, 255, 255, 0.45);
      }

      .hf-article-button svg {
        width: 16px;
        height: 16px;
        flex: 0 0 auto;
      }

      .hf-article-editor {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(430px, 0.74fr);
        align-items: stretch;
        min-height: 0;
        height: 100%;
        gap: clamp(10px, 1vw, 16px);
        padding: clamp(10px, 1.05vw, 16px);
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        transition:
          grid-template-columns 340ms cubic-bezier(.2, .8, .2, 1),
          gap 260ms ease;
      }

      .hf-article-page.is-reader-preview {
        height: 100dvh;
        min-height: 100dvh;
        overflow: hidden;
        padding: 0;
      }

      .hf-article-page.is-reader-preview .hf-article-shell {
        display: flex;
        height: 100%;
        min-width: 0;
      }

      .hf-article-page.is-reader-preview .hf-article-top {
        display: none;
      }

      .hf-article-page.is-reader-preview .hf-article-editor {
        display: grid;
        flex: 1 1 auto;
        grid-template-columns: minmax(0, 1fr) minmax(430px, 0.74fr);
        align-items: stretch;
        width: 100%;
        height: 100%;
        min-width: 0;
        min-height: 0;
        overflow: hidden;
      }

      .hf-article-reader-preview-inline-host {
        display: grid;
        height: 100%;
        min-height: 0;
        overflow: hidden;
      }

      .hf-article-page.is-reader-preview .hf-article-editor__canvas {
        height: calc(100dvh - clamp(20px, 2.1vw, 32px));
        min-height: 0;
        overflow-y: auto;
        padding: 0;
      }

      .hf-article-page.is-reader-preview .hf-article-editor__canvas > :not(.hf-article-reader-preview-inline-host) {
        display: none !important;
      }

      .hf-article-page.is-reader-preview .hf-article-editor__preview-head {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
        padding: 4px 4px 0;
      }

      .hf-article-page.is-reader-preview .hf-article-editor__preview-report {
        display: none !important;
      }

      .hf-article-page.is-reader-preview .hf-article-editor__preview {
        position: sticky;
        top: clamp(10px, 1vw, 16px);
        align-self: stretch;
        grid-template-rows: auto minmax(0, 1fr);
        height: calc(100dvh - clamp(20px, 2.1vw, 32px));
        min-height: 0;
        max-height: calc(100dvh - clamp(20px, 2.1vw, 32px));
      }

      .hf-article-page.is-reader-preview .hf-article-editor__preview .hf-article-editor__iframe {
        min-height: 0;
        height: 100%;
      }

      .hf-article-reader-preview {
        min-height: calc(100dvh - clamp(20px, 2.8vw, 36px));
      }

      .hf-article-reader-preview-inline-host .hf-article-reader-preview {
        min-height: 0;
        height: 100%;
        overflow-y: auto;
        padding: clamp(14px, 2vw, 24px);
      }

      .hf-article-reader-preview-inline-host .viewer-community-articles__layout {
        display: block;
      }

      .hf-article-reader-preview-inline-host .viewer-community-articles__copy {
        max-width: min(860px, 100%);
        margin: 0 auto;
      }

      .hf-article-editor__canvas,
      .hf-article-reader-preview,
      body.route-viewer.route-viewer-article,
      .page.route-viewer.viewer-community-article-active,
      .viewer-community-articles,
      .viewer-community-articles__copy {
        overflow-anchor: none;
      }

      .hf-article-reader-preview-inline-host .viewer-community-articles__visual {
        display: none;
      }

      .hf-article-preview-exit {
        position: fixed;
        top: clamp(12px, 1.65vw, 22px);
        right: clamp(16px, 2.2vw, 34px);
        z-index: 96;
        background: rgba(5, 13, 25, 0.78);
        border-color: rgba(255, 255, 255, 0.16);
        backdrop-filter: blur(16px);
      }

      .hf-article-reader-preview-inline-host .hf-article-preview-exit {
        position: sticky;
        top: 0;
        right: auto;
        z-index: 40;
        display: flex;
        width: fit-content;
        margin: 0 0 12px auto;
        box-shadow:
          0 12px 34px rgba(0, 0, 0, 0.26),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .hf-article-editor__canvas,
      .hf-article-editor__preview {
        display: grid;
        gap: 14px;
        min-width: 0;
        transition:
          grid-template-columns 340ms cubic-bezier(.2, .8, .2, 1),
          column-gap 260ms ease,
          width 340ms cubic-bezier(.2, .8, .2, 1),
          max-width 340ms cubic-bezier(.2, .8, .2, 1),
          transform 340ms cubic-bezier(.2, .8, .2, 1),
          border-color 220ms ease,
          background 220ms ease;
      }

      .hf-article-editor__canvas {
        grid-template-rows: auto max-content;
        align-content: start;
        height: 100%;
        min-height: 0;
        overflow-x: clip;
        overflow-y: auto;
        padding: clamp(10px, 1.1vw, 16px);
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 24px;
        background:
          radial-gradient(circle at 0% 0%, rgba(136, 215, 255, 0.07), transparent 30%),
          rgba(0, 0, 0, 0.14);
        scrollbar-color: #1b212f transparent;
        scrollbar-width: thin;
      }

      .hf-article-editor__canvas::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      .hf-article-editor__canvas::-webkit-scrollbar-track {
        border-radius: 999px;
        background: transparent;
        box-shadow: none;
      }

      .hf-article-editor__canvas::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #1b212f;
        box-shadow: none;
      }

      .hf-article-editor__canvas::-webkit-scrollbar-thumb:hover {
        background: #242b3b;
      }

      .hf-article-editor__canvas::-webkit-scrollbar-corner {
        background: transparent;
      }

      .hf-article-editor__preview {
        --hf-article-preview-info-rail: clamp(260px, 34%, 340px);
        --hf-article-preview-info-gap: clamp(12px, 1vw, 16px);
        position: sticky;
        top: clamp(10px, 1.05vw, 16px);
        align-self: start;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 0px;
        grid-template-rows: auto minmax(0, 1fr);
        column-gap: 0;
        height: 100%;
        max-height: none;
        min-height: 0;
        overflow: hidden;
        padding: 12px;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 26px;
        background: var(--preview-surface);
        background-color: #07111d;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
      }

      .hf-article-editor__preview::after {
        content: "";
        position: absolute;
        top: calc(var(--hf-article-preview-head-height, 92px) + 18px);
        right: 12px;
        bottom: 12px;
        left: 12px;
        z-index: 2;
        border: 1px solid rgba(136, 215, 255, 0.13);
        border-radius: 20px;
        background:
          linear-gradient(100deg, transparent 0%, rgba(136, 215, 255, 0.12) 42%, transparent 68%) -180% 0 / 240% 100% no-repeat,
          radial-gradient(circle at 42% 36%, rgba(156, 255, 99, 0.08), transparent 30%),
          radial-gradient(circle at 64% 62%, rgba(136, 215, 255, 0.08), transparent 34%),
          linear-gradient(180deg, rgba(9, 19, 32, 0.96), rgba(3, 8, 16, 0.98));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 18px 48px rgba(0, 0, 0, 0.18);
        opacity: 0;
        pointer-events: none;
        transform: scale(0.992);
        transition:
          opacity 180ms ease,
          transform 220ms ease;
      }

      .hf-article-editor__preview.is-loading-visual::after {
        opacity: 1;
        transform: scale(1);
        animation: hf-article-visual-skeleton 1.45s ease-in-out infinite;
      }

      .hf-article-editor__preview-head {
        position: relative;
        z-index: 3;
        grid-column: 1;
        grid-row: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: start;
        min-width: 0;
        padding: 4px 4px 0;
      }

      .hf-article-editor__preview-title-stack {
        position: relative;
        grid-column: 1;
        grid-row: 1;
        min-height: 44px;
        min-width: 0;
      }

      .hf-article-editor__preview-default,
      .hf-article-editor__preview-node {
        min-width: 0;
        transition:
          opacity 180ms ease,
          transform 180ms ease;
      }

      .hf-article-editor__preview-node {
        position: absolute;
        inset: 0;
        display: grid;
        align-content: center;
        gap: 5px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(8px);
      }

      .hf-article-editor__preview-head--node-selected .hf-article-editor__preview-default {
        opacity: 0;
        pointer-events: none;
        transform: translateY(-8px);
      }

      .hf-article-editor__preview-head--node-selected .hf-article-editor__preview-node {
        opacity: 1;
        pointer-events: auto;
        transform: none;
      }

      .hf-article-editor__preview-head--node-selected .hf-article-editor__preview-mention {
        display: inline-flex;
      }

      .hf-article-editor__preview-kicker {
        color: rgba(197, 208, 227, 0.56);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .hf-article-editor__preview-title {
        display: block;
        margin-top: 2px;
        color: rgba(235, 248, 255, 0.92);
        font-size: 0.98rem;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .hf-article-editor__preview-node-row {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .hf-article-editor__preview-node-name {
        min-width: 0;
        color: rgba(235, 248, 255, 0.94);
        font-family: "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, monospace;
        font-size: clamp(0.9rem, 2.8vw, 1.08rem);
        line-height: 1.05;
        letter-spacing: -0.035em;
        overflow-wrap: anywhere;
      }

      .hf-article-editor__preview-mention {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 6px;
        flex: 0 0 auto;
        width: auto;
        min-width: 106px;
        min-height: 32px;
        padding: 0 14px;
        border: 1px solid rgba(156, 255, 99, 0.28);
        border-radius: 999px;
        background: rgba(156, 255, 99, 0.1);
        color: rgba(226, 255, 213, 0.94);
        font: inherit;
        font-size: 0.68rem;
        font-weight: 820;
        letter-spacing: 0.11em;
        text-transform: uppercase;
        cursor: pointer;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          color 160ms ease,
          opacity 160ms ease;
      }

      .hf-article-editor__preview-mention:hover,
      .hf-article-editor__preview-mention:focus-visible {
        background: rgba(156, 255, 99, 0.16);
        border-color: rgba(156, 255, 99, 0.42);
        color: #ffffff;
        outline: none;
      }

      .hf-article-editor__preview-mention:disabled {
        cursor: default;
        opacity: 0.55;
      }

      .hf-article-editor__preview-mention svg {
        width: 14px;
        height: 14px;
        flex: 0 0 auto;
      }

      .hf-article-editor__preview-report {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        grid-column: 2;
        grid-row: 1;
        justify-self: end;
        align-self: start;
        gap: 7px;
        width: fit-content;
        min-height: 24px;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: transparent;
        color: rgba(159, 173, 197, 0.78);
        font: inherit;
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        white-space: nowrap;
        transition:
          color 160ms ease,
          opacity 160ms ease,
          transform 160ms ease;
      }

      .hf-article-editor__preview-report:hover,
      .hf-article-editor__preview-report:focus-visible {
        color: var(--text);
        opacity: 1;
        outline: none;
      }

      .hf-article-editor__preview-report:active {
        transform: translateY(1px);
      }

      .hf-article-editor__preview-report-icon,
      .hf-article-editor__preview-report-icon svg {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        display: inline-block;
        opacity: 0.76;
      }

      .hf-article-granularity {
        display: flex;
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        max-width: 100%;
        justify-content: space-between;
        border-radius: 18px;
        background: rgba(9, 15, 28, 0.72);
        box-sizing: border-box;
      }

      .hf-article-granularity .viewer-granularity__slider {
        flex: 1 1 120px;
        width: auto;
        min-width: 110px;
      }

      .hf-article-granularity .viewer-granularity__value {
        flex: 0 0 7.2ch;
        width: 7.2ch;
        min-width: 7.2ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .hf-article-field {
        display: grid;
        gap: 7px;
        min-width: 0;
      }

      .hf-article-field__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
      }

      .hf-article-field__label {
        color: rgba(197, 208, 227, 0.7);
        font-size: 0.78rem;
        font-weight: 780;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .hf-article-field__budget {
        color: rgba(197, 208, 227, 0.56);
        font-size: 0.78rem;
        font-weight: 650;
        letter-spacing: 0.01em;
        text-align: right;
        white-space: nowrap;
      }

      .hf-article-field__budget.is-over {
        color: #ffb8b8;
      }

      .hf-article-input,
      .hf-article-textarea,
      .hf-article-body {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 18px;
        background: rgba(0, 0, 0, 0.26);
        color: var(--text);
        font: inherit;
        outline: none;
      }

      .hf-article-input,
      .hf-article-textarea {
        padding: 13px 14px;
      }

      .hf-article-input {
        font-size: clamp(1.05rem, 1.55vw, 1.7rem);
        font-weight: 820;
        letter-spacing: -0.045em;
        line-height: 1.08;
      }

      .hf-article-field--title {
        gap: 0;
      }

      .hf-article-field--title .hf-article-input {
        padding: 0;
        overflow: hidden;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        text-overflow: ellipsis;
      }

      .hf-article-field--title .hf-article-input:hover,
      .hf-article-field--title .hf-article-input:focus {
        border-radius: 12px;
        outline: 1px solid rgba(136, 215, 255, 0.38);
        outline-offset: 6px;
        background: rgba(136, 215, 255, 0.04);
        box-shadow: 0 0 0 5px rgba(136, 215, 255, 0.035);
        cursor: text;
      }

      .hf-article-field--intro {
        max-width: 980px;
        gap: 4px;
        max-height: 0;
        overflow: hidden;
        opacity: 0;
        pointer-events: none;
        transform: translateY(-6px);
        transition:
          max-height 210ms ease,
          opacity 170ms ease,
          transform 210ms ease;
      }

      .hf-article-top.is-intro-open .hf-article-field--intro {
        max-height: 124px;
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
      }

      .hf-article-field--intro .hf-article-field__head {
        gap: 8px;
      }

      .hf-article-field--intro .hf-article-textarea {
        min-height: 42px;
        max-height: 72px;
        padding: 7px 0 0;
        overflow: auto;
        border: 0;
        border-radius: 0;
        background: transparent;
        color: rgba(197, 208, 227, 0.78);
        font-size: 0.94rem;
        line-height: 1.42;
        resize: none;
      }

      .hf-article-textarea {
        min-height: 84px;
        resize: vertical;
        line-height: 1.55;
      }

      .hf-article-body {
        align-self: stretch;
        box-sizing: border-box;
        min-height: var(--hf-article-body-min-height, max(430px, calc(100dvh - 360px)));
        height: auto;
        padding: 18px;
        line-height: 1.75;
        overflow: visible;
        overflow-wrap: anywhere;
        scrollbar-color: #1b212f transparent;
        scrollbar-width: thin;
      }

      #hf-article-body {
        clip-path: inset(0 round 18px);
      }

      .hf-article-input::selection,
      .hf-article-textarea::selection,
      .hf-article-body ::selection,
      .hf-article-body::selection {
        background: rgba(255, 210, 126, 0.3);
        color: rgba(255, 249, 230, 0.98);
      }

      .hf-article-body::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      .hf-article-body::-webkit-scrollbar-track {
        border-radius: 999px;
        background: transparent;
      }

      .hf-article-body::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #1b212f;
      }

      .hf-article-body::-webkit-scrollbar-thumb:hover {
        background: #242b3b;
      }

      .hf-article-body::-webkit-scrollbar-corner {
        background: transparent;
      }

      .hf-article-body p,
      .hf-article-body blockquote,
      .hf-article-body ul,
      .hf-article-body ol {
        margin: 0 0 1em;
      }

      .hf-article-body h2,
      .hf-article-body h3 {
        margin: 1.15em 0 0.45em;
        color: rgba(235, 248, 255, 0.96);
        letter-spacing: -0.045em;
        line-height: 1.08;
      }

      #hf-article-body > :first-child {
        margin-top: 0;
      }

      .hf-article-body h2 {
        font-size: clamp(1.6rem, 3vw, 2.25rem);
      }

      .hf-article-body h3 {
        font-size: clamp(1.25rem, 2.2vw, 1.6rem);
      }

      .hf-article-body blockquote {
        position: relative;
        isolation: isolate;
        padding: 22px 8px 22px 52px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: rgba(231, 243, 252, 0.92);
        overflow: visible;
      }

      .hf-article-body blockquote::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 50%;
        left: 19px;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #9cff63;
        box-shadow:
          0 0 0 8px rgba(156, 255, 99, 0.065),
          0 0 30px rgba(156, 255, 99, 0.36),
          0 0 72px rgba(136, 215, 255, 0.12);
        transform: translateY(-50%);
        pointer-events: none;
      }

      .hf-article-body blockquote::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 50%;
        left: -82px;
        width: 274px;
        height: 154px;
        border-radius: 999px;
        opacity: 0.88;
        background: rgba(156, 255, 99, 0.14);
        box-shadow:
          92px -22px 92px rgba(136, 215, 255, 0.13),
          160px 40px 92px rgba(136, 215, 255, 0.062);
        filter: blur(24px);
        transform: translateY(-50%);
        pointer-events: none;
      }

      .hf-article-body ul,
      .hf-article-body ol {
        padding-left: 1.35em;
      }

      .hf-article-body li {
        margin: 0.26em 0;
      }

      .hf-article-body a,
      .viewer-community-articles__body a:not(.viewer-node-link) {
        color: rgba(161, 232, 255, 0.96);
        text-decoration-color: rgba(136, 215, 255, 0.45);
        text-underline-offset: 0.16em;
      }

      .hf-article-body a.viewer-community-articles__muted-link,
      .viewer-community-articles__body a.viewer-community-articles__muted-link {
        color: inherit;
        text-decoration: none;
        border-radius: 0.45em;
        transition:
          color 160ms ease,
          background 160ms ease,
          box-shadow 160ms ease;
      }

      .hf-article-body a.viewer-community-articles__muted-link:hover,
      .hf-article-body a.viewer-community-articles__muted-link:focus-visible,
      .viewer-community-articles__body a.viewer-community-articles__muted-link:hover,
      .viewer-community-articles__body a.viewer-community-articles__muted-link:focus-visible {
        color: rgba(235, 248, 255, 0.94);
        text-decoration: none;
        background: rgba(136, 215, 255, 0.07);
        box-shadow: 0 0 0 4px rgba(136, 215, 255, 0.06);
        outline: none;
      }

      .hf-article-body code,
      .viewer-community-articles__body code {
        padding: 0.08em 0.34em;
        border-radius: 0.45em;
        border: 1px solid rgba(197, 208, 227, 0.16);
        background: rgba(1, 7, 14, 0.58);
        color: rgba(226, 237, 246, 0.92);
        font-family: "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, monospace;
        font-size: 0.92em;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
      }

      .hf-article-body .viewer-community-articles__keycap,
      .viewer-community-articles__body .viewer-community-articles__keycap {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: auto;
        min-width: 1.58em;
        height: 1.5em;
        padding: 0 0.42em;
        margin: -0.02em 0.08em 0;
        text-transform: none;
        vertical-align: 0.03em;
        white-space: nowrap;
      }

      .hf-article-body .viewer-community-articles__inline-media,
      .viewer-community-articles__body .viewer-community-articles__inline-media {
        display: inline-flex;
        align-items: center;
        max-width: min(100%, 24em);
        height: 1.85em;
        margin: -0.18em 0.06em -0.26em;
        border: 1px solid rgba(136, 215, 255, 0.12);
        border-radius: 0.58em;
        background:
          linear-gradient(90deg, rgba(16, 255, 166, 0.08), rgba(136, 215, 255, 0.035)),
          rgba(0, 7, 13, 0.42);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.05),
          0 8px 20px rgba(0, 0, 0, 0.2);
        overflow: hidden;
        vertical-align: -0.48em;
      }

      .hf-article-body .viewer-community-articles__inline-media img,
      .viewer-community-articles__body .viewer-community-articles__inline-media img {
        display: block;
        width: auto;
        height: 100%;
        max-width: 100%;
        object-fit: contain;
      }

      .hf-article-body .viewer-community-articles__math-var,
      .viewer-community-articles__body .viewer-community-articles__math-var {
        white-space: nowrap;
      }

      .hf-article-body .viewer-community-articles__math-var sub,
      .viewer-community-articles__body .viewer-community-articles__math-var sub {
        position: relative;
        bottom: -0.22em;
        font-size: 0.68em;
        line-height: 0;
      }

      .hf-article-body pre,
      .viewer-community-articles__body pre {
        overflow: auto;
        margin: 1.05em 0;
        padding: 16px;
        border: 1px solid rgba(136, 215, 255, 0.14);
        border-radius: 18px;
        background:
          linear-gradient(135deg, rgba(136, 215, 255, 0.08), rgba(156, 255, 99, 0.035)),
          rgba(1, 7, 14, 0.88);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
        scrollbar-color: rgba(136, 215, 255, 0.28) rgba(1, 7, 14, 0.35);
        scrollbar-width: thin;
      }

      .hf-article-body pre::-webkit-scrollbar,
      .viewer-community-articles__body pre::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      .hf-article-body pre::-webkit-scrollbar-track,
      .viewer-community-articles__body pre::-webkit-scrollbar-track {
        border-radius: 999px;
        background: rgba(1, 7, 14, 0.35);
      }

      .hf-article-body pre::-webkit-scrollbar-thumb,
      .viewer-community-articles__body pre::-webkit-scrollbar-thumb {
        border: 2px solid rgba(1, 7, 14, 0.35);
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.28);
      }

      .hf-article-body pre::-webkit-scrollbar-thumb:hover,
      .viewer-community-articles__body pre::-webkit-scrollbar-thumb:hover {
        background: rgba(136, 215, 255, 0.42);
      }

      .hf-article-body pre code,
      .viewer-community-articles__body pre code {
        display: block;
        min-height: 4.8em;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: rgba(232, 246, 255, 0.92);
        font: 0.88rem/1.42 "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, monospace;
        tab-size: 2;
        white-space: pre;
        box-decoration-break: initial;
        -webkit-box-decoration-break: initial;
      }

      .hf-article-body pre code *,
      .viewer-community-articles__body pre code * {
        line-height: inherit;
      }

      .hf-article-body pre code .viewer-node-link,
      .viewer-community-articles__body pre code .viewer-node-link {
        display: inline !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(var(--viewer-node-link-text-rgb), 0.96) !important;
        font: inherit;
        line-height: inherit !important;
        vertical-align: baseline !important;
        white-space: inherit;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.17em;
      }

      .hf-article-body pre code .viewer-node-link:hover,
      .hf-article-body pre code .viewer-node-link:focus-visible,
      .hf-article-body pre code .viewer-node-link.is-active,
      .viewer-community-articles__body pre code .viewer-node-link:hover,
      .viewer-community-articles__body pre code .viewer-node-link:focus-visible,
      .viewer-community-articles__body pre code .viewer-node-link.is-active {
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        color: rgba(var(--viewer-node-link-text-rgb), 0.98) !important;
      }

      .viewer-community-articles__inline-code-node,
      .viewer-community-articles__inline-code-group {
        display: inline;
      }

      .viewer-community-articles__inline-code-node .viewer-node-link,
      .viewer-community-articles__inline-code-group .viewer-node-link {
        display: inline;
        box-shadow: none;
        background: transparent;
        font: inherit;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.17em;
      }

      .hf-article-body pre code:focus {
        outline: none;
      }

      .hf-article-body pre:focus-within {
        border-color: rgba(136, 215, 255, 0.34);
        box-shadow:
          0 0 0 1px rgba(136, 215, 255, 0.08),
          0 18px 48px rgba(0, 0, 0, 0.22);
      }

      .hf-article-body pre code:empty::before {
        content: "# Python code";
        color: rgba(197, 208, 227, 0.42);
      }

      .hf-article-code-token--keyword {
        color: #88d7ff;
      }

      .hf-article-code-token--builtin {
        color: #a2ff8a;
      }

      .hf-article-code-token--definition {
        color: #ffe7a3;
      }

      .hf-article-code-token--call {
        color: #9fe8ff;
      }

      .hf-article-code-token--property {
        color: #c8f7ff;
      }

      .hf-article-code-token--dunder {
        color: #b7c5ff;
      }

      .hf-article-code-token--constant {
        color: #ffb4df;
      }

      .hf-article-code-token--module {
        color: #b7ffc7;
      }

      .hf-article-code-token--decorator {
        color: #c7a6ff;
      }

      .hf-article-code-token--string {
        color: #ffd27e;
      }

      .hf-article-code-token--number {
        color: #ff9ecb;
      }

      .hf-article-code-token--operator,
      .hf-article-code-token--punctuation {
        color: rgba(184, 210, 226, 0.72);
      }

      .hf-article-code-token--comment {
        color: rgba(197, 208, 227, 0.56);
        font-style: italic;
      }

      .hf-article-body:empty::before {
        content: "Write a model walkthrough, you can use @ to mention layers in the model.";
        color: rgba(197, 208, 227, 0.45);
      }

      .hf-article-toolbar {
        --hf-article-toolbar-scroll-mask-height: calc(clamp(10px, 1.1vw, 16px) + 20px);
        display: flex;
        position: sticky;
        top: 0;
        z-index: 5;
        isolation: isolate;
        flex-wrap: wrap;
        align-items: center;
        gap: 6px;
        overflow: visible;
        padding: 7px;
        border: 1px solid rgba(136, 215, 255, 0.1);
        border-radius: 18px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.02)),
          rgba(2, 8, 16, 0.84);
        backdrop-filter: blur(16px);
        box-sizing: border-box;
        transition:
          height 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
          max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
          padding 220ms ease,
          gap 220ms ease,
          border-radius 220ms ease,
          background 220ms ease,
          box-shadow 220ms ease;
      }

      .hf-article-toolbar::before {
        content: "";
        position: absolute;
        right: calc(-1 * clamp(10px, 1.1vw, 16px) - 2px);
        bottom: calc(100% - 1px);
        left: calc(-1 * clamp(10px, 1.1vw, 16px) - 2px);
        z-index: -1;
        height: var(--hf-article-toolbar-scroll-mask-height);
        pointer-events: none;
        background:
          radial-gradient(circle at 0% 0%, rgba(136, 215, 255, 0.07), transparent 55%),
          linear-gradient(180deg, rgba(4, 10, 19, 0.98), rgba(3, 9, 18, 0.94));
        backdrop-filter: blur(10px);
      }

      .hf-article-toolbar.is-size-morphing {
        overflow: hidden !important;
        scrollbar-width: none;
        will-change: height, max-height;
      }

      .hf-article-toolbar.is-size-morphing::-webkit-scrollbar {
        display: none;
      }

      .hf-article-toolbar__group {
        display: flex;
        flex: 0 1 auto;
        flex-wrap: wrap;
        min-width: 0;
        gap: 3px;
        padding: 3px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        border-radius: 14px;
        background: rgba(2, 8, 16, 0.46);
      }

      .hf-article-toolbar .hf-article-status {
        flex: 1 1 130px;
        min-width: 120px;
        overflow: hidden;
        font-size: 0.78rem;
        text-align: right;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .hf-article-tool {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 7px;
        min-height: 30px;
        padding: 0 8px;
        border: 0;
        border-radius: 11px;
        background: transparent;
        color: rgba(223, 247, 255, 0.76);
        font: inherit;
        font-size: 0.78rem;
        font-weight: 780;
        cursor: pointer;
        transition:
          background 150ms ease,
          color 150ms ease,
          transform 150ms ease;
      }

      .hf-article-tool:hover,
      .hf-article-tool:focus-visible,
      .hf-article-tool.is-active {
        background: rgba(136, 215, 255, 0.12);
        color: rgba(235, 248, 255, 0.96);
        outline: none;
      }

      .hf-article-tool:active {
        transform: translateY(1px);
      }

      .hf-article-tool--accent {
        background: rgba(156, 255, 99, 0.09);
        color: rgba(235, 255, 218, 0.94);
      }

      .hf-article-tool svg,
      .hf-article-node-icon {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
        color: currentColor;
      }

      .hf-article-tool--icon-only {
        width: 32px;
        padding: 0;
      }

      .hf-article-toolbar-tooltip {
        position: fixed;
        z-index: 10000;
        max-width: min(240px, calc(100vw - 24px));
        padding: 7px 10px;
        border: 1px solid rgba(136, 215, 255, 0.22);
        border-radius: 10px;
        background:
          linear-gradient(180deg, rgba(21, 39, 54, 0.98), rgba(5, 13, 22, 0.98));
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        color: rgba(235, 248, 255, 0.96);
        font-size: 0.75rem;
        font-weight: 760;
        line-height: 1.2;
        letter-spacing: 0.01em;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, calc(-100% - 8px)) scale(0.98);
        transition:
          opacity 120ms ease,
          transform 120ms ease;
      }

      .hf-article-toolbar-tooltip::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: -5px;
        width: 9px;
        height: 9px;
        border-right: 1px solid rgba(136, 215, 255, 0.22);
        border-bottom: 1px solid rgba(136, 215, 255, 0.22);
        background: rgba(5, 13, 22, 0.98);
        transform: translateX(-50%) rotate(45deg);
      }

      .hf-article-toolbar-tooltip.is-below::after {
        top: -5px;
        bottom: auto;
        border-right: 0;
        border-bottom: 0;
        border-left: 1px solid rgba(136, 215, 255, 0.22);
        border-top: 1px solid rgba(136, 215, 255, 0.22);
      }

      .hf-article-toolbar-tooltip.is-visible {
        opacity: 1;
        transform: translate(-50%, calc(-100% - 10px)) scale(1);
      }

      @media (min-width: 981px) {
        .hf-article-page.is-preview-side-rail-open .hf-article-editor {
          grid-template-columns: minmax(300px, 0.58fr) minmax(680px, 1.22fr);
          gap: clamp(8px, 0.8vw, 13px);
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-editor__preview {
          --hf-article-preview-graph-column: calc(
            100% - var(--hf-article-preview-info-rail) - var(--hf-article-preview-info-gap)
          );
          --hf-article-preview-frame-cut: calc(var(--hf-article-preview-head-height, 92px) + 14px);
          grid-template-columns: minmax(0, 1fr) var(--hf-article-preview-info-rail);
          grid-template-rows: auto minmax(0, 1fr);
          column-gap: var(--hf-article-preview-info-gap);
          row-gap: 14px;
          background: var(--preview-surface);
          background-color: #07111d;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-editor__preview-head {
          z-index: 3;
          grid-column: 1;
          grid-row: 1;
          align-self: stretch;
          justify-self: start;
          width: min(100%, var(--hf-article-preview-graph-slot-width, 100%));
          min-width: 0;
          max-width: min(100%, var(--hf-article-preview-graph-slot-width, 100%));
          box-sizing: border-box;
          overflow: clip;
          padding: 4px 4px 0;
          contain: paint;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-editor__preview-title-stack,
        .hf-article-page.is-preview-side-rail-open .hf-article-editor__preview-default,
        .hf-article-page.is-preview-side-rail-open .hf-article-editor__preview-node {
          min-width: 0;
          max-width: 100%;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-editor__preview-node-row {
          display: grid;
          grid-template-columns: minmax(0, 1fr) minmax(78px, auto);
          align-items: center;
          width: 100%;
          min-width: 0;
          max-width: 100%;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-editor__preview-node-name {
          min-width: 0;
          max-width: 100%;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-editor__preview-mention {
          justify-self: end;
          width: auto;
          min-width: 92px;
          max-width: min(104px, 100%);
          padding-inline: 12px;
          transform: translateZ(0);
          will-change: transform;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-editor__preview-report {
          display: none;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-granularity {
          box-sizing: border-box;
          display: grid;
          grid-template-columns: minmax(0, max-content) minmax(54px, 1fr) minmax(5.8ch, auto);
          align-items: center;
          justify-content: stretch;
          gap: 8px;
          width: 100%;
          min-width: 0;
          max-width: 100%;
          overflow: clip;
          clip-path: inset(0 round 18px);
          transform: translateZ(0);
          will-change: transform;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-granularity .viewer-granularity__label,
        .hf-article-page.is-preview-side-rail-open .hf-article-granularity .viewer-granularity__value {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-granularity .viewer-granularity__slider {
          width: 100%;
          min-width: 54px;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-granularity .viewer-granularity__value {
          justify-self: end;
          flex-basis: auto;
        }

        .hf-article-page.is-preview-info-open .hf-article-editor__iframe {
          z-index: 1;
          grid-column: 1 / -1;
          grid-row: 1 / 3;
          height: 100%;
          min-height: 0;
          border-color: transparent;
          background: var(--preview-surface);
          background-color: #07111d;
          -webkit-clip-path: var(--hf-article-preview-frame-clip, none);
          clip-path: var(--hf-article-preview-frame-clip, none);
        }

        .hf-article-page.is-preview-graph-detail-open .hf-article-editor__iframe {
          grid-column: 1;
          grid-row: 2;
          height: 100%;
          min-height: 0;
          border-color: rgba(255, 255, 255, 0.1);
          filter: saturate(0.94) brightness(0.88);
          -webkit-clip-path: none;
          clip-path: none;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-toolbar {
          flex-wrap: nowrap;
          align-items: center;
          gap: 5px;
          overflow-x: auto;
          overflow-y: hidden;
          overscroll-behavior-x: contain;
          min-height: 68px;
          padding: 8px;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
          box-shadow:
            0 0 0 6px rgba(3, 9, 18, 0.86),
            0 0 0 7px rgba(136, 215, 255, 0.12),
            0 16px 42px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
          transition:
            height 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
            max-height 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
            padding 220ms ease,
            gap 220ms ease,
            border-radius 220ms ease,
            background 220ms ease,
            box-shadow 220ms ease;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-toolbar::-webkit-scrollbar {
          display: none;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-toolbar__group {
          flex: 0 0 auto;
          flex-wrap: nowrap;
          align-items: center;
          gap: 3px;
          min-height: 52px;
          padding: 4px;
          border-radius: 15px;
          transition:
            padding 180ms ease,
            gap 180ms ease,
            border-radius 180ms ease;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-toolbar .hf-article-status {
          display: none;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-tool {
          min-height: 42px;
          padding: 0 12px;
          font-size: 0.78rem;
        }

        .hf-article-page.is-preview-side-rail-open .hf-article-tool--icon-only {
          width: 42px;
          padding: 0;
        }
      }

      .hf-article-node-icon {
        width: 16px;
        height: 16px;
        color: currentColor;
      }

      .hf-article-node-menu {
        position: fixed;
        z-index: 500;
        width: min(420px, calc(100vw - 28px));
        max-height: 320px;
        overflow: auto;
        padding: 8px;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 18px;
        background: rgba(5, 11, 21, 0.96);
        box-shadow: 0 24px 70px rgba(0, 0, 0, 0.44);
        scrollbar-color: rgba(197, 208, 227, 0.26) rgba(255, 255, 255, 0.025);
        scrollbar-width: thin;
      }

      .hf-article-node-menu[data-mode="retarget"] {
        z-index: 560;
      }

      .hf-article-node-menu::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      .hf-article-node-menu::-webkit-scrollbar-track {
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.025);
      }

      .hf-article-node-menu::-webkit-scrollbar-thumb {
        border: 3px solid rgba(5, 11, 21, 0.96);
        border-radius: 999px;
        background: rgba(197, 208, 227, 0.24);
      }

      .hf-article-node-menu::-webkit-scrollbar-thumb:hover {
        background: rgba(197, 208, 227, 0.34);
      }

      .hf-article-node-menu::-webkit-scrollbar-corner {
        background: transparent;
      }

      .hf-article-node-menu[hidden] {
        display: none;
      }

      .hf-article-popover {
        position: fixed;
        z-index: 520;
        width: min(380px, calc(100vw - 28px));
        padding: 10px;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 20px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.025)),
          rgba(5, 11, 21, 0.97);
        box-shadow: 0 24px 74px rgba(0, 0, 0, 0.48);
        backdrop-filter: blur(18px);
      }

      .hf-article-popover[hidden] {
        display: none;
      }

      .hf-article-popover__form {
        display: grid;
        gap: 10px;
      }

      .hf-article-popover__head,
      .hf-article-popover__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
      }

      .hf-article-popover__head strong {
        color: rgba(235, 248, 255, 0.96);
        font-size: 0.9rem;
        letter-spacing: -0.01em;
      }

      .hf-article-popover__close {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        color: rgba(223, 247, 255, 0.8);
        font: inherit;
        font-size: 1.25rem;
        line-height: 1;
        cursor: pointer;
      }

      .hf-article-popover__close:hover,
      .hf-article-popover__close:focus-visible {
        background: rgba(136, 215, 255, 0.14);
        color: rgba(235, 248, 255, 0.98);
        outline: none;
      }

      .hf-article-popover__field {
        display: grid;
        gap: 5px;
      }

      .hf-article-popover__field span {
        color: rgba(197, 208, 227, 0.62);
        font-size: 0.72rem;
        font-weight: 760;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .hf-article-popover__field input,
      .hf-article-popover__field textarea {
        width: 100%;
        padding: 10px 11px;
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 13px;
        background: rgba(0, 0, 0, 0.26);
        color: rgba(235, 248, 255, 0.94);
        font: inherit;
        font-size: 0.9rem;
        outline: none;
      }

      .hf-article-popover__field textarea {
        min-height: min(42vh, 360px);
        resize: vertical;
        font-family: "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, monospace;
        font-size: 0.82rem;
        line-height: 1.45;
        white-space: pre;
        overflow: auto;
        tab-size: 2;
      }

      .hf-article-popover__field input:focus,
      .hf-article-popover__field textarea:focus {
        border-color: rgba(136, 215, 255, 0.42);
        box-shadow: 0 0 0 3px rgba(136, 215, 255, 0.1);
      }

      .hf-article-popover__field input[readonly],
      .hf-article-popover__field textarea[readonly] {
        color: rgba(197, 208, 227, 0.62);
        cursor: default;
      }

      .hf-article-popover--markdown {
        width: min(720px, calc(100vw - 28px));
        max-width: calc(100vw - 28px);
      }

      .hf-article-node-configure {
        position: fixed;
        z-index: 515;
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        border: 0;
        border-radius: 999px;
        background: rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.28);
        color: rgba(var(--viewer-node-link-text-rgb, 201, 227, 238), 0.92);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12);
        cursor: pointer;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.9);
        transition:
          opacity 140ms ease,
          transform 160ms cubic-bezier(0.2, 0.9, 0.2, 1),
          background 160ms ease;
      }

      .hf-article-node-configure:not([hidden]) {
        opacity: 0.78;
        pointer-events: auto;
        transform: scale(1);
      }

      .hf-article-node-configure:hover,
      .hf-article-node-configure:focus-visible {
        opacity: 1;
        background: rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.42);
        outline: none;
      }

      .hf-article-node-configure svg {
        width: 13px;
        height: 13px;
      }

      .hf-article-popover__hint {
        margin: -2px 2px 0;
        color: rgba(197, 208, 227, 0.58);
        font-size: 0.76rem;
        line-height: 1.4;
      }

      .hf-article-popover__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        font: inherit;
        font-size: 0.78rem;
        font-weight: 780;
        cursor: pointer;
      }

      .hf-article-popover__button--ghost {
        background: rgba(255, 255, 255, 0.07);
        color: rgba(223, 247, 255, 0.74);
      }

      .hf-article-popover__button--primary {
        background: linear-gradient(135deg, #a9ff68, #5edbff);
        color: #07100c;
        box-shadow: 0 10px 26px rgba(94, 219, 255, 0.18);
      }

      .hf-article-node-option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        padding: 10px 11px;
        border: 0;
        border-radius: 13px;
        background: transparent;
        color: var(--text);
        text-align: left;
        cursor: pointer;
      }

      .hf-article-node-option:hover,
      .hf-article-node-option:focus-visible {
        background: rgba(136, 215, 255, 0.1);
      }

      .hf-article-node-menu.is-pointer-hover-locked .hf-article-node-option:hover {
        background: transparent;
      }

      .hf-article-node-option.is-active {
        background: rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.14);
      }

      .hf-article-node-option__swatch {
        width: 12px;
        height: 12px;
        flex: 0 0 auto;
        border: 1px solid rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.8);
        border-radius: 4px;
        background: rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.72);
        box-shadow:
          0 0 0 3px rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.14),
          0 8px 18px rgba(0, 0, 0, 0.22);
      }

      .hf-article-node-option__copy {
        display: grid;
        min-width: 0;
        gap: 4px;
      }

      .hf-article-node-option__label {
        justify-self: start;
      }

      .hf-article-node-option__meta {
        display: flex;
        align-items: center;
        min-width: 0;
        gap: 6px;
      }

      .hf-article-node-option__type,
      .hf-article-editor__node-token-type {
        max-width: 16rem;
        overflow: hidden;
        border: 1px solid rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.26);
        border-radius: 999px;
        background: rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.12);
        color: rgba(var(--viewer-node-link-text-rgb, 201, 227, 238), 0.94);
        font-size: 0.72em;
        font-weight: 760;
        letter-spacing: 0.015em;
        line-height: 1;
        padding: 0.22em 0.48em;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .hf-article-node-option__ref {
        overflow: hidden;
        color: rgba(197, 208, 227, 0.55);
        font-size: 0.82rem;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .hf-article-node-screen-frame {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 90;
        width: 0;
        height: 0;
        opacity: 0;
        pointer-events: none;
        overflow: hidden;
        border-radius: 24px;
        transform: translate3d(0, 0, 0) scale(1);
        transform-origin: center;
        transition:
          opacity 140ms ease,
          transform 240ms ease;
      }

      .hf-article-node-screen-frame.is-visible {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
      }

      .hf-article-node-screen-frame__inner {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        transform-origin: center;
        animation: hfArticleNodeFrameBreathe 1850ms ease-in-out infinite;
      }

      .hf-article-node-screen-frame__corner {
        --hf-article-node-frame-size: 22px;
        --hf-article-node-frame-thickness: 3px;
        position: absolute;
        width: var(--hf-article-node-frame-size);
        height: var(--hf-article-node-frame-size);
        border-color: rgba(255, 255, 255, 0.98);
        filter:
          drop-shadow(0 0 1px rgba(0, 0, 0, 0.95))
          drop-shadow(0 2px 4px rgba(0, 0, 0, 0.55))
          drop-shadow(0 0 10px rgba(var(--viewer-node-link-underline-rgb, 136, 215, 255), 0.26));
      }

      .hf-article-node-screen-frame__corner--tl {
        left: 0;
        top: 0;
        border-left: var(--hf-article-node-frame-thickness) solid;
        border-top: var(--hf-article-node-frame-thickness) solid;
        border-top-left-radius: 8px;
      }

      .hf-article-node-screen-frame__corner--tr {
        right: 0;
        top: 0;
        border-right: var(--hf-article-node-frame-thickness) solid;
        border-top: var(--hf-article-node-frame-thickness) solid;
        border-top-right-radius: 8px;
      }

      .hf-article-node-screen-frame__corner--br {
        right: 0;
        bottom: 0;
        border-right: var(--hf-article-node-frame-thickness) solid;
        border-bottom: var(--hf-article-node-frame-thickness) solid;
        border-bottom-right-radius: 8px;
      }

      .hf-article-node-screen-frame__corner--bl {
        left: 0;
        bottom: 0;
        border-left: var(--hf-article-node-frame-thickness) solid;
        border-bottom: var(--hf-article-node-frame-thickness) solid;
        border-bottom-left-radius: 8px;
      }

      .hf-article-frame-tooltip {
        --tooltip-bg: #111422;
        --tooltip-border: #2f354a;
        --tooltip-tip-size: 8px;
        --tooltip-tip-x: 50%;
        position: fixed;
        z-index: 2147483400;
        width: max-content;
        max-width: calc(100vw - 16px);
        padding: 0.35rem 0.55rem;
        border: 1px solid var(--tooltip-border);
        border-radius: 8px;
        background: var(--tooltip-bg);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        color: var(--base-content, #edf2ff);
        font-size: 0.85rem;
        line-height: normal;
        white-space: nowrap;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.12s ease;
      }

      .hf-article-frame-tooltip.is-visible {
        opacity: 1;
      }

      .hf-article-frame-tooltip::after {
        content: "";
        position: absolute;
        left: var(--tooltip-tip-x);
        width: var(--tooltip-tip-size);
        height: var(--tooltip-tip-size);
        background: var(--tooltip-bg);
        border: 1px solid var(--tooltip-border);
        pointer-events: none;
        transform: translateX(-50%) rotate(45deg);
      }

      .hf-article-frame-tooltip[data-tooltip-placement="top"]::after {
        bottom: calc(var(--tooltip-tip-size) * -0.5 - 1px);
        border-left: 0;
        border-top: 0;
        clip-path: polygon(calc(100% + 2px) -2px, calc(100% + 2px) calc(100% + 2px), -2px calc(100% + 2px));
      }

      .hf-article-frame-tooltip[data-tooltip-placement="bottom"]::after {
        top: calc(var(--tooltip-tip-size) * -0.5 - 1px);
        border-right: 0;
        border-bottom: 0;
        clip-path: polygon(-2px -2px, calc(100% + 2px) -2px, -2px calc(100% + 2px));
      }

      .hf-article-frame-tooltip.info-panel__tooltip--multiline {
        max-width: min(380px, calc(100vw - 32px));
        white-space: pre-line;
        line-height: 1.36;
      }

      .hf-article-frame-tooltip .info-panel__tooltip-list {
        margin: 0;
        padding-left: 1.15rem;
        white-space: normal;
      }

      .hf-article-frame-tooltip .info-panel__tooltip-list li {
        margin: 0.08rem 0;
      }

      .hf-article-frame-tooltip strong {
        color: #f8fafc;
        font-weight: 700;
      }

      .hf-article-frame-tooltip .info-panel__tooltip-key {
        display: inline-grid;
        align-items: center;
        justify-content: center;
        width: 1.58em;
        min-width: 1.58em;
        height: 1.58em;
        margin: 0 0.15rem;
        border: 1px solid rgba(255, 255, 255, 0.95);
        border-bottom-color: rgba(148, 163, 184, 0.8);
        border-radius: 0.45em;
        background:
          radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0) 48%),
          linear-gradient(180deg, #f8fafc 0%, #dbe3ee 62%, #b4c0ce 100%);
        color: #0f172a;
        font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
        font-size: 0.78em;
        font-weight: 900;
        letter-spacing: 0.015em;
        line-height: 1;
        text-transform: uppercase;
        vertical-align: middle;
      }

      @keyframes hfArticleNodeFrameBreathe {
        0%,
        100% {
          transform: scale(1);
        }
        50% {
          transform: scale(1.018);
        }
      }

      .hf-article-editor__node-token {
        display: inline-flex;
        align-items: center;
        gap: 0.35em;
        margin: 0 0.05em;
        padding: 0 0.18em;
        border: 0;
        border-radius: 10px;
        background: rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.08);
        font: inherit;
        cursor: pointer;
        vertical-align: baseline;
        transition:
          padding 140ms ease,
          color 120ms ease,
          text-decoration-color 120ms ease,
          background 120ms ease,
          box-shadow 120ms ease;
      }

      .hf-article-editor__node-token.is-configure-visible {
        padding-right: calc(22px + 0.34em);
      }

      .hf-article-editor__node-token.is-active {
        background: rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.18);
        box-shadow: 0 0 0 2px rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.18);
      }

      .hf-article-editor__node-token-label {
        min-width: 0;
      }

      .hf-article-editor__node-token-type {
        font-size: 0.68em;
        transform: translateY(-0.02em);
      }

      .hf-article-editor__media,
      .viewer-community-articles__media {
        display: grid;
        gap: 8px;
        min-width: 0;
        max-width: 100%;
        box-sizing: border-box;
        margin: 14px 0;
        padding: 12px;
        border: 1px solid rgba(136, 215, 255, 0.14);
        border-radius: 18px;
        background: rgba(0, 0, 0, 0.18);
      }

      .hf-article-editor__media img,
      .viewer-community-articles__media img {
        width: min(100%, 720px);
        max-width: 100%;
        border-radius: 14px;
      }

      .hf-article-editor__media audio,
      .viewer-community-articles__media audio,
      .hf-article-editor__media video,
      .viewer-community-articles__media video {
        width: min(100%, 720px);
        max-width: 100%;
        border-radius: 14px;
        color-scheme: dark;
        accent-color: rgba(136, 215, 255, 0.95);
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.08), rgba(156, 255, 99, 0.035)),
          rgba(1, 7, 14, 0.74);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.06),
          0 12px 30px rgba(0, 0, 0, 0.16);
      }

      .hf-article-editor__media audio::-webkit-media-controls-panel,
      .viewer-community-articles__media audio::-webkit-media-controls-panel {
        border-radius: 14px;
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.12), rgba(156, 255, 99, 0.04)),
          rgb(5, 12, 22);
        color: rgba(235, 248, 255, 0.92);
      }

      .hf-article-editor__media audio::-webkit-media-controls-current-time-display,
      .hf-article-editor__media audio::-webkit-media-controls-time-remaining-display,
      .viewer-community-articles__media audio::-webkit-media-controls-current-time-display,
      .viewer-community-articles__media audio::-webkit-media-controls-time-remaining-display {
        color: rgba(224, 240, 251, 0.82);
        text-shadow: none;
      }

      .hf-article-editor__media audio::-webkit-media-controls-enclosure,
      .viewer-community-articles__media audio::-webkit-media-controls-enclosure {
        border-radius: 14px;
      }

      .hf-article-editor__media video,
      .viewer-community-articles__media video {
        justify-self: center;
        width: auto;
        max-width: min(100%, 520px);
        max-height: min(78vh, 860px);
      }

      .hf-article-editor__media-video,
      .viewer-community-articles__media-video {
        position: relative;
        width: min(100%, 760px);
        aspect-ratio: 16 / 9;
        overflow: hidden;
        border-radius: 14px;
        background: rgba(0, 0, 0, 0.42);
      }

      .hf-article-editor__media-video iframe,
      .viewer-community-articles__media-video iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
      }

      .hf-article-editor__media figcaption,
      .viewer-community-articles__media figcaption {
        color: rgba(197, 208, 227, 0.68);
        font-size: 0.88rem;
      }

      .hf-article-editor__media figcaption[contenteditable="true"] {
        min-height: 1.4em;
        padding: 5px 7px;
        border-radius: 10px;
        color: rgba(197, 208, 227, 0.74);
        outline: none;
        cursor: text;
        transition:
          background 140ms ease,
          box-shadow 140ms ease,
          color 140ms ease;
      }

      .hf-article-editor__media figcaption[contenteditable="true"]:empty::before {
        content: attr(data-placeholder);
        color: rgba(197, 208, 227, 0.42);
        pointer-events: none;
      }

      .hf-article-editor__media figcaption[contenteditable="true"]:hover,
      .hf-article-editor__media figcaption[contenteditable="true"]:focus {
        background: rgba(255, 210, 126, 0.055);
        box-shadow: inset 0 0 0 1px rgba(255, 210, 126, 0.16);
        color: rgba(232, 241, 250, 0.86);
      }

      .hf-article-editor__html-block,
      .viewer-community-articles__html-block {
        display: grid;
        gap: 10px;
        margin: 18px 0;
        overflow: hidden;
        border: 1px solid rgba(136, 215, 255, 0.14);
        border-radius: 20px;
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.075), rgba(156, 255, 99, 0.025)),
          rgba(0, 0, 0, 0.2);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
      }

      .hf-article-editor__html-block {
        padding: 12px;
      }

      .viewer-community-articles__html-block {
        padding: 0;
        background: transparent;
      }

      /* First-party (admin/builtin) custom HTML renders inline instead of in
         the sandbox iframe: plain flow content, no frame chrome. */
      .viewer-community-articles__html-inline {
        width: 100%;
        min-width: 0;
      }
      .viewer-community-articles__html-block:has(> .viewer-community-articles__html-inline) {
        border: 0;
        background: none;
        box-shadow: none;
        overflow: visible;
      }

      @media (max-width: 980px) {
        .viewer-community-articles__html-block {
          margin: 16px 0;
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
        }

        .viewer-community-articles__html-block .hf-article-custom-html__frame {
          border-radius: 18px;
        }
      }

      .hf-article-editor__html-block.is-delete-armed {
        border-color: rgba(255, 210, 126, 0.62);
        box-shadow:
          0 0 0 1px rgba(255, 210, 126, 0.22),
          0 18px 54px rgba(255, 210, 126, 0.08);
      }

      .hf-article-editor__media,
      .hf-article-editor__table-set,
      .hf-article-editor__html-block,
      .hf-article-body .hf-article-editor__code-block {
        position: relative;
      }

      .hf-article-editor__media.is-delete-armed,
      .hf-article-editor__table-set.is-delete-armed,
      .hf-article-editor__html-block.is-delete-armed,
      .hf-article-body .hf-article-editor__code-block.is-delete-armed {
        overflow: visible;
        border-color: rgba(255, 210, 126, 0.62);
        box-shadow:
          0 0 0 1px rgba(255, 210, 126, 0.22),
          0 18px 54px rgba(255, 210, 126, 0.08);
      }

      .hf-article-editor__media.is-delete-armed::before,
      .hf-article-editor__table-set.is-delete-armed::before,
      .hf-article-editor__html-block.is-delete-armed::before,
      .hf-article-body .hf-article-editor__code-block.is-delete-armed::before {
        content: attr(data-delete-label);
        position: absolute;
        right: 16px;
        top: 0;
        z-index: 4;
        padding: 5px 9px;
        border: 1px solid rgba(255, 210, 126, 0.32);
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(255, 236, 179, 0.13), rgba(255, 210, 126, 0.06)),
          rgba(8, 10, 16, 0.96);
        color: rgba(255, 236, 189, 0.94);
        font-size: 0.72rem;
        font-weight: 820;
        letter-spacing: 0.035em;
        line-height: 1;
        pointer-events: none;
        text-transform: uppercase;
        transform: translateY(calc(-100% - 7px));
        white-space: nowrap;
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
      }

      .hf-article-editor__html-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 12px;
      }

      .hf-article-editor__html-title {
        display: grid;
        gap: 3px;
      }

      .hf-article-editor__html-title strong {
        color: rgba(235, 248, 255, 0.95);
        font-size: 0.92rem;
        letter-spacing: -0.015em;
      }

      .hf-article-editor__caret-slot {
        position: relative;
        min-height: 24px;
        margin: 4px 0;
        padding: 2px 0;
        border: 0;
        border-radius: 13px;
        background: transparent;
        box-shadow: none;
        outline: none;
        transition: min-height 160ms ease;
      }

      .hf-article-editor__caret-slot[data-empty="true"]::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        top: 50%;
        height: 1px;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, rgba(255, 210, 126, 0.72) 14%, rgba(255, 210, 126, 0.92) 50%, rgba(255, 210, 126, 0.72) 86%, transparent);
        box-shadow:
          0 0 10px rgba(255, 210, 126, 0.2),
          0 1px 0 rgba(255, 255, 255, 0.08);
        pointer-events: none;
        opacity: 0;
        transform: translateY(-50%) scaleX(0.92);
        transform-origin: center;
        transition:
          opacity 160ms ease,
          transform 160ms ease;
      }

      .hf-article-editor__caret-slot[data-empty="true"]:hover,
      .hf-article-editor__caret-slot[data-empty="true"]:focus,
      .hf-article-editor__caret-slot[data-empty="true"]:focus-within {
        background: transparent;
        box-shadow: none;
        min-height: 24px;
      }

      .hf-article-editor__caret-slot[data-empty="true"]:hover::before,
      .hf-article-editor__caret-slot[data-empty="true"]:focus::before,
      .hf-article-editor__caret-slot[data-empty="true"]:focus-within::before {
        opacity: 1;
        transform: translateY(-50%) scaleX(1);
      }

      .hf-article-editor__html-code-shell {
        position: relative;
        box-sizing: border-box;
        height: 260px;
        min-height: 220px;
        max-height: 420px;
        overflow: hidden;
        border: 1px solid rgba(136, 215, 255, 0.13);
        border-radius: 16px;
        background:
          radial-gradient(circle at 15% 0%, rgba(136, 215, 255, 0.12), transparent 34%),
          linear-gradient(180deg, rgba(2, 14, 27, 0.92), rgba(1, 7, 14, 0.78));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.055),
          inset 0 -1px 0 rgba(0, 0, 0, 0.32);
      }

      .hf-article-editor__html-code-shell:focus-within {
        border-color: rgba(136, 215, 255, 0.38);
        box-shadow:
          0 0 0 3px rgba(136, 215, 255, 0.09),
          inset 0 1px 0 rgba(255, 255, 255, 0.065),
          inset 0 -1px 0 rgba(0, 0, 0, 0.32);
      }

      .hf-article-editor__html-highlight,
      .hf-article-editor__html-source {
        position: absolute;
        inset: 0;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 12px 13px;
        border: 0;
        font-family: "SFMono-Regular", "Cascadia Code", "Liberation Mono", Menlo, monospace;
        font-size: 13.5px;
        font-variant-ligatures: none;
        font-feature-settings: "liga" 0, "calt" 0;
        font-weight: 500;
        letter-spacing: 0;
        line-height: 20px;
        outline: none;
        tab-size: 2;
        white-space: pre;
        overflow-wrap: normal;
        word-break: normal;
      }

      .hf-article-editor__html-highlight {
        z-index: 1;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: hidden;
        color: rgba(224, 238, 255, 0.88);
        pointer-events: none;
      }

      .hf-article-body .hf-article-editor__html-highlight {
        margin: 0;
        padding: 12px 13px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: hidden;
      }

      .hf-article-editor__html-highlight code {
        display: block;
        min-width: max-content;
        min-height: 0;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: inherit;
        font: inherit;
        letter-spacing: inherit;
        line-height: inherit;
        white-space: pre;
      }

      .hf-article-body .hf-article-editor__html-highlight code {
        min-height: 0;
        color: inherit;
        font: inherit;
      }

      .hf-article-editor__html-source {
        z-index: 3;
        display: block;
        overflow: auto;
        background: transparent;
        color: transparent;
        -webkit-text-fill-color: transparent;
        caret-color: rgba(235, 248, 255, 0.96);
        resize: none;
        scrollbar-gutter: stable;
      }

      .hf-article-editor__html-source:focus {
        outline: none;
      }

      .hf-article-editor__html-source::selection {
        background: rgba(136, 215, 255, 0.28);
        -webkit-text-fill-color: rgba(235, 248, 255, 0.96);
        color: rgba(235, 248, 255, 0.96);
      }

      .hf-article-editor__html-source::placeholder {
        color: rgba(157, 180, 205, 0.34);
        -webkit-text-fill-color: rgba(157, 180, 205, 0.34);
      }

      .hf-article-editor__html-source::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      .hf-article-editor__html-source::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, 0.025);
        border-radius: 999px;
      }

      .hf-article-editor__html-source::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(197, 208, 227, 0.28);
        background-clip: padding-box;
      }

      .hf-article-editor__html-source::-webkit-scrollbar-thumb:hover {
        background: rgba(197, 208, 227, 0.42);
        background-clip: padding-box;
      }

      .hf-article-editor__html-token--comment {
        color: rgba(137, 159, 183, 0.68);
        font-style: italic;
      }

      .hf-article-editor__html-token--punctuation {
        color: rgba(133, 165, 198, 0.8);
      }

      .hf-article-editor__html-token--tag {
        color: #78d7ff;
        font-weight: 720;
      }

      .hf-article-editor__html-token--attr {
        color: #a6e87d;
      }

      .hf-article-editor__html-token--string {
        color: #ffd38a;
      }

      .hf-article-editor__html-token--number {
        color: #ffb8f2;
      }

      .hf-article-editor__html-token--keyword {
        color: #bca7ff;
        font-weight: 720;
      }

      .hf-article-editor__html-token--property {
        color: #91e5ff;
      }

      .hf-article-editor__html-token--selector {
        color: #f4a8ff;
      }

      .hf-article-editor__html-token--function {
        color: #8ef0c8;
      }

      .hf-article-editor__html-token--operator {
        color: rgba(247, 250, 255, 0.68);
      }

      .hf-article-editor__html-preview-label {
        color: rgba(197, 208, 227, 0.55);
        font-size: 0.72rem;
        font-weight: 780;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .hf-article-custom-html__frame {
        display: block;
        width: 100%;
        height: 360px;
        min-height: 40px;
        max-height: 2600px;
        box-sizing: border-box;
        overflow: hidden;
        border: 0;
        border-radius: 16px;
        background: rgba(1, 7, 14, 0.5);
      }

      .hf-article-custom-html__frame[data-custom-html-active="1"][data-custom-html-display-ready="0"] {
        opacity: 0;
        visibility: hidden;
      }

      .hf-article-editor__html-block.is-custom-html-sandbox-loading .hf-article-editor__html-preview-label::after {
        content: " · loading interactive sandbox";
        color: rgba(136, 215, 255, 0.62);
        font-weight: 720;
        letter-spacing: 0.045em;
      }

      .hf-article-custom-html__frame-wrap {
        position: relative;
        display: block;
        width: 100%;
        min-width: 0;
      }

      .hf-article-custom-html__touch-scroll-shield {
        display: none;
      }

      .viewer-community-articles__html-block .hf-article-custom-html__frame {
        border-radius: 18px;
      }

      @media (min-width: 981px) {
        body.route-viewer-article #viewer-granularity {
          display: none !important;
        }
      }

      .viewer-editorial__deployment-wrap,
      .viewer-community-articles__html-block .hf-article-custom-html__frame {
        scrollbar-color: rgba(197, 208, 227, 0.3) transparent;
        scrollbar-width: thin;
      }

      .viewer-editorial__deployment-wrap::-webkit-scrollbar,
      .viewer-community-articles__html-block .hf-article-custom-html__frame::-webkit-scrollbar {
        width: 10px;
        height: 10px;
      }

      .viewer-editorial__deployment-wrap::-webkit-scrollbar-track,
      .viewer-community-articles__html-block .hf-article-custom-html__frame::-webkit-scrollbar-track {
        border-radius: 999px;
        background: transparent;
      }

      .viewer-editorial__deployment-wrap::-webkit-scrollbar-thumb,
      .viewer-community-articles__html-block .hf-article-custom-html__frame::-webkit-scrollbar-thumb {
        border: 2px solid transparent;
        border-radius: 999px;
        background: rgba(197, 208, 227, 0.3);
        background-clip: padding-box;
      }

      .viewer-editorial__deployment-wrap::-webkit-scrollbar-thumb:hover,
      .viewer-community-articles__html-block .hf-article-custom-html__frame::-webkit-scrollbar-thumb:hover {
        background: rgba(197, 208, 227, 0.42);
        background-clip: padding-box;
      }

      .hf-article-custom-html__node-links {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: center;
        padding: 0 4px 4px;
      }

      .hf-article-custom-html__node-links--hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
      }

      .hf-article-custom-html__node-links::before {
        content: "Graph links";
        flex: 0 0 auto;
        color: rgba(197, 208, 227, 0.52);
        font-size: 0.68rem;
        font-weight: 820;
        letter-spacing: 0.1em;
        text-transform: uppercase;
      }

      .hf-article-custom-html__node-link {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 4px 10px;
        border: 1px solid rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.35);
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.14), rgba(var(--viewer-node-link-underline-rgb, 104, 164, 196), 0.055)),
          rgba(1, 7, 14, 0.48);
        text-decoration: none;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          0 10px 26px rgba(0, 0, 0, 0.16);
      }

      .hf-article-custom-html__launch {
        display: grid;
        gap: 8px;
        place-items: center;
        min-height: 180px;
        padding: 24px;
        border: 1px solid rgba(136, 215, 255, 0.16);
        border-radius: 18px;
        background:
          radial-gradient(circle at 50% 0%, rgba(136, 215, 255, 0.13), transparent 44%),
          rgba(1, 7, 14, 0.52);
        color: rgba(235, 248, 255, 0.9);
        text-align: center;
      }

      .hf-article-custom-html__launch strong {
        font-size: 0.94rem;
        letter-spacing: -0.01em;
      }

      .hf-article-custom-html__launch span {
        max-width: 34rem;
        color: rgba(197, 208, 227, 0.7);
        font-size: 0.86rem;
        line-height: 1.45;
      }

      .hf-article-custom-html__launch button {
        appearance: none;
        border: 1px solid rgba(136, 215, 255, 0.28);
        border-radius: 999px;
        padding: 9px 14px;
        background: linear-gradient(135deg, rgba(136, 215, 255, 0.22), rgba(156, 255, 99, 0.13));
        color: rgba(235, 248, 255, 0.95);
        cursor: pointer;
        font: inherit;
        font-size: 0.78rem;
        font-weight: 820;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        transition:
          transform 140ms ease,
          border-color 140ms ease,
          box-shadow 140ms ease;
      }

      .hf-article-custom-html__launch button:hover,
      .hf-article-custom-html__launch button:focus-visible {
        border-color: rgba(136, 215, 255, 0.48);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
        transform: translateY(-1px);
      }

      .hf-article-editor__table-set,
      .viewer-community-articles__table-set {
        margin: 18px 0;
      }

      .viewer-community-articles__table-set {
        justify-self: start;
        width: fit-content;
        max-width: 100%;
      }

      .hf-article-editor__table-set {
        padding: 14px;
        border: 1px solid rgba(136, 215, 255, 0.12);
        border-radius: 22px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.012)),
          rgba(0, 0, 0, 0.16);
      }

      .hf-article-editor__table-set .viewer-editorial__deployment-table {
        min-width: min(720px, 100%);
        overflow: hidden;
        border-collapse: separate;
        border-spacing: 0;
        border-radius: 18px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
          rgba(8, 13, 23, 0.84);
        clip-path: inset(0 round 18px);
      }

      .hf-article-editor__table-set .viewer-editorial__deployment-wrap {
        position: relative;
        box-sizing: border-box;
        overflow: visible;
        border: 0;
        background: transparent;
      }

      .hf-article-table-row-delete-layer {
        position: absolute;
        inset: 0 auto 0 -28px;
        width: 24px;
        pointer-events: none;
      }


      .viewer-community-articles__table-set .viewer-editorial__deployment-wrap {
        justify-self: start;
        width: fit-content;
        max-width: 100%;
      }

      .viewer-community-articles__table-set .viewer-editorial__deployment-table {
        width: auto;
        min-width: 0;
        table-layout: auto;
      }

      .viewer-community-articles__table-set .viewer-editorial__deployment-table th,
      .viewer-community-articles__table-set .viewer-editorial__deployment-table td {
        min-width: min(6.8rem, 24vw);
        max-width: min(24ch, 30vw);
        padding-inline: 12px;
        white-space: normal;
        overflow-wrap: anywhere;
        word-break: normal;
        vertical-align: top;
      }

      .viewer-community-articles__table-set .viewer-editorial__deployment-table th:first-child,
      .viewer-community-articles__table-set .viewer-editorial__deployment-table td:first-child {
        min-width: min(8.2rem, 30vw);
      }

      @media (max-width: 640px) {
        .viewer-community-articles__table-set,
        .viewer-community-articles__table-set .viewer-editorial__deployment-wrap {
          width: 100%;
        }

        .viewer-community-articles__table-set .viewer-editorial__deployment-table {
          width: max-content;
          min-width: max(100%, calc(var(--hf-article-table-columns, 1) * 7.2rem));
        }

        .viewer-community-articles__table-set .viewer-editorial__deployment-table th,
        .viewer-community-articles__table-set .viewer-editorial__deployment-table td {
          min-width: clamp(6.8rem, 34vw, 9.6rem);
          max-width: clamp(8.5rem, 44vw, 13rem);
        }

      }

      .hf-article-editor__table-set[contenteditable="false"] {
        user-select: text;
      }

      .hf-article-editor__table-set.is-delete-armed,
      .hf-article-editor__table-set.is-delete-armed * {
        user-select: none;
      }

      .hf-article-editor__table-set.is-delete-armed {
        border-color: rgba(255, 210, 126, 0.62);
        box-shadow:
          0 0 0 1px rgba(255, 210, 126, 0.22),
          0 18px 54px rgba(255, 210, 126, 0.08);
      }

      .hf-article-table-editbar {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }

      .hf-article-table-title {
        min-width: min(260px, 100%);
        flex: 1 1 220px;
        min-height: 34px;
        padding: 0 12px;
        border: 1px solid rgba(136, 215, 255, 0.14);
        border-radius: 999px;
        background: rgba(3, 10, 20, 0.62);
        color: rgba(235, 248, 255, 0.92);
        font: inherit;
        font-size: 0.86rem;
        font-weight: 760;
        outline: none;
      }

      .hf-article-table-title:focus-visible,
      .hf-article-table-action:focus-visible {
        border-color: rgba(136, 215, 255, 0.45);
        outline: none;
      }

      .hf-article-table-action {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 34px;
        padding: 0 11px;
        border: 1px solid rgba(136, 215, 255, 0.14);
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.08);
        color: rgba(223, 247, 255, 0.82);
        font: inherit;
        font-size: 0.78rem;
        font-weight: 780;
        cursor: pointer;
        transition:
          border-color 140ms ease,
          background 140ms ease,
          color 140ms ease,
          transform 140ms ease;
      }

      .hf-article-table-action:hover {
        border-color: rgba(136, 215, 255, 0.32);
        background: rgba(136, 215, 255, 0.13);
        color: rgba(235, 248, 255, 0.96);
        transform: translateY(-1px);
      }

      .hf-article-table-tab {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        overflow: hidden;
        transition:
          background 120ms ease,
          box-shadow 120ms ease;
      }

      .hf-article-table-tab.is-active {
        background: rgba(136, 215, 255, 0.14);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.22);
      }

      .hf-article-table-tab .viewer-editorial__deployment-filter {
        min-height: 32px;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        padding-right: 7px;
      }

      .hf-article-table-tab .viewer-editorial__deployment-filter:hover,
      .hf-article-table-tab .viewer-editorial__deployment-filter:focus-visible,
      .hf-article-table-tab .viewer-editorial__deployment-filter.is-active {
        background: transparent;
        box-shadow: none;
      }

      .hf-article-table-remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        margin-right: 5px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.055);
        color: rgba(220, 231, 247, 0.62);
        font: inherit;
        font-size: 0.9rem;
        font-weight: 820;
        line-height: 1;
        cursor: pointer;
        transition:
          background 120ms ease,
          color 120ms ease,
          transform 120ms ease;
      }

      .hf-article-table-remove:hover,
      .hf-article-table-remove:focus-visible {
        background: rgba(255, 116, 116, 0.16);
        color: rgba(255, 226, 226, 0.96);
        outline: none;
        transform: scale(1.04);
      }

      .hf-article-editor__table-cell {
        position: relative;
        min-width: 96px;
        cursor: text;
        outline: none;
        transition:
          background 120ms ease,
          box-shadow 120ms ease;
      }

      .hf-article-editor__table-cell:focus-visible {
        box-shadow: inset 0 0 0 2px rgba(136, 215, 255, 0.38);
      }

      .hf-article-editor__table-cell:empty::before {
        content: attr(data-placeholder);
        color: rgba(197, 208, 227, 0.38);
        pointer-events: none;
      }

      .hf-article-table-structure-delete {
        position: absolute;
        z-index: 3;
        display: inline-grid;
        place-items: center;
        width: 22px;
        height: 22px;
        padding: 0;
        border: 1px solid rgba(197, 208, 227, 0.16);
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(197, 208, 227, 0.095), rgba(197, 208, 227, 0.035)),
          rgba(9, 14, 23, 0.9);
        color: rgba(197, 208, 227, 0.56);
        cursor: pointer;
        font: inherit;
        font-size: 15px;
        font-weight: 860;
        line-height: 1;
        opacity: 0;
        pointer-events: none;
        transform: scale(0.92);
        transition:
          opacity 120ms ease,
          transform 120ms ease,
          border-color 120ms ease,
          background 120ms ease,
          color 120ms ease;
      }

      .hf-article-table-delete-row {
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.92);
      }

      .hf-article-table-delete-column {
        right: 8px;
        top: 50%;
        transform: translateY(-50%) scale(0.92);
      }

      .hf-article-table-structure-delete.is-visible,
      .hf-article-table-structure-delete:hover,
      .hf-article-table-structure-delete:focus-visible {
        opacity: 1;
        pointer-events: auto;
      }

      .hf-article-table-delete-row.is-visible,
      .hf-article-table-delete-row:hover,
      .hf-article-table-delete-row:focus-visible {
        transform: translate(-50%, -50%) scale(1);
      }

      .hf-article-table-delete-column.is-visible,
      .hf-article-table-delete-column:hover,
      .hf-article-table-delete-column:focus-visible {
        transform: translateY(-50%) scale(1);
      }

      .hf-article-table-structure-delete:hover,
      .hf-article-table-structure-delete:focus-visible {
        border-color: rgba(255, 134, 134, 0.48);
        background:
          linear-gradient(180deg, rgba(255, 134, 134, 0.18), rgba(255, 134, 134, 0.08)),
          rgba(15, 11, 15, 0.96);
        color: rgba(255, 238, 238, 0.98);
        outline: none;
      }

      .hf-article-editor__table-cell.is-delete-row-preview,
      .hf-article-editor__table-cell.is-delete-column-preview {
        background: rgba(255, 95, 95, 0.1);
        box-shadow:
          inset 0 1px 0 rgba(255, 125, 125, 0.18),
          inset 0 -1px 0 rgba(255, 125, 125, 0.18),
          inset 1px 0 0 rgba(255, 125, 125, 0.16),
          inset -1px 0 0 rgba(255, 125, 125, 0.16);
      }

      .hf-article-editor__iframe,
      .viewer-community-articles__iframe {
        width: 100%;
        min-height: min(620px, calc(100vh - 220px));
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 24px;
        background: var(--preview-surface);
        background-color: #07111d;
      }

      .hf-article-editor__preview .hf-article-editor__iframe {
        position: relative;
        z-index: 1;
        grid-column: 1;
        grid-row: 2;
        height: 100%;
        min-height: 0;
        display: block;
        box-sizing: border-box;
        background: var(--preview-surface);
        background-color: #07111d;
        opacity: 1;
        transition: opacity 190ms ease;
      }

      .hf-article-editor__preview.is-loading-visual .hf-article-editor__iframe {
        opacity: 0;
      }

      .viewer-community-articles {
        display: grid;
        gap: 18px;
        padding: clamp(18px, 3vw, 28px);
        position: relative;
      }

      .viewer-community-articles[hidden] {
        display: none;
      }

      .viewer-community-articles__layout {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: minmax(0, 0.92fr) minmax(420px, 0.8fr);
        gap: 18px;
        align-items: start;
        transition:
          grid-template-columns 280ms cubic-bezier(.2, .8, .2, 1),
          gap 280ms ease;
      }

      .viewer-community-articles.is-split.is-visual-info-open .viewer-community-articles__layout {
        grid-template-columns: minmax(320px, 0.7fr) minmax(680px, 1.22fr);
      }

      .viewer-community-articles.is-split.is-graph-issue-open .viewer-community-articles__layout {
        grid-template-columns: minmax(320px, 0.7fr) minmax(680px, 1.22fr);
      }

      .viewer-community-articles__copy {
        --viewer-article-copy-pad-y: clamp(18px, 2.2vw, 28px);
        --viewer-article-copy-pad-left: clamp(18px, 2.2vw, 28px);
        --viewer-article-copy-pad-right: clamp(18px, 2.2vw, 28px);
        display: grid;
        gap: 16px;
        min-width: 0;
        position: relative;
        padding:
          var(--viewer-article-copy-pad-y)
          var(--viewer-article-copy-pad-right)
          var(--viewer-article-copy-pad-y)
          var(--viewer-article-copy-pad-left);
        border: 1px solid rgba(136, 215, 255, 0.13);
        border-radius: 30px;
        background:
          linear-gradient(180deg, rgba(9, 18, 31, 0.82) 0, rgba(4, 9, 17, 0.76) 680px, rgba(4, 9, 17, 0.76) 100%);
        box-shadow:
          0 26px 72px rgba(0, 0, 0, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.07);
        overflow: visible;
        -webkit-clip-path: inset(0 round 30px);
        clip-path: inset(0 round 30px);
      }

      .viewer-community-articles__copy::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        border-radius: inherit;
        background:
          radial-gradient(ellipse at -14% -10%, rgba(136, 215, 255, 0.1) 0, rgba(136, 215, 255, 0.072) 20%, rgba(136, 215, 255, 0) 56%),
          radial-gradient(ellipse at 112% -8%, rgba(156, 255, 99, 0.072) 0, rgba(156, 255, 99, 0.052) 18%, rgba(156, 255, 99, 0) 54%),
          linear-gradient(135deg, rgba(255, 255, 255, 0.09), transparent 28%, transparent 70%, rgba(136, 215, 255, 0.08));
        opacity: 0.42;
      }

      .viewer-community-articles__head {
        position: relative;
        z-index: 1;
        display: block;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding-top: clamp(4px, 0.5vw, 8px);
      }

      .viewer-community-articles__headline {
        width: 100%;
        max-width: 100%;
        min-width: 0;
      }

      .viewer-community-articles__head .eyebrow {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        margin-bottom: 10px;
      }

      .viewer-community-articles__headline {
        min-width: 0;
        max-width: 100%;
      }

      .viewer-community-articles h3 {
        max-width: 100%;
        margin: 0;
        max-width: 100%;
        color: var(--text);
        font-size: clamp(1.8rem, 3.2vw, 3rem);
        line-height: 1;
        letter-spacing: -0.06em;
        overflow-wrap: break-word;
        word-break: normal;
      }

      .viewer-community-articles__title-regular {
        color: rgba(235, 248, 255, 0.86);
        font-weight: 520;
        letter-spacing: -0.045em;
      }

      .viewer-community-articles__head-actions {
        display: flex;
        align-items: flex-start;
        justify-content: flex-end;
        gap: 10px;
        position: absolute;
        top: -10px;
        right: 0;
        min-width: 0;
      }

      .viewer-community-articles__hide-toggle,
      .viewer-community-articles__show-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        min-height: 38px;
        padding: 0 13px;
        border: 1px solid rgba(136, 215, 255, 0.22);
        border-radius: 999px;
        background:
          radial-gradient(circle at 18% 0%, rgba(156, 255, 99, 0.12), transparent 52%),
          linear-gradient(180deg, rgba(136, 215, 255, 0.13), rgba(136, 215, 255, 0.055)),
          rgba(7, 16, 29, 0.78);
        color: rgba(238, 246, 255, 0.9);
        box-shadow:
          0 12px 30px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
        cursor: pointer;
        font: 780 0.72rem/1 "Space Grotesk", sans-serif;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        white-space: nowrap;
        transition:
          transform 240ms cubic-bezier(.2, .8, .2, 1),
          width 240ms cubic-bezier(.2, .8, .2, 1),
          padding 240ms cubic-bezier(.2, .8, .2, 1),
          border-color 180ms ease,
          background 180ms ease,
          box-shadow 180ms ease,
          opacity 180ms ease;
      }

      .viewer-community-articles:not(.is-split) .viewer-community-articles__hide-toggle,
      .viewer-community-articles:not(.is-split) .viewer-community-articles__hide-float-tab {
        display: none !important;
      }

      @keyframes viewerArticleHideFloatPop {
        0% {
          opacity: 0;
          transform: translate(-100%, -50%) translateX(10px) scale(0.94);
        }
        100% {
          opacity: 1;
          transform: translate(-100%, -50%) translateX(0) scale(1);
        }
      }

      .viewer-community-articles__hide-toggle:hover,
      .viewer-community-articles__hide-toggle:focus-visible,
      .viewer-community-articles__show-toggle:hover,
      .viewer-community-articles__show-toggle:focus-visible {
        outline: none;
        border-color: rgba(156, 255, 99, 0.34);
        background:
          radial-gradient(circle at 22% 0%, rgba(156, 255, 99, 0.2), transparent 56%),
          linear-gradient(180deg, rgba(136, 215, 255, 0.18), rgba(136, 215, 255, 0.07)),
          rgba(9, 20, 36, 0.9);
        box-shadow:
          0 16px 38px rgba(0, 0, 0, 0.26),
          0 0 0 5px rgba(156, 255, 99, 0.055),
          inset 0 1px 0 rgba(255, 255, 255, 0.12);
      }

      .viewer-community-articles__sidebar-icon {
        flex: 0 0 auto;
        width: 17px;
        height: 17px;
      }

      .viewer-community-articles__hide-float-tab {
        position: fixed;
        top: var(--viewer-community-article-hide-top, 72px);
        left: var(--viewer-community-article-hide-left, 50vw);
        z-index: 920;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 54px;
        padding: 0;
        border: 1px solid rgba(136, 215, 255, 0.2);
        border-left-color: rgba(136, 215, 255, 0.24);
        border-right-color: rgba(255, 255, 255, 0.08);
        border-radius: 24px 8px 8px 24px;
        background:
          radial-gradient(circle at 8% 50%, rgba(136, 215, 255, 0.14), transparent 62%),
          linear-gradient(90deg, rgba(8, 18, 32, 0.97), rgba(14, 32, 50, 0.9));
        color: rgba(238, 246, 255, 0.92);
        box-shadow:
          0 34px 92px rgba(0, 0, 0, 0.64),
          0 16px 42px rgba(0, 0, 0, 0.42),
          inset 1px 0 0 rgba(255, 255, 255, 0.12);
        cursor: pointer;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translate(-100%, -50%) scale(0.94);
        transform-origin: right center;
        transition:
          opacity 170ms ease,
          visibility 0ms linear 170ms,
          transform 240ms cubic-bezier(.2, .8, .2, 1),
          border-color 160ms ease,
          background 160ms ease,
          box-shadow 160ms ease;
      }

      .viewer-community-articles__hide-float-tab:hover,
      .viewer-community-articles__hide-float-tab:focus-visible {
        outline: none;
        border-color: rgba(156, 255, 99, 0.42);
        border-right-color: rgba(255, 255, 255, 0.1);
        background:
          radial-gradient(circle at 8% 50%, rgba(156, 255, 99, 0.28), transparent 64%),
          linear-gradient(90deg, rgba(10, 24, 40, 0.98), rgba(18, 42, 62, 0.94));
        box-shadow:
          0 32px 88px rgba(0, 0, 0, 0.62),
          0 0 0 11px rgba(156, 255, 99, 0.08),
          0 0 42px rgba(156, 255, 99, 0.2),
          inset 1px 0 0 rgba(255, 255, 255, 0.16);
        transform: translate(-100%, -50%) scale(1);
      }

      .viewer-community-articles__hide-float-tab .viewer-community-articles__sidebar-icon {
        width: 19px;
        height: 19px;
      }

      .viewer-community-articles.is-hide-toggle-floating.is-hide-float-positioned:not(.is-article-hidden) .viewer-community-articles__hide-float-tab {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        animation: viewerArticleHideFloatPop 220ms cubic-bezier(.2, .8, .2, 1);
        transition-delay: 0ms, 0ms, 0ms, 0ms, 0ms, 0ms;
      }

      .viewer-community-articles.is-split:not(.is-article-hidden) .viewer-community-articles__visual-dots,
      .viewer-community-articles.is-split:not(.is-article-hidden) .viewer-community-articles__show-toggle {
        display: none;
      }

      .viewer-community-articles.is-hide-toggle-floating:not(.is-article-hidden) .viewer-community-articles__hide-toggle {
        opacity: 0;
        pointer-events: none;
      }

      .viewer-community-articles.is-hide-toggle-floating:not(.is-article-hidden) .viewer-community-articles__hide-toggle span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
      }

      .viewer-community-articles__dek,
      .viewer-community-articles__body,
      .viewer-community-articles__comments {
        position: relative;
        z-index: 1;
        min-width: 0;

        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        color: rgba(235, 248, 255, 0.88);
        line-height: 1.75;
        overflow-wrap: break-word;
      }

      .viewer-community-articles__body > * {
        max-width: 100%;
        box-sizing: border-box;
      }

      .viewer-community-articles__byline {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        gap: 12px;
        color: rgba(197, 208, 227, 0.68);
      }

      .viewer-community-articles__byline a {
        color: rgba(161, 232, 255, 0.88);
        text-decoration: none;
      }

      .viewer-community-articles__byline-title,
      .viewer-community-articles__byline-username {
        line-height: 1.35;
      }

      .viewer-community-articles__byline-username {
        margin-top: 1px;
      }

      .viewer-community-articles__byline a:hover,
      .viewer-community-articles__byline a:focus-visible {
        color: rgba(235, 248, 255, 0.98);
        text-decoration: underline;
        text-underline-offset: 0.16em;
      }

      .viewer-community-articles__byline-title-link {
        color: inherit !important;
        text-decoration: none !important;
        border-radius: 0.45em;
        transition:
          color 160ms ease,
          background 160ms ease,
          box-shadow 160ms ease;
      }

      .viewer-community-articles__byline-title-link:hover,
      .viewer-community-articles__byline-title-link:focus-visible {
        color: rgba(235, 248, 255, 0.94) !important;
        text-decoration: none !important;
        background: rgba(136, 215, 255, 0.07);
        box-shadow: 0 0 0 4px rgba(136, 215, 255, 0.06);
        outline: none;
      }

      .viewer-community-articles__date {
        margin-top: 4px;
        color: rgba(197, 208, 227, 0.76);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .hf-blog-preview {
        width: min(100%, 1040px);
        margin: clamp(24px, 5vw, 62px) auto clamp(42px, 7vw, 92px);
        padding: 0 clamp(14px, 3.2vw, 30px);
        box-sizing: border-box;
      }

      .hf-blog-preview__copy {
        --viewer-article-copy-pad-left: clamp(22px, 4vw, 48px);
        --viewer-article-copy-pad-right: clamp(22px, 4vw, 48px);
        width: 100%;
        max-width: none;
        margin: 0 auto;
        min-height: auto;
      }

      .hf-blog-preview__copy::before {
        border-radius: inherit;
      }

      .hf-blog-preview__head {
        gap: 18px;
      }

      .hf-blog-preview__head .pill {
        white-space: nowrap;
      }

      .hf-blog-preview__eyebrow-break {
        display: none;
      }

      .hf-blog-preview #hf-blog-preview-title {
        font-family: "Inter", sans-serif;
        font-size: clamp(2.1rem, 3.4vw, 3.5rem);
        line-height: 0.98;
        letter-spacing: -0.05em;
      }

      .hf-blog-preview .viewer-community-articles__byline,
      .hf-blog-preview .viewer-community-articles__dek,
      .hf-blog-preview .viewer-community-articles__body {
        width: min(100%, 760px);
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
      }

      .hf-blog-preview .viewer-community-articles__body {
        color: rgba(232, 242, 250, 0.91);
        font-size: clamp(1.01rem, 1.42vw, 1.13rem);
      }

      .hf-blog-preview .viewer-community-articles__media {
        width: min(100%, 900px);
        max-width: 900px;
        margin: 22px auto;
        padding: clamp(8px, 1.8vw, 13px);
        border-radius: 24px;
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.105), rgba(156, 255, 99, 0.035)),
          rgba(2, 8, 16, 0.7);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.1),
          0 22px 70px rgba(0, 0, 0, 0.28);
      }

      .hf-blog-preview .viewer-community-articles__media img {
        display: block;
        width: 100%;
        max-width: 100%;
        border-radius: 17px;
      }

      /* Portrait walkthrough video: on desktop it sits to the RIGHT of the
         text instead of spanning the column - the video keeps its own size
         (max-width 520px / max-height 78vh constraints), the frame shrinks
         to fit it, and the article text flows alongside. */
      @media (min-width: 981px) {
        .hf-blog-preview .viewer-community-articles__media:has(video) {
          float: right;
          clear: right;
          width: auto;
          /* wide enough that the video keeps its full current size
             (max-height 78vh -> ~440px wide portrait + frame padding) */
          max-width: min(52%, 600px);
          margin: 4px 0 20px 28px;
        }
        .hf-blog-preview .viewer-community-articles__body::after {
          content: "";
          display: block;
          clear: both;
        }
      }

      @media (max-width: 720px) {
        .hf-blog-preview {
          margin-top: 14px;
          padding-inline: 10px;
        }

        .hf-blog-preview__copy {
          --viewer-article-copy-pad-left: 18px;
          --viewer-article-copy-pad-right: 18px;
          padding: 22px 18px 28px;
          border-radius: 28px;
        }

        .hf-blog-preview__head {
          display: block;
          min-height: 64px;
          padding-top: 0;
        }

        .hf-blog-preview__head .pill {
          position: absolute;
          top: 0;
          right: 0;
        }

        .hf-blog-preview__eyebrow {
          display: inline-flex;
          flex-direction: row;
          align-items: center;
          min-height: 42px;
          line-height: 1.05;
        }

        .hf-blog-preview__eyebrow-break {
          display: block;
        }

        .hf-blog-preview #hf-blog-preview-title {
          font-size: clamp(1.72rem, 8vw, 2.52rem);
          margin: 18px 0 16px;
          max-width: 100%;
        }

        .hf-blog-preview .viewer-community-articles__media {
          width: calc(100% + 18px);
          max-width: none;
          margin-left: -9px;
          margin-right: -9px;
          border-radius: 20px;
        }
      }

      .viewer-community-articles__socials {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
        margin-top: 5px;
      }

      .viewer-community-articles__socials a {
        display: inline-flex;
        align-items: center;
        min-width: 0;
        max-width: min(340px, 78vw);
        gap: 6px;
        padding: 3px 8px 3px 6px;
        border: 1px solid rgba(235, 248, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.035);
        color: rgba(235, 248, 255, 0.84);
        font-size: 0.8rem;
        font-weight: 660;
        line-height: 1.25;
        text-decoration: none;
        transition:
          border-color 160ms ease,
          background 160ms ease,
          color 160ms ease,
          transform 160ms ease;
      }

      .viewer-community-articles__socials a:hover,
      .viewer-community-articles__socials a:focus-visible {
        border-color: rgba(235, 248, 255, 0.22);
        background: rgba(255, 255, 255, 0.065);
        color: rgba(235, 248, 255, 0.96);
        transform: translateY(-1px);
      }

      .viewer-community-articles__social-icon {
        width: 15px;
        height: 15px;
        flex: 0 0 auto;
        color: currentColor;
      }

      .viewer-community-articles__social-label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .viewer-community-articles__avatar {
        width: 48px;
        height: 48px;
        border-radius: 999px;
        object-fit: cover;
        border: 1.5px solid rgba(235, 248, 255, 0.82);
        box-shadow:
          0 10px 24px rgba(0, 0, 0, 0.24),
          0 0 0 5px rgba(136, 215, 255, 0.07);
      }

      .viewer-community-articles__body p {
        margin: 0 0 1em;
      }

      .viewer-community-articles__body h2,
      .viewer-community-articles__body h3 {
        margin: 1.2em 0 0.45em;
        color: rgba(235, 248, 255, 0.96);
        letter-spacing: -0.045em;
        line-height: 1.08;
      }

      .viewer-community-articles__body h2 {
        font-size: clamp(1.45rem, 2.7vw, 2.2rem);
      }

      .viewer-community-articles__body h3 {
        font-size: clamp(1.18rem, 2.2vw, 1.55rem);
      }

      .viewer-community-articles__body blockquote {
        margin:
          0
          calc(-1 * var(--viewer-article-copy-pad-right, clamp(18px, 2.2vw, 28px)))
          1em
          calc(-1 * var(--viewer-article-copy-pad-left, clamp(18px, 2.2vw, 28px)));
        max-width: none;
        position: relative;
        isolation: isolate;
        padding:
          22px
          calc(var(--viewer-article-copy-pad-right, clamp(18px, 2.2vw, 28px)) + 8px)
          22px
          calc(var(--viewer-article-copy-pad-left, clamp(18px, 2.2vw, 28px)) + 52px);
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        color: rgba(231, 243, 252, 0.92);
        overflow: visible;
      }

      .viewer-community-articles__body blockquote::before {
        content: "";
        position: absolute;
        z-index: 1;
        top: 50%;
        left: calc(var(--viewer-article-copy-pad-left, clamp(18px, 2.2vw, 28px)) + 19px);
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: #9cff63;
        box-shadow:
          0 0 0 8px rgba(156, 255, 99, 0.065),
          0 0 30px rgba(156, 255, 99, 0.36),
          0 0 72px rgba(136, 215, 255, 0.12);
        transform: translateY(-50%);
        pointer-events: none;
      }

      .viewer-community-articles__body blockquote::after {
        content: "";
        position: absolute;
        z-index: 0;
        top: 50%;
        left: -82px;
        width: 274px;
        height: 154px;
        border-radius: 999px;
        opacity: 0.88;
        background: rgba(156, 255, 99, 0.14);
        box-shadow:
          92px -22px 92px rgba(136, 215, 255, 0.13),
          160px 40px 92px rgba(136, 215, 255, 0.062);
        filter: blur(24px);
        transform: translateY(-50%);
        pointer-events: none;
      }

      .viewer-community-articles__body ul,
      .viewer-community-articles__body ol {
        margin: 0 0 1em;
        padding-left: 1.35em;
      }

      .viewer-community-articles__body li {
        margin: 0.26em 0;
      }

      .viewer-community-articles__meta {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: center;
      }

      .viewer-community-articles__actions {
        gap: 12px;
        padding-top: 10px;
      }

      /* The first-party hide sets the hidden attribute; the display rules on
         these classes would otherwise win over the UA's [hidden] default. */
      .viewer-community-articles__meta[hidden],
      .viewer-community-articles__comments[hidden],
      .viewer-community-articles__comment-form[hidden] {
        display: none !important;
      }

      .viewer-community-articles__action {
        min-height: 44px;
        padding: 0 18px;
        border-color: rgba(136, 215, 255, 0.22);
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.14), rgba(136, 215, 255, 0.06)),
          rgba(7, 16, 29, 0.72);
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.2),
          inset 0 1px 0 rgba(255, 255, 255, 0.1);
      }

      .viewer-community-articles__action:hover,
      .viewer-community-articles__action:focus-visible {
        border-color: rgba(136, 215, 255, 0.42);
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.2), rgba(136, 215, 255, 0.08)),
          rgba(10, 22, 38, 0.86);
      }

      .viewer-community-articles__heart {
        min-width: 82px;
        color: #ffdfe7;
        border-color: rgba(255, 122, 158, 0.28);
        background:
          radial-gradient(circle at 50% 0%, rgba(255, 122, 158, 0.2), transparent 60%),
          linear-gradient(180deg, rgba(255, 122, 158, 0.13), rgba(136, 215, 255, 0.055)),
          rgba(7, 16, 29, 0.76);
      }

      .viewer-community-articles__heart svg {
        width: 17px;
        height: 17px;
        color: #ff7a9e;
        filter: drop-shadow(0 0 10px rgba(255, 122, 158, 0.28));
      }

      .viewer-community-articles__heart-count {
        color: rgba(235, 248, 255, 0.96);
        font-weight: 840;
      }

      .viewer-community-articles__heart.is-heart-updated svg {
        animation: viewerArticleHeartPulse 520ms cubic-bezier(0.2, 0.9, 0.22, 1);
      }

      .viewer-community-articles__heart.is-heart-updated .viewer-community-articles__heart-count {
        animation: viewerArticleHeartCountPop 520ms cubic-bezier(0.2, 0.9, 0.22, 1);
      }

      .viewer-community-articles__bookmark.is-bookmarked {
        border-color: rgba(156, 255, 99, 0.34);
        color: #e7ffd8;
        background:
          radial-gradient(circle at 50% 0%, rgba(156, 255, 99, 0.18), transparent 62%),
          linear-gradient(180deg, rgba(156, 255, 99, 0.14), rgba(136, 215, 255, 0.055)),
          rgba(7, 16, 29, 0.76);
      }

      @keyframes viewerArticleHeartPulse {
        0% {
          transform: scale(1);
          filter: drop-shadow(0 0 10px rgba(255, 122, 158, 0.28));
        }
        42% {
          transform: scale(1.22);
          filter: drop-shadow(0 0 18px rgba(255, 122, 158, 0.62));
        }
        100% {
          transform: scale(1);
          filter: drop-shadow(0 0 10px rgba(255, 122, 158, 0.28));
        }
      }

      @keyframes viewerArticleHeartCountPop {
        0% {
          transform: translateY(0);
        }
        42% {
          transform: translateY(-1px) scale(1.08);
        }
        100% {
          transform: translateY(0);
        }
      }

      .viewer-community-articles__comment-form {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        align-items: center;
        margin-top: 2px;
        padding: 10px;
        border: 1px solid rgba(136, 215, 255, 0.13);
        border-radius: 24px;
        background:
          radial-gradient(circle at 0% 0%, rgba(136, 215, 255, 0.08), transparent 34%),
          rgba(0, 0, 0, 0.18);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
      }

      .viewer-community-articles__select,
      .viewer-community-articles__comment-input {
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background: rgba(0, 0, 0, 0.26);
        color: var(--text);
        padding: 10px 12px;
      }

      .viewer-community-articles__comment-input {
        width: 100%;
        min-height: 44px;
        padding: 0 16px;
        border-color: rgba(136, 215, 255, 0.14);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
          rgba(1, 5, 12, 0.52);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.05),
          0 10px 26px rgba(0, 0, 0, 0.12);
      }

      .viewer-community-articles__comment-input:focus {
        border-color: rgba(136, 215, 255, 0.42);
        outline: none;
        box-shadow:
          0 0 0 3px rgba(136, 215, 255, 0.1),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .viewer-community-articles__comment-submit {
        min-height: 44px;
        padding: 0 18px;
        border-color: rgba(156, 255, 99, 0.26);
        background:
          linear-gradient(135deg, rgba(156, 255, 99, 0.24), rgba(136, 215, 255, 0.1)),
          rgba(8, 18, 30, 0.82);
        color: rgba(235, 255, 224, 0.96);
      }

      .viewer-community-articles__visual {
        --viewer-community-article-frame-clip: none;
        --viewer-community-article-sticky-top: 18px;
        --viewer-community-article-sticky-bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        --graph-issue-panel-gap: 14px;
        --graph-issue-panel-inset: 12px;
        --graph-issue-panel-width: clamp(320px, 30vw, 394px);
        position: sticky;
        top: var(--viewer-community-article-sticky-top);
        display: grid;
        gap: 10px;
        max-height: calc(100vh - var(--viewer-community-article-sticky-top) - var(--viewer-community-article-sticky-bottom));
        max-height: calc(100dvh - var(--viewer-community-article-sticky-top) - var(--viewer-community-article-sticky-bottom));
        opacity: 0;
        transform: translateX(24px) scale(0.985);
        transition:
          opacity 360ms ease,
          transform 520ms cubic-bezier(.2, .8, .2, 1);
      }

      .viewer-community-articles__visual::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 3;
        pointer-events: none;
        opacity: 0;
        border: 1px solid rgba(136, 215, 255, 0.12);
        border-radius: 24px;
        background:
          radial-gradient(circle at 20% 8%, rgba(136, 215, 255, 0.16), transparent 32%),
          radial-gradient(circle at 78% 22%, rgba(156, 255, 99, 0.1), transparent 34%),
          linear-gradient(180deg, rgba(8, 17, 30, 0.86), rgba(3, 8, 16, 0.92));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.07),
          0 24px 64px rgba(0, 0, 0, 0.24);
        transition: opacity 180ms ease;
      }

      .viewer-community-articles__visual::before {
        content: "Loading model view";
        position: absolute;
        left: 50%;
        top: calc(50% + 24px);
        z-index: 4;
        pointer-events: none;
        opacity: 0;
        transform: translate(-50%, -50%);
        padding: 10px 14px;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 999px;
        background: rgba(2, 7, 14, 0.62);
        color: rgba(235, 248, 255, 0.82);
        font-size: 0.74rem;
        font-weight: 780;
        letter-spacing: 0.13em;
        text-transform: uppercase;
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.22),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        transition: opacity 180ms ease;
      }

      .viewer-community-articles.is-visual-loading .viewer-community-articles__visual::after,
      .viewer-community-articles.is-visual-loading .viewer-community-articles__visual::before {
        opacity: 1;
      }

      .viewer-community-articles__visual-controls {
        display: grid;
        gap: 8px;
        min-width: 0;
      }

      .viewer-community-articles__visual-dots {
        display: none;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
      }

      .viewer-community-articles__visual-dots span {
        display: block;
        width: 10px;
        height: 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.24);
        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
      }

      .viewer-community-articles__visual-dots span:first-child {
        background: rgba(255, 255, 255, 0.24);
      }

      .viewer-community-articles__visual-dots span:nth-child(2) {
        background: rgba(255, 255, 255, 0.24);
      }

      .viewer-community-articles__visual-dots span:last-child {
        background: rgba(156, 255, 99, 0.88);
        box-shadow: 0 0 0 3px rgba(156, 255, 99, 0.08);
      }

      .viewer-community-articles__show-toggle {
        display: none;
      }

      .viewer-community-articles__granularity {
        width: 100%;
      }

      .viewer-community-articles__visual .viewer-community-articles__iframe {
        height: calc(100vh - 116px);
        min-height: 560px;
      }

      .viewer-community-articles.is-split .viewer-community-articles__visual {
        grid-template-rows: auto minmax(0, 1fr);
        height: calc(100vh - var(--viewer-community-article-sticky-top) - var(--viewer-community-article-sticky-bottom));
        height: calc(100dvh - var(--viewer-community-article-sticky-top) - var(--viewer-community-article-sticky-bottom));
        opacity: 1;
        transform: translateX(0) scale(1);
      }

      .viewer-community-articles.is-split .viewer-community-articles__visual .viewer-community-articles__iframe {
        height: 100%;
        min-height: 0;
      }

      .viewer-community-articles.is-article-hidden {
        padding: 0 0 max(8px, env(safe-area-inset-bottom));
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
      }

      .viewer-community-articles.is-article-hidden::before,
      .viewer-community-articles.is-article-hidden::after {
        display: none;
      }

      .viewer-community-articles.is-article-hidden .viewer-community-articles__layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
      }

      .viewer-community-articles.is-article-hidden .viewer-community-articles__copy {
        display: none;
      }

      .viewer-community-articles.is-article-hidden .viewer-community-articles__visual {
        position: relative;
        top: auto;
        display: grid;
        grid-template-rows: auto minmax(0, 1fr);
        gap: 0;
        height: min(920px, calc(100vh - 172px));
        height: min(920px, calc(100dvh - 172px));
        min-height: min(620px, calc(100vh - 172px));
        min-height: min(620px, calc(100dvh - 172px));
        max-height: calc(100vh - 172px);
        max-height: calc(100dvh - 172px);
        opacity: 1;
        transform: none;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: var(--preview-surface);
        box-shadow:
          var(--shadow),
          inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        overflow: hidden;
      }

      .viewer-community-articles.is-article-hidden .viewer-community-articles__visual-controls {
        display: flex;
        align-items: center;
        gap: 16px;
        min-width: 0;
        padding: 15px 18px;
        border-bottom: 0;
        background: linear-gradient(180deg, rgba(5, 9, 20, 0.38), rgba(5, 9, 20, 0.14));
        backdrop-filter: blur(18px) saturate(1.08);
      }

      .viewer-community-articles.is-article-hidden .viewer-community-articles__visual-dots,
      .viewer-community-articles.is-article-hidden .viewer-community-articles__show-toggle {
        display: inline-flex;
      }

      .viewer-community-articles:not(.is-article-hidden) .viewer-community-articles__visual-dots {
        display: none !important;
      }

      .viewer-community-articles.is-article-hidden .viewer-community-articles__visual-dots .viewer-frame__dot {
        pointer-events: auto;
      }

      .viewer-community-articles.is-article-hidden .viewer-community-articles__show-toggle {
        min-height: 34px;
        padding: 0 12px;
      }

      .viewer-community-articles.is-article-hidden .viewer-community-articles__granularity {
        width: auto;
        margin-left: auto;
      }

      .viewer-community-articles.is-article-hidden .viewer-community-articles__visual .viewer-community-articles__iframe {
        height: 100%;
        min-height: 0;
        border: 0;
        border-radius: 0;
      }

      .viewer-community-articles.is-article-hidden.is-visual-info-open .viewer-community-articles__visual-controls,
      .viewer-community-articles.is-article-hidden.is-visual-info-open .viewer-community-articles__visual .viewer-community-articles__iframe {
        width: 100%;
      }

      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route__head,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route__intro,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route__actions {
        border: 0 !important;
        border-top: 0 !important;
        border-bottom: 0 !important;
        background-image: none !important;
        box-shadow: none !important;
      }

      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route::before,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route::after,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route__head::before,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route__head::after,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route__intro::before,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route__intro::after,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route__actions::before,
      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-route__actions::after {
        display: none !important;
        content: none !important;
      }

      body.route-viewer.route-viewer-article .page.route-viewer.viewer-community-article-active .viewer-frame__bar {
        border-bottom: 0 !important;
      }

      body.route-viewer.route-viewer-article:not(.route-viewer-article-hidden) .page.route-viewer .viewer-frame {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        overflow: hidden !important;
      }

      body.route-viewer.viewer-community-article-active.route-viewer-article-hidden {
        overflow-y: hidden;
      }

      body.route-viewer.route-viewer-article-hidden .page.route-viewer.viewer-community-article-active,
      body.route-viewer.route-viewer-article-hidden .page.route-viewer.viewer-community-article-active .shell {
        height: 100vh;
        height: 100dvh;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: hidden;
      }

      body.route-viewer.route-viewer-article-hidden .page.route-viewer.viewer-community-article-active .viewer-route {
        gap: 20px;
        min-height: 0;
      }

      body.route-viewer.route-viewer-article-hidden .page.route-viewer.viewer-community-article-active .viewer-route__head {
        margin-bottom: 0;
      }

      body.route-viewer.route-viewer-article-hidden .viewer-route .viewer-frame {
        display: none !important;
      }

      /* with the article hidden the graph panel should fill the viewport
         exactly like the plain model page - flex-fill the route chain
         instead of the fixed 920px/172px reserve, which left a dead band
         under the panel (large on tall windows) */
      body.route-viewer.route-viewer-article-hidden .page.route-viewer.viewer-community-article-active .viewer-route {
        flex: 1 1 auto;
      }

      body.route-viewer.route-viewer-article-hidden .page.route-viewer.viewer-community-article-active .viewer-community-articles.is-article-hidden {
        flex: 1 1 auto;
        min-height: 0;
        grid-template-rows: minmax(0, 1fr);
      }

      body.route-viewer.route-viewer-article-hidden .page.route-viewer.viewer-community-article-active .viewer-community-articles.is-article-hidden .viewer-community-articles__layout {
        height: 100%;
        min-height: 0;
      }

      body.route-viewer.route-viewer-article-hidden .page.route-viewer.viewer-community-article-active .viewer-community-articles.is-article-hidden .viewer-community-articles__visual {
        height: 100%;
        min-height: 0;
        max-height: none;
      }

      .viewer-community-articles.is-split.is-visual-info-open .viewer-community-articles__visual {
        grid-template-rows: auto minmax(0, 1fr);
        height: calc(100vh - var(--viewer-community-article-sticky-top) - var(--viewer-community-article-sticky-bottom));
        height: calc(100dvh - var(--viewer-community-article-sticky-top) - var(--viewer-community-article-sticky-bottom));
        min-height: 0;
      }

      .viewer-community-articles.is-split.is-visual-info-open .viewer-community-articles__visual-controls {
        position: relative;
        z-index: 2;
        grid-column: 1;
        grid-row: 1;
        width: var(--viewer-community-article-graph-slot-width, 100%);
        max-width: 100%;
      }

      .viewer-community-articles.is-split.is-visual-info-open .viewer-community-articles__visual .viewer-community-articles__iframe {
        z-index: 1;
        grid-column: 1;
        grid-row: 1 / 3;
        height: 100%;
        min-height: 0;
        border-color: transparent;
        background: transparent;
        -webkit-clip-path: var(--viewer-community-article-frame-clip, none);
        clip-path: var(--viewer-community-article-frame-clip, none);
      }

      .viewer-community-articles.is-split.is-graph-issue-open .viewer-community-articles__visual-controls,
      .viewer-community-articles.is-split.is-graph-issue-open .viewer-community-articles__visual .viewer-community-articles__iframe {
        width: calc(
          100% -
          min(var(--graph-issue-panel-width), calc(100% - 24px)) -
          var(--graph-issue-panel-gap) -
          var(--graph-issue-panel-inset)
        );
        max-width: 100%;
        transition:
          width 230ms ease,
          margin-right 230ms ease,
          clip-path 230ms ease,
          -webkit-clip-path 230ms ease;
      }

      .viewer-community-articles__visual > .graph-issue-panel {
        top: calc(12px + var(--viewer-community-article-report-panel-top, 0px));
        bottom: 12px;
        max-height: calc(100% - 24px - var(--viewer-community-article-report-panel-top, 0px));
      }

      @media (max-width: 980px) {
        body.route-viewer.route-viewer-article .viewer-community-articles__hide-toggle,
        body.route-viewer.route-viewer-article .viewer-community-articles__hide-float-tab {
          display: none !important;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles {
          gap: 0;
          padding:
            clamp(16px, 4vw, 22px) max(12px, env(safe-area-inset-right))
            24px max(12px, env(safe-area-inset-left));
          -webkit-clip-path: inset(0 round 30px);
          clip-path: inset(0 round 30px);
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__layout {
          display: block;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__visual {
          display: none;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles.is-article-hidden .viewer-community-articles__layout {
          display: grid;
          grid-template-columns: minmax(0, 1fr);
        }

        body.route-viewer.route-viewer-article .viewer-community-articles.is-article-hidden .viewer-community-articles__copy {
          display: none;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles.is-article-hidden .viewer-community-articles__visual {
          display: grid;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__copy {
          --viewer-article-copy-pad-y: 0px;
          --viewer-article-outer-pad-left: max(12px, env(safe-area-inset-left));
          --viewer-article-outer-pad-right: max(12px, env(safe-area-inset-right));
          --viewer-article-copy-pad-left: calc(max(16px, env(safe-area-inset-left)) + var(--viewer-article-outer-pad-left));
          --viewer-article-copy-pad-right: calc(max(16px, env(safe-area-inset-right)) + var(--viewer-article-outer-pad-right));
          --viewer-article-rich-edge-gutter: clamp(8px, 2.2vw, 12px);
          --viewer-article-rich-breakout-left: calc(max(16px, env(safe-area-inset-left)) + var(--viewer-article-outer-pad-left) - var(--viewer-article-rich-edge-gutter));
          --viewer-article-rich-breakout-right: calc(max(16px, env(safe-area-inset-right)) + var(--viewer-article-outer-pad-right) - var(--viewer-article-rich-edge-gutter));
          padding:
            0 max(16px, env(safe-area-inset-right))
            0 max(16px, env(safe-area-inset-left));
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
          overflow: visible;
          -webkit-clip-path: none;
          clip-path: none;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__copy::before {
          content: none;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__head,
        body.route-viewer.route-viewer-article .viewer-community-articles__byline,
        body.route-viewer.route-viewer-article .viewer-community-articles__dek,
        body.route-viewer.route-viewer-article .viewer-community-articles__body,
        body.route-viewer.route-viewer-article .viewer-community-articles__meta,
        body.route-viewer.route-viewer-article .viewer-community-articles__comments {
          width: 100%;
          max-width: 100%;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__body pre,
        body.route-viewer.route-viewer-article .viewer-community-articles__media,
        body.route-viewer.route-viewer-article .viewer-community-articles__html-block,
        body.route-viewer.route-viewer-article .viewer-community-articles__table-set {
          width: calc(100% + var(--viewer-article-rich-breakout-left) + var(--viewer-article-rich-breakout-right));
          max-width: none;
          margin-left: calc(-1 * var(--viewer-article-rich-breakout-left));
          margin-right: calc(-1 * var(--viewer-article-rich-breakout-right));
          box-sizing: border-box;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__table-set,
        body.route-viewer.route-viewer-article .viewer-community-articles__table-set .viewer-editorial__deployment-wrap {
          justify-self: stretch;
          width: calc(100% + var(--viewer-article-rich-breakout-left) + var(--viewer-article-rich-breakout-right));
          max-width: none;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__table-set .viewer-editorial__deployment-wrap {
          width: 100%;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__media img,
        body.route-viewer.route-viewer-article .viewer-community-articles__media audio,
        body.route-viewer.route-viewer-article .viewer-community-articles__media video,
        body.route-viewer.route-viewer-article .viewer-community-articles__media-video {
          width: 100%;
          max-width: 100%;
        }
      }

      @media (max-width: 1500px) {
        .hf-article-actions {
          flex-wrap: wrap;
          max-width: none;
          min-width: 0;
        }
      }

      @media (max-width: 980px) {
        .page.route-hf-article-editor {
          height: auto;
          min-height: 100dvh;
          overflow: visible;
        }

        .page.route-hf-article-editor .shell {
          height: auto;
        }

        .hf-article-page {
          height: auto;
          min-height: 100dvh;
          overflow: visible;
          padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 14px max(8px, env(safe-area-inset-left));
        }

        .hf-article-shell {
          height: auto;
          gap: 8px;
        }

        .hf-article-top,
        .hf-article-editor,
        .viewer-community-articles__layout {
          grid-template-columns: 1fr;
        }

        .hf-article-top {
          display: grid;
          gap: 10px;
          padding: 12px;
          border: 1px solid rgba(136, 215, 255, 0.16);
          border-radius: 22px;
        }

        .hf-article-top .eyebrow {
          font-size: 0.66rem;
          letter-spacing: 0.12em;
        }

        .hf-article-top__copy {
          gap: 6px;
        }

        .hf-article-field--title .hf-article-input {
          font-size: clamp(1.12rem, 5.3vw, 1.5rem);
          line-height: 1.08;
        }

        .hf-article-top.is-intro-open .hf-article-field--intro {
          max-height: 100px;
        }

        .hf-article-field--intro .hf-article-textarea {
          max-height: 58px;
          font-size: 0.86rem;
        }

        .hf-article-actions {
          display: grid;
          grid-template-columns: repeat(3, minmax(0, 1fr));
          width: 100%;
          gap: 6px;
          flex-wrap: nowrap;
          justify-content: flex-start;
          max-width: none;
          min-width: 0;
        }

        .hf-article-button {
          min-height: 38px;
          gap: 5px;
          padding: 0 8px;
          font-size: 0.76rem;
        }

        .hf-article-button span {
          min-width: 0;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .hf-article-button svg {
          width: 15px;
          height: 15px;
        }

        .hf-article-button--primary {
          grid-column: 1 / -1;
          min-height: 42px;
          font-size: 0.86rem;
        }

        .hf-article-editor {
          display: flex;
          flex-direction: column;
          gap: 8px;
          height: auto;
          overflow: visible;
          padding: 0;
        }

        .hf-article-editor__canvas {
          order: 1;
          position: relative;
          isolation: isolate;
          height: auto;
          overflow: visible;
          gap: 8px;
          min-height: calc(
            var(--hf-article-mobile-body-top, 0px) +
            var(--hf-article-mobile-body-height, 54dvh) +
            16px
          );
          padding: 0;
          border: 0;
          border-radius: 20px;
          background: transparent;
          box-shadow: none;
        }

        .hf-article-editor__preview {
          order: 0;
          position: sticky;
          top: max(6px, env(safe-area-inset-top));
          z-index: 7;
          width: 100%;
          box-sizing: border-box;
          height: auto;
          max-height: none;
          gap: 8px;
          padding: 8px;
          border-radius: 20px;
        }

        .hf-article-granularity {
          gap: 7px;
          padding: 5px 7px;
          border-radius: 14px;
        }

        .hf-article-granularity .viewer-granularity__label,
        .hf-article-granularity .viewer-granularity__value {
          font-size: 0.68rem;
        }

        .hf-article-toolbar .hf-article-status {
          display: none;
        }

        .hf-article-toolbar {
          --hf-article-toolbar-scroll-mask-height: 22px;
          flex-wrap: nowrap;
          gap: 5px;
          overflow-x: auto;
          overflow-y: hidden;
          overscroll-behavior-x: contain;
          padding: 6px;
          margin: 8px 8px 0;
          border-radius: 16px;
          top: var(--hf-article-mobile-toolbar-top, 0px);
          z-index: 8;
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
          box-shadow:
            0 0 0 8px rgba(3, 9, 18, 0.98),
            0 0 0 9px rgba(136, 215, 255, 0.14),
            0 16px 42px rgba(0, 0, 0, 0.24),
            inset 0 1px 0 rgba(255, 255, 255, 0.06);
        }

        .hf-article-toolbar::-webkit-scrollbar {
          display: none;
        }

        .hf-article-toolbar__group {
          flex: 0 0 auto;
          flex-wrap: nowrap;
          gap: 2px;
          padding: 2px;
          border-radius: 13px;
        }

        .hf-article-tool {
          min-height: 36px;
          padding: 0 10px;
          font-size: 0.78rem;
        }

        .hf-article-tool--icon-only {
          width: 36px;
          padding: 0;
        }

        .hf-article-body {
          margin: 10px 8px 8px;
          position: sticky;
          top: var(
            --hf-article-mobile-body-top,
            calc(
              var(--hf-article-mobile-toolbar-top, 0px) +
              var(--hf-article-mobile-toolbar-height, 0px) +
              12px
            )
          );
          z-index: 6;
          box-sizing: border-box;
          height: var(--hf-article-mobile-body-height, 54dvh);
          min-height: min(54dvh, var(--hf-article-mobile-body-height, 54dvh));
          max-height: var(--hf-article-mobile-body-height, 54dvh);
          overflow-y: auto;
          overscroll-behavior: contain;
          padding: 14px;
          border-radius: 20px;
          font-size: 1rem;
          line-height: 1.68;
          scrollbar-color: #1b212f transparent;
          scrollbar-width: thin;
          scroll-margin-top: calc(
            var(--hf-article-mobile-toolbar-top, 0px) +
            var(--hf-article-mobile-toolbar-height, 0px) +
            12px
          );
          transition: padding-top 160ms ease;
        }

        #hf-article-body {
          clip-path: inset(0 round 20px);
        }

        .hf-article-page.is-editor-body-safe-inset .hf-article-body {
          padding-top: 14px;
        }

        .hf-article-editor__iframe {
          height: min(42dvh, 320px);
          min-height: 250px;
          width: 100%;
          border-radius: 17px;
        }

        .hf-article-node-menu[data-mobile-sheet="true"] {
          top: auto;
          right: max(8px, env(safe-area-inset-right));
          bottom: max(8px, env(safe-area-inset-bottom));
          left: max(8px, env(safe-area-inset-left));
          width: auto;
          max-height: min(54dvh, 430px);
          padding: 11px;
          border-radius: 24px 24px 18px 18px;
          background:
            radial-gradient(circle at 12% 0%, rgba(156, 255, 99, 0.12), transparent 34%),
            linear-gradient(180deg, rgba(10, 19, 34, 0.98), rgba(3, 8, 16, 0.98));
          box-shadow:
            0 -18px 80px rgba(0, 0, 0, 0.52),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
          backdrop-filter: blur(18px);
          overscroll-behavior: contain;
        }

        .hf-article-node-menu[data-mobile-sheet="true"]::before {
          content: "Mention node";
          display: block;
          margin: 0 4px 8px;
          color: rgba(197, 208, 227, 0.58);
          font-size: 0.7rem;
          font-weight: 820;
          letter-spacing: 0.12em;
          text-transform: uppercase;
        }

        .hf-article-node-menu[data-mobile-sheet="true"] .hf-article-node-option {
          min-height: 58px;
          padding: 12px;
          border-radius: 16px;
        }

        .hf-article-node-menu[data-mobile-sheet="true"] .hf-article-node-option__swatch {
          width: 16px;
          height: 16px;
          border-radius: 5px;
        }

        .hf-article-node-menu[data-mobile-sheet="true"] .hf-article-node-option__copy {
          gap: 5px;
        }

        .hf-article-node-menu[data-mobile-sheet="true"] .hf-article-node-option__label {
          font-size: 0.98rem;
        }

        .hf-article-node-menu[data-mobile-sheet="true"] .hf-article-node-option__meta {
          flex-wrap: wrap;
        }

        .hf-article-node-menu[data-mobile-sheet="true"] .hf-article-node-option__type {
          max-width: min(18rem, 68vw);
        }

        .viewer-community-articles__visual {
          display: none;
        }

        .viewer-community-articles__visual .viewer-community-articles__iframe {
          height: auto;
          min-height: 520px;
        }


        body.route-viewer.route-viewer-article .viewer-community-articles {
          gap: 0;
          padding:
            clamp(16px, 4vw, 22px) max(12px, env(safe-area-inset-right))
            24px max(12px, env(safe-area-inset-left));
          -webkit-clip-path: inset(0 round 30px);
          clip-path: inset(0 round 30px);
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__layout {
          display: block;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__visual {
          display: none;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__copy {
          --viewer-article-copy-pad-y: 0px;
          --viewer-article-outer-pad-left: max(12px, env(safe-area-inset-left));
          --viewer-article-outer-pad-right: max(12px, env(safe-area-inset-right));
          --viewer-article-copy-pad-left: calc(max(16px, env(safe-area-inset-left)) + var(--viewer-article-outer-pad-left));
          --viewer-article-copy-pad-right: calc(max(16px, env(safe-area-inset-right)) + var(--viewer-article-outer-pad-right));
          --viewer-article-rich-edge-gutter: clamp(8px, 2.2vw, 12px);
          --viewer-article-rich-breakout-left: calc(max(16px, env(safe-area-inset-left)) + var(--viewer-article-outer-pad-left) - var(--viewer-article-rich-edge-gutter));
          --viewer-article-rich-breakout-right: calc(max(16px, env(safe-area-inset-right)) + var(--viewer-article-outer-pad-right) - var(--viewer-article-rich-edge-gutter));
          padding:
            0 max(16px, env(safe-area-inset-right))
            0 max(16px, env(safe-area-inset-left));
          border: 0;
          border-radius: 0;
          background: transparent;
          box-shadow: none;
          overflow: visible;
          -webkit-clip-path: none;
          clip-path: none;
        }


        body.route-viewer.route-viewer-article .viewer-community-articles__copy::before {
          content: none;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__html-block .hf-article-custom-html__touch-scroll-shield,
        .hf-article-page.is-reader-preview .viewer-community-articles__html-block .hf-article-custom-html__touch-scroll-shield {
          position: absolute;
          inset: 0;
          z-index: 2;
          display: block;
          border-radius: inherit;
          background: transparent;
          touch-action: auto;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__head,
        body.route-viewer.route-viewer-article .viewer-community-articles__byline,
        body.route-viewer.route-viewer-article .viewer-community-articles__dek,
        body.route-viewer.route-viewer-article .viewer-community-articles__body,
        body.route-viewer.route-viewer-article .viewer-community-articles__meta,
        body.route-viewer.route-viewer-article .viewer-community-articles__comments {
          width: 100%;
          max-width: 100%;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__body pre,
        body.route-viewer.route-viewer-article .viewer-community-articles__media,
        body.route-viewer.route-viewer-article .viewer-community-articles__html-block,
        body.route-viewer.route-viewer-article .viewer-community-articles__table-set {
          width: calc(100% + var(--viewer-article-rich-breakout-left) + var(--viewer-article-rich-breakout-right));
          max-width: none;
          margin-left: calc(-1 * var(--viewer-article-rich-breakout-left));
          margin-right: calc(-1 * var(--viewer-article-rich-breakout-right));
          box-sizing: border-box;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__table-set,
        body.route-viewer.route-viewer-article .viewer-community-articles__table-set .viewer-editorial__deployment-wrap {
          justify-self: stretch;
          width: calc(100% + var(--viewer-article-rich-breakout-left) + var(--viewer-article-rich-breakout-right));
          max-width: none;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__table-set .viewer-editorial__deployment-wrap {
          width: 100%;
        }

        body.route-viewer.route-viewer-article .viewer-community-articles__media img,
        body.route-viewer.route-viewer-article .viewer-community-articles__media audio,
        body.route-viewer.route-viewer-article .viewer-community-articles__media video,
        body.route-viewer.route-viewer-article .viewer-community-articles__media-video {
          width: 100%;
          max-width: 100%;
        }

        body.route-viewer.route-viewer-article .page.route-viewer .viewer-frame__canvas {
          height: clamp(320px, calc(100svh - 236px), 620px);
          height: clamp(320px, calc(100dvh - 236px), 620px);
          min-height: clamp(320px, calc(100svh - 236px), 620px);
          min-height: clamp(320px, calc(100dvh - 236px), 620px);
          max-height: clamp(320px, calc(100svh - 236px), 620px);
          max-height: clamp(320px, calc(100dvh - 236px), 620px);

        }

        body.route-viewer.route-viewer-article .page.route-viewer .viewer-frame__bar {
          position: relative;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          gap: 12px;
          padding: 13px 14px;
          border-bottom: 0;
          background: linear-gradient(180deg, rgba(5, 9, 20, 0.38), rgba(5, 9, 20, 0.14));
          backdrop-filter: blur(18px) saturate(1.08);
          pointer-events: auto;
        }

        body.route-viewer.route-viewer-article .page.route-viewer #viewer-granularity:not([hidden]) {
          display: flex !important;
          flex: 0 1 auto;
          width: auto;
          min-width: 0;
          margin-left: 0;
          padding: 0;
          border: 0;
          background: transparent;
          box-shadow: none;
          pointer-events: auto;
        }

        body.route-viewer.route-viewer-article .page.route-viewer #viewer-granularity .viewer-granularity__label {
          font-size: 0.66rem;
        }

        .viewer-community-articles__comment-form {
          grid-template-columns: 1fr;
        }

        .viewer-community-articles__comment-submit {
          width: 100%;
        }
      }

      @media (max-width: 480px) {
        .hf-article-button--primary {
          grid-column: 1 / -1;
        }

        .hf-article-editor__preview-title {
          font-size: 0.88rem;
        }

        .hf-article-editor__preview-node-name {
          font-size: clamp(1rem, 5.5vw, 1.18rem);
        }

        .hf-article-editor__preview-mention {
          min-height: 30px;
          min-width: 98px;
          padding: 0 12px;
          font-size: 0.62rem;
        }
      }

      .model-search {
        position: absolute;
        top: calc(100% - 1px);
        right: auto;
        left: 0;
        z-index: 240;
        display: grid;
        gap: 6px;
        width: var(--model-search-width, 100%);
        min-width: 100%;
        margin-top: 0;
        padding: 8px;
        max-height: var(--model-search-max-height, min(52vh, 520px));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scroll-padding-block: 16px;
        scrollbar-color: rgba(120, 152, 190, 0.38) rgba(12, 22, 36, 0.2);
        scrollbar-width: thin;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 0 0 22px 22px;
        background:
          radial-gradient(circle at 16% 0%, rgba(156, 255, 99, 0.13), transparent 36%),
          linear-gradient(180deg, rgba(12, 22, 36, 0.74), rgba(5, 11, 21, 0.7));
        backdrop-filter: blur(18px) saturate(138%);
        -webkit-backdrop-filter: blur(18px) saturate(138%);
        box-shadow:
          0 24px 60px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          inset 0 -1px 0 rgba(136, 215, 255, 0.05);
      }

      .model-search-hit-shield {
        position: fixed;
        inset: 0;
        z-index: 239;
        border: 0;
        margin: 0;
        padding: 0;
        background: transparent;
        cursor: default;
      }

      .model-search-hit-shield[hidden] {
        display: none;
      }

      .model-search::-webkit-scrollbar {
        width: 8px;
      }

      .model-search::-webkit-scrollbar-track {
        background:
          linear-gradient(180deg, rgba(17, 31, 49, 0.28), rgba(5, 11, 21, 0.16));
        backdrop-filter: blur(18px) saturate(132%);
        -webkit-backdrop-filter: blur(18px) saturate(132%);
        border-radius: 999px;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.05),
          inset 0 0 0 1px rgba(136, 165, 205, 0.06);
      }

      .model-search::-webkit-scrollbar-thumb {
        border: 2px solid rgba(7, 14, 26, 0.72);
        border-radius: 999px;
        background:
          linear-gradient(180deg, rgba(130, 160, 196, 0.48), rgba(82, 107, 145, 0.34));
      }

      .model-search::-webkit-scrollbar-thumb:hover {
        background:
          linear-gradient(180deg, rgba(146, 176, 210, 0.58), rgba(95, 124, 164, 0.42));
      }

      .model-search[hidden] {
        display: none;
      }

      .model-search__status,
      .model-search__item {
        border: 0;
        border-radius: 16px;
        background: transparent;
        color: var(--text);
        font: inherit;
      }

      .model-search__status {
        padding: 12px 14px;
        color: var(--muted);
        font-size: 0.9rem;
      }

      .model-search__item {
        display: grid;
        gap: 10px;
        align-items: center;
        justify-items: start;
        width: 100%;
        min-height: 52px;
        padding: 13px 14px;
        scroll-margin-block: 16px;
        text-align: left;
        touch-action: manipulation;
        cursor: pointer;
      }

      .model-search__item--new {
        animation: model-search-result-reveal 340ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
        animation-delay: var(--model-search-item-delay, 0ms);
      }

      @keyframes model-search-result-reveal {
        from {
          opacity: 0;
          transform: translateY(8px) scale(0.985);
        }
        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      .model-search__item.is-active {
        background:
          linear-gradient(90deg, rgba(156, 255, 99, 0.12), rgba(136, 215, 255, 0.08)),
          rgba(255, 255, 255, 0.04);
      }

      .model-search__repo {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 9px;
        min-width: 0;
        width: 100%;
        overflow: hidden;
        font-weight: 760;
        letter-spacing: -0.02em;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .model-search__body {
        display: grid;
        justify-items: start;
        width: 100%;
        min-width: 0;
        text-align: left;
      }

      .model-search__repo-text {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .model-search__repo-prefix {
        color: #8d9cb6;
      }

      .model-search__viewable-dot {
        flex: 0 0 auto;
        width: 23px;
        min-width: 23px;
        height: 23px;
        min-height: 23px;
        aspect-ratio: 1 / 1;
        border-radius: 999px;
        background:
          radial-gradient(circle, var(--lime) 0 4.5px, rgba(156, 255, 99, 0.14) 5px 11.5px, transparent 12px);
      }

      .model-search__meta {
        margin-top: 4px;
        color: rgba(197, 208, 227, 0.7);
        font-size: 0.82rem;
      }

      .input-shell input[aria-expanded="true"] {
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        border-color: rgba(136, 215, 255, 0.18);
      }

      @media (max-width: 720px) {
        .model-search {
          position: absolute;
          top: calc(100% - 1px);
          right: auto;
          left: 0;
          width: 100%;
          min-width: 100%;
          margin-top: 0;
          max-height: var(--model-search-max-height, min(42vh, 360px));
          border-radius: 0 0 22px 22px;
        }

        .model-search--sheet {
          position: fixed;
          right: 16px;
          bottom: calc(var(--model-search-keyboard-offset, 0px) + env(safe-area-inset-bottom) + 12px);
          left: 16px;
          z-index: 2147482000;
          max-height: var(--model-search-sheet-max-height, min(44vh, 360px));
          margin-top: 0;
          border-radius: 24px;
          background:
            radial-gradient(circle at 14% 0%, rgba(156, 255, 99, 0.17), transparent 38%),
            rgba(5, 11, 21, 0.72);
          box-shadow:
            0 26px 80px rgba(0, 0, 0, 0.48),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        .model-search-hit-shield--sheet {
          z-index: 2147481999;
        }
      }

      .cta__sub {
        position: relative;
        margin-top: 14px;
        color: var(--muted);
        font-size: 0.92rem;
      }

      @media (max-width: 860px) {
        .cta__sub {
          display: none;
        }
      }

      .proof {
        position: relative;
        z-index: 1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
        margin-top: 22px;
      }

      .proof__item {
        padding: 16px 18px;
        border-radius: 20px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--stroke);
      }

      .proof__value {
        display: block;
        font-family: "Inter", sans-serif;
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: 5px;
      }

      .proof__text {
        color: var(--muted);
        font-size: 0.88rem;
        line-height: 1.45;
      }

      .proof__text strong {
        color: var(--text);
        font-weight: 700;
      }

      .proof__quickstart {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: fit-content;
        margin-top: 12px;
        padding: 9px 13px 9px 11px;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 999px;
        background:
          radial-gradient(circle at 16% 12%, rgba(129, 248, 185, 0.22), transparent 34%),
          linear-gradient(135deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.018)),
          rgba(7, 15, 27, 0.78);
        color: rgba(235, 248, 255, 0.94);
        font-size: 0.82rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        text-decoration: none;
        box-shadow:
          0 14px 34px rgba(7, 14, 28, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        transition:
          border-color 180ms ease,
          box-shadow 180ms ease,
          transform 180ms ease;
      }

      .proof__quickstart:hover,
      .proof__quickstart:focus-visible {
        border-color: rgba(129, 248, 185, 0.38);
        color: #f3fff9;
        outline: none;
        box-shadow:
          0 18px 40px rgba(16, 185, 129, 0.14),
          0 0 0 1px rgba(129, 248, 185, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.12);
        transform: translateY(-1px);
      }

      .proof__quickstart svg {
        width: 17px;
        height: 17px;
        flex: 0 0 auto;
      }

      .proof__item .proof__extension-panel {
        display: none;
      }

      .proof-extension {
        display: grid;
        gap: 12px;
      }

      .proof-extension__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        width: fit-content;
        margin-top: 2px;
        padding: 9px 13px 9px 11px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background:
          linear-gradient(135deg, rgba(156, 255, 99, 0.24), rgba(136, 215, 255, 0.18)),
          rgba(8, 15, 28, 0.82);
        box-shadow:
          0 14px 34px rgba(7, 14, 28, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        color: var(--text);
        font-family: "Inter", sans-serif;
        font-size: 0.84rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        line-height: 1;
        text-decoration: none;
        transition:
          border-color 0.2s ease,
          background 0.2s ease,
          transform 0.2s ease;
      }

      .proof-extension__button:hover,
      .proof-extension__button:focus-visible {
        border-color: rgba(156, 255, 99, 0.3);
        background:
          linear-gradient(135deg, rgba(156, 255, 99, 0.3), rgba(136, 215, 255, 0.22)),
          rgba(9, 18, 32, 0.9);
        outline: none;
        transform: translateY(-1px);
      }

      .proof-extension__chrome {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
        color: #fff;
      }

      .proof__embed-panel {
        display: grid;
        gap: 12px;
      }

      .can-install-chrome-extension .proof__extension-panel {
        display: grid;
      }

      .can-install-chrome-extension .proof__embed-panel {
        display: none;
      }

      .proof-embed__button {
        width: fit-content;
        min-height: 40px;
        margin-top: 2px;
        padding: 8px 14px 8px 9px;
        font-size: 0.82rem;
      }

      .proof-embed__button .community-showcase__embed-cta-icon-wrap {
        width: 27px;
        height: 27px;
      }

      .proof-embed__button .community-showcase__embed-cta-icon {
        width: 16px;
        height: 16px;
      }

      .url-magic-demo {
        --url-demo-current-host-width: 105px;
        --url-demo-next-host-width: 92px;
        position: relative;
        z-index: 0;
        isolation: isolate;
        display: flex;
        align-items: center;
        gap: 10px;
        width: min(100%, 390px);
        height: 38px;
        margin-top: 13px;
        padding: 0 13px;
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background:
          radial-gradient(circle at 12% 30%, rgba(136, 215, 255, 0.14), transparent 34%),
          rgba(5, 11, 21, 0.68);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.07),
          0 12px 30px rgba(0, 0, 0, 0.18);
      }

      .url-magic-demo__icon {
        display: inline-flex;
        flex: 0 0 auto;
        width: 16px;
        height: 15px;
        color: rgba(229, 242, 255, 0.84);
      }

      .url-magic-demo__text {
        position: relative;
        isolation: isolate;
        flex: 1 1 auto;
        min-width: 0;
        height: 1.35em;
        overflow: hidden;
        color: rgba(245, 248, 255, 0.9);
        font-size: 0.88rem;
        font-weight: 650;
        letter-spacing: -0.02em;
        line-height: 1.35;
        white-space: nowrap;
      }

      .url-magic-demo__current-host,
      .url-magic-demo__typed-host,
      .url-magic-demo__moving-path,
      .url-magic-demo__caret {
        position: absolute;
        top: 0;
        left: 0;
      }

      .url-magic-demo__current-host,
      .url-magic-demo__typed-host,
      .url-magic-demo__moving-path {
        display: inline-flex;
        align-items: center;
      }

      .url-magic-demo__current-host {
        opacity: 1;
      }

      .url-magic-demo__typed-host {
        color: #f7fbff;
        clip-path: inset(0 100% 0 0);
        opacity: 0;
      }

      .url-magic-demo__moving-path {
        color: rgba(197, 208, 227, 0.72);
        font-weight: 560;
        transform: translateX(var(--url-demo-current-host-width));
      }

      .url-magic-demo__host {
        position: relative;
        display: inline-flex;
        align-items: center;
      }

      .url-magic-demo__host-label {
        position: relative;
        z-index: 1;
      }

      .url-magic-demo__host-selection {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 0;
        height: 1.35em;
        border-radius: 6px;
        background: rgba(112, 188, 255, 0.32);
        box-shadow: 0 0 0 1px rgba(151, 213, 255, 0.18);
        opacity: 0;
        transform: scaleX(0);
        transform-origin: left center;
      }

      .url-magic-demo__caret {
        z-index: 3;
        width: 2px;
        height: 1.35em;
        border-radius: 999px;
        background: #9fe8ff;
        opacity: 0;
        transform: translateX(0);
      }

      @media (prefers-reduced-motion: reduce) {
        .url-magic-demo__current-host,
        .url-magic-demo__host-selection,
        .url-magic-demo__caret {
          display: none;
          animation: none;
        }

        .url-magic-demo__typed-host {
          clip-path: none;
          opacity: 1;
          animation: none;
        }

        .url-magic-demo__moving-path {
          animation: none;
          transform: translateX(var(--url-demo-next-host-width));
        }
      }

      .gallery-section {
        margin-top: 48px;
      }

      .gallery-section[data-page="landing"],
      .gallery-section[data-page="owner"],
      .blogs-with-graphs[data-page="landing"],
      .community-showcase[data-page="landing"],
      .products-section[data-page="landing"] {
        grid-column: 1 / -1;
      }

      .gallery-section__head {
        display: grid;
        gap: 10px;
        margin-bottom: 20px;
      }

      .gallery-section__eyebrow {
        color: var(--muted);
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .gallery-section h2 {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: clamp(2rem, 3vw, 3rem);
        line-height: 1;
        letter-spacing: -0.04em;
      }

      .gallery-section p {
        margin: 0;
        max-width: 68ch;
        color: var(--muted-strong);
        line-height: 1.65;
      }

      .gallery {
        position: relative;
        column-count: 4;
        column-gap: 16px;
      }

      .gallery--packed {
        column-count: unset;
        column-gap: 0;
        min-height: 1px;
      }

      .gallery-card {
        --gallery-card-preview-width: 100%;
        display: inline-flex;
        width: 100%;
        flex-direction: column;
        gap: 14px;
        margin: 0 0 16px;
        padding: 14px;
        border: 1px solid var(--stroke);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
        cursor: pointer;
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
        break-inside: avoid;
      }

      .gallery--packed .gallery-card {
        position: absolute;
        margin: 0;
        break-inside: auto;
      }

      .gallery-card:hover,
      .gallery-card:focus-visible {
        transform: translateY(-4px);
        border-color: rgba(156, 255, 99, 0.3);
        box-shadow:
          0 24px 54px rgba(0, 0, 0, 0.32),
          0 0 0 1px rgba(156, 255, 99, 0.12);
        outline: none;
      }

      .gallery-card.is-selected {
        outline: none;
      }

      .gallery-card__art {
        display: flex;
        position: relative;
        align-items: center;
        justify-content: center;
        padding: 20px 18px 16px;
        border-radius: 18px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: var(--preview-surface);
        overflow: hidden;
      }

      .gallery-card__art--pending {
        min-height: 220px;
        position: relative;
      }

      .gallery-card__art--pending::after {
        content: "Rendering preview";
        color: var(--muted);
        font-size: 0.74rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .gallery-card__image {
        width: var(--gallery-card-preview-width, 100%);
        max-width: none;
        height: auto;
        display: block;
        filter: saturate(0.98) contrast(1.04) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.24));
      }

      .gallery-card__image--source {
        display: none;
      }

      .gallery-card__preview-svg {
        width: var(--gallery-card-preview-width, 100%);
        max-width: none;
        display: block;
        filter: saturate(0.98) contrast(1.04) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.24));
      }

      .gallery-card__preview-svg > svg {
        width: 100%;
        height: auto;
        display: block;
      }

      .gallery-card__art--pending .gallery-card__image {
        display: none;
      }

      .gallery-card__meta {
        display: grid;
        gap: 7px;
        padding: 0 4px 4px;
      }

      .gallery-card__label {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        color: rgba(245, 248, 255, 0.96);
        font-family: "Inter", sans-serif;
        font-size: 1.08rem;
        font-weight: 700;
      }

      .gallery-card__label-text {
        display: inline;
        min-width: 0;
      }

      .gallery-card__label-prefix {
        color: #8d9cb6;
      }

      .gallery-card__label::before {
        content: "";
        width: 8px;
        min-width: 8px;
        height: 8px;
        min-height: 8px;
        flex: 0 0 8px;
        aspect-ratio: 1 / 1;
        border-radius: 999px;
        background: var(--lime);
      }

      .gallery-card__sub {
        color: var(--muted-strong);
        font-size: 0.88rem;
        line-height: 1.45;
      }

      .gallery-card__action {
        color: var(--sky);
        font-size: 0.8rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .proof__quickstart {
        display: none;
        width: fit-content;
        align-items: center;
        gap: 9px;
        margin-top: 14px;
        padding: 9px 13px 9px 11px;
        border: 1px solid rgba(129, 248, 185, 0.3);
        border-radius: 999px;
        background:
          radial-gradient(circle at 18% 0%, rgba(129, 248, 185, 0.2), transparent 30%),
          linear-gradient(135deg, rgba(7, 21, 32, 0.9), rgba(11, 45, 52, 0.74));
        color: #eafff7;
        font-size: 0.8rem;
        font-weight: 780;
        letter-spacing: -0.01em;
        text-decoration: none;
        box-shadow:
          0 12px 28px rgba(16, 185, 129, 0.11),
          inset 0 1px 0 rgba(255, 255, 255, 0.14);
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      }

      .proof__quickstart[aria-hidden="false"] {
        display: flex;
      }

      .proof__quickstart:hover,
      .proof__quickstart:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(129, 248, 185, 0.52);
        box-shadow:
          0 16px 34px rgba(16, 185, 129, 0.17),
          0 0 0 1px rgba(129, 248, 185, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.18);
        outline: none;
      }

      .proof__quickstart svg {
        width: 16px;
        height: 16px;
        flex: 0 0 16px;
      }

      .gallery-card--wide .gallery-card__art {
        padding-inline: 22px;
      }

      .gallery-card--full {
        gap: 16px;
      }

      .gallery-card--family-wide .gallery-card__art {
        padding: 18px;
      }

      .gallery-card__family-strip {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        width: 100%;
      }

      .gallery-card__family-slot {
        display: grid;
        gap: 8px;
        align-items: end;
        min-width: 0;
      }

      .gallery-card__family-frame {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 188px;
        padding: 10px 8px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.06);
        background: rgba(255, 255, 255, 0.018);
        overflow: hidden;
      }

      .gallery-card__family-image {
        display: block;
        width: 100%;
        height: 168px;
        margin: 0 auto;
        object-fit: contain;
        object-position: center center;
        filter: saturate(0.98) contrast(1.04) drop-shadow(0 12px 22px rgba(0, 0, 0, 0.22));
      }

      .gallery-card__family-size {
        color: #8d9cb6;
        font-size: 0.76rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-align: center;
        text-transform: uppercase;
      }

      .gallery-preview-worker {
        position: fixed;
        top: 0;
        left: -10000px;
        width: 1800px;
        height: 1400px;
        opacity: 0;
        pointer-events: none;
        visibility: hidden;
        border: 0;
      }

      .blogs-with-graphs {
        display: grid;
        gap: 22px;
        margin-top: 56px;
      }

      .blogs-with-graphs__head {
        display: grid;
        grid-template-columns: minmax(0, max-content) auto;
        align-items: start;
        justify-content: space-between;
        column-gap: 24px;
        gap: 16px;
      }

      .blogs-with-graphs__intro {
        display: grid;
        gap: 10px;
        max-width: 760px;
      }

      .blogs-with-graphs__eyebrow {
        color: var(--muted);
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .blogs-with-graphs h2 {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: clamp(2rem, 3vw, 3rem);
        line-height: 1;
        letter-spacing: -0.04em;
      }

      .blogs-with-graphs__lede {
        margin: 0;
        max-width: 62ch;
        color: var(--muted-strong);
        font-size: 0.98rem;
        line-height: 1.65;
      }

      .blogs-with-graphs__write {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: inline-flex;
        justify-self: end;
        align-self: end;
        width: fit-content;
        min-height: 46px;
        align-items: center;
        justify-content: center;
        gap: 11px;
        padding: 0 19px 0 12px;
        border: 1px solid rgba(129, 248, 185, 0.42);
        border-radius: 999px;
        /* Static base; the drifting gradient lives on ::before (see the
           community-showcase CTA note about Android raster races). */
        background: rgba(7, 22, 32, 0.97);
        color: #eafff7;
        font-size: 0.94rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        text-decoration: none;
        box-shadow:
          0 16px 38px rgba(16, 185, 129, 0.15),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
        transition:
          border-color 180ms ease,
          box-shadow 180ms ease,
          transform 180ms ease;
      }

      .blogs-with-graphs__write::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background:
          radial-gradient(circle at 18% 10%, rgba(129, 248, 185, 0.25), transparent 25%),
          linear-gradient(115deg, rgba(5, 18, 28, 0.98), rgba(17, 91, 75, 0.75), rgba(11, 30, 46, 0.96), rgba(136, 215, 255, 0.16));
        background-size: 230% 230%;
        animation: communityCtaGradientDrift 8.4s ease-in-out infinite;
        pointer-events: none;
      }

      .blogs-with-graphs__write > span,
      .blogs-with-graphs__write svg {
        position: relative;
        z-index: 1;
        transform: translateZ(0);
        -webkit-text-fill-color: currentColor;
      }

      .blogs-with-graphs__write:hover,
      .blogs-with-graphs__write:focus-visible {
        border-color: rgba(129, 248, 185, 0.64);
        box-shadow:
          0 20px 46px rgba(16, 185, 129, 0.22),
          0 0 0 1px rgba(129, 248, 185, 0.09),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
      }

      .blogs-with-graphs__write:focus-visible {
        outline: 2px solid rgba(129, 248, 185, 0.42);
        outline-offset: 3px;
      }

      .blogs-with-graphs__write-icon {
        width: 18px;
        height: 18px;
        flex: 0 0 auto;
      }

      .blogs-with-graphs__carousel {
        position: relative;
        min-width: 0;
        margin-top: -8px;
        padding-top: 8px;
      }

      .blogs-with-graphs__rail {
        display: flex;
        align-items: stretch;
        gap: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        overflow-anchor: none;
        padding: 10px 2px 82px;
        scroll-behavior: auto;
        scroll-padding-inline: 2px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }

      .blogs-with-graphs__rail.is-drag-scrollable,
      .community-showcase__rail.is-drag-scrollable {
        cursor: grab;
      }

      .blogs-with-graphs__rail.is-drag-scrolling,
      .community-showcase__rail.is-drag-scrolling {
        cursor: grabbing;
        scroll-snap-type: none;
        user-select: none;
      }

      .blogs-with-graphs__rail.is-drag-scrolling *,
      .community-showcase__rail.is-drag-scrolling * {
        user-select: none;
      }

      .blogs-with-graphs__rail::-webkit-scrollbar {
        display: none;
      }

      .blogs-with-graphs__card {
        --blogs-card-edge-rgb: 129, 248, 185;
        --blogs-card-corner-rgb: 136, 215, 255;
        position: relative;
        isolation: isolate;
        overflow: visible;
        display: grid;
        flex: 0 0 clamp(364px, 31vw, 438px);
        grid-template-rows: auto 1fr;
        min-height: 432px;
        border: 1px solid rgba(151, 221, 238, 0.26);
        border-radius: 28px;
        background:
          radial-gradient(circle at 12% 0%, rgba(var(--blogs-card-edge-rgb), 0.12), transparent 32%),
          radial-gradient(circle at 94% 2%, rgba(var(--blogs-card-corner-rgb), 0.1), transparent 34%),
          radial-gradient(ellipse 52% 5% at 50% 101%, rgba(var(--blogs-card-edge-rgb), 0.105), rgba(var(--blogs-card-edge-rgb), 0.036) 48%, transparent 88%),
          linear-gradient(151deg, rgba(12, 25, 40, 0.72), rgba(7, 19, 33, 0.86) 58%, rgba(3, 12, 22, 0.92));
        backdrop-filter: blur(20px) saturate(1.14);
        -webkit-backdrop-filter: blur(20px) saturate(1.14);
        color: rgba(245, 248, 255, 0.96);
        text-decoration: none;
        box-shadow:
          0 28px 70px rgba(0, 0, 0, 0.34),
          0 30px 74px -52px rgba(var(--blogs-card-edge-rgb), 0.28),
          0 48px 108px -64px rgba(var(--blogs-card-corner-rgb), 0.24),
          0 0 0 1px rgba(255, 255, 255, 0.018),
          inset 0 1px 0 rgba(255, 255, 255, 0.18),
          inset 0 -1px 0 rgba(var(--blogs-card-edge-rgb), 0.115),
          inset 0 -26px 52px -50px rgba(var(--blogs-card-edge-rgb), 0.52);
        scroll-snap-align: start;
        transition:
          border-color 190ms ease,
          box-shadow 190ms ease,
          transform 190ms ease;
      }

      .blogs-with-graphs__card::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background:
          radial-gradient(ellipse 50% 6% at 50% 101%, rgba(var(--blogs-card-edge-rgb), 0.21), rgba(var(--blogs-card-edge-rgb), 0.082) 45%, transparent 86%),
          linear-gradient(0deg, rgba(var(--blogs-card-edge-rgb), 0.052), rgba(var(--blogs-card-edge-rgb), 0.024) 10%, transparent 25%),
          radial-gradient(circle at 18% 2%, rgba(var(--blogs-card-edge-rgb), 0.12), transparent 42%),
          linear-gradient(315deg, rgba(var(--blogs-card-corner-rgb), 0.095), transparent 38%);
        opacity: 0.68;
        transition: opacity 190ms ease;
      }

      .blogs-with-graphs__card::after {
        content: "";
        position: absolute;
        left: 58px;
        right: 58px;
        bottom: 0;
        z-index: 3;
        height: 1px;
        border-radius: 999px;
        background: linear-gradient(
          90deg,
          transparent 0%,
          rgba(var(--blogs-card-edge-rgb), 0.02) 6%,
          rgba(var(--blogs-card-edge-rgb), 0.15) 23%,
          rgba(var(--blogs-card-edge-rgb), 0.68) 50%,
          rgba(var(--blogs-card-edge-rgb), 0.15) 77%,
          rgba(var(--blogs-card-edge-rgb), 0.02) 94%,
          transparent 100%
        );
        box-shadow:
          0 -3px 9px rgba(var(--blogs-card-edge-rgb), 0.13),
          0 0 5px rgba(var(--blogs-card-edge-rgb), 0.35),
          0 5px 15px rgba(var(--blogs-card-edge-rgb), 0.18),
          0 17px 42px rgba(var(--blogs-card-edge-rgb), 0.12);
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 8%, rgba(0, 0, 0, 0.58) 27%, #000 43%, #000 57%, rgba(0, 0, 0, 0.58) 73%, rgba(0, 0, 0, 0.12) 92%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.12) 8%, rgba(0, 0, 0, 0.58) 27%, #000 43%, #000 57%, rgba(0, 0, 0, 0.58) 73%, rgba(0, 0, 0, 0.12) 92%, transparent 100%);
        pointer-events: none;
      }

      .blogs-with-graphs__card[data-blogs-with-graphs-card="deepseek-mhc"] {
        --blogs-card-edge-rgb: 129, 248, 185;
        --blogs-card-corner-rgb: 136, 215, 255;
      }

      .blogs-with-graphs__card[data-blogs-with-graphs-card="liquidai-lfm25-audio"] {
        --blogs-card-edge-rgb: 112, 255, 170;
        --blogs-card-corner-rgb: 96, 190, 255;
      }

      .blogs-with-graphs__card[data-blogs-with-graphs-card="borealis"] {
        --blogs-card-edge-rgb: 139, 246, 96;
        --blogs-card-corner-rgb: 34, 211, 238;
      }

      .blogs-with-graphs__card[data-blogs-with-graphs-card="gemma-4-family"] {
        --blogs-card-edge-rgb: 136, 215, 255;
        --blogs-card-corner-rgb: 167, 139, 250;
      }

      .blogs-with-graphs__card[data-blogs-with-graphs-card="alpamayo-2-super"] {
        --blogs-card-edge-rgb: 157, 140, 240;
        --blogs-card-corner-rgb: 74, 157, 240;
      }

      .blogs-with-graphs__card:hover,
      .blogs-with-graphs__card:focus-visible {
        border-color: rgba(var(--blogs-card-edge-rgb), 0.46);
        box-shadow:
          0 34px 82px rgba(0, 0, 0, 0.43),
          0 36px 86px -54px rgba(var(--blogs-card-edge-rgb), 0.32),
          0 56px 116px -64px rgba(var(--blogs-card-corner-rgb), 0.3),
          0 0 0 1px rgba(var(--blogs-card-edge-rgb), 0.08),
          0 0 28px rgba(var(--blogs-card-edge-rgb), 0.048),
          inset 0 1px 0 rgba(255, 255, 255, 0.22),
          inset 0 -26px 50px -72px rgba(var(--blogs-card-edge-rgb), 0.3);
        outline: none;
        transform: translateY(-3px);
      }

      .blogs-with-graphs__card:hover::before,
      .blogs-with-graphs__card:focus-visible::before {
        opacity: 0.96;
      }

      .blogs-with-graphs__image-wrap {
        --blogs-figure-height: 238px;
        position: relative;
        z-index: 2;
        display: grid;
        min-height: 0;
        height: var(--blogs-figure-height);
        align-items: center;
        justify-content: center;
        margin: 16px 16px 0;
        border: 0;
        border-radius: 22px;
        background:
          radial-gradient(circle at 18% 12%, rgba(var(--blogs-card-edge-rgb), 0.1), transparent 34%),
          radial-gradient(circle at 86% 18%, rgba(var(--blogs-card-corner-rgb), 0.075), transparent 38%),
          linear-gradient(135deg, rgba(2, 10, 20, 0.78), rgba(6, 17, 29, 0.56));
        overflow: hidden;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          inset 0 -34px 72px rgba(0, 0, 0, 0.2),
          0 18px 42px rgba(0, 0, 0, 0.16);
      }

      .blogs-with-graphs__image-wrap--compact {
        min-height: 0;
        height: var(--blogs-figure-height);
      }

      .blogs-with-graphs__image-wrap::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.08),
          inset 0 0 0 1px rgba(255, 255, 255, 0.012),
          inset 0 -26px 58px rgba(0, 0, 0, 0.18);
        pointer-events: none;
      }

      .blogs-with-graphs__image {
        display: block;
        width: 100%;
        height: 238px;
        object-fit: cover;
        object-position: center center;
        filter: saturate(1.04) contrast(1.06);
      }

      .blogs-with-graphs__image--deepseek {
        height: 238px;
      }

      .blogs-with-graphs__live {
        position: relative;
        z-index: 1;
        display: grid;
        width: 100%;
        min-height: 238px;
        place-items: center;
        padding: 0;
        pointer-events: none;
      }

      .blogs-with-graphs__image-wrap--compact .blogs-with-graphs__live {
        min-height: 238px;
        padding: 0;
      }

      .blogs-with-graphs__live--deepseek {
        min-height: 238px;
      }

      .blogs-with-graphs__live--gemma {
        min-height: 238px;
      }

      .blogs-with-graphs__live--liquidai {
        width: 100%;
        min-width: 100%;
        height: var(--blogs-figure-height);
        min-height: 238px;
        justify-self: stretch;
        align-self: stretch;
        align-items: stretch;
      }

      .blogs-with-graphs__live--alpamayo {
        width: 100%;
        min-width: 100%;
        min-height: 238px;
      }

      .blogs-with-graphs__image--alpamayo {
        display: block;
        width: 100%;
        max-width: none;
        height: 100%;
        object-fit: contain;
        filter: saturate(1.08) contrast(1.05);
      }

      .blogs-lfm-preview__mini-labels {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 8px;
        margin-top: 7px;
        color: rgba(224, 241, 255, 0.45);
        font: 700 8.5px/1 "IBM Plex Mono", "SFMono-Regular", monospace;
        text-transform: uppercase;
        letter-spacing: 0.08em;
      }

      .blogs-lfm-preview__mini-labels span {
        padding-left: 2px;
      }

      .blogs-with-graphs__card[data-blogs-with-graphs-card="liquidai-lfm25-audio"] .blogs-with-graphs__image-wrap {
        align-items: stretch;
        justify-content: stretch;
        justify-items: stretch;
      }

      .blogs-with-graphs__figure {
        position: relative;
        display: grid;
        width: 100%;
        min-height: 238px;
        height: 238px;
        place-items: center;
        overflow: hidden;
        color: #edf8ff;
      }

      .blogs-with-graphs__figure--liquidai {
        width: 100%;
        min-width: 100%;
        height: var(--blogs-figure-height);
        align-items: stretch;
        justify-items: stretch;
        background: transparent;
      }

      .blogs-with-graphs__live--liquidai > .blogs-lfm-preview {
        display: none !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-interleave-figure {
        width: 100% !important;
        max-width: none !important;
        min-height: var(--blogs-figure-height) !important;
        height: var(--blogs-figure-height) !important;
        margin: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background:
          radial-gradient(circle at 12% 8%, rgba(156, 255, 99, 0.18), transparent 34%),
          radial-gradient(circle at 86% 18%, rgba(136, 215, 255, 0.22), transparent 36%),
          linear-gradient(145deg, rgba(5, 14, 28, 0.3), rgba(3, 8, 16, 0.12)) !important;
        box-shadow: none !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-int-head {
        display: none !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-int-stage {
        height: var(--blogs-figure-height) !important;
        padding: 9px !important;
        gap: 6px !important;
        align-content: stretch !important;
        grid-template-rows: minmax(0, 1.34fr) minmax(0, 0.92fr) !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-panel {
        min-height: 0 !important;
        border-radius: 16px !important;
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.065), rgba(255, 255, 255, 0.022)) !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-zoom-panel {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        padding: 5px 9px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-overview-panel {
        padding: 6px 9px 9px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-panel-top,
      .blogs-with-graphs__figure--liquidai .lfm-overview-top {
        display: flex !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 8px !important;
        margin-bottom: 6px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-panel-label,
      .blogs-with-graphs__figure--liquidai .lfm-overview-title {
        font-size: 6.9px !important;
        line-height: 1 !important;
        letter-spacing: 0.12em !important;
        white-space: nowrap !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-panel-copy {
        display: none !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-progress-readout {
        font-size: 6.7px !important;
        line-height: 1 !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-zoom-viewport {
        height: 72px !important;
        border-radius: 13px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-zoom-viewport::before,
      .blogs-with-graphs__figure--liquidai .lfm-zoom-viewport::after {
        width: 22px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-zoom-track {
        --slot-gap: 3px !important;
        top: 8px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-slot {
        grid-template-rows: 8px 47px !important;
        gap: 4px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-slot-num {
        font-size: 5.8px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-token-box {
        border-radius: 8px !important;
        font-size: 11.5px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-slot--text .lfm-token-box,
      .blogs-with-graphs__figure--liquidai .lfm-slot--audio .lfm-token-box {
        padding: 5px 2px !important;
        row-gap: 1px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-token-piece {
        font-size: 4.5px !important;
        line-height: 0.9 !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-token-wave {
        height: 12px !important;
        gap: 1px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-token-wave i {
        width: 1.25px !important;
        height: calc(var(--h, 10px) * 0.56) !important;
        max-height: 11px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-cycle-brace {
        gap: 3px !important;
        margin-top: 3px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-brace-part {
        min-height: 13px !important;
        padding: 2px 5px !important;
        border-radius: 999px !important;
        font-size: 5.8px !important;
        line-height: 1 !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-mini-track-wrap {
        gap: 4px !important;
        padding: 6px !important;
        border-radius: 12px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-mini-row {
        gap: 4px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-mini-track {
        gap: 1.5px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-mini-token {
        min-height: 10px !important;
        border-radius: 4px !important;
      }

      .blogs-with-graphs__figure--liquidai .lfm-mini-cycle-labels {
        margin-top: 4px !important;
        gap: 5px !important;
        font-size: 4.7px !important;
        line-height: 1 !important;
      }

      .blogs-with-graphs__figure--loading {
        border: 0;
        border-radius: 0;
        background:
          radial-gradient(circle at 14% 10%, rgba(34, 211, 238, 0.18), transparent 34%),
          radial-gradient(circle at 88% 16%, rgba(74, 222, 128, 0.13), transparent 32%),
          linear-gradient(135deg, rgba(4, 10, 20, 0.96), rgba(9, 16, 28, 0.96));
        color: rgba(197, 208, 227, 0.78);
        font: 820 0.78rem/1.3 Inter, ui-sans-serif, system-ui, sans-serif;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .blogs-with-graphs__figure .dsv4-res {
        width: 112%;
        min-width: 0;
        gap: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        overflow: hidden;
        background: transparent;
        box-shadow: none;
      }

      .blogs-with-graphs__live--deepseek .blogs-with-graphs__figure .dsv4-res {
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
      }

      .blogs-with-graphs__live--deepseek .blogs-with-graphs__figure .dsv4-res::before,
      .blogs-with-graphs__live--deepseek .blogs-with-graphs__figure .dsv4-res::after {
        display: none !important;
      }

      .blogs-with-graphs__figure .dsv4-res .dsv4-figure-title {
        padding: 0 2px;
        font-size: 9px;
        line-height: 1.15;
      }

      .blogs-with-graphs__figure .dsv4-res .dsv4-scroll {
        display: grid;
        width: 100%;
        height: 238px;
        place-items: center;
        overflow: hidden;
      }

      .blogs-with-graphs__figure .dsv4-res svg {
        width: 108%;
        max-width: none;
        height: 226px;
      }

      .blogs-with-graphs__live--deepseek .blogs-with-graphs__figure {
        box-sizing: border-box;
        padding-inline: clamp(12px, 4vw, 18px);
      }

      .blogs-with-graphs__live--deepseek .blogs-with-graphs__figure .dsv4-res {
        width: 100% !important;
      }

      .blogs-with-graphs__live--deepseek .blogs-with-graphs__figure .dsv4-res svg {
        width: 100% !important;
      }

      .blogs-with-graphs__figure--gemma {
        width: 100%;
        min-height: 238px;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-figure {
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
        overflow: hidden;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg {
        width: 118%;
        max-width: none;
        height: 250px;
        margin: -6px -14.5% -6px -3.5%;
        transform: translateY(18px);
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-meta,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-caption,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scene--desktop,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__title:not(.attention-figure__title--mobile),
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__subtitle:not(.attention-figure__subtitle--mobile),
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scale--desktop {
        display: none;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scene--mobile {
        display: block;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__title--mobile,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__subtitle--mobile,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scale--mobile {
        display: inline;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__title--mobile {
        font-size: 27px;
        letter-spacing: 2px;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__subtitle--mobile {
        font-size: 13px;
        letter-spacing: 1.35px;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__row-label {
        font-size: 16px;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__row-hint,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scale-label,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scale-note {
        font-size: 11.5px;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__repeat-label {
        font-size: 17px;
        letter-spacing: 1.2px;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__ratio {
        font-size: 19px;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scene--mobile .attention-figure__row-hint {
        display: none;
      }

      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scale--mobile .attention-figure__connector--ratio,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scale--mobile .attention-figure__scale-note,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scale--mobile .attention-figure__ratio,
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scale--mobile .attention-figure__scale-label[y="446"],
      .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg .attention-figure__scale--mobile .attention-figure__scale-label[y="490"] {
        display: none;
      }

      .blogs-graph-preview {
        position: relative;
        display: grid;
        width: min(100%, 500px);
        min-height: 222px;
        color: #edf8ff;
        font: 700 11px/1.25 Inter, ui-sans-serif, system-ui, sans-serif;
      }

      .blogs-graph-preview__card {
        position: relative;
        overflow: hidden;
        display: grid;
        gap: 10px;
        width: 100%;
        min-height: inherit;
        padding: 14px;
        border: 1px solid rgba(136, 215, 255, 0.08);
        border-radius: 22px;
        background:
          radial-gradient(ellipse at 14% 10%, rgba(34, 211, 238, 0.14), transparent 38%),
          radial-gradient(ellipse at 88% 16%, rgba(74, 222, 128, 0.1), transparent 36%),
          linear-gradient(135deg, rgba(4, 10, 20, 0.62), rgba(9, 16, 28, 0.5));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.075),
          0 18px 42px rgba(0, 0, 0, 0.14);
      }

      .blogs-graph-preview__title {
        color: rgba(238, 246, 255, 0.9);
        font-size: 12px;
        font-weight: 850;
        letter-spacing: -0.02em;
      }

      .blogs-graph-preview__flow {
        position: relative;
        display: grid;
        grid-template-columns: minmax(82px, 1fr) 26px minmax(104px, 1.18fr) 26px minmax(82px, 1fr);
        grid-template-rows: repeat(5, minmax(36px, auto));
        gap: 7px 8px;
        align-items: center;
      }

      .blogs-heatmap-preview {
        --borealis-heat-cell: clamp(36px, 2.55vw, 43px);
        display: grid;
        width: 100%;
        max-width: 100%;
        min-height: 238px;
        height: 238px;
        align-content: center;
        gap: 8px;
        padding: 14px 13px;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .blogs-heatmap-preview__head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 10px;
        min-width: 0;
      }

      .blogs-heatmap-preview__title {
        color: rgba(238, 246, 255, 0.94);
        font-size: 10px;
        font-weight: 850;
        letter-spacing: -0.02em;
      }

      .blogs-heatmap-preview__note {
        color: rgba(197, 208, 227, 0.64);
        font-size: 6.2px;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-align: right;
        text-transform: uppercase;
      }

      .blogs-heatmap-preview__grid {
        display: grid;
        grid-template-columns: minmax(50px, 62px) repeat(6, var(--borealis-heat-cell));
        grid-auto-rows: var(--borealis-heat-cell);
        gap: 3px;
        align-items: stretch;
        justify-content: center;
      }

      .blogs-heatmap-preview__label,
      .blogs-heatmap-preview__cell {
        display: grid;
        min-width: 0;
        align-items: center;
        justify-items: center;
        border: 1px solid rgba(235, 248, 255, 0.08);
        border-radius: 8px;
        color: rgba(224, 240, 251, 0.82);
        font-size: 6px;
        font-weight: 820;
        line-height: 1;
        white-space: nowrap;
      }

      .blogs-heatmap-preview__label {
        justify-items: start;
        padding: 0 5px;
        background: linear-gradient(180deg, rgba(235, 248, 255, 0.075), rgba(235, 248, 255, 0.03));
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .blogs-heatmap-preview__label--head {
        justify-items: center;
        color: rgba(197, 208, 227, 0.7);
        font-size: 5.3px;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .blogs-heatmap-preview__cell {
        --hue: calc(150 - (var(--heat) * 145));
        aspect-ratio: 1 / 1;
        padding: 0;
        border-color: hsla(var(--hue), 90%, 58%, 0.3);
        background:
          radial-gradient(circle at 18% 12%, hsla(var(--hue), 92%, 62%, 0.25), transparent 56%),
          linear-gradient(180deg, hsla(var(--hue), 88%, 46%, 0.24), hsla(var(--hue), 88%, 34%, 0.13));
        color: rgba(250, 255, 250, 0.96);
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.1),
          0 10px 24px rgba(0, 0, 0, 0.12);
        font-family: "SFMono-Regular", "Cascadia Code", monospace;
        font-size: 5.8px;
        letter-spacing: -0.04em;
      }

      .blogs-heatmap-preview__cell--head {
        border-color: rgba(235, 248, 255, 0.08);
        background: rgba(235, 248, 255, 0.055);
        box-shadow: none;
        color: rgba(197, 208, 227, 0.72);
        font-family: Inter, ui-sans-serif, system-ui, sans-serif;
        font-size: 5px;
        font-weight: 860;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .blogs-graph-preview__node {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 4px;
        min-height: 46px;
        align-content: center;
        padding: 8px 9px;
        border: 1px solid rgba(var(--node-rgb), 0.36);
        border-radius: 14px;
        background:
          radial-gradient(circle at 18% 0%, rgba(var(--node-rgb), 0.24), transparent 42%),
          linear-gradient(180deg, rgba(235, 248, 255, 0.09), rgba(235, 248, 255, 0.035));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.11),
          0 12px 24px rgba(0, 0, 0, 0.16);
      }

      .blogs-graph-preview__node strong {
        color: rgba(247, 252, 255, 0.98);
        font-size: 11px;
        line-height: 1.1;
        letter-spacing: -0.02em;
      }

      .blogs-graph-preview__node span {
        color: rgba(197, 208, 227, 0.68);
        font-size: 8.8px;
        font-weight: 720;
      }

      .blogs-graph-preview__tag {
        justify-self: start;
        padding: 2px 6px;
        border-radius: 999px;
        color: rgba(5, 12, 22, 0.92);
        background: rgba(var(--node-rgb), 0.9);
        font-size: 7.6px;
        font-style: normal;
        font-weight: 880;
        letter-spacing: 0.07em;
        text-transform: uppercase;
      }

      .blogs-graph-preview__edge {
        position: relative;
        z-index: 1;
        height: 3px;
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(var(--edge-a), 0.16), rgba(var(--edge-b), 0.92));
        animation: blogsGraphPreviewPulse 1.9s ease-in-out infinite;
      }

      .blogs-graph-preview__edge::after {
        content: "";
        position: absolute;
        right: -2px;
        top: 50%;
        width: 8px;
        height: 8px;
        border-top: 2px solid rgba(var(--edge-b), 0.94);
        border-right: 2px solid rgba(var(--edge-b), 0.94);
        transform: translateY(-50%) rotate(45deg);
      }

      .blogs-graph-preview__edge--down {
        width: 3px;
        height: 18px;
        justify-self: center;
        background: linear-gradient(180deg, rgba(var(--edge-a), 0.78), rgba(var(--edge-b), 0.88));
      }

      .blogs-graph-preview__edge--down::after {
        right: 50%;
        top: auto;
        bottom: -2px;
        transform: translateX(50%) rotate(135deg);
      }

      .blogs-graph-preview__stream {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        align-items: center;
        min-height: 50px;
        padding: 9px;
        border: 1px solid rgba(45, 212, 191, 0.35);
        border-radius: 16px;
        background: rgba(8, 20, 30, 0.72);
      }

      .blogs-graph-preview__stream i {
        display: block;
        height: 30px;
        border-radius: 9px;
        background:
          linear-gradient(180deg, rgba(34, 211, 238, 0.22), rgba(74, 222, 128, 0.16)),
          rgba(14, 34, 49, 0.92);
        border: 1px solid rgba(148, 239, 231, 0.3);
        animation: blogsStreamLift 2.4s ease-in-out infinite;
      }

      .blogs-graph-preview__stream i:nth-child(2) { animation-delay: -0.4s; }
      .blogs-graph-preview__stream i:nth-child(3) { animation-delay: -0.8s; }
      .blogs-graph-preview__stream i:nth-child(4) { animation-delay: -1.2s; }

      .blogs-graph-preview__mix {
        position: relative;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 5px;
        min-height: 54px;
        padding: 9px;
        border: 1px solid rgba(245, 158, 11, 0.36);
        border-radius: 16px;
        background:
          radial-gradient(circle at 20% 16%, rgba(245, 158, 11, 0.18), transparent 40%),
          rgba(15, 23, 42, 0.76);
      }

      .blogs-graph-preview__mix i {
        display: block;
        height: 34px;
        border-radius: 999px;
        background: linear-gradient(180deg, rgba(251, 191, 36, 0.82), rgba(245, 158, 11, 0.28));
        box-shadow: 0 0 18px rgba(245, 158, 11, 0.16);
        animation: blogsWeightPulse 1.9s ease-in-out infinite;
      }

      .blogs-graph-preview__mix i:nth-child(2) { animation-delay: -0.35s; }
      .blogs-graph-preview__mix i:nth-child(3) { animation-delay: -0.7s; }
      .blogs-graph-preview__mix i:nth-child(4) { animation-delay: -1.05s; }

      .blogs-graph-preview__caption {
        color: rgba(197, 208, 227, 0.7);
        font-size: 9px;
        font-weight: 760;
        text-align: center;
      }

      .blogs-graph-preview--deepseek .blogs-graph-preview__card {
        min-height: 262px;
      }

      .blogs-graph-preview--deepseek .blogs-graph-preview__mini-flow {
        display: grid;
        grid-template-columns: 1fr 26px 1fr;
        gap: 8px;
        align-items: center;
      }

      @keyframes blogsGraphPreviewPulse {
        0%, 100% { opacity: 0.54; filter: drop-shadow(0 0 0 rgba(136, 215, 255, 0)); }
        50% { opacity: 1; filter: drop-shadow(0 0 11px rgba(136, 215, 255, 0.28)); }
      }

      @keyframes blogsStreamLift {
        0%, 100% { transform: translateY(0); opacity: 0.72; }
        50% { transform: translateY(-4px); opacity: 1; }
      }

      @keyframes blogsWeightPulse {
        0%, 100% { transform: scaleY(0.72); opacity: 0.62; }
        50% { transform: scaleY(1); opacity: 1; }
      }

      .blogs-with-graphs__body {
        position: relative;
        z-index: 2;
        display: grid;
        gap: 12px;
        padding: 20px 22px 22px;
      }

      .blogs-with-graphs__kicker {
        --blogs-article-type-mark: #88d7ff;
        --blogs-article-type-mark-glow: rgba(136, 215, 255, 0.3);
        display: inline-flex;
        width: fit-content;
        align-items: center;
        gap: 8px;
        color: rgba(197, 208, 227, 0.82);
        font-size: 0.68rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .blogs-with-graphs__kicker::before {
        content: "";
        width: 8px;
        min-width: 8px;
        height: 8px;
        min-height: 8px;
        flex: 0 0 8px;
        aspect-ratio: 1 / 1;
        border-radius: 999px;
        background: var(--blogs-article-type-mark);
        box-shadow: 0 0 16px var(--blogs-article-type-mark-glow);
      }

      .blogs-with-graphs__kicker--owner::before {
        width: 13px;
        min-width: 13px;
        height: 13px;
        min-height: 13px;
        flex-basis: 13px;
        border-radius: 0;
        background: var(--blogs-article-type-mark);
        box-shadow: 0 0 16px var(--blogs-article-type-mark-glow);
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M345 151.2C354.2 143.9 360 132.6 360 120C360 97.9 342.1 80 320 80C297.9 80 280 97.9 280 120C280 132.6 285.9 143.9 295 151.2L226.6 258.8C216.6 274.5 195.3 278.4 180.4 267.2L120.9 222.7C125.4 216.3 128 208.4 128 200C128 177.9 110.1 160 88 160C65.9 160 48 177.9 48 200C48 221.8 65.5 239.6 87.2 240L119.8 457.5C124.5 488.8 151.4 512 183.1 512L456.9 512C488.6 512 515.5 488.8 520.2 457.5L552.8 240C574.5 239.6 592 221.8 592 200C592 177.9 574.1 160 552 160C529.9 160 512 177.9 512 200C512 208.4 514.6 216.3 519.1 222.7L459.7 267.3C444.8 278.5 423.5 274.6 413.5 258.9L345 151.2z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M345 151.2C354.2 143.9 360 132.6 360 120C360 97.9 342.1 80 320 80C297.9 80 280 97.9 280 120C280 132.6 285.9 143.9 295 151.2L226.6 258.8C216.6 274.5 195.3 278.4 180.4 267.2L120.9 222.7C125.4 216.3 128 208.4 128 200C128 177.9 110.1 160 88 160C65.9 160 48 177.9 48 200C48 221.8 65.5 239.6 87.2 240L119.8 457.5C124.5 488.8 151.4 512 183.1 512L456.9 512C488.6 512 515.5 488.8 520.2 457.5L552.8 240C574.5 239.6 592 221.8 592 200C592 177.9 574.1 160 552 160C529.9 160 512 177.9 512 200C512 208.4 514.6 216.3 519.1 222.7L459.7 267.3C444.8 278.5 423.5 274.6 413.5 258.9L345 151.2z'/%3E%3C/svg%3E");
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        mask-size: contain;
      }

      .blogs-with-graphs__kicker--hfviewer::before {
        width: 12px;
        min-width: 12px;
        height: 12px;
        min-height: 12px;
        flex-basis: 12px;
        border-radius: 4px;
        background: var(--blogs-article-type-mark);
        box-shadow: 0 0 16px var(--blogs-article-type-mark-glow);
      }

      .blogs-with-graphs__title {
        margin: 0;
        max-width: 20ch;
        font-family: "Inter", sans-serif;
        color: rgba(249, 252, 255, 0.98);
        font-size: clamp(1.22rem, 1.72vw, 1.58rem);
        line-height: 1.04;
        letter-spacing: -0.045em;
      }

      .blogs-with-graphs__meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 10px;
        color: rgba(197, 208, 227, 0.82);
        font-size: 0.84rem;
        line-height: 1.4;
      }

      .blogs-with-graphs__avatar {
        width: 34px;
        min-width: 34px;
        height: 34px;
        min-height: 34px;
        border-radius: 999px;
        object-fit: cover;
        background: rgba(136, 215, 255, 0.12);
        border: 1px solid rgba(255, 255, 255, 0.2);
        box-shadow:
          0 0 0 3px rgba(136, 215, 255, 0.08),
          0 8px 18px rgba(0, 0, 0, 0.22);
      }

      .blogs-with-graphs__avatar-stack {
        display: inline-flex;
        align-items: center;
        padding-left: 2px;
      }

      .blogs-with-graphs__avatar-stack .blogs-with-graphs__avatar + .blogs-with-graphs__avatar {
        margin-left: -10px;
      }

      .blogs-with-graphs__avatar-stack .blogs-with-graphs__avatar {
        position: relative;
        width: 32px;
        min-width: 32px;
        height: 32px;
        min-height: 32px;
        box-shadow:
          0 0 0 3px rgba(7, 19, 33, 0.94),
          0 8px 18px rgba(0, 0, 0, 0.28);
      }

      .blogs-with-graphs__avatar-stack .blogs-with-graphs__avatar:nth-child(1) { z-index: 3; }
      .blogs-with-graphs__avatar-stack .blogs-with-graphs__avatar:nth-child(2) { z-index: 2; }
      .blogs-with-graphs__avatar-stack .blogs-with-graphs__avatar:nth-child(3) { z-index: 1; }

      .blogs-with-graphs__author {
        color: rgba(245, 248, 255, 0.92);
        font-weight: 750;
      }

      .blogs-with-graphs__open {
        display: inline-flex;
        align-items: center;
        gap: 0.58em;
        margin-top: 2px;
        color: rgb(var(--blogs-card-edge-rgb));
        font-size: 0.72rem;
        font-weight: 850;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-shadow: 0 0 10px rgba(var(--blogs-card-edge-rgb), 0.2);
      }

      .blogs-with-graphs__open::after {
        content: "";
        display: inline-block;
        width: 1.12em;
        height: 1.12em;
        flex: 0 0 auto;
        background: currentColor;
        -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat;
        transform: translateX(0);
        transition: transform 180ms ease;
      }

      .blogs-with-graphs__card:hover .blogs-with-graphs__open::after,
      .blogs-with-graphs__card:focus-visible .blogs-with-graphs__open::after {
        transform: translateX(2px);
      }

      .blogs-with-graphs--card-variants {
        padding-top: 18px;
      }

      .blogs-with-graphs--card-variants + .blogs-with-graphs--card-variants {
        margin-top: 38px;
        padding-top: 34px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
      }

      .blogs-with-graphs--card-variants .blogs-with-graphs__lede {
        color: rgba(197, 208, 227, 0.76);
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__card {
        min-height: 430px;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 30px;
        background:
          radial-gradient(circle at 16% 0%, rgba(129, 248, 185, 0.16), transparent 34%),
          radial-gradient(circle at 88% 4%, rgba(136, 215, 255, 0.16), transparent 34%),
          linear-gradient(150deg, rgba(6, 16, 29, 0.96), rgba(9, 22, 38, 0.98) 54%, rgba(4, 14, 24, 0.98));
        box-shadow:
          0 26px 68px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.09);
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__card::before {
        background:
          linear-gradient(135deg, rgba(129, 248, 185, 0.08), transparent 38%),
          linear-gradient(315deg, rgba(255, 117, 185, 0.09), transparent 34%);
        opacity: 0;
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__card::after {
        display: none;
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__card:hover::before,
      .blogs-with-graphs--variant-previous .blogs-with-graphs__card:focus-visible::before {
        opacity: 1;
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__image-wrap {
        margin: 15px 15px 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        background:
          radial-gradient(circle at 28% 16%, rgba(129, 248, 185, 0.1), transparent 34%),
          linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__image-wrap::after {
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          inset 0 -28px 60px rgba(0, 0, 0, 0.22);
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__body {
        gap: 12px;
        padding: 18px 20px 21px;
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__meta {
        gap: 10px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__avatar {
        width: 30px;
        min-width: 30px;
        height: 30px;
        min-height: 30px;
      }

      .blogs-with-graphs--variant-previous .blogs-with-graphs__author {
        font-size: inherit;
        font-weight: 750;
      }

      .blogs-with-graphs--variant-author-halo .blogs-with-graphs__card,
      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__card,
      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__card,
      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__card,
      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__card,
      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__card {
        min-height: 430px;
        border: 1px solid rgba(136, 215, 255, 0.18);
        border-radius: 30px;
        background:
          radial-gradient(circle at 16% 0%, rgba(129, 248, 185, 0.16), transparent 34%),
          radial-gradient(circle at 88% 4%, rgba(136, 215, 255, 0.16), transparent 34%),
          linear-gradient(150deg, rgba(6, 16, 29, 0.96), rgba(9, 22, 38, 0.98) 54%, rgba(4, 14, 24, 0.98));
        box-shadow:
          0 26px 68px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.09);
      }

      .blogs-with-graphs--variant-author-halo .blogs-with-graphs__image-wrap,
      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__image-wrap,
      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__image-wrap,
      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__image-wrap,
      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__image-wrap,
      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__image-wrap {
        margin: 15px 15px 0;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 22px;
        background:
          radial-gradient(circle at 28% 16%, rgba(129, 248, 185, 0.1), transparent 34%),
          linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015));
      }

      .blogs-with-graphs--variant-author-halo .blogs-with-graphs__meta,
      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__meta,
      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__meta,
      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__meta,
      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__meta,
      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__meta {
        gap: 12px;
        padding: 0;
        border: 0;
        border-radius: 0;
        background: transparent;
        box-shadow: none;
      }

      .blogs-with-graphs--variant-author-halo .blogs-with-graphs__author,
      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__author,
      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__author,
      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__author,
      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__author,
      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__author {
        font-size: 1.08rem;
        font-weight: 850;
      }

      .blogs-with-graphs--variant-author-halo .blogs-with-graphs__avatar,
      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__avatar,
      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__avatar,
      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__avatar,
      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__avatar,
      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__avatar {
        width: 72px;
        min-width: 72px;
        height: 72px;
        min-height: 72px;
        border: 1px solid rgba(255, 255, 255, 0.28);
        box-shadow:
          0 0 0 1px rgba(129, 248, 185, 0.18),
          0 0 34px rgba(129, 248, 185, 0.16),
          0 16px 28px rgba(0, 0, 0, 0.28);
      }

      .blogs-with-graphs--variant-author-halo .blogs-with-graphs__body {
        position: relative;
        padding: 46px 22px 22px;
      }

      .blogs-with-graphs--variant-author-halo .blogs-with-graphs__meta {
        position: absolute;
        left: 24px;
        top: -38px;
        z-index: 4;
        align-items: end;
      }

      .blogs-with-graphs--variant-author-halo .blogs-with-graphs__avatar {
        width: 82px;
        min-width: 82px;
        height: 82px;
        min-height: 82px;
      }

      .blogs-with-graphs--variant-author-halo .blogs-with-graphs__meta::after {
        content: "";
        position: absolute;
        left: 18px;
        bottom: -10px;
        width: 118px;
        height: 1px;
        background: linear-gradient(90deg, rgba(129, 248, 185, 0.46), transparent);
        pointer-events: none;
      }

      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__body {
        grid-template-columns: 88px minmax(0, 1fr);
        align-items: start;
        gap: 9px 16px;
        padding: 20px 22px 23px;
      }

      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__meta {
        grid-column: 1;
        grid-row: 1 / span 4;
        display: grid;
        justify-items: center;
        align-content: start;
        gap: 9px;
        color: rgba(197, 208, 227, 0.78);
        font-size: 0.78rem;
        line-height: 1.18;
        text-align: center;
      }

      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__meta::before {
        content: "";
        position: absolute;
        left: 58px;
        top: 18px;
        bottom: 18px;
        width: 1px;
        background: linear-gradient(180deg, transparent, rgba(129, 248, 185, 0.32), transparent);
        pointer-events: none;
      }

      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__kicker,
      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__title,
      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__open {
        grid-column: 2;
      }

      .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__avatar {
        width: 78px;
        min-width: 78px;
        height: 78px;
        min-height: 78px;
      }

      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__card {
        overflow: visible;
      }

      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__image-wrap {
        margin-right: 28px;
        border-radius: 22px 32px 22px 22px;
      }

      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__body {
        padding: 18px 23px 23px;
      }

      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__meta {
        position: absolute;
        top: 28px;
        right: 2px;
        z-index: 5;
        flex-direction: column;
        align-items: center;
        width: 104px;
        color: rgba(223, 247, 255, 0.82);
        font-size: 0.78rem;
        line-height: 1.16;
        text-align: center;
      }

      .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__avatar {
        width: 88px;
        min-width: 88px;
        height: 88px;
        min-height: 88px;
      }

      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__card {
        grid-template-columns: minmax(0, 1fr) 124px;
        grid-template-rows: auto 1fr;
        overflow: visible;
      }

      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__image-wrap {
        grid-column: 1 / -1;
        grid-row: 1;
        margin-right: 15px;
      }

      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__body {
        grid-column: 1;
        grid-row: 2;
        padding: 18px 0 23px 22px;
      }

      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__meta {
        grid-column: 2;
        grid-row: 2;
        align-self: center;
        justify-self: center;
        display: grid;
        justify-items: center;
        gap: 10px;
        padding: 0 14px 22px 0;
        color: rgba(197, 208, 227, 0.82);
        font-size: 0.82rem;
        line-height: 1.2;
        text-align: center;
      }

      .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__avatar {
        width: 86px;
        min-width: 86px;
        height: 86px;
        min-height: 86px;
      }

      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__body {
        position: relative;
        grid-template-columns: minmax(0, 1fr) 112px;
        gap: 8px 14px;
        padding: 20px 22px 24px;
      }

      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__kicker,
      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__title,
      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__open {
        grid-column: 1;
      }

      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__meta {
        position: relative;
        grid-column: 2;
        grid-row: 1 / span 4;
        display: grid;
        justify-items: center;
        align-content: center;
        gap: 10px;
        color: rgba(197, 208, 227, 0.82);
        font-size: 0.8rem;
        line-height: 1.2;
        text-align: center;
      }

      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__meta::before {
        content: "";
        position: absolute;
        inset: -10px 8px auto;
        height: 86px;
        border: 1px solid rgba(129, 248, 185, 0.18);
        border-right-color: transparent;
        border-bottom-color: rgba(136, 215, 255, 0.12);
        border-radius: 999px;
        transform: rotate(-16deg);
        pointer-events: none;
      }

      .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__avatar {
        width: 76px;
        min-width: 76px;
        height: 76px;
        min-height: 76px;
      }

      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__card {
        border-radius: 34px;
        background:
          radial-gradient(circle at 20% 4%, rgba(129, 248, 185, 0.15), transparent 32%),
          radial-gradient(circle at 92% 4%, rgba(136, 215, 255, 0.14), transparent 32%),
          linear-gradient(150deg, rgba(5, 15, 27, 0.96), rgba(8, 20, 34, 0.98));
      }

      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__image-wrap {
        margin: 18px 18px 0;
        border-radius: 26px;
      }

      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__body {
        grid-template-columns: 96px minmax(0, 1fr);
        align-items: center;
        gap: 10px 16px;
        padding: 19px 24px 24px;
      }

      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__meta {
        grid-column: 1;
        grid-row: 1 / span 4;
        display: grid;
        justify-items: center;
        gap: 9px;
        color: rgba(197, 208, 227, 0.82);
        font-size: 0.8rem;
        line-height: 1.2;
        text-align: center;
      }

      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__kicker,
      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__title,
      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__open {
        grid-column: 2;
      }

      .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__avatar {
        width: 84px;
        min-width: 84px;
        height: 84px;
        min-height: 84px;
      }

      .community-showcase {
        display: grid;
        gap: 20px;
        margin-top: -20px;
        /* Pin the single grid track to the container width. Without this the
           track is auto-sized, so a wide item (e.g. the podium row's nowrap
           count pills) inflates the track past the page column and every
           sibling (head, rail, cards) stretches with it off the right edge
           on phones. Same containment lesson as the embed page. */
        grid-template-columns: minmax(0, 1fr);
      }

      .community-showcase__head {
        display: flex;
        align-items: end;
        justify-content: space-between;
        gap: 24px;
      }

      .community-showcase__intro {
        display: grid;
        gap: 10px;
        width: 100%;
      }

      .community-showcase__title-row {
        display: grid;
        grid-template-columns: minmax(0, max-content) auto;
        align-items: end;
        justify-content: space-between;
        column-gap: 24px;
        row-gap: 16px;
      }

      .community-showcase__eyebrow {
        color: var(--muted);
        font-size: 0.78rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .community-showcase h2 {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: clamp(2rem, 3vw, 3rem);
        line-height: 1;
        letter-spacing: -0.04em;
      }

      .community-showcase p {
        margin: 0;
      }

      .community-showcase__lede {
        max-width: 64ch;
        color: var(--muted-strong);
        font-size: 0.98rem;
        line-height: 1.65;
      }

      .community-showcase__embed-cta {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        display: inline-flex;
        justify-self: end;
        align-self: end;
        width: fit-content;
        align-items: center;
        justify-content: center;
        gap: 11px;
        min-height: 46px;
        padding: 0 18px 0 10px;
        border: 1px solid rgba(129, 248, 185, 0.4);
        border-radius: 999px;
        /* Static base only. The drifting gradient lives on ::before so the
           text-bearing element itself is never compositor-animated: Android
           Chrome occasionally rasterizes an element whose own background is
           infinitely animated before its children paint, then never
           invalidates, leaving the pill visible but icon+label blank. */
        background: rgba(7, 22, 32, 0.97);
        color: #e9fff8;
        font-size: 0.94rem;
        font-weight: 800;
        letter-spacing: -0.01em;
        text-decoration: none;
        box-shadow:
          0 14px 34px rgba(16, 185, 129, 0.13),
          inset 0 1px 0 rgba(255, 255, 255, 0.16);
        transition:
          border-color 180ms ease,
          box-shadow 180ms ease,
          transform 180ms ease;
      }

      .community-showcase__embed-cta::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        border-radius: inherit;
        background:
          radial-gradient(circle at 18% 10%, rgba(129, 248, 185, 0.24), transparent 24%),
          linear-gradient(115deg, rgba(5, 18, 28, 0.98), rgba(16, 83, 71, 0.72), rgba(9, 25, 39, 0.96), rgba(129, 248, 185, 0.18));
        background-size: 230% 230%;
        animation: communityCtaGradientDrift 7.8s ease-in-out infinite;
        pointer-events: none;
      }

      .community-showcase__embed-cta::after {
        content: "";
        position: absolute;
        inset: -42% auto -42% -58%;
        z-index: 0;
        width: 42%;
        border-radius: 999px;
        background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
        filter: blur(0.2px);
        transform: skewX(-18deg);
        animation: communityCtaFastSheen 2.65s cubic-bezier(0.4, 0, 0.2, 1) infinite;
        z-index: 0;
        pointer-events: none;
      }

      /* keep BOTH children above the button's animated background and sheen
         on every compositor (some Android builds mis-stack filtered/skewed
         pseudo-elements over static children), guard the label against any
         inherited gradient-text fill, and give each child its OWN compositor
         layer (translateZ) so a raster of the animated pseudos can never
         swallow them */
      .community-showcase__embed-cta > span,
      .community-showcase__embed-cta .community-showcase__embed-cta-icon-wrap {
        position: relative;
        z-index: 1;
        transform: translateZ(0);
        -webkit-text-fill-color: currentColor;
      }

      .community-showcase__embed-cta:hover,
      .community-showcase__embed-cta:focus-visible {
        border-color: rgba(129, 248, 185, 0.62);
        box-shadow:
          0 18px 42px rgba(16, 185, 129, 0.2),
          0 0 0 1px rgba(129, 248, 185, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.2);
        transform: translateY(-1px);
      }

      .community-showcase__embed-cta:focus-visible {
        outline: 2px solid rgba(129, 248, 185, 0.42);
        outline-offset: 3px;
      }

      .community-showcase__embed-cta-icon-wrap {
        display: inline-flex;
        width: 30px;
        height: 30px;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        border: 1px solid rgba(129, 248, 185, 0.24);
        border-radius: 999px;
        background:
          radial-gradient(circle at 32% 24%, rgba(255, 255, 255, 0.2), transparent 32%),
          rgba(2, 14, 22, 0.58);
        color: #eafff8;
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.12),
          0 8px 18px rgba(0, 0, 0, 0.18);
      }

      .community-showcase__embed-cta-icon {
        display: block;
        width: 19px;
        height: 19px;
        flex: 0 0 auto;
        color: currentColor;
      }

      @keyframes communityCtaGradientDrift {
        0%,
        100% {
          background-position: 0% 50%;
        }
        50% {
          background-position: 100% 50%;
        }
      }

      @keyframes communityCtaFastSheen {
        0% {
          transform: translateX(0) skewX(-18deg);
          opacity: 0;
        }
        16% {
          opacity: 0.92;
        }
        48%,
        100% {
          transform: translateX(390%) skewX(-18deg);
          opacity: 0;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .blogs-with-graphs__write,
        .blogs-with-graphs__write::before,
        .community-showcase__embed-cta,
        .community-showcase__embed-cta::before,
        .community-showcase__embed-cta::after {
          animation: none;
        }
      }

      .community-showcase__carousel {
        position: relative;
        min-width: 0;
      }

      .community-showcase__rail {
        display: flex;
        align-items: flex-start;
        gap: 18px;
        overflow-x: auto;
        overflow-y: hidden;
        overflow-anchor: none;
        padding: 2px 2px 18px;
        scroll-behavior: auto;
        scroll-padding-inline: 2px;
        scroll-snap-type: x proximity;
        scrollbar-width: none;
      }

      .community-showcase__rail::-webkit-scrollbar {
        display: none;
      }

      .community-showcase__pager {
        display: none;
      }

      /*
       * Top community members podium, below the showcase rail: honors the
       * three authors with the most embedded graphs in the rail above. The
       * standings are computed at runtime from the same rail the page shows
       * (baked cards + the live community_showcase feed), so the podium
       * stays current whenever the showcase itself updates.
       */
      .community-podium {
        display: grid;
        gap: 8px;
        justify-items: center;
        padding: 10px 12px 2px;
      }

      .community-podium[hidden] {
        display: none;
      }

      .community-podium__eyebrow {
        color: var(--muted);
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-align: center;
        text-transform: uppercase;
      }

      .community-podium__cta {
        color: var(--muted);
        font-size: 0.92rem;
        margin: 14px auto 0;
        max-width: 560px;
        text-align: center;
      }

      .community-podium__cta[hidden] {
        display: none;
      }

      .community-podium__cta-link {
        color: var(--lime, #9cff63);
        font-weight: 600;
        text-decoration: underline;
        text-underline-offset: 3px;
      }

      .community-podium__cta-link:hover,
      .community-podium__cta-link:focus-visible {
        filter: brightness(1.15);
      }

      .community-podium__row {
        display: flex;
        align-items: flex-end;
        justify-content: center;
        gap: clamp(22px, 5.4vw, 64px);
        min-width: 0;
        max-width: 100%;
      }

      .community-podium__member {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        min-width: 0;
        padding: 8px 6px 4px;
        border-radius: 18px;
        color: var(--text);
        text-align: center;
        text-decoration: none;
        transition: transform 0.22s ease;
      }

      .community-podium__member:hover,
      .community-podium__member:focus-visible {
        transform: translateY(-5px);
        outline: none;
      }

      .community-podium__member:focus-visible .community-podium__name {
        text-decoration: underline;
      }

      .community-podium__member--rank-1 { order: 2; }
      .community-podium__member--rank-2 { order: 1; }
      .community-podium__member--rank-3 { order: 3; }

      .community-podium__figure {
        position: relative;
        display: grid;
        place-items: center;
        width: var(--podium-figure-size, 118px);
        height: var(--podium-figure-size, 118px);
      }

      .community-podium__member--rank-1 .community-podium__figure {
        --podium-figure-size: 158px;
        --podium-avatar-size: 88px;
      }

      .community-podium__member--rank-1 {
        margin-bottom: 10px;
      }

      .community-podium__wreath {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
      }

      .community-podium__member--rank-1 .community-podium__wreath {
        filter: drop-shadow(0 0 14px rgba(242, 193, 78, 0.3));
      }

      .community-podium__avatar {
        width: var(--podium-avatar-size, 62px);
        height: var(--podium-avatar-size, 62px);
        border-radius: 999px;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.08);
        box-shadow:
          0 0 0 2px var(--podium-medal, rgba(255, 255, 255, 0.35)),
          0 10px 26px rgba(0, 0, 0, 0.45);
      }

      .community-podium__avatar--org {
        /* Roundrect corners reach further out than a circle; pull org
           avatars in a touch so they clear the wreath leaves. */
        width: calc(var(--podium-avatar-size, 62px) * 0.88);
        height: calc(var(--podium-avatar-size, 62px) * 0.88);
        border-radius: 24%;
      }

      .community-podium__rank {
        position: absolute;
        bottom: 6px;
        left: 50%;
        display: grid;
        place-items: center;
        width: 24px;
        height: 24px;
        border-radius: 999px;
        background: var(--podium-medal, #cfd8e6);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
        color: #10141d;
        font-size: 0.76rem;
        font-weight: 800;
        transform: translateX(-50%);
      }

      .community-podium__member--rank-1 .community-podium__rank {
        width: 27px;
        height: 27px;
        font-size: 0.85rem;
      }

      .community-podium__member--rank-1 { --podium-medal: #f2c14e; }
      .community-podium__member--rank-2 { --podium-medal: #cfd8e6; }
      .community-podium__member--rank-3 { --podium-medal: #d08a53; }

      .community-podium__name {
        max-width: 172px;
        overflow: hidden;
        font-size: 0.98rem;
        font-weight: 700;
        letter-spacing: -0.01em;
        overflow-wrap: anywhere;
      }

      .community-podium__member--rank-1 .community-podium__name {
        max-width: 208px;
        font-size: 1.12rem;
      }

      .community-podium__count {
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        padding: 4px 11px;
        border: 1px solid color-mix(in srgb, var(--podium-medal, #cfd8e6) 42%, transparent);
        border-radius: 999px;
        background: color-mix(in srgb, var(--podium-medal, #cfd8e6) 10%, rgba(255, 255, 255, 0.03));
        color: var(--muted-strong);
        font-size: 0.76rem;
        font-weight: 600;
        letter-spacing: 0.01em;
        white-space: nowrap;
      }

      @media (max-width: 620px) {
        .community-podium {
          padding-inline: 0;
        }

        .community-podium__row {
          gap: 6px;
        }

        .community-podium__figure {
          --podium-figure-size: 88px;
          --podium-avatar-size: 46px;
        }

        .community-podium__member--rank-1 .community-podium__figure {
          --podium-figure-size: 112px;
          --podium-avatar-size: 60px;
        }

        .community-podium__member {
          padding-inline: 0;
        }

        .community-podium__name {
          max-width: 100px;
          font-size: 0.82rem;
        }

        .community-podium__member--rank-1 .community-podium__name {
          max-width: 118px;
          font-size: 0.93rem;
        }

        .community-podium__count {
          /* Scale with the viewport so three "N embedded graphs" pills fit
             side by side without ellipsis down to 320px wide phones. */
          padding: 3px 5px;
          font-size: clamp(0.5rem, 2.45vw, 0.64rem);
        }
      }

      @media (max-width: 349px) {
        /* Ultra-narrow phones: shrink the wreaths proportionally so the
           gold rank-1 figure stops crowding out the flanking pills. */
        .community-podium__figure {
          --podium-figure-size: 76px;
          --podium-avatar-size: 40px;
        }

        .community-podium__member--rank-1 .community-podium__figure {
          --podium-figure-size: 98px;
          --podium-avatar-size: 52px;
        }
      }

      .community-card {
        --community-card-panel-height: 450px;
        --community-card-top-height: 58px;
        --community-card-summary-min-height: 106px;
        --community-card-embed-min-height: 210px;
        display: flex;
        flex: 0 0 clamp(356px, 31vw, 430px);
        flex-direction: column;
        min-height: 100%;
        padding: 18px;
        border: 1px solid rgba(255, 255, 255, 0.72);
        border-radius: 24px;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 252, 0.98));
        color: #111827;
        box-shadow:
          0 24px 60px rgba(0, 0, 0, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.9);
        scroll-snap-align: start;
      }

      .community-card__top {
        display: flex;
        align-items: center;
        gap: 11px;
        height: var(--community-card-top-height);
        min-width: 0;
        padding-bottom: 14px;
        border-bottom: 1px solid #e5e7eb;
      }

      .community-card__avatar {
        width: 38px;
        height: 38px;
        flex: 0 0 38px;
        border-radius: 999px;
        object-fit: cover;
        background: #e5e7eb;
        box-shadow:
          0 0 0 1px rgba(15, 23, 42, 0.08),
          0 8px 18px rgba(15, 23, 42, 0.14);
      }

      /* Organizations use roundrect avatars; individual users stay circular. */
      .community-card--org .community-card__avatar { border-radius: 10px; }

      .community-card__repo {
        display: -webkit-box;
        min-width: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        color: #111827;
        font-size: clamp(1.06rem, 1.25vw, 1.26rem);
        line-height: 1.08;
        overflow-wrap: anywhere;
      }

      .community-card__owner {
        color: #9ca3af;
        font-weight: 560;
      }

      .community-card__slash {
        color: #9ca3af;
        font-weight: 620;
      }

      .community-card__model {
        color: #05070c;
        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
        font-weight: 800;
        letter-spacing: -0.02em;
      }

      .community-card__tabs {
        display: flex;
        align-items: center;
        gap: 18px;
        min-height: 42px;
        border-bottom: 1px solid #e5e7eb;
        color: #6b7280;
        font-size: 0.82rem;
        font-weight: 650;
      }

      .community-card__tab {
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        padding: 0;
        border: 0;
        border-bottom: 2px solid transparent;
        background: transparent;
        color: #6b7280;
        font: inherit;
        cursor: pointer;
      }

      .community-card__tab:hover,
      .community-card__tab:focus-visible {
        color: #111827;
        outline: none;
      }

      .community-card__tab[aria-selected="true"] {
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        color: #111827;
        border-bottom: 2px solid #ff9d00;
      }

      .community-card__panel {
        height: var(--community-card-panel-height);
        min-height: 0;
        overflow: hidden;
      }

      .community-card__panel[hidden] {
        display: none !important;
      }

      .community-card__panel--model {
        display: flex;
        min-height: 0;
        flex-direction: column;
      }

      .community-card__panel--data {
        display: grid;
        align-content: start;
        gap: 10px;
        padding-top: 14px;
        grid-template-rows: auto minmax(0, 1fr);
      }

      .community-card__status {
        color: #64748b;
        font-size: 0.84rem;
        line-height: 1.5;
      }

      .community-card__hf-summary {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        min-width: 0;
        color: #4b5563;
        font-size: 0.82rem;
        font-weight: 650;
        line-height: 1.35;
      }

      .community-card__hf-count {
        flex: 0 0 auto;
        color: #6b7280;
        font-size: 0.76rem;
        font-weight: 560;
      }

      .community-card__hf-list {
        min-height: 0;
        overflow: auto;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #ffffff;
        scrollbar-color: #cbd5e1 transparent;
        scrollbar-width: thin;
      }

      .community-card__hf-list::-webkit-scrollbar {
        width: 8px;
        height: 8px;
      }

      .community-card__hf-list::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: #cbd5e1;
      }

      .community-card__hf-row {
        display: grid;
        grid-template-columns: minmax(0, 1.18fr) minmax(86px, 0.8fr) max-content;
        align-items: center;
        gap: 10px;
        min-height: 43px;
        padding: 0 12px;
        border-bottom: 1px solid #eef2f7;
        color: #111827;
        text-decoration: none;
      }

      .community-card__hf-row:last-child {
        border-bottom: 0;
      }

      .community-card__hf-row--head {
        position: sticky;
        top: 0;
        z-index: 1;
        min-height: 34px;
        background: #f8fafc;
        color: #6b7280;
        font-size: 0.7rem;
        font-weight: 720;
        letter-spacing: 0.03em;
        text-transform: uppercase;
      }

      .community-card__hf-file-row:hover,
      .community-card__hf-file-row:focus-visible,
      .community-card__discussion-row:hover,
      .community-card__discussion-row:focus-visible {
        background: #f8fafc;
        outline: none;
      }

      .community-card__hf-name {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .community-card__hf-icon {
        position: relative;
        display: inline-block;
        width: 18px;
        height: 18px;
        flex: 0 0 18px;
      }

      .community-card__hf-icon--file {
        background: #64748b;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M304 112L192 112C183.2 112 176 119.2 176 128L176 512C176 520.8 183.2 528 192 528L448 528C456.8 528 464 520.8 464 512L464 272L376 272C336.2 272 304 239.8 304 200L304 112zM444.1 224L352 131.9L352 200C352 213.3 362.7 224 376 224L444.1 224zM128 128C128 92.7 156.7 64 192 64L325.5 64C342.5 64 358.8 70.7 370.8 82.7L493.3 205.3C505.3 217.3 512 233.6 512 250.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128z'/%3E%3C/svg%3E") center / contain no-repeat;
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M304 112L192 112C183.2 112 176 119.2 176 128L176 512C176 520.8 183.2 528 192 528L448 528C456.8 528 464 520.8 464 512L464 272L376 272C336.2 272 304 239.8 304 200L304 112zM444.1 224L352 131.9L352 200C352 213.3 362.7 224 376 224L444.1 224zM128 128C128 92.7 156.7 64 192 64L325.5 64C342.5 64 358.8 70.7 370.8 82.7L493.3 205.3C505.3 217.3 512 233.6 512 250.6L512 512C512 547.3 483.3 576 448 576L192 576C156.7 576 128 547.3 128 512L128 128z'/%3E%3C/svg%3E") center / contain no-repeat;
      }

      .community-card__hf-icon--directory {
        width: 17px;
        height: 13px;
        margin-top: 3px;
        border-color: #f59e0b;
        border-radius: 3px;
        background: #fef3c7;
      }

      .community-card__hf-icon--directory::before {
        content: "";
        position: absolute;
        top: -5px;
        left: 1px;
        width: 8px;
        height: 5px;
        border: 1.5px solid #f59e0b;
        border-bottom: 0;
        border-radius: 3px 3px 0 0;
        background: #fef3c7;
      }

      .community-card__hf-icon--directory::after {
        content: none;
      }

      .community-card__hf-path,
      .community-card__hf-commit-title,
      .community-card__hf-commit-date,
      .community-card__hf-size {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .community-card__hf-path {
        color: #111827;
        font-size: 0.82rem;
        font-weight: 660;
      }

      .community-card__hf-commit {
        display: grid;
        min-width: 0;
        gap: 2px;
      }

      .community-card__hf-commit-title {
        color: #4b5563;
        font-size: 0.75rem;
        font-weight: 560;
      }

      .community-card__hf-commit-date,
      .community-card__hf-size {
        color: #6b7280;
        font-size: 0.72rem;
        font-weight: 520;
      }

      .community-card__hf-size {
        justify-self: end;
        max-width: 62px;
      }

      .community-card__discussion-list .community-card__hf-row {
        grid-template-columns: minmax(0, 1fr) auto;
      }

      .community-card__discussion-main {
        display: grid;
        min-width: 0;
        gap: 3px;
      }

      .community-card__discussion-title {
        overflow: hidden;
        color: #111827;
        font-size: 0.84rem;
        font-weight: 680;
        line-height: 1.25;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .community-card__discussion-meta {
        overflow: hidden;
        color: #6b7280;
        font-size: 0.73rem;
        line-height: 1.35;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .community-card__discussion-state {
        justify-self: end;
        padding: 3px 7px;
        border: 1px solid #d1d5db;
        border-radius: 999px;
        color: #4b5563;
        font-size: 0.7rem;
        font-weight: 650;
      }

      .community-card__empty {
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 0;
        height: 100%;
        padding: 20px;
        border: 1px solid #e5e7eb;
        border-radius: 12px;
        background: #ffffff;
        color: #64748b;
        font-size: 0.84rem;
        line-height: 1.55;
        text-align: center;
      }

      .community-card__empty-title {
        color: #111827;
        font-size: 0.92rem;
        font-weight: 720;
      }

      .community-card__empty-copy {
        margin-top: 5px;
      }

      /* Long summaries used to push the actions row below the fixed-height
         model panel, whose overflow: hidden ate the buttons. The text grows
         naturally first (the embed shrinks toward its min-height); only when
         the panel still overflows does JS clamp the text to the line count
         that fits and reveal the Show more toggle. The clamp is paired with
         an explicit height because -webkit-line-clamp alone leaves the
         "hidden" lines visible inside a min-height-stretched box. */
      .community-card__summary {
        display: -webkit-box;
        flex: 0 0 auto;
        min-height: var(--community-card-summary-min-height);
        padding: 16px 0 18px;
        overflow: hidden;
        -webkit-box-orient: vertical;
        color: #374151;
        font-size: 0.92rem;
        line-height: 1.62;
      }

      .community-card__summary-toggle {
        align-self: flex-start;
        margin: 2px 0 10px;
        padding: 0;
        border: 0;
        background: none;
        color: #0369a1;
        font-size: 0.78rem;
        font-weight: 760;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        cursor: pointer;
      }

      .community-card__summary-toggle:hover,
      .community-card__summary-toggle:focus-visible {
        color: #0f172a;
        outline: none;
      }

      .community-card__summary-toggle[hidden] {
        display: none;
      }

      /* Expanded: the model panel becomes the scroll container. The text
         takes its natural height with the toggle right after it, the graph
         stays below (scrolled into), and the actions pin to the bottom so
         Open visualization is always reachable. */
      .community-card--summary-expanded [data-community-panel="model"] {
        overflow-y: auto;
      }

      .community-card--summary-expanded .community-card__summary {
        display: block;
        flex: 0 0 auto;
        min-height: 0;
        -webkit-line-clamp: initial;
      }

      .community-card--summary-expanded .community-card__embed,
      .community-card--summary-expanded .community-card__embed-grid {
        flex: 0 0 auto;
      }

      .community-card--summary-expanded .community-card__actions {
        position: sticky;
        bottom: 0;
        z-index: 1;
        padding: 10px 0 4px;
        background: linear-gradient(
          180deg,
          rgba(247, 249, 252, 0),
          rgba(247, 249, 252, 0.97) 45%
        );
      }

      .community-card__embed {
        display: flex;
        flex: 1 1 312px;
        align-items: center;
        justify-content: center;
        min-height: var(--community-card-embed-min-height);
        height: auto;
        padding: 10px;
        overflow: hidden;
        border: 1px solid #e5e7eb;
        border-radius: 16px;
        background:
          radial-gradient(circle at 50% 0%, rgba(136, 215, 255, 0.1), transparent 52%),
          linear-gradient(180deg, #f8fafc, #eef2f7);
        color: inherit;
        transition: transform 180ms ease, box-shadow 180ms ease;
      }

      .community-card__embed:hover,
      .community-card__embed:focus-visible {
        transform: translateY(-2px);
        outline: none;
      }

      .community-card__viewer {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        filter: drop-shadow(0 16px 26px rgba(15, 23, 42, 0.16));
        object-fit: contain;
        object-position: center center;
      }


      .community-card__embed-grid {

        flex: 1 1 312px;

        min-height: var(--community-card-embed-min-height);

        display: grid;

        grid-template-columns: 1fr 1fr;

        gap: 8px;

      }

      .community-card__embed-grid .community-card__embed {

        flex: none;

        min-height: 0;

        height: auto;

        padding: 6px;

        border-radius: 12px;

      }

      .community-card__embed-grid .community-card__viewer {

        border-radius: 10px;

        max-height: 158px;

        filter: drop-shadow(0 8px 14px rgba(15, 23, 42, 0.14));

      }

      .community-card__actions {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 14px;
      }

      .community-card__link {
        color: #0f172a;
        font-size: 0.78rem;
        font-weight: 760;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .community-card__link--muted {
        color: #64748b;
      }

      .community-card__link:hover,
      .community-card__link:focus-visible {
        color: #0369a1;
        outline: none;
      }

      .products-section {
        margin-top: 52px;
        display: grid;
        gap: 20px;
      }

      .products-section__lede {
        margin: 0;
        max-width: none;
        width: 100%;
        color: var(--muted-strong);
        font-size: 1rem;
        line-height: 1.7;
        text-align: center;
      }

      .products-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 18px;
      }

      .product-link {
        display: inline-flex;
        align-items: center;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 22px;
        border: 1px solid var(--stroke);
        background: rgba(255, 255, 255, 0.04);
        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
        transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
      }

      .product-link:hover,
      .product-link:focus-visible {
        transform: translateY(-3px);
        border-color: rgba(136, 215, 255, 0.26);
        box-shadow:
          0 24px 54px rgba(0, 0, 0, 0.28),
          0 0 0 1px rgba(136, 215, 255, 0.08);
        outline: none;
      }

      .product-link__mark {
        width: 44px;
        height: 44px;
        border-radius: 14px;
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
        flex: 0 0 auto;
      }

      .product-link__mark--deploy {
        background:
          radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.34), transparent 18%),
          linear-gradient(135deg, rgba(83, 135, 255, 0.94), rgba(120, 227, 142, 0.9));
      }

      .product-link__mark--hub {
        background:
          radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.34), transparent 18%),
          linear-gradient(135deg, rgba(255, 173, 74, 0.96), rgba(83, 226, 196, 0.88));
      }

      .product-link__mark--models {
        background:
          radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.34), transparent 18%),
          linear-gradient(135deg, rgba(255, 111, 145, 0.94), rgba(255, 209, 92, 0.9));
      }

      .product-link__text {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .product-link__name {
        font-family: "Inter", sans-serif;
        font-size: 1.04rem;
        font-weight: 700;
        letter-spacing: 0.03em;
        text-transform: lowercase;
      }

      .product-link__sub {
        color: var(--muted);
        font-size: 0.76rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .all-route {
        display: grid;
        gap: 24px;
        padding-top: 12px;
      }

      .all-route[hidden] {
        display: none;
      }

      .all-route__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
      }

      .all-route__intro {
        display: grid;
        gap: 10px;
        max-width: 760px;
      }

      .all-route__eyebrow {
        color: var(--muted);
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .all-route__title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: clamp(2.3rem, 4vw, 4.2rem);
        line-height: 0.94;
        letter-spacing: -0.04em;
      }

      .all-route__lede {
        margin: 0;
        color: var(--muted-strong);
        font-size: 1rem;
        line-height: 1.65;
      }

      .all-route__meta {
        color: var(--muted);
        font-size: 0.9rem;
        letter-spacing: 0.04em;
      }

      .all-route__meta strong {
        color: var(--text);
      }

      .all-grid {
        position: relative;
        column-count: 4;
        column-gap: 16px;
      }

      .all-grid--packed {
        column-count: unset;
        column-gap: 0;
      }

      .all-route__blocked {
        display: grid;
        gap: 10px;
        margin-top: 18px;
        padding: 16px 18px 18px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
      }

      .all-route__blocked[hidden] {
        display: none;
      }

      .all-route__blocked-title {
        margin: 0;
        color: var(--muted-strong);
        font-size: 0.88rem;
        letter-spacing: 0.06em;
        text-transform: uppercase;
      }

      .all-route__blocked-list {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .all-route__blocked-chip {
        display: inline-flex;
        align-items: center;
        min-height: 30px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(7, 13, 23, 0.82);
        color: var(--muted-strong);
        font-size: 0.82rem;
        line-height: 1.15;
        white-space: nowrap;
        transition: border-color 180ms ease, color 180ms ease, transform 180ms ease;
      }

      .all-route__blocked-chip:hover,
      .all-route__blocked-chip:focus-visible {
        color: var(--text);
        border-color: rgba(136, 215, 255, 0.22);
        transform: translateY(-1px);
        outline: none;
      }

      .top-route {
        display: grid;
        gap: 20px;
        padding-top: 12px;
      }

      .top-route[hidden] {
        display: none;
      }

      .top-route__head {
        display: flex;
        align-items: flex-end;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
      }

      .top-route__intro {
        display: grid;
        gap: 10px;
        max-width: 760px;
      }

      .top-route__eyebrow {
        color: var(--muted);
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .top-route__title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: clamp(2.1rem, 3.8vw, 4rem);
        line-height: 0.94;
        letter-spacing: -0.04em;
      }

      .top-route__lede {
        margin: 0;
        color: var(--muted-strong);
        font-size: 1rem;
        line-height: 1.65;
      }

      .top-route__meta {
        color: var(--muted);
        font-size: 0.9rem;
        letter-spacing: 0.04em;
      }

      .top-route__meta strong {
        color: var(--text);
      }

      .top-route__table-wrap {
        overflow-x: auto;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(7, 13, 23, 0.72);
        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.24);
      }

      .top-route__table {
        width: 100%;
        min-width: 1040px;
        border-collapse: collapse;
      }

      .top-route__table thead th {
        position: sticky;
        top: 0;
        z-index: 1;
        padding: 14px 14px;
        background: rgba(7, 13, 23, 0.94);
        color: var(--muted);
        font-size: 0.78rem;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        text-align: left;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .top-route__table tbody td {
        padding: 12px 14px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        vertical-align: top;
        font-size: 0.92rem;
      }

      .top-route__table tbody tr:last-child td {
        border-bottom: 0;
      }

      .top-route__rank {
        color: var(--muted);
        white-space: nowrap;
      }

      .top-route__model-link {
        color: var(--text);
        font-weight: 600;
        text-decoration: none;
      }

      .top-route__model-link:hover,
      .top-route__model-link:focus-visible {
        color: var(--sky);
        outline: none;
      }

      .top-route__downloads,
      .top-route__likes {
        white-space: nowrap;
      }

      .top-route__pipeline {
        color: var(--muted-strong);
        font-size: 0.86rem;
      }

      .top-route__status-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 108px;
        min-height: 30px;
        padding: 6px 10px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .top-route__status-badge--cached {
        background: rgba(156, 255, 99, 0.16);
        border-color: rgba(156, 255, 99, 0.34);
        color: #baff8f;
      }

      .top-route__status-badge--gated {
        background: rgba(255, 214, 93, 0.18);
        border-color: rgba(255, 214, 93, 0.34);
        color: #ffe28c;
      }

      .top-route__status-badge--trust_remote_code {
        background: rgba(255, 166, 82, 0.18);
        border-color: rgba(255, 166, 82, 0.34);
        color: #ffbf7d;
      }

      .top-route__status-badge--error {
        background: rgba(255, 111, 145, 0.16);
        border-color: rgba(255, 111, 145, 0.34);
        color: #ff9db4;
      }

      .top-route__status-badge--unchecked {
        background: rgba(141, 156, 182, 0.14);
        border-color: rgba(141, 156, 182, 0.26);
        color: #b9c5d8;
      }

      .top-route__reason {
        max-width: 44ch;
        color: var(--muted-strong);
        font-size: 0.84rem;
        line-height: 1.45;
        word-break: break-word;
      }

      .top-route__reason--empty {
        color: rgba(145, 160, 186, 0.72);
      }

      .top-route__links {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        white-space: nowrap;
      }

      .top-route__icon-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        border-radius: 12px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
        color: var(--muted-strong);
        transition: transform 180ms ease, border-color 180ms ease, color 180ms ease;
      }

      .top-route__icon-link:hover,
      .top-route__icon-link:focus-visible {
        transform: translateY(-1px);
        border-color: rgba(136, 215, 255, 0.26);
        color: var(--text);
        outline: none;
      }

      .top-route__icon-link svg {
        width: 18px;
        height: 18px;
      }

      .release-blog {
        display: grid;
        gap: 28px;
        min-width: 0;
        padding-top: 12px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
      }

      .release-blog[hidden] {
        display: none;
      }

      .release-blog__head {
        display: grid;
        gap: 22px;
        min-width: 0;
      }

      .release-blog__hero {
        display: grid;
        gap: 18px;
        min-width: 0;
        padding: 28px;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
          radial-gradient(circle at top left, rgba(136, 215, 255, 0.12), transparent 36%),
          linear-gradient(180deg, rgba(13, 21, 36, 0.94), rgba(7, 13, 23, 0.92));
        box-shadow: 0 26px 64px rgba(0, 0, 0, 0.28);
      }

      .release-blog__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: var(--muted);
        font-size: 0.8rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .release-blog__eyebrow::before {
        content: "";
        width: 44px;
        height: 1px;
        background: rgba(136, 215, 255, 0.42);
      }

      .release-blog__title {
        margin: 0;
        max-width: 14ch;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(2.8rem, 6vw, 5.6rem);
        line-height: 0.94;
        letter-spacing: -0.05em;
        overflow-wrap: anywhere;
      }

      .release-blog__lede {
        margin: 0;
        max-width: 72ch;
        color: var(--muted-strong);
        font-size: 1.04rem;
        line-height: 1.72;
        overflow-wrap: anywhere;
      }

      .release-blog__cta-row {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
      }

      .release-blog__summary-grid {
        display: grid;
        grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.85fr);
        gap: 18px;
        min-width: 0;
      }

      .release-blog__summary-card,
      .release-blog__quote {
        display: grid;
        gap: 12px;
        padding: 20px 22px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.04);
      }

      .release-blog__summary-label,
      .release-blog__quote-label {
        color: var(--muted);
        font-size: 0.76rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .release-blog__summary-text,
      .release-blog__quote-text {
        margin: 0;
        color: var(--text);
        font-size: 1rem;
        line-height: 1.68;
      }

      .release-blog__quote-text {
        font-family: "Space Grotesk", sans-serif;
        font-size: 1.22rem;
        line-height: 1.28;
        letter-spacing: -0.03em;
      }

      .release-blog__body {
        display: grid;
        gap: 22px;
        min-width: 0;
      }

      .release-blog__section {
        display: grid;
        gap: 16px;
        min-width: 0;
        padding: 26px 28px;
        border-radius: 28px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(7, 13, 23, 0.72);
        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.22);
      }

      .release-blog__section-title {
        margin: 0;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(1.5rem, 3vw, 2.2rem);
        line-height: 1.02;
        letter-spacing: -0.04em;
      }

      .release-blog__section p {
        margin: 0;
        color: var(--muted-strong);
        font-size: 0.98rem;
        line-height: 1.72;
        overflow-wrap: anywhere;
      }

      .release-blog__section strong {
        color: var(--text);
      }

      .release-blog__section a {
        color: var(--sky);
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 0.16em;
        overflow-wrap: anywhere;
        word-break: break-word;
      }

      .release-blog__section a:hover,
      .release-blog__section a:focus-visible {
        color: #b6ebff;
        outline: none;
      }

      .release-blog__feature-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 14px;
        min-width: 0;
      }

      .release-blog__feature-card {
        display: grid;
        gap: 10px;
        min-width: 0;
        padding: 18px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
      }

      .release-blog__feature-title {
        margin: 0;
        font-family: "Space Grotesk", sans-serif;
        font-size: 1.12rem;
        line-height: 1.08;
        letter-spacing: -0.03em;
        overflow-wrap: anywhere;
      }

      .release-blog__feature-copy {
        margin: 0;
        color: var(--muted-strong);
        font-size: 0.92rem;
        line-height: 1.6;
        overflow-wrap: anywhere;
      }

      .release-blog__media {
        display: grid;
        gap: 14px;
        min-width: 0;
        padding: 18px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
          radial-gradient(circle at top, rgba(136, 215, 255, 0.09), transparent 52%),
          rgba(255, 255, 255, 0.025);
      }

      .release-blog__media-frame {
        overflow: hidden;
        min-width: 0;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgb(15, 26, 32);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
      }

      .release-blog__media-frame--focus-crop {
        width: min(100%, 420px);
        margin: 0 auto;
      }

      .release-blog__media-video {
        display: block;
        width: 100%;
        height: auto;
      }

      .release-blog__media-caption {
        margin: 0;
        color: var(--muted);
        font-size: 0.9rem;
        line-height: 1.58;
        overflow-wrap: anywhere;
      }

      .release-blog__media-caption--focus-crop {
        max-width: 420px;
        margin: 0 auto;
      }

      .release-blog__list {
        margin: 0;
        padding-left: 1.1rem;
        color: var(--muted-strong);
        display: grid;
        gap: 10px;
        min-width: 0;
      }

      .release-blog__list li {
        line-height: 1.62;
        overflow-wrap: anywhere;
      }

      .release-blog__footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        color: var(--muted);
        font-size: 0.88rem;
      }

      @media (max-width: 860px) {
        .release-blog__hero,
        .release-blog__section {
          padding: 22px 20px;
          border-radius: 24px;
        }

        .release-blog__summary-grid {
          grid-template-columns: 1fr;
        }

        .release-blog__quote-text {
          font-size: 1.1rem;
        }
      }

      .viewer-route {
        display: grid;
        gap: 22px;
        padding-top: 12px;
      }

      .viewer-route[hidden] {
        display: none;
      }

      .viewer-route__head {
        position: relative;
        display: flex;
        /* The pill row must sit vertically CENTERED on the title text row, not
           bottom-aligned to the whole two-row intro (eyebrow + title). With
           flex-end the shorter pill row hugged the title's bottom and read as
           "sitting low"; center + the desktop margin-top nudge below (equal to
           the eyebrow region above the title) lands the pill centers on the
           title center regardless of the title font size. */
        align-items: center;
        justify-content: space-between;
        gap: 18px;
        flex-wrap: wrap;
      }

      .viewer-route__intro {
        flex: 1 1 560px;
        min-width: 0;
      }

      .viewer-route__intro-top {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 12px;
        min-width: 0;
        padding-right: min(42vw, 280px);
      }

      .viewer-route__intro-links {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: 14px;
        min-width: 0;
      }

      @media (min-width: 861px) {
        .viewer-route__intro-links {
          position: absolute;
          top: -0px;
          right: 0;
        }
        /* Center-align (above) puts the pills on the intro block's midline,
           which sits half the eyebrow row above the title midline. This
           margin-top (eyebrow line-height) shifts the pills' centering box down
           by exactly the eyebrow region so they center on the title text row.
           Desktop-only: on phones the pills wrap onto their own line and must
           not gain this offset. */
        .viewer-route__actions {
          margin-top: 15px;
        }
      }

      @media (max-width: 860px) {
        .viewer-route__intro-top {
          padding-right: 0;
          margin-bottom: 10px;
        }
        /* bookmark sits before the embed button on phones */
        .viewer-route__actions #viewer-bookmark-btn {
          order: 1;
        }
        .viewer-route__actions #viewer-model-card-btn {
          order: 2;
        }
        /* With the watch pill folded into the title chip, keep Embed aligned
           with the other compact mobile actions instead of letting its label
           protrude beyond the icon row. */
        .viewer-route__head.has-title-watch .viewer-route__actions #viewer-model-card-btn {
          width: 44px !important;
          min-width: 44px !important;
          height: 44px;
          padding: 0 !important;
          gap: 0 !important;
          justify-content: center;
        }
        .viewer-route__head.has-title-watch
          .viewer-route__actions
          #viewer-model-card-btn
          .pill__label--full,
        .viewer-route__head.has-title-watch
          .viewer-route__actions
          #viewer-model-card-btn
          .pill__label--short {
          display: none !important;
        }
      }

      .viewer-route__title-row {
        display: flex;
        align-items: flex-end;
        gap: 18px;
        min-width: 0;
        flex-wrap: wrap;
      }

      .viewer-route__eyebrow {
        display: inline-flex;
        align-items: center;
        flex: 0 0 auto;
        gap: 10px;
        color: var(--muted);
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .viewer-route__blog-link {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 0;
        border: 0;
        background: transparent;
        color: var(--muted);
        font: inherit;
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        white-space: nowrap;
      }

      .viewer-route__report-issue {
        display: none;
        align-items: center;
        justify-content: center;
        gap: 7px;
        padding: 0;
        border: 0;
        background: transparent;
        color: rgba(159, 173, 197, 0.78);
        font: inherit;
        font-size: 0.8rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        white-space: nowrap;
        transition:
          color 160ms ease,
          opacity 160ms ease,
          transform 160ms ease;
      }

      .viewer-route__report-issue.is-enabled {
        display: inline-flex;
      }

      .viewer-route__report-issue[hidden] {
        display: none;
      }

      .viewer-route__report-issue-icon {
        display: inline-flex;
        width: 15px;
        height: 15px;
        opacity: 0.76;
      }

      .viewer-route__report-issue-icon svg {
        display: block;
        width: 100%;
        height: 100%;
      }

      .viewer-route__report-issue:hover,
      .viewer-route__report-issue:focus-visible {
        color: var(--text);
        opacity: 1;
      }

      .viewer-route__report-issue:active {
        transform: translateY(1px);
      }

      .viewer-route__blog-link:hover,
      .viewer-route__blog-link:focus-visible {
        color: var(--text);
      }

      .viewer-route__eyebrow::before {
        content: "";
        flex: 0 0 8px;
        width: 8px;
        min-width: 8px;
        height: 8px;
        min-height: 8px;
        aspect-ratio: 1 / 1;
        border-radius: 999px;
        background: var(--sky);
        box-shadow: 0 0 0 8px rgba(136, 215, 255, 0.08);
      }

      .viewer-route__title {
        --viewer-route-title-max-height: clamp(54px, 8vh, 76px);
        --viewer-route-title-min-font-size: 16px;
        margin: 10px 0 10px;
        font-family: "Space Grotesk", sans-serif;
        font-size: var(--viewer-route-title-fit-size, clamp(2.8rem, 5vw, 4.8rem));
        line-height: var(--viewer-route-title-fit-line-height, 0.65);
        letter-spacing: -0.05em;
        max-width: none;
        max-height: var(--viewer-route-title-max-height);
        width: 100%;
        min-width: 0;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: normal;
      }

      .viewer-route__title-row .viewer-route__title {
        flex: 1 1 auto;
        width: auto;
        max-width: 100%;
      }

      .viewer-route__title-text {
        display: inline;
        min-width: 0;
      }

      /* The org segment doubles as the watch control, drawn on the prefix span
         itself so title typography and baseline stay consistent on all viewports. */
      .viewer-route__title-prefix--watch {
        white-space: nowrap;
        /* shallow enough that a wrapped title line below never kisses the chip */
        padding: 0.02em 0.2em 0.04em 0.2em;
        border: 1px solid rgba(255, 255, 255, 0.22);
        border-radius: 0.42em;
        background: rgba(255, 255, 255, 0.05);
        margin-right: 0.07em;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        transition:
          border-color 0.15s ease,
          background 0.15s ease,
          box-shadow 0.15s ease;
      }
      /* Applied by syncViewerTitleOrgWatch only when the chip's box would
         collide with the eyebrow above (short names -> huge title font):
         a line-height:1 inline-block trims the em-box's ascent/descent slack,
         which is what actually overlaps - the padding is already ~0. */
      .viewer-route__title-prefix--watch.is-compact-v {
        display: inline-block;
        line-height: 1;
        padding-top: 0;
        padding-bottom: 0.015em;
        vertical-align: baseline;
      }
      .viewer-route__title-prefix--watch::before {
        content: "";
        display: inline-block;
        width: 0.58em;
        height: 0.58em;
        margin-right: 0.2em;
        background-color: rgba(197, 208, 227, 0.92);
        -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 64C302.3 64 288 78.3 288 96L288 99.2C215 114 160 178.6 160 256L160 277.7C160 325.8 143.6 372.5 113.6 410.1L103.8 422.3C98.7 428.6 96 436.4 96 444.5C96 464.1 111.9 480 131.5 480L508.4 480C528 480 543.9 464.1 543.9 444.5C543.9 436.4 541.2 428.6 536.1 422.3L526.3 410.1C496.4 372.5 480 325.8 480 277.7L480 256C480 178.6 425 114 352 99.2L352 96C352 78.3 337.7 64 320 64zM258 528C265.1 555.6 290.2 576 320 576C349.8 576 374.9 555.6 382 528L258 528z'/%3E%3C/svg%3E") center / contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 640'%3E%3Cpath d='M320 64C302.3 64 288 78.3 288 96L288 99.2C215 114 160 178.6 160 256L160 277.7C160 325.8 143.6 372.5 113.6 410.1L103.8 422.3C98.7 428.6 96 436.4 96 444.5C96 464.1 111.9 480 131.5 480L508.4 480C528 480 543.9 464.1 543.9 444.5C543.9 436.4 541.2 428.6 536.1 422.3L526.3 410.1C496.4 372.5 480 325.8 480 277.7L480 256C480 178.6 425 114 352 99.2L352 96C352 78.3 337.7 64 320 64zM258 528C265.1 555.6 290.2 576 320 576C349.8 576 374.9 555.6 382 528L258 528z'/%3E%3C/svg%3E") center / contain no-repeat;
      }
      .viewer-route__title-prefix--watch:hover,
      .viewer-route__title-prefix--watch:focus-visible {
        border-color: rgba(255, 255, 255, 0.34);
        background: rgba(255, 255, 255, 0.09);
      }
      .viewer-route__title-prefix--watch:focus-visible {
        outline: none;
        box-shadow: 0 0 0 0.08em rgba(156, 255, 99, 0.25);
      }
      .viewer-route__title-prefix--watch.is-watching {
        border-color: rgba(156, 255, 99, 0.5);
        background: rgba(156, 255, 99, 0.08);
        /* org text joins the bell + roundrect in lime so the watching state
           reads as one unified chip */
        color: var(--lime, #9cff63);
      }
      .viewer-route__title-prefix--watch.is-watching::before {
        background-color: var(--lime, #9cff63);
      }
      .viewer-route__title-prefix--watch.is-watching:hover,
      .viewer-route__title-prefix--watch.is-watching:focus-visible {
        border-color: rgba(156, 255, 99, 0.72);
        background: rgba(156, 255, 99, 0.13);
      }
      /* the org chip replaces the actions-row watch pill */
      .viewer-route__head.has-title-watch .viewer-watch-button {
        display: none !important;
      }

      .viewer-route__title-prefix {
        color: #8d9cb6;
      }

      .viewer-route__mobile-selection-prefix {
        color: #8d9cb6;
      }

      .viewer-route__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        flex: 0 0 auto;
        /* mobile shrink-to-fit uses the row's max-content width: without a
           cap the 456px pill row expands the layout viewport to 482px on a
           390px phone and everything renders ~19% too small */
        max-width: calc(100vw - 16px);
      }

      .viewer-route__blog-pill {
        display: none;
      }

      .viewer-route__blog-pill::before {
        content: none;
      }

      .viewer-blog-float {
        position: fixed;
        left: var(--viewer-blog-float-left, 50%);
        bottom: calc(var(--viewer-blog-float-bottom, 16px) + env(safe-area-inset-bottom, 0px));
        right: auto;
        z-index: 48;
        display: none;
        align-items: center;
        min-height: 52px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        background: rgba(9, 15, 25, 0.92);
        box-shadow:
          0 18px 44px rgba(0, 0, 0, 0.34),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
        backdrop-filter: blur(18px);
        transform: translate(-50%, 12px);
        opacity: 0;
        pointer-events: none;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .page.route-viewer-family .viewer-blog-float,

      body.route-viewer.route-viewer-article .page.route-viewer .viewer-blog-float {

        display: inline-flex;
        bottom: calc(
          var(--viewer-blog-float-bottom, 16px) +
          env(safe-area-inset-bottom, 0px) +
          var(--viewer-blog-float-visual-offset, 0px)
        );
        width: auto;
        max-width: min(
          calc(var(--viewer-blog-float-visual-width, 100vw) - 40px),
          calc(100vw - 40px)
        );
        transform: translate(-50%, 12px);
      }

      .viewer-blog-float[hidden] {
        display: none !important;
      }

      .viewer-blog-float.is-visible {
        opacity: 1;
        transform: translate(-50%, 0);
        pointer-events: auto;
      }

      .viewer-blog-float.is-dismissing {
        opacity: 0;
        transform: translate(-50%, 12px);
        pointer-events: none;
      }

      .viewer-blog-float__cta,
      .viewer-blog-float__dismiss {
        border: 0;
        background: transparent;
        color: var(--text);
        font: inherit;
        cursor: pointer;
      }

      .viewer-blog-float__cta {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-height: 52px;
        padding: 0 18px 0 20px;
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.84rem;
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        white-space: nowrap;
      }

      .viewer-blog-float__cta::before {
        content: "";
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--sky);
        box-shadow: 0 0 0 7px rgba(136, 215, 255, 0.08);
      }

      .viewer-blog-float__dismiss {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        min-height: 52px;
        padding: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.08);
        color: rgba(225, 236, 249, 0.84);
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
      }

      .viewer-blog-float__cta:hover,
      .viewer-blog-float__cta:focus-visible,
      .viewer-blog-float__dismiss:hover,
      .viewer-blog-float__dismiss:focus-visible {
        color: #ffffff;
        outline: none;
      }

      .viewer-route__mobile-selection {
        display: none;
      }

      .viewer-route__mobile-backlink {
        display: none;
      }

      .viewer-route__mobile-backlink-state {
        position: absolute;
        inset: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-end;
        gap: 6px;
        opacity: 0;
        pointer-events: none;
        transform: translateY(6px);
        text-align: right;
        transition: opacity 180ms ease, transform 180ms ease;
      }

      .viewer-route__mobile-backlink-label {
        color: var(--muted);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .viewer-route__mobile-backlink-text {
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(1.02rem, 4.2vw, 1.26rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
        color: var(--text);
      }

      .viewer-route__mobile-backlink-state--back {
        inset: auto 0 auto 0;
        top: calc(56px - 0.52lh);
        height: 1.04lh;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
        gap: 0;
        padding-right: 12px;
      }

      .viewer-route__mobile-backlink-name {
        min-width: 0;
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(1.02rem, 4.2vw, 1.26rem);
        line-height: 1.04;
        letter-spacing: -0.03em;
        color: var(--text);
        white-space: normal;
        overflow: visible;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: normal;
      }

      .viewer-route__mobile-selection-name-row {
        display: flex;
        align-items: center;
        gap: 0.35em;
        max-width: 100%;
        min-width: 0;
      }

      .viewer-route__mobile-selection-name {
        min-width: 0;
      }

      .viewer-route__mobile-selection-copy {
        border: none;
        background: none;
        padding: 0.1em;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        color: #aeb8d3;
        cursor: pointer;
        border-radius: 6px;
        position: relative;
        transition:
          background 160ms ease,
          color 160ms ease;
      }

      .viewer-route__mobile-selection-copy[hidden] {
        display: none;
      }

      .viewer-route__mobile-selection-copy:hover,
      .viewer-route__mobile-selection-copy:focus-visible {
        background: rgba(255, 255, 255, 0.08);
        color: #ffffff;
      }

      .viewer-route__mobile-selection-copy:disabled {
        cursor: default;
        opacity: 0.68;
      }

      .viewer-route__mobile-selection-copy svg {
        width: 1em;
        height: 1em;
        display: block;
        fill: currentColor;
      }

      .viewer-route__mobile-selection-expand {
        margin-left: auto;
        border: 1px solid rgba(171, 189, 220, 0.22);
        background: rgba(255, 255, 255, 0.045);
        color: rgba(214, 228, 255, 0.88);
        padding: 0.42rem 0.74rem;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        font-size: 0.65rem;
        line-height: 1;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        cursor: pointer;
        transition:
          background 160ms ease,
          border-color 160ms ease,
          color 160ms ease,
          opacity 160ms ease;
      }

      .viewer-route__mobile-selection-expand[hidden] {
        display: none;
      }

      .viewer-route__mobile-selection-glossary {
        position: relative;
        margin-top: 4px;
      }

      /* Expanded state hides the short text, which left the collapse chevron
         alone on its own line above the detail. Mirror the collapsed layout
         instead: text column with the chevron centered in a right rail. */
      .viewer-route__mobile-selection-glossary.is-expanded .viewer-route__mobile-selection-glossary-toggle {
        position: absolute;
        top: 50%;
        right: 0;
        width: auto;
        transform: translateY(-50%);
      }

      .viewer-route__mobile-selection-glossary.is-expanded .viewer-route__mobile-selection-glossary-detail {
        margin-top: 0;
        padding-right: 34px;
      }

      .viewer-route__mobile-selection-glossary[hidden] {
        display: none !important;
      }

      .viewer-route__mobile-selection-glossary-toggle {
        display: flex;
        align-items: baseline;
        gap: 6px;
        width: 100%;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        text-align: left;
        color: var(--muted-strong, #c5d0e3);
        font: 12px/1.45 "Inter", sans-serif;
      }

      .viewer-route__mobile-selection-glossary-toggle strong {
        color: var(--text, #f5f8ff);
      }

      #viewer-mobile-selection-glossary-short {
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
        min-width: 0;
        flex: 1 1 auto;
      }

      .viewer-route__mobile-selection-glossary.is-expanded #viewer-mobile-selection-glossary-short {
        display: none;
      }

      .viewer-route__mobile-selection-glossary-chevron {
        flex: 0 0 auto;
        align-self: center;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 9px;
        background: rgba(255, 255, 255, 0.08);
        border: 1px solid rgba(255, 255, 255, 0.12);
        color: var(--muted-strong, #c5d0e3);
        font-size: 15px;
        line-height: 1;
        transition: transform 0.15s ease;
      }

      .viewer-route__mobile-selection-glossary.is-expanded .viewer-route__mobile-selection-glossary-chevron {
        transform: rotate(180deg);
      }

      .viewer-route__mobile-selection-glossary-detail {
        margin-top: 4px;
      }

      .viewer-route__mobile-selection-glossary-detail[hidden] {
        display: none !important;
      }

      .viewer-route__mobile-selection-glossary-line {
        margin: 0 0 4px;
        font-size: 12px;
        line-height: 1.5;
        color: var(--lime, #9cff63);
      }

      .viewer-route__mobile-selection-glossary-text {
        margin: 0 0 6px;
        font-size: 12px;
        line-height: 1.55;
        color: var(--muted-strong, #c5d0e3);
      }

      .viewer-route__mobile-selection-glossary-link {
        font-size: 12px;
        font-weight: 700;
        color: var(--sky, #88d7ff);
        text-decoration: none;
      }

      .viewer-route__mobile-selection-glossary-link:hover,
      .viewer-route__mobile-selection-glossary-link:focus-visible {
        text-decoration: underline;
      }

      .viewer-route__mobile-selection-expand:hover,
      .viewer-route__mobile-selection-expand:focus-visible {
        background: rgba(255, 255, 255, 0.085);
        border-color: rgba(203, 220, 255, 0.34);
        color: #ffffff;
      }

      .viewer-route__mobile-selection-expand:disabled {
        cursor: default;
        opacity: 0.62;
      }

      .viewer-route__copy-tooltip {
        position: fixed;
        background: #111422;
        border: 1px solid #2f354a;
        color: var(--base-content);
        border-radius: 8px;
        padding: 0.35rem 0.55rem;
        font-size: 0.85rem;
        line-height: 1.2;
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
        pointer-events: none;
        z-index: 4000;
        white-space: nowrap;
        opacity: 0;
        transition: opacity 0.15s ease;
      }

      .viewer-route__copy-tooltip.is-visible {
        opacity: 1;
      }

      .viewer-granularity {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(9, 15, 28, 0.58);
        color: var(--muted-strong);
      }

      .viewer-granularity[hidden] {
        display: none;
      }

      .viewer-granularity__label {
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        white-space: nowrap;
      }

      .viewer-granularity__value {
        min-width: 62px;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        text-align: center;
      }

      .viewer-granularity__slider {
        width: 92px;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        cursor: ew-resize;
      }

      .viewer-granularity__slider::-webkit-slider-runnable-track {
        height: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--stroke);
      }

      .viewer-granularity__slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        margin-top: -5px;
        border-radius: 999px;
        border: 1px solid rgba(128, 204, 206, 0.45);
        background: #80ccce;
        box-shadow: 0 0 0 3px rgba(128, 204, 206, 0.12);
      }

      .viewer-granularity__slider::-moz-range-track {
        height: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--stroke);
      }

      .viewer-granularity__slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 1px solid rgba(128, 204, 206, 0.45);
        background: #80ccce;
        box-shadow: 0 0 0 3px rgba(128, 204, 206, 0.12);
      }

      .viewer-family-size {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        padding: 8px 14px;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(9, 15, 28, 0.58);
        color: var(--muted-strong);
      }

      .viewer-family-size--desktop {
        display: none;
        align-self: center;
        min-width: min(340px, 48vw);
        padding: 12px 18px;
        gap: 14px;
      }

      .viewer-family-size[hidden] {
        display: none;
      }

      .viewer-family-size__label {
        font-size: 0.75rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: var(--muted);
        white-space: nowrap;
      }

      .viewer-family-size__value {
        min-width: 40px;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-align: center;
        text-transform: uppercase;
      }

      .viewer-family-size__slider {
        width: 124px;
        appearance: none;
        -webkit-appearance: none;
        background: transparent;
        cursor: ew-resize;
      }

      .viewer-family-size--desktop .viewer-family-size__slider {
        width: min(248px, 28vw);
      }

      .viewer-family-size--desktop .viewer-family-size__label {
        font-size: 0.8rem;
        letter-spacing: 0.16em;
      }

      .viewer-family-size--desktop .viewer-family-size__value {
        min-width: 118px;
        font-size: 0.9rem;
        letter-spacing: 0.12em;
        text-align: right;
      }

      .viewer-family-size--desktop .viewer-family-size__slider::-webkit-slider-runnable-track {
        height: 8px;
      }

      .viewer-family-size--desktop .viewer-family-size__slider::-webkit-slider-thumb {
        width: 18px;
        height: 18px;
        margin-top: -6px;
        box-shadow: 0 0 0 4px rgba(136, 215, 255, 0.12);
      }

      .viewer-family-size--desktop .viewer-family-size__slider::-moz-range-track {
        height: 8px;
      }

      .viewer-family-size--desktop .viewer-family-size__slider::-moz-range-thumb {
        width: 18px;
        height: 18px;
        box-shadow: 0 0 0 4px rgba(136, 215, 255, 0.12);
      }

      .viewer-family-size__slider::-webkit-slider-runnable-track {
        height: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--stroke);
      }

      .viewer-family-size__slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 14px;
        height: 14px;
        margin-top: -5px;
        border-radius: 999px;
        border: 1px solid rgba(136, 215, 255, 0.42);
        background: #88d7ff;
        box-shadow: 0 0 0 3px rgba(136, 215, 255, 0.12);
      }

      .viewer-family-size__slider::-moz-range-track {
        height: 6px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        border: 1px solid var(--stroke);
      }

      .viewer-family-size__slider::-moz-range-thumb {
        width: 14px;
        height: 14px;
        border-radius: 999px;
        border: 1px solid rgba(136, 215, 255, 0.42);
        background: #88d7ff;
        box-shadow: 0 0 0 3px rgba(136, 215, 255, 0.12);
      }

      .viewer-frame {
        --graph-issue-panel-gap: 14px;
        --graph-issue-panel-inset: 12px;
        --graph-issue-panel-width: clamp(320px, 30vw, 394px);
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: var(--preview-surface);
        box-shadow: var(--shadow);
        overflow: hidden;
      }

      .viewer-frame::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background-image:
          linear-gradient(rgba(255, 255, 255, 0.018) 1px, transparent 1px),
          linear-gradient(90deg, rgba(255, 255, 255, 0.018) 1px, transparent 1px);
        background-size: 56px 56px;
        mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), transparent 100%);
      }

      .viewer-frame__bar {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 16px;
        padding: 15px 18px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        background: linear-gradient(180deg, rgba(5, 9, 20, 0.38), rgba(5, 9, 20, 0.14));
        backdrop-filter: blur(18px) saturate(1.08);
      }

      body.route-viewer.route-viewer-article .viewer-frame__bar {
        display: none;
      }

      .viewer-frame__dots {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
      }

      .viewer-frame__dot {
        appearance: none;
        flex: 0 0 10px;
        width: 10px;
        min-width: 10px;
        height: 10px;
        min-height: 10px;
        aspect-ratio: 1 / 1;
        padding: 0;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.24);
      }

      .viewer-frame__dot--live {
        background: rgba(156, 255, 99, 0.88);
      }

      .viewer-frame__dot--fullscreen {
        position: relative;
        display: inline-grid;
        place-items: center;
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        margin: -10px -10px;
        background: transparent;
        cursor: pointer;
        z-index: 3;
      }

      .viewer-frame__dot--fullscreen::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: inherit;
        background: rgba(156, 255, 99, 0.88);
        transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
      }

      .viewer-frame__dot--fullscreen:hover,
      .viewer-frame__dot--fullscreen:focus-visible {
        outline: none;
      }

      .viewer-frame__dot--fullscreen:hover::before,
      .viewer-frame__dot--fullscreen:focus-visible::before {
        background: rgba(174, 255, 125, 0.98);
        box-shadow: 0 0 0 7px rgba(156, 255, 99, 0.15);
        transform: scale(1.08);
      }

      .viewer-frame__dot--laser {
        position: relative;
        display: inline-grid;
        place-items: center;
        flex: 0 0 30px;
        width: 30px;
        height: 30px;
        margin: -10px -10px;
        background: transparent;
        cursor: pointer;
        z-index: 2;
      }

      .viewer-frame__dot--laser::before {
        content: "";
        width: 10px;
        height: 10px;
        border-radius: inherit;
        background: rgba(255, 255, 255, 0.24);
        transition: background 150ms ease, box-shadow 150ms ease, transform 150ms ease;
      }

      .viewer-frame__dot--laser:hover,
      .viewer-frame__dot--laser:focus-visible {
        outline: none;
      }

      .viewer-frame__dot--laser:hover::before,
      .viewer-frame__dot--laser:focus-visible::before,
      .viewer-frame__dot--laser.viewer-frame__dot--laser-flash::before {
        background: rgba(255, 56, 76, 0.98);
        box-shadow: 0 0 0 7px rgba(255, 48, 64, 0.17), 0 0 20px rgba(255, 48, 64, 0.26);
        transform: scale(1.08);
      }

      .viewer-frame__demo-title {
        display: none;
        align-items: baseline;
        min-width: 0;
        max-width: min(64vw, 740px);
        color: rgba(245, 247, 251, 0.94);
        font-family: "Space Grotesk", sans-serif;
        font-size: clamp(1.12rem, 1.66vw, 1.5rem);
        font-weight: 700;
        line-height: 1;
        letter-spacing: -0.045em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      body.route-viewer.hfviewer-demo-mode-title .viewer-frame__demo-title {
        display: inline-flex;
      }

      html.hfviewer-space-embedded body.route-viewer .viewer-frame__demo-title {
        display: inline-flex;
        flex: 0 1 auto;
        max-width: min(34vw, 420px);
        margin-right: 4px;
        color: rgba(245, 247, 251, 0.94);
        font-family: Inter, system-ui, sans-serif;
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: -0.012em;
      }

      .viewer-frame__demo-title-text {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .viewer-frame__demo-title-prefix {
        color: #8d9cb6;
      }

      html.hfviewer-space-embedded .viewer-frame__demo-title-prefix {
        color: #8793a8;
        font-weight: 600;
      }

      .viewer-frame__tooltip {
        position: fixed;
        z-index: 2147483200;
        display: inline-flex;
        align-items: center;
        gap: 0;
        width: max-content;
        max-width: calc(100vw - 24px);
        padding: 0.5rem 0.68rem;
        border: 1px solid rgba(136, 215, 255, 0.2);
        border-radius: 12px;
        background:
          radial-gradient(circle at 18% 0%, rgba(156, 255, 99, 0.12), transparent 38%),
          rgba(14, 18, 31, 0.94);
        color: #f8fafc;
        font-size: 0.85rem;
        line-height: 1.2;
        box-shadow:
          0 16px 40px rgba(0, 0, 0, 0.4),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        opacity: 0;
        pointer-events: none;
        transform: translateY(4px);
        transition: opacity 130ms ease, transform 130ms ease;
        white-space: nowrap;
      }

      .viewer-frame__tooltip::after {
        content: "";
        position: absolute;
        left: var(--viewer-frame-tooltip-arrow-left, 50%);
        bottom: -6px;
        width: 10px;
        height: 10px;
        border-right: 1px solid rgba(136, 215, 255, 0.18);
        border-bottom: 1px solid rgba(136, 215, 255, 0.18);
        /* solid composite of the tooltip bg: a translucent beak painted over
           the translucent box showed as a dark diamond */
        background: rgb(15, 19, 32);
        /* outer half + a band past the diagonal so the beak covers the box
           border underneath - open notch instead of a line across the beak */
        clip-path: polygon(72% -2px, calc(100% + 2px) -2px, calc(100% + 2px) calc(100% + 2px), -2px calc(100% + 2px), -2px 72%);
        transform: translateX(-50%) rotate(45deg);
      }

      .viewer-frame__tooltip--below::after {
        top: -6px;
        bottom: auto;
        border: 0;
        border-left: 1px solid rgba(136, 215, 255, 0.18);
        border-top: 1px solid rgba(136, 215, 255, 0.18);
        clip-path: polygon(-2px -2px, calc(100% + 2px) -2px, calc(100% + 2px) 28%, 28% calc(100% + 2px), -2px calc(100% + 2px));
      }

      .viewer-frame__tooltip.is-visible {
        opacity: 1;
        transform: translateY(0);
      }

      .viewer-frame__tooltip-key {
        position: relative;
        isolation: isolate;
        display: inline-grid;
        place-items: center;
        width: 1.58em;
        min-width: 1.58em;
        height: 1.58em;
        margin: -0.04em 0 0;
        border: 1px solid rgba(255, 255, 255, 0.96);
        border-bottom-color: rgba(148, 163, 184, 0.78);
        border-radius: 0.45em;
        background:
          radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0) 48%),
          linear-gradient(180deg, #f8fafc 0%, #dbe3ee 62%, #b4c0ce 100%);
        box-shadow:
          inset 0 0.08em 0 rgba(255, 255, 255, 0.95),
          inset 0 -0.08em 0 rgba(15, 23, 42, 0.16),
          0 0.15em 0 #7c8797,
          0 0.19em 0.02em rgba(15, 23, 42, 0.7),
          0 0.34em 0.72em rgba(0, 0, 0, 0.38);
        color: #0f172a;
        font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas, monospace;
        font-size: 0.78em;
        font-weight: 900;
        line-height: 1;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.78);
        text-transform: uppercase;
        vertical-align: middle;
      }

      .viewer-frame__tooltip-key::before {
        content: "";
        position: absolute;
        inset: 0.13em 0.14em 0.26em;
        border-radius: 0.31em;
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.24) 54%, rgba(148, 163, 184, 0.1));
        box-shadow:
          inset 0 0.05em 0 rgba(255, 255, 255, 0.92),
          inset 0 -0.05em 0 rgba(100, 116, 139, 0.12);
        pointer-events: none;
      }

      .viewer-frame__tooltip-key span {
        position: relative;
        z-index: 1;
      }

      .viewer-frame:fullscreen {
        width: 100vw;
        height: 100vh;
        border-radius: 0;
        border: 0;
      }

      .viewer-frame:fullscreen .viewer-frame__canvas {
        height: calc(100vh - 48px);
        min-height: 0;
      }

      .viewer-frame:fullscreen .viewer-frame__iframe {
        height: 100%;
      }

      .viewer-frame__status {
        color: var(--muted-strong);
        font-size: 0.84rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .viewer-frame__bar .viewer-granularity {
        margin-left: auto;
      }

      /* Graph navigation history: back/forward pills immediately left of the
         granularity slider. The nav group takes over the auto margin so the
         pair (nav + granularity) stays right-aligned as one cluster. */
      .viewer-nav-history {
        display: inline-flex;
        align-items: center;
        gap: 6px;
      }

      .viewer-nav-history[hidden] {
        display: none;
      }

      .viewer-frame__bar .viewer-nav-history {
        margin-left: auto;
      }

      .viewer-frame__bar .viewer-nav-history:not([hidden]) + .viewer-granularity {
        margin-left: 0;
      }

      .viewer-nav-history__btn {
        appearance: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(9, 15, 28, 0.58);
        color: var(--muted-strong);
        cursor: pointer;
        transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
      }

      .viewer-nav-history__btn svg {
        width: 15px;
        height: 15px;
        display: block;
      }

      .viewer-nav-history__btn:hover,
      .viewer-nav-history__btn:focus-visible {
        background: rgba(19, 28, 48, 0.78);
        border-color: rgba(128, 204, 206, 0.35);
        color: var(--text);
      }

      .viewer-nav-history__btn:disabled,
      .viewer-nav-history__btn[aria-disabled="true"] {
        opacity: 0.32;
        pointer-events: none;
        cursor: default;
      }

      .viewer-frame__canvas {
        position: relative;
        min-height: min(76vh, 920px);
        height: min(76vh, 920px);
        overflow: hidden;
        background: var(--preview-surface);
        transition: margin-right 230ms ease;
      }

      .viewer-frame__static-preview {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: grid;
        place-items: center;
        overflow: hidden;
        pointer-events: none;
        background:
          radial-gradient(circle at 32% 24%, rgba(136, 215, 255, 0.16), transparent 36%),
          radial-gradient(circle at 74% 70%, rgba(95, 243, 149, 0.11), transparent 34%),
          var(--preview-surface);
        opacity: 0;
        transform: scale(1.015);
        transition:
          opacity 220ms ease,
          transform 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
      }

      .viewer-frame__static-preview[hidden] {
        display: none;
      }

      .viewer-frame__static-preview.is-visible {
        opacity: 1;
        transform: scale(1);
      }

      .viewer-frame__static-preview-image {
        display: block;
        width: 100%;
        height: 100%;
        padding: clamp(18px, 4.5vw, 54px);
        object-fit: contain;
        filter: drop-shadow(0 28px 54px rgba(0, 0, 0, 0.34));
      }

      .viewer-frame__static-preview-badge {
        position: absolute;
        left: 50%;
        bottom: clamp(18px, 4vw, 34px);
        transform: translateX(-50%);
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 9px 13px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 999px;
        background: rgba(6, 11, 23, 0.7);
        color: rgba(223, 233, 247, 0.9);
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
        box-shadow:
          0 14px 38px rgba(0, 0, 0, 0.32),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(16px) saturate(1.08);
      }

      /* real download progress along the badge's bottom edge while the
         viewer's boot assets stream in (--viewer-warmup-progress, set per
         chunk received) */
      .viewer-frame__static-preview-badge::after {
        content: "";
        position: absolute;
        left: 13px;
        right: 13px;
        bottom: 3px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(90deg, #74f0a3, #88d7ff);
        transform-origin: left center;
        transform: scaleX(var(--viewer-warmup-progress, 0));
        opacity: var(--viewer-warmup-bar-opacity, 0);
        transition: transform 200ms ease, opacity 200ms ease;
      }

      .viewer-frame__static-preview-badge::before {
        content: "";
        flex: 0 0 7px;
        width: 7px;
        min-width: 7px;
        height: 7px;
        min-height: 7px;
        aspect-ratio: 1 / 1;
        border-radius: 999px;
        background: #74f0a3;
        box-shadow: 0 0 12px rgba(116, 240, 163, 0.72);
      }

      .graph-issue-panel {
        position: absolute;
        top: 62px;
        right: var(--graph-issue-panel-inset);
        bottom: 12px;
        z-index: 8;
        display: flex;
        flex-direction: column;
        width: min(var(--graph-issue-panel-width), calc(100% - 24px));
        max-height: calc(100% - 74px);
        border: 1px solid rgba(255, 255, 255, 0.11);
        border-radius: 24px;
        background:
          linear-gradient(180deg, rgba(16, 24, 42, 0.9), rgba(8, 13, 25, 0.94)),
          rgba(8, 13, 25, 0.9);
        box-shadow: 0 30px 90px rgba(0, 0, 0, 0.44);
        color: var(--text);
        overflow: hidden;
        transform: translateX(calc(100% + 20px));
        opacity: 0;
        pointer-events: none;
        transition:
          transform 230ms ease,
          opacity 180ms ease;
        backdrop-filter: blur(22px) saturate(1.08);
      }

      @media (min-width: 861px) {
        .viewer-frame.viewer-frame--graph-issue-open .viewer-frame__canvas {
          margin-right: calc(
            min(var(--graph-issue-panel-width), calc(100% - 24px)) +
            var(--graph-issue-panel-gap) +
            var(--graph-issue-panel-inset)
          );
        }
      }

      .graph-issue-panel[hidden] {
        display: none;
      }

      .graph-issue-panel.is-open {
        transform: translateX(0);
        opacity: 1;
        pointer-events: auto;
      }

      .graph-issue-panel__header {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 14px;
        padding: 18px 18px 12px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }

      .graph-issue-panel__eyebrow {
        margin: 0 0 6px;
        color: var(--muted);
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .graph-issue-panel__title {
        margin: 0;
        font-family: "Space Grotesk", sans-serif;
        font-size: 1.1rem;
        line-height: 1.1;
        letter-spacing: -0.03em;
      }

      .graph-issue-panel__close {
        display: inline-grid;
        place-items: center;
        width: 32px;
        height: 32px;
        border: 1px solid rgba(255, 255, 255, 0.1);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.04);
        color: var(--muted);
        cursor: pointer;
      }

      .graph-issue-panel__close:hover,
      .graph-issue-panel__close:focus-visible {
        color: var(--text);
        border-color: rgba(136, 215, 255, 0.38);
      }

      .graph-issue-panel__body {
        display: grid;
        gap: 14px;
        padding: 16px 18px 18px;
        overflow: auto;
      }

      .graph-issue-panel__field {
        display: grid;
        gap: 7px;
      }

      .graph-issue-panel__label {
        color: var(--muted-strong);
        font-size: 0.75rem;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .graph-issue-panel__textarea,
      .graph-issue-panel__input {
        width: 100%;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        background: rgba(3, 7, 18, 0.5);
        color: var(--text);
        font: inherit;
        font-size: 0.92rem;
        outline: none;
        transition:
          border-color 160ms ease,
          box-shadow 160ms ease,
          background 160ms ease;
      }

      .graph-issue-panel__textarea {
        min-height: 122px;
        resize: vertical;
        padding: 13px 14px;
        line-height: 1.42;
      }

      .graph-issue-panel__input {
        padding: 12px 13px;
      }

      .graph-issue-panel__textarea:focus-visible,
      .graph-issue-panel__input:focus-visible {
        border-color: rgba(136, 215, 255, 0.52);
        box-shadow: 0 0 0 3px rgba(136, 215, 255, 0.12);
        background: rgba(5, 11, 25, 0.72);
      }

      .graph-issue-panel__hint {
        margin: 0;
        color: rgba(159, 173, 197, 0.82);
        font-size: 0.8rem;
        line-height: 1.42;
      }

      .graph-issue-panel__actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
      }

      .graph-issue-panel__button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 40px;
        padding: 10px 14px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        color: var(--text);
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.78rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
      }

      .graph-issue-panel__button:hover,
      .graph-issue-panel__button:focus-visible {
        border-color: rgba(136, 215, 255, 0.45);
        background: rgba(136, 215, 255, 0.1);
      }

      .graph-issue-panel__button[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
      }

      .graph-issue-panel__button--primary {
        border-color: rgba(136, 215, 255, 0.5);
        background: rgba(136, 215, 255, 0.15);
      }

      .graph-issue-panel__attachments {
        display: grid;
        gap: 10px;
      }

      .graph-issue-panel__attachment {
        display: grid;
        grid-template-columns: 82px 1fr auto;
        gap: 10px;
        align-items: center;
        padding: 8px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.04);
      }

      .graph-issue-panel__attachment img {
        display: block;
        width: 82px;
        height: 52px;
        object-fit: cover;
        border-radius: 10px;
        background: rgba(0, 0, 0, 0.26);
      }

      .graph-issue-panel__attachment-title {
        margin: 0;
        font-size: 0.86rem;
      }

      .graph-issue-panel__attachment-meta {
        margin: 3px 0 0;
        color: var(--muted);
        font-size: 0.72rem;
      }

      .graph-issue-panel__attachment-remove {
        display: inline-grid;
        place-items: center;
        width: 28px;
        height: 28px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.06);
        color: var(--muted);
        cursor: pointer;
      }

      .graph-issue-panel__checkbox {
        display: grid;
        grid-template-columns: auto 1fr;
        gap: 9px;
        align-items: start;
        color: rgba(194, 204, 223, 0.88);
        font-size: 0.78rem;
        line-height: 1.35;
      }

      .graph-issue-panel__checkbox input {
        width: 17px;
        height: 17px;
        margin: 1px 0 0;
        accent-color: var(--sky);
      }

      .graph-issue-panel__checkbox a {
        color: var(--sky);
      }

      .graph-issue-panel__feedback {
        margin: 0;
        min-height: 18px;
        color: var(--muted-strong);
        font-size: 0.8rem;
      }

      .graph-issue-panel__feedback.is-error {
        color: #ffb6b6;
      }

      .graph-issue-panel__feedback.is-success {
        color: #b7f7b8;
      }

      .graph-issue-capture-overlay {
        position: absolute;
        inset: 0;
        z-index: 10;
        cursor: crosshair;
        background: rgba(3, 7, 18, 0.28);
        user-select: none;
      }

      .graph-issue-capture-overlay[hidden] {
        display: none;
      }

      .graph-issue-capture-overlay::before {
        content: "Drag to capture the incorrect area";
        position: absolute;
        top: 18px;
        left: 50%;
        transform: translateX(-50%);
        padding: 8px 12px;
        border: 1px solid rgba(136, 215, 255, 0.22);
        border-radius: 999px;
        background: rgba(5, 9, 20, 0.78);
        color: var(--text);
        font-family: "Space Grotesk", sans-serif;
        font-size: 0.76rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .graph-issue-capture-box {
        position: absolute;
        border: 1px solid rgba(136, 215, 255, 0.95);
        border-radius: 10px;
        background: rgba(136, 215, 255, 0.12);
        box-shadow:
          0 0 0 9999px rgba(0, 0, 0, 0.24),
          0 18px 50px rgba(0, 0, 0, 0.28);
        pointer-events: none;
      }

      @media (max-width: 860px) {
        .viewer-route__report-issue,
        .viewer-frame .graph-issue-panel,
        .viewer-frame .graph-issue-capture-overlay {
          display: none !important;
        }
      }

      .hf-article-editor__preview .graph-issue-panel--article {
        top: 12px;
        right: 12px;
        bottom: 12px;
        z-index: 12;
        width: min(390px, calc(100% - 24px));
        max-height: calc(100% - 24px);
        transform: translateX(calc(100% + 18px));
      }

      .hf-article-editor__preview .graph-issue-panel--article.is-open {
        transform: translateX(0);
      }

      @media (min-width: 981px) {
        .hf-article-page.is-preview-graph-detail-open .hf-article-editor__preview .graph-issue-panel--article {
          position: relative;
          top: auto;
          right: auto;
          bottom: auto;
          grid-column: 2;
          grid-row: 1 / 3;
          z-index: 4;
          align-self: stretch;
          width: 100%;
          max-width: none;
          height: 100%;
          max-height: none;
          transform: translateX(18px);
        }

        .hf-article-page.is-preview-graph-detail-open .hf-article-editor__preview .graph-issue-panel--article.is-open {
          transform: translateX(0);
        }
      }

      .hf-article-editor__preview .graph-issue-capture-overlay--article {
        inset: calc(var(--hf-article-preview-head-height, 92px) + 18px) 12px 12px 12px;
        z-index: 11;
        border-radius: 20px;
        overflow: hidden;
      }

      @media (max-width: 860px) {
        .hf-article-editor__preview .graph-issue-panel--article {
          width: calc(100% - 24px);
        }
      }

      .viewer-frame__placeholder {
        position: absolute;
        inset: 0;
        z-index: 2;
        display: grid;
        align-content: center;
        justify-items: center;
        gap: 18px;
        padding: 24px;
        background:
          linear-gradient(180deg, rgba(5, 9, 20, 0.4), rgba(5, 9, 20, 0.16)),
          var(--preview-surface);
        text-align: center;
      }

      .viewer-frame__placeholder[hidden] {
        display: none;
      }

      .viewer-frame__placeholder-body {
        display: grid;
        gap: 8px;
        width: min(560px, 100%);
        padding: 28px 30px;
        border-radius: 24px;
        border: 1px solid rgba(255, 255, 255, 0.09);
        background: rgba(10, 18, 31, 0.58);
        box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
        backdrop-filter: blur(18px) saturate(1.05);
        transition:
          gap 240ms ease,
          padding 240ms ease,
          opacity 220ms ease,
          transform 220ms ease;
      }

      .viewer-frame--static-preview-active .viewer-frame__placeholder {
        background: linear-gradient(180deg, rgba(5, 9, 20, 0.18), rgba(5, 9, 20, 0.05));
      }

      .viewer-frame--static-preview-active
        .viewer-frame__placeholder-body:not(.viewer-frame__placeholder-body--notify) {
        opacity: 0;
        transform: translateY(10px);
        pointer-events: none;
      }

      .viewer-frame__placeholder-copy {
        display: grid;
        gap: 0;
      }

      .viewer-frame__placeholder-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: clamp(1.35rem, 3vw, 1.8rem);
        font-weight: 700;
        letter-spacing: -0.03em;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        max-height: 96px;
        transition:
          opacity 220ms ease,
          transform 220ms ease,
          max-height 220ms ease,
          margin 220ms ease;
      }

      .viewer-frame__placeholder-cta {
        margin-top: 16px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
      }
      .viewer-frame__placeholder-cta-lead {
        margin: 0;
        color: var(--muted, #91a0ba);
        font-size: 0.88rem;
        line-height: 1.5;
      }
      .viewer-frame__placeholder-text {
        margin: 0;
        color: var(--muted-strong);
        font-size: 0.95rem;
        line-height: 1.55;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        max-height: 160px;
        transition:
          opacity 220ms ease,
          transform 220ms ease,
          max-height 220ms ease,
          margin 220ms ease;
      }

      .viewer-frame__notify {
        display: grid;
        gap: 12px;
        text-align: left;
        overflow: visible;
        opacity: 0;
        transform: translateY(10px);
        max-height: 0;
        pointer-events: none;
        transition:
          opacity 220ms ease,
          transform 220ms ease,
          max-height 220ms ease,
          margin 220ms ease;
      }

      .viewer-frame__placeholder-body--notify .viewer-frame__placeholder-text {
        opacity: 0;
        transform: translateY(-10px);
        max-height: 0;
        margin: 0;
        pointer-events: none;
      }

      .viewer-frame__placeholder-body--notify .viewer-frame__notify {
        opacity: 1;
        transform: translateY(0);
        max-height: 820px;
        pointer-events: auto;
      }

      .viewer-frame__notify-label {
        margin: 0;
        color: var(--muted-strong);
        font-size: 0.92rem;
        line-height: 1.45;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        max-height: 88px;
        transition:
          opacity 220ms ease,
          transform 220ms ease,
          max-height 220ms ease,
          margin 220ms ease;
      }

      .viewer-frame__notify-form {
        display: grid;
        gap: 12px;
        padding: 3px;
        margin: -3px;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        max-height: 180px;
        transition:
          opacity 220ms ease,
          transform 220ms ease,
          max-height 220ms ease,
          margin 220ms ease,
          padding 220ms ease;
      }

      .viewer-frame__notify-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        max-height: 54px;
        transition:
          opacity 220ms ease,
          transform 220ms ease,
          max-height 220ms ease,
          margin 220ms ease;
      }

      .viewer-frame__notify-input {
        min-width: 0;
        height: 46px;
        padding: 0 14px;
        border-radius: 14px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: rgba(5, 9, 20, 0.5);
        color: var(--text);
        font: inherit;
        opacity: 1;
        transition:
          opacity 180ms ease,
          height 220ms ease,
          padding 220ms ease,
          border-color 220ms ease;
      }

      .viewer-frame__notify-input::placeholder {
        color: rgba(197, 208, 227, 0.58);
      }

      .viewer-frame__notify-input:focus-visible {
        outline: 2px solid rgba(136, 215, 255, 0.42);
        outline-offset: 2px;
      }

      .viewer-frame__notify-button {
        height: 46px;
        padding: 0 16px;
        border: 0;
        border-radius: 14px;
        background: linear-gradient(135deg, rgba(136, 215, 255, 0.92), rgba(156, 255, 99, 0.88));
        color: var(--ink);
        font: inherit;
        font-weight: 700;
        cursor: pointer;
        opacity: 1;
        box-shadow: 0 0 0 rgba(136, 215, 255, 0);
        transition:
          opacity 180ms ease,
          height 220ms ease,
          padding 220ms ease,
          transform 140ms ease,
          box-shadow 140ms ease,
          filter 140ms ease;
      }

      .viewer-frame__notify-button:hover:not([disabled]),
      .viewer-frame__notify-button:focus-visible:not([disabled]) {
        transform: translateY(-1px);
        filter: brightness(1.04) saturate(1.05);
        box-shadow: 0 14px 34px rgba(136, 215, 255, 0.2), 0 10px 26px rgba(156, 255, 99, 0.14);
        outline: none;
      }

      .viewer-frame__notify-button[disabled] {
        cursor: wait;
        opacity: 0.7;
      }

      .viewer-frame__notify--hf-auth .viewer-frame__notify-row {
        grid-template-columns: minmax(0, 1fr);
      }

      .viewer-frame__notify--hf-auth .viewer-frame__notify-input,
      .viewer-frame__notify--hf-auth .viewer-frame__notify-checkbox {
        display: none;
      }

      .viewer-frame__notify--hf-auth .viewer-frame__notify-button {
        width: 100%;
      }

      @media (max-width: 560px) {
        .viewer-frame__placeholder-body--notify {
          gap: 6px;
          padding: 18px 18px;
        }

        .viewer-frame__placeholder-body--notify .viewer-frame__placeholder-title {
          font-size: clamp(1.12rem, 6.2vw, 1.42rem);
          line-height: 1.05;
        }

        .viewer-frame__placeholder-body--notify .viewer-frame__notify {
          gap: 8px;
        }

        .viewer-frame__placeholder-body--notify .viewer-frame__notify-label {
          font-size: 0.82rem;
          line-height: 1.34;
          max-height: 68px;
        }

        .viewer-frame__placeholder-body--notify .viewer-frame__notify-form {
          gap: 8px;
        }

        .viewer-frame__notify-row {
          grid-template-columns: minmax(0, 1fr);
          gap: 6px;
          max-height: 90px;
        }

        .viewer-frame__notify-input,
        .viewer-frame__notify-button {
          height: 40px;
          font-size: 0.82rem;
        }

        .viewer-frame__notify-button {
          width: 100%;
          padding: 0 12px;
          white-space: nowrap;
        }

        .viewer-frame__placeholder-body--notify .viewer-frame__notify-checkbox {
          font-size: 0.72rem;
          line-height: 1.28;
          max-height: 80px;
        }
      }

      @media (max-width: 560px) and (max-height: 720px) {
        .viewer-frame__placeholder-body--notify {
          padding: 14px 16px;
        }

        .viewer-frame__placeholder-body--notify .viewer-frame__notify-label {
          font-size: 0.78rem;
          line-height: 1.28;
          max-height: 60px;
        }

        .viewer-frame__notify-row {
          max-height: 82px;
        }

        .viewer-frame__notify-input,
        .viewer-frame__notify-button {
          height: 37px;
          font-size: 0.78rem;
        }

        .viewer-frame__placeholder-body--notify .viewer-frame__notify-checkbox {
          font-size: 0.68rem;
          line-height: 1.22;
          max-height: 70px;
        }
      }

      .viewer-frame__notify-feedback {
        margin: 0;
        color: var(--muted-strong);
        font-size: 0.9rem;
        line-height: 1.45;
        overflow-wrap: anywhere;
        transform: translateY(0);
        transition:
          font-size 240ms ease,
          line-height 240ms ease,
          transform 240ms ease;
      }

      .viewer-frame__notify-checkbox {
        color: rgba(197, 208, 227, 0.82);
        font-size: 0.84rem;
        line-height: 1.45;
        overflow: hidden;
        opacity: 1;
        transform: translateY(0);
        max-height: 96px;
        transition:
          opacity 220ms ease,
          transform 220ms ease,
          max-height 220ms ease,
          margin 220ms ease;
      }

      .viewer-frame__notify-checkbox a {
        color: #88d7ff;
        text-decoration: none;
      }

      .viewer-frame__notify-checkbox a:hover,
      .viewer-frame__notify-checkbox a:focus-visible {
        text-decoration: underline;
        text-underline-offset: 0.2em;
      }

      .viewer-frame__notify-checkbox {
        display: grid;
        grid-template-columns: 22px minmax(0, 1fr);
        gap: 10px;
        align-items: start;
        cursor: pointer;
      }

      .viewer-frame__notify--submitted .viewer-frame__notify-label,
      .viewer-frame__notify--submitted .viewer-frame__notify-checkbox,
      .viewer-frame__notify--submitted .viewer-frame__notify-row,
      .viewer-frame__notify--related-visible .viewer-frame__notify-label,
      .viewer-frame__notify--related-visible .viewer-frame__notify-checkbox,
      .viewer-frame__notify--related-visible .viewer-frame__notify-row {
        opacity: 0;
        transform: translateY(-8px);
        max-height: 0;
        margin: 0;
        pointer-events: none;
      }

      .viewer-frame__notify--submitted .viewer-frame__notify-form,
      .viewer-frame__notify--related-visible .viewer-frame__notify-form {
        gap: 0;
      }

      .viewer-frame__placeholder-body--related-visible
        .viewer-frame__placeholder-title,
      .viewer-frame__placeholder-body--related-visible
        .viewer-frame__placeholder-text,
      .viewer-frame__notify--related-visible .viewer-frame__notify-form {
        opacity: 0;
        transform: translateY(-8px);
        max-height: 0;
        margin: 0;
        padding: 0;
        pointer-events: none;
      }

      .viewer-frame__notify-checkbox input {
        appearance: none;
        width: 22px;
        height: 22px;
        margin: 1px 0 0;
        border-radius: 7px;
        border: 1px solid rgba(197, 208, 227, 0.72);
        background: rgba(5, 9, 20, 0.48);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }

      .viewer-frame__notify-checkbox input:checked {
        border-color: rgba(136, 215, 255, 0.9);
        background:
          linear-gradient(135deg, rgba(136, 215, 255, 0.94), rgba(156, 255, 99, 0.9));
      }

      .viewer-frame__notify-checkbox input:checked::after {
        content: "";
        display: block;
        width: 10px;
        height: 6px;
        margin: 5px auto 0;
        border-left: 2px solid rgba(1, 6, 12, 0.9);
        border-bottom: 2px solid rgba(1, 6, 12, 0.9);
        transform: rotate(-45deg);
      }

      .viewer-frame__notify-checkbox input:focus-visible {
        outline: 2px solid rgba(136, 215, 255, 0.42);
        outline-offset: 2px;
      }

      .viewer-frame__notify-feedback--error {
        color: #ffb2b2;
      }

      .viewer-frame__related {
        display: grid;
        gap: 12px;
        width: min(100%, 840px);
        margin: 0 auto;
        text-align: left;
        opacity: 0;
        max-height: 0;
        transform: translateY(18px) scale(0.985);
        overflow: hidden;
        filter: blur(6px);
        pointer-events: none;
        transition:
          max-height 640ms cubic-bezier(0.16, 1, 0.3, 1),
          opacity 420ms ease,
          transform 640ms cubic-bezier(0.16, 1, 0.3, 1),
          filter 520ms ease;
      }

      .viewer-frame__related.is-visible {
        max-height: 520px;
        opacity: 1;
        transform: translateY(0) scale(1);
        overflow: visible;
        filter: blur(0);
        pointer-events: auto;
      }

      .viewer-frame__related-title {
        margin: 0;
        color: rgba(232, 240, 255, 0.94);
        font-size: 0.88rem;
        font-weight: 760;
        letter-spacing: -0.01em;
      }

      .viewer-frame__related-title-mobile {
        display: none;
      }

      .viewer-frame__related-rail {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: clamp(238px, 31vw, 270px);
        gap: 12px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        padding: 2px 2px 10px;
        margin: 0 -2px -6px;
        scrollbar-width: thin;
        scrollbar-color: rgba(96, 143, 186, 0.42) rgba(8, 14, 28, 0.32);
      }

      .viewer-frame__related-rail::-webkit-scrollbar {
        height: 8px;
      }

      .viewer-frame__related-rail::-webkit-scrollbar-track {
        border-radius: 999px;
        background: rgba(8, 14, 28, 0.32);
      }

      .viewer-frame__related-rail::-webkit-scrollbar-thumb {
        border-radius: 999px;
        background: linear-gradient(90deg, rgba(89, 132, 178, 0.5), rgba(122, 160, 206, 0.42));
      }

      @media (min-width: 641px) {
        .viewer-frame__placeholder-body--related-visible .viewer-frame__notify {
          gap: 0;
        }

        .viewer-frame__placeholder-body--related-visible .viewer-frame__notify-label,
        .viewer-frame__placeholder-body--related-visible .viewer-frame__notify-form {
          opacity: 0;
          transform: translateY(-8px);
          max-height: 0;
          margin: 0;
          padding: 0;
          pointer-events: none;
        }

        .viewer-frame__related-rail.viewer-frame__related-rail--static {
          grid-auto-flow: row;
          grid-auto-columns: initial;
          grid-template-columns: repeat(
            var(--viewer-related-card-count, 3),
            minmax(0, min(270px, calc((100% - 24px) / 3)))
          );
          justify-content: center;
          overflow-x: visible;
          overscroll-behavior-x: auto;
          scroll-snap-type: none;
          padding-inline: 0;
          margin-inline: 0;
          scrollbar-width: auto;
        }

        .viewer-frame__related-rail.viewer-frame__related-rail--static .viewer-frame__related-card {
          scroll-snap-align: unset;
        }
      }

      .viewer-frame__related-card {
        display: grid;
        grid-template-rows: minmax(0, 1fr) auto;
        gap: 8px;
        min-width: 0;
        min-height: 234px;
        padding: 9px;
        border: 1px solid rgba(136, 215, 255, 0.14);
        border-radius: 18px;
        background:
          radial-gradient(circle at 20% 0%, rgba(136, 215, 255, 0.12), transparent 40%),
          linear-gradient(180deg, rgba(9, 16, 31, 0.94), rgba(5, 9, 20, 0.96));
        color: inherit;
        box-shadow:
          0 18px 40px rgba(0, 0, 0, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.04);
        cursor: pointer;
        text-align: left;
        scroll-snap-align: start;
        opacity: 0;
        transform: translateY(18px) scale(0.975);
        transition:
          opacity 460ms ease,
          transform 640ms cubic-bezier(0.16, 1, 0.3, 1),
          border-color 180ms ease,
          box-shadow 180ms ease;
      }

      .viewer-frame__related.is-visible .viewer-frame__related-card {
        opacity: 1;
        transform: translateY(0) scale(1);
      }

      .viewer-frame__related-card:hover,
      .viewer-frame__related-card:focus-visible {
        transform: translateY(-2px) scale(1);
        border-color: rgba(136, 215, 255, 0.28);
        box-shadow:
          0 22px 48px rgba(0, 0, 0, 0.3),
          0 0 0 1px rgba(156, 255, 99, 0.08),
          inset 0 1px 0 rgba(255, 255, 255, 0.06);
      }

      .viewer-frame__related-art {
        position: relative;
        display: grid;
        place-items: center;
        min-width: 0;
        min-height: 92px;
        max-height: 180px;
        height: 100%;
        overflow: hidden;
        border-radius: 13px;
        background: var(--preview-surface);
      }

      .viewer-frame__related-art--pending::after {
        content: "Loading...";
        position: absolute;
        inset: 0;
        display: grid;
        place-items: center;
        color: rgba(197, 208, 227, 0.66);
        font-size: 0.72rem;
        letter-spacing: 0.02em;
        text-transform: uppercase;
      }

      .viewer-frame__related-image,
      .viewer-frame__related-preview-svg,
      .viewer-frame__related-preview-svg > svg {
        display: block;
        width: 100%;
        height: auto;
        min-height: 92px;
        max-height: 180px;
      }

      .viewer-frame__related-image {
        object-fit: contain;
        object-position: center center;
        min-width: 0;
        max-width: 100%;
      }

      .viewer-frame__related-image[hidden] {
        display: none;
      }

      .viewer-frame__related-meta {
        display: grid;
        gap: 3px;
        align-self: end;
      }

      .viewer-frame__related-head {
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr);
        align-items: center;
        gap: 8px;
        min-width: 0;
      }

      .viewer-frame__related-avatar,
      .viewer-frame__related-avatar-fallback {
        width: 26px;
        height: 26px;
        border-radius: 999px;
        flex: 0 0 auto;
      }

      .viewer-frame__related-avatar {
        display: block;
        object-fit: cover;
        background: rgba(255, 255, 255, 0.08);
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.52),
          0 0 0 3px rgba(136, 215, 255, 0.14);
      }

      .viewer-frame__related-avatar[hidden] {
        display: none;
      }

      .viewer-frame__related-avatar-fallback {
        display: grid;
        place-items: center;
        color: rgba(238, 246, 255, 0.86);
        font-size: 0.72rem;
        font-weight: 820;
        background:
          radial-gradient(circle at 30% 20%, rgba(156, 255, 99, 0.42), transparent 44%),
          linear-gradient(135deg, rgba(25, 74, 64, 0.92), rgba(8, 22, 38, 0.96));
        box-shadow:
          0 0 0 1px rgba(255, 255, 255, 0.42),
          0 0 0 3px rgba(136, 215, 255, 0.12);
      }

      .viewer-frame__related-avatar-fallback[hidden] {
        display: none;
      }

      .viewer-frame__related-copy {
        display: grid;
        gap: 3px;
        min-width: 0;
      }

      .viewer-frame__related-repo {
        display: block;
        min-width: 0;
        color: rgba(238, 246, 255, 0.96);
        font-size: 0.8rem;
        font-weight: 760;
        letter-spacing: -0.025em;
        line-height: 1.2;
        overflow-wrap: anywhere;
      }

      .viewer-frame__related-owner {
        color: #8d9cb6;
      }

      .viewer-frame__related-repo-text {
        color: rgba(238, 246, 255, 0.96);
      }

      .viewer-frame__related-sub {
        color: rgba(197, 208, 227, 0.72);
        font-size: 0.72rem;
        line-height: 1.35;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      @media (max-width: 640px) {
        .viewer-frame__related {
          width: 100%;
          gap: 9px;
          margin-top: 2px;
        }

        .viewer-frame__related.is-visible {
          max-height: 430px;
        }

        .viewer-frame__related-title {
          font-size: 0.82rem;
          line-height: 1.2;
        }

        .viewer-frame__related-title-desktop {
          display: none;
        }

        .viewer-frame__related-title-mobile {
          display: inline;
        }

        .viewer-frame__related-rail {
          grid-auto-columns: minmax(216px, 72vw);
          gap: 10px;
          padding-bottom: 4px;
          margin-bottom: 0;
        }

        .viewer-frame__related-card {
          min-height: 0;
          height: 260px;
          gap: 6px;
          padding: 8px;
          border-radius: 16px;
        }

        .viewer-frame__related-art {
          min-height: 106px;
          max-height: 194px;
          border-radius: 12px;
        }

        .viewer-frame__related-image,
        .viewer-frame__related-preview-svg,
        .viewer-frame__related-preview-svg > svg {
          min-height: 106px;
          max-height: 194px;
        }

        .viewer-frame__related-head {
          grid-template-columns: 22px minmax(0, 1fr);
          gap: 7px;
        }

        .viewer-frame__related-avatar,
        .viewer-frame__related-avatar-fallback {
          width: 22px;
          height: 22px;
        }

        .viewer-frame__related-copy {
          gap: 2px;
        }

        .viewer-frame__related-repo {
          font-size: 0.74rem;
          line-height: 1.15;
        }

        .viewer-frame__related-sub {
          font-size: 0.66rem;
          line-height: 1.25;
        }

        .viewer-frame__notify-row {
          grid-template-columns: 1fr;
          max-height: 90px;
        }

        .viewer-frame--notify-active .viewer-frame__placeholder {
          place-items: start center;
          padding: clamp(0px, 1.2dvh, 10px) 16px 14px;
        }

        .viewer-frame--notify-active .viewer-frame__placeholder-body {
          gap: 6px;
          padding: 22px 20px;
        }

        .viewer-frame--notify-active .viewer-frame__placeholder-title {
          font-size: clamp(1.2rem, 7vw, 1.48rem);
        }

        .viewer-frame__placeholder-body--related-visible
          .viewer-frame__placeholder-title {
          display: none;
        }

        .viewer-frame__placeholder-body--related-visible {
          display: none;
        }

        .viewer-frame--notify-active .viewer-frame__placeholder:has(.viewer-frame__related.is-visible) {
          gap: 0;
          padding-top: clamp(8px, 2dvh, 16px);
        }

        .viewer-frame--notify-active .viewer-frame__notify {
          gap: 10px;
        }

        .viewer-frame--notify-active .viewer-frame__notify-label {
          font-size: 0.84rem;
          line-height: 1.4;
        }

        .viewer-frame--notify-active .viewer-frame__notify-form {
          gap: 8px;
        }

        .viewer-frame--notify-active .viewer-frame__notify-input,
        .viewer-frame--notify-active .viewer-frame__notify-button {
          height: 40px;
        }

        .viewer-frame--notify-active .viewer-frame__notify-checkbox {
          font-size: 0.76rem;
          line-height: 1.36;
        }
      }

      .viewer-frame__notify--submitted .viewer-frame__notify-input,
      .viewer-frame__notify--submitted .viewer-frame__notify-button,
      .viewer-frame__notify--related-visible .viewer-frame__notify-input,
      .viewer-frame__notify--related-visible .viewer-frame__notify-button {
        height: 0;
        padding-top: 0;
        padding-bottom: 0;
        border-width: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .viewer-frame__notify--submitted .viewer-frame__notify-input,
      .viewer-frame__notify--related-visible .viewer-frame__notify-input {
        border-color: transparent;
      }

      .viewer-frame__iframe {
        position: absolute;
        inset: 0;
        z-index: 0;
        display: block;
        width: 100%;
        height: 100%;
        border: 0;
        background: transparent;
      }

      .viewer-replay-canvas-mirror {
        position: fixed;
        display: block;
        left: -10000px;
        top: -10000px;
        width: 1px;
        height: 1px;
        opacity: 0;
        pointer-events: none;
        user-select: none;
        border: 0;
        z-index: 18;
      }

      .viewer-editorial {
        display: grid;
        gap: 22px;
        padding: 26px 28px 30px;
        border-radius: 30px;
        border: 1px solid rgba(136, 215, 255, 0.14);
        background:
          radial-gradient(circle at top right, rgba(136, 215, 255, 0.14), transparent 34%),
          linear-gradient(180deg, rgba(8, 14, 25, 0.96), rgba(7, 11, 20, 0.98));
        box-shadow:
          0 26px 72px rgba(0, 0, 0, 0.24),
          inset 0 1px 0 rgba(255, 255, 255, 0.05);
      }

      .viewer-editorial[hidden] {
        display: none;
      }

      .viewer-editorial__hero {
        display: grid;
        gap: 12px;
        max-width: 900px;
      }

      .viewer-editorial__eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        color: rgba(136, 215, 255, 0.8);
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .viewer-editorial__eyebrow::before {
        content: "";
        flex: 0 0 8px;
        width: 8px;
        min-width: 8px;
        height: 8px;
        min-height: 8px;
        aspect-ratio: 1 / 1;
        border-radius: 999px;
        background: var(--sky);
        box-shadow: 0 0 0 8px rgba(136, 215, 255, 0.08);
      }

      .viewer-editorial__title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: clamp(2.1rem, 3.4vw, 3.5rem);
        line-height: 0.98;
        letter-spacing: -0.05em;
      }

      .viewer-editorial__lede {
        margin: 0;
        color: rgba(232, 239, 251, 0.9);
        font-size: 1.03rem;
        line-height: 1.72;
      }

      .viewer-editorial__byline {
        display: inline-flex;
        align-items: center;
        gap: 12px;
        margin: 4px 0 6px;
        color: rgba(197, 208, 227, 0.78);
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .viewer-editorial__byline-avatar {
        width: 38px;
        height: 38px;
        flex: 0 0 auto;
        border-radius: 999px;
        object-fit: cover;
        object-position: 50% 38%;
        border: 1.5px solid rgba(235, 248, 255, 0.82);
        box-shadow:
          0 10px 24px rgba(0, 0, 0, 0.24),
          0 0 0 5px rgba(136, 215, 255, 0.07);
      }

      .viewer-editorial__byline-text {
        display: grid;
        gap: 4px;
      }

      .viewer-editorial__byline-author {
        color: rgba(241, 247, 255, 0.94);
      }

      .viewer-editorial__byline-separator {
        display: none;
      }

      .viewer-editorial__byline-date {
        color: rgba(197, 208, 227, 0.76);
      }

      .viewer-editorial__deck {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__question-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__question-card {
        display: grid;
        gap: 10px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(136, 215, 255, 0.12);
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.06), rgba(255, 255, 255, 0.02)),
          rgba(9, 14, 24, 0.88);
      }

      .viewer-editorial__question-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__question-copy {
        margin: 0;
        color: rgba(232, 239, 251, 0.82);
        font-size: 0.9rem;
        line-height: 1.58;
      }

      .viewer-editorial__question-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__question-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.08);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.12);
      }

      .viewer-editorial__deck-card {
        display: grid;
        gap: 8px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.03);
      }

      .viewer-editorial__deck-label {
        color: rgba(136, 215, 255, 0.82);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .viewer-editorial__deck-text {
        color: var(--muted-strong);
        font-size: 0.9rem;
        line-height: 1.55;
      }

      .viewer-editorial__body {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
        align-items: start;
      }

      .viewer-editorial__sections {
        display: grid;
        gap: 18px;
      }

      .viewer-editorial__section {
        display: grid;
        gap: 10px;
        padding: 18px 20px 20px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background: rgba(255, 255, 255, 0.024);
      }

      .viewer-editorial__section-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1.08rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__section-copy {
        display: grid;
        gap: 10px;
      }

      .viewer-editorial__member-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__member-card {
        display: grid;
        gap: 10px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02)),
          rgba(8, 13, 23, 0.84);
      }

      .viewer-editorial__member-tag {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        width: fit-content;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.14);
        color: rgba(214, 241, 255, 0.88);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-editorial__member-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1.02rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__member-copy {
        margin: 0;
        color: rgba(232, 239, 251, 0.82);
        font-size: 0.92rem;
        line-height: 1.6;
      }

      .viewer-editorial__member-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__member-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.08);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.12);
      }

      .viewer-editorial__level-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__level-card {
        display: grid;
        gap: 10px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
          rgba(8, 13, 23, 0.84);
      }

      .viewer-editorial__level-tag {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        width: fit-content;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.14);
        color: rgba(214, 241, 255, 0.88);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-editorial__level-copy {
        margin: 0;
        color: rgba(232, 239, 251, 0.82);
        font-size: 0.92rem;
        line-height: 1.6;
      }

      .viewer-editorial__level-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__level-pill {
        display: inline-flex;
        align-items: center;
        min-height: 24px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
        color: rgba(219, 233, 247, 0.8);
        font-size: 0.73rem;
        font-weight: 600;
        letter-spacing: 0.02em;
      }

      .viewer-editorial__level-question {
        margin: 0;
        color: rgba(196, 214, 232, 0.72);
        font-size: 0.82rem;
        line-height: 1.5;
      }

      .viewer-editorial__level-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__level-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.08);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.12);
      }

      .viewer-editorial__trail-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__trail-card {
        display: grid;
        gap: 10px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
          rgba(8, 13, 23, 0.84);
      }

      .viewer-editorial__trail-tag {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        width: fit-content;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.14);
        color: rgba(214, 241, 255, 0.88);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-editorial__trail-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1.02rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__trail-copy {
        margin: 0;
        color: rgba(232, 239, 251, 0.82);
        font-size: 0.92rem;
        line-height: 1.6;
      }

      .viewer-editorial__trail-path {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
      }

      .viewer-editorial__trail-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.08);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.12);
      }

      .viewer-editorial__trail-arrow {
        color: rgba(168, 200, 228, 0.62);
        font-size: 0.8rem;
        line-height: 1;
      }

      .viewer-editorial__myth-grid {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__myth-card {
        display: grid;
        gap: 10px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
          rgba(8, 13, 23, 0.84);
      }

      .viewer-editorial__myth-tag {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        width: fit-content;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255, 208, 120, 0.09);
        box-shadow: inset 0 0 0 1px rgba(255, 208, 120, 0.14);
        color: rgba(255, 232, 191, 0.9);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-editorial__myth-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1.02rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__myth-copy {
        margin: 0;
        color: rgba(232, 239, 251, 0.82);
        font-size: 0.92rem;
        line-height: 1.6;
      }

      .viewer-editorial__myth-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__myth-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255, 208, 120, 0.07);
        box-shadow: inset 0 0 0 1px rgba(255, 208, 120, 0.12);
      }

      .viewer-editorial__compare-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__compare-card {
        display: grid;
        gap: 10px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
          rgba(8, 13, 23, 0.84);
      }

      .viewer-editorial__compare-tag {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        width: fit-content;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.09);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.14);
        color: rgba(214, 241, 255, 0.88);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-editorial__compare-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1.02rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__compare-copy {
        margin: 0;
        color: rgba(232, 239, 251, 0.82);
        font-size: 0.92rem;
        line-height: 1.6;
      }

      .viewer-editorial__compare-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__compare-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.08);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.12);
      }

      .viewer-editorial__faq-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__faq-card {
        display: grid;
        gap: 10px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
          rgba(8, 13, 23, 0.84);
      }

      .viewer-editorial__faq-tag {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        width: fit-content;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(157, 239, 183, 0.08);
        box-shadow: inset 0 0 0 1px rgba(157, 239, 183, 0.14);
        color: rgba(216, 249, 226, 0.9);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-editorial__faq-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1.02rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__faq-copy {
        margin: 0;
        color: rgba(232, 239, 251, 0.82);
        font-size: 0.92rem;
        line-height: 1.6;
      }

      .viewer-editorial__faq-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__faq-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(157, 239, 183, 0.07);
        box-shadow: inset 0 0 0 1px rgba(157, 239, 183, 0.12);
      }

      .viewer-editorial__claim-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__claim-card {
        display: grid;
        gap: 10px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
          rgba(8, 13, 23, 0.84);
      }

      .viewer-editorial__claim-tag {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        width: fit-content;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255, 214, 122, 0.09);
        box-shadow: inset 0 0 0 1px rgba(255, 214, 122, 0.16);
        color: rgba(255, 242, 210, 0.92);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-editorial__claim-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1.02rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__claim-copy {
        margin: 0;
        color: rgba(232, 239, 251, 0.82);
        font-size: 0.92rem;
        line-height: 1.6;
      }

      .viewer-editorial__claim-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__claim-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255, 214, 122, 0.07);
        box-shadow: inset 0 0 0 1px rgba(255, 214, 122, 0.12);
      }

      .viewer-editorial__meaning-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 14px;
      }

      .viewer-editorial__meaning-card {
        display: grid;
        gap: 10px;
        padding: 16px 18px 18px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.07);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.015)),
          rgba(8, 13, 23, 0.84);
      }

      .viewer-editorial__meaning-tag {
        display: inline-flex;
        align-items: center;
        min-height: 26px;
        width: fit-content;
        padding: 0 10px;
        border-radius: 999px;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-editorial__meaning-tag.is-positive {
        background: rgba(136, 215, 255, 0.09);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.16);
        color: rgba(225, 244, 255, 0.92);
      }

      .viewer-editorial__meaning-tag.is-caution {
        background: rgba(255, 181, 107, 0.09);
        box-shadow: inset 0 0 0 1px rgba(255, 181, 107, 0.16);
        color: rgba(255, 236, 211, 0.92);
      }

      .viewer-editorial__meaning-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1.02rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__meaning-copy {
        margin: 0;
        color: rgba(232, 239, 251, 0.82);
        font-size: 0.92rem;
        line-height: 1.6;
      }

      .viewer-editorial__meaning-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__meaning-link {
        display: inline-flex;
        align-items: center;
        min-height: 32px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.07);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.12);
      }

      .viewer-editorial__paragraph {
        margin: 0;
        color: rgba(232, 239, 251, 0.84);
        font-size: 0.98rem;
        line-height: 1.78;
      }

      .viewer-editorial__paragraph strong {
        color: var(--text);
      }

      .viewer-editorial__footnote-ref {
        margin-left: 2px;
        font-size: 0.72em;
        line-height: 0;
        vertical-align: super;
        white-space: nowrap;
      }

      .viewer-editorial__footnote-ref a,
      .viewer-editorial__source-link {
        color: rgba(201, 227, 238, 0.94);
        text-decoration-line: underline;
        text-decoration-color: rgba(104, 164, 196, 0.72);
        text-decoration-thickness: 1.2px;
        text-underline-offset: 0.16em;
      }

      .viewer-editorial__footnote-ref a:hover,
      .viewer-editorial__footnote-ref a:focus-visible,
      .viewer-editorial__source-link:hover,
      .viewer-editorial__source-link:focus-visible {
        color: rgba(226, 239, 247, 0.98);
        text-decoration-color: rgba(136, 215, 255, 0.96);
        outline: none;
      }

      .viewer-editorial__deployment-block {
        display: grid;
        gap: 12px;
      }

      .viewer-editorial__deployment-controls {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__deployment-filter {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 32px;
        padding: 0 12px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.05);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        color: rgba(220, 231, 247, 0.84);
        font: inherit;
        font-size: 0.78rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        cursor: pointer;
        transition:
          background 120ms ease,
          box-shadow 120ms ease,
          color 120ms ease,
          transform 120ms ease;
      }

      .viewer-editorial__deployment-filter:hover,
      .viewer-editorial__deployment-filter:focus-visible {
        background: rgba(136, 215, 255, 0.1);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.18);
        color: rgba(236, 245, 255, 0.96);
        outline: none;
      }

      .viewer-editorial__deployment-filter.is-active {
        background: rgba(136, 215, 255, 0.14);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.22);
        color: rgba(243, 248, 255, 0.98);
      }

      .viewer-editorial__deployment-wrap {
        overflow-x: auto;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015)),
          rgba(8, 13, 23, 0.84);
      }

      .viewer-editorial__deployment-table {
        width: 100%;
        min-width: 920px;
        border-collapse: collapse;
      }

      .viewer-community-articles__body ul,
      .viewer-community-articles__body ol {
        list-style-position: outside;
      }

      .viewer-community-articles__body ul {
        list-style-type: disc;
      }

      .viewer-community-articles__body ol {
        list-style-type: decimal;
      }

      .viewer-editorial__deployment-table thead th {
        padding: 13px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(255, 255, 255, 0.035);
        color: rgba(197, 208, 227, 0.84);
        font-family: "Inter", sans-serif;
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.1em;
        text-align: left;
        text-transform: uppercase;
        vertical-align: top;
      }

      .viewer-editorial__deployment-table tbody td {
        padding: 14px 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
        color: rgba(232, 239, 251, 0.84);
        font-size: 0.92rem;
        line-height: 1.58;
        vertical-align: top;
      }

      .viewer-editorial__deployment-table tbody tr:last-child td {
        border-bottom: 0;
      }

      .viewer-editorial__deployment-table tbody tr.is-hidden {
        display: none;
      }

      .viewer-editorial__deployment-table tbody tr:hover td {
        background: rgba(255, 255, 255, 0.02);
      }

      .viewer-editorial__deployment-table strong {
        color: rgba(245, 248, 255, 0.98);
      }

      .viewer-editorial__deployment-note {
        margin: 0;
        color: rgba(197, 208, 227, 0.76);
        font-size: 0.84rem;
        line-height: 1.58;
      }

      .viewer-editorial__sources {
        display: grid;
        gap: 10px;
        padding-top: 6px;
      }

      .viewer-editorial__sources-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 0.98rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__sources-list {
        display: grid;
        gap: 8px;
        margin: 0;
        padding-left: 18px;
        color: rgba(197, 208, 227, 0.8);
        font-size: 0.88rem;
        line-height: 1.55;
      }

      .newsletter-card {
        position: relative;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 20px;
        align-items: center;
        padding: 22px;
        overflow: hidden;
        border-radius: 26px;
        border: 1px solid rgba(136, 215, 255, 0.2);
        background:
          radial-gradient(circle at 8% 0%, rgba(157, 239, 183, 0.16), transparent 32%),
          radial-gradient(circle at 96% 18%, rgba(136, 215, 255, 0.2), transparent 30%),
          linear-gradient(135deg, #0b1523, #060c16);
        background-color: #060c16;
        box-shadow:
          0 22px 70px rgba(0, 0, 0, 0.26),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
      }

      .newsletter-card::after {
        content: "";
        position: absolute;
        inset: auto -12% -42% 36%;
        height: 150px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(136, 215, 255, 0.16), transparent);
        filter: blur(24px);
        transform: rotate(-8deg);
      }

      .viewer-editorial__newsletter {
        margin-top: 30px;
      }

      .newsletter-card__avatar {
        width: 88px;
        height: 88px;
        border-radius: 999px;
        object-fit: cover;
        object-position: 50% 38%;
        border: 2px solid rgba(235, 248, 255, 0.88);
        box-shadow:
          0 14px 34px rgba(0, 0, 0, 0.3),
          0 0 0 8px rgba(136, 215, 255, 0.08);
      }

      .newsletter-card__body {
        position: relative;
        z-index: 1;
        display: grid;
        gap: 12px;
      }

      .newsletter-card__kicker {
        margin: 0;
        color: rgba(157, 239, 183, 0.9);
        font-size: 0.76rem;
        font-weight: 800;
        letter-spacing: 0.12em;
        text-transform: uppercase;
      }

      .newsletter-card__title {
        margin: 0;
        max-width: 760px;
        font-family: "Inter", sans-serif;
        font-size: clamp(1.35rem, 2.2vw, 2.15rem);
        line-height: 1.04;
        letter-spacing: -0.04em;
      }

      .newsletter-card__subtitle {
        margin: 0;
        color: rgba(217, 231, 244, 0.78);
        font-size: 0.96rem;
        line-height: 1.55;
      }

      .newsletter-form {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        align-items: flex-start;
      }

      .newsletter-form__input {
        flex: 1 1 240px;
        min-width: 0;
        min-height: 48px;
        padding: 0 15px;
        border: 1px solid rgba(255, 255, 255, 0.12);
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.07);
        color: rgba(246, 250, 255, 0.98);
        font: inherit;
        outline: none;
        transition:
          border-color 140ms ease,
          box-shadow 140ms ease,
          background 140ms ease;
      }

      .newsletter-form__input::placeholder {
        color: rgba(194, 211, 229, 0.66);
      }

      .newsletter-form__input:focus {
        border-color: rgba(136, 215, 255, 0.62);
        background: rgba(255, 255, 255, 0.09);
        box-shadow: 0 0 0 4px rgba(136, 215, 255, 0.12);
      }

      .newsletter-form__button {
        min-height: 48px;
        padding: 0 20px;
        border: 0;
        border-radius: 16px;
        background: linear-gradient(135deg, #88d7ff, #9defb7);
        color: #06101c;
        font: inherit;
        font-weight: 850;
        letter-spacing: -0.01em;
        cursor: pointer;
        box-shadow:
          0 16px 36px rgba(68, 173, 218, 0.22),
          inset 0 1px 0 rgba(255, 255, 255, 0.45);
        transition:
          transform 140ms ease,
          filter 140ms ease,
          box-shadow 140ms ease;
      }

      .newsletter-form__button:hover,
      .newsletter-form__button:focus-visible {
        filter: brightness(1.04);
        transform: translateY(-1px);
        outline: none;
        box-shadow:
          0 20px 42px rgba(68, 173, 218, 0.28),
          inset 0 1px 0 rgba(255, 255, 255, 0.52);
      }

      .newsletter-form__button:disabled {
        cursor: wait;
        filter: grayscale(0.35) brightness(0.86);
        transform: none;
      }

      .newsletter-form__feedback {
        flex-basis: 100%;
        min-height: 1.2em;
        margin: 0;
        color: rgba(157, 239, 183, 0.92);
        font-size: 0.86rem;
        line-height: 1.45;
      }

      .newsletter-form__feedback[hidden] {
        display: none;
      }

      .newsletter-form__feedback.is-error {
        color: rgba(255, 181, 107, 0.94);
      }

      .newsletter-form__fineprint {
        flex-basis: 100%;
        margin: -2px 0 0;
        color: rgba(217, 231, 244, 0.62);
        font-size: 0.78rem;
        line-height: 1.45;
      }

      .newsletter-form__fineprint a {
        color: rgba(136, 215, 255, 0.92);
        text-decoration: none;
      }

      .newsletter-form__fineprint a:hover,
      .newsletter-form__fineprint a:focus-visible {
        text-decoration: underline;
      }

      html.newsletter-modal-open,
      body.newsletter-modal-open {
        overflow: hidden !important;
        overscroll-behavior: contain;
      }

      .newsletter-modal[hidden] {
        display: none;
      }

      .newsletter-modal {
        position: fixed;
        inset: 0;
        z-index: 80;
        display: grid;
        place-items: center;
        padding:
          calc(24px + env(safe-area-inset-top, 0px))
          24px
          calc(24px + env(safe-area-inset-bottom, 0px));
        --newsletter-backdrop-alpha: 0.24;
        --newsletter-backdrop-blur: 0.8px;
        --newsletter-card-opacity: 1;
        --newsletter-card-y: 0px;
        --newsletter-card-scale: 1;
        pointer-events: auto;
      }

      .newsletter-modal.is-scroll-revealing {
        pointer-events: none;
      }

      .newsletter-modal.is-scroll-revealing .newsletter-modal__close[data-newsletter-dismiss],
      .newsletter-modal.is-scroll-revealing .newsletter-form__input,
      .newsletter-modal.is-scroll-revealing .newsletter-form__button {
        pointer-events: auto;
      }

      .newsletter-modal__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(1, 6, 12, var(--newsletter-backdrop-alpha));
        backdrop-filter: blur(var(--newsletter-backdrop-blur));
      }

      .newsletter-modal__card {
        position: relative;
        z-index: 1;
        width: min(520px, 100%);
        padding: 30px;
        border-radius: 30px;
        border: 1px solid rgba(255, 255, 255, 0.16);
        background:
          radial-gradient(circle at 50% 0%, rgba(136, 215, 255, 0.18), transparent 32%),
          linear-gradient(180deg, #09121f, #060b14);
        background-color: #060b14;
        box-shadow:
          0 34px 100px rgba(0, 0, 0, 0.46),
          inset 0 1px 0 rgba(255, 255, 255, 0.08);
        opacity: var(--newsletter-card-opacity);
        transform: translate3d(0, var(--newsletter-card-y), 0) scale(var(--newsletter-card-scale));
        transform-origin: center bottom;
        will-change: transform;
      }

      .newsletter-modal__close {
        position: absolute;
        top: 16px;
        right: 16px;
        display: inline-grid;
        place-items: center;
        width: 38px;
        height: 38px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.07);
        color: rgba(231, 240, 249, 0.86);
        font: inherit;
        font-size: 1.5rem;
        line-height: 1;
        cursor: pointer;
      }

      .newsletter-modal__close:hover,
      .newsletter-modal__close:focus-visible {
        background: rgba(255, 255, 255, 0.12);
        color: rgba(255, 255, 255, 0.98);
        outline: none;
      }

      .newsletter-modal__content {
        display: grid;
        justify-items: center;
        gap: 14px;
        text-align: center;
      }

      .newsletter-modal__avatar {
        width: 96px;
        height: 96px;
        border-radius: 999px;
        object-fit: cover;
        object-position: 50% 38%;
        border: 2px solid rgba(235, 248, 255, 0.9);
        box-shadow:
          0 16px 36px rgba(0, 0, 0, 0.32),
          0 0 0 9px rgba(136, 215, 255, 0.09);
      }

      .newsletter-modal__title {
        margin: 8px 0 0;
        font-family: "Inter", sans-serif;
        font-size: clamp(1.7rem, 6vw, 2.35rem);
        line-height: 1.05;
        letter-spacing: -0.055em;
      }

      .newsletter-modal__subtitle {
        margin: 0;
        max-width: 360px;
        color: rgba(210, 226, 241, 0.76);
        font-size: 1rem;
        line-height: 1.55;
      }

      .newsletter-modal .newsletter-form {
        width: 100%;
        display: grid;
        gap: 10px;
        margin-top: 6px;
      }

      .newsletter-modal .newsletter-form__input,
      .newsletter-modal .newsletter-form__button {
        width: 100%;
      }

      .viewer-editorial__attention-figure {
        display: grid;
        gap: 12px;
        margin: 4px 0 6px;
        padding: 16px 16px 14px;
        border-radius: 22px;
        border: 1px solid rgba(136, 215, 255, 0.14);
        background:
          radial-gradient(circle at 12% 18%, rgba(156, 255, 99, 0.08), transparent 30%),
          radial-gradient(circle at 86% 0%, rgba(136, 215, 255, 0.12), transparent 26%),
          linear-gradient(180deg, rgba(10, 18, 31, 0.92), rgba(7, 13, 23, 0.96));
        box-shadow:
          inset 0 1px 0 rgba(255, 255, 255, 0.04),
          0 18px 40px rgba(0, 0, 0, 0.2);
        overflow: hidden;
      }

      .viewer-editorial__attention-svg {
        display: block;
        width: 100%;
        height: auto;
        overflow: visible;
      }

      .viewer-editorial__attention-svg .attention-figure__scene--mobile {
        display: none;
      }

      .viewer-editorial__attention-svg .attention-figure__title {
        fill: rgba(245, 248, 255, 0.96);
        font-family: "Inter", sans-serif;
        font-size: 22px;
        font-weight: 700;
        letter-spacing: 2.8px;
        text-transform: uppercase;
      }

      .viewer-editorial__attention-svg .attention-figure__title--mobile,
      .viewer-editorial__attention-svg .attention-figure__subtitle--mobile,
      .viewer-editorial__attention-svg .attention-figure__scale--mobile {
        display: none;
      }

      .viewer-editorial__attention-svg .attention-figure__subtitle {
        fill: rgba(197, 208, 227, 0.76);
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 600;
        letter-spacing: 2.4px;
        text-transform: uppercase;
      }

      .viewer-editorial__attention-svg .attention-figure__row-label {
        fill: rgba(245, 248, 255, 0.9);
        font-family: "Inter", sans-serif;
        font-size: 14px;
        font-weight: 700;
        letter-spacing: 0.2px;
      }

      .viewer-editorial__attention-svg .attention-figure__row-label--full {
        fill: rgba(255, 229, 186, 0.96);
      }

      .viewer-editorial__attention-svg .attention-figure__row-hint,
      .viewer-editorial__attention-svg .attention-figure__scale-label,
      .viewer-editorial__attention-svg .attention-figure__scale-note {
        fill: rgba(197, 208, 227, 0.76);
        font-family: "Inter", sans-serif;
        font-size: 10px;
        font-weight: 600;
      }

      .viewer-editorial__attention-svg .attention-figure__row-hint,
      .viewer-editorial__attention-svg .attention-figure__scale-label {
        letter-spacing: 1.7px;
        text-transform: uppercase;
      }

      .viewer-editorial__attention-svg .attention-figure__query-guide {
        stroke: rgba(136, 215, 255, 0.34);
        stroke-width: 1.25;
        stroke-dasharray: 4 5;
      }

      .viewer-editorial__attention-svg .attention-figure__query-label {
        fill: rgba(136, 215, 255, 0.94);
        font-family: "Inter", sans-serif;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.8px;
        text-transform: uppercase;
      }

      .viewer-editorial__attention-svg .attention-figure__connector {
        stroke: rgba(197, 208, 227, 0.38);
        stroke-width: 1.5;
        stroke-linecap: round;
      }

      .viewer-editorial__attention-svg .attention-figure__repeat-bracket {
        stroke: rgba(197, 208, 227, 0.46);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
        fill: none;
      }

      .viewer-editorial__attention-svg .attention-figure__repeat-label {
        fill: rgba(197, 208, 227, 0.84);
        font-family: "Inter", sans-serif;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: 1.6px;
        text-transform: uppercase;
      }

      .viewer-editorial__attention-svg .attention-figure__token-base,
      .viewer-editorial__attention-svg .attention-figure__token-base use {
        fill: rgba(145, 160, 186, 0.16);
        stroke: rgba(255, 255, 255, 0.08);
        stroke-width: 1;
      }

      .viewer-editorial__attention-svg .attention-figure__token-attended,
      .viewer-editorial__attention-svg .attention-figure__token-attended use {
        fill: rgba(156, 255, 99, 0.9);
        stroke: rgba(228, 255, 214, 0.42);
        stroke-width: 1;
      }

      .viewer-editorial__attention-svg .attention-figure__token-query,
      .viewer-editorial__attention-svg .attention-figure__token-query use {
        fill: rgba(136, 215, 255, 0.98);
        stroke: rgba(224, 246, 255, 0.6);
        stroke-width: 1;
      }

      .viewer-editorial__attention-svg .attention-figure__track {
        fill: rgba(255, 255, 255, 0.045);
        stroke: rgba(255, 255, 255, 0.09);
        stroke-width: 1;
      }

      .viewer-editorial__attention-svg .attention-figure__track-fill {
        fill: rgba(156, 255, 99, 0.92);
      }

      .viewer-editorial__attention-svg .attention-figure__track-dot {
        fill: rgba(156, 255, 99, 1);
      }

      .viewer-editorial__attention-svg .attention-figure__ratio {
        fill: rgba(255, 241, 211, 0.96);
        font-family: "Inter", sans-serif;
        font-size: 18px;
        font-weight: 700;
        letter-spacing: 0.4px;
      }

      .viewer-editorial__attention-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-editorial__attention-pill {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 10px;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.045);
        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
        color: rgba(225, 236, 249, 0.86);
        font-size: 0.73rem;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
      }

      .viewer-editorial__attention-caption {
        margin: 0;
        color: rgba(197, 208, 227, 0.82);
        font-size: 0.84rem;
        line-height: 1.56;
      }

      .viewer-editorial__attention-svg .attention-figure__window--s1,
      .viewer-editorial__attention-svg .attention-figure__window--s2,
      .viewer-editorial__attention-svg .attention-figure__window--s3,
      .viewer-editorial__attention-svg .attention-figure__window--s4,
      .viewer-editorial__attention-svg .attention-figure__window--s5,
      .viewer-editorial__attention-svg .attention-figure__window--full,
      .viewer-editorial__attention-svg .attention-figure__track-fill,
      .viewer-editorial__attention-svg .attention-figure__track-dot,
      .viewer-editorial__attention-svg .attention-figure__connector--ratio {
        opacity: 0.18;
      }

      .viewer-editorial__attention-svg .attention-figure__window--s1 {
        animation: attention-window-s1 6.8s ease-in-out infinite;
      }

      .viewer-editorial__attention-svg .attention-figure__window--s2 {
        animation: attention-window-s2 6.8s ease-in-out infinite;
      }

      .viewer-editorial__attention-svg .attention-figure__window--s3 {
        animation: attention-window-s3 6.8s ease-in-out infinite;
      }

      .viewer-editorial__attention-svg .attention-figure__window--s4 {
        animation: attention-window-s4 6.8s ease-in-out infinite;
      }

      .viewer-editorial__attention-svg .attention-figure__window--s5 {
        animation: attention-window-s5 6.8s ease-in-out infinite;
      }

      .viewer-editorial__attention-svg .attention-figure__window--full {
        animation: attention-window-full 6.8s ease-in-out infinite;
      }

      .viewer-editorial__attention-svg .attention-figure__query-token {
        animation: attention-query-pulse 6.8s ease-in-out infinite;
        transform-origin: 607px 0px;
      }

      .viewer-editorial__attention-svg .attention-figure__track-fill,
      .viewer-editorial__attention-svg .attention-figure__track-dot,
      .viewer-editorial__attention-svg .attention-figure__connector--ratio {
        animation: attention-ratio-pulse 6.8s ease-in-out infinite;
      }

      @keyframes attention-window-s1 {
        0%,
        6%,
        100% {
          opacity: 0.16;
        }
        8%,
        16% {
          opacity: 1;
        }
      }

      @keyframes attention-window-s2 {
        0%,
        14%,
        100% {
          opacity: 0.16;
        }
        18%,
        26% {
          opacity: 1;
        }
      }

      @keyframes attention-window-s3 {
        0%,
        24%,
        100% {
          opacity: 0.16;
        }
        28%,
        36% {
          opacity: 1;
        }
      }

      @keyframes attention-window-s4 {
        0%,
        34%,
        100% {
          opacity: 0.16;
        }
        38%,
        46% {
          opacity: 1;
        }
      }

      @keyframes attention-window-s5 {
        0%,
        44%,
        100% {
          opacity: 0.16;
        }
        48%,
        56% {
          opacity: 1;
        }
      }

      @keyframes attention-window-full {
        0%,
        52%,
        100% {
          opacity: 0.12;
        }
        58%,
        78% {
          opacity: 1;
        }
      }

      @keyframes attention-query-pulse {
        0%,
        100% {
          opacity: 0.92;
        }
        14%,
        34%,
        62%,
        74% {
          opacity: 1;
        }
        52% {
          opacity: 0.78;
        }
      }

      @keyframes attention-ratio-pulse {
        0%,
        52%,
        100% {
          opacity: 0.16;
        }
        58%,
        78% {
          opacity: 1;
        }
      }

      @media (prefers-reduced-motion: reduce) {
        .viewer-editorial__attention-svg .attention-figure__window--s1,
        .viewer-editorial__attention-svg .attention-figure__window--s2,
        .viewer-editorial__attention-svg .attention-figure__window--s3,
        .viewer-editorial__attention-svg .attention-figure__window--s4,
        .viewer-editorial__attention-svg .attention-figure__window--s5,
        .viewer-editorial__attention-svg .attention-figure__window--full,
        .viewer-editorial__attention-svg .attention-figure__query-token,
        .viewer-editorial__attention-svg .attention-figure__track-fill,
        .viewer-editorial__attention-svg .attention-figure__track-dot,
        .viewer-editorial__attention-svg .attention-figure__connector--ratio {
          animation: none;
        }

        .viewer-editorial__attention-svg .attention-figure__window--s1,
        .viewer-editorial__attention-svg .attention-figure__window--s2,
        .viewer-editorial__attention-svg .attention-figure__window--s3,
        .viewer-editorial__attention-svg .attention-figure__window--s4,
        .viewer-editorial__attention-svg .attention-figure__window--s5,
        .viewer-editorial__attention-svg .attention-figure__window--full,
        .viewer-editorial__attention-svg .attention-figure__track-fill,
        .viewer-editorial__attention-svg .attention-figure__track-dot,
        .viewer-editorial__attention-svg .attention-figure__connector--ratio {
          opacity: 1;
        }
      }

      .viewer-editorial__aside {
        display: grid;
        gap: 14px;
        position: sticky;
        top: 22px;
      }

      .viewer-editorial__aside-card {
        display: grid;
        gap: 10px;
        padding: 18px 18px 20px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.08);
        background:
          linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.02)),
          rgba(7, 13, 23, 0.92);
      }

      .viewer-editorial__aside-title {
        margin: 0;
        font-family: "Inter", sans-serif;
        font-size: 1rem;
        letter-spacing: -0.02em;
      }

      .viewer-editorial__aside-text,
      .viewer-editorial__aside-list {
        margin: 0;
        color: var(--muted-strong);
        font-size: 0.9rem;
        line-height: 1.65;
      }

      .viewer-editorial__aside-list {
        display: grid;
        gap: 10px;
        padding-left: 18px;
      }

      .viewer-node-link {
        --viewer-node-link-underline-rgb: 104, 164, 196;
        --viewer-node-link-text-rgb: 201, 227, 238;
        color: rgba(var(--viewer-node-link-text-rgb), 0.96);
        text-decoration-line: underline;
        text-decoration-color: rgba(var(--viewer-node-link-underline-rgb), 0.74);
        text-decoration-thickness: 1.5px;
        text-underline-offset: 0.19em;
        text-decoration-skip-ink: none;
        transition:
          color 120ms ease,
          text-decoration-color 120ms ease,
          background 120ms ease,
          box-shadow 120ms ease;
      }

      .viewer-node-link:hover,
      .viewer-node-link:focus-visible,
      .viewer-node-link.is-active {
        color: rgba(var(--viewer-node-link-text-rgb), 0.98);
        text-decoration-color: rgba(var(--viewer-node-link-underline-rgb), 0.96);
        background: rgba(var(--viewer-node-link-underline-rgb), 0.09);
        box-shadow: 0 0 0 6px rgba(var(--viewer-node-link-underline-rgb), 0.09);
        border-radius: 10px;
        outline: none;
      }

      .viewer-node-link.is-return-target {
        animation: viewer-node-link-pulse 900ms ease;
      }

      @keyframes viewer-node-link-pulse {
        0% {
          box-shadow: 0 0 0 0 rgba(136, 215, 255, 0);
          background: rgba(136, 215, 255, 0);
        }
        35% {
          box-shadow: 0 0 0 10px rgba(136, 215, 255, 0.14);
          background: rgba(136, 215, 255, 0.12);
        }
        100% {
          box-shadow: 0 0 0 0 rgba(136, 215, 255, 0);
          background: rgba(136, 215, 255, 0);
        }
      }

      .viewer-crosslink-portals {
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 30;
        overflow: visible;
      }

      .viewer-crosslink-portal {
        position: absolute;
        width: 92px;
        height: 92px;
        padding: 0;
        border-radius: 999px;
        border: 1px solid rgba(255, 255, 255, 0.14);
        background: transparent;
        box-shadow: 0 18px 42px rgba(4, 7, 16, 0.45);
        transform: translate(-50%, -50%);
        opacity: 0;
        pointer-events: none;
        cursor: pointer;
        transition:
          opacity 120ms ease,
          transform 180ms ease,
          left 240ms ease,
          top 240ms ease,
          box-shadow 180ms ease,
          background 180ms ease;
        --viewer-crosslink-portal-blur: 8px;
      }

      .viewer-crosslink-portal--sample {
        width: 184px;
        height: 184px;
        transform: translate(-50%, -50%) scale(0.94);
        transition:
          opacity 120ms ease,
          transform 120ms ease,
          box-shadow 120ms ease,
          box-shadow 120ms ease;
      }

      .viewer-crosslink-portal--sample.is-visible {
        transform: translate(-50%, -50%) scale(1);
      }

      .viewer-crosslink-portal--sample:hover {
        background: transparent;
      }

      .viewer-crosslink-portal.is-tracking-node {
        transition:
          opacity 140ms ease,
          transform 180ms ease,
          box-shadow 180ms ease,
          background 180ms ease;
      }

      .viewer-crosslink-portal.is-visible {
        opacity: 1;
        pointer-events: auto;
      }

      .viewer-crosslink-portal.is-occluded {
        opacity: 0;
        pointer-events: none;
      }

      .viewer-crosslink-portal:hover {
        background: transparent;
        box-shadow: 0 26px 60px rgba(4, 7, 16, 0.72);
      }

      .viewer-crosslink-portal__content {
        position: absolute;
        inset: 0;
        display: block;
        border-radius: 999px;
        overflow: hidden;
      }

      .viewer-crosslink-portal__backdrop {
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: rgba(7, 12, 22, 0.22);
        backdrop-filter: blur(var(--viewer-crosslink-portal-blur)) saturate(1.1);
        -webkit-backdrop-filter: blur(var(--viewer-crosslink-portal-blur)) saturate(1.1);
      }

      .viewer-crosslink-portal--sample .viewer-crosslink-portal__backdrop {
        background: rgba(7, 12, 22, 0.2);
        backdrop-filter: blur(calc(var(--viewer-crosslink-portal-blur) + 2px)) saturate(1.14);
        -webkit-backdrop-filter: blur(calc(var(--viewer-crosslink-portal-blur) + 2px)) saturate(1.14);
      }

      .viewer-crosslink-portal:hover .viewer-crosslink-portal__backdrop {
        background: rgba(33, 40, 56, 0.3);
      }

      .viewer-crosslink-portal__canvas,
      .viewer-crosslink-portal__text-preview {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
        background: transparent;
      }

      .viewer-crosslink-portal__text-preview {
        overflow: hidden;
        border-radius: inherit;
        color: #f5f8ff;
      }

      .viewer-crosslink-portal__text-scale {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
        transform-origin: top left;
        will-change: transform;
      }

      .viewer-crosslink-portal__article-snapshot {
        position: absolute;
        top: 0;
        left: 0;
        margin: 0 !important;
        pointer-events: none;
        user-select: none;
      }

      .viewer-crosslink-portal__article-snapshot,
      .viewer-crosslink-portal__article-snapshot * {
        box-sizing: border-box;
      }

      .viewer-crosslink-portal__article-snapshot [id] {
        scroll-margin: 0 !important;
      }

      .viewer-crosslink-portal__article-snapshot .viewer-node-link {
        pointer-events: none;
      }

      .viewer-crosslink-portal__article-snapshot .viewer-node-link:focus-visible {
        outline: none;
      }

      .viewer-crosslink-portal__snippet {
        display: grid;
        gap: 10px;
        padding: 22px 24px 24px;
        color: rgba(244, 248, 255, 0.92);
        font-family: "Inter", sans-serif;
      }

      .viewer-crosslink-portal__snippet-eyebrow {
        color: rgba(136, 215, 255, 0.8);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
      }

      .viewer-crosslink-portal__snippet-title {
        font-family: "Inter", sans-serif;
        font-size: 20px;
        line-height: 1.02;
        letter-spacing: -0.03em;
      }

      .viewer-crosslink-portal__snippet-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
      }

      .viewer-crosslink-portal__snippet-pill {
        display: inline-flex;
        align-items: center;
        min-height: 28px;
        padding: 0 12px;
        border-radius: 999px;
        background: rgba(136, 215, 255, 0.12);
        box-shadow: inset 0 0 0 1px rgba(136, 215, 255, 0.18);
        color: rgba(234, 246, 255, 0.9);
        font-size: 12px;
        font-weight: 600;
        letter-spacing: 0.01em;
      }

      .viewer-crosslink-portal__snippet-node {
        color: rgba(206, 232, 255, 0.8);
        font-size: 12px;
        font-weight: 500;
        letter-spacing: 0.01em;
      }

      .viewer-crosslink-portal__snippet-copy {
        font-size: 15px;
        line-height: 1.72;
        color: rgba(233, 240, 251, 0.84);
      }

      .viewer-crosslink-portal__snippet-copy > * {
        position: relative;
      }

      .viewer-crosslink-portal__snippet-copy .viewer-editorial__paragraph {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.58;
      }

      .viewer-crosslink-portal__snippet-copy .viewer-editorial__paragraph + .viewer-editorial__paragraph {
        margin-top: 10px;
      }

      .viewer-crosslink-portal__snippet-copy .viewer-editorial__aside-text {
        margin: 0;
        font-size: 0.92rem;
        line-height: 1.58;
      }

      .viewer-crosslink-portal__snippet-copy .viewer-editorial__aside-list {
        margin: 0;
        padding-left: 18px;
        font-size: 0.92rem;
        line-height: 1.58;
      }

      .viewer-crosslink-portal__snippet-copy .viewer-editorial__aside-text + .viewer-editorial__aside-list,
      .viewer-crosslink-portal__snippet-copy .viewer-editorial__aside-list + .viewer-editorial__aside-text,
      .viewer-crosslink-portal__snippet-copy .viewer-editorial__aside-list + .viewer-editorial__aside-list {
        margin-top: 10px;
      }

      .viewer-crosslink-portal__snippet-copy .viewer-editorial__aside-list li + li {
        margin-top: 6px;
      }

      .viewer-crosslink-portal__snippet-copy .is-snippet-context-block {
        opacity: 0.7;
      }

      .viewer-crosslink-portal__snippet-copy .is-snippet-focus-block {
        margin-left: -10px;
        margin-right: -10px;
        padding: 10px 12px;
        background:
          linear-gradient(180deg, rgba(136, 215, 255, 0.12), rgba(24, 40, 70, 0.26));
        border-radius: 14px;
        box-shadow:
          inset 0 0 0 1px rgba(136, 215, 255, 0.22),
          0 12px 32px rgba(2, 6, 14, 0.18);
        opacity: 1;
      }

      .viewer-crosslink-portal__snippet-copy strong {
        color: #ffffff;
      }

      .viewer-crosslink-portal__snippet-copy .viewer-node-link {
        pointer-events: none;
      }

      .viewer-crosslink-portal__snippet-copy .viewer-node-link.is-snippet-focus {
        color: #ffffff;
        text-decoration-color: rgba(156, 255, 99, 0.94);
        background: rgba(136, 215, 255, 0.09);
        box-shadow: 0 0 0 6px rgba(136, 215, 255, 0.09);
        border-radius: 10px;
      }

      .viewer-crosslink-portal__arrow {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 24px;
        height: 18px;
        transform-origin: center center;
      }

      .viewer-crosslink-portal__arrow svg {
        width: 100%;
        height: 100%;
        display: block;
      }

      .viewer-crosslink-portal__arrow path {
        fill: rgba(255, 255, 255, 0.9);
      }

      .debug-version-badge {
        position: fixed;
        top: 8px;
        right: 8px;
        left: auto;
        z-index: 10000;
        display: grid;
        width: max-content;
        max-width: min(360px, calc(100vw - 16px));
        gap: 3px;
        padding: 7px 26px 7px 9px;
        border: 1px solid rgba(136, 215, 255, 0.3);
        border-radius: 12px;
        background: rgba(5, 9, 20, 0.82);
        box-shadow: 0 10px 28px rgba(0, 0, 0, 0.26);
        color: rgba(245, 247, 251, 0.88);
        font-family: "Inter", sans-serif;
        font-size: 10px;
        line-height: 1.2;
        pointer-events: auto;
        backdrop-filter: blur(12px) saturate(1.08);
      }

      .debug-version-badge--hidden {
        width: auto;
        border-radius: 999px;
        gap: 0;
        padding: 4px;
      }

      .debug-version-badge--hidden .debug-version-badge__line {
        display: none;
      }

      .debug-version-badge__line {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        gap: 5px;
        min-width: 0;
      }

      .debug-version-badge__label {
        flex: 0 0 auto;
        color: rgba(136, 215, 255, 0.78);
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
      }

      .debug-version-badge__label::after {
        content: ":";
      }

      .debug-version-badge__value {
        min-width: 0;
        overflow: hidden;
        color: rgba(245, 247, 251, 0.9);
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .debug-version-badge__toggle {
        position: absolute;
        top: -5px;
        right: -5px;
        display: grid;
        place-items: center;
        width: 18px;
        height: 18px;
        padding: 0;
        border: 1px solid rgba(136, 215, 255, 0.45);
        border-radius: 999px;
        background: rgba(8, 14, 27, 0.94);
        color: rgba(245, 247, 251, 0.94);
        cursor: pointer;
        font: 700 11px/1 "Inter", sans-serif;
        pointer-events: auto;
      }

      .debug-version-badge__toggle:focus-visible {
        outline: 2px solid rgba(136, 215, 255, 0.7);
        outline-offset: 2px;
      }

      body.route-viewer {
        overflow: hidden;
      }

      body.route-viewer.hfviewer-demo-mode {
        overflow: hidden;
      }

      body.route-viewer.route-viewer-article {
        overflow-x: hidden;
        overflow-y: auto;
      }

      .page.route-viewer {
        min-height: 100vh;
        height: 100vh;
        min-height: 100dvh;
        height: 100dvh;
        overflow: hidden;
      }

      body.route-viewer.route-viewer-article .page.route-viewer {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        overflow: visible;
      }

      .page.route-viewer .shell {
        width: min(1320px, calc(100% - 52px));
      }

      .page.route-viewer .shell {
        min-height: 0;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: stretch;
        grid-template-columns: none;
        grid-template-areas: none;
        column-gap: 0;
        padding: 22px 0 24px;
      }

      body.route-viewer.hfviewer-demo-mode .page.route-viewer .shell {
        padding-top: clamp(8px, 1.2vh, 14px);
      }

      body.route-viewer.route-viewer-article .page.route-viewer .shell {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
      }

      .page.route-viewer .viewer-route {
        flex: 1 1 auto;
        min-height: 0;
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding-top: 0;
      }

      body.route-viewer.hfviewer-demo-mode .page.route-viewer .viewer-route {
        gap: 0;
      }

      body.route-viewer.route-viewer-article .page.route-viewer .viewer-route {
        flex: 0 0 auto;
        overflow: visible;
      }

      .page.route-viewer .viewer-route__head {
        flex: 0 0 auto;
      }

      body.route-viewer.hfviewer-demo-mode .page.route-viewer .viewer-route__head {
        display: none !important;
      }

      /* The Hugging Face Space supplies its own fixed 52px model bar. Keep
         the full header everywhere else, but remove the duplicate title and
         actions block inside the Space iframe. */
      html.hfviewer-space-embedded body.route-viewer .page.route-viewer .viewer-route {
        gap: 0;
      }

      html.hfviewer-space-embedded body.route-viewer .page.route-viewer .viewer-route__head {
        display: none !important;
      }

      @media (max-width: 640px) {
        html.hfviewer-space-embedded body.route-viewer .viewer-frame__bar {
          gap: 9px;
        }

        html.hfviewer-space-embedded body.route-viewer .viewer-frame__demo-title {
          max-width: 96px;
          margin-right: auto;
          font-size: 0.72rem;
        }

        html.hfviewer-space-embedded body.route-viewer .viewer-frame__bar .viewer-granularity {
          margin-left: 0;
        }

        html.hfviewer-space-embedded body.route-viewer .viewer-frame__bar .viewer-granularity__label {
          display: none;
        }
      }

      body.route-viewer.hfviewer-demo-mode-2 .page.route-viewer .viewer-route__actions,
      body.route-viewer.hfviewer-demo-mode-2 .page.route-viewer .viewer-route__intro-links {
        display: none !important;
      }

      .page.route-viewer .viewer-frame {
        flex: 1 1 auto;
      }

      body.route-viewer.route-viewer-article .page.route-viewer .viewer-frame {
        flex: 0 0 auto;
      }

      .page.route-viewer .viewer-frame__canvas {
        flex: 1 1 auto;
        min-height: 0;
        height: auto;
      }

      body.route-viewer.route-viewer-family {
        overflow-y: auto;
      }

      body.route-viewer.viewer-community-article-active {
        overflow-y: auto;
      }

      body.route-viewer.route-viewer-article .page.route-viewer #viewer-write-article-btn,
      body.route-viewer.route-viewer-article .page.route-viewer #viewer-community-article-write {
        display: none !important;
      }

      .page.route-viewer.viewer-community-article-active {
        min-height: 100vh;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
      }

      .page.route-viewer.viewer-community-article-active .shell {
        min-height: 100vh;
        height: auto;
      }

      .page.route-viewer.viewer-community-article-active .viewer-route,
      .page.route-viewer.viewer-community-article-active .viewer-frame {
        flex: 0 0 auto;
      }

      .page.route-viewer.viewer-community-article-active .viewer-frame {
        display: none !important;
      }

      .page.route-viewer.viewer-community-article-active .viewer-frame__canvas {
        min-height: clamp(344px, 50dvh, 500px);
      }

      @media (max-width: 980px) {
        body.route-viewer.route-viewer-article:not(.route-viewer-article-hidden) .page.route-viewer.viewer-community-article-active .viewer-frame {
          display: flex !important;
          height: auto !important;
          min-height: 0 !important;
          margin: 0 !important;
          padding: 0 !important;
          border: 1px solid rgba(255, 255, 255, 0.09) !important;
          background: var(--preview-surface) !important;
          box-shadow: var(--shadow) !important;
          overflow: hidden !important;
        }

        body.route-viewer.route-viewer-article:not(.route-viewer-article-hidden) .page.route-viewer.viewer-community-article-active .viewer-frame__bar {
          display: flex !important;
        }
      }

      @media (min-width: 981px) {
        .page.route-viewer.viewer-community-article-active .viewer-route {
          flex: 0 0 auto;
          min-height: auto;
          gap: 20px;
        }

        .page.route-viewer.viewer-community-article-active .viewer-route__head {
          margin-bottom: 0;
        }

        .page.route-viewer.viewer-community-article-active .viewer-route__blog-link,
        .page.route-viewer.viewer-community-article-active .viewer-route__blog-pill,
        .page.route-viewer.viewer-community-article-active .viewer-blog-float {
          display: none !important;
        }
      }

      .page.route-viewer.route-viewer-family {
        min-height: 100vh;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
      }

      .page.route-viewer.route-viewer-family .shell {
        min-height: 100vh;
        height: auto;
      }

      .page.route-viewer.route-viewer-family .viewer-route {
        flex: 0 0 auto;
        min-height: auto;
        gap: 20px;
      }

      .page.route-viewer.route-viewer-family .viewer-frame {
        flex: 0 0 auto;
      }

      .page.route-viewer.route-viewer-family .viewer-frame__canvas {
        min-height: clamp(460px, 74vh, 860px);
      }

      @media (min-width: 861px) {
        body.route-landing,
        .page.route-landing {
          --landing-hero-video-width: clamp(325px, calc(9vw + 210px), 374px);
          --landing-hero-gap: clamp(34px, 4vw, 74px);
        }

        body.route-landing .landing-nav-wrap,
        .page.route-landing .landing-nav-wrap {
          position: absolute;
          top: 22px;
          left: 0;
          right: 0;
          width: min(1560px, calc(100% - 52px));
          z-index: 4;
          pointer-events: none;
        }

        body.route-landing .landing-nav-wrap .nav,
        .page.route-landing .landing-nav-wrap .nav {
          pointer-events: auto;
          margin-right: 0;
          padding-top: 0;
          padding-right: calc(var(--landing-hero-video-width) + var(--landing-hero-gap));
          justify-content: flex-end;
        }

        body.route-landing .brand-stack,
        .page.route-landing .brand-stack {
          width: var(--brand-stack-expanded-width, max-content);
          min-width: 0;
          align-items: flex-end;
        }

        body.route-landing .brand-stack__menu,
        .page.route-landing .brand-stack__menu {
          width: var(--brand-stack-expanded-width, max-content);
          transform: translate(var(--brand-stack-collapsed-offset, 0px), -6px);
          transition: none;
        }

        body.route-landing .brand-stack__trigger,
        .page.route-landing .brand-stack__trigger {
          width: max-content;
          max-width: 100%;
          align-self: flex-end;
          transform: translateX(0);
          transition: none;
          will-change: transform;
        }

        body.route-landing .brand-stack.brand-stack--ready .brand-stack__menu,
        .page.route-landing .brand-stack.brand-stack--ready .brand-stack__menu {
          transition: opacity 220ms ease, transform 220ms ease;
        }

        body.route-landing .brand-stack.brand-stack--ready .brand-stack__trigger,
        .page.route-landing .brand-stack.brand-stack--ready .brand-stack__trigger {
          transition: transform 220ms ease, opacity 180ms ease;
        }

        body.route-landing .brand-stack:hover .brand-stack__trigger,
        body.route-landing .brand-stack:focus-within .brand-stack__trigger,
        .page.route-landing .brand-stack:hover .brand-stack__trigger,
        .page.route-landing .brand-stack:focus-within .brand-stack__trigger {
          transform: translateX(calc(var(--brand-stack-collapsed-offset, 0px) * -1));
        }

        body.route-landing .brand-stack:hover .brand-stack__menu,
        body.route-landing .brand-stack:focus-within .brand-stack__menu,
        .page.route-landing .brand-stack:hover .brand-stack__menu,
        .page.route-landing .brand-stack:focus-within .brand-stack__menu {
          transform: translate(0, 0);
        }

        body.route-landing .shell,
        .page.route-landing .shell {
          width: min(1560px, calc(100% - 52px));
          grid-template-columns: minmax(0, 1fr);
          grid-template-areas: "hero";
          position: relative;
        }

        body.route-landing .hero__content,
        .page.route-landing .hero__content {
          max-width: 850px;
          padding-right: 0;
        }

        body.route-landing .hero,
        .page.route-landing .hero {
          display: grid;
          grid-template-columns: minmax(0, 1fr) var(--landing-hero-video-width);
          column-gap: var(--landing-hero-gap);
          row-gap: 22px;
          align-items: start;
          padding-top: 0;
        }

        body.route-landing .hero__media,
        .page.route-landing .hero__media {
          display: block;
          min-width: 0;
          align-self: stretch;
          justify-self: end;
          width: var(--landing-hero-video-width);
        }

        body.route-landing .hero .proof,
        .page.route-landing .hero .proof {
          grid-column: 1 / -1;
          margin-top: 0;
        }

        body.route-landing .hero h1,
        .page.route-landing .hero h1 {
          max-width: 10.5ch;
        }

        body.route-landing .hero__lede,
        .page.route-landing .hero__lede {
          max-width: 56ch;
        }
      }

      @media (max-width: 860px) {
        .landing-nav-wrap {
          width: min(100% - 28px, 100%);
          margin: 0 auto;
          padding-top: 22px;
        }

        .shell {
          width: min(100% - 28px, 100%);
          display: block;
        }

        body.route-landing .shell,
        .page.route-landing .shell {
          padding-top: 0;
        }

        .nav {
          justify-content: flex-start;
          flex-wrap: wrap;
          margin-right: 0;
          padding-top: 0;
          padding-bottom: 24px;
        }

        .brand-stack {
          align-items: flex-start;
        }

        .brand-stack__menu {
          position: static;
          display: none;
          transform: none;
          opacity: 1;
          pointer-events: auto;
          padding-top: 2px;
        }

        .brand-stack.is-open .brand-stack__menu {
          display: grid;
        }

        .brand-stack__trigger,
        .brand-stack__item,
        .brand-stack__item:hover,
        .brand-stack__item:focus-visible {
          opacity: 1;
        }

        .brand-stack:hover .brand-stack__trigger:not(:hover),
        .brand-stack:focus-within .brand-stack__trigger:not(:focus-visible),
        .brand-stack:has(.brand-stack__item:hover) .brand-stack__trigger,
        .brand-stack:has(.brand-stack__item:focus-visible) .brand-stack__trigger,
        .brand-stack.is-open .brand-stack__trigger {
          opacity: 1;
        }

        .cta__row {
          grid-template-columns: 1fr;
        }

        .cta__button {
          width: 100%;
        }

        .hf-models-launch {
          display: grid;
          width: 100%;
        }

        .hf-models-launch__button {
          width: 100%;
        }

        .hf-models-launch__hint {
          font-size: 0.88rem;
          line-height: 1.4;
        }

        .hf-models-page {
          gap: 16px;
          padding: 22px 12px 34px;
        }

        .page.route-hf-models,
        .page.route-hf-models .shell,
        .hf-models-page:not(.hf-article-login-page) {
          max-width: 100vw;
          overflow-x: hidden;
        }

        .page.route-hf-article-login,
        .page.route-hf-article-login .shell,
        .hf-article-login-page {
          max-width: 100vw;
          overflow-x: hidden;
        }

        .hf-models-shell {
          gap: 16px;
          width: 100%;
        }

        .hf-models-login,
        .hf-models-loading,
        .hf-models-dashboard {
          border-radius: 22px;
          box-shadow:
            0 18px 48px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        }

        .hf-models-dashboard {
          display: flex;
          flex-direction: column;
          gap: 16px;
          padding: 18px 14px;
        }

        .hf-models-login,
        .hf-models-loading {
          padding: 22px 18px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login {
          zoom: 1;
          width: 100%;
          max-width: 100%;
          min-height: 0;
          padding: 18px 14px 20px;
          border-radius: 28px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__layout {
          grid-template-columns: 1fr;
          gap: 0;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__copy {
          gap: 11px;
          width: 100%;
          max-width: 100%;
        }

        .hf-models-login__eyebrow-pill {
          min-height: 42px;
          padding: 0 14px 0 8px;
          gap: 9px;
          font-size: 0.68rem;
          letter-spacing: 0.18em;
        }

        .hf-models-login__eyebrow-icon {
          width: 30px;
          height: 30px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login h2 {
          width: 100%;
          max-width: 100%;
          padding-right: 0;
          font-size: clamp(2.05rem, 10.8vw, 2.95rem);
          line-height: 1;
          letter-spacing: -0.072em;
          white-space: normal;
          text-wrap: balance;
          overflow: visible;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login h2 span {
          padding-right: 0.06em;
          padding-bottom: 0.1em;
          margin-bottom: -0.1em;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__lead {
          font-size: 0.98rem;
          line-height: 1.45;
          max-width: 100%;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__allows {
          font-size: 0.95rem;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__features {
          max-width: 100%;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature {
          grid-template-columns: 44px minmax(0, 1fr);
          gap: 12px;
          padding: 8px 0;
          font-size: 0.92rem;
          line-height: 1.28;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature span {
          min-width: 0;
          overflow-wrap: break-word;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature-icon {
          width: 44px;
          height: 44px;
          border-radius: 10px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature img {
          width: 31px;
          height: 31px;
          border-radius: 0;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__feature:first-child img {
          width: 28px;
          height: 28px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__visual {
          display: none;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__actions {
          display: grid;
          grid-template-columns: 1fr;
          gap: 9px;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__button,
        .hf-models-page:not(.hf-article-login-page) .hf-models-login__back {
          width: 100%;
          min-width: 0;
          justify-content: center;
          white-space: normal;
        }

        .hf-models-page:not(.hf-article-login-page) .hf-models-login__notice {
          max-width: 100%;
          overflow-wrap: break-word;
        }

        .hf-article-login-page .hf-models-shell,
        .hf-article-login-page .hf-models-login,
        .hf-article-login-page .hf-article-login__copy,
        .hf-article-login-page .hf-article-login__copy p,
        .hf-article-login-page .hf-article-login__feature-list,
        .hf-article-login-page .hf-article-login__feature-list li {
          width: 100%;
          max-width: 100%;
          min-width: 0;
          overflow-wrap: anywhere;
        }

        .hf-article-login-page .hf-models-login {
          justify-self: stretch;
          overflow: hidden;
          min-height: 0;
          padding: 22px 16px 24px;
          border-radius: 28px;
        }

        .hf-article-login__head {
          display: grid;
          justify-content: stretch;
          gap: 10px;
        }

        .hf-article-login__head .eyebrow {
          min-height: 42px;
          padding: 0 14px 0 10px;
          gap: 11px;
          font-size: 0.7rem;
          letter-spacing: 0.16em;
        }

        .hf-article-login__head .eyebrow::before {
          width: 15px;
          height: 15px;
        }

        .hf-article-login__layout {
          grid-template-columns: 1fr;
          gap: 8px;
        }

        .hf-article-login__copy-column {
          gap: 15px;
          max-width: 100%;
        }

        .hf-models-login h2,
        .hf-models-loading h2,
        .hf-models-dashboard h2 {
          font-size: clamp(2.1rem, 13vw, 3rem);
          letter-spacing: -0.08em;
        }

        .hf-article-login-page .hf-models-login h2 {
          max-width: 100%;
          font-size: clamp(2.1rem, 10.8vw, 2.65rem);
          line-height: 0.95;
          letter-spacing: -0.085em;
          overflow-wrap: anywhere;
          word-break: normal;
        }

        .hf-article-login-page .hf-models-login h2 strong {
          overflow-wrap: anywhere;
          word-break: normal;
        }

        .hf-models-dashboard h2 {
          font-size: clamp(2.05rem, 10.5vw, 2.65rem);
        }

        .hf-article-login.is-invite #hf-article-login-title {
          font-size: clamp(1.72rem, 9.4vw, 2.55rem);
          line-height: 0.98;
          letter-spacing: -0.065em;
        }

        .hf-article-login__model {
          max-width: 100%;
          min-height: 40px;
          padding: 0 14px;
          font-size: 0.82rem;
        }

        .hf-models-login__actions {
          display: grid;
          grid-template-columns: 1fr;
          gap: 9px;
        }

        .hf-models-login__button,
        .hf-models-dashboard__button {
          width: 100%;
          justify-content: center;
          min-height: 44px;
          padding: 0 14px;
        }

        .hf-article-login__copy {
          gap: 12px;
        }

        .hf-article-login__feature-list {
          gap: 0;
        }

        .hf-article-login__feature-list li {
          min-height: 0;
          padding: 11px 0 11px 32px;
          line-height: 1.42;
        }

        .hf-article-login__feature-list li::before {
          left: 4px;
          top: 16px;
          width: 9px;
          height: 9px;
        }

        .hf-article-login__example {
          font-size: 0.94rem;
          line-height: 1.45;
        }

        .hf-article-login__visual {
          min-height: 0;
          margin: 0 -10px -14px;
          justify-items: center;
        }

        .hf-article-login__visual img {
          width: min(112%, 520px);
          max-width: none;
          transform: none;
        }

        .hf-models-login p,
        .hf-models-loading p,
        .hf-models-dashboard__intro,
        .hf-models-dashboard__notice {
          font-size: 0.94rem;
          line-height: 1.45;
        }

        .hf-models-dashboard__heading {
          gap: 10px;
        }

        .hf-models-dashboard__stats {
          position: sticky;
          top: max(10px, env(safe-area-inset-top));
          z-index: 8;
          display: grid;
          grid-auto-columns: minmax(92px, 1fr);
          grid-auto-flow: column;
          gap: 7px;
          overflow-x: auto;
          width: 100%;
          max-width: 100%;
          box-sizing: border-box;
          margin: 0;
          padding: 8px;
          border: 1px solid rgba(136, 215, 255, 0.11);
          border-radius: 22px;
          background:
            radial-gradient(circle at 18% 0%, rgba(136, 215, 255, 0.13), transparent 38%),
            linear-gradient(180deg, rgba(7, 14, 25, 0.94), rgba(4, 9, 17, 0.84));
          box-shadow:
            0 18px 42px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.055);
          scrollbar-width: none;
          -webkit-overflow-scrolling: touch;
          transition:
            background 180ms ease,
            border-color 180ms ease,
            box-shadow 180ms ease;
        }

        .hf-models-dashboard__stats::-webkit-scrollbar {
          display: none;
        }

        .hf-models-dashboard__stats.is-mobile-docked {
          border-color: rgba(136, 215, 255, 0.17);
          background:
            radial-gradient(circle at 18% 0%, rgba(136, 215, 255, 0.16), transparent 40%),
            linear-gradient(180deg, rgba(7, 14, 25, 0.98), rgba(4, 9, 17, 0.9));
          box-shadow:
            0 22px 46px rgba(0, 0, 0, 0.28),
            inset 0 1px 0 rgba(255, 255, 255, 0.07);
        }

        .hf-models-dashboard.hf-models-dashboard--stats-docked .hf-models-dashboard__columns {
          margin-top: 0;
        }

        .hf-models-dashboard.hf-models-dashboard--stats-docked {
          --hf-models-column-title-sticky-top: calc(var(--hf-models-stats-dock-gap, 72px) + max(10px, env(safe-area-inset-top)) + 8px);
        }

        .hf-models-dashboard__stat {
          grid-template-columns: 1fr;
          justify-items: start;
          gap: 2px;
          min-height: 58px;
          padding: 8px 10px;
          border-radius: 18px;
          font-size: 0.74rem;
          line-height: 1.12;
        }

        .hf-models-dashboard__stat-count {
          min-width: 30px;
          min-height: 28px;
          font-size: 0.96rem;
        }

        .hf-models-dashboard__user {
          align-items: center;
          justify-content: flex-start;
          gap: 10px;
          padding: 10px;
          border: 1px solid rgba(136, 215, 255, 0.12);
          border-radius: 20px;
          background:
            radial-gradient(circle at 0% 0%, rgba(136, 215, 255, 0.09), transparent 40%),
            rgba(4, 11, 20, 0.52);
          font-size: 0.96rem;
          line-height: 1.28;
        }

        .hf-models-dashboard__identity {
          gap: 6px;
        }

        .hf-models-dashboard__avatar {
          width: 50px;
          height: 50px;
          flex: 0 0 auto;
        }

        .hf-models-dashboard__button {
          width: 100%;
          min-height: 50px;
          padding: 0 16px;
          border-radius: 16px;
          font-size: 0.96rem;
          line-height: 1.18;
          white-space: normal;
        }

        .hf-models-dashboard__button--secondary {
          min-height: 54px;
        }

        .hf-models-dashboard__org-list {
          gap: 8px;
        }

        .hf-models-dashboard__org-chip {
          min-height: 0;
          padding: 0;
          font-size: 0.82rem;
        }

        .hf-models-column {
          scroll-margin-top: 92px;
          min-height: 0;
          gap: 10px;
          padding: 12px;
          border-radius: 22px;
          background:
            linear-gradient(180deg, rgba(255, 255, 255, 0.052), rgba(255, 255, 255, 0.024)),
            rgba(4, 10, 19, 0.58);
        }

        .hf-models-column h3 {
          gap: 8px;
          padding: 9px 10px;
          font-size: 1.1rem;
        }

        .hf-models-column h3[data-count]::after {
          content: attr(data-count);
          display: inline-grid;
          place-items: center;
          min-width: 28px;
          min-height: 28px;
          padding: 0 8px;
          border: 1px solid rgba(136, 215, 255, 0.14);
          border-radius: 999px;
          color: rgba(223, 247, 255, 0.72);
          font-size: 0.78rem;
          letter-spacing: 0;
          background: rgba(255, 255, 255, 0.04);
        }

        .hf-model-card {
          gap: 9px;
          padding: 12px;
          border-radius: 18px;
          background:
            radial-gradient(circle at 0% 0%, rgba(136, 215, 255, 0.08), transparent 42%),
            rgba(2, 8, 16, 0.78);
        }

        .hf-model-card__repo {
          font-size: 0.95rem;
          line-height: 1.16;
        }

        .hf-model-card__meta {
          font-size: 0.76rem;
          line-height: 1.35;
        }

        .hf-model-card__preview {
          min-height: 0;
          height: 144px;
          max-height: 144px;
          border-radius: 16px;
          object-fit: contain;
          background:
            radial-gradient(circle at 50% 12%, rgba(136, 215, 255, 0.08), transparent 48%),
            rgba(255, 255, 255, 0.035);
        }

        .hf-model-card__preview-link {
          border-radius: 16px;
          background: rgba(255, 255, 255, 0.025);
        }

        .hf-model-card__actions {
          display: grid;
          grid-template-columns: repeat(2, minmax(0, 1fr));
          gap: 7px;
        }

        .hf-model-card__button {
          width: 100%;
          min-height: 42px;
          padding: 0 10px;
          font-size: 0.82rem;
          line-height: 1.16;
        }

        .hf-model-card[data-dashboard-bucket="not_ready"] .hf-model-card__actions {
          grid-template-columns: 1fr;
        }

        .hf-model-card[data-dashboard-bucket="not_ready"] .hf-model-card__button {
          min-height: 46px;
        }

        .hf-model-card[data-dashboard-bucket="ready"],
        .hf-model-card[data-dashboard-bucket="featured"],
        .hf-model-card[data-dashboard-bucket="bookmarks"] {
          grid-template-columns: minmax(0, 1fr) minmax(102px, 31%);
          grid-template-areas:
            "repo repo"
            "meta meta"
            "preview actions";
          align-items: stretch;
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__repo,
        .hf-model-card[data-dashboard-bucket="featured"] .hf-model-card__repo,
        .hf-model-card[data-dashboard-bucket="bookmarks"] .hf-model-card__repo {
          grid-area: repo;
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__meta,
        .hf-model-card[data-dashboard-bucket="featured"] .hf-model-card__meta,
        .hf-model-card[data-dashboard-bucket="bookmarks"] .hf-model-card__meta {
          grid-area: meta;
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__preview-link,
        .hf-model-card[data-dashboard-bucket="featured"] .hf-model-card__preview-link,
        .hf-model-card[data-dashboard-bucket="bookmarks"] .hf-model-card__preview-link {
          grid-area: preview;
          display: flex;
          min-width: 0;
          min-height: 144px;
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__actions,
        .hf-model-card[data-dashboard-bucket="featured"] .hf-model-card__actions,
        .hf-model-card[data-dashboard-bucket="bookmarks"] .hf-model-card__actions {
          grid-area: actions;
          grid-template-columns: 1fr;
          grid-auto-rows: minmax(0, 1fr);
          align-content: stretch;
          height: 100%;
          min-width: 0;
        }

        .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__button,
        .hf-model-card[data-dashboard-bucket="featured"] .hf-model-card__button,
        .hf-model-card[data-dashboard-bucket="bookmarks"] .hf-model-card__button {
          min-height: 0;
          height: 100%;
          padding: 8px 8px;
          flex-direction: column;
        }

        .hf-models-login__actions {
          display: grid;
          grid-template-columns: 1fr;
        }

        .hf-models-login__actions .hf-models-login__button,
        .hf-models-login__actions .hf-models-login__back {
          width: 100%;
        }

        .hf-models-dashboard__top {
          display: grid;
          gap: 12px;
        }

        .hf-models-dashboard__columns {
          grid-template-columns: 1fr;
        }

        body.route-landing .cta__sub,
        .page.route-landing .cta__sub {
          display: none;
        }

        .proof {
          grid-template-columns: 1fr;
        }

        .proof__extension-panel {
          display: none;
        }

        .can-install-chrome-extension .proof__extension-panel {
          display: none;
        }

        .proof__embed-panel {
          display: grid;
        }

        .can-install-chrome-extension .proof__embed-panel {
          display: grid;
        }

        .proof-embed__button {
          width: 100%;
        }

        .products-grid {
          grid-template-columns: 1fr;
        }

        .blogs-with-graphs {
          margin-top: 44px;
        }

        .blogs-with-graphs__head {
          grid-template-columns: 1fr;
          align-items: start;
          justify-content: start;
        }

        .blogs-with-graphs__write {
          justify-self: start;
          align-self: start;
          min-height: 44px;
          padding-right: 16px;
          font-size: 0.88rem;
        }

        .blogs-with-graphs__carousel {
          margin-right: -18px;
        }

        .blogs-with-graphs__rail {
          gap: 14px;
          padding: 10px 18px 74px 0;
          scroll-padding-inline: 0 18px;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
        }

        .blogs-with-graphs__rail::-webkit-scrollbar {
          display: none;
        }

        .blogs-with-graphs__card {
          flex-basis: min(84vw, 340px);
          min-height: 414px;
          border-radius: 24px;
        }

        .blogs-with-graphs__image-wrap {
          --blogs-figure-height: 224px;
          min-height: 0;
          height: var(--blogs-figure-height);
          margin: 12px 12px 0;
          border-radius: 20px;
        }

        .blogs-with-graphs__image-wrap--compact {
          min-height: 0;
          height: var(--blogs-figure-height);
        }

        .blogs-with-graphs__image {
          height: 224px;
        }

        .blogs-with-graphs__image--deepseek {
          height: 224px;
        }

        .blogs-with-graphs__live {
          min-height: 224px;
          padding: 0;
        }

        .blogs-with-graphs__image-wrap--compact .blogs-with-graphs__live {
          min-height: 224px;
          padding: 0;
        }

        .blogs-with-graphs__live--deepseek {
          min-height: 224px;
        }

        .blogs-with-graphs__live--gemma {
          min-height: 224px;
        }

        .blogs-with-graphs__figure {
          min-height: 224px;
          height: 224px;
        }

        .blogs-with-graphs__figure .dsv4-res {
          width: 124%;
        }

        .blogs-with-graphs__figure .dsv4-res .dsv4-scroll {
          height: 224px;
        }

        .blogs-with-graphs__figure .dsv4-res svg {
          width: 112%;
          height: 218px;
        }

        .blogs-with-graphs__figure--gemma .viewer-editorial__attention-svg {
          width: 118%;
          height: 238px;
          margin: -4px -14.5% -4px -3.5%;
          transform: translateY(16px);
        }

        .blogs-heatmap-preview {
          --borealis-heat-cell: clamp(29px, 9vw, 35px);
          min-height: 224px;
          height: 224px;
          padding: 12px 10px;
        }

        .blogs-heatmap-preview__grid {
          grid-template-columns: minmax(42px, 52px) repeat(6, var(--borealis-heat-cell));
        }

        .blogs-graph-preview {
          min-height: 190px;
        }

        .blogs-graph-preview__card {
          min-height: 190px;
          padding: 11px;
        }

        .blogs-graph-preview__flow {
          grid-template-columns: 1fr;
          grid-template-rows: none;
        }

        .blogs-graph-preview__node,
        .blogs-graph-preview__edge {
          grid-column: 1 !important;
          grid-row: auto !important;
        }

        .blogs-graph-preview__edge {
          width: 3px;
          height: 16px;
          justify-self: center;
          background: linear-gradient(180deg, rgba(var(--edge-a), 0.72), rgba(var(--edge-b), 0.9));
        }

        .blogs-graph-preview__edge::after {
          right: 50%;
          top: auto;
          bottom: -2px;
          transform: translateX(50%) rotate(135deg);
        }

        .blogs-heatmap-preview {
          --borealis-heat-cell: clamp(20px, 5.7vw, 25px);
          min-height: 164px;
          padding: 10px;
          border-radius: 18px;
        }

        .blogs-heatmap-preview__head {
          gap: 6px;
        }

        .blogs-heatmap-preview__title {
          font-size: 10.5px;
        }

        .blogs-heatmap-preview__note {
          font-size: 6.5px;
        }

        .blogs-heatmap-preview__grid {
          grid-template-columns: minmax(48px, 58px) repeat(6, var(--borealis-heat-cell));
          gap: 3px;
        }

        .blogs-heatmap-preview__label {
          padding: 0 5px;
          font-size: 6.4px;
        }

        .blogs-heatmap-preview__label--head,
        .blogs-heatmap-preview__cell--head {
          font-size: 5.2px;
        }

        .blogs-heatmap-preview__cell {
          border-radius: 7px;
          font-size: 6.1px;
        }

        .blogs-graph-preview--deepseek .blogs-graph-preview__card {
          min-height: 220px;
        }

        .blogs-graph-preview--deepseek .blogs-graph-preview__mini-flow {
          grid-template-columns: 1fr;
        }

        .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__body,
        .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__card,
        .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__body,
        .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__body {
          grid-template-columns: minmax(0, 1fr);
          padding: 15px 17px 19px;
        }

        .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__kicker,
        .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__title,
        .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__open,
        .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__meta,
        .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__image-wrap,
        .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__body,
        .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__meta,
        .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__kicker,
        .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__title,
        .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__open,
        .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__meta,
        .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__kicker,
        .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__title,
        .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__open,
        .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__meta {
          grid-column: auto;
          grid-row: auto;
        }

        .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__meta,
        .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__meta,
        .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__meta,
        .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__meta {
          flex-direction: row;
          justify-self: start;
          text-align: left;
        }

        .blogs-with-graphs--variant-signature-rail .blogs-with-graphs__meta::before,
        .blogs-with-graphs--variant-byline-orbit .blogs-with-graphs__meta::before {
          display: none;
        }

        .blogs-with-graphs--variant-author-halo .blogs-with-graphs__meta,
        .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__meta {
          position: static;
          width: auto;
          flex-direction: row;
          align-items: center;
          text-align: left;
        }

        .blogs-with-graphs--variant-author-halo .blogs-with-graphs__body {
          padding-top: 18px;
        }

        .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__image-wrap,
        .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__image-wrap,
        .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__image-wrap {
          margin: 12px 12px 0;
          border-radius: 19px;
        }

        .blogs-with-graphs--variant-author-halo .blogs-with-graphs__avatar,
        .blogs-with-graphs--variant-corner-portrait .blogs-with-graphs__avatar,
        .blogs-with-graphs--variant-editorial-cutout .blogs-with-graphs__avatar,
        .blogs-with-graphs--variant-studio-plate .blogs-with-graphs__avatar {
          width: 68px;
          min-width: 68px;
          height: 68px;
          min-height: 68px;
        }

        .blogs-with-graphs__body {
          padding: 15px 17px 19px;
        }

        .blogs-with-graphs__title {
          max-width: 17ch;
          font-size: 1.3rem;
        }

        .community-showcase {
          margin-top: -20px;
        }

        .community-showcase__head {
          align-items: start;
        }

        .community-showcase__title-row {
          grid-template-columns: 1fr;
          align-items: start;
          justify-content: start;
        }

        .community-showcase__embed-cta {
          justify-self: start;
          align-self: start;
        }

        .community-showcase__carousel {
          margin-right: -18px;
        }

        .community-showcase__rail {
          gap: 14px;
          padding: 2px 18px 16px 0;
          scroll-padding-inline: 0 18px;
          scroll-snap-type: x mandatory;
          scrollbar-width: none;
        }

        .community-showcase__rail::-webkit-scrollbar {
          display: none;
        }

        .community-showcase__pager {
          display: none;
        }

        .community-card {
          --community-card-panel-height: 424px;
          --community-card-top-height: 58px;
          --community-card-summary-min-height: 104px;
          --community-card-embed-min-height: 188px;
          flex-basis: min(76vw, 330px);
          padding: 16px;
          border-radius: 22px;
          scroll-snap-align: start;
        }

        .community-card__summary {
          font-size: 0.9rem;
        }

        .community-card__embed {
          flex-basis: 286px;
        }

        .community-card__panel {
          height: 424px;
        }

        .community-card__tabs {
          gap: 14px;
          overflow: hidden;
          white-space: nowrap;
        }

        .community-card__hf-row {
          grid-template-columns: minmax(0, 1fr) max-content;
        }

        .community-card__hf-commit,
        .community-card__hf-row--head .community-card__hf-size {
          display: none;
        }

        .all-route__head {
          align-items: flex-start;
        }

        .gallery {
          column-count: 2;
        }

        .all-grid {
          column-count: 2;
        }

        .hero h1 {
          font-size: clamp(3.2rem, 15vw, 4.8rem);
        }

        .viewer-route__title {
          --viewer-route-title-max-height: 76px;
          --viewer-route-title-min-font-size: 10px;
          font-size: var(--viewer-route-title-fit-size, clamp(2.2rem, 10vw, 3.4rem));
        }

        .viewer-route {
          gap: 12px;
          padding-top: 4px;
        }

        /* On viewer routes the hero renders empty; its 28px top padding plus
           the shell's 22px pushed the eyebrow ~50px down the phone screen. */
        body.route-viewer .page.route-viewer .shell {
          padding-top: 12px;
        }

        body.route-viewer .page.route-viewer .shell > .hero {
          padding-top: 0;
        }

        .viewer-route__title {
          margin: 6px 0 4px;
        }

        .viewer-route__head {
          position: relative;
          align-items: center;
          gap: 8px 18px;
          min-height: 60px;
        }

        .viewer-route__intro,
        .viewer-route__actions {
          transition: opacity 180ms ease, transform 180ms ease;
        }

        .viewer-route__mobile-selection {
          position: absolute;
          inset: 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 4px;
          opacity: 0;
          pointer-events: none;
          transform: translateY(6px);
          transition: opacity 180ms ease, transform 180ms ease;
        }

        .viewer-route__mobile-selection-label {
          color: var(--muted);
          font-size: 0.72rem;
          letter-spacing: 0.14em;
          text-transform: uppercase;
        }

        .viewer-route__mobile-selection-name {
          font-family: "Space Grotesk", sans-serif;
          font-size: clamp(1.08rem, 4.6vw, 1.34rem);
          line-height: 1.08;
          letter-spacing: -0.03em;
          color: var(--text);
          white-space: normal;
          overflow: visible;
          text-overflow: clip;
          overflow-wrap: anywhere;
          word-break: normal;
        }

        .viewer-route__mobile-selection-copy {
          font-size: clamp(1.08rem, 4.6vw, 1.34rem);
        }

        .viewer-route__mobile-selection-expand {
          font-size: 0.62rem;
        }

        .viewer-route__mobile-selection-name-segment {
          display: inline;
        }

        /* expanded glossary: the panel leaves overlay mode - the faded intro
           underneath stops sizing the head, the content defines the height and
           the graph rises to absorb what used to be dead space. If the panel
           would still get too tall, the NODE header row steps aside too. */
        .viewer-route__head.has-glossary-expanded {
          min-height: 0;
        }
        .viewer-route__head.has-glossary-expanded .viewer-route__intro,
        .viewer-route__head.has-glossary-expanded .viewer-route__actions,
        .viewer-route__head.has-glossary-expanded .viewer-route__mobile-backlink {
          display: none;
        }
        .viewer-route__head.has-glossary-expanded .viewer-route__mobile-selection {
          position: static;
          inset: auto;
          flex: 1 1 100%;
          width: 100%;
          justify-content: flex-start;
        }
        .viewer-route__mobile-selection.is-glossary-maximized .viewer-route__mobile-selection-label,
        .viewer-route__mobile-selection.is-glossary-maximized .viewer-route__mobile-selection-name-row {
          display: none;
        }

        .viewer-route__head.viewer-route__head--mobile-selection-active .viewer-route__intro,
        .viewer-route__head.viewer-route__head--mobile-selection-active .viewer-route__actions {
          opacity: 0;
          transform: translateY(-8px);
          pointer-events: none;
        }

        /* While a node is selected the STRIP owns the layout and the faded
           intro floats absolute underneath - previously it was the other way
           around, so the head kept reserving the tall title+pills height and
           the description clamp sat above a dead band. */
        .viewer-route__head.viewer-route__head--mobile-selection-active .viewer-route__intro {
          position: absolute;
          inset: 0;
        }

        .viewer-route__head.viewer-route__head--mobile-selection-active {
          min-height: 58px;
        }

        .viewer-route__head.viewer-route__head--mobile-selection-active .viewer-route__mobile-selection {
          position: static;
          inset: auto;
          flex: 1 1 100%;
          width: 100%;
          opacity: 1;
          transform: none;
          pointer-events: auto;
        }

        .viewer-route__mobile-backlink {
          position: absolute;
          inset: 0 102px 0 0;
          display: block;
          opacity: 0;
          pointer-events: none;
          transition: opacity 180ms ease;
        }

        .viewer-route__head.viewer-route__head--mobile-backlink-active .viewer-route__intro {
          opacity: 0;
          transform: translateY(-8px);
          pointer-events: none;
        }

        .viewer-route__head.viewer-route__head--mobile-backlink-active .viewer-route__mobile-selection {
          opacity: 0;
          transform: translateY(6px);
          pointer-events: none;
        }

        .viewer-route__head.viewer-route__head--mobile-backlink-active .viewer-route__mobile-backlink {
          opacity: 1;
          pointer-events: auto;
          cursor: pointer;
        }

        .viewer-route__head.viewer-route__head--mobile-backlink-active ~ .viewer-blog-float {
          display: none !important;
        }

        .page.route-viewer-family .viewer-route__blog-link,
        .page.route-viewer.viewer-community-article-active .viewer-route__blog-link {
          display: inline-flex;
        }

        .viewer-route__head.viewer-route__head--mobile-backlink-back-active .viewer-route__mobile-backlink-state--back,
        .viewer-route__head.viewer-route__head--mobile-backlink-node-active .viewer-route__mobile-backlink-state--node {
          opacity: 1;
          transform: none;
        }

        .viewer-route__actions .pill {
          font-size: 0.82rem;
        }

        .page.route-viewer-family .viewer-route__actions {
          width: 100%;
          align-items: center;
          justify-content: flex-start;
        }

        .page.route-viewer-family .viewer-route__actions #viewer-hf-link,
        .page.route-viewer-family .viewer-route__actions #viewer-model-card-btn {
          display: none;
        }

        #viewer-write-article-btn,
        #viewer-community-article-write {
          display: none;
        }

        body.route-viewer-article #viewer-write-article-btn,
        body.route-viewer-article #viewer-community-article-write {
          display: none !important;
        }

        .page.route-viewer-family .viewer-family-size--mobile {
          display: inline-flex;
          flex: 1 1 auto;
          max-width: calc(100% - 56px);
          justify-content: space-between;
          padding: 0;
          border: 0;
          background: transparent;
          box-shadow: none;
        }

        .page.route-viewer-family .viewer-family-size--mobile .viewer-family-size__slider {
          flex: 1 1 auto;
          min-width: 0;
          max-width: 148px;
        }

        body.route-viewer.route-viewer-family {
          overflow-y: auto;
        }

        .page.route-viewer.route-viewer-family {
          height: auto;
          overflow: visible;
        }

        .page.route-viewer.route-viewer-family .shell {
          height: auto;
          min-height: 100dvh;
          padding-bottom: 28px;
        }

        .page.route-viewer.route-viewer-family .viewer-frame__canvas {
          min-height: clamp(360px, 58vh, 620px);
        }

        body.route-viewer.viewer-notify-active {
          overflow-y: auto;
        }

        body.route-viewer.viewer-notify-active .page.route-viewer {
          height: auto;
          min-height: 100dvh;
          overflow: visible;
        }

        body.route-viewer.viewer-notify-active .page.route-viewer .shell {
          height: auto;
          min-height: 100dvh;
        }

        body.route-viewer.viewer-notify-active .page.route-viewer .viewer-route,
        body.route-viewer.viewer-notify-active .page.route-viewer .viewer-frame {
          flex: 0 0 auto;
        }

        body.route-viewer.viewer-notify-active .page.route-viewer .viewer-frame__canvas {
          min-height: clamp(344px, 50dvh, 500px);
        }

        .viewer-editorial {
          gap: 18px;
          padding: 22px 20px 24px;
          border-radius: 24px;
        }

        .viewer-editorial__deck,
        .viewer-editorial__question-grid,
        .viewer-editorial__member-grid,
        .viewer-editorial__level-grid,
        .viewer-editorial__trail-grid,
        .viewer-editorial__myth-grid,
        .viewer-editorial__compare-grid,
        .viewer-editorial__faq-grid,
        .viewer-editorial__claim-grid,
        .viewer-editorial__meaning-grid,
        .viewer-editorial__body {
          grid-template-columns: 1fr;
        }

        .viewer-editorial__aside {
          position: static;
        }

        .viewer-editorial__sections {
          gap: 26px;
        }

        .viewer-editorial__section {
          padding: 0;
          border: 0;
          border-radius: 0;
          background: none;
          box-shadow: none;
        }

        .viewer-editorial__section + .viewer-editorial__section {
          padding-top: 24px;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
        }

        .viewer-editorial__section-copy {
          gap: 12px;
        }

        .viewer-editorial__section-title {
          font-size: 1.16rem;
        }

        .viewer-editorial__title {
          font-size: clamp(1.72rem, 8vw, 2.52rem);
        }

        .viewer-editorial__byline {
          align-items: center;
          margin: 4px 0 6px;
        }

        .viewer-editorial__lede,
        .viewer-editorial__paragraph {
          font-size: 0.94rem;
          line-height: 1.72;
        }

        .viewer-editorial__deployment-filter {
          min-height: 34px;
          padding-inline: 12px;
          font-size: 0.74rem;
        }

        .viewer-editorial__deployment-table {
          min-width: 760px;
        }

        .viewer-editorial__deployment-table thead th,
        .viewer-editorial__deployment-table tbody td {
          padding: 12px 14px;
        }

        .viewer-editorial__sources-list {
          font-size: 0.84rem;
        }

        .newsletter-card {
          grid-template-columns: 1fr;
          justify-items: center;
          gap: 16px;
          padding: 22px 18px;
          text-align: center;
        }

        .newsletter-card__avatar {
          width: 78px;
          height: 78px;
        }

        .newsletter-form,
        .newsletter-card .newsletter-form {
          width: 100%;
          display: grid;
        }

        .newsletter-form__input,
        .newsletter-form__button {
          width: 100%;
        }

        .newsletter-modal {
          align-items: center;
          padding:
            calc(14px + env(safe-area-inset-top, 0px))
            14px
            calc(14px + env(safe-area-inset-bottom, 0px));
        }

        .newsletter-modal__card {
          padding: 28px 20px 22px;
          border-radius: 26px;
        }

        .newsletter-modal__avatar {
          width: 82px;
          height: 82px;
        }

        .viewer-editorial__attention-figure {
          margin-inline: -16px;
          padding: 20px 0 18px;
          border-radius: 20px;
        }

        .viewer-editorial__section--attention {
          padding-inline: 0;
        }

        .viewer-editorial__section--attention .viewer-editorial__section-copy {
          gap: 14px;
        }

        .viewer-editorial__attention-svg {
          width: calc(100% + 32px);
          margin-left: -16px;
        }

        .viewer-editorial__attention-svg .attention-figure__title,
        .viewer-editorial__attention-svg .attention-figure__subtitle,
        .viewer-editorial__attention-svg .attention-figure__scale--desktop {
          display: none;
        }

        .viewer-editorial__attention-svg .attention-figure__title--mobile,
        .viewer-editorial__attention-svg .attention-figure__subtitle--mobile,
        .viewer-editorial__attention-svg .attention-figure__scale--mobile {
          display: inline;
        }

        .viewer-editorial__attention-svg .attention-figure__title--mobile {
          font-size: 32px;
          letter-spacing: 2.2px;
        }

        .viewer-editorial__attention-svg .attention-figure__subtitle--mobile {
          font-size: 15px;
          letter-spacing: 1.4px;
        }

        .viewer-editorial__attention-svg .attention-figure__row-label {
          font-size: 18px;
        }

        .viewer-editorial__attention-svg .attention-figure__row-hint,
        .viewer-editorial__attention-svg .attention-figure__scale-label,
        .viewer-editorial__attention-svg .attention-figure__scale-note {
          font-size: 13px;
        }

        .viewer-editorial__attention-svg .attention-figure__repeat-label {
          font-size: 20px;
          letter-spacing: 1.2px;
        }

        .viewer-editorial__attention-svg .attention-figure__ratio {
          font-size: 22px;
        }

        .viewer-editorial__attention-svg .attention-figure__scene--desktop {
          display: none;
        }

        .viewer-editorial__attention-svg .attention-figure__scene--mobile {
          display: block;
        }

        .viewer-editorial__attention-caption {
          font-size: 0.9rem;
          line-height: 1.62;
          padding-inline: 20px;
        }

        .viewer-editorial__attention-meta {
          padding-inline: 20px;
        }

        .viewer-editorial__attention-pill {
          font-size: 0.78rem;
        }

        .viewer-crosslink-portal {
          width: 82px;
          height: 82px;
        }

        .viewer-crosslink-portal--sample {
          width: 82px;
          height: 82px;
        }

        .viewer-frame__bar {
          gap: 12px;
          padding: 13px 14px;
        }

        .viewer-frame__status {
          flex: 0 0 auto;
          min-width: 0;
          white-space: nowrap;
          font-size: 0.76rem;
        }

        .viewer-frame__bar .viewer-granularity {
          margin-left: 0;
          flex: 0 1 auto;
          min-width: 0;
          width: auto;
        }

        /* The compact bar has no room for the nav pills; mobile falls back
           to in-graph gestures (desktop always shows them). */
        .viewer-frame__bar .viewer-nav-history {
          display: none;
        }

        .viewer-granularity {
          width: auto;
          justify-content: flex-start;
        }

        .viewer-granularity__value {
          display: none;
        }

        .viewer-granularity__slider {
          flex: 0 1 96px;
          min-width: 0;
          width: 92px;
          max-width: 104px;
        }

        .pill--home {
          width: 44px;
          height: 44px;
          padding: 0;
          justify-content: center;
          gap: 0;
          background: transparent;
          border-color: transparent;
          box-shadow: none;
          color: var(--text);
        }

        .pill--home::before {
          content: none;
        }

        .pill--home .pill__icon--desktop {
          display: none;
        }

        .pill--home .pill__label--desktop {
          display: none;
        }

        .pill--home .pill__label--mobile-arrow {
          display: inline;
          font-size: 1.18rem;
          line-height: 1;
        }

        .pill--home:hover,
        .pill--home:focus-visible,
        .pill--home:active {
          background: rgba(255, 255, 255, 0.06);
          border-color: var(--stroke-strong);
        }

        .pill--hf-link {
          gap: 8px;
        }

        .pill--hf-link::before {
          content: none;
        }

        .pill--hf-link .pill__icon {
          display: inline-flex;
          width: 18px;
          height: 18px;
          color: #ffffff;
        }

        .pill--hf-link .pill__label--desktop {
          display: none;
        }

        .hero {
          padding-top: 28px;
        }

        body.route-landing .hero__media,
        .page.route-landing .hero__media {
          display: block;
          width: 100%;
          margin: 18px 0 0;
        }

        body.route-landing .hero-video-card,
        .page.route-landing .hero-video-card {
          border-radius: 30px;
          box-shadow:
            0 30px 82px rgba(0, 0, 0, 0.42),
            0 0 0 1px rgba(255, 255, 255, 0.07),
            0 0 60px rgba(136, 215, 255, 0.1);
        }

        body.route-landing .hero-video-card__inner,
        .page.route-landing .hero-video-card__inner {
          border-radius: 29px;
        }

        body.route-landing .hero-video-card__video,
        .page.route-landing .hero-video-card__video {
          width: 100%;
          height: auto;
          aspect-ratio: 129 / 198;
          object-fit: contain;
          object-position: center;
        }

        body.route-landing #cta-model-card-btn,
        .page.route-landing #cta-model-card-btn {
          display: none;
        }

        .gallery-card__family-strip {
          grid-template-columns: repeat(2, minmax(0, 1fr));
        }
      }

      @media (min-width: 861px) {
        .viewer-route__head {
          flex-wrap: nowrap;
        }

        .page.route-viewer-family .viewer-route__head {
          position: relative;
          align-items: center;
          min-height: 92px;
        }

        .page.route-viewer-family .viewer-route__intro {
          transition: opacity 180ms ease, transform 180ms ease;
        }

        .page.route-viewer-family .viewer-route__mobile-selection {
          position: absolute;
          inset: 0 72px 0 0;
          display: flex;
          flex-direction: column;
          justify-content: center;
          gap: 7px;
          opacity: 0;
          pointer-events: none;
          transform: translateY(6px);
          transition: opacity 180ms ease, transform 180ms ease;
        }

        .page.route-viewer-family .viewer-route__mobile-selection-label {
          color: var(--muted);
          font-size: 0.74rem;
          letter-spacing: 0.14em;
          text-transform: uppercase;
        }

        .page.route-viewer-family .viewer-route__mobile-selection-name {
          max-width: min(980px, 100%);
          font-family: "Inter", sans-serif;
          font-size: clamp(1.35rem, 3.1vw, 2.45rem);
          line-height: 1.02;
          letter-spacing: -0.045em;
          color: var(--text);
          overflow-wrap: anywhere;
        }

        .page.route-viewer-family .viewer-route__mobile-selection-copy {
          font-size: clamp(1.35rem, 3.1vw, 2.45rem);
        }

        .page.route-viewer-family .viewer-route__mobile-selection-expand {
          font-size: 0.68rem;
          padding: 0.46rem 0.82rem;
        }

        .page.route-viewer-family
          .viewer-route__head.viewer-route__head--mobile-selection-active
          .viewer-route__intro {
          opacity: 0;
          transform: translateY(-8px);
          pointer-events: none;
        }

        .page.route-viewer-family
          .viewer-route__head.viewer-route__head--mobile-selection-active
          .viewer-route__mobile-selection {
          opacity: 1;
          transform: none;
          pointer-events: auto;
        }

        .page.route-viewer-family .viewer-route__mobile-backlink {
          position: absolute;
          inset: 0 108px 0 0;
          display: block;
          opacity: 0;
          pointer-events: none;
          transition: opacity 180ms ease;
        }

        .page.route-viewer-family
          .viewer-route__head.viewer-route__head--mobile-backlink-active
          .viewer-route__intro {
          opacity: 0;
          transform: translateY(-8px);
          pointer-events: none;
        }

        .page.route-viewer-family
          .viewer-route__head.viewer-route__head--mobile-backlink-active
          .viewer-route__mobile-selection {
          opacity: 0;
          transform: translateY(6px);
          pointer-events: none;
        }

        .page.route-viewer-family
          .viewer-route__head.viewer-route__head--mobile-backlink-active
          .viewer-route__mobile-backlink {
          opacity: 1;
        }

        .page.route-viewer-family
          .viewer-route__head.viewer-route__head--mobile-backlink-back-active
          .viewer-route__mobile-backlink-state--back,
        .page.route-viewer-family
          .viewer-route__head.viewer-route__head--mobile-backlink-node-active
          .viewer-route__mobile-backlink-state--node {
          opacity: 1;
          transform: none;
        }

        .viewer-route__title {
          white-space: nowrap;
        }

        .page.route-viewer-family .viewer-family-size--mobile {
          display: none;
        }

        .page.route-viewer-family .viewer-family-size--desktop {
          display: inline-flex;
        }

        .page.route-viewer-family #viewer-hf-link,
        .page.route-viewer-family #viewer-model-card-btn {
          display: none;
        }

        .page.route-viewer-family .viewer-route__blog-pill,
        .page.route-viewer.viewer-community-article-active .viewer-route__blog-pill {
          display: inline-flex;
        }

        .page.route-viewer.route-viewer-family .viewer-frame__canvas {
          min-height: clamp(500px, 66vh, 820px);
        }

        .viewer-editorial__body {
          grid-template-columns: minmax(0, 1.34fr) minmax(260px, 0.82fr);
        }
      }

      @media (max-width: 620px) {
        .gallery {
          column-count: 1;
        }

        .all-grid {
          column-count: 1;
        }
      }

      .laser-layer {
        position: fixed;
        inset: 0;
        z-index: 260;
        display: none;
        pointer-events: none;
      }

      body.laser-active .laser-layer {
        display: block;
      }

      body.laser-active,
      body.laser-active * {
        cursor: none !important;
      }

      body.laser-active iframe {
        pointer-events: none !important;
      }