/*
  T-178 CSS cleanup.
  Rebuilt from browser CSSOM to keep only rules the browser can parse, then removed dormant legacy selector arms.
*/

@media (min-width: 901px) and (max-width: 1480px) {
  .portfolio-nav-links { gap: clamp(16px, 1.15vw, 24px); }

  .portfolio-nav-links a { font-size: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  ::before,
  ::after { animation-duration: 1ms !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }

  .reveal { opacity: 1; transform: none; filter: none; }

  .portfolio-intro { display: none; }

  .portfolio-fusion-seam,
  .portfolio-fusion-mask-rotor { animation: auto ease 0s 1 normal none running none !important; }

  #commercial-photo .portfolio-fusion-device.reveal .portfolio-fusion-disc { opacity: 1; transform: none; }

  #commercial-photo .portfolio-fusion-device.reveal::before,
  #commercial-photo .portfolio-fusion-device.reveal::after { animation: auto ease 0s 1 normal none running none !important; }
}

@media (max-width: 1080px) {
  .portfolio-profile__grid,
  .portfolio-steps,
  .portfolio-placeholder__grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }

  .portfolio-reality-fusion__panel { grid-template-columns: 1fr; }

  .portfolio-fusion-device { width: min(680px, 86vw); justify-self: center; }

  .portfolio-quick-nav { justify-content: flex-start; min-height: 44px; padding: 0px 20px; }

  .portfolio-nav-links { justify-content: flex-start; overflow-x: auto; padding-bottom: 0px; scrollbar-width: none; }

  .portfolio-nav-links::-webkit-scrollbar { display: none; }

  .portfolio-nav-links a { flex: 0 0 auto; }
}

@media (min-width: 901px) and (max-height: 1120px) {
  :root { --screen-pad-top: clamp(84px, 9vh, 104px); --screen-pad-bottom: clamp(32px, 4vh, 48px); --font-section: clamp(24px, 1.72vw, 34px); --font-lead: clamp(12px, 0.74vw, 14px); --font-body: clamp(12px, 0.68vw, 13px); }

  .portfolio-section__intro { margin-bottom: clamp(22px, 2.4vw, 36px); }

  .portfolio-section__intro > p:last-child,
  .portfolio-work__copy > p { margin-top: 14px; line-height: 1.58; }

  .portfolio-video-panel { gap: clamp(20px, 3vh, 34px); }

  .portfolio-video-stage video { height: clamp(420px, 52svh, 600px); }

  .portfolio-video-stage--wide video,
  .portfolio-vertical-card video { height: auto !important; }

  .portfolio-video-feature { gap: clamp(28px, 4.2vw, 72px); }

  .portfolio-storyboard--prompt { gap: clamp(18px, 2.4vh, 34px); }

  .portfolio-editing-board__hero img { height: clamp(300px, 36svh, 420px); }

  .portfolio-timeline-card img { aspect-ratio: 2.05 / 1; }

  .portfolio-timeline-card div { padding: 14px; }

  .portfolio-product-card__media { aspect-ratio: 1.72 / 1; }

  .portfolio-product-card__label { padding: 12px 14px 7px; }

  .portfolio-product-card > p { padding: 0px 14px 14px; line-height: 1.5; }

  .portfolio-material-stage__copy { margin-bottom: clamp(26px, 3vh, 42px); }

  .portfolio-design-grid .portfolio-image-card img,
  .portfolio-reference-slide img { aspect-ratio: 1.9 / 1; }

  .portfolio-photo-spec__image img { height: clamp(320px, 48svh, 520px); }

  .portfolio-spec-list { margin-top: clamp(18px, 2.4vh, 32px); gap: 12px; }

  .portfolio-panel.xiaomi-hover-carousel { --carousel-gap: clamp(34px, 3vw, 56px); --carousel-card-w: calc(24.39vw - var(--carousel-gap)); --carousel-gutter: 0px; padding-top: clamp(84px, 9.4vh, 108px); padding-bottom: clamp(16px, 2.6vh, 28px); row-gap: clamp(16px, 2.2vh, 24px); }

  .xiaomi-hover-card { flex-basis: var(--carousel-card-w); }

  .xiaomi-hover-card__media { height: auto; }

  .xiaomi-carousel__track { gap: var(--carousel-gap); padding-left: var(--carousel-gutter); padding-right: var(--carousel-gutter); }

  .xiaomi-hover-card h3 { margin-top: 14px; font-size: 19px; }

  .xiaomi-hover-card p { line-height: 1.5; }

  .xiaomi-hover-carousel .xiaomi-carousel__controls { margin-top: clamp(8px, 1.2vh, 12px); transform: none; }

  .xiaomi-carousel__controls { min-height: clamp(48px, 5vh, 60px); }

  .portfolio-panel.xiaomi-detail-carousel { gap: clamp(16px, 2.2vh, 30px); }

  .xiaomi-detail-carousel__viewport { height: min(42vh, 460px); }

  .portfolio-panel.xiaomi-dual-gallery { padding-block: clamp(64px, 8vh, 96px); }

  .xiaomi-dual-gallery__wrap { gap: clamp(48px, 5vw, 104px); }

  .xiaomi-dual-gallery__big { height: min(54vh, 610px); }

  .xiaomi-dual-gallery__side { grid-template-rows: minmax(0px, 34vh) auto auto; gap: 20px; }

  .xiaomi-dual-gallery__copy h3 { margin-bottom: 12px; font-size: 20px; }

  .xiaomi-dual-gallery__copy p { line-height: 1.58; }

  .xiaomi-accordion-stage__image { height: min(54vh, 580px); }

  .xiaomi-accordion-stage__copy h2 { margin-bottom: clamp(30px, 3.8vh, 48px); font-size: clamp(29px, 2.25vw, 38px); }

  .xiaomi-accordion__item { gap: 12px; padding-block: 22px; }
}

@media (max-width: 900px) {
  .portfolio-reality-fusion .portfolio-section__intro,
  .portfolio-support-panel .portfolio-section__intro { width: auto; max-width: none; }

  .portfolio-panel { min-height: auto; height: auto; padding-left: 20px; padding-right: 20px; }

  .portfolio-work,
  .portfolio-video-panel,
  .portfolio-video-feature,
  .portfolio-video-feature--main,
  .portfolio-video-feature--vertical { display: block !important; }

  .portfolio-video-feature { padding-left: 20px; padding-right: 20px; }

  .portfolio-video-feature__copy,
  .portfolio-video-feature__copy--right { max-width: none; justify-self: auto; }

  .portfolio-video-feature__media,
  .portfolio-vertical-video-wall,
  .portfolio-storyboard-strip,
  .portfolio-prompt-console,
  .portfolio-fusion-device { margin-top: 28px; }

  .portfolio-reality-fusion__panel,
  .portfolio-support-panel { display: block; }

  .portfolio-reality-fusion .portfolio-section__intro { position: relative; top: auto; left: auto; }

  .portfolio-fusion-device { position: relative; left: auto; top: auto; width: min(100%, 620px); margin-inline: auto; transform: none; }

  .portfolio-vertical-video-wall { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 14px; }

  .portfolio-vertical-card { width: 100%; min-width: 0px; }

  .portfolio-storyboard-strip { width: 100%; grid-template-columns: repeat(2, minmax(0px, 1fr)); }

  .portfolio-prompt-console { width: 100%; }

  .portfolio-profile__grid,
  .portfolio-steps,
  .portfolio-triptych,
  .portfolio-horizontal-gallery,
  .portfolio-design-grid,
  .portfolio-photo-spec,
  .portfolio-editing-board,
  .portfolio-strip,
  .portfolio-ai-duo,
  .portfolio-reference-track,
  .portfolio-product-grid,
  .portfolio-placeholder__grid,
  .portfolio-method-line { grid-template-columns: 1fr; }

  .portfolio-hero::after,
  .portfolio-profile::before { display: none; }

  .portfolio-image-card--wide { grid-column: auto; }

  .portfolio-work__visual,
  .portfolio-video-stage,
  .portfolio-horizontal-gallery,
  .portfolio-design-grid,
  .portfolio-reference-track,
  .portfolio-editing-board,
  .portfolio-product-grid,
  .portfolio-strip,
  .portfolio-ai-duo { margin-top: 32px; }

  .portfolio-work__visual img { min-height: auto; }

  .portfolio-triptych .portfolio-image-card:first-child { grid-row: auto; }

  .portfolio-triptych .portfolio-image-card:first-child img { height: auto; min-height: auto; aspect-ratio: 16 / 9; }

  .portfolio-storyboard .portfolio-horizontal-gallery { grid-template-columns: 1fr; grid-auto-rows: auto; }

  .portfolio-storyboard .portfolio-image-card--wide { grid-row: auto; }

  .portfolio-storyboard .portfolio-image-card,
  .portfolio-storyboard .portfolio-image-card img,
  .portfolio-storyboard .portfolio-image-card--wide img { height: auto; min-height: auto; }

  .portfolio-storyboard .portfolio-image-card--wide img,
  .portfolio-storyboard .portfolio-image-card:not(.portfolio-image-card--wide) img { aspect-ratio: 16 / 9; }

  .portfolio-chapter::before { position: static; width: auto; max-width: none; margin: 0px; padding: 22px 20px 0px; }

  .portfolio-chapter__screen--first,
  .portfolio-chapter__screen--continue { padding-top: 72px; padding-bottom: 72px; }

  .portfolio-editing-board__hero img { height: auto; min-height: auto; aspect-ratio: 16 / 9; }

  .portfolio-timeline { grid-template-columns: 1fr; grid-template-rows: auto; }

  .portfolio-timeline-card { display: grid; grid-template-columns: 0.9fr 1fr; }

  .portfolio-card { min-height: auto; }

  .portfolio-material-stage { justify-content: center !important; }

  .portfolio-material-stage__copy,
  .portfolio-material-stage__control,
  .portfolio-design-grid,
  .portfolio-reference-track { width: 100%; }

  .portfolio-material-stage__control { grid-template-columns: 1fr; }

  .portfolio-swatches { justify-content: flex-start; flex-wrap: wrap; }

  .portfolio-photo-spec,
  .portfolio-photo-spec--reverse { display: block !important; }

  .portfolio-photo-spec--reverse .portfolio-photo-spec__image,
  .portfolio-photo-spec--reverse .portfolio-photo-spec__copy { order: initial; }

  .portfolio-photo-spec__image { margin-top: 28px; }

  .portfolio-photo-spec__image img { height: auto; aspect-ratio: 16 / 9; }

  .portfolio-nav-links { gap: 18px; }

  .portfolio-nav-links a { font-size: 13px; }

  .portfolio-nav-links a::before { bottom: -6px; }
}

