#portfolio-ai-video {
  --ai-page: #f6f4ef;
  --ai-ink: #171817;
  --ai-muted: #6f706c;
  --ai-line: rgba(23, 24, 23, .16);
  --ai-soft-line: rgba(23, 24, 23, .09);
  --ai-panel: #ebe8e0;
  --ai-panel-deep: #dedbd2;
  --ai-lime: #9aaa00;
  --ai-coral: #dc6654;
  --ai-cyan: #268f9c;
  --ai-accent: var(--ai-lime);
  position: relative;
  overflow: hidden;
  color: var(--ai-ink);
  background: var(--ai-page);
  font-family: "Helvetica Neue", Arial, "Microsoft YaHei", "PingFang SC", sans-serif;
}

#portfolio-ai-video[data-ai-active="character"] { --ai-accent: var(--ai-lime); }
#portfolio-ai-video[data-ai-active="effects"] { --ai-accent: var(--ai-coral); }
#portfolio-ai-video[data-ai-active="story"] { --ai-accent: var(--ai-cyan); }

#portfolio-ai-video *,
#portfolio-ai-video *::before,
#portfolio-ai-video *::after { box-sizing: border-box; }

#portfolio-ai-video button { font: inherit; }
#portfolio-ai-video .ai-shell {
  width: min(var(--portfolio-content-max), calc(100% - (var(--portfolio-gutter) * 2)));
  margin: 0 auto;
  padding: clamp(76px, 9vw, 126px) 0 clamp(44px, 6vw, 76px);
}

#portfolio-ai-video .ai-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: clamp(38px, 5vw, 66px);
  border-bottom: 1px solid var(--ai-line);
}

#portfolio-ai-video .ai-head-copy { max-width: 700px; }
#portfolio-ai-video .ai-eyebrow,
#portfolio-ai-video .ai-section-label {
  margin: 0;
  color: var(--ai-cyan);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
  line-height: 1.3;
}

#portfolio-ai-video .ai-head h1 {
  margin: 15px 0 0;
  font-size: clamp(52px, 8vw, 112px);
  font-weight: 900;
  letter-spacing: 0;
  line-height: .92;
}

#portfolio-ai-video .ai-lede {
  max-width: 520px;
  margin: 25px 0 0;
  color: var(--ai-muted);
  font-size: clamp(15px, 1.45vw, 20px);
  font-weight: 500;
  line-height: 1.65;
}

#portfolio-ai-video .ai-head-meta {
  display: grid;
  min-width: 152px;
  gap: 7px;
  padding-bottom: 3px;
  color: var(--ai-muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .1em;
  line-height: 1.3;
  text-align: right;
}

#portfolio-ai-video .ai-head-meta strong { color: var(--ai-ink); font-size: 17px; letter-spacing: .04em; }

#portfolio-ai-video .ai-direction-system {
  margin-top: clamp(34px, 5vw, 62px);
  border-bottom: 1px solid var(--ai-line);
  padding: clamp(24px, 3vw, 38px) 0 clamp(28px, 4vw, 48px);
}

#portfolio-ai-video .ai-direction-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
}

#portfolio-ai-video .ai-direction-head h2 {
  margin: 8px 0 0;
  font-size: clamp(27px, 3.2vw, 44px);
  font-weight: 900;
  line-height: 1;
}

#portfolio-ai-video .ai-direction-meta {
  color: var(--ai-muted);
  font: 900 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

#portfolio-ai-video .ai-direction-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: clamp(20px, 2.5vw, 30px);
}

#portfolio-ai-video .ai-direction {
  position: relative;
  display: grid;
  min-width: 0;
  min-height: 76px;
  grid-template-columns: 34px 34px minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 12px;
  border: 0;
  border-bottom: 1px solid var(--ai-line);
  border-left: 3px solid var(--ai-muted);
  border-radius: 0;
  padding: 13px 14px;
  color: var(--ai-muted);
  background: transparent;
}

#portfolio-ai-video .ai-direction.is-current {
  border-left-color: var(--ai-cyan);
  color: var(--ai-ink);
  background: var(--ai-panel);
  box-shadow: inset 0 0 0 1px var(--ai-cyan);
}

#portfolio-ai-video .ai-direction-index {
  grid-column: 1;
  grid-row: 1;
  color: var(--ai-cyan);
  font: 900 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

#portfolio-ai-video .ai-direction-icon {
  display: grid;
  width: 28px;
  height: 28px;
  grid-column: 2;
  grid-row: 1;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
}

#portfolio-ai-video .ai-direction-icon svg { width: 15px; height: 15px; }

#portfolio-ai-video .ai-direction-copy {
  display: grid;
  min-width: 0;
  grid-column: 3;
  grid-row: 1;
  align-content: center;
  gap: 5px;
}

#portfolio-ai-video .ai-direction-copy strong {
  color: var(--ai-ink);
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

#portfolio-ai-video .ai-direction-copy small {
  overflow: hidden;
  color: var(--ai-muted);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#portfolio-ai-video .ai-direction-state {
  grid-column: 4;
  grid-row: 1;
  align-self: end;
  color: var(--ai-muted);
  font: 900 9px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .1em;
}

