.feature-visual > #feature-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #edf3fa;
}

/* Show the entire photography frame with a small black margin above and below. */
.feature-visual.photography-media { background: #000 !important; }
.feature-visual > #feature-video.is-photography {
  top: 4%;
  bottom: auto;
  height: 92%;
  object-fit: contain;
  background: #000 !important;
}

/* Preserve the existing media frame; the new posters match its desktop ratio. */
.feature-visual.ai-poster-media {
  background: transparent !important;
}
.feature-visual.ai-poster-media > #feature-image {
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  filter: saturate(.93) brightness(.97);
}

.feature-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:82px;height:82px;border:1px solid rgba(255,255,255,.75);border-radius:50%;background:rgba(255,255,255,.23);backdrop-filter:blur(8px);color:white;box-shadow:0 4px 24px rgba(0,0,0,.2);display:grid;place-items:center;cursor:pointer}
.feature-play svg{width:38px;height:38px;fill:currentColor;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35))}
.feature-play:hover{background:rgba(255,255,255,.36)}
.feature-play:focus-visible{outline:3px solid white;outline-offset:5px}
#feature-video{cursor:pointer}
@media(max-width:767px){.feature-play{width:64px;height:64px}.feature-play svg{width:30px;height:30px}}

.feature-visual > [hidden] { display: none !important; }

.portfolio-dialog {
  width: 80vw;
  height: 80dvh;
  max-width: none;
  max-height: none;
  padding: 0;
  border: 1px solid #d8e5ef;
  border-radius: 12px;
  background: #fff;
  color: #111;
  overflow: hidden;
  box-shadow: 0 30px 100px rgba(6, 9, 40, .25);
}

.portfolio-shell {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: 100%;
}

.portfolio-body { position: relative; min-height: 0; }

.portfolio-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 22px 34px 20px;
  border-bottom: 1px solid #e9edf0;
  background: #fff;
}

.portfolio-eyebrow {
  display: inline-block;
  margin-bottom: 7px;
  color: #666;
  font-size: 11px;
  letter-spacing: .03em;
}

.portfolio-header h2 {
  font-size: clamp(24px, 2.1vw, 36px);
  line-height: 1.1;
}

.portfolio-close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid #d9dee2;
  border-radius: 50%;
  background: #f7fbff;
  color: #111;
  font-family: Arial, sans-serif;
  font-size: 27px;
  line-height: 1;
  transition: background .2s, transform .2s;
}