.portfolio-product-card__media::before { content: "实拍图"; }

.portfolio-product-card__media::after { content: "AI生成"; }

.xiaomi-color-stage { position: relative; display: block; padding: 0px; background: rgb(5, 4, 3); overflow: hidden; }

.xiaomi-color-stage__image { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.012); transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1), transform 1200ms cubic-bezier(0.22, 1, 0.36, 1); }

.xiaomi-color-stage__image.is-active { opacity: 1; transform: scale(1); }

.xiaomi-color-stage__image--next { z-index: 1; pointer-events: none; }

.xiaomi-color-stage__image--next.is-active { opacity: 1; transform: scale(1); }

.xiaomi-color-stage__title { position: absolute; top: clamp(120px, 17vh, 210px); left: max(72px, calc((100vw - var(--page-wide)) / 2)); z-index: 2; max-width: 640px; color: rgb(255, 255, 255); }

.xiaomi-color-stage__title h2,
.xiaomi-carousel__intro h2,
.xiaomi-detail-carousel__intro h2,
.xiaomi-dual-gallery__copy h2,
.xiaomi-accordion-stage__copy h2 { color: rgb(255, 255, 255); font-size: clamp(34px, 3vw, 56px); line-height: 1.15; font-weight: 500; letter-spacing: 0px; }

.xiaomi-color-stage__picker { position: static; display: grid; gap: 10px; width: min(560px, 100%); margin-top: clamp(14px, 1.3vw, 22px); color: rgb(255, 255, 255); }

.xiaomi-color-stage__picker h3 { margin: 0px 0px 10px; font-size: 24px; font-weight: 450; }

.xiaomi-color-stage__picker p { margin: 0px; color: rgba(255, 255, 255, 0.68); font-size: 15px; line-height: 1.75; }

.xiaomi-color-stage__swatches { display: flex; gap: 14px; margin-top: clamp(22px, 2vw, 34px); }

.xiaomi-color-stage__swatches button { width: 46px; height: 46px; padding: 0px; border: 1px solid transparent; border-radius: 999px; background: transparent; cursor: pointer; transition: border-color 180ms, transform 180ms; }

.xiaomi-color-stage__swatches button:hover,
.xiaomi-color-stage__swatches button.is-active { border-color: rgba(255, 255, 255, 0.82); transform: translateY(-2px); }

.xiaomi-color-stage__swatches img { width: 100%; height: 100%; display: block; border-radius: 999px; }

.xiaomi-hover-carousel,
.xiaomi-detail-carousel,
.xiaomi-dual-gallery { background: linear-gradient(rgba(255, 255, 255, 0.02), transparent 34%), rgb(5, 4, 3); color: rgb(255, 255, 255); box-shadow: rgb(5, 4, 3) 0px -1px 0px, rgb(5, 4, 3) 0px 1px 0px; }

.portfolio-panel.xiaomi-hover-carousel { --carousel-gap: clamp(38px, 3.2vw, 72px); --carousel-card-w: calc(24.39vw - var(--carousel-gap)); --carousel-gutter: 0px; display: grid; grid-template-rows: auto auto auto; align-content: center; row-gap: clamp(22px, 2.8vh, 34px); padding: clamp(96px, 10.6vh, 136px) 0px clamp(18px, 2.8vh, 34px); justify-content: initial; }

.xiaomi-hover-carousel.portfolio-chapter__screen--continue::before,
.xiaomi-dual-gallery.portfolio-chapter__screen--first::before,
.xiaomi-dual-gallery.portfolio-chapter__screen--continue::before { background: linear-gradient(90deg, transparent, rgba(232, 211, 169, 0.16), transparent); }

.xiaomi-carousel__intro,
.xiaomi-detail-carousel__intro { width: var(--page-wide); margin-inline: auto; }

.xiaomi-carousel__intro p:not(.portfolio-kicker) { max-width: 760px; margin: 12px 0px 0px; color: rgba(255, 255, 255, 0.62); font-size: 15px; line-height: 1.56; }

.xiaomi-carousel__intro .portfolio-kicker,
.xiaomi-detail-carousel__intro .portfolio-kicker,
.xiaomi-dual-gallery__copy .portfolio-kicker,
.xiaomi-accordion-stage__copy .portfolio-kicker { color: rgba(226, 195, 135, 0.78); }

.xiaomi-carousel__viewport { width: 100vw; margin-inline: auto; overflow: hidden; min-height: 0px; padding-block: clamp(16px, 2vh, 28px); }

.xiaomi-carousel__track { display: flex; gap: var(--carousel-gap); padding-left: var(--carousel-gutter); padding-right: var(--carousel-gutter); transition: transform 520ms cubic-bezier(0.22, 0.61, 0.36, 1); will-change: transform; }

.xiaomi-hover-card { flex: 0 0 var(--carousel-card-w); width: var(--carousel-card-w); min-width: 0px; color: rgb(255, 255, 255); opacity: 0.66; transform: none; transform-origin: center center; transition: opacity 180ms, transform 180ms; will-change: transform; }

.xiaomi-hover-card.is-current { z-index: 2; opacity: 1; transform: none; }

.xiaomi-hover-card__media { position: relative; width: 100%; aspect-ratio: 839 / 760; height: auto; overflow: hidden; background: rgb(17, 17, 17); border-radius: 8px; transition: box-shadow 180ms, border-color 180ms, filter 180ms; }

.xiaomi-hover-card.is-current .xiaomi-hover-card__media { border-color: rgba(232, 211, 169, 0.26); box-shadow: rgba(0, 0, 0, 0.5) 0px 32px 110px, rgba(232, 211, 169, 0.11) 0px 0px 42px; filter: saturate(1.04) contrast(1.03); }

.xiaomi-hover-card__media img { width: 100%; height: 100%; display: block; object-fit: cover; transition: opacity 160ms, filter 180ms; }

.xiaomi-hover-card__media .is-hover { position: absolute; inset: 0px; opacity: 0; }

.xiaomi-hover-card:hover .is-hover { opacity: 1; }

.xiaomi-hover-card:hover .xiaomi-hover-card__media img:first-child { filter: saturate(1.03) contrast(1.02); }

.xiaomi-hover-card h3 { margin: 18px 0px 7px; color: rgb(255, 255, 255); font-size: 21px; font-weight: 450; }

.xiaomi-hover-card p { max-width: 92%; margin: 0px; color: rgba(255, 255, 255, 0.62); font-size: 14px; line-height: 1.68; padding-right: 28px; }

.xiaomi-carousel__controls { display: flex; align-items: center; justify-content: space-between; width: min(1520px, calc(100% - (var(--carousel-gutter) * 2))); min-height: clamp(50px, 5.8vh, 68px); margin-inline: auto; gap: 48px; }

.xiaomi-hover-carousel .xiaomi-carousel__controls { align-self: end; margin-top: clamp(10px, 1.4vh, 16px); transform: none; }

.xiaomi-carousel__progress { display: flex; flex: 1 1 0%; align-items: center; }

.xiaomi-carousel__progress button { position: relative; flex: 1 1 0%; height: 20px; padding: 0px; border: 0px; background: transparent; cursor: pointer; }

.xiaomi-carousel__progress button::before { content: ""; position: absolute; top: 9px; left: 0px; right: 0px; height: 2px; background: rgba(255, 255, 255, 0.22); }

.xiaomi-carousel__progress span { position: absolute; top: 8px; left: 0px; width: 0px; height: 4px; border-radius: 999px; background: rgb(255, 255, 255); transition: width 320ms; }

.xiaomi-carousel__progress button.is-active span { width: 100%; }

.xiaomi-carousel__arrows { display: flex; gap: 12px; }

.xiaomi-carousel__arrows button { position: relative; display: grid; place-items: center; width: 54px; height: 54px; border: 1px solid rgba(255, 255, 255, 0.42); border-radius: 999px; background: transparent; color: rgb(255, 255, 255); font-size: 0px; cursor: pointer; transition: border-color 180ms, background 180ms; }

.xiaomi-carousel__arrows button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 12.5px; height: 12.5px; border-top: 2.25px solid; border-left: 2.25px solid; border-radius: 1px; transform: translate(calc(-50% + 2px), -50%) rotate(-45deg); }

.xiaomi-carousel__arrows button[data-next]::before { transform: translate(calc(-50% - 2px), -50%) rotate(135deg); }

.xiaomi-carousel__arrows button:hover { border-color: rgba(226, 195, 135, 0.82); background: rgba(226, 195, 135, 0.08); }

.portfolio-panel.xiaomi-detail-carousel { display: grid; grid-template-rows: auto minmax(0px, 1fr) auto; gap: clamp(18px, 2.4vh, 34px); justify-content: initial; }

.xiaomi-detail-carousel__viewport { position: relative; width: var(--page-wide); height: min(43vh, 500px); margin-inline: auto; overflow: hidden; background: rgb(13, 12, 10); }

.xiaomi-detail-carousel__viewport img,
.xiaomi-dual-gallery__big img,
.xiaomi-dual-gallery__small img,
.xiaomi-accordion-stage__image img { position: absolute; inset: 0px; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.012); transition: opacity 680ms cubic-bezier(0.22, 1, 0.36, 1), transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), filter 680ms; }

.xiaomi-detail-carousel__viewport img.is-active,
.xiaomi-dual-gallery__big img.is-active,
.xiaomi-dual-gallery__small img.is-active,
.xiaomi-accordion-stage__image img.is-active { opacity: 1; transform: scale(1); }

.xiaomi-detail-carousel__caption { display: grid; grid-template-columns: minmax(0px, 0.9fr) minmax(360px, 1fr); gap: clamp(36px, 4vw, 64px); width: var(--page-wide); margin-top: clamp(-22px, -1.6vh, -10px); margin-inline: auto; align-items: start; }