#portfolio-ai-video .ai-direction.is-current .ai-direction-state { color: var(--ai-cyan); }
#portfolio-ai-video .ai-direction[data-ai-direction="music"] { border-left-color: var(--ai-coral); }
#portfolio-ai-video .ai-direction[data-ai-direction="music"] .ai-direction-index,
#portfolio-ai-video .ai-direction[data-ai-direction="music"] .ai-direction-icon { color: var(--ai-coral); }
#portfolio-ai-video .ai-direction[data-ai-direction="image"] { border-left-color: var(--ai-lime); }
#portfolio-ai-video .ai-direction[data-ai-direction="image"] .ai-direction-index,
#portfolio-ai-video .ai-direction[data-ai-direction="image"] .ai-direction-icon { color: var(--ai-lime); }
#portfolio-ai-video .ai-direction[data-ai-direction="development"] { border-left-color: var(--ai-ink); }
#portfolio-ai-video .ai-direction[data-ai-direction="development"] .ai-direction-index,
#portfolio-ai-video .ai-direction[data-ai-direction="development"] .ai-direction-icon { color: var(--ai-ink); }

#portfolio-ai-video .ai-index-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(42px, 6vw, 78px);
  padding-bottom: 16px;
}

#portfolio-ai-video .ai-index-head h2 {
  margin: 8px 0 0;
  font-size: clamp(25px, 2.8vw, 38px);
  font-weight: 900;
  line-height: 1;
}

#portfolio-ai-video .ai-index-meta {
  color: var(--ai-muted);
  font: 900 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}

#portfolio-ai-video .ai-tabs {
  --ai-tab-position: 0;
  --ai-tab-count: 3;
  position: relative;
  display: flex;
  width: min(640px, 100%);
  min-height: 54px;
  align-items: stretch;
  gap: 4px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--ai-soft-line);
  border-radius: 999px;
  padding: 5px;
  background: var(--ai-panel-deep);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 34%), 0 8px 20px rgb(23 24 23 / 5%);
}

#portfolio-ai-video .ai-tabs::before {
  position: absolute;
  z-index: 0;
  top: 5px;
  bottom: 5px;
  left: 5px;
  width: calc((100% - 10px - ((var(--ai-tab-count) - 1) * 4px)) / var(--ai-tab-count));
  border-radius: 999px;
  background: var(--ai-ink);
  box-shadow: 0 3px 10px rgb(23 24 23 / 18%);
  content: "";
  pointer-events: none;
  transform: translateX(calc(var(--ai-tab-position) * (100% + 4px)));
  transition: transform 420ms cubic-bezier(.22, .72, .2, 1);
}

#portfolio-ai-video .ai-tab {
  position: relative;
  display: grid;
  z-index: 1;
  min-width: 0;
  min-height: 42px;
  flex: 1 1 0;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  column-gap: 8px;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  color: var(--ai-muted);
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  transition: color 220ms ease, background-color 220ms ease;
}

#portfolio-ai-video .ai-tab:hover,
#portfolio-ai-video .ai-tab:focus-visible { color: var(--ai-ink); outline: 2px solid var(--ai-cyan); outline-offset: 3px; }
#portfolio-ai-video .ai-tab:hover { color: var(--ai-ink); }
#portfolio-ai-video .ai-tab.is-active { color: #f6f4ef; }
#portfolio-ai-video .ai-tab.is-active:hover { color: #f6f4ef; }
#portfolio-ai-video .ai-tab-name { grid-column: 1; grid-row: 1; min-width: 0; }
#portfolio-ai-video .ai-tab strong { grid-column: 2; grid-row: 1; align-self: center; color: currentColor; font: 900 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; opacity: .74; }
#portfolio-ai-video .ai-tab.is-active strong { color: var(--ai-lime); opacity: 1; }

#portfolio-ai-video .ai-tab:active,
#portfolio-ai-video .ai-carousel-button:active,
#portfolio-ai-video .ai-play-command:active,
#portfolio-ai-video .ai-modal-close:active{ transform: scale(.985); }

#portfolio-ai-video .ai-workspace {
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "feature"
    "copy"
    "related";
  gap: 0;
  padding: clamp(32px, 5vw, 66px) 0 clamp(50px, 7vw, 94px);
}

#portfolio-ai-video .ai-feature {
  width: min(980px, 100%);
  min-width: 0;
  margin: 0 auto;
  grid-area: feature;
}
#portfolio-ai-video .ai-feature.is-switching { animation: ai-feature-in 520ms cubic-bezier(.22, .72, .2, 1) both; }
#portfolio-ai-video .ai-feature.is-portrait {
  min-height: 0;
  border: 1px solid var(--ai-soft-line);
  border-radius: var(--portfolio-radius-card);
  background: var(--ai-panel);
}
#portfolio-ai-video .ai-feature-trigger {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  min-height: 0;
  overflow: hidden;
  border: 0;
  border-radius: 18px;
  padding: 0;
  color: #fff;
  background: var(--ai-ink);
  cursor: pointer;
  text-align: left;
}

#portfolio-ai-video .ai-feature-trigger:focus-visible,
#portfolio-ai-video .ai-card-trigger:focus-visible,
#portfolio-ai-video .ai-play-command:focus-visible {
  outline: 3px solid var(--ai-accent);
  outline-offset: 4px;
}

#portfolio-ai-video .ai-feature-media {
  position: relative;
  display: block;
  height: 100%;
  min-height: inherit;
  overflow: hidden;
  background: var(--ai-panel-deep);
}

#portfolio-ai-video .ai-feature-video {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  object-position: var(--ai-object-position, center);
  background: var(--ai-ink);
  transition: transform 500ms cubic-bezier(.22, .72, .2, 1), filter 300ms ease;
}

