Restore Space styling and add native Hugging Face login

README.md

@@ -4,6 +4,8 @@ emoji: 🟩
 colorFrom: green
 colorTo: blue
 sdk: static
+hf_oauth: true
+hf_oauth_expiration_minutes: 43200
 pinned: false
 short_description: Interactive architecture graph for any HF model
 models:

hf-shell-css-04b3600b8d38.css

@@ -0,0 +1,1423 @@
+
+      /* /next landing variant (hfnx-*): catalog-first hero replacing the SPA
+         hero + gallery; everything below (articles, showcase, products,
+         footer) stays the SPA's own. Active only with ?next_landing=1. */
+      /* Keep main.hero alive (it occupies the shell grid's "hero" area and
+         the brand nav sits in the sibling "nav" area - removing the hero
+         collapses the grid and the nav drifts). Hide only its children. */
+      body.hfnx-active main.hero[data-page="landing"] > *:not(.hfnx) { display: none !important; }
+      /* flatten the hero's own grid: its column template (incl. a minmax
+         500px video column) survives even with children hidden, making the
+         grid wider than the viewport and pushing the centered title right */
+      body.hfnx-active main.hero[data-page="landing"] {
+        display: block !important; width: 100%; max-width: 100%;
+      }
+      body.hfnx-active .gallery-section[data-page="landing"] { display: none !important; }
+      /* hfnx owns the top chrome: hide the SPA's top-right brand bar and host
+         the adopted .brand-stack (real product dropdown) top-LEFT instead */
+      body.hfnx-active .landing-nav-wrap { display: none !important; }
+      .hfnx { display: none; }
+      body.hfnx-active .hfnx { display: block; grid-column: 1 / -1; width: 100%; }
+      /* Route policy for the injected hfnx block: the landing route gets the
+         full hfnx layout; the logged-in dashboard/bookmarks (route-hf-models)
+         and the feature/showcase pages keep ONLY the top menu (brand + nav +
+         auth chip) so the site chrome stays consistent; every other route
+         (article login/editor/admin, blog preview, viewer, owner) hides hfnx
+         entirely - without this the landing hero renders on top of those
+         pages because hfnx forces main.hero visible. */
+      body.hfnx-active.route-hf-models .hfnx > *:not(.hfnx-top),
+      body.hfnx-active.route-hf-watchlist .hfnx > *:not(.hfnx-top),
+      body.hfnx-active.route-hf-prerelease .hfnx > *:not(.hfnx-top),
+      body.hfnx-active.route-hf-blog-index .hfnx > *:not(.hfnx-top) { display: none !important; }
+      body.hfnx-active.route-hf-watchlist .hfnx,
+      body.hfnx-active.route-hf-prerelease .hfnx,
+      body.hfnx-active.route-hf-blog-index .hfnx { padding-bottom: 0; }
+      /* the OAuth login / loading screens (route-hf-models without a content
+         surface) were designed full-viewport without chrome - no navbar */
+      body.hfnx-active.route-hf-models:not(.hf-models-content-active) .hfnx { display: none !important; }
+      body.hfnx-active.route-hf-models .hfnx { padding-bottom: 6px; }
+      /* feature + placement pages were designed to stand alone: no navbar,
+         and no landing sections below (interactive-articles rail) */
+      body.hfnx-active.route-hf-feature-preview .hfnx,
+      .page.route-hf-feature-preview .hfnx { display: none !important; }
+      body.route-hf-feature-preview .blogs-with-graphs { display: none !important; }
+      /* the interactive-articles rail is a landing section - never render it
+         on any other route (viewer, owner galleries, blog/docs pages, ...);
+         the blog index reuses the rail's card styling and hydrated figures,
+         so its own section is exempt */
+      body:not(.route-landing) .blogs-with-graphs:not(.hf-blog-index),
+      .page:not(.route-landing) .blogs-with-graphs:not(.hf-blog-index) { display: none !important; }
+      /* the blog/docs panel has no named grid area - without an explicit
+         span, shell auto-placement drops it into the narrow "nav" column
+         (squeezing the hero/navbar to the leftover fraction) as soon as the
+         rail above it is hidden */
+      .page.route-hf-blog-preview .hf-blog-preview,
+      body.route-hf-blog-preview .hf-blog-preview {
+        grid-column: 1 / -1;
+      }
+      .page.route-hf-watchlist .hf-watchlist-page,
+      body.route-hf-watchlist .hf-watchlist-page {
+        grid-column: 1 / -1;
+        width: 100%;
+        justify-self: stretch;
+      }
+      .page.route-hf-blog-index .hf-blog-index,
+      body.route-hf-blog-index .hf-blog-index {
+        grid-column: 1 / -1;
+        width: 100%;
+        justify-self: stretch;
+      }
+      /* the prerelease section reuses the .hf-blog-preview container exactly
+         (width min(100%,1040px), centered) - span the shell columns and pin
+         the blog article width/margins so the box centers like the blog */
+      .page.route-hf-prerelease .hf-prerelease,
+      body.route-hf-prerelease .hf-prerelease,
+      /* companion mode: same article box, shown below the viewer on the
+         normal model route (route class is the viewer's, not prerelease's) */
+      .page .hf-prerelease.hf-prerelease--companion,
+      body .hf-prerelease.hf-prerelease--companion {
+        grid-column: 1 / -1;
+        width: min(100%, 1040px);
+        margin: clamp(24px, 5vw, 62px) auto clamp(42px, 7vw, 92px);
+        justify-self: center;
+      }
+      /* let the injected panel fill the blog-width container (drop the
+         fragment's own max-widths/padding so it matches the blog article box) */
+      .hf-prerelease .k3wrap,
+      .hf-prerelease .wrap { max-width: none; margin: 0; padding: 0; }
+      .hf-blog-index__inner {
+        max-width: 900px;
+        margin: 0 auto;
+        padding: 16px 22px 80px;
+      }
+      .hf-blog-index__crumbs { font-size: 14px; color: #7d92ab; margin: 0 0 26px; }
+      .hf-blog-index__crumbs a { color: #9db4cc; text-decoration: none; }
+      .hf-blog-index__title { font-size: 34px; margin: 0 0 8px; color: #eef4fb; letter-spacing: -0.01em; }
+      .hf-blog-index__lede { color: #9db4cc; margin: 0 0 34px; max-width: 640px; font-size: 16px; }
+      .hf-blog-index__post {
+        display: flex;
+        gap: 20px;
+        align-items: center;
+        text-decoration: none;
+        color: inherit;
+        border: 1px solid rgba(125, 146, 171, 0.18);
+        border-radius: 16px;
+        padding: 18px;
+        margin-bottom: 18px;
+        background: rgba(13, 21, 36, 0.6);
+        transition: border-color 0.15s ease;
+      }
+      .hf-blog-index__post:hover { border-color: rgba(156, 255, 99, 0.45); }
+      .hf-blog-index__thumb {
+        display: block;
+        flex: 0 0 210px;
+        width: 210px;
+        border-radius: 10px;
+        overflow: hidden;
+        background: rgba(5, 9, 20, 0.7);
+      }
+      .hf-blog-index__thumb img { display: block; width: 100%; height: auto; }
+      .hf-blog-index__thumb--figure { aspect-ratio: 404 / 238; position: relative; }
+      .hf-blog-index__still {
+        display: block; width: 100%; height: 100%;
+        position: absolute; top: 0; left: 0; object-fit: cover;
+      }
+      .hf-blog-index__thumb--figure .hf-blog-index__figurebox {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 404px;
+        height: 238px;
+        transform-origin: top left;
+        pointer-events: none;
+        --blogs-figure-height: 238px;
+        /* stays hidden (still shows through) until a real scale is applied */
+        opacity: 0;
+      }
+      .hf-blog-index__thumb--figure .hf-blog-index__figurebox[data-scaled="true"] {
+        opacity: 1;
+      }
+      /* the rail sizes the figure wells for its card grid (the LiquidAI one
+         is a narrow --compact well); in the index thumb the cloned well must
+         fill the whole 404x238 stage */
+      .hf-blog-index__figurebox .blogs-with-graphs__image-wrap {
+        display: block !important;
+        width: 404px !important;
+        max-width: none !important;
+        height: 238px !important;
+        margin: 0 !important;
+        padding: 0 !important;
+      }
+      .hf-blog-index__figurebox .blogs-with-graphs__live {
+        width: 100% !important;
+        height: 238px !important;
+        min-height: 238px !important;
+      }
+      .hf-blog-index__figurebox [data-blogs-figure-source] {
+        width: 100% !important;
+        height: 100% !important;
+      }
+      .hf-blog-index__body { min-width: 0; }
+      .hf-blog-index__body h2 { margin: 0 0 6px; font-size: 20px; color: #eef4fb; }
+      .hf-blog-index__body p { margin: 0 0 10px; color: #9db4cc; font-size: 15px; line-height: 1.55; }
+      .hf-blog-index__meta { color: #62788f; font-size: 13px; }
+      .hf-blog-index__date {
+        font-size: 11.5px;
+        font-weight: 700;
+        letter-spacing: 0.12em;
+        text-transform: uppercase;
+      }
+      @media (max-width: 640px) {
+        .hf-blog-index__post { flex-direction: column; align-items: stretch; }
+        .hf-blog-index__thumb { flex: none; width: 100%; }
+      }
+      .hf-blog-index__backlinks { margin-top: 40px; color: #9db4cc; font-size: 15px; }
+      .hf-blog-index__backlinks a { color: #88d7ff; text-decoration: none; }
+      body.hfnx-active.route-hf-models .hfnx-top,
+      body.hfnx-active.route-hf-watchlist .hfnx-top,
+      body.hfnx-active.route-hf-blog-index .hfnx-top {
+        position: relative;
+        z-index: 20;
+        /* mirror the landing hero container - min(100vw - 52px, 1560px)
+           centered - so the brand sits 26px from the side and 24px from the
+           top on every route the navbar appears on */
+        width: min(100%, 1612px);
+        margin: 0 auto 8px;
+        padding: 24px 26px 10px;
+        border-bottom: 0;
+        background: transparent;
+        backdrop-filter: blur(18px);
+      }
+      /* prerelease reuses the blog-article route chrome exactly: the shell
+         already insets it, so the navbar only needs a 2px top nudge (matches
+         route-hf-blog-preview, not the wider blog-index navbar) */
+      body.hfnx-active.route-hf-prerelease .hfnx-top {
+        position: relative;
+        z-index: 20;
+        width: 100%;
+        margin: 0 0 8px;
+        padding: 2px 0 10px;
+        border-bottom: 0;
+        background: transparent;
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+      /* the blog index is a plain scrolling page - the blurred navbar plate
+         reads as a stray rectangle on it */
+      body.hfnx-active.route-hf-blog-index .hfnx-top,
+      body.hfnx-active.route-hf-prerelease .hfnx-top {
+        backdrop-filter: none;
+        -webkit-backdrop-filter: none;
+      }
+      body.hfnx-active.route-hf-models.hf-models-content-active .hfnx {
+        padding-bottom: 0;
+      }
+      body.hfnx-active.route-hf-models.hf-models-content-active .hf-models-page:not(.hf-article-login-page) {
+        align-content: start;
+        align-items: stretch;
+        min-height: 0;
+        padding-top: 0;
+      }
+      body.hfnx-active.route-hf-models.hf-models-content-active .hf-models-shell {
+        width: min(100%, 1240px);
+        margin: 0 auto;
+      }
+      body.hfnx-active.route-hf-article-login .hfnx,
+      body.hfnx-active.route-hf-article-picker .hfnx,
+      body.hfnx-active.route-hf-article-editor .hfnx,
+      body.hfnx-active.route-hf-article-admin .hfnx,
+      body.hfnx-active.route-viewer .hfnx,
+      body.hfnx-active.route-owner .hfnx { display: none !important; }
+      /* the blog preview (quickstart guide) keeps the top menu like the
+         dashboard routes - same landing-mirrored geometry */
+      body.hfnx-active.route-hf-blog-preview .hfnx > *:not(.hfnx-top) { display: none !important; }
+      body.hfnx-active.route-hf-blog-preview .hfnx { padding-bottom: 0; }
+      body.hfnx-active.route-hf-blog-preview .hfnx-top {
+        position: relative;
+        z-index: 20;
+        /* the landing shell already insets this route 26px/22px - only a
+           2px top nudge is needed to land the brand at the usual 26/24 */
+        width: 100%;
+        margin: 0 0 8px;
+        padding: 2px 0 10px;
+        border-bottom: 0;
+        background: transparent;
+        backdrop-filter: blur(18px);
+      }
+      .hfnx-top { display: flex; align-items: center; gap: 22px; padding: 2px 0 6px; }
+      /* The landing brand-stack was built for the top-RIGHT corner: trigger
+         align-self flex-end + a hover translateX slide that aligns it with
+         the wider dropdown. Anchored top-LEFT it must not move at all - the
+         menu drops down left-aligned underneath instead. */
+      /* the hero h1 (a transformed sibling painted later) otherwise sits
+         ABOVE the open dropdown and steals :hover over its right half -
+         keep the whole top bar, menu included, on top */
+      body.hfnx-active .hfnx-top { position: relative; z-index: 30; }
+      body.hfnx-active .hfnx-top .brand-stack { align-items: flex-start; width: max-content; }
+      body.hfnx-active .hfnx-top .brand-stack::after {
+        left: -24px;
+        right: -40px;
+        height: 42px;
+      }
+      body.hfnx-active .hfnx-top .brand-stack__trigger {
+        align-self: flex-start !important; transform: none !important;
+      }
+      body.hfnx-active .hfnx-top .brand-stack:hover .brand-stack__trigger,
+      body.hfnx-active .hfnx-top .brand-stack:focus-within .brand-stack__trigger {
+        transform: none !important;
+      }
+      body.hfnx-active .hfnx-top .brand-stack__menu {
+        position: absolute !important; left: 0 !important; right: auto !important;
+        transform: translate(0, -6px) !important;
+        isolation: isolate;
+      }
+      body.hfnx-active .hfnx-top .brand-stack:hover .brand-stack__menu,
+      body.hfnx-active .hfnx-top .brand-stack:focus-within .brand-stack__menu,
+      body.hfnx-active .hfnx-top .brand-stack.is-open .brand-stack__menu {
+        transform: translate(0, 0) !important;
+      }
+      body.hfnx-active .hfnx-top .brand-stack__item {
+        position: relative;
+        z-index: 1;
+        border-radius: 16px;
+        transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
+      }
+      body.hfnx-active .hfnx-top .brand-stack__item:hover,
+      body.hfnx-active .hfnx-top .brand-stack__item:focus-visible,
+      body.hfnx-active .hfnx-top .brand-stack__item.is-nearest {
+        opacity: 1;
+        transform: translateY(-1px);
+        background: rgba(255, 255, 255, 0.055);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.2);
+        outline: none;
+      }
+      /* while the dropdown is open the trigger highlights like a first menu
+         item when the pointer is nearest to it */
+      body.hfnx-active .hfnx-top .brand-stack__trigger {
+        border-radius: 16px;
+        transition: opacity 180ms ease, background 180ms ease, box-shadow 180ms ease;
+      }
+      body.hfnx-active .hfnx-top .brand-stack:hover .brand-stack__trigger.is-nearest,
+      body.hfnx-active .hfnx-top .brand-stack:focus-within .brand-stack__trigger.is-nearest {
+        opacity: 1;
+        background: rgba(255, 255, 255, 0.055);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 28px rgba(0, 0, 0, 0.2);
+      }
+      .hfnx-top__nav { display: flex; align-items: center; gap: 18px; margin-left: 8px; }
+      .hfnx-nav-menu {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+      }
+      .hfnx-nav-menu::after {
+        content: "";
+        position: absolute;
+        top: 100%;
+        left: -18px;
+        right: -18px;
+        height: 14px;
+        z-index: 49;
+      }
+      .hfnx-nav-menu__panel {
+        position: absolute;
+        top: calc(100% + 10px);
+        /* item text (1px border + 7px panel pad + 12px item pad) left-aligns
+           with the trigger text */
+        left: -20px;
+        z-index: 50;
+        display: grid;
+        gap: 2px;
+        min-width: 184px;
+        padding: 7px;
+        border: 1px solid rgba(255, 255, 255, 0.11);
+        border-radius: 16px;
+        background: rgba(8, 15, 27, 0.86);
+        box-shadow: 0 22px 54px rgba(0, 0, 0, 0.38);
+        backdrop-filter: blur(18px) saturate(1.15);
+        -webkit-backdrop-filter: blur(18px) saturate(1.15);
+        opacity: 0;
+        pointer-events: none;
+        transform: translate(0, -4px);
+        transition: opacity 150ms ease, transform 150ms ease;
+      }
+      .hfnx-nav-menu:hover .hfnx-nav-menu__panel,
+      .hfnx-nav-menu:focus-within .hfnx-nav-menu__panel {
+        opacity: 1;
+        pointer-events: auto;
+        transform: translate(0, 0);
+      }
+      .hfnx-nav-menu__item {
+        display: block;
+        padding: 9px 12px;
+        border-radius: 11px;
+        line-height: 1;
+      }
+      .hfnx-nav-menu__item:hover,
+      .hfnx-nav-menu__item:focus-visible {
+        background: rgba(255, 255, 255, 0.065);
+      }
+      .hfnx-auth {
+        margin-left: auto; position: relative; display: flex; align-items: center; gap: 9px;
+      }
+      .hfnx-auth__pill {
+        display: inline-flex; align-items: center; gap: 0; padding: 8px 13px;
+        border-radius: 999px; border: 1px solid rgba(136, 215, 255, 0.18);
+        color: var(--muted-strong, #c5d0e3); background: rgba(136, 215, 255, 0.045);
+        font: 600 13px "Inter", sans-serif; line-height: 1; white-space: nowrap;
+        transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s;
+      }
+      /* The short model label only surfaces on very narrow phones (see the
+         max-width 374px block below); everywhere else the full name shows. */
+      .hfnx-auth__pill-name-short { display: none; }
+      .hfnx-auth__pill-status { margin-left: 4px; color: var(--sky, #88d7ff); }
+      .hfnx-auth__pill[data-pill-live="1"] .hfnx-auth__pill-status { color: var(--lime, #7cff9b); font-weight: 700; }
+      .hfnx-auth__pill[data-pill-live="1"] { border-color: rgba(124, 255, 155, 0.42); background: rgba(124, 255, 155, 0.08); }
+      .hfnx-auth__pill:hover,
+      .hfnx-auth__pill:focus-visible {
+        color: var(--text, #f5f8ff); border-color: rgba(136, 215, 255, 0.46);
+        background: rgba(136, 215, 255, 0.09); transform: translateY(-1px); outline: none;
+      }
+      @media (max-width: 640px) {
+        /* Phone: brand + account on the first row, nav links wrap to a
+           second row that scrolls horizontally (no visible scrollbar). */
+        .hfnx-top { flex-wrap: wrap; gap: 8px 16px; }
+        .hfnx-top__nav {
+          order: 3;
+          flex: 1 0 100%;
+          margin-left: 0;
+          overflow-x: auto;
+          scrollbar-width: none;
+          -webkit-overflow-scrolling: touch;
+          padding: 2px 0 4px;
+        }
+        .hfnx-top__nav::-webkit-scrollbar { display: none; }
+        .hfnx-top__nav a { white-space: nowrap; }
+        .hfnx-nav-menu__panel { display: none; }
+        .hfnx-auth { gap: 6px; }
+        .hfnx-auth__pill {
+          flex-direction: column;
+          justify-content: center;
+          gap: 2px;
+          padding: 6px 8px;
+          font-size: 12px;
+          line-height: 1;
+        }
+        .hfnx-auth__pill-status { margin-left: 0; }
+        .hfnx-auth__login { padding-left: 10px; padding-right: 10px; }
+      }
+      .hfnx-auth__login {
+        display: inline-block; padding: 9px 18px; border-radius: 999px;
+        border: 1px solid var(--stroke, rgba(255,255,255,0.1));
+        color: var(--muted-strong, #c5d0e3); font: 600 13.5px "Inter", sans-serif;
+        background: rgba(255, 255, 255, 0.04); transition: all 0.15s; cursor: pointer;
+      }
+      .hfnx-auth__login:hover { border-color: rgba(156, 255, 99, 0.4); color: var(--text, #f5f8ff); }
+      /* Narrow phones: the stacked release pill still wrapped the top row on
+         real devices (brand on line one, pill + Log in on line two). Shrink
+         the pill and the Log in button so brand + pill + login share ONE row
+         down to 320px. These blocks sit AFTER the base .hfnx-auth__login rule
+         on purpose: same specificity, so source order is what lets the
+         media-query padding/font-size win. */
+      @media (max-width: 480px) {
+        .hfnx-top { gap: 8px 10px; }
+        .hfnx-auth__pill { font-size: 11px; padding: 6px 7px; }
+        .hfnx-auth__login { padding: 8px 9px; font-size: 12.5px; }
+      }
+      @media (max-width: 374px) {
+        .hfnx-auth { gap: 4px; }
+        .hfnx-auth__pill { font-size: 10.5px; padding: 5px 6px; }
+        /* "Qwen3.8-Max" no longer fits next to the brand at 320-374px wide;
+           swap in the short label (kept in sync by appendQwen38Pill). */
+        .hfnx-auth__pill-name-long { display: none; }
+        .hfnx-auth__pill-name-short { display: inline; }
+        .hfnx-auth__login { padding: 7px 8px; font-size: 12px; }
+      }
+      .hfnx-auth__chip {
+        display: flex; align-items: center; gap: 9px; padding: 5px 13px 5px 6px;
+        border-radius: 999px; border: 1px solid var(--stroke, rgba(255,255,255,0.1));
+        background: rgba(255, 255, 255, 0.04); cursor: pointer;
+        font: 600 13.5px "Inter", sans-serif; color: var(--text, #f5f8ff);
+        transition: border-color 0.15s;
+      }
+      .hfnx-auth__chip:hover { border-color: rgba(156, 255, 99, 0.4); }
+      .hfnx-auth__avatar {
+        width: 26px; height: 26px; border-radius: 50%; object-fit: cover;
+        background: #fff; display: block;
+      }
+      .hfnx-auth__avatar--letter {
+        display: flex; align-items: center; justify-content: center;
+        background: linear-gradient(135deg, rgba(156, 255, 99, 0.9), rgba(136, 215, 255, 0.85));
+        color: #07100d; font: 700 13px "Inter", sans-serif;
+      }
+      .hfnx-auth__menu {
+        position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; min-width: 180px;
+        display: none; padding: 6px;
+        background: #0a121f; border: 1px solid var(--stroke, rgba(255,255,255,0.1));
+        border-radius: 14px; box-shadow: 0 24px 54px rgba(0, 0, 0, 0.45);
+      }
+      .hfnx-auth__menu.is-open { display: grid; gap: 2px; }
+      .hfnx-auth__item {
+        display: block; width: 100%; text-align: left; padding: 9px 14px; border: 0;
+        border-radius: 10px; background: transparent; cursor: pointer;
+        color: var(--muted-strong, #c5d0e3); font: 500 13.5px "Inter", sans-serif;
+      }
+      .hfnx-auth__item:hover { background: rgba(255, 255, 255, 0.05); color: var(--text, #f5f8ff); }
+      .hfnx-top__nav a { color: var(--muted, #91a0ba); font-size: 13.5px; transition: color 0.15s; }
+      .hfnx-top__nav a:hover { color: var(--text, #f5f8ff); }
+      .hfnx-hero { padding: 30px 0 0; text-align: center; }
+      /* desktop: slide the title + search bar aside while the brand product
+         menu is open so the dropdown never overlaps them */
+      .hfnx-hero, .hfnx-command { transition: transform 240ms ease; }
+      @media (min-width: 981px) {
+        body.hfnx-menu-open .hfnx-hero,
+        body.hfnx-menu-open .hfnx-command { transform: translateX(150px); }
+      }
+      /* max-width:none beats the route-landing .hero h1 { max-width:10.5ch }
+         rule - with nowrap text that shrunk box centered while the TEXT
+         overflowed it to the right, looking off-center */
+      body.hfnx-active .hfnx-hero h1 {
+        margin: 0 auto; white-space: nowrap; max-width: none !important;
+        width: 100%;
+        font-size: clamp(1.3rem, 4.2vw, 3.3rem); font-weight: 800;
+        line-height: 1.04; letter-spacing: -0.04em;
+      }
+      .hfnx-hero h1 em { font-style: normal; color: var(--lime, #9cff63); }
+      .hfnx-hero p {
+        margin: 16px auto 0; max-width: 56ch; color: var(--muted-strong, #c5d0e3);
+        font-size: 15.5px; line-height: 1.6;
+      }
+      .hfnx-command { padding: 26px 0 16px; }
+      /* The search+filters block follows the scroll over the results (like
+         /models) - also with an empty (trending) field, as a reminder that
+         everything shown is searchable. position:sticky scoped to the
+         catalog section releases it automatically once the results end,
+         and re-engages when scrolling back up into them. */
+      /* .page's overflow:hidden makes it the sticky containing block (which
+         never scrolls) - overflow:clip clips identically without creating a
+         scroll container, so the stick block tracks the viewport */
+      body.hfnx-active .page.route-landing { overflow: clip; }
+      /* Armed (searching) but NOT pinned: zero visual change - the block is
+         fully transparent and identical to the normal page. The glass +
+         bottom fade live on a pseudo-layer that fades in only when pinned. */
+      /* top:-72px lets the search bar + button scroll briefly out of view;
+         the compact overlay then glides in 72px later (image-1 trigger). The
+         pinned state snaps top back to 0 - the FLIP glide masks the jump. */
+      .hfnx-stick-anchor { display: block; height: 0; width: 100%; }
+      /* the pin swap collapses the stick by ~200px (spacer-compensated, net
+         zero). Chrome's scroll anchoring may still pick a node INSIDE the
+         stick as its anchor and "follow" it upward when the layout collapses,
+         scrolling the page back to the top mid-gesture on mobile (observed
+         via mobile_scroll_snapback field events: ~230px up, no programmatic
+         call, stick pinned). Exclude the whole stick from anchor selection. */
+      .hfnx-stick, .hfnx-stick *, #hfnx-stick-spacer { overflow-anchor: none; }
+      .hfnx-stick.is-sticky { position: sticky; top: -72px; z-index: 6; }
+      .hfnx-stick.is-sticky.is-pinned { top: 0; }
+      /* same non-blur transparent-black as the /models toolbar, with the
+         fade-out starting above the bar's bottom edge like /models */
+      .hfnx-stick::before {
+        content: ""; position: absolute; inset: 0 -22px -34px -22px; z-index: -1;
+        background: linear-gradient(180deg, rgba(5, 9, 20, 0.97) calc(100% - 52px), rgba(5, 9, 20, 0));
+        opacity: 0; transition: opacity 220ms ease; pointer-events: none;
+      }
+      .hfnx-stick.is-pinned::before { opacity: 1; }
+      .hfnx-stick.arch-open::before { opacity: 1; }
+      /* past the pin threshold but the compact swap still waiting for the
+         gesture to settle (coarse pointers): show the glass right away so
+         the expanded pills never float transparently over the grid */
+      .hfnx-stick.is-cover::before { opacity: 1; }
+      /* the swap animation's frozen snapshot lives inside a wrap that IS
+         the glass - the snapshot's own backdrop would double-darken it */
+      .hfnx-stick--swap-clone::before { display: none !important; }
+      /* while the morph wrap is the glass, the facsimile beneath keeps its
+         own backdrop off - two stacked 0.97 gradients turn the fade skirt
+         nearly opaque and it blinks when the wrap goes. Removing the class
+         at wrap-fade start crossfades the two identical gradients. */
+      .hfnx-stick--glass-wait::before { opacity: 0 !important; }
+      /* suppress the ::before opacity transition for the single-frame
+         wrap-to-glass handoff */
+      .hfnx-stick--glass-flip::before { transition: none !important; }
+      /* between the sticky point and the pin threshold the stuck stick is
+         progressively hidden from the bottom in lockstep with the scroll
+         (--stick-clip, set per scroll event): pill rows dissolve into the
+         rising edge and the first card is never covered. The mask mimics
+         the glass ::before's own 52px bottom fade, just moved up by the
+         clip - no hard edge. The oversized mask box (+44px sideways,
+         +134px vertically at -22,-100) keeps the glass's side/bottom bleed
+         painted. Paint-only - layout untouched, snapback protections
+         unaffected. */
+      .hfnx-stick.is-condensing {
+        -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--stick-clip, 0px) - 86px), transparent calc(100% - var(--stick-clip, 0px) - 34px));
+        -webkit-mask-size: calc(100% + 44px) calc(100% + 134px);
+        -webkit-mask-position: -22px -100px;
+        -webkit-mask-repeat: no-repeat;
+        mask-image: linear-gradient(180deg, #000 calc(100% - var(--stick-clip, 0px) - 86px), transparent calc(100% - var(--stick-clip, 0px) - 34px));
+        mask-size: calc(100% + 44px) calc(100% + 134px);
+        mask-position: -22px -100px;
+        mask-repeat: no-repeat;
+      }
+      /* pinned: compact /models-style single row - the search bar + button
+         join the sort/browse row, match-count collapses, pills drop below */
+      /* input resizes instantly so the spacer compensation is exact in the
+         same frame; the FLIP glide masks the size change visually */
+      .hfnx-stick .hfnx-hint { transition: opacity 160ms ease, max-height 200ms ease; overflow: hidden; max-height: 40px; }
+      .hfnx-stick.is-pinned { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; padding: 10px 0 12px; }
+      .hfnx-stick.is-pinned .hfnx-command { flex: 1 1 380px; min-width: 280px; padding: 0; margin: 0; }
+      .hfnx-stick.is-pinned .hfnx-command__bar { max-width: none; }
+      .hfnx-stick.is-pinned .hfnx-command__input { padding: 10px 16px 10px 44px; font-size: 14px; }
+      .hfnx-stick.is-pinned .hfnx-command__go { padding: 0 20px; }
+      .hfnx-stick.is-pinned .hfnx-hint { display: none; }
+      .hfnx-stick.is-pinned .hfnx-filterbar { display: contents; }
+      .hfnx-stick.is-pinned .hfnx-status { display: none; }
+      .hfnx-stick.is-pinned .hfnx-sort { margin-left: 0; }
+      .hfnx-stick.is-pinned .hfnx-pills {
+        flex-basis: 100%; flex-wrap: nowrap; gap: 6px; margin-top: 0;
+        overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch;
+        scrollbar-width: none;
+      }
+      .hfnx-stick.is-pinned .hfnx-pills::-webkit-scrollbar { display: none; }
+      .hfnx-stick.is-pinned .hfnx-pill { flex: none; }
+      /* the arch panel is a flex item of the pinned row: without a basis it
+         sizes to max-content (all 39 concept pills in one line, ~7000px) and
+         runs off the right edge of the phone. Pin it to the row width; its
+         pills row then scrolls horizontally like the category pills above. */
+      .hfnx-stick.is-pinned .hfnx-archpanel {
+        flex-basis: 100%; min-width: 0; max-width: 100%;
+        margin-top: 0; padding: 10px 12px;
+      }
+      .hfnx-command__bar { display: flex; gap: 10px; align-items: stretch; max-width: 860px; margin: 0 auto; }
+      .hfnx-command__wrap { position: relative; flex: 1; }
+      .hfnx-command__input {
+        width: 100%; padding: 17px 20px 17px 48px;
+        background: rgba(255, 255, 255, 0.05);
+        border: 1px solid rgba(156, 255, 99, 0.22); border-radius: 16px;
+        color: var(--text, #f5f8ff); font: 500 16px "Inter", sans-serif;
+        outline: none; transition: border-color 0.15s, box-shadow 0.15s;
+      }
+      .hfnx-command__input::placeholder { color: #5c6b81; font-weight: 400; }
+      .hfnx-command__input:focus {
+        border-color: rgba(156, 255, 99, 0.55);
+        box-shadow: 0 0 0 3px rgba(156, 255, 99, 0.1), 0 18px 44px rgba(0, 0, 0, 0.35);
+      }
+      .hfnx-command__icon {
+        position: absolute; left: 17px; top: 50%; transform: translateY(-50%);
+        width: 18px; height: 18px; color: #5c6b81; pointer-events: none;
+      }
+      .hfnx-command__go {
+        padding: 0 26px; border: 0; border-radius: 16px; cursor: pointer;
+        background: var(--lime, #9cff63); color: #07100d;
+        font: 700 15px "Inter", sans-serif; white-space: nowrap;
+        transition: transform 0.12s, box-shadow 0.12s;
+      }
+      .hfnx-command__go:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(156, 255, 99, 0.24); }
+      .hfnx-hint {
+        max-width: 860px; margin: 9px auto 0; min-height: 18px;
+        color: var(--muted, #91a0ba); font-size: 12.5px; text-align: center;
+      }
+      .hfnx-hint b { color: var(--lime, #9cff63); font-weight: 600; }
+      .hfnx-hint kbd {
+        font: 600 11px "Inter", sans-serif; color: var(--muted-strong, #c5d0e3);
+        border: 1px solid var(--stroke, rgba(255,255,255,0.1)); border-bottom-width: 2px;
+        border-radius: 5px; padding: 1px 6px; margin: 0 1px;
+      }
+      .hfnx-notify {
+        display: none; max-width: 860px; margin: 14px auto 4px; padding: 16px 18px;
+        border: 1px solid rgba(156, 255, 99, 0.22); border-radius: 16px;
+        background: linear-gradient(120deg, rgba(156, 255, 99, 0.05), rgba(136, 215, 255, 0.04));
+        text-align: left; position: relative;
+      }
+      .hfnx-notify.is-visible { display: block; }
+      .hfnx-notify__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;
+      }
+      .hfnx-notify__close:hover { color: var(--text, #f5f8ff); background: rgba(255, 255, 255, 0.06); }
+      .hfnx-notify__title { margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--text, #f5f8ff); }
+      .hfnx-notify__sub { margin: 0 0 12px; font-size: 13px; color: var(--muted, #91a0ba); line-height: 1.5; }
+      .hfnx-notify__row { display: flex; gap: 10px; flex-wrap: wrap; }
+      .hfnx-notify__email {
+        flex: 1 1 240px; padding: 12px 16px; border-radius: 12px;
+        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;
+      }
+      .hfnx-notify__email:focus { border-color: rgba(156, 255, 99, 0.45); }
+      .hfnx-notify__btn {
+        padding: 12px 22px; border: 0; border-radius: 12px; cursor: pointer;
+        background: var(--lime, #9cff63); color: #07100d;
+        font: 700 14px "Inter", sans-serif; white-space: nowrap;
+        box-shadow: 0 0 0 rgba(156, 255, 99, 0);
+        transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
+      }
+      .hfnx-notify__btn:hover:not(:disabled),
+      .hfnx-notify__btn:focus-visible:not(:disabled) {
+        transform: translateY(-1px);
+        filter: brightness(1.04) saturate(1.04);
+        box-shadow: 0 12px 30px rgba(156, 255, 99, 0.22);
+        outline: none;
+      }
+      .hfnx-notify__btn:disabled { opacity: 0.55; cursor: default; }
+      .hfnx-notify__optin {
+        display: flex; gap: 5px; align-items: flex-start; margin-top: 11px;
+        color: var(--muted, #91a0ba); font-size: 12px; line-height: 1.5; cursor: pointer;
+      }
+      .hfnx-notify__optin input { margin-top: 2px; accent-color: var(--lime, #9cff63); }
+      .hfnx-notify__optin a { color: var(--muted-strong, #c5d0e3); text-decoration: underline; }
+      .hfnx-notify__feedback { margin: 10px 0 0; font-size: 13px; color: var(--lime, #9cff63); }
+      .hfnx-notify__feedback.is-error { color: #ff9d9d; }
+      /* watch popover: the shared notify panel, anchored under the search-results
+         watch pill. JS computes left/top/width against the offset parent; at
+         narrow widths it spans the full row under the status bar instead. */
+      .hfnx-notify--popover {
+        position: absolute; z-index: 60; margin: 0; max-width: none;
+        padding: 16px;
+        background: #0b1322;
+        border: 1px solid #434a78;
+        border-radius: 14px;
+        box-shadow: 0 18px 44px rgba(0, 0, 0, 0.55);
+      }
+      .hfnx-notify--popover .hfnx-notify__title { padding-right: 26px; }
+      /* the pinned (condensed sticky) bar hides the status row, so an open
+         popover would float unanchored - hide it together with its anchor */
+      .hfnx-stick.is-pinned .hfnx-notify--popover { display: none; }
+      .hfnx-filterbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
+      .hfnx-status { color: var(--muted, #91a0ba); font-size: 13px; }
+      .hfnx-status b { color: var(--text, #f5f8ff); font-weight: 600; }
+      .hfnx-status .hfnx-dot {
+        display: inline-block; width: 7px; height: 7px; border-radius: 999px;
+        background: var(--lime, #9cff63); margin-right: 7px; vertical-align: 1px;
+        animation: hfnx-pulse 2.6s ease-in-out infinite;
+      }
+      @keyframes hfnx-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
+      .hfnx-sort {
+        margin-left: auto;
+        border: 1px solid var(--stroke, rgba(255,255,255,0.1));
+        border-radius: 999px; color: var(--text, #f5f8ff); font: 13px "Inter", sans-serif;
+        padding: 8px 36px 8px 14px; outline: none; cursor: pointer;
+        /* custom chevron - the native select arrow hugs the pill's right
+           edge; this one sits a step further in */
+        -webkit-appearance: none;
+        appearance: none;
+        background:
+          url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5d0e3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")
+            no-repeat right 12px center / 13px 13px,
+          rgba(255, 255, 255, 0.04);
+      }
+      .hfnx-sort option { background: #0a121f; }
+      .hfnx-browse {
+        color: var(--lime, #9cff63); font-size: 0.76rem; font-weight: 700;
+        letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
+      }
+      .hfnx-browse:hover { text-decoration: underline; }
+      .hfnx-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
+      .hfnx-pill {
+        background: transparent; border: 1px solid var(--stroke, rgba(255,255,255,0.1));
+        border-radius: 999px; color: var(--muted, #91a0ba); font: 12.5px "Inter", sans-serif;
+        padding: 6px 13px; cursor: pointer; transition: all 0.15s; white-space: nowrap;
+      }
+      .hfnx-stick.is-pinned .hfnx-pill { padding-inline: 10px; font-size: 12px; }
+      .hfnx-pill:hover { color: var(--text, #f5f8ff); border-color: rgba(156, 255, 99, 0.35); }
+      .hfnx-pill.is-on { color: #07100d; background: var(--lime, #9cff63); border-color: var(--lime, #9cff63); font-weight: 600; }
+      .hfnx-pill__count { opacity: 0.6; margin-left: 3px; font-variant-numeric: tabular-nums; }
+      .hfnx-pill__avatar {
+        width: 15px; height: 15px; border-radius: 4px; object-fit: cover;
+        vertical-align: -3px; margin: -2px 6px -1px -3px;
+      }
+      .hfnx-pill__avatar--user { border-radius: 50%; }
+      .hfnx-pill--archtoggle svg,
+      .hfnx-pill--orgtoggle svg { width: 13px; height: 13px; fill: currentColor; vertical-align: -2px; margin-right: 6px; }
+      .hfnx-pill--archtoggle.is-open,
+      .hfnx-pill--orgtoggle.is-open { border-color: rgba(156, 255, 99, 0.55); color: var(--text, #f5f8ff); }
+      .hfnx-archpanel {
+        margin-top: 10px; padding: 12px 14px; border-radius: 16px;
+        border: 1px solid rgba(156, 255, 99, 0.22);
+        background: linear-gradient(120deg, rgba(156, 255, 99, 0.045), rgba(136, 215, 255, 0.035));
+        text-align: left;
+      }
+      .hfnx-archpanel[hidden] { display: none !important; }
+      .hfnx-archpanel__hint { margin: 0 0 10px; font-size: 12.5px; color: var(--muted, #91a0ba); }
+      .hfnx-archpanel__hint a { color: var(--muted-strong, #c5d0e3); }
+      .hfnx-archpanel__pills { margin-top: 0; }
+      /* Mobile: the open panel behaves as a bounded sheet. The sticky stick
+         with the full 34-pill box was taller than the screen, so its bottom
+         pills were unreachable: scrolling just moved the grid beneath.
+         Instead the pill list wraps (also in pinned mode) and scrolls inside
+         its own box, overscroll-contained so browsing pills never scrolls
+         the page, its height cap keeps the whole stuck stick on screen, and
+         the unselected category pills hide to give the sheet more room
+         (active ones and the cog stay for context and closing). */
+      @media (max-width: 720px) {
+        .hfnx-stick.arch-open #hfnx-pills .hfnx-pill:not(.is-on):not(.hfnx-pill--archtoggle):not(.hfnx-pill--orgtoggle) {
+          display: none;
+        }
+        .hfnx-stick.arch-open .hfnx-archpanel__pills {
+          flex-wrap: wrap;
+          flex-basis: auto;
+          overflow-x: hidden;
+          overflow-y: auto;
+          max-height: 340px;
+          max-height: min(46dvh, 380px);
+          overscroll-behavior: contain;
+          -webkit-overflow-scrolling: touch;
+          padding-bottom: 4px;
+        }
+      }
+      .hfnx-archlearn {
+        margin-left: 10px; font-size: 12.5px; font-weight: 700;
+        color: var(--sky, #88d7ff); text-decoration: none; white-space: nowrap;
+      }
+      .hfnx-archlearn:hover { text-decoration: underline; }
+      .hfnx-arch-tooltip {
+        position: fixed; z-index: 2147483647; pointer-events: none;
+        max-width: min(360px, calc(100vw - 16px));
+        background: #111422; border: 1px solid #2f354a; border-radius: 8px;
+        padding: 0.4rem 0.6rem; font-size: 0.83rem; line-height: 1.45;
+        color: var(--text, #f5f8ff); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+        opacity: 0; transition: opacity 0.15s ease; text-align: left;
+      }
+      .hfnx-arch-tooltip.is-visible { opacity: 1; }
+      .hfnx-arch-tooltip strong { color: #fff; }
+      .hfnx-grid { position: relative; margin-top: 20px; }
+      .hfnx-card {
+        position: absolute; top: 0; left: 0; color: var(--text, #f5f8ff);
+        display: flex; flex-direction: column; gap: 13px; padding: 13px;
+        border: 1px solid var(--stroke, rgba(255,255,255,0.1)); border-radius: 22px;
+        background: rgba(255, 255, 255, 0.04);
+        box-shadow: 0 18px 42px rgba(0, 0, 0, 0.26);
+        cursor: pointer; text-align: left;
+        transition: transform 170ms ease, border-color 170ms ease, box-shadow 170ms ease;
+      }
+      .hfnx-card:hover, .hfnx-card:focus-visible {
+        transform: translateY(-4px);
+        border-color: rgba(156, 255, 99, 0.32);
+        box-shadow: 0 24px 54px rgba(0, 0, 0, 0.34), 0 0 0 1px rgba(156, 255, 99, 0.12);
+        outline: none;
+      }
+      .hfnx-card__art {
+        display: flex; position: relative; align-items: center; justify-content: center;
+        padding: 18px 16px 14px; border-radius: 16px;
+        border: 1px solid rgba(255, 255, 255, 0.07);
+        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));
+        overflow: hidden; min-height: 90px;
+      }
+      .hfnx-card__img { width: 100%; height: auto; display: block; }
+      .hfnx-card__level {
+        position: absolute; left: 16px; right: 16px; top: 18px; bottom: 14px;
+        width: calc(100% - 32px); height: calc(100% - 32px);
+        object-fit: contain; opacity: 0; transition: opacity 380ms ease;
+        pointer-events: none;
+      }
+      .hfnx-card__level.is-on { opacity: 1; }
+      .hfnx-card__img { transition: opacity 380ms ease; }
+      .hfnx-card__art.is-leveled .hfnx-card__img { opacity: 0; }
+      .hfnx-card__video {
+        position: absolute; inset: 0; width: 100%; height: 100%;
+        border-radius: inherit;
+        object-fit: contain; opacity: 0; transition: opacity 200ms ease;
+        pointer-events: none;
+      }
+      .hfnx-card__video.is-on { opacity: 1; }
+      .hfnx-card__meta { display: grid; gap: 6px; padding: 0 4px 3px; }
+      .hfnx-new-count {
+        appearance: none; -webkit-appearance: none;
+        display: inline-flex; align-items: center;
+        margin: -6px -7px; padding: 6px 7px;
+        border: 0; border-radius: 999px; background: transparent;
+        color: #9cff63; font: inherit; font-weight: 600; line-height: inherit;
+        cursor: pointer; white-space: nowrap;
+        transition: color 150ms ease, background 150ms ease, box-shadow 150ms ease;
+      }
+      .hfnx-new-count-control { display: inline-flex; align-items: center; }
+      .hfnx-new-count-separator {
+        /* Flex-item edge whitespace collapses, so the " · " spacing must be
+           margins, not text spaces. */
+        margin: 0 0.45ch;
+        opacity: 1;
+        transition: opacity 150ms ease;
+      }
+      .hfnx-new-count-control:has(.hfnx-new-count:not(.is-on):hover) .hfnx-new-count-separator {
+        opacity: 0;
+      }
+      /* At rest this is deliberately just the existing green status text.
+         Hover/focus reveals the same green outline as the regular filter
+         pills; activation fills it without moving the surrounding sentence. */
+      .hfnx-new-count:hover {
+        background: rgba(156, 255, 99, 0.055);
+        box-shadow: inset 0 0 0 1px rgba(156, 255, 99, 0.35);
+      }
+      .hfnx-new-count:focus-visible {
+        outline: none;
+        background: rgba(156, 255, 99, 0.07);
+        box-shadow: inset 0 0 0 1px rgba(156, 255, 99, 0.55), 0 0 0 2px rgba(156, 255, 99, 0.16);
+      }
+      .hfnx-new-count.is-on {
+        color: #07100d; background: var(--lime, #9cff63);
+        box-shadow: inset 0 0 0 1px var(--lime, #9cff63);
+      }
+      .hfnx-new-count.is-on:hover { background: #b1ff85; box-shadow: inset 0 0 0 1px #b1ff85; }
+      .hfnx-card__new { display: inline-block; margin-left: 7px; padding: 1px 6px 1.5px; border-radius: 999px; background: rgba(156, 255, 99, 0.14); border: 1px solid rgba(156, 255, 99, 0.34); color: #9cff63; font-size: 9.5px; font-weight: 700; letter-spacing: 0.08em; vertical-align: 2px; }
+      .hfnx-card__label { display: flex; align-items: flex-start; gap: 9px; line-height: 1.3; }
+      .hfnx-card__avatar {
+        width: 20px; height: 20px; flex: 0 0 20px; margin-top: 1px;
+        border-radius: 6px; object-fit: cover; background: #fff; padding: 1px;
+      }
+      .hfnx-card__avatar--user { border-radius: 50%; }
+      .hfnx-card__dot { width: 8px; flex: 0 0 8px; height: 8px; align-self: center; border-radius: 999px; background: var(--lime, #9cff63); }
+      .hfnx-card__title { font-size: 1rem; font-weight: 700; overflow-wrap: anywhere; }
+      .hfnx-card__owner { color: #8d9cb6; font-weight: 600; }
+      .hfnx-card__sub { color: var(--muted, #91a0ba); font-size: 0.8rem; }
+      .hfnx-card__action {
+        color: var(--lime, #9cff63); font-size: 0.72rem; font-weight: 700;
+        letter-spacing: 0.08em; text-transform: uppercase; margin-top: 1px;
+      }
+      /* Kimi K3 prerelease teaser card: a heavily blurred K2.7-Code architecture
+         graph with the release time in the visitor's own timezone in front. */
+      .hfnx-card--k3 .hfnx-card__art { min-height: 168px; padding: 0; }
+      .hfnx-card__img--k3blur {
+        position: absolute; inset: 0; width: 100%; height: 100%;
+        object-fit: cover; object-position: center 30%;
+        filter: blur(9px) saturate(1.4) brightness(1.03);
+        transform: scale(1.08);
+      }
+      .hfnx-k3__shade {
+        position: absolute; inset: 0; border-radius: inherit;
+        background: radial-gradient(86% 72% at 50% 47%, rgba(4, 9, 16, 0.62), rgba(4, 9, 16, 0.12));
+      }
+      .hfnx-k3__over {
+        position: absolute; inset: 0; display: flex; flex-direction: column;
+        align-items: center; justify-content: center; gap: 1px; text-align: center;
+        padding: 10px; pointer-events: none;
+      }
+      .hfnx-k3__tag { font-size: 10px; font-weight: 800; letter-spacing: 3px; text-transform: uppercase; color: #9cffcf; }
+      .hfnx-k3__rel { margin-top: 9px; font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: #9fc0d6; }
+      .hfnx-k3__time { font-size: 46px; font-weight: 800; line-height: 1; color: #eef8ff; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(120, 220, 255, 0.55); }
+      .hfnx-k3__subo { margin-top: 5px; font-size: 12px; font-weight: 600; color: #bfd4e7; }
+      .hfnx-skel {
+        position: absolute; top: 0; left: 0; border-radius: 22px;
+        border: 1px solid var(--stroke, rgba(255,255,255,0.1));
+        background:
+          linear-gradient(100deg, transparent 32%, rgba(156, 255, 99, 0.05) 48%, rgba(136, 215, 255, 0.06) 52%, transparent 68%),
+          rgba(255, 255, 255, 0.03);
+        background-size: 220% 100%, auto;
+        animation: hfnx-pulse 2.2s ease-in-out infinite;
+      }
+      .hfnx-showmore { display: none; text-align: center; margin-top: 26px; }
+      .hfnx-showmore.is-visible { display: block; }
+      .hfnx-showmore button {
+        padding: 12px 26px; border-radius: 999px; cursor: pointer;
+        background: rgba(255, 255, 255, 0.05); border: 1px solid var(--stroke, rgba(255,255,255,0.1));
+        color: var(--muted-strong, #c5d0e3); font: 600 13.5px "Inter", sans-serif; transition: all 0.15s;
+      }
+      .hfnx-showmore button:hover { border-color: rgba(156, 255, 99, 0.4); color: var(--text, #f5f8ff); }
+      .hfnx-empty { display: none; text-align: center; color: var(--muted, #91a0ba); padding: 46px 0 30px; font-size: 15px; }
+      .hfnx-empty.is-visible { display: block; }
+      .hfnx-empty b { color: var(--text, #f5f8ff); }
+      .hfnx-empty__cta {
+        display: inline-block; margin-top: 14px; padding: 11px 22px; border-radius: 12px;
+        background: var(--lime, #9cff63); color: #07100d; font-weight: 700; font-size: 14px;
+      }
+      .hfnx-empty__didyou { display: block; margin-top: 16px; font-size: 13px; }
+      .hfnx-empty__suggs {
+        display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
+        margin-top: 10px;
+      }
+      .hfnx-empty__sugg {
+        display: inline-block; padding: 8px 14px; border-radius: 999px;
+        border: 1px solid var(--stroke, rgba(255, 255, 255, 0.1));
+        background: rgba(255, 255, 255, 0.04);
+        color: var(--text, #f5f8ff); font-size: 13px; text-decoration: none;
+      }
+      .hfnx-empty__sugg:hover { border-color: rgba(156, 255, 99, 0.45); }
+      .hfnx-empty__hint {
+        display: block; max-width: 460px; margin: 18px auto 0;
+        font-size: 13px; line-height: 1.55; color: var(--muted, #91a0ba);
+      }
+      .hfnx-bottom { margin-bottom: 26px; }
+
+      /* ------------------------------------------------------------------ */
+      /* Dashboard catalog cards: same language as the /models gcards - art  */
+      /* well with the frameless graph, owner avatar row, actions pinned to  */
+      /* the card bottom, hover video / level tour overlays.                 */
+      /* ------------------------------------------------------------------ */
+      .hf-model-card--catalog .hf-model-card__art,
+      .hf-model-card--graph-preview .hf-model-card__art {
+        display: flex; position: relative; align-items: center; justify-content: center;
+        margin: 0 0 10px; padding: 20px 18px 16px;
+        border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06);
+        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;
+        overflow: hidden;
+      }
+      .hf-model-card--catalog .hf-model-card__graph,
+      .hf-model-card--graph-preview .hf-model-card__graph {
+        position: relative; z-index: 1; display: block;
+        width: 100%; max-width: none; height: auto; padding: 0;
+        filter: saturate(0.98) contrast(1.04) drop-shadow(0 16px 26px rgba(0, 0, 0, 0.24));
+        transition: opacity 380ms ease;
+      }
+      .hf-model-card__art.is-leveled .hf-model-card__graph { opacity: 0; }
+      .hf-model-card__video {
+        position: absolute; inset: 0; width: 100%; height: 100%;
+        border-radius: inherit; object-fit: contain;
+        opacity: 0; transition: opacity 200ms ease; pointer-events: none;
+      }
+      .hf-model-card__video.is-on { opacity: 1; }
+      .hf-model-card__level {
+        position: absolute; left: 18px; right: 18px; top: 20px; bottom: 16px;
+        width: calc(100% - 36px); height: calc(100% - 36px);
+        object-fit: contain; opacity: 0; transition: opacity 380ms ease;
+        pointer-events: none;
+      }
+      .hf-model-card__level.is-on { opacity: 1; }
+      .hf-model-card__id { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
+      .hf-model-card__avatar {
+        width: 28px; height: 28px; border-radius: 8px; object-fit: cover;
+        background: #fff; padding: 2px; flex: none;
+      }
+      .hf-model-card__avatar--user { border-radius: 50%; }
+      .hf-model-card__id-text { min-width: 0; }
+      .hf-model-card--catalog .hf-model-card__repo { font-size: 13.5px; }
+      .hf-model-card--catalog .hf-model-card__meta { margin-top: 0; }
+
+      /* sticky column titles on the /next dashboard: seamless until pinned,
+         then the same non-blur dark gradient + bottom fade as /models; the
+         bulk button glides up beside its title (FLIP in JS) */
+      body.hfnx-active .page.route-hf-models {
+        overflow: clip;
+        position: relative;
+        isolation: isolate;
+      }
+      body.hfnx-active .hf-models-column__head {
+        position: sticky; top: 0; z-index: 32;
+        display: grid; grid-template-columns: minmax(0, 1fr) auto;
+        gap: 10px; align-items: center; min-height: 46px;
+        margin: -6px -10px 8px; padding: 10px 10px 8px;
+      }
+      /* ONE shared veil spans the full page width behind every pinned head,
+         painted in the page's own tone - the per-column near-black boxes had
+         hard edges at each column boundary */
+      .hf-models-sticky-veil {
+        position: fixed; top: 0; left: 0; right: 0; height: 96px;
+        z-index: 24; pointer-events: none; opacity: 0;
+        transition: opacity 200ms ease;
+        background: linear-gradient(
+          180deg,
+          rgba(11, 15, 32, 0.97) 0%,
+          rgba(11, 15, 32, 0.9) 46%,
+          rgba(11, 15, 32, 0) 100%);
+      }
+      .hf-models-sticky-veil.is-visible { opacity: 1; }
+      body.hfnx-active .hf-models-column__head > h3 { margin: 0; }
+      body.hfnx-active .hf-models-column__head > * {
+        position: relative;
+        z-index: 2;
+      }
+      body.hfnx-active .hf-models-column__head h3 { white-space: nowrap; }
+      body.hfnx-active .hf-models-column__head.is-pinned {
+        min-height: 46px;
+      }
+
+      /* ---- dashboard declutter: counts live as badges in the column heads,
+         the intro count line and the stat pill row are redundant ---- */
+      body.hfnx-active .hf-models-dashboard__stats { display: none !important; }
+      body.hfnx-active #hf-models-dashboard-intro { display: none; }
+      /* professional column titles: quiet small-caps label + neutral count
+         badge (accent only when non-zero); the base h3's own sticky box is
+         disabled - the head wrapper is the one sticky element */
+      body.hfnx-active .hf-models-column h3 {
+        position: static; top: auto; z-index: auto;
+        padding: 0; margin: 0; border: 0; border-radius: 0;
+        background: none; backdrop-filter: none; box-shadow: none;
+        display: flex; align-items: center; justify-content: space-between;
+        font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
+        color: var(--muted, #91a0ba); font-weight: 650;
+      }
+      body.hfnx-active .hf-models-column h3[data-count]::after {
+        content: attr(data-count);
+        display: inline-grid; place-items: center;
+        min-width: 20px; height: 20px; padding: 0 7px;
+        border-radius: 999px; font-size: 11px; font-weight: 700;
+        letter-spacing: 0; background: rgba(255, 255, 255, 0.07);
+        color: var(--muted, #91a0ba);
+      }
+      body.hfnx-active .hf-models-column h3:not([data-count="0"]):not([data-count="..."])[data-count]::after {
+        background: rgba(156, 255, 99, 0.16);
+        color: var(--lime, #9cff63);
+      }
+      /* empty dashboard fits the viewport: no filler height, no scrollbar */
+      body.hfnx-active .hf-models-dashboard { padding-bottom: 24px; }
+      body.hfnx-active .hf-models-column { min-height: 0; }
+      body.hfnx-active .hf-models-column__list:empty { min-height: 0; }
+      /* ready/featured card actions side by side */
+      body.hfnx-active .hf-model-card__actions { flex-wrap: nowrap; }
+      body.hfnx-active .hf-model-card__actions .hf-model-card__button {
+        flex: 1 1 0; min-width: 0; padding: 7px 8px;
+        display: inline-flex; align-items: center; justify-content: center; gap: 6px;
+        white-space: nowrap; font-size: 13px; border-radius: 10px;
+      }
+      /* "Write article" carries more text than "Feature" - split the row
+         asymmetrically so its label gets breathing room */
+      body.hfnx-active .hf-model-card__actions .hf-model-card__button--write { flex-grow: 1.22; }
+      body.hfnx-active .hf-model-card__actions .hf-model-card__button--feature { flex-grow: 0.78; }
+      /* bulk buttons: quieter, structured - full-width slim bars */
+      body.hfnx-active .hf-models-dashboard__button {
+        width: 100%; margin: 0 0 12px; padding: 7px 14px;
+        display: inline-flex; align-items: center; justify-content: center; gap: 8px;
+        border-radius: 10px; font-size: 13.5px; font-weight: 650;
+      }
+      body.hfnx-active .hf-models-column__head .hf-models-dashboard__button {
+        width: auto; min-width: 0; min-height: 25px;
+        margin: 0; padding: 3px 11px;
+        border-radius: 8px; font-size: 12px;
+        white-space: nowrap;
+      }
+      body.hfnx-active .hf-models-dashboard__button--primary {
+        background: linear-gradient(180deg, #a6ff70, #8df453);
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
+      }
+      body.hfnx-active .hf-models-dashboard__button--secondary .hf-button-icon { width: 13px; height: 13px; }
+      /* frosted glass panel for the brand dropdown - DASHBOARD only: the
+         landing slides the title + search bar aside instead, so the items
+         float free there (no box) */
+      body.hfnx-active.route-hf-models .hfnx-top .brand-stack__menu {
+        background: rgba(10, 18, 31, 0.72);
+        -webkit-backdrop-filter: blur(18px) saturate(1.25);
+        backdrop-filter: blur(18px) saturate(1.25);
+        border: 1px solid rgba(255, 255, 255, 0.12);
+        border-radius: 18px;
+        padding: 14px;
+        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+      }
+      /* browsers without backdrop-filter still get an opaque panel instead
+         of page text bleeding through the dropdown */
+      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+        body.hfnx-active.route-hf-models .hfnx-top .brand-stack__menu {
+          background: rgba(10, 16, 28, 0.96);
+        }
+      }
+      /* mobile landing: nothing slides aside there, so free-floating items
+         would collide with the hero - the tap-opened dropdown gets the same
+         frosted panel as the dashboard route */
+      @media (max-width: 860px) {
+        body.hfnx-active .hfnx-top .brand-stack__menu {
+          background: rgba(10, 18, 31, 0.9);
+          -webkit-backdrop-filter: blur(18px) saturate(1.25);
+          backdrop-filter: blur(18px) saturate(1.25);
+          border: 1px solid rgba(255, 255, 255, 0.12);
+          border-radius: 18px;
+          padding: 14px;
+          box-shadow: 0 30px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.08);
+        }
+      }
+      @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
+        @media (max-width: 860px) {
+          body.hfnx-active .hfnx-top .brand-stack__menu {
+            background: rgba(10, 16, 28, 0.97);
+          }
+        }
+      }
+      /* generous invisible hover halo: the item cards can extend past the
+         menu's border box (and pointers cut corners between items) - without
+         this, grazing just outside the box drops :hover mid-menu and the
+         dropdown vanishes */
+      body.hfnx-active .hfnx-top .brand-stack__menu::after {
+        content: "";
+        position: absolute;
+        inset: -20px -26px -26px -20px;
+        z-index: 0;
+      }
+
+      /* ------------------------------------------------------------------ */
+      /* Logged-in dashboard restyle (/next only): match the landing design  */
+      /* language - floating sections on the page glow instead of one giant  */
+      /* bordered box, lime CTAs, pill chips, gcard-style model cards. The   */
+      /* legacy (non-next) dashboard keeps its original styling untouched.   */
+      /* ------------------------------------------------------------------ */
+      body.hfnx-active .hf-models-page {
+        background: transparent !important;
+      }
+      body.hfnx-active .hf-models-dashboard {
+        --hf-models-column-title-sticky-top: max(14px, env(safe-area-inset-top));
+        border: 0;
+        border-radius: 0;
+        background: transparent;
+        box-shadow: none;
+        padding: 8px 0 60px;
+      }
+      body.hfnx-active .hf-models-dashboard__top { align-items: flex-start; gap: 18px; }
+      body.hfnx-active .hf-models-dashboard__heading .eyebrow {
+        display: inline-flex; align-items: center; gap: 8px;
+        font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
+        color: var(--muted, #91a0ba); background: none; border: 0; padding: 0;
+      }
+      body.hfnx-active .hf-models-dashboard__heading .eyebrow::before {
+        content: ""; width: 7px; height: 7px; border-radius: 50%;
+        background: var(--lime, #9cff63); box-shadow: 0 0 12px rgba(156, 255, 99, 0.8);
+      }
+      body.hfnx-active .hf-models-dashboard__heading h2 {
+        margin: 10px 0 6px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04;
+        letter-spacing: -0.04em; color: var(--text, #f5f8ff); font-weight: 800;
+      }
+      body.hfnx-active .hf-models-dashboard__intro {
+        color: var(--muted, #91a0ba); font-size: 15px; margin: 0;
+      }
+      body.hfnx-active .hf-models-dashboard__user {
+        display: none;
+      }
+      body.hfnx-active .hf-bookmarks-page {
+        padding: 8px 0 26px;
+      }
+      body.hfnx-active .hf-bookmarks-page__heading .eyebrow {
+        display: inline-flex; align-items: center; gap: 8px;
+        font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
+        color: var(--muted, #91a0ba); background: none; border: 0; padding: 0;
+      }
+      body.hfnx-active .hf-bookmarks-page__heading .eyebrow::before {
+        content: ""; width: 7px; height: 7px; border-radius: 50%;
+        background: var(--lime, #9cff63); box-shadow: 0 0 12px rgba(156, 255, 99, 0.8);
+      }
+      body.hfnx-active .hf-bookmarks-page__heading h2 {
+        margin: 10px 0 6px; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.04;
+        letter-spacing: -0.04em; color: var(--text, #f5f8ff); font-weight: 800;
+      }
+      body.hfnx-active .hf-bookmarks-page__intro {
+        color: var(--muted, #91a0ba); font-size: 15px; margin: 0;
+      }
+      /* stat chips -> landing pill language, lime hover/active */
+      body.hfnx-active .hf-models-dashboard__stats { gap: 8px; margin: 20px 0 4px; }
+      body.hfnx-active .hf-models-dashboard__stat {
+        display: inline-flex; align-items: center; gap: 8px;
+        border: 1px solid var(--stroke, rgba(255,255,255,0.09));
+        background: rgba(255, 255, 255, 0.035); border-radius: 999px;
+        padding: 7px 15px; color: var(--muted-strong, #c5d0e3);
+        font: 600 13px "Inter", sans-serif; cursor: pointer;
+        transition: border-color 0.15s, color 0.15s, transform 0.12s;
+        box-shadow: none;
+      }
+      body.hfnx-active .hf-models-dashboard__stat:hover {
+        border-color: rgba(156, 255, 99, 0.45); color: var(--text, #f5f8ff);
+        transform: translateY(-1px);
+      }
+      body.hfnx-active .hf-models-dashboard__stat-count {
+        display: inline-grid; place-items: center; min-width: 22px; height: 22px;
+        padding: 0 6px; border-radius: 999px; background: rgba(156, 255, 99, 0.14);
+        color: var(--lime, #9cff63); font-weight: 800; font-size: 12px;
+      }
+      /* columns: floating glass panels like landing sections */
+      body.hfnx-active .hf-models-dashboard__columns { gap: 14px; }
+      body.hfnx-active .hf-models-column {
+        border: 1px solid var(--stroke, rgba(255,255,255,0.09));
+        background: rgba(255, 255, 255, 0.028);
+        border-radius: 18px; padding: 18px 16px 16px;
+        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
+      }
+      body.hfnx-active .hf-models-column > h3 {
+        margin: -4px 0 12px; font-size: 12px; letter-spacing: 0.14em;
+        text-transform: uppercase; color: var(--muted, #91a0ba); font-weight: 600;
+        border-color: rgba(156, 255, 99, 0.12);
+        background:
+          radial-gradient(circle at 12% 0%, rgba(156, 255, 99, 0.1), transparent 42%),
+          linear-gradient(180deg, rgba(7, 14, 25, 0.92), rgba(4, 9, 17, 0.78));
+      }
+      body.hfnx-active .hf-models-dashboard__bookmarks {
+        border: 0; background: transparent; box-shadow: none; padding: 0;
+        margin-top: 18px;
+      }
+      body.hfnx-active .hf-models-column__intro {
+        color: var(--muted, #91a0ba); font-size: 13px; margin-top: -6px;
+      }
+      /* model cards -> gcard language: dark art well, hover lift, lime edge */
+      body.hfnx-active .hf-model-card {
+        border: 1px solid var(--stroke, rgba(255,255,255,0.09));
+        background: linear-gradient(180deg, rgba(11, 18, 32, 0.85), rgba(6, 11, 22, 0.92));
+        border-radius: 16px; padding: 14px 14px 12px;
+        transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
+        box-shadow: none;
+      }
+      body.hfnx-active .hf-model-card:hover {
+        transform: translateY(-3px);
+        border-color: rgba(156, 255, 99, 0.35);
+        box-shadow: 0 16px 44px rgba(0, 0, 0, 0.42);
+      }
+      body.hfnx-active .hf-model-card__repo {
+        color: var(--text, #f5f8ff); font-weight: 700; font-size: 14px;
+        letter-spacing: -0.01em; overflow-wrap: anywhere;
+      }
+      body.hfnx-active .hf-model-card__meta {
+        color: var(--muted, #91a0ba); font-size: 12px; margin-top: 2px;
+      }
+      body.hfnx-active .hf-model-card__preview-link {
+        display: block; margin: 12px 0 10px; border-radius: 12px; overflow: hidden;
+      }
+      /* one frame only: the catalog art well paints the backdrop, so the
+         inner preview keeps no box of its own; the framed-card fallback is
+         self-contained and needs neither */
+      body.hfnx-active .hf-model-card__preview {
+        display: block; margin: 0 auto; padding: 0;
+        background: none; border-radius: 0; height: auto; min-height: 0; max-height: none;
+      }
+      body.hfnx-active .hf-model-card--catalog .hf-model-card__preview,
+      body.hfnx-active .hf-model-card--graph-preview .hf-model-card__preview { padding: 0; }
+      body.hfnx-active .hf-model-card { display: flex; flex-direction: column; }
+      body.hfnx-active .hf-model-card__actions {
+        display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 2px;
+      }
+      body.hfnx-active .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__actions,
+      body.hfnx-active .hf-model-card[data-dashboard-bucket="featured"] .hf-model-card__actions {
+        grid-area: auto;
+        width: 100%;
+        height: auto;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: stretch;
+        align-self: stretch;
+        margin-top: auto;
+        padding-top: 8px;
+      }
+      body.hfnx-active .hf-model-card[data-dashboard-bucket="ready"] .hf-model-card__button,
+      body.hfnx-active .hf-model-card[data-dashboard-bucket="featured"] .hf-model-card__button {
+        width: 100%;
+        min-width: 0;
+        min-height: 36px;
+        height: auto;
+        flex: 1 1 100%;
+        flex-direction: row;
+        white-space: nowrap;
+      }
+      /* buttons: primary = lime CTA, everything else = outline pill */
+      body.hfnx-active .hf-models-dashboard__button,
+      body.hfnx-active .hf-model-card__button {
+        border-radius: 10px; border: 1px solid var(--stroke, rgba(255,255,255,0.09));
+        background: rgba(255, 255, 255, 0.05); color: var(--muted-strong, #c5d0e3);
+        font: 620 13.5px/1.2 "Inter", sans-serif; padding: 7px 14px; cursor: pointer;
+        transition: all 0.14s ease; box-shadow: none; text-shadow: none;
+      }
+      body.hfnx-active .hf-models-dashboard__button:hover,
+      body.hfnx-active .hf-models-dashboard__button:focus-visible,
+      body.hfnx-active .hf-model-card__button:hover,
+      body.hfnx-active .hf-model-card__button:focus-visible {
+        border-color: rgba(156, 255, 99, 0.45); color: var(--text, #f5f8ff);
+        transform: translateY(-1px);
+        outline: none;
+      }
+      body.hfnx-active .hf-models-dashboard__button--primary,
+      body.hfnx-active .hf-model-card__button--primary {
+        background: var(--lime, #9cff63); border-color: transparent; color: #07100d;
+        font-weight: 700;
+      }
+      body.hfnx-active .hf-models-dashboard__button--primary:hover,
+      body.hfnx-active .hf-models-dashboard__button--primary:focus-visible,
+      body.hfnx-active .hf-model-card__button--primary:hover,
+      body.hfnx-active .hf-model-card__button--primary:focus-visible {
+        color: #07100d; box-shadow: 0 10px 28px rgba(156, 255, 99, 0.24);
+        border-color: transparent; filter: brightness(1.04) saturate(1.04);
+      }
+      body.hfnx-active.route-hf-models .hf-models-page:not(.hf-article-login-page) .hf-models-login__actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: nowrap;
+        gap: 12px;
+      }
+      body.hfnx-active.route-hf-models .hf-models-page:not(.hf-article-login-page) .hf-models-login__button {
+        flex: 0 1 360px;
+        width: auto;
+        min-width: min(100%, 286px);
+        padding: 0 22px;
+        white-space: nowrap;
+      }
+      body.hfnx-active.route-hf-models .hf-models-page:not(.hf-article-login-page) .hf-models-login__back {
+        flex: 0 0 auto;
+        width: auto;
+        min-width: 136px;
+        margin: 0;
+        padding: 0 18px;
+        white-space: nowrap;
+      }
+      body.hfnx-active.route-hf-article-login .hf-models-login__actions,
+      .page.route-hf-article-login .hf-models-login__actions {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 12px;
+      }
+      body.hfnx-active.route-hf-article-login .hf-models-login__button,
+      .page.route-hf-article-login .hf-models-login__button {
+        flex: 0 0 auto;
+        width: auto;
+        min-width: min(100%, 292px);
+        padding: 0 22px;
+        white-space: nowrap;
+      }
+      body.hfnx-active.route-hf-article-login .hf-models-login__back,
+      .page.route-hf-article-login .hf-models-login__back {
+        flex: 0 0 auto;
+        width: auto;
+        min-width: 132px;
+        margin: 0;
+        padding: 0 18px;
+        white-space: nowrap;
+      }
+      @media (max-width: 720px) {
+        body.hfnx-active.route-hf-models .hf-models-page:not(.hf-article-login-page) .hf-models-login__actions,
+        body.hfnx-active.route-hf-article-login .hf-models-login__actions,
+        .page.route-hf-article-login .hf-models-login__actions {
+          display: grid;
+          grid-template-columns: 1fr;
+        }
+        body.hfnx-active.route-hf-models .hf-models-page:not(.hf-article-login-page) .hf-models-login__button,
+        body.hfnx-active.route-hf-models .hf-models-page:not(.hf-article-login-page) .hf-models-login__back,
+        body.hfnx-active.route-hf-article-login .hf-models-login__button,
+        body.hfnx-active.route-hf-article-login .hf-models-login__back,
+        .page.route-hf-article-login .hf-models-login__button,
+        .page.route-hf-article-login .hf-models-login__back {
+          width: 100%;
+          min-width: 0;
+          white-space: normal;
+        }
+      }
+      body.hfnx-active .hf-models-empty { color: var(--muted, #91a0ba); }
+      /* loading screen: centered brand pulse + shimmer rows, landing tone */
+      body.hfnx-active .hf-models-loading {
+        display: grid; justify-items: center; align-content: center; gap: 8px;
+        min-height: 46vh; text-align: center;
+        border: 0; background: transparent; box-shadow: none;
+      }
+      body.hfnx-active .hf-models-loading[hidden] { display: none; }
+      body.hfnx-active .hf-models-loading .eyebrow {
+        font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
+        color: var(--muted, #91a0ba); background: none; border: 0;
+        justify-self: center; width: fit-content; margin: 0;
+      }
+      body.hfnx-active .hf-models-loading h2 {
+        margin: 4px 0 2px; font-size: clamp(24px, 2.6vw, 34px);
+        letter-spacing: -0.04em; color: var(--text, #f5f8ff); font-weight: 800;
+      }
+      body.hfnx-active .hf-models-loading .hf-models-login__status {
+        color: var(--muted, #91a0ba); font-size: 14px;
+      }
+      body.hfnx-active .hf-models-loading::before {
+        content: ""; width: 44px; height: 44px; border-radius: 14px; margin-bottom: 10px;
+        background: linear-gradient(135deg, #9cff63, #57d364);
+        box-shadow: 0 0 34px rgba(156, 255, 99, 0.45);
+        animation: hfnx-load-pulse 1.15s ease-in-out infinite;
+      }
+      body.hfnx-active .hf-models-loading::after {
+        content: ""; width: min(320px, 70vw); height: 8px; border-radius: 999px;
+        margin-top: 18px;
+        background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(156,255,99,0.28) 50%, rgba(255,255,255,0.05) 75%);
+        background-size: 200% 100%;
+        animation: hfnx-load-shimmer 1.3s linear infinite;
+      }
+      @keyframes hfnx-load-pulse {
+        0%, 100% { transform: scale(1); opacity: 1; }
+        50% { transform: scale(0.9); opacity: 0.75; }
+      }
+      @keyframes hfnx-load-shimmer {
+        from { background-position: 200% 0; }
+        to { background-position: -200% 0; }
+      }
+    

hf-shell-css-2417117ca803.css

@@ -0,0 +1,51 @@
+
+      /* Preview-release landing: live model catalog gallery (hfpc-*).
+         Active only with ?blogs_with_graphs=1 / ?landing_blogs_with_graphs=1. */
+      body.hfpc-active .model-search,
+      body.hfpc-active .model-search-hit-shield { display: none !important; }
+      body.hfpc-active [data-page="landing"] .gallery:not(.hfpc-gallery) { display: none !important; }
+      /* Preview layout: gallery directly under the hero input; the proof
+         (feature cards) and creators strip move below the gallery so search
+         results render right where the user is typing. */
+      body.hfpc-active .gallery-section[data-page="landing"] { margin-top: 26px; }
+      body.hfpc-active .gallery-section[data-page="landing"] + .proof { margin-top: 44px; }
+      body.hfpc-active .proof + .hf-models-launch { margin-top: 20px; }
+      .hfpc-toolbar { display: grid; gap: 12px; margin: 4px 0 20px; }
+      .hfpc-toolbar__row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
+      .hfpc-sort {
+        background: rgba(255, 255, 255, 0.04); border: 1px solid var(--stroke, rgba(255,255,255,0.1));
+        border-radius: 999px; color: inherit; font: 13px "Inter", sans-serif;
+        padding: 9px 14px; outline: none; cursor: pointer;
+      }
+      .hfpc-sort option { background: #0a121f; }
+      .hfpc-count { color: var(--muted, #91a0ba); font-size: 13px; font-variant-numeric: tabular-nums; }
+      .hfpc-browse {
+        margin-left: auto; color: var(--lime, #9cff63); font-size: 0.8rem; font-weight: 600;
+        letter-spacing: 0.07em; text-transform: uppercase; text-decoration: none;
+      }
+      .hfpc-browse:hover { text-decoration: underline; }
+      .hfpc-filter {
+        background: transparent; border: 1px solid var(--stroke, rgba(255,255,255,0.1));
+        border-radius: 999px; color: var(--muted, #91a0ba); font: 12.5px "Inter", sans-serif;
+        padding: 6px 13px; cursor: pointer; transition: all 0.15s;
+      }
+      .hfpc-filter:hover { color: inherit; border-color: rgba(156, 255, 99, 0.35); }
+      .hfpc-filter.is-on {
+        color: #07100d; background: var(--lime, #9cff63);
+        border-color: var(--lime, #9cff63); font-weight: 600;
+      }
+      .hfpc-filter__count { opacity: 0.6; margin-left: 3px; font-variant-numeric: tabular-nums; }
+      .hfpc-gallery { position: relative; }
+      .hfpc-gallery .gallery-card { position: absolute; top: 0; left: 0; margin: 0; }
+      .hfpc-gallery .gallery-card__image { width: 100%; height: auto; display: block; }
+      .hfpc-gallery .gallery-card__sub { color: var(--muted, #91a0ba); font-size: 0.82rem; }
+      .hfpc-gallery .gallery-card__label.hfpc-has-avatar::before { display: none; }
+      .hfpc-avatar {
+        width: 20px; height: 20px; flex: 0 0 20px; border-radius: 6px;
+        object-fit: cover; background: #fff; padding: 1px; box-sizing: border-box;
+        align-self: center;
+      }
+      .hfpc-avatar--user { border-radius: 50%; }
+      .hfpc-empty { display: none; color: var(--muted, #91a0ba); padding: 34px 4px; font-size: 15px; }
+      .hfpc-empty.is-visible { display: block; }
+    

index.html

@@ -175,7 +175,15 @@
         }
       })();
     </script>
-    <link rel="stylesheet" href="https://hfviewer.com/visualizer/hf-shell-css-4f6465bad160.css">
+    <link rel="stylesheet" href="hf-shell-css-4f6465bad160.css">
+    <script src="https://unpkg.com/es-module-shims@1.10.0/dist/es-module-shims.js"></script>
+    <script type="importmap">
+      {
+        "imports": {
+          "@huggingface/hub": "https://cdn.jsdelivr.net/npm/@huggingface/hub@2.11.2/+esm"
+        }
+      }
+    </script>
   <script>window.dataLayer=window.dataLayer||[];window.gtag=function(){};window.VIEWMYMODEL_HF_API_BASE="https://hfviewer.com/api";try{var u=new URL(window.location.href);var m=u.searchParams.get('model');if(m){window.__SX_DEEP_MODEL=m;u.searchParams.delete('model');window.history.replaceState(null,'',u.toString());}}catch(e){}</script>
 <style>
 /* --- injected by build_space_landing.py: sections stripped for the HF space --- */
@@ -5952,7 +5960,7 @@ body.sx-viewer-open { overflow: hidden; }
     <canvas class="laser-layer" id="laserLayer" aria-hidden="true"></canvas>
 
     <script src="hf-shell-app.js"></script>
-    <link rel="stylesheet" href="https://hfviewer.com/visualizer/hf-shell-css-2417117ca803.css">
+    <link rel="stylesheet" href="hf-shell-css-2417117ca803.css">
     <script>
       (function () {
         "use strict";
@@ -6453,7 +6461,8 @@ body.sx-viewer-open { overflow: hidden; }
         });
       })();
     </script>
-    <link rel="stylesheet" href="https://hfviewer.com/visualizer/hf-shell-css-04b3600b8d38.css">
+    <link rel="stylesheet" href="hf-shell-css-04b3600b8d38.css">
+    <link rel="stylesheet" href="style.css">
     <script>
       (function () {
         // "Log in" from the /next header lands on the same Visualize-my-models
@@ -10205,5 +10214,8 @@ body.sx-viewer-open { overflow: hidden; }
 })();
 </script>
 
+<script src="space-shell.js"></script>
+<script type="module" src="space-auth.js"></script>
+
 </body>
 </html>

space-auth.js

@@ -0,0 +1,198 @@
+import {
+  oauthHandleRedirectIfPresent,
+  oauthLoginUrl,
+} from "@huggingface/hub";
+
+const STORAGE_KEY = "hfviewer:space-native-oauth:v1";
+const authHost = document.getElementById("hfnx-auth");
+
+let oauthResult = readStoredResult();
+let loginUrl = "";
+let rendering = false;
+
+function readStoredResult() {
+  try {
+    const value = localStorage.getItem(STORAGE_KEY);
+    return value ? JSON.parse(value) : null;
+  } catch {
+    return null;
+  }
+}
+
+function writeStoredResult(value) {
+  try {
+    if (value) localStorage.setItem(STORAGE_KEY, JSON.stringify(value));
+    else localStorage.removeItem(STORAGE_KEY);
+  } catch {
+    // Storage can be unavailable in privacy-focused browsers. The callback
+    // tab still remains signed in for the current render.
+  }
+}
+
+function userFromResult(result) {
+  const raw = result?.userInfo || result?.userinfo || result?.user_info || result?.user || {};
+  const username = String(
+    raw.preferred_username || raw.preferredUsername || raw.username || raw.name || ""
+  ).trim();
+  if (!username) return null;
+  return {
+    username,
+    name: String(raw.name || username).trim(),
+    picture: String(raw.picture || raw.avatar_url || raw.avatarUrl || "").trim(),
+    profile: String(raw.profile || `https://huggingface.co/${encodeURIComponent(username)}`).trim(),
+  };
+}
+
+function keepReleasePills() {
+  if (!authHost) return [];
+  return Array.from(authHost.children).filter((element) =>
+    element.classList.contains("hfnx-auth__pill")
+  );
+}
+
+function makeAvatar(user) {
+  if (user.picture) {
+    const image = document.createElement("img");
+    image.className = "hfnx-auth__avatar";
+    image.src = user.picture;
+    image.alt = "";
+    image.referrerPolicy = "no-referrer";
+    return image;
+  }
+  const letter = document.createElement("span");
+  letter.className = "hfnx-auth__avatar hfnx-auth__avatar--letter";
+  letter.textContent = user.username.charAt(0).toUpperCase();
+  return letter;
+}
+
+function makeLoggedOutControl() {
+  const link = document.createElement("a");
+  link.dataset.spaceNativeAuth = "login";
+  link.className = "space-native-auth-login";
+  link.textContent = "Log in";
+  link.title = "Sign in with Hugging Face";
+  link.target = "_blank";
+  link.rel = "noopener";
+  link.href = loginUrl || "#";
+  if (!loginUrl) link.setAttribute("aria-disabled", "true");
+  link.addEventListener("click", (event) => {
+    if (!loginUrl) event.preventDefault();
+  });
+  return link;
+}
+
+function makeLoggedInControl(user) {
+  const wrap = document.createElement("div");
+  wrap.dataset.spaceNativeAuth = "profile";
+  wrap.className = "space-native-auth-wrap";
+
+  const chip = document.createElement("button");
+  chip.type = "button";
+  chip.className = "hfnx-auth__chip";
+  chip.setAttribute("aria-haspopup", "menu");
+  chip.setAttribute("aria-expanded", "false");
+  chip.appendChild(makeAvatar(user));
+  const label = document.createElement("span");
+  label.textContent = user.username;
+  chip.appendChild(label);
+
+  const menu = document.createElement("div");
+  menu.className = "hfnx-auth__menu space-native-auth-menu";
+  menu.setAttribute("role", "menu");
+
+  const profile = document.createElement("a");
+  profile.className = "hfnx-auth__item";
+  profile.href = user.profile;
+  profile.target = "_blank";
+  profile.rel = "noopener";
+  profile.textContent = "Hugging Face profile";
+  profile.setAttribute("role", "menuitem");
+
+  const logout = document.createElement("button");
+  logout.type = "button";
+  logout.className = "hfnx-auth__item";
+  logout.textContent = "Log out";
+  logout.setAttribute("role", "menuitem");
+  logout.addEventListener("click", () => {
+    oauthResult = null;
+    writeStoredResult(null);
+    renderAuth();
+  });
+
+  const setOpen = (open) => {
+    menu.classList.toggle("is-open", open);
+    chip.setAttribute("aria-expanded", open ? "true" : "false");
+  };
+  chip.addEventListener("click", (event) => {
+    event.stopPropagation();
+    setOpen(!menu.classList.contains("is-open"));
+  });
+  document.addEventListener("click", () => setOpen(false));
+
+  menu.append(profile, logout);
+  wrap.append(chip, menu);
+  return wrap;
+}
+
+function renderAuth() {
+  if (!authHost || rendering) return;
+  rendering = true;
+  const pills = keepReleasePills();
+  const user = userFromResult(oauthResult);
+  authHost.replaceChildren(...pills, user ? makeLoggedInControl(user) : makeLoggedOutControl());
+  queueMicrotask(() => { rendering = false; });
+}
+
+function cleanCallbackQuery() {
+  try {
+    const url = new URL(window.location.href);
+    let changed = false;
+    for (const key of ["code", "state", "scope", "error", "error_description"]) {
+      if (url.searchParams.has(key)) {
+        url.searchParams.delete(key);
+        changed = true;
+      }
+    }
+    if (changed) history.replaceState(null, "", url.toString());
+  } catch {
+    // Cosmetic cleanup only.
+  }
+}
+
+async function initialize() {
+  renderAuth();
+  try {
+    const callbackResult = await oauthHandleRedirectIfPresent();
+    if (callbackResult) {
+      oauthResult = callbackResult;
+      writeStoredResult(callbackResult);
+      cleanCallbackQuery();
+      renderAuth();
+    }
+  } catch (error) {
+    console.warn("Hugging Face Space login callback failed", error);
+  }
+
+  try {
+    const scopes = window.huggingface?.variables?.OAUTH_SCOPES;
+    loginUrl = await oauthLoginUrl(scopes ? { scopes } : undefined);
+  } catch (error) {
+    console.warn("Could not prepare Hugging Face Space login", error);
+  }
+  renderAuth();
+}
+
+if (authHost) {
+  const observer = new MutationObserver(() => {
+    if (!rendering && !authHost.querySelector("[data-space-native-auth]")) renderAuth();
+  });
+  observer.observe(authHost, { childList: true });
+}
+
+window.addEventListener("storage", (event) => {
+  if (event.key !== STORAGE_KEY) return;
+  oauthResult = readStoredResult();
+  renderAuth();
+});
+
+initialize();

space-shell.js

@@ -0,0 +1,58 @@
+(function () {
+  "use strict";
+
+  var CARD_PREFIX = "https://hfviewer.com/models/cards/";
+  var API_PREFIX = "https://hfviewer.com/api/graph-preview.svg";
+
+  function repositoryFromImage(image) {
+    var alt = String(image.getAttribute("alt") || "").trim();
+    var suffix = " architecture graph";
+    if (alt.endsWith(suffix)) return alt.slice(0, -suffix.length).trim();
+
+    var card = image.closest("[data-model]");
+    if (!card) return "";
+    try {
+      var url = new URL(String(card.dataset.model || ""), window.location.href);
+      return url.pathname.replace(/^\/+|\/+$/g, "");
+    } catch (error) {
+      return "";
+    }
+  }
+
+  function restoreCard(image) {
+    if (!(image instanceof HTMLImageElement)) return;
+    if (image.dataset.spaceCardFallback === "1") return;
+    if (!String(image.currentSrc || image.src || "").startsWith(CARD_PREFIX)) return;
+    var repository = repositoryFromImage(image);
+    if (!repository || repository.split("/").length !== 2) return;
+
+    image.dataset.spaceCardFallback = "1";
+    var query = new URLSearchParams({
+      source: repository,
+      source_page: "hf-space",
+    });
+    image.src = API_PREFIX + "?" + query.toString();
+  }
+
+  document.addEventListener("error", function (event) {
+    restoreCard(event.target);
+  }, true);
+
+  function repairAlreadyFailedImages(root) {
+    var images = (root || document).querySelectorAll("img");
+    images.forEach(function (image) {
+      if (image.complete && image.naturalWidth === 0) restoreCard(image);
+    });
+  }
+
+  repairAlreadyFailedImages(document);
+  new MutationObserver(function (records) {
+    records.forEach(function (record) {
+      record.addedNodes.forEach(function (node) {
+        if (!(node instanceof Element)) return;
+        if (node instanceof HTMLImageElement) restoreCard(node);
+        repairAlreadyFailedImages(node);
+      });
+    });
+  }).observe(document.body, { childList: true, subtree: true });
+})();

style.css

@@ -1,28 +1,87 @@
+/* Space-owned safety net. The full hfviewer shell is vendored alongside this
+   file, but these colors also prevent a white flash while the larger styles
+   are parsed. */
+:root,
+html,
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+  color-scheme: dark;
+  background: #050914 !important;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+body {
+  min-height: 100vh;
+  color: #f5f7fb;
+}
+
+/* The Space snapshot normally hides hfviewer.com's own cross-origin auth.
+   Native Space OAuth is the one exception. */
+body .hfnx-auth > [data-space-native-auth] {
+  display: inline-flex !important;
+}
+
+.space-native-auth-login {
+  align-items: center;
+  justify-content: center;
+  min-height: 36px;
+  padding: 0 14px;
+  border: 1px solid rgba(255, 255, 255, 0.16);
+  border-radius: 10px;
+  background: rgba(255, 255, 255, 0.07);
+  color: #f8fafc;
+  font: 600 13px/1 Inter, ui-sans-serif, system-ui, sans-serif;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
+}
+
+.space-native-auth-login:hover {
+  border-color: rgba(159, 255, 102, 0.62);
+  background: rgba(159, 255, 102, 0.1);
+  transform: translateY(-1px);
+}
+
+.space-native-auth-login[aria-disabled="true"] {
+  cursor: wait;
+  opacity: 0.62;
+}
+
+.space-native-auth-wrap {
+  position: relative;
+  align-items: center;
+}
+
+.space-native-auth-wrap .hfnx-auth__chip {
+  display: inline-flex !important;
+}
+
+body .space-native-auth-menu {
+  display: none !important;
+  position: absolute;
+  top: calc(100% + 8px);
+  right: 0;
+  z-index: 4200;
+  min-width: 168px;
+  padding: 6px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 12px;
+  background: rgba(13, 17, 29, 0.98);
+  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.42);
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+body .space-native-auth-menu.is-open {
+  display: grid !important;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.space-native-auth-menu .hfnx-auth__item {
+  width: 100%;
+  box-sizing: border-box;
+  text-align: left;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+@media (max-width: 640px) {
+  .space-native-auth-login {
+    min-height: 34px;
+    padding: 0 10px;
+    font-size: 12px;
+  }
 }