.xiaomi-detail-carousel__caption h3 { margin: 0px 0px 14px; color: rgb(255, 255, 255); font-size: 24px; font-weight: 450; }

.xiaomi-detail-carousel__caption p { margin: 0px; max-width: 720px; color: rgba(255, 255, 255, 0.62); font-size: 15px; line-height: 1.75; }

.xiaomi-detail-carousel__caption .xiaomi-carousel__controls { width: 100%; }

.portfolio-panel.xiaomi-dual-gallery { display: flex; align-items: center; padding-block: clamp(74px, 10vh, 124px); }

.xiaomi-dual-gallery__wrap { display: grid; grid-template-columns: minmax(0px, 1.25fr) minmax(360px, 0.72fr); gap: clamp(64px, 7vw, 150px); width: var(--page-wide); margin-inline: auto; }

.xiaomi-dual-gallery.is-reverse .xiaomi-dual-gallery__wrap { grid-template-columns: minmax(360px, 0.72fr) minmax(0px, 1.25fr); }

.xiaomi-dual-gallery.is-reverse .xiaomi-dual-gallery__big { order: 2; }

.xiaomi-dual-gallery.is-reverse .xiaomi-dual-gallery__side { order: 1; }

.xiaomi-dual-gallery__big,
.xiaomi-dual-gallery__small,
.xiaomi-accordion-stage__image { position: relative; overflow: hidden; background: rgb(17, 17, 17); border-radius: 10px; }

.xiaomi-dual-gallery__big { min-height: 0px; height: min(58vh, 680px); }

.xiaomi-dual-gallery__side { display: grid; grid-template-rows: minmax(0px, 38vh) auto auto; gap: clamp(22px, 2.6vh, 32px); }

.xiaomi-dual-gallery__small { min-height: 280px; }

.xiaomi-dual-gallery__copy h2 { margin: 0px 0px 18px; }

.xiaomi-dual-gallery__copy h3 { margin: 0px 0px 18px; color: rgba(255, 255, 255, 0.78); font-size: 23px; font-weight: 400; }

.xiaomi-dual-gallery__copy p { margin: 0px; color: rgba(255, 255, 255, 0.62); font-size: 15px; line-height: 1.78; }

.xiaomi-dual-gallery .xiaomi-carousel__controls { width: 100%; }

.portfolio-panel.xiaomi-accordion-stage { display: grid; grid-template-columns: minmax(0px, 1fr) minmax(300px, 360px); gap: clamp(56px, 6vw, 140px); align-items: start; justify-content: initial; align-content: center; background: radial-gradient(circle at 18% 18%, rgba(43, 129, 158, 0.08), transparent 34%), linear-gradient(rgb(7, 6, 4), rgb(5, 4, 3)); color: rgb(255, 255, 255); box-shadow: rgb(5, 4, 3) 0px -1px 0px, rgb(5, 4, 3) 0px 1px 0px; }

.xiaomi-accordion-stage__image { width: 100%; height: min(58vh, 660px); border-radius: 10px; background: rgb(14, 12, 9); }

.xiaomi-accordion-stage__copy h2 { margin: 0px 0px clamp(46px, 5vh, 73px); color: rgb(255, 255, 255); font-size: clamp(31px, 2.45vw, 44px); line-height: 1.18; font-weight: 450; }

.xiaomi-accordion-stage__copy .portfolio-kicker { color: rgba(232, 211, 169, 0.62); }

.xiaomi-accordion { display: grid; gap: 0px; counter-reset: method 0; }

.xiaomi-accordion__item { position: relative; display: grid; gap: 18px; padding: 30px 34px 30px 54px; border-width: 1px 0px 0px; border-style: solid none none; border-color: rgba(232, 211, 169, 0.16) currentcolor currentcolor; border-image: initial; background: transparent; color: rgba(255, 255, 255, 0.42); text-align: left; cursor: pointer; }

.xiaomi-accordion__item::before { counter-increment: method 1; content: "0" counter(method); position: absolute; left: 0px; top: 30px; width: 32px; color: rgba(232, 211, 169, 0.72); font-size: 13px; line-height: 1; letter-spacing: 0.08em; }

.xiaomi-accordion__item::after { content: ""; position: absolute; top: 37px; right: 0px; width: 12px; height: 12px; border-top: 2px solid; border-left: 2px solid; transform: rotate(45deg); opacity: 0.85; transition: transform 220ms, color 220ms; }

.xiaomi-accordion__item span { color: inherit; font-size: 22px; font-weight: 450; }

.xiaomi-accordion__item em { display: block; max-height: 0px; overflow: hidden; color: rgba(255, 255, 255, 0.64); font-style: normal; font-size: 15px; line-height: 1.8; transition: max-height 260ms, opacity 260ms; opacity: 0; }

.xiaomi-accordion__item.is-active { color: rgb(255, 255, 255); }

.xiaomi-accordion__item.is-active::after { color: var(--portfolio-gold-soft); transform: rotate(45deg) scaleY(-1); }

.xiaomi-accordion__item.is-active em { max-height: 120px; opacity: 1; }

@media (max-width: 900px) {
  .xiaomi-color-stage__title { left: 24px; right: 24px; width: auto; }

  .xiaomi-hover-card { flex-basis: 78vw; }

  .portfolio-panel.xiaomi-hover-carousel { min-height: auto; height: auto; row-gap: 24px; padding: 72px 0px; }

  .xiaomi-hover-card__media { height: auto; }

  .xiaomi-carousel__controls { width: calc(100% - 40px); min-height: 48px; gap: 20px; }

  .xiaomi-detail-carousel__caption,
  .xiaomi-dual-gallery__wrap,
  .xiaomi-dual-gallery.is-reverse .xiaomi-dual-gallery__wrap,
  .portfolio-panel.xiaomi-accordion-stage { grid-template-columns: 1fr; }

  .xiaomi-dual-gallery__big,
  .xiaomi-dual-gallery__side,
  .xiaomi-dual-gallery.is-reverse .xiaomi-dual-gallery__big,
  .xiaomi-dual-gallery.is-reverse .xiaomi-dual-gallery__side { order: initial; }

  .xiaomi-detail-carousel__viewport,
  .xiaomi-dual-gallery__big,
  .xiaomi-accordion-stage__image { height: 42vh; }

  .portfolio-panel.xiaomi-accordion-stage { align-items: center; padding-block: 82px; }

  .xiaomi-dual-gallery__side { grid-template-rows: 30vh auto auto; }

  .xiaomi-carousel__arrows { display: none; }
}

@media (min-width: 901px) and (max-height: 1120px) {
  .portfolio-panel.xiaomi-hover-carousel { --carousel-gap: clamp(34px, 3vw, 56px); --carousel-card-w: calc(24.39vw - var(--carousel-gap)); --carousel-gutter: 0px; padding-top: clamp(84px, 9.4vh, 108px); padding-bottom: clamp(16px, 2.6vh, 28px); row-gap: clamp(16px, 2.2vh, 24px); }

  .xiaomi-hover-card { flex-basis: var(--carousel-card-w); }

  .xiaomi-hover-card__media { height: auto; }

  .xiaomi-carousel__track { gap: var(--carousel-gap); padding-left: var(--carousel-gutter); padding-right: var(--carousel-gutter); }

  .xiaomi-hover-card h3 { margin-top: 14px; font-size: 19px; }

  .xiaomi-hover-card p { line-height: 1.5; }

  .xiaomi-hover-carousel .xiaomi-carousel__controls { margin-top: clamp(8px, 1.2vh, 12px); transform: none; }

  .xiaomi-carousel__controls { min-height: clamp(48px, 5vh, 60px); }
}

@media (min-width: 901px) {
  :root { --screen-h: 100vh; }

  .portfolio-hero,
  .portfolio-hero__content,
  .portfolio-panel,
  .portfolio-chapter__screen { min-height: var(--screen-h); height: var(--screen-h); }

  .portfolio-panel { box-sizing: border-box; }

  .portfolio-profile { justify-content: center; padding-top: clamp(118px, 13vh, 160px); padding-bottom: clamp(92px, 10vh, 128px); }

  .portfolio-profile::after { display: none; }

  .portfolio-profile .portfolio-section__intro { margin-bottom: clamp(48px, 5vh, 72px); }

  .portfolio-profile .portfolio-card { min-height: clamp(270px, 27vh, 340px); }

  .portfolio-reality-fusion__panel { display: block !important; padding: 0px !important; }

  .portfolio-reality-fusion .portfolio-section__intro { position: absolute !important; top: clamp(72px, 8vh, 108px) !important; left: clamp(72px, 5vw, 108px) !important; width: min(440px, 100% - 144px) !important; margin: 0px !important; }

  .portfolio-reality-fusion .portfolio-fusion-device { position: absolute !important; left: 50% !important; top: 50% !important; width: min(650px, 56vw, 68vh) !important; margin: 0px !important; transform: translate(-50%, -50%) !important; }
}

@media (max-width: 560px) {
  .portfolio-hero__content { width: calc(100% - 40px); padding-top: 128px; }

  .portfolio-hero h1 { font-size: 34px; line-height: 1.08; }

  .portfolio-hero__lead { max-width: 340px; font-size: 14px; line-height: 1.68; word-break: break-word; }

  .portfolio-hero .portfolio-kicker { max-width: 320px; margin-bottom: 14px; font-size: 11px; line-height: 1.38; overflow-wrap: anywhere; }

  .portfolio-hero__tags { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); width: min(100%, 340px); gap: 8px; }

  .portfolio-hero__tags span { min-width: 0px; padding: 8px 9px; text-align: center; font-size: 12px; white-space: nowrap; }

  .portfolio-panel { padding: 72px 20px; }

  .portfolio-section__intro h2,
  .portfolio-work__copy h2 { font-size: 28px; line-height: 1.14; }

  .portfolio-product-card__label { display: grid; gap: 6px; }

  .portfolio-product-card__label em { text-align: left; }

  .portfolio-video-stage__caption { position: static; display: grid; padding: 16px; background: rgba(255, 255, 255, 0.06); }

  .portfolio-video-stage__caption strong { text-align: left; }
}