#portfolio-ai-video .ai-feature-trigger:has(.ai-feature-video.is-portrait) .ai-feature-video { object-fit: contain; }
#portfolio-ai-video .ai-feature-trigger:hover .ai-feature-video,
#portfolio-ai-video .ai-feature-trigger:focus-visible .ai-feature-video { transform: scale(1.025); filter: brightness(1.06); }
#portfolio-ai-video .ai-feature.is-portrait .ai-feature-trigger {
  width: 100%;
  height: auto;
  min-height: 0;
  aspect-ratio: 16 / 9;
  margin: 0;
}
#portfolio-ai-video .ai-feature-wash { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgb(23 24 23 / 42%)); pointer-events: none; }
#portfolio-ai-video .ai-feature-play,
#portfolio-ai-video .ai-card-play {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 50%;
  color: #fff;
  background: rgb(23 24 23 / 28%);
  pointer-events: none;
  transition: transform 180ms ease, background-color 180ms ease;
}

#portfolio-ai-video .ai-feature-play { top: 50%; left: 50%; width: 58px; height: 58px; transform: translate(-50%, -50%); }
#portfolio-ai-video .ai-feature-play svg { width: 21px; height: 21px; margin-left: 3px; }
#portfolio-ai-video .ai-feature-trigger:hover .ai-feature-play,
#portfolio-ai-video .ai-feature-trigger:focus-visible .ai-feature-play { background: var(--ai-coral); transform: translate(-50%, -50%) scale(1.08); }
#portfolio-ai-video .ai-feature-media-label { position: absolute; right: 20px; bottom: 18px; left: 20px; color: rgb(255 255 255 / 84%); font: 900 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }

#portfolio-ai-video .ai-feature-copy {
  display: flex;
  width: min(980px, 100%);
  min-width: 0;
  margin: clamp(26px, 4vw, 44px) auto 0;
  grid-area: copy;
  align-self: start;
  flex-direction: column;
  justify-content: center;
  border-top: 1px solid var(--ai-line);
  padding: clamp(24px, 3vw, 34px) 0 0;
}

#portfolio-ai-video .ai-feature-copy.is-switching { animation: ai-copy-in 460ms cubic-bezier(.22, .72, .2, 1) both; }