.portfolio-close:hover { background: #d3f8fb; transform: rotate(90deg); }
.portfolio-close:focus-visible, .portfolio-scroll:focus-visible, .portfolio-scroll-track:focus-visible { outline: 3px solid #6251ed; outline-offset: -3px; }

.portfolio-scroll {
  height: 100%;
  padding-right: 15px;
  overflow-y: scroll;
  overscroll-behavior: contain;
  scrollbar-width: none;
  background: linear-gradient(#fff, #f8fcff);
}

.portfolio-scroll::-webkit-scrollbar { display: none; }
.portfolio-scroll-track {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 16px;
  border-left: 1px solid #d7dbea;
  background: #e9eaf4;
  touch-action: none;
  cursor: pointer;
}

.portfolio-scroll-thumb {
  position: absolute;
  top: 0;
  left: 2px;
  right: 2px;
  height: 60px;
  border-radius: 9px;
  background: #8279ce;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
  cursor: grab;
}

.portfolio-scroll-track:hover .portfolio-scroll-thumb, .portfolio-scroll-track:focus-visible .portfolio-scroll-thumb { background: #6251bd; }
.portfolio-scroll-track.dragging .portfolio-scroll-thumb { cursor: grabbing; background: #5545b0; }

.portfolio-loading, .portfolio-markdown {
  width: min(100%, 920px);
  margin: 0 auto;
  padding: 44px clamp(20px, 5vw, 72px) 90px;
}

.portfolio-loading { color: #666; }
.portfolio-markdown h2 { margin: 0 0 22px; font-size: clamp(29px, 3.4vw, 48px); line-height: 1.12; }
.portfolio-markdown h3 { margin: 52px 0 18px; font-size: clamp(22px, 2.2vw, 30px); }
.portfolio-markdown h4, .portfolio-markdown h5 { margin: 32px 0 14px; font-size: 19px; }
.portfolio-markdown p, .portfolio-markdown li { color: #555; font-size: 17px; line-height: 1.75; }
.portfolio-markdown p { margin: 0 0 18px; }
.portfolio-markdown ul { margin: 0 0 24px; padding-left: 1.4em; }
.portfolio-markdown li { padding-left: 4px; margin: 7px 0; }
.portfolio-markdown strong { color: #111; font-weight: 600; }
.portfolio-markdown a { color: #4e42b1; text-decoration: underline; text-underline-offset: 3px; }
.portfolio-markdown blockquote { margin: 24px 0 34px; padding: 16px 22px; background: #d4f8fb; border-left: 5px solid #9b8ff1; color: #28243f; font-size: 19px; line-height: 1.5; }
.portfolio-markdown hr { border: 0; border-top: 2px solid #eeeef5; margin: 42px 0; }
.portfolio-markdown figure { margin: 36px 0; }
.portfolio-markdown figure img, .portfolio-markdown figure video { display: block; width: 100%; height: auto; border-radius: 7px; background: #e5f3fb; }
.portfolio-markdown figcaption { margin-top: 10px; color: #777; font-size: 13px; }

@media (max-width: 767px) {
  .portfolio-dialog { border-radius: 9px; }
  .portfolio-header { padding: 17px 17px 15px; gap: 12px; }
  .portfolio-close { width: 35px; height: 35px; font-size: 23px; }
  .portfolio-loading, .portfolio-markdown { padding: 27px 18px 60px; }
  .portfolio-markdown p, .portfolio-markdown li { font-size: 15px; }
  .portfolio-markdown h3 { margin-top: 35px; }
}

@media (prefers-reduced-motion: reduce) {
  .portfolio-close { transition: none; }
}

/* Creative capability headings use the active theme, not annotation red. */
.creative-heading{display:flex;align-items:center;justify-content:center;gap:14px}
.creative-heading>svg{width:36px;height:36px;flex:none}
.section-heading>.creative-subtitle{letter-spacing:.22em;font-size:14px;margin-top:18px}
.feature-icon>svg{width:25px;height:25px;flex:none}
.feature-trigger{overflow-wrap:anywhere}.feature-icon{flex-shrink:0}
@media(max-width:767px){.creative-heading{gap:10px}.creative-heading>svg{width:28px;height:28px}.section-heading>.creative-subtitle{font-size:12px}.cloud-tabs button{font-size:clamp(14px,4.4vw,19px)}.feature-icon>svg{width:23px;height:23px}}

/* Decorative guidance aligned with each feature heading. */
.feature-item h3{display:flex;align-items:center;gap:16px}
.feature-item h3 .feature-trigger{flex:0 1 auto;width:auto;min-width:0}
.feature-more{flex:none;display:inline-flex;align-items:center;justify-content:center;padding:9px 15px;border-radius:4px;background:var(--accent,#2046ee);color:#fff;font-size:12px;font-weight:600;line-height:1.3;cursor:default}
@media(max-width:600px){.feature-item h3{gap:8px}.feature-more{font-size:10px;padding:7px 9px}}

.feature-more{display:none!important}
.feature-trigger:disabled{opacity:1;cursor:default}
.feature-libtv{display:block;width:25px;height:25px;background:currentColor;mask:url("assets/tool-libtv.png") center/contain no-repeat}
.feature-libtv{mask-mode:luminance}

.feature-libtv{width:35px;height:35px}
.feature-trigger:disabled{pointer-events:none;transform:none!important;animation:none!important;transition:none!important}
.feature-play{display:none!important}
#feature-video{pointer-events:none;cursor:default}
.feature-qqmusic{display:block;width:25px;height:25px;background:currentColor;mask:url("assets/qqmusic-installed.png") center/contain no-repeat}

.feature-watermark{--watermark-inset:clamp(14px,3%,30px);position:absolute;right:var(--watermark-inset);bottom:var(--watermark-inset);max-width:calc(100% - 2 * var(--watermark-inset));box-sizing:border-box;z-index:4;font-size:clamp(12px,1.2vw,20px);font-weight:700;line-height:1.5;text-align:right;color:rgba(255,255,255,.65);text-shadow:0 1px 3px rgba(0,0,0,.6);pointer-events:none;white-space:normal;overflow-wrap:anywhere}