@media (min-width: 901px) {
  :root { --page-wide: var(--page-standard); --page-medium: min(1360px, calc(100vw - clamp(80px, 10vw, 220px))); --lux-panel: rgba(255, 255, 255, 0.052); --lux-panel-strong: rgba(255, 255, 255, 0.078); --lux-border: rgba(232, 211, 169, 0.19); --lux-border-soft: rgba(232, 211, 169, 0.115); }

  .portfolio-quick-nav { min-height: clamp(38px, 3vw, 50px); background: linear-gradient(rgba(4, 3, 2, 0.28), rgba(4, 3, 2, 0)); backdrop-filter: blur(8px); }

  .portfolio-nav-links { gap: clamp(20px, 1.35vw, 34px); }

  .portfolio-nav-links a { color: rgba(255, 255, 255, 0.58); font-size: clamp(12px, 0.64vw, 14px); font-weight: 500; }

  .portfolio-nav-links a::before { bottom: -7px; opacity: 0.78; }

  .portfolio-hero__shade { background: radial-gradient(circle at 78% 46%, rgba(202, 164, 91, 0.08), transparent 34%), linear-gradient(90deg, rgba(3, 2, 1, 0.98) 0%, rgba(3, 2, 1, 0.86) 33%, rgba(3, 2, 1, 0.36) 60%, rgba(3, 2, 1, 0.03) 100%), linear-gradient(0deg, rgba(5, 4, 2, 0.68), rgba(5, 4, 2, 0.02) 58%); }

  .portfolio-hero__content { justify-content: center; padding-top: clamp(116px, 13vh, 178px); padding-bottom: clamp(78px, 9vh, 126px); }

  .portfolio-hero h1 { max-width: 650px; font-size: clamp(48px, 4.35vw, 90px); }

  .portfolio-hero__lead { max-width: 590px; margin-top: clamp(22px, 2.2vh, 32px); color: rgba(255, 255, 255, 0.78); }

  .portfolio-hero__tags { gap: 9px; margin-top: clamp(28px, 4vh, 48px); }

  .portfolio-hero__tags span { padding: 8px 13px; border-color: rgba(232, 211, 169, 0.28); background: rgba(12, 9, 5, 0.32); }

  .portfolio-profile { padding-top: clamp(118px, 13vh, 154px); padding-bottom: clamp(72px, 8vh, 108px); background: radial-gradient(circle at 82% 14%, rgba(200, 167, 106, 0.12), transparent 30%), linear-gradient(135deg, rgba(18, 15, 10, 0.72), rgba(5, 4, 3, 0.92) 52%, rgb(3, 3, 2)); }

  .portfolio-profile::before { top: clamp(52px, 7vh, 86px); color: rgba(232, 211, 169, 0.035); font-size: clamp(46px, 6.1vw, 112px); }

  .portfolio-profile .portfolio-section__intro { max-width: 760px; margin-bottom: clamp(38px, 4.6vh, 66px); }

  .portfolio-profile__grid { width: var(--page-wide); grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: clamp(14px, 1.25vw, 24px); }

  .portfolio-profile .portfolio-card { min-height: clamp(220px, 24vh, 300px); padding: clamp(22px, 1.45vw, 30px); border-color: var(--lux-border-soft); background: linear-gradient(rgba(255, 255, 255, 0.063), rgba(255, 255, 255, 0.024)), linear-gradient(135deg, rgba(232, 211, 169, 0.055), rgba(255, 255, 255, 0)); box-shadow: rgba(0, 0, 0, 0.22) 0px 28px 90px; }

  .portfolio-profile .portfolio-card__meta { margin-bottom: clamp(16px, 2.1vh, 28px); color: rgba(232, 211, 169, 0.66); }

  .portfolio-profile .portfolio-card h3 { font-size: clamp(16px, 0.92vw, 19px); }

  .portfolio-profile .portfolio-card p { color: rgba(247, 239, 225, 0.64); line-height: 1.58; }

  .xiaomi-color-stage::after { content: ""; position: absolute; inset: 0px; z-index: 1; pointer-events: none; background: linear-gradient(90deg, rgba(3, 2, 1, 0.84) 0%, rgba(3, 2, 1, 0.42) 33%, rgba(3, 2, 1, 0.08) 62%, rgba(3, 2, 1, 0.14) 100%), linear-gradient(0deg, rgba(3, 2, 1, 0.58) 0%, rgba(3, 2, 1, 0.06) 26%, rgba(3, 2, 1, 0.18) 100%); }

  .xiaomi-color-stage__title { z-index: 2; left: max(76px, calc((100vw - var(--page-wide)) / 2)); }

  .xiaomi-color-stage__title { top: clamp(132px, 17.8vh, 228px); max-width: 500px; }

  .xiaomi-color-stage__title h2,
  .xiaomi-carousel__intro h2,
  .xiaomi-detail-carousel__intro h2,
  .xiaomi-dual-gallery__copy h2,
  .xiaomi-accordion-stage__copy h2 { font-size: clamp(36px, 3.05vw, 58px); font-weight: 520; }

  .xiaomi-color-stage__picker { width: min(560px, 100%); gap: 10px; }

  .xiaomi-color-stage__picker h3 { font-size: clamp(21px, 1.38vw, 27px); }

  .xiaomi-color-stage__picker p { max-width: 500px; color: rgba(255, 255, 255, 0.66); }

  .xiaomi-color-stage__swatches { gap: 14px; }

  .xiaomi-color-stage__swatches button { width: clamp(38px, 2.55vw, 50px); height: clamp(38px, 2.55vw, 50px); }

  .portfolio-panel.xiaomi-hover-carousel { --carousel-gap: clamp(42px, 3.4vw, 78px); --carousel-card-w: calc(24.39vw - var(--carousel-gap)); --carousel-gutter: 0px; row-gap: clamp(20px, 2.45vh, 34px); padding-top: clamp(92px, 10.4vh, 130px); padding-bottom: clamp(32px, 4vh, 54px); }

  .xiaomi-carousel__intro { max-width: var(--page-wide); }

  .xiaomi-hover-card__media { height: auto; border: 1px solid rgba(232, 211, 169, 0.08); box-shadow: rgba(0, 0, 0, 0.26) 0px 26px 88px; }

  .xiaomi-hover-card h3 { margin-top: 16px; font-size: clamp(19px, 1.05vw, 22px); font-weight: 520; }

  .xiaomi-hover-card p,
  .xiaomi-carousel__intro p:not(.portfolio-kicker) { color: rgba(255, 255, 255, 0.6); }

  .xiaomi-hover-carousel .xiaomi-carousel__controls { margin-top: clamp(14px, 1.9vh, 26px); }

  .xiaomi-carousel__arrows button { border-color: rgba(255, 255, 255, 0.34); background: rgba(0, 0, 0, 0.06); }

  .portfolio-chapter--editing { background: radial-gradient(circle at 76% 18%, rgba(73, 58, 34, 0.2), transparent 36%), linear-gradient(rgb(7, 6, 4) 0%, rgb(13, 11, 8) 46%, rgb(5, 4, 3) 100%); }

  .portfolio-video-feature { --video-wide: min(2040px, calc(100vw - clamp(72px, 8vw, 240px))); gap: clamp(46px, 5.8vw, 118px); }

  .portfolio-video-feature--main { grid-template-columns: minmax(350px, 0.43fr) minmax(0px, 1.12fr); }

  .portfolio-video-feature__copy { max-width: 560px; }

  .portfolio-video-stage--wide { border-color: rgba(232, 211, 169, 0.16); box-shadow: rgba(0, 0, 0, 0.56) 0px 48px 150px; }

  .portfolio-vertical-card { width: min(22vw, 470px); border-color: rgba(232, 211, 169, 0.15); }

  .portfolio-storyboard--prompt { align-content: center; }

  .portfolio-storyboard-strip { width: var(--page-wide); }

  .portfolio-prompt-console { width: var(--page-wide); }

  .portfolio-panel.xiaomi-dual-gallery { padding-block: clamp(82px, 10vh, 132px); }

  .xiaomi-dual-gallery__wrap { grid-template-columns: minmax(0px, 1.34fr) minmax(360px, 0.66fr); gap: clamp(62px, 7.2vw, 142px); }

  .xiaomi-dual-gallery.is-reverse .xiaomi-dual-gallery__wrap { grid-template-columns: minmax(360px, 0.66fr) minmax(0px, 1.34fr); }

  .xiaomi-dual-gallery__big { height: min(60vh, 720px); border: 1px solid rgba(232, 211, 169, 0.1); box-shadow: rgba(0, 0, 0, 0.28) 0px 34px 110px; }

  .xiaomi-dual-gallery__side { grid-template-rows: minmax(0px, 36vh) auto auto; }

  .xiaomi-dual-gallery__small { border: 1px solid rgba(232, 211, 169, 0.1); }

  .portfolio-panel.xiaomi-accordion-stage { grid-template-columns: minmax(0px, 1.24fr) minmax(330px, 0.48fr); gap: clamp(58px, 6.4vw, 138px); }

  .xiaomi-accordion-stage__image { height: min(58vh, 700px); border: 1px solid rgba(232, 211, 169, 0.1); box-shadow: rgba(0, 0, 0, 0.28) 0px 34px 118px; }

  .portfolio-reference-track,
  .portfolio-product-grid { gap: clamp(16px, 1.25vw, 24px); }

  .portfolio-reference-slide,
  .portfolio-product-card,
  .portfolio-ai-duo figure,
  .portfolio-card,
  .portfolio-method-line span,
  .portfolio-prompt-console { border-color: var(--lux-border-soft); background-color: var(--lux-panel); }

  .portfolio-product-card__media { aspect-ratio: 1.42 / 1; }

  .portfolio-method-line span { min-height: clamp(150px, 11vw, 218px); }
}

@media (min-width: 901px) and (min-height: 1280px) {
  .portfolio-hero__content { transform: translateY(-2.4vh); }
}

/*
  T-179 live repair after T-178 cleanup.
  Keep dormant Future/Profile selectors removed; restore only live layout for 02A and Support.
*/