@keyframes ai-feature-in {
  from { opacity: .2; transform: translateY(18px) scale(.988); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ai-copy-in {
  from { opacity: .2; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

#portfolio-ai-video .ai-feature-copy.is-character .ai-feature-kicker { color: var(--ai-lime); }
#portfolio-ai-video .ai-feature-copy.is-effects .ai-feature-kicker { color: var(--ai-coral); }
#portfolio-ai-video .ai-feature-copy.is-story .ai-feature-kicker { color: var(--ai-cyan); }

#portfolio-ai-video .ai-feature-kicker { margin: 0; color: var(--ai-accent); font: 900 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .1em; }
#portfolio-ai-video .ai-feature-copy h2 { margin: 16px 0 0; font-size: clamp(29px, 3.25vw, 52px); font-weight: 900; letter-spacing: 0; line-height: 1.08; }
#portfolio-ai-video .ai-feature-summary { max-width: 430px; margin: 18px 0 0; color: var(--ai-muted); font-size: 16px; font-weight: 500; line-height: 1.75; }
#portfolio-ai-video .ai-facts { display: grid; gap: 0; margin: 27px 0 0; border-top: 1px solid var(--ai-line); }
#portfolio-ai-video .ai-facts div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 13px; border-bottom: 1px solid var(--ai-soft-line); padding: 11px 0; }
#portfolio-ai-video .ai-facts dt { color: var(--ai-muted); font-size: 10px; font-weight: 900; letter-spacing: .08em; line-height: 1.5; }
#portfolio-ai-video .ai-facts dd { min-width: 0; margin: 0; color: var(--ai-ink); font-size: 12px; font-weight: 700; line-height: 1.5; }
#portfolio-ai-video .ai-tag-list { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 19px; }
#portfolio-ai-video .ai-tag-list span,
#portfolio-ai-video .ai-card-tags em { border: 1px solid var(--ai-line); border-radius: 999px; color: var(--ai-muted); font-size: 10px; font-style: normal; font-weight: 700; line-height: 1; }
#portfolio-ai-video .ai-tag-list span { padding: 7px 9px; }
#portfolio-ai-video .ai-play-command { display: inline-flex; width: fit-content; align-items: center; gap: 9px; margin-top: 27px; border: 0; border-bottom: 1px solid var(--ai-ink); padding: 0 0 7px; color: var(--ai-ink); background: transparent; cursor: pointer; font-size: 12px; font-weight: 900; }
#portfolio-ai-video .ai-play-command svg { width: 16px; height: 16px; transition: transform 180ms ease; }
#portfolio-ai-video .ai-play-command:hover svg { transform: translate(2px, -2px); }

#portfolio-ai-video .ai-works {
  width: min(980px, 100%);
  margin: clamp(28px, 4vw, 48px) auto 0;
  grid-area: related;
  border-top: 1px solid var(--ai-line);
  padding-top: clamp(22px, 3vw, 34px);
}
#portfolio-ai-video .ai-related-works { margin-top: 0; }
#portfolio-ai-video .ai-works-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
#portfolio-ai-video .ai-works-head h2 { margin: 8px 0 0; font-size: clamp(25px, 2.7vw, 38px); font-weight: 900; line-height: 1; }
#portfolio-ai-video .ai-works-tools { display: flex; align-items: center; gap: 18px; }
#portfolio-ai-video .ai-works-note { margin: 0; color: var(--ai-muted); font-size: 11px; font-weight: 700; line-height: 1.5; text-align: right; }
#portfolio-ai-video .ai-rail-controls { display: flex; gap: 7px; }
#portfolio-ai-video .ai-rail-button {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--ai-line);
  border-radius: 50%;
  color: var(--ai-ink);
  background: transparent;
  cursor: pointer;
  transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
#portfolio-ai-video .ai-rail-button:hover,
#portfolio-ai-video .ai-rail-button:focus-visible { border-color: var(--ai-accent); color: var(--ai-ink); background: var(--ai-panel); outline: none; transform: translateY(-2px); }
#portfolio-ai-video .ai-rail-button svg { width: 16px; height: 16px; }
#portfolio-ai-video .ai-related-works .ai-grid {
  display: flex;
  gap: 14px;
  justify-content: center;
  overflow-x: auto;
  padding: 2px 1px 12px;
  scroll-snap-type: x proximity;
  scrollbar-color: var(--ai-muted) transparent;
  scrollbar-width: thin;
}
#portfolio-ai-video .ai-related-works .ai-card {
  flex: 0 0 clamp(150px, 16vw, 190px);
  scroll-snap-align: start;
}
#portfolio-ai-video .ai-related-works .ai-card-trigger {
  display: block;
  width: 100%;
  border: 1px solid var(--ai-line);
  border-radius: var(--portfolio-radius-card);
  padding: 0;
  background: transparent;
}
#portfolio-ai-video .ai-related-works .ai-card-trigger:hover,
#portfolio-ai-video .ai-related-works .ai-card.is-featured .ai-card-trigger {
  border-color: var(--ai-accent);
  box-shadow: 0 8px 24px rgb(23 24 23 / 9%);
  background: var(--ai-panel);
  transform: translateY(-3px);
}
#portfolio-ai-video .ai-related-works .ai-card-media { aspect-ratio: 16 / 9; border-radius: var(--portfolio-radius-card); }
#portfolio-ai-video .ai-related-works .ai-card.is-portrait .ai-card-media { aspect-ratio: 16 / 9; }
#portfolio-ai-video .ai-related-works .ai-card-copy { min-height: 70px; gap: 5px; padding: 9px 10px 10px; }
#portfolio-ai-video .ai-related-works .ai-card-copy strong { font-size: 12px; line-height: 1.25; }
#portfolio-ai-video .ai-related-works .ai-card-copy small { font-size: 10px; }
#portfolio-ai-video .ai-related-works .ai-card-tags { gap: 5px; }
#portfolio-ai-video .ai-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
#portfolio-ai-video .ai-card { min-width: 0; }
#portfolio-ai-video .ai-card-trigger { display: block; width: 100%; overflow: hidden; border: 1px solid var(--ai-line); border-radius: var(--portfolio-radius-card); padding: 0; color: var(--ai-ink); background: transparent; cursor: pointer; text-align: left; transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease; }
#portfolio-ai-video .ai-card-trigger:hover,
#portfolio-ai-video .ai-card.is-featured .ai-card-trigger { border-color: var(--ai-accent); box-shadow: 0 8px 24px rgb(23 24 23 / 9%); transform: translateY(-3px); }
#portfolio-ai-video .ai-card-media { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--ai-panel); }
#portfolio-ai-video .ai-card.is-portrait .ai-card-media { aspect-ratio: 4 / 5; }
#portfolio-ai-video .ai-card-video { position: absolute; z-index: 1; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--ai-object-position, center); opacity: 0; transition: opacity 220ms ease, transform 400ms ease; }
#portfolio-ai-video .ai-card.is-portrait .ai-card-video { object-fit: contain; background: var(--ai-ink); }
#portfolio-ai-video .ai-card-video[data-lazy-state="loaded"] { opacity: 1; }
#portfolio-ai-video .ai-card-poster { position: absolute; inset: 0; background-position: center; background-size: cover; transition: opacity 220ms ease, transform 400ms ease; }
#portfolio-ai-video .ai-card-video[data-lazy-state="loaded"] + .ai-card-poster { opacity: 0; }
#portfolio-ai-video .ai-card:hover .ai-card-poster,
#portfolio-ai-video .ai-card:hover .ai-card-video,
#portfolio-ai-video .ai-card:focus-within .ai-card-poster,
#portfolio-ai-video .ai-card:focus-within .ai-card-video { transform: scale(1.035); }
#portfolio-ai-video .ai-card-play { top: 50%; left: 50%; width: 38px; height: 38px; transform: translate(-50%, -50%); }
#portfolio-ai-video .ai-card-play svg { width: 14px; height: 14px; margin-left: 2px; }
#portfolio-ai-video .ai-card:hover .ai-card-play,
#portfolio-ai-video .ai-card:focus-within .ai-card-play { background: var(--ai-coral); transform: translate(-50%, -50%) scale(1.08); }
#portfolio-ai-video .ai-card-trigger:active,
#portfolio-ai-video .ai-feature-trigger:active{ transform: scale(.995); }
#portfolio-ai-video .ai-card-trigger:active .ai-card-play,
#portfolio-ai-video .ai-feature-trigger:active .ai-feature-play{ transform: translate(-50%, -50%) scale(.96); }
#portfolio-ai-video .ai-card-duration { position: absolute; right: 9px; bottom: 8px; z-index: 2; border-radius: 3px; padding: 4px 5px; color: #fff; background: rgb(23 24 23 / 68%); font: 900 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; }
#portfolio-ai-video .ai-card-copy { display: grid; gap: 7px; min-height: 116px; padding: 14px 14px 15px; }
#portfolio-ai-video .ai-card-number { color: var(--ai-cyan); font: 900 10px/1 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
#portfolio-ai-video .ai-card-copy strong { display: -webkit-box; overflow: hidden; font-size: 15px; font-weight: 900; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
#portfolio-ai-video .ai-card-copy small { overflow: hidden; color: var(--ai-muted); font-size: 10px; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; }
#portfolio-ai-video .ai-card-tags { display: flex; flex-wrap: wrap; gap: 5px; }
#portfolio-ai-video .ai-card-tags em { padding: 5px 6px; }
#portfolio-ai-video .ai-footer { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: clamp(38px, 5vw, 66px); border-top: 1px solid var(--ai-line); padding-top: 17px; color: var(--ai-muted); font: 900 10px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace; letter-spacing: .08em; }
#portfolio-ai-video .ai-footer-index { color: var(--ai-ink); }

