:root { --nav-promo-height: 0px; }
      body {
        padding-top: calc(var(--nav-height, 64px) + var(--nav-promo-height, 0px));
      }
      /* Homepage only: the hero video starts at y=0 and the fixed nav floats on
         top of it, so the clip plays through the bar. The nav takes its solid
         background back the moment you scroll (home.js toggles .scrolled at 50px). */
      body.home-video-nav { padding-top: 0; }
      body.home-video-nav .platform-nav {
        background: linear-gradient(180deg, rgba(5,6,11,.62), rgba(5,6,11,0));
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 1px solid rgba(255,255,255,.06);
      }
      body.home-video-nav .platform-nav.scrolled {
        background: rgba(10,10,15,.94);
        backdrop-filter: blur(20px) saturate(1.5);
        -webkit-backdrop-filter: blur(20px) saturate(1.5);
        border-bottom-color: var(--border-subtle);
      }
      /* the hero owns the space the nav sits over */
      body.home-video-nav #hero-v2 { margin-top: 0; }
      /* the fixed nav (z-index 1000) now covers the top of the hero, so the
         mute control has to clear it or its clicks land on the nav instead */
      body.home-video-nav #hv2-mute { top: calc(var(--nav-height, 64px) + 14px); z-index: 1001; }
      body.home-video-nav main, body.home-video-nav .main-wrap { padding-top: 0; margin-top: 0; }
      body.home-video-nav #hero-v2 .hv2-inner { padding-top: var(--nav-height, 64px); }
      body.has-story-ai-strip .platform-nav {
        top: var(--nav-promo-height, 44px);
      }
      @media (max-width: 768px) {
        :root { --nav-promo-height: 0px; }
      }
      /* ===== Homepage mega-menu nav (Create / AI Models / Features), OpenArt-style ===== */
      /* Lift the whole top bar above the hero/main (which are position:relative z-index:3),
         otherwise the dropdowns render BEHIND the create form. Stays below modals (~1e6). */
      .topbar { position: relative; z-index: 1000; height: 64px; background: rgba(5,6,11,0.94); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 16px 44px rgba(0,0,0,0.18); }
      .brand { font-size: 1.08rem; }
      .brand-mark { width: 32px; height: 32px; border-radius: 8px; }
      .home-primary-nav { display: flex; align-items: center; justify-content: center; align-self: stretch; gap: 4px; z-index: 1000; flex: 1 1 auto; min-width: 0; }
      .home-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 13px; color: rgba(255,255,255,0.72); font-weight: 850; font-size: 0.9rem; text-decoration: none; border-radius: 9px; }
      .home-nav-link:hover, .home-nav-link:focus-visible { color: #fff; background: rgba(255,255,255,0.06); outline: none; }
      .home-nav-menu { position: relative; display: flex; align-items: stretch; }
      .home-nav-trigger { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; color: rgba(255,255,255,0.72); font-weight: 850; font-size: 0.9rem; padding: 0 13px; text-decoration: none; border-radius: 9px; }
      .home-nav-menu:hover .home-nav-trigger, .home-nav-menu:focus-within .home-nav-trigger { color: #fff; background: rgba(255,255,255,0.07); }
      .home-nav-caret { font-size: 0.7em; opacity: 0.65; transition: transform 0.15s ease; }
      .home-nav-menu:hover .home-nav-caret, .home-nav-menu:focus-within .home-nav-caret { transform: rotate(180deg); }
      .home-nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px); min-width: 320px; max-width: min(360px, calc(100vw - 32px)); padding: 8px; background: #15151c; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; box-shadow: 0 20px 56px rgba(0,0,0,0.55); opacity: 0; visibility: hidden; transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; z-index: 1200; }
      .home-nav-menu:hover .home-nav-dropdown, .home-nav-menu:focus-within .home-nav-dropdown { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
      .home-nav-section { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(255,255,255,0.42); padding: 8px 10px 4px; }
      .home-nav-item { display: flex; align-items: flex-start; gap: 11px; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: #fff; }
      .home-nav-item:hover { background: rgba(255,255,255,0.06); }
      .home-nav-icon { font-size: 1.15rem; flex: 0 0 auto; line-height: 1.15; }
      .home-nav-copy { display: flex; flex-direction: column; min-width: 0; }
      .home-nav-copy strong { font-size: 0.85rem; font-weight: 800; line-height: 1.2; }
      .home-nav-copy small { font-size: 0.72rem; color: rgba(255,255,255,0.55); line-height: 1.32; margin-top: 1px; }
      .nav-actions { gap: 6px; }
      .nav-actions a,
      .nav-actions button { height: 38px; border-color: transparent; background: transparent; color: rgba(255,255,255,0.76); font-weight: 850; }
      .nav-actions a:hover,
      .nav-actions button:hover { color: #fff; background: rgba(255,255,255,0.06); }
      .nav-actions .nav-cta { border-color: transparent; color: #05060b; background: #fff; box-shadow: none; }
      .account-pill { min-height: 38px; border-color: rgba(97,218,251,0.24); background: rgba(97,218,251,0.08); }
      .logout-button { color: rgba(255,255,255,0.76); }
      .home-mobile-actions { display: none; align-items: center; gap: 12px; margin-left: auto; }
      .home-mobile-create { display: inline-flex; align-items: center; justify-content: center; height: 38px; padding: 0 17px; border-radius: 999px; background: #fff; color: #05060b; font-weight: 950; text-decoration: none; white-space: nowrap; }
      .home-menu-toggle { width: 42px; height: 42px; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; border: 0; background: transparent; color: #fff; cursor: pointer; }
      .home-menu-toggle span { width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
      .topbar.mobile-menu-open .home-menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
      .topbar.mobile-menu-open .home-menu-toggle span:nth-child(2) { opacity: 0; }
      .topbar.mobile-menu-open .home-menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
      .home-mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 1400; height: calc(100vh - 64px); height: calc(100dvh - 64px); padding: 24px 26px 30px; overflow-y: auto; overscroll-behavior: contain; background: rgba(5,6,11,0.96); border-top: 1px solid rgba(255,255,255,0.08); box-shadow: 0 28px 70px rgba(0,0,0,0.58); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
      .topbar.mobile-menu-open .home-mobile-menu { display: block; }
      .home-mobile-menu-inner { display: flex; flex-direction: column; width: min(100%, 560px); margin: 0 auto; }
      .home-mobile-section-title { padding: 14px 0 16px; color: rgba(255,255,255,0.58); font-size: 0.78rem; font-weight: 950; letter-spacing: 0.13em; text-transform: uppercase; }
      .home-mobile-row { display: flex; align-items: center; min-height: 61px; border-top: 1px solid rgba(255,255,255,0.1); color: #fff; text-decoration: none; font-size: 1.08rem; font-weight: 900; letter-spacing: 0; }
      .home-mobile-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }
      .home-mobile-row:hover, .home-mobile-row:focus-visible { color: #67e8f9; outline: none; }
      .home-mobile-row.primary { color: #05060b; justify-content: center; margin: 10px 0 14px; min-height: 52px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 16px 34px rgba(255,255,255,0.08); }
      .home-mobile-row[hidden] { display: none !important; }
      .home-mobile-logout { appearance: none; width: 100%; justify-content: flex-start; background: transparent; border-left: 0; border-right: 0; border-bottom: 0; cursor: pointer; font-family: inherit; }
      body.home-mobile-menu-open { overflow: hidden; }
      @media (max-width: 900px) {
        .topbar { position: relative; height: 64px; padding: 0 18px; }
        .home-primary-nav, .nav-actions { display: none !important; }
        .home-mobile-actions { display: flex; }
      }
      /* Storyboard-style homepage nav, replacing the old channel-claim header. */
      .topbar#home-topbar { height: 64px; display: flex; align-items: center; gap: 18px; justify-content: flex-start; padding: 0 clamp(18px, 4vw, 52px); background: rgba(5,6,11,0.94); border-bottom: 1px solid rgba(255,255,255,0.08); box-shadow: 0 16px 44px rgba(0,0,0,0.18); }
      #home-topbar .brand { flex: 0 0 auto; font-size: 1.08rem; min-width: 0; }
      #home-topbar .brand-mark { width: 32px; height: 32px; border-radius: 8px; color: #061018; background: linear-gradient(135deg, #61dafb, #5ee6a8); }
      #home-topbar .home-primary-nav { display: flex; align-items: center; justify-content: flex-start; gap: 8px; margin-left: 0; margin-right: auto; min-width: 0; flex: 1 1 auto; }
      #home-topbar .home-nav-menu { position: relative; display: inline-flex; align-items: center; }
      #home-topbar .home-nav-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 64px; padding: 0 10px; border: 0; border-radius: 0; color: rgba(245,247,251,.72); background: transparent; font: inherit; font-size: .9rem; font-weight: 850; text-decoration: none; white-space: nowrap; cursor: pointer; }
      #home-topbar .home-nav-link:hover,
      #home-topbar .home-nav-link:focus-visible,
      #home-topbar .home-nav-menu:hover > .home-nav-link,
      #home-topbar .home-nav-menu:focus-within > .home-nav-link { color: #fff; background: transparent; outline: none; }
      #home-topbar .home-nav-chevron { color: rgba(245,247,251,.48); font-size: .82rem; font-weight: 700; }
      #home-topbar .home-mega-menu { position: fixed; left: 246px; right: 0; top: 64px; z-index: 1200; display: grid; grid-template-columns: 1fr; min-height: 220px; gap: 24px; padding: 28px clamp(28px, 5vw, 76px); border-top: 1px solid rgba(255,255,255,.07); border-bottom: 1px solid rgba(255,255,255,.08); background: linear-gradient(180deg, rgba(7,8,12,.98), rgba(11,12,18,.97)); box-shadow: 0 28px 70px rgba(0,0,0,.42); opacity: 0; transform: translateY(-8px); visibility: hidden; pointer-events: none; transition: opacity .16s ease, transform .16s ease, visibility .16s ease; }
      #home-topbar .home-nav-menu:hover .home-mega-menu,
      #home-topbar .home-nav-menu.open .home-mega-menu,
      #home-topbar .home-nav-menu:focus-within .home-mega-menu { opacity: 1; transform: translateY(0); visibility: visible; pointer-events: auto; }
      #home-topbar .home-mega-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 24px clamp(28px, 4vw, 58px); align-content: start; }
      #home-topbar .home-mega-col { display: grid; gap: 2px; align-content: start; }
      #home-topbar .home-mega-heading { margin-bottom: 8px; color: rgba(97,218,251,.9); font-size: .72rem; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
      #home-topbar .home-mega-col a { min-height: 38px; display: flex; align-items: center; padding: 0 10px; border-radius: 8px; color: rgba(245,247,251,.78); font-size: .94rem; font-weight: 850; text-decoration: none; }
      #home-topbar .home-mega-col a:hover,
      #home-topbar .home-mega-col a:focus-visible { color: #fff; background: rgba(255,255,255,.06); outline: none; }
      #home-topbar .home-nav-toggle { display: none; width: 42px; height: 42px; margin-left: auto; align-items: center; justify-content: center; flex-direction: column; gap: 5px; border: 1px solid rgba(255,255,255,.14); border-radius: 10px; background: rgba(255,255,255,.055); color: #fff; cursor: pointer; }
      #home-topbar .home-nav-toggle span,
      #home-topbar .home-nav-toggle::before,
      #home-topbar .home-nav-toggle::after { content: ''; display: block; width: 18px; height: 2px; border-radius: 999px; background: currentColor; transition: transform .18s ease, opacity .18s ease; }
      #home-topbar.mobile-open .home-nav-toggle::before { transform: translateY(7px) rotate(45deg); }
      #home-topbar.mobile-open .home-nav-toggle span { opacity: 0; }
      #home-topbar.mobile-open .home-nav-toggle::after { transform: translateY(-7px) rotate(-45deg); }
      #home-topbar .nav-actions { display: flex; align-items: center; gap: 18px; flex: 0 0 auto; }
      #home-topbar .nav-actions a,
      #home-topbar .nav-actions button { height: 38px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0; border: 0; border-radius: 0; color: rgba(245,247,251,.72); background: transparent; font-size: .9rem; font-weight: 850; white-space: nowrap; }
      #home-topbar .nav-actions .nav-cta { height: 42px; padding: 0 20px; border-radius: 12px; color: #040508; background: #fff; }
      #home-topbar .nav-actions a:hover,
      #home-topbar .nav-actions button:hover { color: #fff; background: transparent; }
      #home-topbar .nav-actions .nav-cta:hover { color: #040508; background: rgba(255,255,255,.88); }
      @media (max-width: 980px) {
        .topbar#home-topbar { height: auto; min-height: 64px; padding-top: 10px; padding-bottom: 10px; align-items: center; gap: 10px; flex-wrap: wrap; }
        #home-topbar .home-nav-toggle { display: inline-flex; }
        #home-topbar .home-primary-nav,
        #home-topbar .nav-actions { display: none !important; }
        #home-topbar.mobile-open .home-primary-nav,
        #home-topbar.mobile-open .nav-actions { display: grid !important; grid-template-columns: 1fr; width: 100%; gap: 8px; margin-left: 0; padding: 10px; border: 1px solid rgba(255,255,255,.1); background: rgba(10,13,24,.94); }
        #home-topbar.mobile-open .home-primary-nav { margin-top: 4px; border-radius: 14px 14px 0 0; border-bottom: 0; padding-bottom: 6px; }
        #home-topbar.mobile-open .nav-actions { border-radius: 0 0 14px 14px; border-top: 0; padding-top: 6px; }
        #home-topbar .home-nav-link,
        #home-topbar .nav-actions a,
        #home-topbar .nav-actions button { width: 100%; min-height: 44px; justify-content: center; }
        #home-topbar .home-nav-menu { width: 100%; display: grid; }
        #home-topbar .home-nav-menu > .home-nav-link { justify-content: space-between; padding: 0 12px; }
        #home-topbar .home-mega-menu { position: static; left: auto; right: auto; top: auto; min-height: 0; display: none; width: 100%; padding: 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 12px; background: rgba(255,255,255,.035); box-shadow: none; opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
        #home-topbar .home-nav-menu.open .home-mega-menu,
        #home-topbar .home-nav-menu:focus-within .home-mega-menu { display: grid; }
        #home-topbar .home-mega-grid { grid-template-columns: 1fr; gap: 12px; }
      }
      /* tighten the gap above the Community Videos title + drop the divider line */
      #public-showcase { margin-top: 12px !important; padding-top: 16px !important; border-top: 0 !important; }
      #job-feed:empty { margin-top: 0 !important; }
      .homepage-hero-rebuilt { width: 100%; margin: 0 0 10px; padding: 8px 22px 0; }
      .homepage-hero-rebuilt__inner { width: 100%; max-width: 980px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
      .homepage-hero-rebuilt__title { display: block; width: 100%; max-width: none; margin: 0; color: #fff; font-family: 'Space Grotesk','Inter',sans-serif; font-size: clamp(1.5rem, 3vw, 2.45rem); line-height: 1.03; letter-spacing: -.045em; text-align: center; }
      .homepage-hero-rebuilt__title-line { display: block; width: 100%; text-align: center; }
      .homepage-hero-rebuilt__copy { width: 100%; max-width: 760px; margin: 8px auto 0; color: rgba(255,255,255,.68); font-size: clamp(.85rem, 1.3vw, .96rem); line-height: 1.5; text-align: center; }
      .homepage-hero-rebuilt__copy a { display: inline-block; color: #67e8f9; font-weight: 850; text-decoration: none; white-space: nowrap; }
      .homepage-hero-rebuilt__copy a:hover { text-decoration: underline; }
      .referral-invite-banner { width:min(920px,calc(100% - 28px)); margin:-6px auto 18px; padding:13px 15px; display:flex; align-items:center; justify-content:space-between; gap:14px; border:1px solid rgba(99,230,165,.35); border-radius:15px; background:linear-gradient(90deg,rgba(15,45,39,.96),rgba(28,20,53,.96)); box-shadow:0 12px 32px rgba(0,0,0,.2); }
      .referral-invite-banner[hidden] { display:none !important; }
      .referral-invite-banner__copy { display:flex; flex-direction:column; gap:3px; color:rgba(255,255,255,.72); font-size:.78rem; line-height:1.4; }
      .referral-invite-banner__copy strong { color:#fff; font-size:.92rem; }
      .referral-invite-banner__cta { flex:0 0 auto; padding:10px 14px; border-radius:10px; color:#07130f; background:#86efac; font-size:.78rem; font-weight:900; text-decoration:none; }
      @media (max-width: 640px) {
        .homepage-hero-rebuilt { margin-bottom: 14px; padding: 14px 14px 0; }
        .homepage-hero-rebuilt__copy { line-height: 1.5; }
        .referral-invite-banner { align-items:stretch; flex-direction:column; }
        .referral-invite-banner__cta { text-align:center; }
      }
      /* Homepage video grids: 4 columns whether signed in or signed out.
         Authentication changes which videos are visible, not the density. */
      .job-feed,
      .public-showcase-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; gap: 16px !important; }
      @media (max-width: 1100px) {
        .job-feed,
        .public-showcase-grid { grid-template-columns: repeat(4, minmax(0,1fr)) !important; }
      }
      /* Create Video on the SAME LINE as the character refs (2026-08-29):
         the AI chat panel sits fixed bottom-right and was covering the button.
         Picker hidden (signed out) -> the submit row takes the full line.
         Advanced expanded -> the row grows and wraps below the refs. */
      /* Create Video lives on the TOP ref row (2026-08-29): same line as the
         selected @ref character chip, far from the bottom-right chat panel. */
      #character-band-controls > .create-cta-row { margin-left: auto; }
      @media (max-width: 760px) {
        #character-band-controls > .create-cta-row { flex: 1 1 100%; justify-content: stretch !important; }
        #character-band-controls .create-cta-row > button[type="submit"] { width: 100%; min-height: 46px; }
      }
      /* picker-cta-line is a NEUTRAL wrapper (2026-08-29): the Create button
         moved to the top ref row, and the flex rules here were squeezing the
         character picker in half. Picker keeps its native layout. */
      #picker-cta-line { display: block; }
      /* Character selector spans edge to edge (Jason 2026-08-29). */
      #picker-cta-line > .character-picker { width: 100% !important; max-width: none !important; box-sizing: border-box; }
      #picker-cta-line .character-row { width: 100%; }
      #picker-cta-line > [hidden] { display: none !important; }
      /* Advanced toggle on the same row as the credits / Create Video buttons */
      .create-submit-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; }
      .create-submit-row > #advanced-options { order: -1 !important; margin-right: auto !important; border: none !important; background: none !important; }
      /* Main media controls. Theme is now an Advanced-only override. */
      .media-settings-row { grid-template-columns: minmax(0,1.2fr) minmax(280px,.72fr) minmax(220px,.63fr) !important; align-items: stretch !important; }
      .media-settings-row.lyrical-mode { grid-template-columns: minmax(300px,1.15fr) minmax(230px,.9fr) minmax(230px,.9fr) !important; }
      .media-settings-row.lyrical-mode #one-shot-song-field { order: 1 !important; }
      .media-settings-row.lyrical-mode #lyrical-theme-field { order: 2 !important; }
      .media-settings-row.lyrical-mode #art-style-effect-field { order: 3 !important; }
      #theme-manifest-field { display: none !important; }
      @media (max-width: 760px) {
        .media-settings-row,
        .media-settings-row.prompt-mode { grid-template-columns: minmax(0,1fr) !important; }
        #one-shot-song-field { order: 1 !important; grid-column: 1 / -1 !important; }
        .media-settings-row.lyrical-mode #lyrical-theme-field { order: 2 !important; grid-column: 1 / -1 !important; }
        #art-style-effect-field { order: 2 !important; grid-column: 1 / -1 !important; }
        .media-settings-row.lyrical-mode #art-style-effect-field { order: 3 !important; }
        #story-ai-quick-field { display: none !important; }
        .create-submit-row { display: grid !important; grid-template-columns: auto minmax(0,1fr) !important; align-items: center !important; gap: 8px !important; width: 100%; }
        .create-submit-row > #advanced-options { display: contents !important; }
        .create-submit-row > #advanced-options > .advanced-mini-toggle { grid-column: 1; grid-row: 1; min-height: 46px; margin: 0; padding: 0 10px; white-space: nowrap; }
        .create-submit-row > .create-cta-row { grid-column: 2; grid-row: 1; display: block; width: 100%; min-width: 0; }
        .create-submit-row .credit-estimate.cta-pair { display: none !important; }
        .create-submit-row .create-cta-row > button[type="submit"] { width: 100%; min-height: 46px; margin: 0; }
        .create-submit-row > #advanced-options > .advanced-grid { grid-column: 1 / -1; grid-row: 2; width: 100%; min-width: 0; margin: 0 !important; }
      }
      #prompt-commercial-field { order: 3 !important; }
      /* The hidden attribute must actually hide fields ” .art-style-effect-field display:grid otherwise overrides it */
      .media-settings-row > div[hidden] { display: none !important; }
      /* Prompt mode: Art style + Commercial theme as two boxed sections (audio hidden) */
      .media-settings-row.prompt-mode { grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important; }
      /* Lyrical mode: prompt input is optional ” shade it to make that clear */
      #video-prompt.lyrical-shaded { opacity: 0.55; }
      .media-settings-row > div { align-content: start !important; }
      .media-settings-row > div > label { min-height: 1.5em !important; }
      .media-settings-row select { height: 40px !important; min-height: 40px !important; box-sizing: border-box !important; align-self: start !important; }
      .media-settings-row .audio-preview-btn, .media-settings-row .audio-upload-btn { height: 40px !important; min-height: 40px !important; box-sizing: border-box !important; }
      /* select, play button and import button all centered on the same 40px line */
      .media-settings-row .song-source-grid { align-items: center !important; }
      .media-settings-row .song-source-grid > * { align-self: center !important; }
      .media-settings-row .audio-upload-row { align-items: center !important; margin-top: 0 !important; }
      /* Compact play button: drop the "Play/Stop Preview" words, show a single glyph (▶ / ■ when playing) */
      #one-shot-song-preview { width: auto !important; min-width: 40px; padding: 0 !important; }
      #one-shot-song-preview span { display: none !important; }
      #one-shot-song-preview::before { content: '\25B6'; font-size: 14px; line-height: 1; }
      #one-shot-song-preview.playing::before { content: '\25A0'; }
      /* Drop the "Music video idea / Video prompt" header label to close the gap above the prompt input */
      .prompt-head label[for="video-prompt"] { display: none !important; }
      .empty-category-browser { max-width: 1180px; margin: 28px auto 0; padding: 0; }
      .empty-category-browser[hidden] { display: none !important; }
      .empty-category-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
      .empty-category-kicker { color: #f6b21a; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.7rem; font-weight: 900; margin-bottom: 4px; }
      .empty-category-title { margin: 0; color: #f8fafc; font-size: clamp(1.25rem, 2.1vw, 1.8rem); line-height: 1.1; }
      .empty-category-copy { display: none; }
      .empty-category-link { color: #67e8f9; font-weight: 900; text-decoration: none; white-space: nowrap; }
      .empty-category-tabs { display: none; }
      .empty-category-tab { border: 1px solid rgba(103,232,249,0.45); background: rgba(8,22,31,0.84); color: #9bf3ff; border-radius: 999px; padding: 8px 14px; font-size: 0.83rem; font-weight: 900; cursor: pointer; }
      .empty-category-tab.active { border-color: #f6b21a; background: rgba(246,178,26,0.16); color: #fff; }
      .empty-category-list { display: grid; gap: 20px; margin-top: 4px; }
      .empty-category-group-title { color: #f6b21a; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; font-weight: 900; margin-bottom: 8px; }
      .empty-category-group-title span { color: rgba(255,255,255,0.4); font-weight: 800; }
      .empty-category-items { list-style: none; margin: 0; padding: 0; columns: 4 200px; column-gap: 24px; }
      .empty-category-items li { break-inside: avoid; }
      .empty-category-item { display: block; padding: 4px 2px; color: rgba(255,255,255,0.78); text-decoration: none; font-size: 0.9rem; font-weight: 850; line-height: 1.25; }
      .empty-category-item:hover, .empty-category-item:focus-visible { color: #67e8f9; outline: none; }
      .empty-category-loading { color: rgba(226,232,240,0.62); padding: 12px 0; font-weight: 800; }
      @media (max-width: 640px) {
        .empty-category-head { align-items: flex-start; flex-direction: column; }
        .empty-category-items { columns: 1; }
      }
      @media (max-width: 640px) {
        .topbar { height: 64px !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px !important; padding: 0 14px !important; }
        .brand-channel { width: auto !important; align-items: center !important; flex: 1 1 auto; min-width: 0; }
        .brand { gap: 9px; min-width: 0; font-size: 1rem; }
        .brand span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        .brand-mark { width: 31px; height: 31px; border-radius: 8px; flex: 0 0 auto; }
        .home-mobile-actions { flex: 0 0 auto; gap: 8px; }
        .home-mobile-create { height: 36px; padding: 0 14px; font-size: 0.86rem; }
        .home-menu-toggle { width: 38px; height: 38px; }
        .home-mobile-menu { height: calc(100vh - 64px); height: calc(100dvh - 64px); padding: 20px 25px 26px; }
        .home-mobile-row { min-height: 61px; font-size: 1.18rem; }
      }
    


        .home-proof-bar{display:grid;grid-template-columns:minmax(0,1.15fr) repeat(3,minmax(0,.8fr));gap:12px;align-items:stretch;margin:14px 0 4px;padding:14px;border:1px solid rgba(103,232,249,.16);border-radius:16px;background:linear-gradient(135deg,rgba(103,232,249,.055),rgba(167,139,250,.055))}
        .home-proof-bar__lead{display:grid;align-content:center;gap:4px;padding:4px 7px}.home-proof-bar__lead strong{color:#fff;font-size:.91rem}.home-proof-bar__lead span{color:rgba(255,255,255,.58);font-size:.75rem;line-height:1.45}
        .home-proof-bar__item{display:grid;align-content:start;gap:5px;min-height:58px;padding:12px 14px;border:1px solid rgba(255,255,255,.08);border-radius:12px;color:#fff;background:rgba(255,255,255,.025);text-decoration:none}.home-proof-bar__item strong{font-size:.78rem}.home-proof-bar__item span{color:#67e8f9;font-size:.68rem;font-weight:850}.home-proof-bar__item:hover{border-color:rgba(103,232,249,.38);background:rgba(103,232,249,.07)}
        .home-guide-hub{width:min(1440px,100%);margin:42px auto 18px;padding:34px;border:1px solid rgba(255,255,255,.1);border-radius:22px;background:linear-gradient(145deg,rgba(20,22,34,.96),rgba(9,11,18,.98))}
        .home-guide-hub-head{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:22px}
        .home-guide-hub-kicker{margin-bottom:8px;color:#67e8f9;font-size:.7rem;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
        .home-guide-hub h2{margin:0;color:#fff;font-size:clamp(1.55rem,3vw,2.35rem);letter-spacing:-.035em}
        .home-guide-hub p{max-width:720px;margin:9px 0 0;color:rgba(255,255,255,.6);font-size:.86rem;line-height:1.65}
        .home-guide-hub-all{flex:0 0 auto;color:#67e8f9;font-size:.78rem;font-weight:900;text-decoration:none}
        .home-guide-hub-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
        .home-guide-card{min-width:0;min-height:112px;display:flex;flex-direction:column;justify-content:space-between;gap:20px;padding:17px;border:1px solid rgba(255,255,255,.09);border-radius:15px;color:#f8fafc;background:rgba(255,255,255,.025);font-size:.82rem;font-weight:900;line-height:1.4;text-decoration:none;transition:transform .16s ease,border-color .16s ease,background .16s ease}
        .home-guide-card span{color:#a5f3fc;font-size:.72rem}
        .home-guide-card:hover{transform:translateY(-2px);border-color:rgba(103,232,249,.5);background:rgba(255,255,255,.055)}
        @media(max-width:1050px){.home-proof-bar{grid-template-columns:repeat(3,minmax(0,1fr))}.home-proof-bar__lead{grid-column:1/-1}.home-guide-hub-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
        @media(max-width:620px){.home-proof-bar{grid-template-columns:1fr;padding:10px}.home-proof-bar__lead{grid-column:auto}.home-guide-hub{margin-top:28px;padding:22px 16px}.home-guide-hub-head{display:block}.home-guide-hub-all{display:inline-block;margin-top:13px}.home-guide-hub-grid{grid-template-columns:1fr}.home-guide-card{min-height:82px}}
    


#hero-v2{position:relative;height:62vh;min-height:430px;max-height:56.25vw;overflow:hidden;display:flex;align-items:center;background:#05060b;width:100vw;margin-left:calc(50% - 50vw)}
#hv2-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.82}
#hv2-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,6,11,.86) 0%,rgba(5,6,11,.30) 52%,rgba(5,6,11,.06) 100%),linear-gradient(0deg,rgba(5,6,11,.88) 0%,rgba(5,6,11,0) 34%)}
.hv2-inner{position:relative;z-index:2;max-width:1180px;width:100%;margin:0 auto;padding:0 clamp(18px,5vw,64px)}
.hv2-eyebrow{font-size:.72rem;font-weight:850;letter-spacing:.14em;color:#8fe6ff;text-transform:uppercase;margin-bottom:14px}
.hv2-title{font-size:clamp(2rem,5vw,3.6rem);line-height:1.05;font-weight:900;margin:0 0 14px;max-width:600px}
.hv2-free{font-size:clamp(.95rem,1.5vw,1.08rem);color:rgba(255,255,255,.8);font-weight:750;margin:0 0 26px;max-width:520px}
.hv2-ctas{display:flex;gap:12px;flex-wrap:wrap}
.hv2-btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 30px;border-radius:12px;font-weight:900;font-size:1.02rem;text-decoration:none}
.hv2-primary{background:linear-gradient(90deg,#61dafb,#86efac);color:#0b1220}
.hv2-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.22)}
.hv2-feat{position:absolute;right:clamp(16px,4vw,56px);bottom:clamp(18px,5vh,48px);z-index:3;width:min(320px,86vw);background:rgba(10,12,20,.82);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px 18px}
.hv2-feat-label{font-size:.62rem;font-weight:850;letter-spacing:.12em;color:#8fe6ff;text-transform:uppercase;margin-bottom:8px}
.hv2-feat-title{font-weight:900;font-size:1.05rem;margin-bottom:2px}
.hv2-feat-artist{font-size:.82rem;color:rgba(255,255,255,.6);margin-bottom:12px}
.hv2-feat-play{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(255,255,255,.14);padding-top:10px;color:#fff;font-weight:850;text-decoration:none}
#home-audio-composer{scroll-margin-top:84px}
#hv2-mute{position:absolute;top:18px;right:clamp(16px,4vw,56px);z-index:4;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(10,12,20,.72);backdrop-filter:blur(8px);color:#fff;font-size:1.15rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
#hv2-mute:hover{background:rgba(97,218,251,.25);border-color:rgba(97,218,251,.6)}
#hv2-bubble{position:fixed;left:18px;bottom:96px;z-index:60;background:rgba(10,12,20,.9);backdrop-filter:blur(8px);border:1px solid rgba(97,218,251,.5);border-radius:999px;padding:11px 18px;font-weight:850;font-size:.88rem;color:#fff;cursor:pointer;box-shadow:0 8px 30px rgba(0,0,0,.5)}
#hv2-bubble b{color:#86efac}
#hv2-plans{position:fixed;inset:0;z-index:70;background:rgba(3,4,8,.78);display:flex;align-items:center;justify-content:center;padding:20px}
#hv2-plans[hidden]{display:none}
.hv2-plans-card{background:#0d0f18;border:1px solid rgba(255,255,255,.12);border-radius:20px;max-width:1040px;width:100%;max-height:90vh;overflow:auto;padding:26px clamp(16px,3vw,34px)}
@media (max-width:700px){.hv2-feat{display:none}#hero-v2{height:56vh;max-height:none}}



/* 1. matched arrow pair -------------------------------------------------- */
#character-picker #open-gallery,
#character-picker #character-picker-collapse {
  width: 30px !important; height: 30px !important; min-width: 30px !important;
  padding: 0 !important; border-radius: 9px !important;
  display: flex !important; align-items: center; justify-content: center;
  font-size: 12px !important; font-weight: 800 !important; line-height: 1 !important;
  box-sizing: border-box !important; max-height: 30px !important; min-height: 30px !important; flex: none !important;
  background: rgba(17,21,37,.92) !important;
  border: 1px solid rgba(97,218,251,.34) !important;
  color: #67e8f9 !important; box-shadow: none !important; animation: none !important;
  transition: background .15s ease, border-color .15s ease;
}
#character-picker #open-gallery:hover,
#character-picker #character-picker-collapse:hover {
  background: rgba(97,218,251,.18) !important; border-color: rgba(97,218,251,.6) !important;
}
/* stack them as one control group, top-right of the strip */
#character-picker #character-picker-collapse { position:absolute !important; top:8px !important; right:10px !important; }
#character-picker #open-gallery { position:absolute !important; top:44px !important; right:10px !important; }

/* 2. equal resting borders on the three input cards ---------------------- */
.source-song-picker,
.story-ai-quick-field,
.art-style-quick-field {
  border: 1px solid rgba(255,255,255,.14) !important;
  border-radius: 10px !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.source-song-picker:hover, .source-song-picker:focus-within,
.story-ai-quick-field:hover, .story-ai-quick-field:focus-within,
.art-style-quick-field:hover, .art-style-quick-field:focus-within {
  border-color: rgba(97,218,251,.55) !important;
  box-shadow: 0 0 0 1px rgba(97,218,251,.12);
}

/* 3. scroll-fade on the character strip ---------------------------------- */
#character-row {
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 46px), transparent 100%);
          mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 46px), transparent 100%);
  scrollbar-width: thin;
}

/* 4. consistent vertical rhythm ------------------------------------------ */
#character-picker { margin-top: 14px !important; }
.create-submit-row { margin-top: 14px !important; }

/* 5. shorter resting prompt ---------------------------------------------- */
.prompt-input { min-height: 44px !important; }

/* 6. support pill clear of the Story-LLM card ---------------------------- */
#aimv-support-root { bottom: 92px !important; }
@media (max-width: 820px) { #aimv-support-root { bottom: 78px !important; } }



  .audio-source-choice.is-recommended { border-color: rgba(134,239,172,.55) !important; background: linear-gradient(135deg, rgba(34,197,94,.10), rgba(34,197,94,.03)) !important; }
  .audio-pick-badge { display:inline-block; margin-left:8px; padding:1px 7px; border-radius:999px; background:rgba(34,197,94,.18); border:1px solid rgba(134,239,172,.5); color:#86efac; font-size:.6rem; font-weight:800; letter-spacing:.03em; vertical-align:1px; }
  .audio-source-section h3 { letter-spacing:.04em; }
.finish-cta{position:relative;width:100vw;margin:64px 0 0 calc(50% - 50vw);padding:clamp(56px,7vw,88px) 0 clamp(48px,6vw,72px);overflow:hidden;background:linear-gradient(180deg,#05060b 0%,#0a1020 42%,#080b14 100%);border-top:1px solid rgba(255,255,255,.07)}
.finish-cta__glow{position:absolute;top:-38%;left:50%;transform:translateX(-50%);width:min(1100px,120vw);height:560px;pointer-events:none;background:radial-gradient(closest-side,rgba(97,218,251,.16),rgba(134,239,172,.07) 45%,transparent 72%);filter:blur(6px)}
.finish-cta__inner{position:relative;z-index:1;max-width:1180px;margin:0 auto;padding:0 clamp(18px,5vw,48px)}
.finish-cta__eyebrow{text-align:center;font-size:.72rem;font-weight:850;letter-spacing:.16em;text-transform:uppercase;color:#61dafb;margin-bottom:12px}
.finish-cta__title{text-align:center;font-size:clamp(2rem,4.6vw,3.3rem);font-weight:900;line-height:1.04;letter-spacing:-.02em;margin:0 0 14px;background:linear-gradient(92deg,#fff 35%,#8fe6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.finish-cta__copy{text-align:center;max-width:720px;margin:0 auto;color:rgba(255,255,255,.68);font-size:clamp(.95rem,1.5vw,1.05rem);line-height:1.6}
.finish-cta__copy strong{color:rgba(255,255,255,.92)}
.finish-cta__meter{position:relative;display:block;max-width:560px;margin:26px auto 34px;height:6px;border-radius:999px;background:rgba(255,255,255,.09);overflow:visible}
.finish-cta__meter-fill{position:absolute;inset:0 auto 0 0;width:16%;border-radius:999px;background:linear-gradient(90deg,#86efac,#61dafb);box-shadow:0 0 14px rgba(97,218,251,.5)}
.finish-cta__meter-label{position:absolute;top:14px;left:0;right:0;text-align:center;font-size:.78rem;font-weight:750;color:rgba(255,255,255,.5);white-space:nowrap}
.finish-cta__plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(228px,1fr));gap:16px;align-items:stretch}
.fplan{position:relative;display:flex;flex-direction:column;gap:9px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);border-radius:18px;padding:22px 20px;transition:transform .18s ease,border-color .18s ease}
.fplan:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.26)}
.fplan--hero{border-color:rgba(97,218,251,.6);background:rgba(97,218,251,.055);box-shadow:0 0 0 1px rgba(97,218,251,.18),0 18px 50px rgba(8,16,32,.6)}
.fplan--hero:hover{transform:translateY(-5px)}
.fplan__tag{align-self:flex-start;background:rgba(97,218,251,.18);color:#8fe6ff;font-size:.64rem;font-weight:900;letter-spacing:.09em;text-transform:uppercase;border-radius:999px;padding:3px 10px;margin-bottom:2px}
.fplan__name{font-weight:850;font-size:1.02rem;color:rgba(255,255,255,.9)}
.fplan__price{font-size:1.72rem;font-weight:900;color:#fff;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.fplan__price span{font-size:.8rem;font-weight:750;color:rgba(255,255,255,.5)}
.fplan__list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:7px}
.fplan__list li{position:relative;padding-left:18px;font-size:.855rem;line-height:1.45;color:rgba(255,255,255,.72)}
.fplan__list li:before{content:"";position:absolute;left:0;top:.52em;width:7px;height:7px;border-radius:2px;background:rgba(134,239,172,.75)}
.fplan--hero .fplan__list li:before{background:#61dafb}
.fplan__list li strong{color:#fff;font-weight:850}
.fplan__list li.fplan__muted{color:rgba(255,255,255,.42)}
.fplan__list li.fplan__muted:before{background:rgba(255,255,255,.2)}
.fplan__btn{margin-top:auto;padding-top:14px;text-align:center;text-decoration:none;font-weight:850;font-size:.92rem;border-radius:11px;padding:11px 12px;background:rgba(255,255,255,.11);color:#fff;transition:background .16s ease}
.fplan__btn:hover{background:rgba(255,255,255,.19)}
.fplan__btn--hero{background:linear-gradient(90deg,#61dafb,#86efac);color:#07121e}
.fplan__btn--hero:hover{filter:brightness(1.07);background:linear-gradient(90deg,#61dafb,#86efac)}
.finish-cta__foot{text-align:center;color:rgba(255,255,255,.42);font-size:.8rem;margin:22px 0 0}
.finish-cta__foot a{color:#8fe6ff;text-decoration:none;font-weight:750}
@media (max-width:640px){.finish-cta{margin-top:44px}.finish-cta__meter{margin-bottom:44px}}
@media (prefers-reduced-motion:reduce){.fplan,.fplan--hero{transition:none}.fplan:hover,.fplan--hero:hover{transform:none}}

@keyframes hv2BubblePulse{0%,100%{box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 0 0 rgba(134,239,172,.55)}50%{box-shadow:0 8px 30px rgba(0,0,0,.5),0 0 0 12px rgba(134,239,172,0)}}
#hv2-bubble.hv2-bubble-pulse{animation:hv2BubblePulse 1.6s ease-out infinite;border-color:rgba(134,239,172,.85)}
@media (prefers-reduced-motion: reduce){#hv2-bubble.hv2-bubble-pulse{animation:none}}

.fplan--used{opacity:.55;filter:saturate(.6)}
.fplan--used .fplan__btn{background:#16321f;color:#7ee0a3;pointer-events:none;cursor:default}

.finish-cta__plans--three{grid-template-columns:repeat(3,minmax(215px,255px));justify-content:start}
@media (max-width:900px){.finish-cta__plans--three{grid-template-columns:repeat(auto-fit,minmax(228px,1fr))}}

.fplan__rate{display:flex;align-items:baseline;gap:6px;margin:0 0 10px;font-size:.84rem;color:rgba(255,255,255,.72)}
.fplan__rate b{font-size:1.08rem;color:#fff;font-weight:850}
.fplan__rate s{color:rgba(255,255,255,.4)}
.fplan__rate.is-best{color:#86efac}
.fplan__rate.is-best b{color:#86efac}

@keyframes fplanTagFlash{0%,100%{box-shadow:0 0 0 0 rgba(134,239,172,.55);background:rgba(134,239,172,.16)}50%{box-shadow:0 0 14px 2px rgba(134,239,172,.45);background:rgba(134,239,172,.32)}}
.fplan__tag--flash{animation:fplanTagFlash 1.5s ease-in-out infinite}
@media (prefers-reduced-motion: reduce){.fplan__tag--flash{animation:none}}

.fplan__rate{min-height:22px}
.fplan__tag{min-height:18px}

.fplan__list li{min-height:40px}

.fpacks{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:16px auto 0;max-width:1080px;padding:0 20px}
.fpacks__label{font-size:.8rem;color:rgba(255,255,255,.55);font-weight:700}
.fpack{display:inline-flex;align-items:baseline;gap:6px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:7px 14px;text-decoration:none;color:rgba(255,255,255,.8);font-size:.84rem;transition:border-color .15s ease}
.fpack b{color:#fff;font-weight:850}
.fpack span{color:#86efac;font-weight:800}
.fpack:hover{border-color:rgba(134,239,172,.55)}

.fpacks-wrap{max-width:1080px;margin:22px auto 0;padding:0 20px}
.fpacks-wrap .fpacks__label{text-align:left;font-size:.72rem;letter-spacing:.08em;font-weight:850;color:rgba(255,255,255,.5);margin-bottom:10px}
.fpacks-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,186px));justify-content:start;gap:12px}
@media (max-width:900px){.fpacks-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}
.fpackcard{display:flex;flex-direction:column;align-items:center;gap:3px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:10px 10px;text-decoration:none;transition:border-color .15s ease,transform .15s ease}
.fpackcard:hover{border-color:rgba(134,239,172,.55);transform:translateY(-2px)}
.fpackcard__name{font-size:.78rem;font-weight:800;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.05em}
.fpackcard__credits{font-size:1.1rem;font-weight:900;color:#fff}
.fpackcard__credits span{font-size:.72rem;font-weight:700;color:rgba(255,255,255,.5);margin-left:5px}
.fpackcard__price{font-size:.95rem;font-weight:850;color:#86efac}
.fpackcard__btn{margin-top:6px;font-size:.78rem;font-weight:800;color:#0b1220;background:linear-gradient(90deg,#61dafb,#86efac);border-radius:999px;padding:5px 14px}