@media (min-width: 901px) {
  #aigc-design .portfolio-panel.xiaomi-accordion-stage {
    display: grid;
    grid-template-columns: minmax(0, 1.22fr) minmax(360px, 0.52fr);
    grid-template-areas:
      "heading heading"
      "image copy";
    align-content: center;
    align-items: center;
    column-gap: clamp(58px, 6.2vw, 132px);
    row-gap: clamp(28px, 3.6vh, 48px);
  }

  #aigc-design .xiaomi-accordion-stage__heading {
    grid-area: heading;
    width: var(--page-wide);
    max-width: var(--page-wide);
    margin-inline: auto;
  }

  #aigc-design .xiaomi-accordion-stage__image {
    grid-area: image;
    width: 100%;
    height: min(46vh, 583px);
    min-height: 340px;
  }

  #aigc-design .xiaomi-accordion-stage__copy {
    grid-area: copy;
    width: min(100%, 486px);
    justify-self: stretch;
  }
}

#support .portfolio-support-panel {
  display: grid;
  align-content: center;
  gap: clamp(32px, 4.2vh, 72px);
}

#support .portfolio-support-slant {
  --support-angle: -14.04deg;
  --support-unskew: 14.04deg;
  --support-bleed-x: clamp(18px, 1.25vw, 32px);
  --support-active-fr: 70fr;
  --support-edge-fr: 13fr;
  --support-fold-fr: 10fr;
  position: relative;
  width: var(--page-wide);
  max-width: var(--page-wide);
  aspect-ratio: 21 / 8.25;
  margin-inline: auto;
  overflow: hidden;
  border: 1px solid rgba(232, 211, 169, 0.16);
  border-radius: 10px;
  background: #050403;
  box-shadow: 0 34px 120px rgba(0, 0, 0, 0.42);
  isolation: isolate;
}

#support .portfolio-support-track {
  position: absolute;
  inset: 0 calc(-1 * var(--support-bleed-x));
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  height: 100%;
  transform: skewX(var(--support-angle));
  transform-origin: center;
  transition: grid-template-columns 640ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: grid-template-columns;
}

#support .portfolio-support-slant.has-active[data-active-index="1"] .portfolio-support-track {
  grid-template-columns: var(--support-active-fr) var(--support-edge-fr) var(--support-fold-fr) var(--support-fold-fr) var(--support-edge-fr);
}

#support .portfolio-support-slant.has-active[data-active-index="2"] .portfolio-support-track {
  grid-template-columns: var(--support-edge-fr) var(--support-active-fr) var(--support-fold-fr) var(--support-fold-fr) var(--support-edge-fr);
}

#support .portfolio-support-slant.has-active[data-active-index="3"] .portfolio-support-track {
  grid-template-columns: var(--support-edge-fr) var(--support-fold-fr) var(--support-active-fr) var(--support-fold-fr) var(--support-edge-fr);
}

#support .portfolio-support-slant.has-active[data-active-index="4"] .portfolio-support-track {
  grid-template-columns: var(--support-edge-fr) var(--support-fold-fr) var(--support-fold-fr) var(--support-active-fr) var(--support-edge-fr);
}

#support .portfolio-support-slant.has-active[data-active-index="5"] .portfolio-support-track {
  grid-template-columns: var(--support-edge-fr) var(--support-fold-fr) var(--support-fold-fr) var(--support-edge-fr) var(--support-active-fr);
}

#support .portfolio-support-slice {
  position: relative;
  display: block;
  min-width: 0;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

#support .portfolio-support-slice__skew,
#support .portfolio-support-slice__media,
#support .portfolio-support-slice__shade,
#support .portfolio-support-slice__copy {
  position: absolute;
  inset: 0;
  display: block;
}

#support .portfolio-support-slice__skew {
  transform: skewX(var(--support-unskew));
  transform-origin: center;
  inset-inline: calc(-1 * var(--support-bleed-x));
  overflow: hidden;
}

#support .portfolio-support-slice__media {
  inset: -2px calc(-1 * var(--support-bleed-x));
  transition: filter 360ms ease, opacity 360ms ease;
}

#support .portfolio-support-slice__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: none;
  filter: brightness(0.6) saturate(0.94);
  transition: filter 360ms ease;
}

#support .portfolio-support-slice.is-active .portfolio-support-slice__media img,
#support .portfolio-support-slice:hover .portfolio-support-slice__media img,
#support .portfolio-support-slice:focus-visible .portfolio-support-slice__media img {
  filter: brightness(1) saturate(1);
}

#support .portfolio-support-slice__shade {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38), transparent 32%, rgba(0, 0, 0, 0.46)),
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, 0.58) 100%);
  pointer-events: none;
  transition: opacity 360ms ease;
}

#support .portfolio-support-slice.is-active .portfolio-support-slice__shade {
  opacity: 0.32;
}

#support .portfolio-support-slice:not(.is-active) .portfolio-support-slice__shade {
  opacity: 0.72;
}

#support .portfolio-support-slice__copy {
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: clamp(24px, 2.8vw, 44px);
  pointer-events: none;
}

#support .portfolio-support-slice__active-copy {
  display: grid;
  gap: 8px;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: opacity 360ms ease 80ms, transform 460ms cubic-bezier(0.22, 1, 0.36, 1) 80ms;
}

#support .portfolio-support-slice.is-active .portfolio-support-slice__active-copy {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

#support .portfolio-support-slice__active-label {
  color: rgba(232, 211, 169, 0.72);
  font-size: clamp(10px, 0.62vw, 12px);
  font-weight: 620;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#support .portfolio-support-slice__active-title {
  color: rgba(250, 245, 235, 0.94);
  font-size: clamp(18px, 1.25vw, 24px);
  font-weight: 520;
  line-height: 1.12;
  letter-spacing: 0;
}

#support .portfolio-support-slice:focus-visible {
  outline: 2px solid rgba(232, 211, 169, 0.82);
  outline-offset: -4px;
}

@media (min-width: 901px) and (max-height: 1120px) {
  #support .portfolio-support-panel {
    gap: clamp(26px, 3.3vh, 46px);
  }

  #support .portfolio-support-slant {
    aspect-ratio: 21 / 8.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  #support .portfolio-support-track,
  #support .portfolio-support-slice__media img,
  #support .portfolio-support-slice__shade,
  #support .portfolio-support-slice__active-copy {
    transition: none !important;
  }
}

/*
  T-180: 4K visual regression repair after CSS dormant cleanup.
  Keep the recent cleanup, but restore the live composition for affected modules.
*/

@media (min-width: 901px) {
  #aigc-design .portfolio-panel.xiaomi-accordion-stage {
    width: var(--page-wide);
    max-width: var(--page-wide);
    margin-inline: auto;
    padding-inline: 0;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.4fr);
    grid-template-areas:
      "heading heading"
      "image copy";
    column-gap: clamp(52px, 3.8vw, 88px);
    row-gap: clamp(34px, 4.2vh, 72px);
    align-content: center;
    align-items: center;
  }

  #aigc-design .xiaomi-accordion-stage__heading {
    grid-area: heading;
    width: 100%;
    max-width: 100%;
    justify-self: stretch;
    margin: 0;
  }

  #aigc-design .xiaomi-accordion-stage__image {
    grid-area: image;
    width: 100%;
    height: auto !important;
    min-height: 0;
    aspect-ratio: 16 / 9;
    align-self: center;
  }

  #aigc-design .xiaomi-accordion-stage__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  #aigc-design .xiaomi-accordion-stage__copy {
    grid-area: copy;
    width: 100%;
    max-width: 410px;
    justify-self: end;
    align-self: center;
  }

  #visual-tone .xiaomi-color-stage__title {
    top: clamp(188px, 14vh, 302px) !important;
    left: max(96px, calc((100vw - var(--page-wide)) / 2)) !important;
    width: min(920px, var(--page-wide)) !important;
    max-width: 920px !important;
    transform: none;
  }

  #visual-system .xiaomi-hover-card {
    position: relative;
  }

  #visual-system .xiaomi-hover-card__caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    display: grid;
    gap: clamp(8px, 0.6vw, 12px);
    padding: clamp(24px, 1.6vw, 38px);
    color: rgba(250, 244, 234, 0.9);
    background:
      linear-gradient(180deg, rgba(5, 4, 3, 0), rgba(5, 4, 3, 0.72) 72%, rgba(5, 4, 3, 0.9));
    opacity: 1;
    transform: none;
    pointer-events: none;
  }

  #visual-system .xiaomi-hover-card__caption h3,
  #visual-system .xiaomi-hover-card__caption p {
    margin: 0;
  }

  #visual-system .xiaomi-hover-card__caption h3 {
    color: rgba(250, 244, 234, 0.94);
    font-size: clamp(22px, 1.45vw, 34px);
    font-weight: 540;
    line-height: 1.14;
  }

  #visual-system .xiaomi-hover-card__caption p {
    max-width: 34em;
    color: rgba(238, 225, 199, 0.72);
    font-size: clamp(13px, 0.82vw, 16px);
    font-weight: 430;
    line-height: 1.56;
  }

  #commercial-film .portfolio-video-feature--cinema {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100vw;
    max-width: none;
    padding: 0 !important;
    min-height: var(--screen-h);
  }

  #commercial-film .portfolio-video-feature__copy--cinema {
    top: clamp(170px, 13vh, 280px);
    left: max(96px, calc((100vw - var(--page-wide)) / 2));
    width: min(780px, 42vw);
    max-width: 780px;
    z-index: 3;
  }

  #commercial-film .portfolio-video-feature__media--cinema {
    width: 100vw !important;
    max-width: none !important;
    flex: 0 0 100vw;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    margin: 0;
  }

  #commercial-film .portfolio-video-stage--cinema {
    width: 100vw !important;
    max-width: none !important;
    aspect-ratio: 2.35 / 1;
    min-height: min(72vh, 1560px);
    border-radius: 0;
  }

  #commercial-film .portfolio-video-stage--cinema .portfolio-video-stage__film {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
  }

  #commercial-photo .portfolio-reality-fusion__panel {
    display: grid;
    place-items: center;
  }

  #commercial-photo .portfolio-fusion-device {
    --fusion-device-size: min(760px, 42vw, 72vh);
    width: var(--fusion-device-size) !important;
    height: var(--fusion-device-size) !important;
    left: 50%;
    top: 50%;
    transform: translate3d(-50%, -50%, 0);
    will-change: transform;
    contain: layout paint;
    filter:
      drop-shadow(0 40px 70px rgba(0, 0, 0, 0.48))
      drop-shadow(0 0 42px rgba(232, 211, 169, 0.14));
  }

  #commercial-photo .portfolio-fusion-mask-rotor,
  #commercial-photo .portfolio-fusion-seam,
  #commercial-photo .portfolio-fusion-ring {
    will-change: transform;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__media {
    cursor: ew-resize;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__refined {
    opacity: 1;
    clip-path: polygon(0 0, var(--fusion-x) 0, var(--fusion-x) 100%, 0 100%);
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scene {
    opacity: 1;
    clip-path: polygon(var(--fusion-x) 0, 100% 0, 100% 100%, var(--fusion-x) 100%);
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scrub {
    position: absolute;
    top: 0;
    bottom: 0;
    left: var(--fusion-x);
    z-index: 4;
    width: 1px;
    opacity: 0.92;
    transform: translateX(-0.5px);
    background:
      linear-gradient(180deg, transparent, rgba(250, 244, 234, 0.92) 24%, rgba(232, 211, 169, 0.82) 50%, rgba(250, 244, 234, 0.92) 76%, transparent);
    box-shadow: 0 0 22px rgba(232, 211, 169, 0.28);
    pointer-events: none;
  }

  #future-profile.portfolio-profile-card-chapter,
  #future-profile .portfolio-profile-card-panel,
  #future-profile .profile-page {
    min-height: clamp(2240px, 142svh, 2680px);
  }

  #future-profile .profile-page {
    padding-top: clamp(96px, 7.2vh, 128px);
    padding-bottom: clamp(116px, 9vh, 168px);
  }

  #support .portfolio-support-panel {
    gap: clamp(30px, 3.2vh, 54px);
  }

  #support .portfolio-support-slant {
    --support-bleed-x: clamp(38px, 2vw, 72px);
    --support-active-fr: 66fr;
    --support-edge-fr: 14fr;
    --support-fold-fr: 10fr;
    width: var(--page-wide);
    max-width: var(--page-wide);
    aspect-ratio: 21 / 8.4;
  }

  #support .portfolio-support-slice__skew {
    inset-inline: calc(-1 * var(--support-bleed-x));
  }

  #support .portfolio-support-slice__media {
    inset: -10px calc(-1 * (var(--support-bleed-x) + 18px));
  }

  #support .portfolio-support-slice__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/*
  T-181: final live-frame stabilization after T-180 repair.
  This layer only locks current live modules that were affected by CSS cleanup.