@media (max-width: 900px) {
  #portfolio-ai-video .ai-head { align-items: start; flex-direction: column; gap: 22px; }
  #portfolio-ai-video .ai-head-meta { width: 100%; grid-template-columns: repeat(3, auto); min-width: 0; text-align: left; }
  #portfolio-ai-video .ai-head-meta strong { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  #portfolio-ai-video .ai-shell { padding-top: 62px; padding-bottom: 48px; }
  #portfolio-ai-video .ai-head { padding-bottom: 36px; }
  #portfolio-ai-video .ai-head h1 { font-size: clamp(50px, 15vw, 76px); }
  #portfolio-ai-video .ai-lede { margin-top: 19px; font-size: 14px; line-height: 1.65; }
  #portfolio-ai-video .ai-head-meta { grid-template-columns: 1fr 1fr; gap: 7px 14px; font-size: 9px; }
  #portfolio-ai-video .ai-direction-system {
    margin-top: 34px;
    padding: 24px 0 28px;
  }
  #portfolio-ai-video .ai-direction-head {
    align-items: start;
    flex-direction: column;
    gap: 8px;
  }
  #portfolio-ai-video .ai-direction-head h2 { font-size: 28px; }
  #portfolio-ai-video .ai-direction-meta { font-size: 9px; }
  #portfolio-ai-video .ai-direction-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin-top: 18px;
  }
  #portfolio-ai-video .ai-direction {
    min-height: 64px;
    grid-template-columns: 26px 26px minmax(0, 1fr) auto;
    grid-template-rows: 1fr;
    column-gap: 8px;
    border-left-width: 2px;
    padding: 10px 8px;
  }
  #portfolio-ai-video .ai-direction-index { grid-column: 1; grid-row: 1; }
  #portfolio-ai-video .ai-direction-icon {
    width: 23px;
    height: 23px;
    grid-column: 2;
    grid-row: 1;
  }
  #portfolio-ai-video .ai-direction-icon svg { width: 13px; height: 13px; }
  #portfolio-ai-video .ai-direction-copy { grid-column: 3; grid-row: 1; gap: 4px; }
  #portfolio-ai-video .ai-direction-copy strong { font-size: 15px; }
  #portfolio-ai-video .ai-direction-copy small { font-size: 9px; }
  #portfolio-ai-video .ai-direction-state { grid-column: 4; grid-row: 1; font-size: 9px; }
  #portfolio-ai-video .ai-index-head {
    align-items: start;
    flex-direction: column;
    gap: 8px;
    margin-top: 42px;
    padding-bottom: 12px;
  }
  #portfolio-ai-video .ai-index-head h2 { font-size: 28px; }
  #portfolio-ai-video .ai-index-meta { font-size: 9px; }
  #portfolio-ai-video .ai-tabs {
    --ai-tab-count: 3;
    width: 100%;
    min-height: 48px;
    gap: 2px;
    padding: 4px;
  }
  #portfolio-ai-video .ai-tabs::before {
    width: calc((100% - 8px - ((var(--ai-tab-count) - 1) * 2px)) / var(--ai-tab-count));
    transform: translateX(calc(var(--ai-tab-position) * (100% + 2px)));
  }
  #portfolio-ai-video .ai-tab {
    min-width: 0;
    min-height: 38px;
    padding: 7px 8px;
    font-size: 12px;
  }
  #portfolio-ai-video .ai-workspace {
    display: grid;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "feature"
      "related"
      "copy";
    gap: 0;
    padding: 28px 0 55px;
  }
  #portfolio-ai-video .ai-feature-trigger { min-height: 0; }
  #portfolio-ai-video .ai-feature-trigger.is-landscape { aspect-ratio: 16 / 10; }
  #portfolio-ai-video .ai-feature.is-portrait { min-height: 0; padding: 0; }
  #portfolio-ai-video .ai-feature.is-portrait .ai-feature-trigger {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 16 / 9;
    margin: 0;
  }
  #portfolio-ai-video .ai-feature-copy { padding-top: 24px; }
  #portfolio-ai-video .ai-feature-copy h2 { font-size: 32px; }
  #portfolio-ai-video .ai-feature-summary { font-size: 14px; }
  #portfolio-ai-video .ai-related-works .ai-grid { justify-content: start; gap: 10px; padding-bottom: 10px; }
  #portfolio-ai-video .ai-related-works .ai-card { flex-basis: min(42vw, 180px); }
  #portfolio-ai-video .ai-card-copy { min-height: 112px; padding: 12px; }
  #portfolio-ai-video .ai-card-copy strong { font-size: 13px; }
  #portfolio-ai-video .ai-card-tags { gap: 4px; }
  #portfolio-ai-video .ai-card-tags em { font-size: 9px; }
  #portfolio-ai-video .ai-works-head { align-items: start; flex-direction: column; gap: 13px; }
  #portfolio-ai-video .ai-works-tools { width: 100%; justify-content: space-between; }
  #portfolio-ai-video .ai-works-note { text-align: left; }
  #portfolio-ai-video .ai-footer { align-items: start; flex-direction: column; gap: 8px; }
}

