:root {
  --home-bg: #0b0e10;
  --home-panel: #121618;
  --home-panel-2: #181d20;
  --home-line: rgba(255, 255, 255, 0.11);
  --home-line-strong: rgba(255, 255, 255, 0.2);
  --home-text: #f6f7f8;
  --home-muted: #b0b4bc;
  --home-dim: #7d828b;
  --home-success: #83d4aa;
  --home-width: 1860px;
  --home-ease: cubic-bezier(.16, 1, .3, 1);
}

* { box-sizing: border-box; }
html { height: 100%; overflow: hidden; scroll-behavior: smooth; background: var(--tap-bg, var(--home-bg)); }
body.home-page { width: 100%; height: 100%; min-height: 100%; margin: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; background: var(--home-bg); color: var(--home-text); font-family: "HarmonyOS Sans SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-160%); padding: 10px 14px; background: #fff; color: #060708; text-decoration: none; }
.skip-link:focus { transform: translateY(0); }
:focus-visible { outline: 3px solid rgba(155, 108, 255, .7); outline-offset: 3px; }

.home-promo { position: relative; z-index: 60; min-height: 40px; display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px 40px 40px; align-items: center; background: linear-gradient(90deg, #101112, #1b1d1e 48%, #101112); color: var(--home-muted); }
.promo-message { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 5px 12px; font-size: 12px; white-space: nowrap; overflow: hidden; }
.promo-message strong { color: #fff; }
.promo-message span:not(.promo-icon) { overflow: hidden; text-overflow: ellipsis; }
.promo-message button { min-height: 30px; padding: 0 13px; border: 0; border-radius: 3px; background: #fff; color: #111; font-size: 10px; font-weight: 800; cursor: pointer; }
.promo-icon { font-size: 15px; }
.promo-control, .promo-pause, .promo-close { height: 100%; min-width: 40px; padding: 0; border: 0; background: transparent; color: rgba(255,255,255,.84); cursor: pointer; }
.promo-control:hover, .promo-pause:hover, .promo-close:hover { background: rgba(0,0,0,.14); color: #fff; }

.home-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--home-line); background: rgba(6, 7, 8, .96); }
.home-header-inner { width: min(var(--home-width), calc(100% - 48px)); min-height: 68px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 34px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 9px; width: fit-content; color: var(--home-text); text-decoration: none; }
.brand-mark { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 5px; background: #232426; box-shadow: inset 0 .5px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.07); color: var(--home-text); font-size: 12px; font-weight: 800; }
.brand strong { font-size: 18px; letter-spacing: -.02em; white-space: nowrap; }
.desktop-nav { min-width: 0; display: flex; align-items: center; gap: 25px; overflow: hidden; }
.desktop-nav a { position: relative; flex: 0 0 auto; color: #c9cbd0; font-size: 13px; text-decoration: none; }
.desktop-nav a:hover { color: #fff; }
.desktop-nav small { position: absolute; top: -17px; left: 50%; padding: 1px 5px; border-radius: 3px; background: rgba(255,255,255,.1); color: var(--home-muted); font-size: 10px; }
.header-actions { display: flex; align-items: center; gap: 9px; }
.header-actions button { border: 0; cursor: pointer; }
.header-actions a { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
/* Guest header entries keep the create-composer control language: compact
   solid graphite chip, 10px radius, quiet 1px border, neutral hover. */
.header-support { min-width: 86px; min-height: 36px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 13px; border: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 10px; background: #121618; color: #e6e9ee; font-size: 12px; font-weight: 650; white-space: nowrap; transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease; }
.header-support:hover { border-color: rgba(255, 255, 255, .24); background: #181d20; color: #fff; }
.header-support:focus-visible { outline: 3px solid rgba(196, 181, 253, .55); outline-offset: 2px; }
.header-support .ui-icon { width: 16px; height: 16px; margin-right: 0; color: #c9cdd3; }
.header-membership { min-height: 38px; padding: 0 11px; background: transparent; color: #dddfe4; font-size: 12px; }
.header-membership span { color: var(--home-muted); }
.header-membership[hidden] { display: none; }
.header-login { min-width: 74px; min-height: 38px; padding: 0 16px; border-radius: 4px; background: #f2f2f0; color: #0c0d0d; font-size: 12px; font-weight: 800; }
.header-login:hover { background: #fff; }
.header-login[hidden] { display: none; }
.home-user-mount:empty { display: none; }
.home-user-mount .nav-user-area { position: fixed; top: 6px; right: 20px; z-index: 1300; display: none; align-items: center; gap: 8px; }
.home-user-mount .nav-user-area.show { display: flex; }
.user-avatar-trigger.has-avatar .ui-icon { display: none; }
/* Account actions mirror the home composer controls (36px, 10px radius,
   solid graphite fill, quiet border, neutral hover) — 联系客服 and 购买积分
   share the same chip look, matching the creation panel's specification row. */
.home-user-mount .nav-account-action {
  width: auto;
  min-width: 0;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 0;
  padding: 0 13px;
  border: 1px solid rgba(255, 255, 255, .1) !important;
  border-radius: 10px !important;
  background: #121618 !important;
  color: #e6e9ee !important;
  font-size: 12px;
  font-weight: 600;
  box-shadow: none !important;
  backdrop-filter: none !important;
  transition: all .2s ease;
}
.home-user-mount .nav-account-action:hover {
  border-color: rgba(255, 255, 255, .24) !important;
  background: #181d20 !important;
  color: #fff !important;
  transform: none;
  box-shadow: none !important;
}
.home-user-mount .nav-support-btn {
  height: 36px;
  padding: 0 13px;
  border-color: rgba(255, 255, 255, .1) !important;
  background: #121618 !important;
  color: #e6e9ee !important;
  font-weight: 600;
  white-space: nowrap;
}
.home-user-mount .nav-support-btn:hover,
.home-user-mount .nav-support-btn:focus-visible {
  border-color: rgba(255, 255, 255, .24) !important;
  background: #181d20 !important;
  color: #fff !important;
  box-shadow: none !important;
}
.home-user-mount .nav-support-btn:focus-visible { outline: 3px solid rgba(196, 181, 253, .55); outline-offset: 2px; }
.home-user-mount .nav-support-btn .ui-icon { width: 16px; height: 16px; margin-right: 0; color: #c9cdd3 !important; }
.home-user-mount .nav-account-action .ui-icon { color: #c9cdd3; }

/* 购买积分：实心白 chip（36px / 10px 圆角），无气泡特效。选择器带 body.home-page
   前缀以压过 create-tapnow-theme 的 body.create-page 规则（首页 body 同时带 create-page 类）。 */
body.home-page .home-user-mount .nav-purchase-btn {
  height: 36px;
  padding: 0 13px;
  border: 1px solid transparent !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #17191c !important;
  font-weight: 600;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
body.home-page .home-user-mount .nav-purchase-btn:hover,
body.home-page .home-user-mount .nav-purchase-btn:focus-visible {
  border-color: transparent !important;
  background: #f2f4f6 !important;
  color: #000 !important;
  box-shadow: none !important;
  transform: none;
}
body.home-page .home-user-mount .nav-purchase-btn .ui-icon,
body.home-page .home-user-mount .nav-purchase-btn:hover .ui-icon {
  color: #17191c !important;
}

.home-user-mount .user-dropdown { position: absolute; top: calc(100% + 12px); right: 0; z-index: 80; width: min(292px, calc(100vw - 28px)); overflow: hidden; border: 1px solid var(--home-line-strong); border-radius: 10px; background: #111315; color: var(--home-text); }
.home-user-mount .user-dropdown:not(.show) { display: none; }
.home-user-mount .dropdown-header { padding: 18px; border-bottom: 1px solid var(--home-line); }
.home-user-mount .dropdown-identity { min-width: 0; }
.home-user-mount .user-name { overflow: hidden; color: #fff; font-size: 15px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.home-user-mount .user-tier { margin-top: 4px; color: var(--home-dim); font-size: 11px; }
.home-user-mount .dropdown-point-stack { display: grid; gap: 7px; margin-top: 14px; }
.home-user-mount .dropdown-points { min-height: 38px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; padding: 0 11px; background: #0a0c0d; color: var(--home-muted); font-size: 12px; }
.home-user-mount .dropdown-point-icon .ui-icon, .home-user-mount .dropdown-point-icon.ui-icon { width: 14px; height: 14px; color: var(--home-muted); }
.home-user-mount .dropdown-points b { color: var(--home-text); font-size: 14px; }
.home-user-mount .dropdown-menu { display: grid; padding: 6px; }
.home-user-mount .dropdown-item { width: 100%; min-height: 40px; display: flex; align-items: center; gap: 10px; padding: 0 12px; border-radius: 5px; background: transparent; color: var(--home-muted); font-size: 12px; text-align: left; }
.home-user-mount .dropdown-item .ui-icon { width: 16px; height: 16px; color: var(--home-dim); }
.home-user-mount .dropdown-item:hover, .home-user-mount .dropdown-item:focus-visible { background: rgba(155, 108, 255, .12); color: #fff; }
.home-user-mount .dropdown-divider { height: 1px; margin: 0 6px; background: var(--home-line); }
.home-user-mount .dropdown-item-danger { margin: 6px; width: calc(100% - 12px); color: #ffaaa5; }
#editProfileModal .profile-modal-box { position: relative; width: min(420px, calc(100vw - 28px)); color: var(--home-text); }
#editProfileModal .profile-modal-kicker { color: var(--home-muted); font-size: 11px; font-weight: 800; }
#editProfileModal .modal-title { margin-top: 8px; color: #fff; font-size: 22px; font-weight: 800; }
#editProfileModal .profile-modal-desc { margin: 6px 0 22px; color: var(--home-muted); font-size: 12px; }
#editProfileModal .avatar-upload-controls { display: grid; justify-items: center; gap: 8px; }
#editProfileModal .avatar-upload-status { max-width: 30ch; color: var(--home-dim); font-size: 11px; line-height: 1.5; }
#editProfileModal .avatar-upload-status.is-ready { color: var(--home-success); }
#editProfileModal .avatar-upload-status.is-error { color: #ffaaa5; }
#editProfileModal .profile-cancel-btn { flex: 1; padding: 14px; border: 1px solid var(--home-line); border-radius: 10px; background: transparent; color: var(--home-muted); cursor: pointer; }
.mobile-menu-button { display: none; width: 38px; height: 38px; background: var(--home-panel); font-size: 17px; }
.mobile-nav { padding: 8px 24px 18px; border-top: 1px solid var(--home-line); background: #08090a; }
.mobile-nav a { display: block; padding: 13px 0; border-bottom: 1px solid var(--home-line); color: var(--home-muted); text-decoration: none; }

main { display: block; }
.focus-section, .channel-section, .explore-section, .campaign-banner, .model-stage, .split-banner { width: min(var(--home-width), calc(100% - 48px)); margin-right: auto; margin-left: auto; }
.focus-section { padding: 42px 0 30px; }
.focus-viewport { position: relative; overflow: hidden; }
.focus-track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(360px, 1fr); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.focus-track::-webkit-scrollbar { display: none; }
.focus-card { position: relative; height: 300px; min-width: 0; scroll-snap-align: start; overflow: hidden; background: var(--home-panel); }
.focus-card button { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.focus-card img, .focus-card video { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--home-ease), filter 400ms ease; }
.focus-card:hover img, .focus-card:hover video { transform: scale(1.025); filter: saturate(1.08); }
.focus-shade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 28%, rgba(5,6,7,.16) 52%, rgba(5,6,7,.92)); }
.focus-copy { position: absolute; right: 0; bottom: 0; left: 0; display: grid; gap: 5px; padding: 24px; }
.focus-copy small { color: var(--home-muted); font-size: 10px; }
.focus-copy strong { max-width: 16ch; color: #fff; font-size: 22px; line-height: 1.2; }
.focus-copy em { color: rgba(255,255,255,.72); font-size: 12px; font-style: normal; }
.focus-arrow { position: absolute; top: 50%; z-index: 3; width: 42px; height: 42px; transform: translateY(-50%); border: 1px solid var(--home-line-strong); border-radius: 50%; background: rgba(7,8,9,.8); color: #fff; font-size: 24px; cursor: pointer; opacity: 0; transition: opacity 180ms ease, background 180ms ease; }
.focus-viewport:hover .focus-arrow { opacity: 1; }
.focus-arrow:focus-visible { opacity: 1; }
.focus-arrow-left { left: 12px; }
.focus-arrow-right { right: 12px; }
.focus-arrow:hover { background: #f2f2f0; color: #0c0d0d; }

.campaign-banner {
  position: relative;
  overflow: hidden;
  padding: 28px 0 28px;
  background: var(--tap-bg, var(--home-bg));
}
/* TapNow-inspired campaign stage: let the paired banners read as one
   full-bleed curated set inside the homepage rail. */
.campaign-copy { position: relative; z-index: 2; align-self: center; padding: 42px 54px; }
.campaign-copy small { color: #6e6455; font-size: 11px; }
.campaign-copy h2 { max-width: 15ch; margin: 12px 0 14px; font-size: clamp(32px, 3vw, 50px); line-height: 1.05; letter-spacing: -.03em; }
.campaign-copy p { max-width: 40ch; margin: 0 0 22px; color: #615747; font-size: 13px; line-height: 1.7; }
.campaign-copy button, .split-banner button, .model-stage-copy button { min-height: 40px; padding: 0 17px; border: 0; border-radius: 4px; background: #171315; color: #fff; font-size: 12px; font-weight: 800; cursor: pointer; }
.campaign-media {
  width: 100%;
  display: grid;
  grid-template-rows: repeat(2, auto);
  gap: 14px;
  margin: 0 auto;
  background: var(--tap-bg, var(--home-bg));
}
.campaign-media img {
  width: 100%;
  aspect-ratio: 3.25 / 1;
  height: auto;
  min-height: 0;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 14px;
  object-fit: cover;
  object-position: center;
  background: var(--home-panel);
}
.campaign-card { position: relative; }
/* Standalone wordmark image (transparent PNG) reserved for the banner copy
   area on the left; text art lives in /assets/home, not baked into the photo.
   Two-class selector on purpose: it must outrank the `.campaign-media img`
   base rule above (photo sizing) and undo its panel background & ratio. */
.campaign-media .campaign-title {
  position: absolute;
  z-index: 2;
  left: 6%;
  top: 40%;
  transform: translateY(-50%);
  width: 29%;
  height: auto;
  min-height: 0;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  object-fit: contain;
}
/* The canvas lockup is a taller two-line composition, so it needs slightly
   less width to keep the same visual mass as the wordmark on card two. The
   canvas card now leads the banner, so target the first card. */
.campaign-card:nth-child(1) .campaign-title { width: 25%; }
/* TapNow-style reserved feature grid: six frames await titles, covers and
   links. All six slots of the second campaign card carry feature covers
   (大师 Skills / 样片生成 / 蒙太奇视频 / 分解视频制作 /
   视频多元素独立视频 / 人物物品替换), pre-cropped to the
   desktop slot aspect (~1.571:1) so they sit flush; cover-fit absorbs the
   narrower mobile frames.
   The card's own title artwork is a CDN asset, so no upstream model name ever
   appears in this stylesheet (public-surface scan, SPEC §6.1). */
.campaign-slots {
  position: absolute;
  top: 8%;
  right: 2.5%;
  bottom: 8%;
  left: 37%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 20px);
}
.campaign-slot {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: rgba(8,9,10,.34);
}
.campaign-slot img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}
/* Feature entry slots: the canvas card's six slots are real links into
   /canvas/?preset=<key> (see CANVAS_FEATURE_ENTRY_SPEC.md); the hover language
   mirrors the hovered-node border — brighter frame, slight lift, cover
   brightening — with no layout shift. */
.campaign-slot.is-link {
  display: block;
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.campaign-slot.is-link:hover,
.campaign-slot.is-link:focus-visible {
  border-color: rgba(255,255,255,.42);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
}
.campaign-slot.is-link img { transition: filter .25s ease, transform .25s ease; }
.campaign-slot.is-link:hover img,
.campaign-slot.is-link:focus-visible img { filter: brightness(1.12); transform: scale(1.03); }
.campaign-slot.is-link:focus-visible { outline: 2px solid rgba(255,255,255,.65); outline-offset: 2px; }

.channel-section, .explore-section { position: relative; padding: 100px 0 0; }
.channel-heading { min-height: 48px; display: flex; align-items: end; justify-content: space-between; gap: 28px; margin-bottom: 26px; }
.channel-heading h2 { margin: 0; color: var(--home-text); font-size: 30px; line-height: 1.15; letter-spacing: -.025em; }
.channel-heading p { margin: 0 auto 2px 0; color: var(--home-muted); font-size: 12px; }
.channel-heading small { display: block; margin-bottom: 8px; color: var(--home-muted); font-size: 10px; }
.channel-heading button { padding: 7px 0; border: 0; background: transparent; color: var(--home-muted); font-size: 12px; cursor: pointer; }
.channel-heading button:hover { color: #fff; }
.channel-heading.is-centered { justify-content: center; text-align: center; }
.channel-heading-large { min-height: 90px; }
.channel-heading-large h2 { font-size: clamp(36px, 4.4vw, 66px); font-weight: 500; }

.template-card button, .app-card button, .film-card button, .story-card button, .gallery-card button { position: relative; width: 100%; height: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }

.template-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--home-line); border-left: 1px solid var(--home-line); }
.template-card { min-width: 0; border-right: 1px solid var(--home-line); border-bottom: 1px solid var(--home-line); background: #090a0b; }
.template-media { position: relative; height: 230px; overflow: hidden; background: var(--home-panel); }
.template-grid-tall .template-media { height: 360px; }
.template-media img, .template-media video { width: 100%; height: 100%; object-fit: cover; transition: transform 560ms var(--home-ease), filter 300ms ease; }
.template-card:hover .template-media img, .template-card:hover .template-media video { transform: scale(1.025); filter: saturate(1.12); }
.template-overlay { position: absolute; inset: auto 18px 16px; }
.template-overlay small { display: inline-flex; margin-bottom: 8px; padding: 4px 7px; border: 1px solid rgba(255,255,255,.4); border-radius: 20px; background: rgba(5,6,7,.34); color: #fff; font-size: 10px; }
.template-overlay strong { display: block; max-width: 13ch; color: #fff; font-size: 20px; line-height: 1.18; text-shadow: 0 2px 14px #000; }
.template-title { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 16px; color: #eceef1; font-size: 12px; }
.template-title span { color: var(--home-dim); }
.template-card:hover .template-title { color: #fff; }

/* Explore-style case wall: a waterfall of work cards in an explore rhythm. */
.case-grid { display: grid; grid-template-columns: repeat(var(--case-cols, 6), minmax(0, 1fr)); gap: 12px; }
.case-col { display: grid; gap: 12px; align-content: start; min-width: 0; }
.case-card { position: relative; min-width: 0; overflow: hidden; border-radius: 4px; border: 1px solid rgba(255,255,255,.09); background: var(--home-panel); }
.case-card button { display: block; width: 100%; padding: 0; border: 0; background: transparent; text-align: left; cursor: pointer; }
.case-card .case-media { width: 100%; height: auto; object-fit: cover; transition: transform 560ms var(--home-ease), filter 300ms ease; }
.case-card:hover .case-media { transform: scale(1.03); filter: saturate(1.06); }
.case-veil { position: absolute; inset: auto 0 0; z-index: 1; height: 86px; background: linear-gradient(transparent, rgba(4,5,6,.9)); pointer-events: none; }
.case-badge { position: absolute; top: 9px; right: 9px; z-index: 3; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(255,255,255,.24); background: rgba(4,5,6,.5); color: #fff; pointer-events: none; }
.case-badge .ui-icon { width: 12px; height: 12px; }
.case-info { position: absolute; inset: auto 0 0; z-index: 2; display: grid; gap: 4px; padding: 22px 12px 10px; }
.case-title { min-width: 0; max-width: 100%; color: #fff; font-size: 13px; font-weight: 650; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-stats { display: flex; align-items: center; gap: 11px; color: rgba(255,255,255,.62); font-size: 11px; }
.case-stat { display: inline-flex; align-items: center; gap: 4px; }
.case-stat .ui-icon { width: 12px; height: 12px; }
.case-card button:focus-visible { outline: 3px solid rgba(155,108,255,.7); outline-offset: -3px; border-radius: 4px; }
/* 作品墙折叠：默认只渲染前 13 张，其余卡片隐藏，点击展开按钮后重新铺瀑布列。 */
.case-card.is-collapsed { display: none; }
.case-more { display: flex; justify-content: center; margin-top: 26px; }
.case-expand { min-height: 42px; padding: 0 26px; border: 1px solid var(--home-line-strong); border-radius: 999px; background: transparent; color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .12em; cursor: pointer; transition: border-color .16s ease, background .16s ease; }
.case-expand:hover { border-color: rgba(255,255,255,.42); background: #0d0f11; }
.case-expand:focus-visible { outline: 3px solid rgba(155,108,255,.7); outline-offset: 2px; }

.app-section { padding-top: 130px; }
.app-stage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; gap: 12px; min-height: 520px; padding: 0 0 60px 33%; border-bottom: 1px solid var(--home-line); }
.app-card { position: relative; height: 360px; overflow: hidden; background: var(--home-panel-2); }
.app-card:nth-child(2), .app-card:nth-child(4) { transform: translateY(48px); }
.app-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--home-ease); }
.app-card:hover img { transform: scale(1.035); }
.app-card-copy { position: absolute; inset: auto 0 0; padding: 58px 16px 16px; background: linear-gradient(transparent, rgba(6,7,8,.96)); }
.app-card-copy strong { display: block; font-size: 13px; }
.app-card-copy small { display: block; margin-top: 5px; color: var(--home-muted); font-size: 10px; }

.model-stage { min-height: 680px; display: grid; grid-template-columns: .62fr 1.38fr; gap: 80px; align-items: center; margin-top: 120px; padding: 70px; background: #121416; }
.model-stage-copy small { color: var(--home-muted); font-size: 10px; }
.model-stage-copy h2 { margin: 16px 0; font-size: clamp(38px, 4vw, 64px); line-height: 1.04; letter-spacing: -.035em; }
.model-stage-copy p { max-width: 42ch; margin: 0 0 28px; color: var(--home-muted); font-size: 13px; line-height: 1.7; }
.model-stage-copy button { background: #f2f2f0; color: #0c0d0d; }
.model-cards { display: grid; grid-template-columns: repeat(3, 1fr); align-items: center; gap: 9px; }
.model-card { position: relative; height: 430px; overflow: hidden; background: #08090a; }
.model-card:nth-child(2) { height: 530px; }
.model-card img { width: 100%; height: 100%; object-fit: cover; }
.model-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 48%, rgba(4,5,6,.92)); }
.model-card div { position: absolute; z-index: 2; right: 18px; bottom: 18px; left: 18px; }
.model-card strong, .model-card small { display: block; }
.model-card strong { font-size: 17px; }
.model-card small { margin-top: 7px; color: var(--home-muted); font-size: 10px; }

.film-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.film-card { position: relative; min-height: 300px; overflow: hidden; background: var(--home-panel); }
.film-card:first-child { grid-row: span 2; min-height: 610px; }
.film-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 560ms var(--home-ease); }
.film-card:hover img { transform: scale(1.025); }
.film-card-copy { position: absolute; inset: auto 0 0; padding: 70px 18px 17px; background: linear-gradient(transparent, rgba(5,6,7,.94)); }
.film-card-copy strong { display: block; font-size: 14px; }
.film-card-copy span { display: block; margin-top: 7px; color: var(--home-muted); font-size: 10px; }

.split-banner { min-height: 400px; display: grid; grid-template-columns: 1fr 1fr; margin-top: 120px; border: 1px solid var(--home-line-strong); background: #08090a; }
.split-banner > div { align-self: center; padding: 64px; }
.split-banner small { color: var(--home-muted); font-size: 10px; }
.split-banner h2 { max-width: 17ch; margin: 13px 0 15px; font-size: clamp(34px, 3.6vw, 54px); line-height: 1.08; letter-spacing: -.03em; }
.split-banner p { max-width: 50ch; margin: 0 0 26px; color: var(--home-muted); font-size: 13px; line-height: 1.75; }
.split-banner button { background: #fff; color: #090a0b; }
.split-banner > img { width: 100%; height: 100%; min-height: 398px; object-fit: cover; }
.invite-banner > img { object-fit: cover; }

.story-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr 1fr; gap: 8px; }
.story-card { position: relative; height: 390px; overflow: hidden; background: var(--home-panel); }
.story-card:first-child { height: 520px; transform: translateY(-28px); }
.story-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 550ms var(--home-ease); }
.story-card:hover img { transform: scale(1.035); }
.story-card-copy { position: absolute; inset: auto 0 0; padding: 54px 15px 15px; background: linear-gradient(transparent, rgba(5,6,7,.96)); }
.story-card-copy strong { display: block; font-size: 13px; }
.story-card-copy span { display: block; margin-top: 5px; color: var(--home-muted); font-size: 10px; }

.api-section { margin-top: 120px; padding: 54px 0 0; border-top: 1px solid var(--home-line); }
.api-grid { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--home-line); }
.api-card { position: relative; min-height: 310px; overflow: hidden; border-right: 1px solid var(--home-line); background: var(--home-panel); }
.api-card:last-child { border-right: 0; }
.api-card img { width: 100%; height: 100%; object-fit: cover; opacity: .74; transition: transform 520ms var(--home-ease), opacity 220ms ease; }
.api-card:hover img { transform: scale(1.025); opacity: .9; }
.api-card div { position: absolute; inset: auto 0 0; padding: 72px 20px 20px; background: linear-gradient(transparent, rgba(5,6,7,.97)); }
.api-card strong { display: block; font-size: 19px; }
.api-card span { display: block; margin-top: 6px; color: var(--home-muted); font-size: 11px; }

.tool-list { border-top: 1px solid var(--home-line); }
.tool-row { width: 100%; min-height: 104px; display: grid; grid-template-columns: 64px .9fr 1.4fr auto; align-items: center; gap: 22px; padding: 0; border: 0; border-bottom: 1px solid var(--home-line); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.tool-row img { width: 64px; height: 72px; object-fit: cover; }
.tool-row strong { font-size: 17px; }
.tool-row p { margin: 0; color: var(--home-muted); font-size: 12px; }
.tool-row span { color: var(--home-muted); font-size: 12px; }
.tool-row:hover { background: #0b0d0e; }

.explore-section { padding-top: 130px; padding-bottom: 120px; }
.masonry-gallery { columns: 5 230px; column-gap: 8px; }
.gallery-card { position: relative; break-inside: avoid; margin: 0 0 8px; overflow: hidden; background: var(--home-panel); }
.gallery-card img { width: 100%; height: auto; min-height: 180px; object-fit: cover; transition: transform 560ms var(--home-ease); }
.gallery-card:hover img { transform: scale(1.02); }
.gallery-meta { position: absolute; inset: auto 0 0; padding: 64px 12px 12px; background: linear-gradient(transparent, rgba(5,6,7,.94)); opacity: 0; transition: opacity 180ms ease; }
.gallery-card:hover .gallery-meta, .gallery-card:focus-within .gallery-meta { opacity: 1; }
.gallery-meta strong { display: block; font-size: 12px; }
.gallery-meta span { display: block; margin-top: 4px; color: var(--home-muted); font-size: 10px; }
.explore-more { min-width: 330px; min-height: 56px; display: block; margin: 70px auto 0; border: 1px solid var(--home-line-strong); background: transparent; color: #fff; font-size: 12px; letter-spacing: .18em; cursor: pointer; }
.explore-more:hover { border-color: rgba(255,255,255,.42); background: #0d0f11; }

/* The footer is a continuation of the workbench: one hairline seam, the hero's
   dot matrix fading in above it, and pure typographic hierarchy — no ornaments. */
.home-footer { position: relative; border-top: 1px solid rgba(255,255,255,.05); background: #0b0d0f; }
.home-footer::before { content: ""; position: absolute; top: 1px; right: 0; left: 0; height: 170px; background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(180deg, #000, transparent); mask-image: linear-gradient(180deg, #000, transparent); pointer-events: none; }
.footer-main { position: relative; z-index: 1; width: min(var(--home-width), calc(100% - 48px)); display: grid; grid-template-columns: 1.7fr repeat(3, 1fr); gap: 44px; margin: 0 auto; padding: 74px 0 48px; }
.footer-brand { position: relative; }
.footer-brand p { max-width: 40ch; margin: 20px 0 0; color: var(--home-dim); font-size: 12px; line-height: 1.8; }
.footer-main h3 { margin: 0 0 18px; color: var(--home-dim); font-size: 11px; font-weight: 700; letter-spacing: .22em; }
.footer-main > div:not(.footer-brand) a, .footer-main > div:not(.footer-brand) button { display: block; margin: 11px 0; padding: 0; border: 0; background: transparent; color: var(--home-muted); font-size: 12px; text-align: left; text-decoration: none; cursor: pointer; transition: color .16s ease; }
.footer-main > div:not(.footer-brand) a:hover, .footer-main > div:not(.footer-brand) button:hover { color: #fff; }
.footer-bottom { position: relative; z-index: 1; width: min(var(--home-width), calc(100% - 48px)); display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 0 auto; padding: 24px 0 34px; border-top: 1px solid rgba(255,255,255,.05); color: var(--home-dim); font-size: 12px; }
.footer-filing { display: inline-flex; align-items: center; }
.footer-filing a { color: inherit; text-decoration: none; text-underline-offset: 3px; }
.footer-filing a:hover { color: #fff; text-decoration: underline; }
.footer-filing a:focus-visible { outline: 2px solid rgba(255,255,255,.72); outline-offset: 3px; border-radius: 2px; }

.home-dialog { width: min(620px, calc(100% - 30px)); margin: auto; padding: 0; border: 1px solid var(--home-line-strong); border-radius: 7px; background: #111315; color: var(--home-text); box-shadow: 0 30px 90px rgba(0,0,0,.6); }
.home-dialog::backdrop { background: rgba(0,0,0,.76); }
.dialog-shell { margin: 0; }
.dialog-head { min-height: 62px; display: flex; align-items: center; justify-content: space-between; padding: 0 20px; border-bottom: 1px solid var(--home-line); }
.dialog-head h2 { margin: 0; font-size: 17px; }
.dialog-head button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--home-muted); font-size: 23px; cursor: pointer; }
.customer-service-dialog { width: min(410px, calc(100% - 30px)); }
.customer-service-dialog .dialog-head { min-height: 70px; }
.customer-service-dialog .dialog-head > div { display: grid; gap: 3px; }
.customer-service-dialog .dialog-head h2 { font-size: 17px; }
.customer-service-body { display: grid; justify-items: center; padding: 24px 28px 28px; text-align: center; }
.customer-service-qr { position: relative; width: min(292px, 100%); aspect-ratio: 747 / 689; overflow: hidden; padding: 10px; border-radius: 6px; background: #fff; box-shadow: 0 16px 42px rgba(0, 0, 0, .28); }
.customer-service-qr img { width: 100%; height: 100%; border-radius: 2px; object-fit: contain; transition: opacity 160ms ease; }
.customer-service-qr-status { position: absolute; inset: 10px; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 20px; border-radius: 2px; background: #f2f2f0; color: #0c0d0d; font-size: 12px; font-weight: 700; line-height: 1.6; }
.customer-service-qr.is-loading img { opacity: .18; }
.customer-service-qr.is-ready .customer-service-qr-status { display: none; }
.customer-service-qr.is-error img { opacity: 0; }
.customer-service-qr-status button { min-height: 38px; padding: 0 15px; border: 0; border-radius: 4px; background: #0c0d0d; color: #f2f2f0; font-weight: 800; cursor: pointer; }
.customer-service-qr-status button[hidden] { display: none; }
.customer-service-body p { max-width: 30ch; margin: 19px 0 0; color: #e7e9e8; font-size: 13px; line-height: 1.65; }
.action-dialog-body { padding: 32px; text-align: center; }
.action-symbol { width: 54px; height: 54px; display: grid; place-items: center; margin: 0 auto 20px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; background: rgba(255,255,255,.05); color: var(--home-text); font-size: 23px; }
.action-dialog-body p { max-width: 50ch; margin: 0 auto 18px; color: var(--home-muted); font-size: 13px; line-height: 1.7; }
.action-dialog-body code { display: block; width: fit-content; margin: 0 auto 26px; padding: 8px 10px; border: 1px solid var(--home-line); background: #08090a; color: var(--home-muted); font-size: 11px; }
.dialog-primary { min-width: 120px; min-height: 42px; border: 0; border-radius: 4px; background: #f2f2f0; color: #0c0d0d; cursor: pointer; }
.dialog-primary:hover { background: #fff; }
.home-content-error { color: #ffb4ad !important; }
.noscript-note { margin: 0; padding: 12px 20px; background: #4d1d2e; color: #fff; text-align: center; }

@supports (content-visibility: auto) {
  .channel-section, .explore-section, .model-stage, .split-banner { content-visibility: auto; contain-intrinsic-size: auto 720px; }
}

@media (max-width: 1240px) {
  .desktop-nav { gap: 17px; }
  .desktop-nav a:nth-last-child(-n+3) { display: none; }
  .focus-track { grid-auto-columns: minmax(330px, 44vw); }
  .app-stage { padding-left: 20%; }
  .model-stage { gap: 44px; padding: 50px; }
}

@media (max-width: 900px) {
  .home-header-inner, .focus-section, .channel-section, .explore-section, .campaign-banner, .model-stage, .split-banner, .footer-main, .footer-bottom { width: min(100% - 28px, var(--home-width)); }
  .desktop-nav, .header-actions .header-membership { display: none; }
  .home-header-inner { grid-template-columns: 1fr auto; }
  .mobile-menu-button { display: block; }
  .focus-track { grid-auto-columns: minmax(310px, 76vw); }
  .focus-card { height: 280px; }
  .campaign-banner { padding: 24px 0 24px; }
  .template-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .app-stage { grid-template-columns: repeat(2, 1fr); min-height: 0; padding: 0; }
  .app-card:nth-child(2), .app-card:nth-child(4) { transform: none; }
  .model-stage { grid-template-columns: 1fr; padding: 44px; }
  .model-card, .model-card:nth-child(2) { height: 390px; }
  .film-grid { grid-template-columns: 1fr 1fr; }
  .film-card:first-child { min-height: 420px; }
  .split-banner { grid-template-columns: 1fr; }
  .split-banner > div { padding: 44px; }
  .story-grid { grid-template-columns: repeat(2, 1fr); }
  .story-card:first-child { height: 390px; transform: none; }
  .api-grid { grid-template-columns: 1fr; }
  .api-card { min-height: 300px; border-right: 0; border-bottom: 1px solid var(--home-line); }
  .tool-row { grid-template-columns: 60px 1fr auto; }
  .tool-row p { display: none; }
  .footer-main { grid-template-columns: 1.4fr 1fr 1fr; }
  .footer-brand { grid-column: 1 / -1; }
}

@media (max-width: 560px) {
  .home-promo { grid-template-columns: minmax(0,1fr) 40px 40px; }
  .promo-control { display: none; }
  .promo-message { justify-content: flex-start; }
  .promo-message span:not(.promo-icon) { display: none; }
  .home-header-inner { min-height: 58px; }
  .header-actions { gap: 6px; }
  .header-support { min-width: 82px; min-height: 44px; padding: 0 10px; }
  .mobile-menu-button { width: 44px; height: 44px; }
  .header-login { min-width: 58px; min-height: 44px; padding: 0 10px; }
  .customer-service-body { padding: 20px 20px 24px; }
  .focus-section { padding-top: 22px; }
  .focus-track { grid-auto-columns: 86vw; gap: 8px; }
  .focus-card { height: 260px; }
  .focus-copy { padding: 18px; }
  .focus-copy strong { font-size: 19px; }
  .focus-arrow { display: none; }
  .campaign-banner { padding: 20px 0 20px; }
  .campaign-media { width: 100%; gap: 10px; }
  .campaign-media img { aspect-ratio: 2 / 1; border-radius: 10px; }
  .campaign-slots { left: 34%; gap: 6px; }
  .campaign-slot { border-radius: 8px; }
  .campaign-media .campaign-title { left: 4%; top: 38%; width: 27%; }
  .channel-section, .explore-section { padding-top: 70px; }
  .channel-heading { display: block; margin-bottom: 18px; }
  .channel-heading h2 { font-size: 25px; }
  .channel-heading p { margin-top: 7px; }
  .channel-heading button { margin-top: 10px; }
  .template-grid { grid-template-columns: 1fr; }
  .template-media, .template-grid-tall .template-media { height: 280px; }
  .app-stage { grid-template-columns: 1fr 1fr; gap: 7px; }
  .app-card { height: 280px; }
  .model-stage { width: 100%; margin-top: 80px; padding: 44px 14px; }
  .model-stage-copy { padding: 0 8px; }
  .model-stage-copy h2 { font-size: 38px; }
  .model-cards { grid-template-columns: 1fr; }
  .model-card, .model-card:nth-child(2) { height: 360px; }
  .film-grid { grid-template-columns: 1fr; }
  .film-card, .film-card:first-child { min-height: 350px; }
  .split-banner { margin-top: 80px; }
  .split-banner > div { padding: 34px 22px; }
  .split-banner h2 { font-size: 34px; }
  .split-banner > img { min-height: 260px; }
  .story-grid { grid-template-columns: 1fr; }
  .story-card, .story-card:first-child { height: 380px; }
  .tool-row { grid-template-columns: 54px 1fr auto; gap: 12px; }
  .tool-row img { width: 54px; height: 62px; }
  .tool-row strong { font-size: 14px; }
  .masonry-gallery { columns: 2 140px; }
  .gallery-meta { opacity: 1; }
  .explore-more { width: 100%; min-width: 0; }
  .footer-main { grid-template-columns: 1fr 1fr; gap: 34px 20px; }
  .footer-bottom { flex-wrap: wrap; justify-content: center; row-gap: 8px; text-align: center; }
  .footer-filing { justify-content: center; }
}

@media (max-width: 360px) {
  .home-header-inner { width: calc(100% - 20px); gap: 10px; }
  .home-header-inner > .brand strong { display: none; }
  .header-support { min-width: 76px; padding: 0 8px; }
}

/* Phones: the fixed user cluster (support / points / avatar) shrinks to
   icon-sized controls so the brand and the menu button keep their room. */
@media (max-width: 700px) {
  .home-user-mount .nav-user-area {
    top: 12px;
    right: 12px;
    gap: 6px;
  }

  .home-user-mount .nav-account-action {
    width: 38px;
    height: 38px;
    padding: 0;
    gap: 0;
    color: transparent !important;
    font-size: 0;
  }

  .home-user-mount .nav-account-action .ui-icon {
    width: 18px;
    height: 18px;
    margin: 0;
  }

  .home-user-mount .nav-support-btn {
    min-width: 0;
  }

  .home-user-mount .user-avatar-trigger {
    width: 36px;
    height: 36px;
    min-height: 36px;
    flex: 0 0 36px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .32) !important;
  }

  .home-user-mount .user-avatar-trigger .ui-icon {
    width: 18px;
    height: 18px;
  }

  /* Collapse the empty desktop-nav track (the later workbench section
     re-sets three tracks, so keep this selector stronger). */
  .home-header .home-header-inner {
    grid-template-columns: auto auto;
    justify-content: space-between;
  }

  /* When the user cluster is visible, keep the brand and the mobile menu
     button clear of it. */
  .home-header .home-header-inner:has(.nav-user-area.show) {
    padding-right: 148px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .focus-card img, .focus-card video, .template-media img, .template-media video, .app-card img, .film-card img, .story-card img, .api-card img, .gallery-card img, .gallery-meta { transition: none; }
  .focus-card:hover img, .focus-card:hover video, .template-card:hover .template-media img, .template-card:hover .template-media video, .app-card:hover img, .story-card:hover img, .api-card:hover img, .gallery-card:hover img { transform: none; }
}

@media (hover: none) and (min-width: 561px) {
  .focus-arrow { opacity: 1; }
}

/* Homepage workbench: the controls forward into /create/; they do not own a second generation API. */
.home-header {
  position: relative;
  border-bottom-color: rgba(255,255,255,.07);
  background: #0a0b0c;
}
.home-header-inner {
  width: calc(100% - 48px);
  max-width: none;
  min-height: 62px;
  grid-template-columns: auto 1fr auto;
}
.desktop-nav { justify-content: center; gap: 6px; }
.desktop-nav a { min-height: 36px; display: inline-flex; align-items: center; padding: 0 13px; border-radius: 7px; }
.desktop-nav a:hover, .desktop-nav a.is-current { background: rgba(255,255,255,.075); color: #fff; }
.desktop-nav small { top: -6px; }
.tapnow-workbench {
  position: relative;
  min-height: 0;
  overflow: hidden;
  padding: 42px 0 32px;
  /* Solid baffle keeps the hero's underlying page layer from showing through
     on wide screens; the cards and campaign media provide the visual texture. */
  background-color: var(--tap-bg, var(--home-bg));
  background-image: none;
}
.tapnow-workbench::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: none;
}
.workspace-glow {
  position: absolute;
  top: -200px;
  left: 50%;
  width: 780px;
  height: 480px;
  transform: translateX(-50%);
  pointer-events: none;
  background: radial-gradient(ellipse, rgba(255,255,255,.05), rgba(255,255,255,.012) 36%, transparent 69%);
  filter: blur(16px);
}
.workspace-content { position: relative; z-index: 1; width: min(900px, calc(100% - 48px)); margin: 0 auto; }
.workspace-kicker { margin: 0 0 6px; color: var(--home-muted); font-size: 10px; font-weight: 700; text-align: center; }
.workspace-content > h1 { margin: 0 0 16px; color: #f7f7f9; font-size: clamp(30px, 2.9vw, 42px); font-weight: 760; letter-spacing: -.035em; line-height: 1.12; text-align: center; }
.workspace-content > h1 span { margin-right: 7px; color: var(--home-muted); font-size: .72em; vertical-align: .12em; }
.home-composer { overflow: hidden; border: 1px solid rgba(255,255,255,.17); border-radius: 18px; background: #1c1c1d; box-shadow: 0 24px 60px rgba(0,0,0,.26); }
.home-composer:focus-within { border-color: rgba(255,255,255,.3); box-shadow: 0 0 0 3px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.26); }
.home-composer-modes { min-height: 58px; display: flex; align-items: end; gap: 7px; padding: 12px 14px 0; border-bottom: 1px solid rgba(255,255,255,.08); }
.home-composer-modes button, .home-composer-modes a { min-height: 35px; display: inline-flex; align-items: center; gap: 7px; padding: 0 12px; border: 0; border-radius: 7px 7px 0 0; background: transparent; color: #929398; font-size: 13px; font-weight: 700; text-decoration: none; cursor: pointer; }
.home-composer-modes button:hover, .home-composer-modes a:hover { color: #f5f5f8; background: rgba(255,255,255,.055); }
.home-composer-modes button.is-active { color: #fff; background: #2a2a2c; box-shadow: inset 0 -2px 0 rgba(255,255,255,.8); }
.home-reference-row { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 14px 26px 0; }
.home-reference-row p { margin: 0; color: #7f8086; font-size: 11px; }
.home-add-reference { width: 55px; height: 55px; display: grid; flex: 0 0 55px; place-items: center; overflow: hidden; border: 1px solid rgba(255,255,255,.16); border-radius: 10px; background: #111214; color: #bfc0c7; text-decoration: none; }
.home-add-reference span { font-size: 27px; font-weight: 300; line-height: 1; }
.home-add-reference em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.home-add-reference:hover { border-color: rgba(255,255,255,.4); background: #232323; color: #fff; }
#homePromptInput { width: 100%; min-height: 120px; display: block; padding: 18px 27px 14px; resize: vertical; border: 0; outline: 0; background: transparent; color: #f3f3f4; font: inherit; font-size: 16px; line-height: 1.65; }
#homePromptInput::placeholder { color: #8b8c92; }
.home-composer-controls { min-height: 74px; display: flex; align-items: center; gap: 8px; padding: 12px 13px 13px; border-top: 1px solid rgba(255,255,255,.08); }
.home-composer-controls label { min-width: 0; display: flex; align-items: center; gap: 7px; padding: 0 0 0 11px; border: 1px solid rgba(255,255,255,.13); border-radius: 8px; background: #242426; color: #aaabb1; font-size: 11px; }
.home-composer-controls select { width: auto; max-width: 158px; min-height: 40px; padding: 0 28px 0 0; border: 0; outline: 0; background: #242426; color: #f4f4f5; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.home-point-hint { margin-left: auto; color: #a8a5b4; font-size: 12px; white-space: nowrap; }
.home-point-hint strong { color: #eee8ff; font-size: 14px; }
.home-composer-submit { min-width: 128px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 8px; background: #3a3a3a; color: #f5f5f5; font-size: 13px; font-weight: 800; cursor: pointer; box-shadow: none; }
.home-composer-submit:hover { transform: translateY(-1px); box-shadow: inset 0 .5px 0 rgba(255,255,255,.13); }
.canvas-projects { margin: 0 0 14px; }
.canvas-projects-heading { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 0 0 8px; padding: 0 4px; }
.canvas-projects-heading p { margin: 0 0 3px; color: var(--home-muted); font-size: 10px; font-weight: 700; }
.canvas-projects-heading h2 { margin: 0; color: #efeff1; font-size: 16px; }
.canvas-projects-heading > a { color: #a9a6b1; font-size: 11px; text-decoration: none; }
.canvas-projects-heading > a:hover { color: #fff; }
.canvas-project-list { display: grid; grid-template-columns: 1.05fr 1fr 1fr 1.05fr; gap: 8px; }
.canvas-project { position: relative; min-width: 0; min-height: 126px; display: block; overflow: hidden; border: 1px solid rgba(255,255,255,.13); border-radius: 12px; background: #202123; color: #fff; text-decoration: none; }
.canvas-project > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; transition: transform 400ms var(--home-ease), opacity 200ms ease; }
.canvas-project-copy { position: absolute; z-index: 1; right: 0; bottom: 0; left: 0; display: grid; gap: 3px; padding: 45px 13px 13px; background: linear-gradient(transparent, rgba(9,10,11,.9)); }
.canvas-project.is-no-preview { display: grid; align-items: end; }
.canvas-project.is-no-preview .canvas-project-copy { position: static; padding-top: 32px; background: none; }
.canvas-project strong, .canvas-project small { display: block; }
.canvas-project strong { overflow: hidden; font-size: 12px; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.canvas-project small { color: rgba(255,255,255,.58); font-size: 10px; }
.canvas-project:hover { border-color: rgba(255,255,255,.34); }
.canvas-project:focus-visible { outline: 2px solid rgba(255,255,255,.72); outline-offset: 2px; }
.canvas-project:hover > img { transform: scale(1.04); opacity: .78; }

@media (max-width: 900px) {
  .tapnow-workbench { min-height: 0; padding: 38px 0 28px; }
  .workspace-content { width: min(720px, calc(100% - 28px)); }
  .home-composer-controls { flex-wrap: wrap; }
  .home-point-hint { margin-left: 0; }
  .canvas-project-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .tapnow-workbench { padding-top: 28px; }
  .workspace-kicker { display: none; }
  .workspace-content > h1 { margin-bottom: 15px; font-size: 30px; }
  .home-composer { border-radius: 13px; }
  .home-composer-modes { min-height: 51px; padding: 8px 8px 0; }
  .home-composer-modes button, .home-composer-modes a { min-height: 35px; padding: 0 9px; font-size: 12px; }
  .home-reference-row { min-height: 56px; padding: 11px 16px 0; }
  .home-reference-row p { line-height: 1.45; }
  .home-add-reference { width: 43px; height: 43px; flex-basis: 43px; }
  #homePromptInput { min-height: 110px; padding: 14px 16px; font-size: 15px; }
  .home-composer-controls { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding: 9px; }
  .home-composer-controls label { width: 100%; }
  .home-composer-controls select { width: 100%; max-width: none; }
  .home-point-hint { display: none; }
  .home-composer-submit { width: 100%; min-width: 0; }
  .canvas-projects { margin-bottom: 12px; }
  .canvas-project { min-height: 116px; }
}

/* Match the creation workspace composer: a left mode rail, a quiet tool row,
   an unboxed prompt surface, then one dense specification rail. */
.home-composer {
  min-height: 358px;
  display: grid;
  grid-template-columns: 86px minmax(0, 1fr);
  overflow: visible;
  border-radius: 20px;
  background: #1d1d1d;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.16), 0 4px 16px rgba(0,0,0,.16);
}
.home-composer-rail {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 16px 10px;
  border-right: 0;
}
.home-composer-rail button,
.home-composer-rail a {
  width: 100%;
  min-height: 43px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 0 7px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: #a3a3a3;
  font-size: 13px;
  text-decoration: none;
  cursor: pointer;
}
.home-composer-rail button span,
.home-composer-rail a span { font-size: 17px; font-weight: 400; line-height: 1; }
.home-composer-rail b { font-weight: 700; white-space: nowrap; }
.home-composer-rail button:hover,
.home-composer-rail button:focus-visible,
.home-composer-rail a:hover,
.home-composer-rail a:focus-visible { background: rgba(255,255,255,.05); color: #f5f5f5; }
.home-composer-rail button.is-active {
  border-color: rgba(255,255,255,.14);
  background: rgba(255,255,255,.055);
  color: #f5f5f5;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.1);
}
.home-composer-main { min-width: 0; display: grid; grid-template-rows: 52px minmax(0, 1fr) 66px; }
.home-tool-tabs {
  display: flex;
  align-items: end;
  gap: 8px;
  padding: 10px 12px 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.home-tool-tabs button {
  min-height: 35px;
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: #a3a3a3;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.home-tool-tabs button:hover,
.home-tool-tabs button:focus-visible { background: rgba(255,255,255,.05); color: #f5f5f5; }
.home-tool-tabs button.is-active { border-color: rgba(255,255,255,.14); border-bottom-color: #1d1d1d; background: #262626; color: #f5f5f5; box-shadow: inset 0 .5px 0 rgba(255,255,255,.1); }
.home-composer-stage { position: relative; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 80px minmax(0, 1fr); gap: 0 16px; padding: 14px 14px 0; }
.home-reference-row { grid-row: 1; width: 70px; min-height: 70px; display: block; padding: 0; }
.home-reference-row p { display: none; }
.home-add-reference { width: 70px; height: 70px; border-style: dashed; border-color: rgba(255,255,255,.17); border-radius: 10px; background: #111214; color: #a3a3a3; box-shadow: inset 0 1px 0 rgba(255,255,255,.04); }
.home-add-reference span { font-size: 31px; }
.home-add-reference:hover { border-style: solid; border-color: rgba(255,255,255,.35); background: #232323; color: #f5f5f5; }
#homePromptInput {
  grid-row: 1 / span 2;
  grid-column: 2;
  min-height: 0;
  height: 100%;
  padding: 5px 3px 14px 0;
  resize: none;
  background: transparent;
  color: #f5f5f5;
  font-size: 16px;
}
#homePromptInput::placeholder { color: #a3a3a3; }
.home-composer-controls {
  min-height: 66px;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.home-composer-controls label {
  height: 38px;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 0 0 12px;
  border-color: rgba(255,255,255,.15);
  border-radius: 8px;
  background: #222;
  color: #a3a3a3;
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.06);
}
.home-composer-controls label:nth-child(1) { width: 178px; }
.home-composer-controls label:nth-child(2),
.home-composer-controls label:nth-child(3),
.home-composer-controls label:nth-child(4) { width: 132px; }
.home-composer-controls label > span { flex: 0 0 auto; font-size: 11px; }
.home-composer-controls select {
  width: 100%;
  max-width: none;
  min-height: 36px;
  padding: 0 25px 0 0;
  background: #222;
  color: #f5f5f5;
  font-size: 13px;
}
.home-point-hint { margin-left: auto; padding-right: 7px; color: #a3a3a3; font-size: 12px; }
.home-point-hint strong { color: #f5f5f5; }
.home-composer-submit {
  min-width: 44px;
  width: 44px;
  height: 42px;
  min-height: 42px;
  padding: 0;
  border-radius: 8px;
  background: #3a3a3a;
  color: #f5f5f5;
  box-shadow: none;
}
.home-composer-submit span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; }
.home-composer-submit:hover { transform: none; background: #525252; box-shadow: inset 0 .5px 0 rgba(255,255,255,.13); }

@media (max-width: 900px) {
  .home-composer { grid-template-columns: 1fr; overflow: hidden; }
  .home-composer-rail { flex-direction: row; justify-content: stretch; gap: 5px; padding: 8px; border-bottom: 1px solid rgba(255,255,255,.08); }
  .home-composer-rail button, .home-composer-rail a { min-height: 38px; flex: 1; }
  .home-composer-main { grid-template-rows: 48px minmax(190px, 1fr) auto; }
  .home-composer-stage { min-height: 190px; }
  .home-composer-controls { flex-wrap: wrap; }
  .home-point-hint { margin-left: 0; }
}
@media (max-width: 600px) {
  .home-composer { min-height: 0; border-radius: 14px; }
  .home-composer-rail button, .home-composer-rail a { gap: 5px; padding: 0 4px; font-size: 12px; }
  .home-composer-rail button span, .home-composer-rail a span { font-size: 14px; }
  .home-tool-tabs { gap: 2px; padding: 7px 6px 0; overflow-x: auto; }
  .home-tool-tabs button { min-height: 34px; padding: 0 9px; white-space: nowrap; font-size: 12px; }
  .home-composer-stage { grid-template-columns: 55px minmax(0, 1fr); min-height: 178px; padding: 12px 12px 0; gap: 0 12px; }
  .home-reference-row, .home-add-reference { width: 55px; min-height: 55px; height: 55px; }
  .home-add-reference span { font-size: 26px; }
  #homePromptInput { padding-top: 2px; font-size: 15px; }
  .home-composer-controls { display: grid; grid-template-columns: 1fr 1fr 44px; gap: 7px; padding: 9px; }
  .home-composer-controls label:nth-child(1),
  .home-composer-controls label:nth-child(2),
  .home-composer-controls label:nth-child(3),
  .home-composer-controls label:nth-child(4) { width: auto; }
  .home-composer-controls label > span { display: none; }
  .home-composer-controls select { padding-left: 8px; }
  .home-point-hint { display: none; }
  .home-composer-submit { grid-column: 3; grid-row: 1 / span 2; height: 100%; }
}

/* 首页整体密度（用户参考：浏览器 67% 缩放才是对的观感；1920 级视口下整页明显偏大）。
   与创作页输入窗口的密度档保持一致：<=2000px 视口 0.67，2001-2600 视口 0.85，
   更宽视口保持原始尺寸不缩。zoom 等比缩放整页（导航、hero、画布项目行、composer、
   展示卡、footer），语义等同浏览器缩放；首页样式里没有 100vh 区块，缩放不会留下空白。
   移动端（<=820px）不参与，仍由上面的窄屏断点接管。 */
@media (min-width: 821px) and (max-width: 2000px) {
  body.home-page {
    zoom: 0.67;
  }
}

@media (min-width: 2001px) and (max-width: 2600px) {
  body.home-page {
    zoom: 0.85;
  }
}