*/

@media (min-width: 901px) {
  #aigc-design .portfolio-panel.xiaomi-accordion-stage {
    width: var(--page-wide) !important;
    max-width: var(--page-wide) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.4fr) !important;
    grid-template-areas:
      "heading heading"
      "image copy" !important;
    column-gap: clamp(52px, 3.8vw, 88px) !important;
    row-gap: clamp(34px, 4.2vh, 72px) !important;
    align-content: center !important;
    align-items: center !important;
  }

  #aigc-design .xiaomi-accordion-stage__image {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  #aigc-design .xiaomi-accordion-stage__image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  #visual-tone .xiaomi-color-stage__title {
    top: clamp(156px, 12vh, 260px) !important;
  }

  #visual-system .xiaomi-hover-card__caption {
    visibility: visible !important;
    opacity: 1 !important;
  }

  #commercial-film .portfolio-video-feature--cinema,
  #commercial-film .portfolio-video-feature__media--cinema {
    width: 100vw !important;
    max-width: none !important;
  }

  #commercial-film .portfolio-video-stage--cinema {
    width: 100vw !important;
    max-width: none !important;
    aspect-ratio: 2.35 / 1 !important;
    min-height: min(72vh, 1560px) !important;
  }

  #commercial-film .portfolio-video-stage--cinema .portfolio-video-stage__film {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  #commercial-photo .portfolio-reality-fusion__panel {
    min-height: var(--screen-h) !important;
    display: grid !important;
    place-items: center !important;
  }

  #commercial-photo .portfolio-fusion-device {
    --fusion-device-size: min(760px, 42vw, 72vh);
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: var(--fusion-device-size) !important;
    height: var(--fusion-device-size) !important;
    margin: 0 !important;
    transform: translate3d(-50%, -50%, 0) !important;
    contain: layout paint !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__media {
    position: relative !important;
    overflow: hidden !important;
    cursor: ew-resize !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__base,
  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__refined,
  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scene {
    position: absolute !important;
    inset: 0 !important;
    background-size: cover !important;
    background-position: center !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__refined {
    opacity: 1 !important;
    clip-path: polygon(0 0, var(--fusion-x) 0, var(--fusion-x) 100%, 0 100%) !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scene {
    opacity: 1 !important;
    clip-path: polygon(var(--fusion-x) 0, 100% 0, 100% 100%, var(--fusion-x) 100%) !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scrub {
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: var(--fusion-x) !important;
    z-index: 4 !important;
    width: 1px !important;
    opacity: 0.92 !important;
    transform: translateX(-0.5px) !important;
  }

  #future-profile.portfolio-profile-card-chapter,
  #future-profile .portfolio-profile-card-panel,
  #future-profile .profile-page {
    min-height: clamp(2160px, 125svh, 2400px) !important;
  }

  #support .portfolio-support-slant {
    --support-bleed-x: clamp(48px, 2.6vw, 92px);
    width: min(var(--page-wide), calc(100vw - 240px)) !important;
    max-width: var(--page-wide) !important;
    aspect-ratio: 21 / 8.4 !important;
    margin-inline: auto !important;
    overflow: hidden !important;
  }

  #support .portfolio-support-track {
    height: 100% !important;
  }

  #support .portfolio-support-slice__skew {
    inset-inline: calc(-1 * var(--support-bleed-x)) !important;
  }

  #support .portfolio-support-slice__media {
    inset: -14px calc(-1 * (var(--support-bleed-x) + 22px)) !important;
  }

  #support .portfolio-support-slice__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: none !important;
  }

  #support .portfolio-support-slice.is-active .portfolio-support-slice__media img {
    filter: brightness(1) saturate(1) !important;
  }

  #support .portfolio-support-slice:not(.is-active) .portfolio-support-slice__media img {
    filter: brightness(0.6) saturate(0.94) !important;
  }
}

/*
  T-182: targeted frame repair after CSS reduction.
  Scope: user-listed desktop pages only; preserve intentionally full-bleed hero/video/gallery sections.
*/

@media (min-width: 901px) {
  :root {
    --portfolio-profile-wide: var(--page-standard);
    --portfolio-profile-left: var(--page-standard-left);
  }

  #aigc-design {
    background: #000 !important;
  }

  #aigc-design::before,
  #aigc-design::after {
    opacity: 0 !important;
  }

  #aigc-design .portfolio-panel.xiaomi-accordion-stage {
    background: transparent !important;
    box-shadow: none !important;
  }

  #aigc-design .xiaomi-accordion-stage__heading {
    background: transparent !important;
    box-shadow: none !important;
  }

  #aigc-design .xiaomi-accordion-stage__heading::before,
  #aigc-design .xiaomi-accordion-stage__heading::after {
    content: none !important;
    display: none !important;
  }

  #aigc-design .xiaomi-accordion__item,
  #aigc-design .xiaomi-accordion__item.is-active {
    padding-left: 0 !important;
    background: transparent !important;
  }

  #aigc-design .xiaomi-accordion__item::before,
  #aigc-design .xiaomi-accordion__item.is-active::before {
    content: none !important;
    display: none !important;
  }

  #visual-system .xiaomi-carousel__intro,
  #commercial-photo .portfolio-reality-fusion__panel > .portfolio-section__intro {
    width: var(--portfolio-profile-wide) !important;
    max-width: var(--portfolio-profile-wide) !important;
  }

  #commercial-photo .portfolio-reality-fusion__panel > .portfolio-section__intro {
    left: var(--portfolio-profile-left) !important;
  }

  #visual-system.xiaomi-hover-carousel {
    width: 100vw !important;
    max-width: none !important;
    padding-inline: 0 !important;
    overflow: hidden !important;
  }

  #visual-system .xiaomi-carousel__viewport {
    width: 100vw !important;
    max-width: none !important;
    margin-inline: calc(50% - 50vw) !important;
    overflow: hidden !important;
  }

  #visual-system .xiaomi-carousel__track {
    width: max-content !important;
    padding-left: var(--carousel-gutter, 0px) !important;
    padding-right: var(--carousel-gutter, 0px) !important;
  }

  #visual-system .xiaomi-hover-card {
    flex: 0 0 var(--carousel-card-w) !important;
    width: var(--carousel-card-w) !important;
  }

  #visual-system .xiaomi-hover-card__caption {
    visibility: visible !important;
    opacity: 1 !important;
  }

  #commercial-photo .portfolio-reality-fusion__panel {
    max-width: none !important;
    width: 100% !important;
    margin-inline: 0 !important;
    overflow: visible !important;
  }

  #commercial-photo .portfolio-fusion-device {
    --fusion-device-size: min(600px, calc(var(--portfolio-profile-wide) * 0.47), 58vh) !important;
    width: var(--fusion-device-size) !important;
    height: var(--fusion-device-size) !important;
    aspect-ratio: 1 / 1 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    contain: none !important;
    overflow: visible !important;
  }

  #commercial-photo .portfolio-fusion-disc,
  #commercial-photo .portfolio-fusion-mask-rotor {
    border-radius: 50% !important;
    overflow: hidden !important;
  }

  #commercial-photo .portfolio-fusion-disc,
  #commercial-photo .portfolio-fusion-symbol {
    width: 100% !important;
    height: 100% !important;
  }

  #commercial-photo .portfolio-fusion-svg-source-field {
    border-radius: 50% !important;
    overflow: hidden !important;
    clip-path: circle(50% at 50% 50%) !important;
  }

  #commercial-photo .portfolio-fusion-ring {
    inset: 0 !important;
    border-radius: 50% !important;
    border-color: rgba(232, 211, 169, 0.18) !important;
    box-shadow:
      inset 0 0 0 1px rgba(5, 4, 3, 0.22),
      inset 0 0 34px rgba(0, 0, 0, 0.2) !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scrub {
    opacity: 0 !important;
    transition: opacity 160ms ease !important;
    will-change: opacity, left !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion:is(:hover, :focus-within, .is-scrubbing) .portfolio-product-card__scrub {
    opacity: 0.9 !important;
  }

  #support .portfolio-support-slant {
    width: var(--page-wide) !important;
    max-width: var(--page-wide) !important;
  }
}