@media (max-width: 390px) {
  #portfolio-ai-video .ai-tab { min-height: 36px; padding: 6px 5px; font-size: 10px; }
  #portfolio-ai-video .ai-related-works .ai-card { flex-basis: min(44vw, 168px); }
  #portfolio-ai-video .ai-card-copy { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #portfolio-ai-video *,
  #portfolio-ai-video *::before,
  #portfolio-ai-video *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  #portfolio-ai-video .ai-feature-video { transform: none !important; }
}


#portfolio-ai-video .ai-workspace {
  position: relative;
  display: block;
  min-height: clamp(490px, 52vw, 690px);
  padding: clamp(30px, 4vw, 58px) 0 clamp(46px, 6vw, 78px);
}

#portfolio-ai-video .ai-carousel-stage {
  position: relative;
  width: min(980px, 100%);
  height: clamp(390px, 42vw, 560px);
  min-height: 360px;
  margin: 0 auto;
  touch-action: pan-y;
  user-select: none;
}

#portfolio-ai-video .ai-carousel-stage::before,
#portfolio-ai-video .ai-carousel-stage::after {
  display: none;
  content: none;
}

#portfolio-ai-video .ai-carousel {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(930px, 116%);
  height: min(520px, 52vw);
  min-height: 340px;
  transform: translate(-50%, -48%);
}

#portfolio-ai-video .ai-carousel.is-switching { animation: ai-carousel-switch 520ms cubic-bezier(.16, 1, .3, 1) both; }

@keyframes ai-carousel-switch {
  from { opacity: .68; }
  to { opacity: 1; }
}

#portfolio-ai-video .ai-carousel-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(160px, 17vw, 226px);
  aspect-ratio: 9 / 16;
  overflow: visible;
  border: 0;
  border-radius: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  transform-origin: center 55%;
  transition: transform 800ms cubic-bezier(.16, 1, .3, 1), opacity 520ms ease, filter 520ms ease;
  will-change: transform, opacity;
}

#portfolio-ai-video .ai-carousel-card::after {
  position: absolute;
  z-index: -1;
  right: 14%;
  bottom: 2%;
  left: 14%;
  height: 6%;
  content: "";
  border-radius: 50%;
  background: #000;
  filter: blur(14px);
  opacity: .35;
}

#portfolio-ai-video .ai-carousel-poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgb(23 24 23 / 22%);
  border-radius: 16px;
  background: var(--ai-panel-deep);
  box-shadow: 0 20px 36px rgb(23 24 23 / 18%);
}

#portfolio-ai-video .ai-carousel-poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: filter 220ms ease;
  user-select: none;
}

#portfolio-ai-video .ai-carousel-card:hover .ai-carousel-poster img,
#portfolio-ai-video .ai-carousel-card:focus-visible .ai-carousel-poster img { filter: brightness(1.08); }

#portfolio-ai-video .ai-carousel-card:focus-visible { outline: 3px solid var(--ai-accent); outline-offset: 5px; }

#portfolio-ai-video .ai-carousel-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 56px;
  height: 56px;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 84%);
  border-radius: 50%;
  color: var(--ai-ink);
  background: rgb(246 247 243 / 94%);
  box-shadow: 0 9px 30px rgb(0 0 0 / 28%);
  opacity: 0;
  transform: translate(-50%, -50%) scale(.86);
  transition: opacity 210ms ease, transform 260ms ease, background-color 180ms ease;
}

#portfolio-ai-video .ai-carousel-card[data-ai-position="0"] .ai-carousel-play,
#portfolio-ai-video .ai-carousel-card:hover .ai-carousel-play,
#portfolio-ai-video .ai-carousel-card:focus-visible .ai-carousel-play { opacity: 1; transform: translate(-50%, -50%) scale(1); }
#portfolio-ai-video .ai-carousel-card[data-ai-position="0"]:hover .ai-carousel-play { background: var(--ai-accent); }
#portfolio-ai-video .ai-carousel-play svg { width: 20px; height: 20px; margin-left: 3px; }

#portfolio-ai-video .ai-carousel-card[data-ai-position="hidden"] { z-index: 0; opacity: 0; transform: translate(0, -40%) scale(.4); pointer-events: none; }
#portfolio-ai-video .ai-carousel-card[data-ai-position="-3"] { z-index: 1; opacity: 0; transform: translate(-286%, -40%) scale(.52) rotate(-12deg); pointer-events: none; }
#portfolio-ai-video .ai-carousel-card[data-ai-position="-2"] { z-index: 2; opacity: .34; transform: translate(-205%, -46%) scale(.66) rotate(-9deg); filter: saturate(.6) brightness(.72); pointer-events: auto; }
#portfolio-ai-video .ai-carousel-card[data-ai-position="-1"] { z-index: 4; opacity: .75; transform: translate(-132%, -48%) scale(.84) rotate(-5deg); filter: saturate(.82) brightness(.86); pointer-events: auto; }
#portfolio-ai-video .ai-carousel-card[data-ai-position="0"] { z-index: 7; opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0); filter: none; pointer-events: auto; }
#portfolio-ai-video .ai-carousel-card[data-ai-position="1"] { z-index: 4; opacity: .75; transform: translate(32%, -48%) scale(.84) rotate(5deg); filter: saturate(.82) brightness(.86); pointer-events: auto; }
#portfolio-ai-video .ai-carousel-card[data-ai-position="2"] { z-index: 2; opacity: .34; transform: translate(105%, -46%) scale(.66) rotate(9deg); filter: saturate(.6) brightness(.72); pointer-events: auto; }
#portfolio-ai-video .ai-carousel-card[data-ai-position="3"] { z-index: 1; opacity: 0; transform: translate(186%, -40%) scale(.52) rotate(12deg); pointer-events: none; }

#portfolio-ai-video .ai-carousel-status {
  position: absolute;
  z-index: 8;
  bottom: 2%;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 13px;
  color: var(--ai-ink);
  font: 900 11px/1.3 ui-monospace, SFMono-Regular, Consolas, monospace;
  transform: translateX(-50%);
  white-space: nowrap;
}

#portfolio-ai-video .ai-carousel-category { color: var(--ai-muted); font-family: "Helvetica Neue", Arial, "Microsoft YaHei", sans-serif; font-weight: 700; }

#portfolio-ai-video .ai-carousel-controls {
  position: absolute;
  z-index: 9;
  top: 50%;
  right: max(18px, calc(50% - min(550px, 58vw)));
  left: max(18px, calc(50% - min(550px, 58vw)));
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}

#portfolio-ai-video .ai-carousel-button {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid var(--ai-line);
  border-radius: 50%;
  color: var(--ai-ink);
  background: rgb(255 255 255 / 52%);
  cursor: pointer;
  pointer-events: auto;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

#portfolio-ai-video .ai-carousel-button:hover,
#portfolio-ai-video .ai-carousel-button:focus-visible { color: var(--ai-ink); background: var(--ai-panel); outline: none; transform: scale(1.08); }
#portfolio-ai-video .ai-carousel-button svg { width: 18px; height: 18px; }

#portfolio-ai-video .ai-modal {
  position: fixed;
  z-index: var(--portfolio-modal-layer);
  inset: 0;
  display: grid;
  place-items: center;
  padding: 28px;
  visibility: hidden;
  background: rgb(0 0 0 / 76%);
  opacity: 0;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
}
#portfolio-ai-video .ai-modal.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity 200ms ease;
}
#portfolio-ai-video .ai-modal-content {
  position: relative;
  display: grid;
  width: min(1120px, calc(100vw - 56px));
  max-height: calc(100dvh - 56px);
  overflow: hidden;
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, .95fr);
  border: 1px solid #45474a;
  border-radius: var(--portfolio-radius-modal);
  background: #25282d;
  box-shadow: var(--portfolio-shadow-modal);
  transform: translateY(16px) scale(.985);
  transition: transform 220ms ease;
}
#portfolio-ai-video .ai-modal.is-open .ai-modal-content { transform: translateY(0) scale(1); }
#portfolio-ai-video .ai-modal-media {
  position: relative;
  display: grid;
  min-height: min(640px, calc(100dvh - 56px));
  place-items: center;
  overflow: hidden;
  background: #090a0a;
}
#portfolio-ai-video .ai-modal-info {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4vw, 54px);
  border-left: 1px solid #45474a;
  color: #f8f4ec;
  background: #25282d;
}
#portfolio-ai-video .ai-modal-kicker {
  margin: 0;
  color: #e7a15b;
  font: 900 10px/1.35 ui-monospace, SFMono-Regular, Consolas, monospace;
  letter-spacing: .08em;
}
#portfolio-ai-video .ai-modal-count {
  display: block;
  margin-top: 12px;
  color: #e7a15b;
  font: 900 11px/1 ui-monospace, SFMono-Regular, Consolas, monospace;
}
#portfolio-ai-video .ai-modal-title {
  margin: 14px 0 0;
  color: #f8f4ec;
  font-size: clamp(24px, 2.5vw, 34px);
  font-weight: 900;
  line-height: 1.2;
}
#portfolio-ai-video .ai-modal-category {
  margin: 16px 0 0;
  color: #c9c6be;
  font-size: 13px;
  font-weight: 700;
}
#portfolio-ai-video .ai-modal-video {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: calc(100dvh - 56px);
  object-fit: contain;
  background: #000;
}
#portfolio-ai-video .ai-modal-close {
  position: absolute;
  z-index: 4;
  top: 10px;
  right: 11px;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: #3b3e42;
  cursor: pointer;
  font-size: 25px;
  line-height: 1;
  transition: background-color 180ms ease, color 180ms ease, transform 180ms ease;
}
#portfolio-ai-video .ai-modal-close:hover,
#portfolio-ai-video .ai-modal-close:focus-visible {
  color: #fff;
  background: #e7a15b;
  outline: none;
  transform: rotate(90deg);
}