/* T-187: 02A keeps the confirmed large accordion frame, not the temporary profile-width clamp. */
@media (min-width: 901px) {
  #aigc-design .portfolio-panel.xiaomi-accordion-stage,
  #aigc-design .xiaomi-accordion-stage__heading {
    width: var(--page-wide) !important;
    max-width: var(--page-wide) !important;
    margin-inline: auto !important;
  }

  #aigc-design .portfolio-panel.xiaomi-accordion-stage {
    grid-template-columns: minmax(0, 1fr) minmax(360px, 0.4fr) !important;
    column-gap: clamp(52px, 3.8vw, 88px) !important;
  }

  #visual-system .xiaomi-carousel__intro {
    width: var(--page-wide) !important;
    max-width: var(--page-wide) !important;
    margin-inline: auto !important;
  }
}

/* T-189: restore 03B and 04B live frames from the temporary profile-width clamp. */
@media (min-width: 901px) {
  #film-storyboard .portfolio-section__intro,
  #film-storyboard .portfolio-storyboard-strip,
  #film-storyboard .portfolio-prompt-console,
  #reality-imagination .portfolio-section__intro {
    width: var(--page-wide) !important;
    max-width: var(--page-wide) !important;
    margin-inline: auto !important;
  }

  #reality-imagination .portfolio-ai-grid-panel {
    width: 100% !important;
    max-width: none !important;
  }

  #reality-imagination .portfolio-product-grid {
    width: min(1840px, calc(100vw - clamp(160px, 10vw, 360px))) !important;
    max-width: min(1840px, calc(100vw - clamp(160px, 10vw, 360px))) !important;
    margin-inline: auto !important;
  }
}

/* T-190: restore the confirmed photo gallery proportions for "所想即所得" and "一物多景". */
@media (min-width: 901px) {
  #photo-scenes .xiaomi-dual-gallery {
    padding-inline: 0 !important;
  }

  #photo-scenes .xiaomi-dual-gallery__wrap {
    width: min(1920px, calc(100vw - clamp(96px, 6.25vw, 160px))) !important;
    max-width: min(1920px, calc(100vw - clamp(96px, 6.25vw, 160px))) !important;
    margin-inline: auto !important;
    grid-template-columns: minmax(0, 16fr) minmax(360px, 9fr) !important;
    align-items: start !important;
  }

  #photo-scenes .xiaomi-dual-gallery__big {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9 !important;
  }

  #photo-scenes .xiaomi-dual-gallery__side {
    grid-template-rows: auto auto auto !important;
  }

  #photo-scenes .xiaomi-dual-gallery__small {
    width: 100% !important;
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }

  #photo-scenes .xiaomi-dual-gallery__copy {
    width: auto !important;
    max-width: none !important;
    margin-left: 0 !important;
  }
}

/* T-191: desktop standard content width and 04B live frame repair. */
@media (min-width: 901px) {
  #reality-imagination .portfolio-section__intro {
    width: var(--page-standard) !important;
    max-width: var(--page-standard) !important;
    margin-inline: auto !important;
  }

  #reality-imagination .portfolio-ai-grid-panel {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  #reality-imagination .portfolio-product-grid {
    width: var(--page-standard) !important;
    max-width: var(--page-standard) !important;
    margin-inline: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(20px, 1.25vw, 32px) !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__media {
    cursor: ew-resize !important;
    touch-action: none !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__refined,
  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scene {
    transition: none !important;
    will-change: clip-path !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scrub {
    left: var(--fusion-x) !important;
    opacity: 0 !important;
    transition: opacity 120ms ease !important;
    will-change: opacity, left !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion:is(:hover, :focus-within, .is-scrubbing) .portfolio-product-card__scrub {
    opacity: 0.9 !important;
  }
}

/*
  T-192: restore the 04 module frame from the QoderWork backup.
  Keep the current titles/content, but return 04A/04B body layout and fusion behavior.
*/
@media (min-width: 901px) {
  #commercial-photo .portfolio-reality-fusion__panel {
    position: relative !important;
    display: block !important;
    min-height: var(--screen-h) !important;
    height: var(--screen-h) !important;
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  #commercial-photo .portfolio-fusion-device {
    --fusion-device-size: min(650px, 58vw, 68vh) !important;
    position: absolute !important;
    z-index: 1 !important;
    left: 50% !important;
    top: 50% !important;
    width: var(--fusion-device-size) !important;
    height: var(--fusion-device-size) !important;
    margin: 0 !important;
    aspect-ratio: 1 / 1 !important;
    transform: translate3d(-50%, -50%, 0) !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    filter: none !important;
    contain: layout paint !important;
    overflow: visible !important;
  }

  #commercial-photo .portfolio-fusion-device::before {
    inset: -10% !important;
    border-radius: 50% !important;
    opacity: 0.9 !important;
  }

  #commercial-photo .portfolio-fusion-device.reveal {
    opacity: 1 !important;
  }

  #commercial-photo .portfolio-fusion-disc {
    position: relative !important;
    z-index: 2 !important;
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: 1 / 1 !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    isolation: isolate !important;
    filter:
      drop-shadow(0 clamp(30px, 3.2vw, 54px) clamp(26px, 3vw, 56px) rgba(0, 0, 0, 0.54))
      drop-shadow(0 clamp(46px, 5vw, 88px) clamp(52px, 6.8vw, 126px) rgba(0, 0, 0, 0.36))
      drop-shadow(0 clamp(20px, 2.2vw, 38px) clamp(34px, 3.8vw, 72px) rgba(232, 211, 169, 0.16)) !important;
    will-change: opacity, transform, filter !important;
  }

  #commercial-photo .portfolio-fusion-disc::after,
  #commercial-photo .portfolio-fusion-seam {
    content: none !important;
    display: none !important;
  }

  #commercial-photo .portfolio-fusion-symbol {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  #commercial-photo .portfolio-fusion-mask-rotor {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    transform-box: view-box !important;
    transform-origin: 50% 50% !important;
    animation-duration: 38s !important;
  }

  #commercial-photo .portfolio-fusion-svg-source-field {
    border-radius: 50% !important;
    overflow: hidden !important;
    clip-path: circle(50% at 50% 50%) !important;
  }

  #commercial-photo .portfolio-fusion-svg-image--source {
    opacity: 0.88 !important;
    filter: sepia(0.16) saturate(0.72) contrast(0.94) brightness(0.76) !important;
  }

  #commercial-photo .portfolio-fusion-svg-image--vision {
    filter: saturate(0.96) contrast(1.08) brightness(0.92) !important;
  }

  #commercial-photo .portfolio-fusion-ring {
    display: none !important;
  }

  #reality-imagination .portfolio-section__intro {
    width: var(--page-standard, var(--page-wide)) !important;
    max-width: var(--page-standard, var(--page-wide)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  #reality-imagination .portfolio-section__intro h2,
  #reality-imagination .portfolio-section__intro > p:not(.portfolio-kicker),
  #reality-imagination .portfolio-section__intro > p.portfolio-proof {
    max-width: 760px !important;
  }

  #reality-imagination .portfolio-ai-grid-panel {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  #reality-imagination .portfolio-product-grid {
    width: var(--page-standard, var(--page-wide)) !important;
    max-width: var(--page-standard, var(--page-wide)) !important;
    margin-inline: auto !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(20px, 1.25vw, 32px) !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__media {
    position: relative !important;
    overflow: hidden !important;
    aspect-ratio: 16 / 9 !important;
    cursor: ew-resize !important;
    touch-action: none !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__media::before {
    content: none !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__media::after {
    content: "" !important;
    position: absolute !important;
    inset: auto 0 0 !important;
    z-index: 5 !important;
    height: 34% !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: linear-gradient(180deg, transparent, rgba(8, 6, 4, 0.62)) !important;
    opacity: 0.72 !important;
    transform: none !important;
    backdrop-filter: none !important;
    pointer-events: none !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__base,
  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__refined,
  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scene {
    position: absolute !important;
    inset: 0 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-position: var(--crop) !important;
    pointer-events: none !important;
    will-change: opacity, filter, clip-path !important;
    transition:
      opacity 220ms ease,
      filter 220ms ease,
      clip-path 0ms linear !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__base {
    opacity: 1 !important;
    filter: saturate(0.9) contrast(1.02) brightness(0.94) !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__refined {
    opacity: 0 !important;
    clip-path: polygon(0 0, var(--fusion-x, 50%) 0, var(--fusion-x, 50%) 100%, 0 100%) !important;
    filter: saturate(0.95) contrast(1.05) brightness(0.95) !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__scene {
    opacity: 0 !important;
    clip-path: polygon(var(--fusion-x, 50%) 0, 100% 0, 100% 100%, var(--fusion-x, 50%) 100%) !important;
    filter: saturate(1) contrast(1.08) brightness(0.96) !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion:is(:hover, :focus-within, .is-scrubbing) .portfolio-product-card__base {
    opacity: 0 !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion:is(:hover, :focus-within, .is-scrubbing) .portfolio-product-card__refined,
  #reality-imagination .portfolio-product-card--hover-fusion:is(:hover, :focus-within, .is-scrubbing) .portfolio-product-card__scene {
    opacity: 1 !important;
  }

  #reality-imagination .portfolio-product-card__scrub {
    position: absolute !important;
    z-index: 6 !important;
    top: 0 !important;
    bottom: 0 !important;
    left: var(--fusion-x, 50%) !important;
    width: 1px !important;
    background: rgba(232, 211, 169, 0.94) !important;
    box-shadow:
      0 0 0 1px rgba(8, 6, 4, 0.28),
      0 0 22px rgba(232, 211, 169, 0.45),
      0 0 44px rgba(45, 132, 158, 0.16) !important;
    opacity: 0 !important;
    transform: translateX(-50%) !important;
    transition: opacity 140ms ease !important;
    pointer-events: none !important;
    will-change: opacity, left !important;
  }

  #reality-imagination .portfolio-product-card__scrub::before {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 10px !important;
    height: 46px !important;
    border: 1px solid rgba(232, 211, 169, 0.58) !important;
    border-radius: 999px !important;
    background: rgba(8, 6, 4, 0.34) !important;
    transform: translate(-50%, -50%) !important;
    backdrop-filter: blur(10px) !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion:is(:hover, :focus-within, .is-scrubbing) .portfolio-product-card__scrub {
    opacity: 1 !important;
  }

  #reality-imagination .portfolio-product-card__stage {
    position: absolute !important;
    z-index: 7 !important;
    bottom: 14px !important;
    padding: 6px 9px !important;
    border: 1px solid rgba(232, 211, 169, 0.32) !important;
    border-radius: 999px !important;
    background: rgba(8, 6, 4, 0.5) !important;
    color: rgba(255, 255, 255, 0.86) !important;
    backdrop-filter: blur(12px) !important;
    font-size: 11px !important;
    font-weight: 560 !important;
    line-height: 1 !important;
    letter-spacing: 0.08em !important;
    transition: opacity 180ms ease, border-color 180ms ease, color 180ms ease !important;
    pointer-events: none !important;
  }

  #reality-imagination .portfolio-product-card__stage--raw {
    left: 14px !important;
    opacity: 1 !important;
  }

  #reality-imagination .portfolio-product-card__stage--retouch {
    left: 50% !important;
    transform: translateX(-50%) !important;
    opacity: 0 !important;
  }

  #reality-imagination .portfolio-product-card__stage--scene {
    right: 14px !important;
    opacity: 0 !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion:is(:hover, :focus-within, .is-scrubbing) .portfolio-product-card__stage--raw {
    opacity: 0 !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion:is(:hover, :focus-within, .is-scrubbing) .portfolio-product-card__stage--retouch,
  #reality-imagination .portfolio-product-card--hover-fusion:is(:hover, :focus-within, .is-scrubbing) .portfolio-product-card__stage--scene {
    opacity: 1 !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__label {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: clamp(10px, 0.82vw, 16px) !important;
    padding: clamp(6px, 0.48vw, 8px) clamp(12px, 0.88vw, 16px) 2px !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__label span,
  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__label em,
  #reality-imagination .portfolio-product-card--hover-fusion > p {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    overflow-wrap: normal !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__label span {
    flex: 1 1 auto !important;
    font-size: clamp(12px, 0.72vw, 14px) !important;
    font-weight: 500 !important;
    line-height: 1.22 !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__label em {
    flex: 0 0 auto !important;
    max-width: 56% !important;
    font-size: clamp(10px, 0.56vw, 11.5px) !important;
    line-height: 1.2 !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion > p {
    padding: 0 clamp(12px, 0.88vw, 16px) clamp(8px, 0.56vw, 10px) !important;
    color: rgba(247, 239, 225, 0.6) !important;
    font-size: clamp(11px, 0.62vw, 13px) !important;
    line-height: 1.28 !important;
  }
}

/*
  T-193/T-202: standard composition frame consumers.
  The frame formula lives in portfolio-runtime.css. This file only applies
  standard widths to module containers and bridges old variable names.
*/

@media (min-width: 901px) {
  #aigc-design.portfolio-panel {
    background: #000 !important;
  }

  #aigc-design .portfolio-panel.xiaomi-accordion-stage,
  #aigc-design .xiaomi-accordion-stage__heading,
  #film-storyboard .portfolio-section__intro,
  #film-storyboard .portfolio-storyboard-strip,
  #film-storyboard .portfolio-prompt-console,
  #reality-imagination .portfolio-section__intro,
  #reality-imagination .portfolio-product-grid,
  #support .portfolio-support-panel .portfolio-section__intro,
  #support .portfolio-support-slant,
  #photo-scenes .xiaomi-dual-gallery__wrap {
    width: var(--page-standard) !important;
    max-width: var(--page-standard) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  #aigc-design .portfolio-panel.xiaomi-accordion-stage {
    grid-template-columns: minmax(0, 1fr) minmax(400px, 0.42fr) !important;
    column-gap: clamp(56px, 3.9vw, 96px) !important;
  }

  #aigc-design .xiaomi-accordion-stage__image {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  #aigc-design .xiaomi-accordion-stage__copy {
    width: min(100%, 520px) !important;
    justify-self: stretch !important;
  }

  #aigc-design .xiaomi-accordion__item,
  #aigc-design .xiaomi-accordion__item.is-active {
    background: transparent !important;
    box-shadow: none !important;
  }

  #aigc-design .xiaomi-accordion__item::before,
  #aigc-design .xiaomi-accordion__item.is-active::before {
    content: none !important;
    display: none !important;
  }

  #visual-system .xiaomi-carousel__intro {
    width: var(--page-standard) !important;
    max-width: var(--page-standard) !important;
    margin-inline: auto !important;
  }

  #visual-system.xiaomi-hover-carousel,
  #visual-system .xiaomi-carousel__viewport {
    width: 100vw !important;
    max-width: none !important;
  }

  #visual-system .xiaomi-carousel__viewport {
    margin-inline: calc(50% - 50vw) !important;
  }

  #commercial-photo .portfolio-reality-fusion__panel > .portfolio-section__intro {
    left: var(--page-standard-left) !important;
    width: min(760px, var(--page-standard)) !important;
    max-width: min(760px, var(--page-standard)) !important;
  }

  #commercial-photo .portfolio-fusion-device {
    --fusion-device-size: min(650px, calc(var(--page-standard) * 0.34), 68vh) !important;
  }

  #reality-imagination .portfolio-ai-grid-panel {
    width: 100% !important;
    max-width: none !important;
    padding-inline: 0 !important;
  }

  #reality-imagination .portfolio-product-card--hover-fusion .portfolio-product-card__media,
  #film-storyboard .portfolio-storyboard-card__media {
    aspect-ratio: 16 / 9 !important;
  }

  #photo-scenes .xiaomi-dual-gallery__wrap {
    grid-template-columns: minmax(0, 16fr) minmax(360px, 9fr) !important;
    align-items: start !important;
  }

  #photo-scenes .xiaomi-dual-gallery__big {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 16 / 9 !important;
  }

  #photo-scenes .xiaomi-dual-gallery__small {
    min-height: 0 !important;
    aspect-ratio: 1 / 1 !important;
  }
}