@media (max-width: 760px) {
  #portfolio-ai-video .ai-workspace { min-height: 420px; padding-top: 20px; padding-bottom: 48px; }
  #portfolio-ai-video .ai-carousel-stage { width: 100%; height: 360px; min-height: 330px; }
  #portfolio-ai-video .ai-carousel { width: 134vw; height: 320px; min-height: 300px; transform: translate(-50%, -48%); }
  #portfolio-ai-video .ai-carousel-card { width: min(43vw, 210px); }
  #portfolio-ai-video .ai-carousel-card[data-ai-position="-3"] { transform: translate(-235%, -40%) scale(.44) rotate(-12deg); }
  #portfolio-ai-video .ai-carousel-card[data-ai-position="-2"] { transform: translate(-180%, -46%) scale(.58) rotate(-9deg); }
  #portfolio-ai-video .ai-carousel-card[data-ai-position="-1"] { transform: translate(-111%, -48%) scale(.76) rotate(-5deg); }
  #portfolio-ai-video .ai-carousel-card[data-ai-position="1"] { transform: translate(11%, -48%) scale(.76) rotate(5deg); }
  #portfolio-ai-video .ai-carousel-card[data-ai-position="2"] { transform: translate(80%, -46%) scale(.58) rotate(9deg); }
  #portfolio-ai-video .ai-carousel-card[data-ai-position="3"] { transform: translate(135%, -40%) scale(.44) rotate(12deg); }
  #portfolio-ai-video .ai-carousel-status { bottom: 0; gap: 9px; max-width: calc(100% - 32px); overflow: hidden; }
  #portfolio-ai-video .ai-carousel-category { overflow: hidden; text-overflow: ellipsis; }
  #portfolio-ai-video .ai-carousel-controls {
    position: static;
    width: 100%;
    justify-content: center;
    gap: 11px;
    margin-top: 10px;
    transform: none;
  }
  #portfolio-ai-video .ai-carousel-button { width: 38px; height: 38px; }
  #portfolio-ai-video .ai-modal { padding: 16px; }
  #portfolio-ai-video .ai-modal-content { width: calc(100vw - 32px); max-height: calc(100dvh - 32px); grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  #portfolio-ai-video .ai-modal-media { min-height: min(58svh, 520px); }
  #portfolio-ai-video .ai-modal-video { max-height: 58svh; }
  #portfolio-ai-video .ai-modal-info { min-height: 132px; padding: 20px 22px 24px; border-top: 1px solid #45474a; border-left: 0; }
  #portfolio-ai-video .ai-modal-title { margin-top: 9px; font-size: 24px; }
  #portfolio-ai-video .ai-modal-category { margin-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #portfolio-ai-video .ai-card-trigger:active,
  #portfolio-ai-video .ai-feature-trigger:active{ transform: none; }
  #portfolio-ai-video .ai-carousel-card { transition-duration: .01ms; }
}


#portfolio-ai-video {
  --ai-jade: #3f9377;
  --ai-amber: #c1863a;
}

#portfolio-ai-video[data-ai-active="science"] { --ai-accent: var(--ai-jade); }
#portfolio-ai-video[data-ai-active="ad"] { --ai-accent: var(--ai-amber); }

#portfolio-ai-video .ai-feature-copy.is-science .ai-feature-kicker { color: var(--ai-jade); }
#portfolio-ai-video .ai-feature-copy.is-ad .ai-feature-kicker { color: var(--ai-amber); }


#portfolio-ai-video .ai-tabs {
  --ai-tab-count: 5;
  width: min(880px, 100%);
}

#portfolio-ai-video .ai-tab { padding: 8px 12px; column-gap: 7px; font-size: 13px; }
#portfolio-ai-video .ai-tab strong { font-size: 9px; letter-spacing: .02em; }

@media (max-width: 760px) {
  #portfolio-ai-video .ai-tab {
    min-height: 48px;
    padding: 6px 4px;
    column-gap: 3px;
    font-size: 11px;
    line-height: 1.18;
    text-align: center;
  }
  #portfolio-ai-video .ai-tab-name { align-self: center; }
  #portfolio-ai-video .ai-tab strong { font-size: 8px; }
}

@media (max-width: 480px) {
  #portfolio-ai-video .ai-tab { padding: 6px 3px; font-size: 10px; }
  #portfolio-ai-video .ai-tab strong { display: none; }
}

@media (max-width: 390px) {
  #portfolio-ai-video .ai-tab { min-height: 46px; padding: 6px 3px; font-size: 10px; }
}


#portfolio-ai-video {
  --ai-violet: #8a5aa8;
  --ai-olive: #5c7a45;
}

#portfolio-ai-video[data-ai-active="music"] { --ai-accent: var(--ai-violet); }
#portfolio-ai-video[data-ai-active="military"] { --ai-accent: var(--ai-olive); }

#portfolio-ai-video .ai-feature-copy.is-music .ai-feature-kicker { color: var(--ai-violet); }
#portfolio-ai-video .ai-feature-copy.is-military .ai-feature-kicker { color: var(--ai-olive); }


#portfolio-ai-video .ai-tabs {
  --ai-tab-count: 7;
  width: min(1080px, 100%);
}

#portfolio-ai-video .ai-tab { padding: 8px 10px; column-gap: 5px; font-size: 12px; }
#portfolio-ai-video .ai-tab strong { font-size: 9px; letter-spacing: .02em; }