/*
  T-194: legacy width-token bridge.
  Many historical section rules still read --page-wide / --portfolio-profile-wide.
  Do not let those old tokens become a second layout system: on desktop they now
  resolve to the canonical frame above. Deliberate full-bleed modules keep their
  own explicit 100vw rules.
*/
@media (min-width: 901px) {
  :root {
    --page-wide: var(--page-standard);
    --portfolio-profile-wide: var(--page-standard);
    --portfolio-profile-left: var(--page-standard-left);
  }

}

/*
  T-199: support slant image coverage.
  The slanted slices clip at a larger visual angle than their rectangular image
  boxes. Give every slice and image enough horizontal overscan so no base color
  leaks through the diagonal cuts.
*/
@media (min-width: 901px) {
  #support .portfolio-support-slant {
    --support-bleed-x: clamp(96px, 4.6vw, 176px);
    --support-media-overscan-x: clamp(86px, 4vw, 156px);
    --support-media-overscan-y: 28px;
  }

  #support .portfolio-support-track {
    inset: 0 calc(-1 * (var(--support-bleed-x) + 34px)) !important;
  }

  #support .portfolio-support-slice {
    background: transparent !important;
  }

  #support .portfolio-support-slice__skew {
    inset-inline: calc(-1 * var(--support-bleed-x)) !important;
  }

  #support .portfolio-support-slice__media {
    inset:
      calc(-1 * var(--support-media-overscan-y))
      calc(-1 * (var(--support-bleed-x) + var(--support-media-overscan-x))) !important;
  }

  #support .portfolio-support-slice__media img {
    max-width: none !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
}

/*
  T-278: predeploy desktop-height fit.
  Keep the approved 2560x1440 composition intact, but let shorter desktop
  viewports keep the GAO single-screen scenes centered without vertical clipping.
*/
@media (min-width: 901px) and (max-height: 920px) {
  #other-works #other-works-posters,
  #other-works #other-works-light-table {
    min-height: 100svh !important;
    height: 100svh !important;
    padding-top: clamp(58px, 7.6svh, 78px) !important;
    padding-bottom: clamp(44px, 6.2svh, 68px) !important;
    align-content: center !important;
  }

  #other-works #other-works-posters {
    row-gap: clamp(26px, 3.6svh, 42px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__scene-copy,
  #other-works #other-works-light-table .portfolio-other-works__scene-copy {
    align-self: end !important;
  }

  #other-works #other-works-posters .portfolio-other-works__scene-copy h3,
  #other-works #other-works-light-table .portfolio-other-works__scene-copy h3 {
    font-size: clamp(2.15rem, 3.8vw, 3.65rem) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-viewport {
    min-height: 0 !important;
    height: clamp(498px, 69svh, 646px) !important;
    align-self: center !important;
    gap: clamp(12px, 1.7svh, 20px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-rail {
    block-size: clamp(344px, 48svh, 448px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-card,
  #other-works #other-works-posters .portfolio-other-works__poster-card.is-active {
    width: clamp(214px, 16.2vw, 292px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__pedestal {
    bottom: clamp(6px, 1.2svh, 12px) !important;
  }

  #other-works #other-works-light-table {
    row-gap: clamp(18px, 2.6svh, 30px) !important;
  }

  #other-works #other-works-light-table .portfolio-other-works__light-card {
    flex-basis: clamp(360px, 39vw, 704px) !important;
    gap: 10px !important;
  }

  #other-works #other-works-light-table .portfolio-other-works__light-controls {
    margin-top: clamp(-10px, -1.1svh, -4px) !important;
  }
}

@media (min-width: 901px) and (max-height: 780px) {
  #other-works #other-works-posters,
  #other-works #other-works-light-table {
    padding-top: clamp(48px, 6.7svh, 58px) !important;
    padding-bottom: clamp(34px, 5.1svh, 44px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-viewport {
    height: clamp(452px, 66svh, 514px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-rail {
    block-size: clamp(312px, 45svh, 350px) !important;
  }

  #other-works #other-works-posters .portfolio-other-works__poster-card,
  #other-works #other-works-posters .portfolio-other-works__poster-card.is-active {
    width: clamp(190px, 15.2vw, 226px) !important;
  }

  #other-works #other-works-light-table .portfolio-other-works__light-card {
    flex-basis: clamp(320px, 38vw, 520px) !important;
  }
}