/* JUZO 剧造官网：首页按分镜剧本排版，登录页为剪辑台。颜色全部取自 juzoTheme.css 的主题变量。 */
@property --juzoIris {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

/* ── 页面底子 ── */
.juzoSite {
  --juzoDisplay: "Noto Sans SC", var(--font-heading, system-ui), sans-serif;
  --juzoSide: clamp(20px, 4vw, 48px);
  position: relative;
  isolation: isolate;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--juzo-bg);
  color: var(--juzo-text);
  font-family: var(--font-ui, system-ui), sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* 静止的剧本纸纹理，替换原来的全屏扫描光带。 */
.juzoSite::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .4 0 0 0 0 .37 0 0 0 0 .32 0 0 0 .22 0'/></filter><rect width='140' height='140' filter='url(%23n)'/></svg>");
}

.juzoSite a {
  color: inherit;
  text-decoration: none;
}

.juzoSite ::selection {
  background: var(--juzo-action);
  color: var(--juzo-onAction);
}

.juzoSite :focus-visible,
.juzoNav :focus-visible,
.juzoFooter :focus-visible,
.juzoAuth :focus-visible {
  outline: 2px solid var(--juzo-action);
  outline-offset: 3px;
}

.juzoSite main:focus {
  outline: none;
}

.juzoSite :is(section, header)[id] {
  scroll-margin-top: 84px;
}

.juzoSite .juzoEyebrow {
  margin: 0 0 16px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .24em;
  color: var(--juzo-action);
}

/* ── 按钮 ── */
:is(.juzoSite, .juzoNav) .juzoButton,
.juzoSite .juzoButtonGhost,
.juzoSite .juzoButtonInverse {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid transparent;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

:is(.juzoSite, .juzoNav) .juzoButton {
  background: var(--juzo-action);
  color: var(--juzo-onAction);
}

:is(.juzoSite, .juzoNav) .juzoButton:hover {
  background: var(--juzo-hover);
  color: var(--juzo-onAction);
}

:is(.juzoSite, .juzoNav) .juzoButton:active {
  background: var(--juzo-pressed);
}

.juzoSite .juzoButtonGhost {
  border-color: var(--juzo-text);
  color: var(--juzo-text);
}

.juzoSite .juzoButtonGhost:hover {
  border-color: var(--juzo-action);
  color: var(--juzo-action);
}

.juzoSite .juzoButtonInverse {
  background: var(--juzo-onAction);
  color: var(--juzo-action);
}

.juzoSite .juzoButtonInverse:hover {
  background: var(--juzo-bg);
}

/* ── 导航：标志和栏目靠左，操作靠右 ── */
.juzoNav {
  position: sticky;
  top: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px var(--juzoSide, 40px);
  background: color-mix(in srgb, var(--juzo-bg) 90%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--juzo-line);
  color: var(--juzo-text);
  font-family: var(--font-ui, system-ui), sans-serif;
}

.juzoNav .juzoNavMain {
  display: flex;
  align-items: center;
  gap: 44px;
  min-width: 0;
}

.juzoNav .juzoNavBrand img {
  display: block;
  width: auto;
  height: 30px;
}

.juzoNav .juzoNavLinks {
  display: flex;
  gap: 28px;
}

.juzoNav .juzoNavLink {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 0;
  color: var(--juzo-muted);
  font-size: 14px;
  font-weight: 500;
  background: linear-gradient(var(--juzo-action), var(--juzo-action)) no-repeat left bottom / 0 2px;
  transition: color .2s ease, background-size .3s ease;
}

.juzoNav .juzoNavLink span,
.juzoNav .juzoNavDrawerLink span {
  font-size: 10px;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  opacity: .6;
}

.juzoNav .juzoNavLink:hover,
.juzoNav .juzoNavLink[aria-current="page"] {
  color: var(--juzo-text);
  background-size: 100% 2px;
}

.juzoNav .juzoNavLink[aria-current="page"] {
  font-weight: 700;
}

.juzoNav .juzoNavLink[aria-current="page"] span {
  color: var(--juzo-action);
  opacity: 1;
}

.juzoNav .juzoNavActions {
  display: flex;
  align-items: center;
  gap: 18px;
}

.juzoNav .juzoNavLogin {
  color: var(--juzo-muted);
  font-size: 14px;
  font-weight: 500;
}

.juzoNav .juzoNavLogin:hover {
  color: var(--juzo-text);
}

.juzoNav .juzoNavToggle,
.juzoNav .juzoNavDrawer {
  display: none;
}

@media (max-width: 860px) {
  .juzoNav .juzoNavLinks,
  .juzoNav .juzoNavActions {
    display: none;
  }

  .juzoNav .juzoNavToggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--juzo-line);
    border-radius: 6px;
    background: none;
    color: var(--juzo-text);
    cursor: pointer;
  }

  .juzoNav .juzoNavToggle span {
    position: relative;
    width: 20px;
    height: 14px;
  }

  .juzoNav .juzoNavToggle i {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease, top .2s ease;
  }

  .juzoNav .juzoNavToggle i:nth-child(2) {
    top: 6px;
  }

  .juzoNav .juzoNavToggle i:nth-child(3) {
    top: 12px;
  }

  .juzoNav .juzoNavToggle.isOpen i:nth-child(1) {
    top: 6px;
    transform: rotate(45deg);
  }

  .juzoNav .juzoNavToggle.isOpen i:nth-child(2) {
    opacity: 0;
  }

  .juzoNav .juzoNavToggle.isOpen i:nth-child(3) {
    top: 6px;
    transform: rotate(-45deg);
  }

  .juzoNav .juzoNavDrawer.isOpen {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px var(--juzoSide, 20px) 20px;
    background: var(--juzo-bg);
    border-bottom: 1px solid var(--juzo-line);
  }

  .juzoNav .juzoNavDrawerLink {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 12px 2px;
    border-bottom: 1px solid var(--juzo-line);
    color: var(--juzo-text);
    font-size: 16px;
  }

  .juzoNav .juzoNavDrawer .juzoButton {
    justify-content: center;
    margin-top: 12px;
  }
}

/* ── 左侧场次刻度尺 ── */
.juzoSceneRail {
  position: fixed;
  top: 50%;
  left: 14px;
  z-index: 50;
  display: grid;
  grid-template-columns: 10px auto;
  gap: 10px 12px;
  padding: 10px 12px 10px 8px;
  background: color-mix(in srgb, var(--juzo-bg) 92%, transparent);
  border: 1px solid var(--juzo-line);
  transform: translateY(-50%);
  font-size: 12px;
}

.juzoSceneRail .juzoSceneRuler {
  position: relative;
  grid-row: 1 / span 2;
  background: repeating-linear-gradient(180deg, var(--juzo-line) 0 1px, transparent 1px 8px);
}

.juzoSceneRail .juzoSceneRuler i {
  position: absolute;
  top: 0;
  left: -4px;
  right: -4px;
  height: 2px;
  background: var(--juzo-action);
}

.juzoSceneRail ol {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.juzoSceneRail a {
  display: flex;
  gap: 8px;
  color: var(--juzo-muted);
  font-weight: 500;
  white-space: nowrap;
}

.juzoSceneRail a span {
  font-size: 10px;
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}

.juzoSceneRail a:hover,
.juzoSceneRail a.isActive {
  color: var(--juzo-text);
}

.juzoSceneRail a.isActive {
  font-weight: 700;
}

.juzoSceneRail a.isActive span {
  color: var(--juzo-action);
}

.juzoSceneRail .juzoSceneCode {
  grid-column: 2;
  color: var(--juzo-muted);
  font-size: 10px;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1499px) {
  .juzoSceneRail {
    display: none;
  }
}

/* ── 片头 ── */
.juzoHero {
  position: relative;
  padding: 64px var(--juzoSide) 0;
}

.juzoHeroInner,
.juzoSectionInner {
  max-width: 1180px;
  margin: 0 auto;
}

.juzoCropMark {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid var(--juzo-text);
  animation: juzoCropIn .9s cubic-bezier(.2, .8, .2, 1) both;
}

.juzoCropMark.isTopLeft {
  top: 20px;
  left: 20px;
  border-top-width: 2px;
  border-left-width: 2px;
  --juzoFrom: -26px, -26px;
}

.juzoCropMark.isTopRight {
  top: 20px;
  right: 20px;
  border-top-width: 2px;
  border-right-width: 2px;
  --juzoFrom: 26px, -26px;
}

.juzoCropMark.isBottomLeft {
  bottom: 66px;
  left: 20px;
  border-bottom-width: 2px;
  border-left-width: 2px;
  --juzoFrom: -26px, 26px;
}

.juzoCropMark.isBottomRight {
  bottom: 66px;
  right: 20px;
  border-bottom-width: 2px;
  border-right-width: 2px;
  --juzoFrom: 26px, 26px;
}

@keyframes juzoCropIn {
  from {
    opacity: 0;
    transform: translate(var(--juzoFrom));
  }
}

.juzoHeroTitle {
  margin: 0 0 44px;
  font-family: var(--juzoDisplay);
  font-size: clamp(40px, 6.6vw, 92px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.01em;
}

.juzoHeroBrand {
  position: relative;
  display: inline-block;
  margin-left: .2em;
  color: var(--juzo-action);
  white-space: nowrap;
}

/* 朱红铅笔在「JUZO 剧造」下面划一道。 */
.juzoHeroBrand::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -.06em;
  height: .06em;
  border-radius: .03em;
  background: var(--juzo-action);
  transform: rotate(-1deg);
  transform-origin: left center;
  animation: juzoPencil .7s ease-out 1.1s both;
}

.juzoInk {
  display: inline-block;
  animation: juzoInkDrop .7s cubic-bezier(.2, .7, .2, 1) both;
  animation-delay: calc(var(--i) * 60ms);
}

@keyframes juzoInkDrop {
  from {
    opacity: 0;
    transform: translateY(.12em);
    filter: blur(4px);
  }
}

@keyframes juzoPencil {
  from {
    transform: rotate(-1deg) scaleX(0);
  }
}

.juzoHeroGrid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr) minmax(0, .85fr);
  gap: 36px;
  align-items: start;
  padding-bottom: 64px;
}

.juzoHeroIntro p {
  max-width: 34em;
  margin: 0 0 28px;
  color: var(--juzo-muted);
  font-size: 16px;
  line-height: 1.85;
}

.juzoHeroIntro :is(strong, em) {
  color: var(--juzo-text);
  font-style: normal;
  font-weight: 700;
}

.juzoHeroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

@media (max-width: 1080px) {
  .juzoHeroGrid {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  }

  .juzoHeroIntro {
    grid-column: 1 / -1;
  }
}

@media (max-width: 720px) {
  .juzoHeroGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
}

/* 循环动画在首屏离开视口时暂停。 */
.juzoHero.isPaused *,
.juzoHero.isPaused *::before,
.juzoHero.isPaused *::after {
  animation-play-state: paused !important;
}

/* ── 取景器：8 秒一循环 ── */
.juzoViewfinder {
  --juzoCycle: 8s;
  --juzoShotDark: #2b2724;
  --juzoShotRed: #7a3328;
  --juzoShotSand: #d9b48c;
  position: relative;
  margin: 0;
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-line);
}

.juzoVfBar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 9px 12px;
  border-bottom: 1px solid var(--juzo-line);
  color: var(--juzo-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}

.juzoTally {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--juzo-action);
}

.juzoTally i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--juzo-action);
  animation: juzoBreathe 2.4s ease-in-out infinite;
}

@keyframes juzoBreathe {
  50% {
    opacity: .35;
  }
}

.juzoVfStage {
  position: relative;
  height: 360px;
  overflow: hidden;
  background:
    linear-gradient(var(--juzo-line), var(--juzo-line)) 33.33% 0 / 1px 100% no-repeat,
    linear-gradient(var(--juzo-line), var(--juzo-line)) 66.66% 0 / 1px 100% no-repeat,
    linear-gradient(90deg, var(--juzo-line), var(--juzo-line)) 0 33.33% / 100% 1px no-repeat,
    linear-gradient(90deg, var(--juzo-line), var(--juzo-line)) 0 66.66% / 100% 1px no-repeat,
    var(--juzo-bg);
}

.juzoVfCorner {
  position: absolute;
  z-index: 6;
  width: 18px;
  height: 18px;
  border: 0 solid var(--juzo-text);
}

.juzoVfCorner.isTopLeft { top: 12px; left: 12px; border-top-width: 2px; border-left-width: 2px; }
.juzoVfCorner.isTopRight { top: 12px; right: 12px; border-top-width: 2px; border-right-width: 2px; }
.juzoVfCorner.isBottomLeft { bottom: 12px; left: 12px; border-bottom-width: 2px; border-left-width: 2px; }
.juzoVfCorner.isBottomRight { bottom: 12px; right: 12px; border-bottom-width: 2px; border-right-width: 2px; }

.juzoVfRead {
  position: absolute;
  z-index: 7;
  color: var(--juzo-muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  font-variant-numeric: tabular-nums;
}

.juzoVfRead b {
  color: var(--juzo-action);
}

.juzoVfRead.isTopLeft { top: 16px; left: 38px; }
.juzoVfRead.isTopRight { top: 16px; right: 38px; }
.juzoVfRead.isBottomLeft { bottom: 16px; left: 38px; }
.juzoVfRead.isBottomRight { bottom: 16px; right: 38px; }

/* 静止画面（减弱动态时）停在「光圈已打开」这一帧。 */
.juzoVfScript {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  width: 236px;
  padding: 16px 18px;
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-line);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .35);
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: juzoVfScript var(--juzoCycle) linear infinite;
}

.juzoVfScript p {
  margin: 0;
}

.juzoVfSlug {
  color: var(--juzo-action);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .16em;
}

.juzoVfLine {
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--juzoDisplay);
  font-size: 15px;
  font-weight: 700;
}

.juzoVfLine.isFirst { animation: juzoType1 var(--juzoCycle) infinite; }
.juzoVfLine.isSecond { animation: juzoType2 var(--juzoCycle) infinite; }

.juzoVfLine.isThird {
  color: var(--juzo-muted);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  animation: juzoType3 var(--juzoCycle) infinite;
}

@keyframes juzoVfScript {
  0% { opacity: 0; transform: translate(-50%, -46%); }
  3%, 29% { opacity: 1; transform: translate(-50%, -50%); }
  35%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.96); }
}

@keyframes juzoType1 {
  0%, 4% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(7); }
  13%, 100% { clip-path: inset(0); }
}

@keyframes juzoType2 {
  0%, 13% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(12); }
  24%, 100% { clip-path: inset(0); }
}

@keyframes juzoType3 {
  0%, 24% { clip-path: inset(0 100% 0 0); animation-timing-function: steps(9); }
  29%, 100% { clip-path: inset(0); }
}

/* Z 字角度的折线把剧本切开。 */
.juzoVfCut {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 3;
  width: 320px;
  height: 2px;
  background: var(--juzo-action);
  opacity: 0;
  transform-origin: left center;
  animation: juzoVfCut var(--juzoCycle) infinite;
}

@keyframes juzoVfCut {
  0%, 28% { opacity: 0; transform: translate(-50%, -50%) rotate(-32deg) scaleX(0); }
  30% { opacity: 1; transform: translate(-50%, -50%) rotate(-32deg) scaleX(0); }
  34% { opacity: 1; transform: translate(-50%, -50%) rotate(-32deg) scaleX(1); }
  38%, 100% { opacity: 0; transform: translate(-50%, -50%) rotate(-32deg) scaleX(1); }
}

.juzoVfBoard {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
}

.juzoVfPanel {
  grid-area: 1 / 1;
  display: grid;
  grid-template-rows: 1fr auto;
  width: 96px;
  height: 124px;
  background: var(--juzo-panel);
  border: 1.5px solid var(--juzo-text);
  opacity: 0;
}

.juzoVfPanel svg {
  width: 100%;
  height: 100%;
}

.juzoVfPanel span {
  padding: 2px 6px;
  border-top: 1px solid var(--juzo-line);
  color: var(--juzo-muted);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.juzoVfPanel :is(path, circle) {
  fill: none;
  stroke: var(--juzo-text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-dasharray: 160;
  animation: juzoVfSketch var(--juzoCycle) infinite;
}

.juzoVfPanel .isAccent {
  stroke: var(--juzo-action);
}

.juzoVfPanel.isLeft { animation: juzoVfPanelLeft var(--juzoCycle) infinite; }
.juzoVfPanel.isCenter { animation: juzoVfPanelCenter var(--juzoCycle) infinite; }
.juzoVfPanel.isRight { animation: juzoVfPanelRight var(--juzoCycle) infinite; }

@keyframes juzoVfPanelLeft {
  0%, 33% { opacity: 0; transform: none; }
  40%, 57% { opacity: 1; transform: translateX(-108px) rotate(-2deg); }
  62%, 100% { opacity: 0; transform: scale(.8); }
}

@keyframes juzoVfPanelCenter {
  0%, 33% { opacity: 0; transform: translateY(8px); }
  40%, 57% { opacity: 1; transform: none; }
  62%, 100% { opacity: 0; transform: scale(.8); }
}

@keyframes juzoVfPanelRight {
  0%, 33% { opacity: 0; transform: none; }
  40%, 57% { opacity: 1; transform: translateX(108px) rotate(2deg); }
  62%, 100% { opacity: 0; transform: scale(.8); }
}

@keyframes juzoVfSketch {
  0%, 40% { stroke-dashoffset: 160; }
  52%, 100% { stroke-dashoffset: 0; }
}

/* 八边光圈：JUZO 里的 O。 */
.juzoVfFilm {
  --juzoIris: 190px;
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  width: 150px;
  height: 266px;
  transform: translate(-50%, -50%);
  clip-path: polygon(calc(50% - var(--juzoIris) * .4142) calc(50% - var(--juzoIris)), calc(50% + var(--juzoIris) * .4142) calc(50% - var(--juzoIris)), calc(50% + var(--juzoIris)) calc(50% - var(--juzoIris) * .4142), calc(50% + var(--juzoIris)) calc(50% + var(--juzoIris) * .4142), calc(50% + var(--juzoIris) * .4142) calc(50% + var(--juzoIris)), calc(50% - var(--juzoIris) * .4142) calc(50% + var(--juzoIris)), calc(50% - var(--juzoIris)) calc(50% + var(--juzoIris) * .4142), calc(50% - var(--juzoIris)) calc(50% - var(--juzoIris) * .4142));
  animation: juzoVfIris var(--juzoCycle) infinite;
}

@keyframes juzoVfIris {
  0%, 58% { --juzoIris: 0px; animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  70%, 84% { --juzoIris: 190px; animation-timing-function: cubic-bezier(.6, 0, .2, 1); }
  91%, 100% { --juzoIris: 0px; }
}

.juzoVfShot {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--juzoShotDark) 0%, var(--juzoShotDark) 38%, var(--juzoShotRed) 72%, var(--juzoShotSand) 100%);
  animation: juzoVfDolly var(--juzoCycle) infinite;
}

@keyframes juzoVfDolly {
  0%, 60% { transform: scale(1); }
  88%, 100% { transform: scale(1.08); }
}

.juzoVfShot i {
  position: absolute;
}

.juzoVfShot .isSun {
  top: 60%;
  left: 50%;
  width: 64px;
  height: 64px;
  margin-left: -32px;
  border-radius: 50%;
  background: var(--juzoShotSand);
  opacity: .85;
}

.juzoVfShot .isGround {
  left: 0;
  right: 0;
  bottom: 0;
  height: 30%;
  background: var(--juzoShotDark);
}

.juzoVfShot .isFigure {
  left: 58%;
  bottom: 28%;
  width: 14px;
  height: 44px;
  border-radius: 7px 7px 2px 2px;
  background: var(--juzoShotDark);
}

.juzoVfShot .isFigure::before {
  content: "";
  position: absolute;
  top: -13px;
  left: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--juzoShotDark);
}

.juzoVfShot .isRain {
  inset: 0;
  background: repeating-linear-gradient(105deg, transparent 0 9px, rgba(255, 255, 255, .12) 9px 10px);
}

.juzoVfLetterbox {
  position: absolute;
  left: 0;
  right: 0;
  height: 10%;
  background: #000;
  opacity: .55;
}

.juzoVfLetterbox.isTop { top: 0; }
.juzoVfLetterbox.isBottom { bottom: 0; }

.juzoVfFilmCode {
  position: absolute;
  left: 8px;
  bottom: 12%;
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  opacity: .85;
}

.juzoVfStamp {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 5;
  padding: 2px 14px;
  border: 3px solid var(--juzo-action);
  color: var(--juzo-action);
  font-family: var(--juzoDisplay);
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .1em;
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-8deg);
  animation: juzoVfStamp var(--juzoCycle) infinite;
}

@keyframes juzoVfStamp {
  0%, 89% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1.6); }
  92%, 98% { opacity: 1; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(-8deg) scale(1); }
}

/* 胶带便签：贴在取景器边上，跟着进度依次出现。 */
.juzoNote {
  position: absolute;
  z-index: 8;
  margin: 0;
  padding: 6px 12px;
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-line);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .4);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.juzoNote::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 34px;
  height: 12px;
  margin-left: -17px;
  background: var(--juzo-selected);
  opacity: .9;
  transform: rotate(-3deg);
}

.juzoNote b {
  color: var(--juzo-success);
}

.juzoNote.isScript {
  top: 92px;
  left: -16px;
  rotate: -3deg;
  animation: juzoNoteScript var(--juzoCycle) infinite;
}

.juzoNote.isBoard {
  top: 176px;
  right: -16px;
  rotate: 2deg;
  animation: juzoNoteBoard var(--juzoCycle) infinite;
}

.juzoNote.isExport {
  bottom: 74px;
  left: -12px;
  rotate: -2deg;
  background: var(--juzo-action);
  border-color: var(--juzo-action);
  color: var(--juzo-onAction);
  animation: juzoNoteExport var(--juzoCycle) infinite;
}

@keyframes juzoNoteScript {
  0%, 26% { opacity: 0; translate: -10px 0; }
  30%, 96% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; }
}

@keyframes juzoNoteBoard {
  0%, 52% { opacity: 0; translate: 10px 0; }
  56%, 96% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; }
}

@keyframes juzoNoteExport {
  0%, 74% { opacity: 0; translate: -10px 0; }
  78%, 96% { opacity: 1; translate: 0 0; }
  100% { opacity: 0; }
}

@media (max-width: 720px) {
  .juzoNote.isScript,
  .juzoNote.isExport {
    left: 8px;
  }

  .juzoNote.isBoard {
    right: 8px;
  }
}

/* ── 场记单：跟取景器同一节拍依次填满 ── */
.juzoShotLog {
  padding-top: 10px;
  border-top: 2px solid var(--juzo-text);
}

.juzoShotLogHead {
  display: flex;
  justify-content: space-between;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.juzoShotLog ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.juzoShotRow {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 16px;
  gap: 6px 8px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--juzo-line);
}

.juzoShotNo {
  color: var(--juzo-muted);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.juzoShotTitle {
  font-size: 14px;
  font-weight: 700;
}

.juzoShotTitle small {
  margin-left: 8px;
  color: var(--juzo-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}

.juzoShotTick {
  color: var(--juzo-success);
  font-weight: 700;
}

.juzoShotTrack {
  position: relative;
  grid-column: 1 / -1;
  height: 3px;
  overflow: hidden;
  background: var(--juzo-soft);
}

.juzoShotTrack i {
  position: absolute;
  inset: 0;
  background: var(--juzo-action);
  transform-origin: left;
}

.juzoShotRow:nth-child(1) i { animation: juzoFill1 8s infinite; }
.juzoShotRow:nth-child(1) .juzoShotTick { animation: juzoTick1 8s infinite; }
.juzoShotRow:nth-child(2) i { animation: juzoFill2 8s infinite; }
.juzoShotRow:nth-child(2) .juzoShotTick { animation: juzoTick2 8s infinite; }
.juzoShotRow:nth-child(3) i { animation: juzoFill3 8s infinite; }
.juzoShotRow:nth-child(3) .juzoShotTick { animation: juzoTick3 8s infinite; }
.juzoShotRow:nth-child(4) i { animation: juzoFill4 8s infinite; }
.juzoShotRow:nth-child(4) .juzoShotTick { animation: juzoTick4 8s infinite; }
.juzoShotRow:nth-child(5) i { animation: juzoFill5 8s infinite; }
.juzoShotRow:nth-child(5) .juzoShotTick { animation: juzoTick5 8s infinite; }
.juzoShotRow:nth-child(6) i { animation: juzoFill6 8s infinite; }
.juzoShotRow:nth-child(6) .juzoShotTick { animation: juzoTick6 8s infinite; }

@keyframes juzoFill1 { 0% { transform: scaleX(0); } 28%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes juzoTick1 { 0%, 28% { opacity: 0; } 30%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes juzoFill2 { 0%, 30% { transform: scaleX(0); } 40%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes juzoTick2 { 0%, 40% { opacity: 0; } 42%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes juzoFill3 { 0%, 40% { transform: scaleX(0); } 56%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes juzoTick3 { 0%, 56% { opacity: 0; } 58%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes juzoFill4 { 0%, 58% { transform: scaleX(0); } 72%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes juzoTick4 { 0%, 72% { opacity: 0; } 74%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes juzoFill5 { 0%, 72% { transform: scaleX(0); } 82%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes juzoTick5 { 0%, 82% { opacity: 0; } 84%, 97% { opacity: 1; } 100% { opacity: 0; } }
@keyframes juzoFill6 { 0%, 82% { transform: scaleX(0); } 90%, 97% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes juzoTick6 { 0%, 90% { opacity: 0; } 92%, 97% { opacity: 1; } 100% { opacity: 0; } }

.juzoHeroStats {
  margin: 14px 0 0;
  color: var(--juzo-muted);
  font-size: 13px;
}

.juzoHeroStats b {
  color: var(--juzo-text);
  font-variant-numeric: tabular-nums;
}

/* ── 胶片信息条：每 2.4 秒拉一格 ── */
.juzoFilmStrip {
  position: relative;
  height: 46px;
  overflow: hidden;
  background: #242522;
  color: #f4f1ea;
}

.juzoHero .juzoFilmStrip {
  margin-inline: calc(var(--juzoSide) * -1);
}

.juzoFilmStrip::before,
.juzoFilmStrip::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  z-index: 2;
  height: 5px;
  background: repeating-linear-gradient(90deg, transparent 0 6px, var(--juzo-bg) 6px 12px, transparent 12px 18px);
}

.juzoFilmStrip::before { top: 3px; }
.juzoFilmStrip::after { bottom: 3px; }

.juzoFilmReel {
  position: absolute;
  top: 14px;
  left: 0;
  display: flex;
}

.juzoFilmFrame {
  flex: none;
  width: 240px;
  padding: 0 14px;
  overflow: hidden;
  border-right: 1px solid rgba(244, 241, 234, .22);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  line-height: 18px;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── 每一场的开头 ── */
.juzoSection {
  padding: 104px var(--juzoSide);
  border-top: 1px solid var(--juzo-line);
}

.juzoSlate {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  color: var(--juzo-action);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.juzoSlate .juzoSlateScene {
  padding: 3px 9px;
  border: 1.5px solid var(--juzo-text);
  color: var(--juzo-text);
  letter-spacing: .08em;
}

.juzoSectionTitle {
  margin: 0 0 14px;
  font-family: var(--juzoDisplay);
  font-size: clamp(30px, 3.6vw, 48px);
  font-weight: 900;
  line-height: 1.2;
  text-wrap: balance;
}

.juzoSectionLead {
  max-width: 42em;
  margin: 0 0 44px;
  color: var(--juzo-muted);
  font-size: 16px;
}

/* ── 全流程：一整排六格分镜 ── */
.juzoBoard {
  overflow-x: auto;
  padding-bottom: 8px;
  scroll-snap-type: x mandatory;
}

.juzoBoardTimeline,
.juzoBoardFrames {
  min-width: 1126px;
}

.juzoBoardTimeline {
  position: relative;
  height: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--juzo-line);
  background: repeating-linear-gradient(90deg, var(--juzo-muted) 0 1px, transparent 1px 12px) left bottom / 100% 7px no-repeat;
  opacity: .9;
}

.juzoBoardTimeline i {
  position: absolute;
  top: -4px;
  bottom: -4px;
  left: 0;
  width: 2px;
  background: var(--juzo-action);
  animation: juzoPlayhead 7s linear infinite;
}

.juzoBoardTimeline i::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  border: 5px solid transparent;
  border-top-color: var(--juzo-action);
}

@keyframes juzoPlayhead {
  from { left: 0; }
  to { left: 100%; }
}

.juzoBoardFrames {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.juzoFrame {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 12px 16px;
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-line);
  scroll-snap-align: start;
}

.juzoFrame p,
.juzoFrame h3 {
  margin: 0;
}

.juzoFrameNo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--juzo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

.juzoFrameNo span:first-child {
  color: var(--juzo-text);
}

.juzoFrameNo em {
  margin-left: auto;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--juzo-action);
  color: var(--juzo-onAction);
  font-size: 10px;
  font-style: normal;
}

.juzoFrameSketch {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--juzo-bg);
  border: 1px solid var(--juzo-text);
}

.juzoFrameSketch path {
  fill: none;
  stroke: var(--juzo-text);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}

.juzoFrameSketch .isAccent {
  stroke: var(--juzo-action);
}

.juzoBoard.isPlaying .juzoFrameSketch path {
  animation: juzoSketch 1.1s ease-out both;
  animation-delay: calc(var(--frame) * 140ms);
}

@keyframes juzoSketch {
  from { stroke-dashoffset: 1; }
}

.juzoFrame h3 {
  font-size: 18px;
  font-weight: 800;
}

.juzoFrame p:last-child {
  color: var(--juzo-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* ── 导演台：居中的剧本纸 + 右侧朱红批注 ── */
.juzoDesk {
  display: grid;
  grid-template-columns: minmax(0, 760px) minmax(0, 260px);
  gap: 40px;
  justify-content: center;
  align-items: start;
  margin-top: 36px;
}

@media (max-width: 960px) {
  .juzoDesk {
    grid-template-columns: minmax(0, 1fr);
  }
}

.juzoScriptPage {
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-line);
  box-shadow: 0 24px 48px -36px rgba(36, 37, 34, .45);
}

.juzoScriptPage p {
  margin: 0;
}

.juzoAgentTabs {
  display: flex;
  overflow-x: auto;
  border-bottom: 1px solid var(--juzo-line);
}

.juzoAgentTabs button {
  flex: 1 0 auto;
  padding: 14px 18px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  color: var(--juzo-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.juzoAgentTabs button:hover {
  color: var(--juzo-text);
}

.juzoAgentTabs button[aria-selected="true"] {
  border-bottom-color: var(--juzo-action);
  color: var(--juzo-text);
}

.juzoAgentPanel {
  padding: 18px 28px 0;
}

.juzoAgentCode,
.juzoScriptLabel {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px !important;
  color: var(--juzo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.juzoAgentCode span:last-child,
.juzoScriptStatus.isDone {
  color: var(--juzo-success);
}

.juzoScriptStatus.isWorking {
  color: var(--juzo-action);
}

.juzoAgentTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px !important;
}

.juzoAgentTags span {
  padding: 4px 10px;
  border: 1px solid var(--juzo-line);
  border-radius: 4px;
  background: var(--juzo-bg);
  font-size: 13px;
}

.juzoAgentNote {
  color: var(--juzo-muted);
  font-size: 13px;
  line-height: 1.7;
}

.juzoScriptBlock {
  margin: 18px 28px 0;
  padding-top: 16px;
  border-top: 1px dashed var(--juzo-line);
}

.juzoScriptRaw {
  min-height: 1.6em;
  font-family: var(--juzoDisplay);
  font-size: 20px;
  font-weight: 700;
}

.juzoCaret {
  display: inline-block;
  width: 2px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -.12em;
  background: var(--juzo-action);
  animation: juzoCaret 1s steps(1) infinite;
}

@keyframes juzoCaret {
  50% { opacity: 0; }
}

.juzoTokens {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px !important;
}

.juzoTokens span {
  padding: 3px 9px;
  border-radius: 4px;
  background: var(--juzo-selected);
  color: var(--juzo-action);
  font-size: 12px;
  font-weight: 600;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .3s ease, transform .3s ease;
}

.juzoProse {
  margin-bottom: 14px !important;
  font-size: 15px;
  line-height: 1.9;
  clip-path: inset(0 100% 0 0);
}

.juzoProse b {
  color: var(--juzo-action);
  font-weight: 600;
}

.juzoScriptBlock.isDone .juzoTokens span {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 110ms);
}

.juzoScriptBlock.isDone .juzoProse {
  clip-path: inset(0);
  transition: clip-path 1.15s steps(20, end) .35s;
}

.juzoAxes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--juzo-muted);
  font-size: 12px;
}

.juzoAxes span:first-child {
  font-weight: 700;
  letter-spacing: .1em;
}

.juzoAxes span.isActive {
  color: var(--juzo-action);
  font-weight: 700;
}

.juzoAxes span:last-child {
  margin-left: auto;
  color: var(--juzo-text);
}

.juzoScriptFoot {
  margin-top: 22px !important;
  padding: 12px 28px;
  border-top: 1px solid var(--juzo-line);
  color: var(--juzo-muted);
  font-size: 11px;
  letter-spacing: .1em;
}

.juzoMarginNote {
  position: sticky;
  top: 110px;
  padding: 4px 0 4px 16px;
  border-left: 2px solid var(--juzo-action);
}

.juzoMarginNote p {
  margin: 0 0 16px;
  color: var(--juzo-action);
  font-size: 15px;
  line-height: 1.85;
}

.juzoSite .juzoMarginNote a {
  color: var(--juzo-action);
  font-size: 14px;
  font-weight: 700;
}

/* ── 正在上映：顶部分类 + 本周首映大图 ── */
.juzoGenreTabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 12px;
}

.juzoGenreTabs button {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--juzo-line);
  border-radius: 4px;
  background: var(--juzo-panel);
  color: var(--juzo-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.juzoGenreTabs small {
  font-size: 10px;
  letter-spacing: .1em;
  opacity: .7;
}

.juzoGenreTabs button:hover {
  color: var(--juzo-text);
}

.juzoGenreTabs button[aria-pressed="true"] {
  border-color: var(--juzo-action);
  background: var(--juzo-selected);
  color: var(--juzo-action);
}

.juzoShowcaseCount,
.juzoShowcaseNote {
  margin: 0 0 22px;
  color: var(--juzo-muted);
  font-size: 12px;
}

.juzoShowcaseNote {
  margin: 22px 0 0;
}

.juzoPosterGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.juzoPoster {
  position: relative;
  aspect-ratio: 9 / 16;
  outline-offset: 6px;
}

.juzoPoster.isFeatured {
  grid-column: span 2;
  grid-row: span 2;
  aspect-ratio: auto;
}

.juzoPosterFrame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--juzo-rail);
  border: 1px solid var(--juzo-line);
}

.juzoPosterFrame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(.2, .7, .2, 1);
}

.juzoPoster:is(:hover, :focus-visible) img {
  transform: scale(1.06);
}

.juzoPosterCaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: grid;
  gap: 3px;
  padding: 44px 12px 12px;
  background: linear-gradient(transparent, rgba(12, 13, 12, .84));
  color: #fff;
}

/* 海报自带片名，说明只在悬停或聚焦时出现；触屏没有悬停，保持常显。 */
@media (hover: hover) {
  .juzoPosterCaption {
    opacity: 0;
    transition: opacity .25s ease;
  }

  .juzoPoster:is(:hover, :focus-visible) .juzoPosterCaption {
    opacity: 1;
  }
}

.juzoPosterCaption small {
  font-size: 10px;
  letter-spacing: .08em;
  opacity: .8;
}

.juzoPosterCaption strong {
  justify-self: start;
  padding-bottom: 3px;
  background: linear-gradient(var(--juzo-action), var(--juzo-action)) no-repeat left bottom / 0 2px;
  font-size: 14px;
  font-weight: 700;
  transition: background-size .4s ease;
}

.juzoPoster:is(:hover, :focus-visible) .juzoPosterCaption strong {
  background-size: 100% 2px;
}

.juzoPoster.isFeatured .juzoPosterCaption {
  padding: 96px 20px 20px;
}

.juzoPoster.isFeatured .juzoPosterCaption strong {
  font-size: 26px;
}

.juzoPosterCorner {
  position: absolute;
  z-index: 2;
  width: 12px;
  height: 12px;
  border: 0 solid var(--juzo-action);
  opacity: 0;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}

.juzoPosterCorner.isTopLeft { top: -7px; left: -7px; border-top-width: 2px; border-left-width: 2px; transform: translate(-6px, -6px); }
.juzoPosterCorner.isTopRight { top: -7px; right: -7px; border-top-width: 2px; border-right-width: 2px; transform: translate(6px, -6px); }
.juzoPosterCorner.isBottomLeft { bottom: -7px; left: -7px; border-bottom-width: 2px; border-left-width: 2px; transform: translate(-6px, 6px); }
.juzoPosterCorner.isBottomRight { bottom: -7px; right: -7px; border-bottom-width: 2px; border-right-width: 2px; transform: translate(6px, 6px); }

.juzoPoster:is(:hover, :focus-visible) .juzoPosterCorner {
  opacity: 1;
  transform: none;
}

.juzoSite .juzoPosterMore {
  display: grid;
  grid-column: span 2;
  place-items: center;
  border: 1px dashed var(--juzo-line);
  color: var(--juzo-action);
  font-size: 14px;
  font-weight: 700;
}

.juzoSite .juzoPosterMore:hover {
  border-color: var(--juzo-action);
}

@media (max-width: 960px) {
  .juzoPosterGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .juzoPosterGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .juzoPoster.isFeatured .juzoPosterCaption strong {
    font-size: 20px;
  }
}

/* ── 片尾号召：左对齐大字 + 场记板 ── */
.juzoCta {
  padding: 96px var(--juzoSide);
  background: var(--juzo-action);
  color: var(--juzo-onAction);
}

.juzoCtaInner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 48px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
}

.juzoCta .juzoEyebrow {
  color: inherit;
  opacity: .8;
}

.juzoCtaText h2 {
  margin: 0 0 16px;
  font-family: var(--juzoDisplay);
  font-size: clamp(44px, 7vw, 104px);
  font-weight: 900;
  line-height: 1.05;
}

.juzoCtaText > p:not(.juzoEyebrow) {
  margin: 0 0 30px;
  font-size: 18px;
  opacity: .9;
}

.juzoClapper {
  width: clamp(160px, 22vw, 280px);
  height: auto;
  overflow: visible;
}

.juzoClapper :is(.juzoClapperBoard, .juzoClapperStick rect) {
  fill: var(--juzo-onAction);
}

.juzoClapperStick path,
.juzoClapper text {
  fill: var(--juzo-action);
}

.juzoClapper text {
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: 7px;
  font-weight: 800;
  letter-spacing: .08em;
}

.juzoClapperStick {
  transform-origin: 2px 20px;
}

.juzoCtaInner.isPlaying .juzoClapperStick {
  animation: juzoClap .9s cubic-bezier(.6, 0, .4, 1.4) both;
}

.juzoCtaInner.isPlaying .juzoCtaText h2 {
  animation: juzoInkDrop .6s ease-out .75s both;
}

@keyframes juzoClap {
  0%, 55% { transform: rotate(-28deg); }
  75% { transform: rotate(0); }
  85% { transform: rotate(-4deg); }
  100% { transform: rotate(0); }
}

@media (max-width: 720px) {
  .juzoCtaInner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ── 片尾字幕式页脚 ── */
.juzoFooter {
  padding: 72px var(--juzoSide, 40px) 32px;
  border-top: 1px solid var(--juzo-line);
  background: var(--juzo-bg);
  color: var(--juzo-text);
  font-family: var(--font-ui, system-ui), sans-serif;
  text-align: center;
}

.juzoFooter .juzoFooterMark {
  display: block;
  width: auto;
  height: 40px;
  margin: 0 auto 18px;
}

.juzoFooter .juzoFooterLine {
  max-width: 34em;
  margin: 0 auto 8px;
  color: var(--juzo-muted);
  font-size: 14px;
  line-height: 1.8;
}

.juzoFooter .juzoFooterTag {
  margin: 0 0 40px;
  color: var(--juzo-muted);
  font-size: 10px;
  letter-spacing: .2em;
}

/* 每组像片尾字幕：小号职位居中在上，名单居中在下，整块与标志同一条中线。 */
.juzoFooter .juzoCredits {
  display: grid;
  gap: 24px;
  max-width: 760px;
  margin: 0 auto 48px;
}

.juzoFooter .juzoCreditRow {
  display: grid;
  justify-items: center;
  gap: 8px;
}

.juzoFooter dt {
  color: var(--juzo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
  text-align: center;
}

.juzoFooter dd {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px 20px;
  margin: 0;
  font-size: 14px;
  text-align: center;
}

.juzoFooter dd a {
  color: var(--juzo-text);
}

.juzoFooter dd a:hover,
.juzoFooter dd a[aria-current="page"] {
  color: var(--juzo-action);
}

.juzoFooter .juzoFooterBase {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  padding-top: 22px;
  border-top: 1px solid var(--juzo-line);
  color: var(--juzo-muted);
  font-size: 12px;
}

.juzoFooter .juzoFooterBase a {
  color: inherit;
}

/* ── 登录页：左边剧本纸写字，右边监视器看片 ── */
.juzoAuth {
  --juzoDisplay: "Noto Sans SC", var(--font-heading, system-ui), sans-serif;
  position: relative;
  display: grid;
  grid-template-columns: minmax(380px, 4fr) minmax(0, 6fr);
  min-height: 100svh;
  background: var(--juzo-bg);
  color: var(--juzo-text);
}

.juzoAuthPaper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: 34px clamp(24px, 5vw, 72px);
}

.juzoAuthBrand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.juzoAuthBrand img {
  width: auto;
  height: 36px;
}

.juzoAuthBrand span {
  color: var(--juzo-muted);
  font-size: 10px;
  letter-spacing: .18em;
}

.juzoAuthForm {
  width: 100%;
  max-width: 380px;
  margin: 0 auto;
}

.juzoAuthMotto {
  margin: 0;
  font-family: var(--juzoDisplay);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .04em;
}

.juzoAuthMonitor {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 22px;
  min-width: 0;
  padding: 80px clamp(24px, 4vw, 64px) 40px;
  background: var(--juzo-rail);
  border-left: 1px solid var(--juzo-line);
}

.juzoMonitorFrame {
  position: relative;
  padding: 10px;
  border: 1px solid var(--juzo-text);
}

.juzoMonitorCorner {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 0 solid var(--juzo-action);
}

.juzoMonitorCorner.isTopLeft { top: -8px; left: -8px; border-top-width: 2px; border-left-width: 2px; }
.juzoMonitorCorner.isTopRight { top: -8px; right: -8px; border-top-width: 2px; border-right-width: 2px; }
.juzoMonitorCorner.isBottomLeft { bottom: -8px; left: -8px; border-bottom-width: 2px; border-left-width: 2px; }
.juzoMonitorCorner.isBottomRight { bottom: -8px; right: -8px; border-bottom-width: 2px; border-right-width: 2px; }

.juzoMonitorScreen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0c0d0c;
}

.juzoSlide {
  position: absolute;
  inset: 0;
}

.juzoSlide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.juzoSlide.isQueued {
  visibility: hidden;
}

.juzoSlide.isPrevious {
  z-index: 1;
}

/* 新作品沿 Z 字斜角划进来，画面缓慢推近。 */
.juzoSlide.isCurrent {
  z-index: 2;
  animation: juzoWipe 1.1s cubic-bezier(.7, 0, .2, 1) both;
}

.juzoSlide.isCurrent img {
  animation: juzoDollyIn 9s ease-out both;
}

@keyframes juzoWipe {
  from { clip-path: polygon(0 0, 0 0, -40% 100%, -40% 100%); }
  to { clip-path: polygon(0 0, 140% 0, 100% 100%, -40% 100%); }
}

@keyframes juzoDollyIn {
  from { transform: scale(1.08) translateX(1.5%); }
}

.juzoFoldLine {
  position: absolute;
  top: -10%;
  bottom: -10%;
  z-index: 3;
  width: 3px;
  background: var(--juzo-action);
  transform: skewX(-21.8deg);
  animation: juzoFold 1.1s cubic-bezier(.7, 0, .2, 1) both;
}

@keyframes juzoFold {
  from { left: -10%; opacity: 1; }
  95% { opacity: 1; }
  to { left: 120%; opacity: 0; }
}

.juzoAuthMonitorBar {
  display: grid;
  gap: 6px;
}

.juzoAuthMonitorBar p,
.juzoAuthMonitorBar h2 {
  margin: 0;
}

.juzoMonitorKicker {
  color: var(--juzo-muted);
  font-size: 11px;
  letter-spacing: .16em;
}

.juzoMonitorMeta {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--juzo-muted);
  font-size: 12.5px;
}

.juzoMonitorMeta span {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--juzo-action);
  color: var(--juzo-onAction);
  font-size: 11.5px;
  font-weight: 600;
}

.juzoAuthMonitorBar h2 {
  margin-bottom: 8px;
  font-family: var(--juzoDisplay);
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  line-height: 1.2;
}

.juzoMonitorControls {
  display: flex;
  align-items: center;
  gap: 14px;
}

.juzoMonitorCount {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

.juzoMonitorProgress {
  position: relative;
  flex: 1;
  height: 2px;
  overflow: hidden;
  background: var(--juzo-line);
}

.juzoMonitorProgress i {
  position: absolute;
  inset: 0;
  background: var(--juzo-action);
  transform-origin: left;
  animation: juzoProgress 4.2s linear both;
}

.juzoMonitorProgress i.isStill {
  animation: none;
  transform: scaleX(0);
}

@keyframes juzoProgress {
  from { transform: scaleX(0); }
}

.juzoMonitorControls button,
.juzoThemeToggle {
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--juzo-line);
  border-radius: 999px;
  background: var(--juzo-panel);
  color: var(--juzo-text);
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease;
}

.juzoMonitorControls button {
  width: 34px;
  height: 34px;
}

.juzoMonitorControls button:hover,
.juzoThemeToggle:hover {
  border-color: var(--juzo-action);
  color: var(--juzo-action);
}

.juzoThemeToggle {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 5;
  width: 38px;
  height: 38px;
}

/* 打开页面时从黑场通过八边光圈打开。 */
.juzoIrisVeil {
  --juzoIris: 80vmax;
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  background: #0c0d0c;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 0, calc(50% - var(--juzoIris)) calc(50% - var(--juzoIris) * .4142), calc(50% - var(--juzoIris)) calc(50% + var(--juzoIris) * .4142), calc(50% - var(--juzoIris) * .4142) calc(50% + var(--juzoIris)), calc(50% + var(--juzoIris) * .4142) calc(50% + var(--juzoIris)), calc(50% + var(--juzoIris)) calc(50% + var(--juzoIris) * .4142), calc(50% + var(--juzoIris)) calc(50% - var(--juzoIris) * .4142), calc(50% + var(--juzoIris) * .4142) calc(50% - var(--juzoIris)), calc(50% - var(--juzoIris) * .4142) calc(50% - var(--juzoIris)), calc(50% - var(--juzoIris)) calc(50% - var(--juzoIris) * .4142));
  animation: juzoIrisOpen 1.2s cubic-bezier(.6, 0, .2, 1) .1s both;
}

@keyframes juzoIrisOpen {
  from { --juzoIris: 0px; }
}

@media (max-width: 900px) {
  .juzoAuth {
    grid-template-columns: minmax(0, 1fr);
  }

  .juzoAuthMonitor {
    order: -1;
    gap: 12px;
    padding: 72px 20px 20px;
    border-left: 0;
    border-bottom: 1px solid var(--juzo-line);
  }

  .juzoMonitorScreen {
    aspect-ratio: 16 / 7;
  }

  .juzoMonitorKicker,
  .juzoMonitorMeta {
    display: none;
  }

  .juzoAuthMonitorBar h2 {
    margin: 0;
    font-size: 18px;
  }

  .juzoAuthBrand {
    position: absolute;
    top: 18px;
    left: 20px;
    z-index: 4;
  }

  .juzoAuthBrand img {
    height: 28px;
  }

  .juzoAuthPaper {
    padding: 28px 20px 36px;
  }

  .juzoThemeToggle {
    top: 16px;
    right: 16px;
  }
}

/* ── 产品能力、垂直模型：片头 ── */
.juzoPageHero {
  position: relative;
  padding: 64px var(--juzoSide) 0;
}

.juzoPageHero .juzoHeroInner {
  padding-bottom: 64px;
}

.juzoPageHero .juzoFilmStrip {
  margin-inline: calc(var(--juzoSide) * -1);
}

.juzoPageTitle {
  margin: 0 0 32px;
  font-family: var(--juzoDisplay);
  font-size: clamp(36px, 5.6vw, 80px);
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: -.01em;
}

.juzoPageTitleAccent {
  color: var(--juzo-action);
  white-space: nowrap;
}

.juzoPageHeroGrid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr);
  gap: 48px;
  align-items: start;
}

.juzoPageLead {
  max-width: 36em;
  margin: 0 0 24px;
  color: var(--juzo-muted);
  font-size: 17px;
  line-height: 1.8;
}

.juzoPageLead strong {
  color: var(--juzo-text);
}

.juzoFactSheet {
  margin: 0;
  padding-top: 10px;
  border-top: 2px solid var(--juzo-text);
}

.juzoFactSheetHead {
  display: flex;
  justify-content: space-between;
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
}

.juzoFactSheet div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--juzo-line);
}

.juzoFactSheet dt {
  color: var(--juzo-muted);
  font-size: 13px;
}

.juzoFactSheet dd {
  margin: 0;
  font-weight: 700;
}

.juzoFactSheet .isAccent dd {
  color: var(--juzo-action);
}

/* 剧本页眉那样的一排小字。 */
.juzoPageFacts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 0;
  margin: 0;
  padding: 10px 0;
  border-block: 1px solid var(--juzo-line);
  color: var(--juzo-muted);
  font-size: 13px;
}

.juzoPageFacts span + span::before {
  content: "｜";
  margin: 0 10px;
  color: var(--juzo-line);
}

@media (max-width: 860px) {
  .juzoPageHeroGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

@media (max-width: 560px) {
  .juzoPageFacts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .juzoPageFacts span + span::before {
    content: none;
  }
}

/* ── 剪辑时间线：主轨与 B 轨，播放头走一遍 ── */
.juzoTimeline {
  overflow-x: auto;
  padding: 4px 0 8px;
}

.juzoTimelineBody {
  --juzoTrackLabel: 44px;
  position: relative;
  min-width: 680px;
}

.juzoTimelineRuler {
  height: 14px;
  margin-left: var(--juzoTrackLabel);
  border-bottom: 1px solid var(--juzo-line);
  background: repeating-linear-gradient(90deg, var(--juzo-muted) 0 1px, transparent 1px 12px) left bottom / 100% 7px no-repeat;
}

.juzoTimelineRuler i {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--juzoTrackLabel);
  z-index: 2;
  width: 2px;
  background: var(--juzo-action);
  pointer-events: none;
}

.juzoTimelineRuler i::before {
  content: "";
  position: absolute;
  top: 0;
  left: -4px;
  border: 5px solid transparent;
  border-top-color: var(--juzo-action);
}

.juzoTimeline.isPlaying .juzoTimelineRuler i {
  animation: juzoTimelineHead 2.4s linear both;
}

@keyframes juzoTimelineHead {
  to { left: calc(100% - 6px); }
}

.juzoTrack {
  display: grid;
  grid-template-columns: var(--juzoTrackLabel) minmax(0, 1fr);
  align-items: start;
  margin-top: 10px;
}

.juzoTrackLabel {
  padding-top: 14px;
  color: var(--juzo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

.juzoTrackClips {
  display: flex;
  gap: 4px;
}

.juzoClip {
  flex: 1;
  min-width: 0;
}

.juzoClipBody {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-line);
  border-radius: 4px;
  transition: background-color .3s ease, border-color .3s ease;
}

.juzoTimeline.isPlaying .juzoClipBody {
  background: var(--juzo-selected);
  border-color: var(--juzo-action);
  transition-delay: calc(var(--at) * 2.4s + .1s);
}

.juzoSite a.juzoClipBody:hover {
  border-color: var(--juzo-action);
}

.juzoClipBody small {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--juzo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

.juzoClipBody em,
.juzoNewBadge {
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--juzo-action);
  color: var(--juzo-onAction);
  font-size: 10px;
  font-style: normal;
  letter-spacing: .08em;
}

.juzoClipBody strong {
  font-size: 16px;
  font-weight: 800;
}

/* 播放头经过时贴上的便签。 */
.juzoClipNote {
  position: relative;
  margin: 14px 6px 0;
  padding: 10px 12px;
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-line);
  box-shadow: 0 8px 18px -12px rgba(0, 0, 0, .4);
  font-size: 13px;
  line-height: 1.6;
  opacity: 0;
  transform: translateY(-10px) rotate(-3deg);
  transition: opacity .35s ease, transform .5s cubic-bezier(.3, 1.4, .5, 1);
}

.juzoClipNote::before {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  width: 34px;
  height: 12px;
  margin-left: -17px;
  background: var(--juzo-selected);
  opacity: .9;
  transform: rotate(-3deg);
}

.juzoTimeline.isPlaying .juzoClipNote {
  opacity: 1;
  transform: rotate(-1deg);
  transition-delay: calc(var(--at) * 2.4s + .3s);
}

.juzoTimeline.isPlaying .juzoClip:nth-child(even) .juzoClipNote {
  transform: rotate(1deg);
}

/* ── 产品能力：六个镜头的样张 ── */
.juzoModuleGrid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: 56px;
  align-items: start;
}

.juzoModule .juzoSectionTitle {
  display: flex;
  align-items: center;
  gap: 12px;
}

.juzoModule .juzoNewBadge {
  padding: 3px 8px;
  font-family: var(--font-ui, system-ui), sans-serif;
  font-size: 12px;
}

.juzoModuleDesc {
  max-width: 34em;
  margin: 0 0 22px;
  color: var(--juzo-muted);
  font-size: 16px;
  line-height: 1.8;
}

.juzoSite .juzoInlineLink {
  color: var(--juzo-action);
  border-bottom: 1px solid color-mix(in srgb, var(--juzo-action) 40%, transparent);
}

.juzoChecklist {
  margin: 0 0 24px;
  padding: 0;
  list-style: none;
}

.juzoChecklist li {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--juzo-line);
  font-size: 15px;
}

.juzoChecklist li::before {
  content: "✓";
  color: var(--juzo-success);
  font-weight: 700;
}

.juzoChips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
}

.juzoChips span {
  padding: 6px 12px;
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-line);
  border-radius: 4px;
  color: var(--juzo-muted);
  font-size: 12px;
}

.juzoChips .isAccent {
  border-color: var(--juzo-action);
  color: var(--juzo-action);
  font-weight: 700;
  letter-spacing: .06em;
}

.juzoTrackNote {
  margin: 0;
  padding: 28px var(--juzoSide) 0;
  border-top: 1px solid var(--juzo-line);
  color: var(--juzo-action);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-align: center;
}

.juzoTrackNote + .juzoSection {
  border-top: 1px dashed var(--juzo-line);
  margin-top: 28px;
}

@media (max-width: 960px) {
  .juzoModuleGrid {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

/* 监视器：带取景边角的演示面板。 */
.juzoMonitor {
  position: relative;
  margin: 0;
  padding: 0 18px 18px;
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-text);
}

.juzoMonitor::before,
.juzoMonitor::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border: 0 solid var(--juzo-action);
}

.juzoMonitor::before {
  top: -6px;
  left: -6px;
  border-top-width: 2px;
  border-left-width: 2px;
}

.juzoMonitor::after {
  right: -6px;
  bottom: -6px;
  border-right-width: 2px;
  border-bottom-width: 2px;
}

.juzoMonitorBar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 -18px 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--juzo-line);
  color: var(--juzo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.juzoMonitorBar span:last-child {
  color: var(--juzo-action);
}

.juzoTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.juzoTags span {
  padding: 3px 10px;
  background: var(--juzo-bg);
  border: 1px solid var(--juzo-line);
  border-radius: 4px;
  color: var(--juzo-muted);
  font-size: 12px;
}

.juzoTags .isAccent {
  border-color: var(--juzo-action);
  color: var(--juzo-action);
  font-weight: 600;
}

.juzoThumbs i.isAction { --juzoTone: var(--juzo-action); }
.juzoThumbs i.isInfo { --juzoTone: var(--juzo-info); }
.juzoThumbs i.isSuccess { --juzoTone: var(--juzo-success); }
.juzoThumbs i.isWarning { --juzoTone: var(--juzo-warning); }

.juzoNodes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
}

.juzoNodes span {
  padding: 8px 13px;
  background: var(--juzo-bg);
  border: 1px solid var(--juzo-action);
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.juzoNodes .isAccent {
  background: var(--juzo-action);
  color: var(--juzo-onAction);
  font-weight: 700;
}

/* 节点之间的虚线依次画出。 */
.juzoNodes i {
  flex: 1;
  min-width: 20px;
  height: 0;
  border-top: 1.5px dashed var(--juzo-action);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s ease-out;
}

.isPlaying .juzoNodes i {
  transform: none;
  transition-delay: calc(var(--i) * .5s + .2s);
}

.juzoThumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
}

.juzoThumbs i {
  aspect-ratio: 1;
  background: linear-gradient(150deg, color-mix(in srgb, var(--juzoTone) 35%, var(--juzo-panel)), var(--juzo-rail));
  border: 1px solid var(--juzo-line);
}

.juzoThumbs .isMore {
  display: grid;
  place-items: center;
  background: var(--juzo-panel);
  border-style: dashed;
  color: var(--juzo-muted);
  font-size: 11px;
  font-style: normal;
}

/* 波形从左往右画出来。 */
.juzoWave {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 64px;
  margin: 0 0 18px;
}

.juzoWave i {
  flex: 1;
  background: var(--juzo-grid);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .4s ease-out;
}

.juzoWave .isPlayed {
  background: var(--juzo-action);
}

.isPlaying .juzoWave i {
  transform: none;
  transition-delay: calc(var(--i) * 30ms + .2s);
}

/* ── 片尾：场记单逐项打勾 ── */
.juzoCta.isLongTitle .juzoCtaText h2 {
  font-size: clamp(36px, 5vw, 68px);
  text-wrap: balance;
}

.juzoCtaLog {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
  max-width: 560px;
  margin: 0 0 28px;
  padding: 0;
  list-style: none;
}

.juzoCtaLog li {
  padding: 8px 6px;
  border: 1px solid color-mix(in srgb, var(--juzo-onAction) 45%, transparent);
  font-size: 13px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.juzoCtaLog li::after {
  content: " ✓";
  opacity: 0;
  transition: opacity .2s ease;
}

.juzoCtaInner.isPlaying .juzoCtaLog li::after {
  opacity: 1;
  transition-delay: calc(var(--i) * 150ms + 1s);
}

@media (max-width: 560px) {
  .juzoCtaLog {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.juzoCtaText > p.juzoCtaActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  font-size: 14px;
  opacity: 1;
}

.juzoSite .juzoButtonOutline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border: 1px solid var(--juzo-onAction);
  border-radius: 6px;
  color: var(--juzo-onAction);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color .2s ease;
}

.juzoSite .juzoButtonOutline:hover {
  background: color-mix(in srgb, var(--juzo-onAction) 14%, transparent);
}

/* ── 垂直模型：每一场的开头 ── */
.juzoSectionHead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 26em);
  gap: 20px 48px;
  align-items: end;
  margin-bottom: 40px;
}

.juzoSectionHead .juzoSectionLead {
  margin: 0;
}

.juzoSectionLead strong {
  color: var(--juzo-text);
}

.juzoMetaLine {
  margin: 0;
  color: var(--juzo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

@media (max-width: 860px) {
  .juzoSectionHead {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 学进去 → 光圈里的模型 → 交出来。 */
.juzoFlow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1.1fr) 48px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}

.juzoFlowColumn {
  display: grid;
  gap: 10px;
}

.juzoFlowTitle {
  margin: 0;
  color: var(--juzo-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .14em;
}

.juzoFlowCard {
  margin: 0;
  padding: 12px 14px;
  background: var(--juzo-panel);
  border: 1px solid var(--juzo-line);
  border-radius: 4px;
  font-size: 14px;
  font-weight: 700;
}

.juzoFlowCard small {
  display: block;
  margin-top: 3px;
  color: var(--juzo-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}

/* 静止的胶片齿孔，替换原来流动的斜纹。 */
.juzoSprocket {
  height: 34px;
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, var(--juzo-bg) 4px 9px) 0 5px / 100% 5px no-repeat,
    repeating-linear-gradient(90deg, transparent 0 4px, var(--juzo-bg) 4px 9px) 0 calc(100% - 5px) / 100% 5px no-repeat,
    var(--juzo-text);
}

/* 八边光圈从中间打开，露出模型卡。 */
.juzoCore {
  padding: 36px 24px 30px;
  background: var(--juzo-panel);
  border: 1.5px solid var(--juzo-action);
  text-align: center;
  clip-path: polygon(45% 40%, 55% 40%, 60% 45%, 60% 55%, 55% 60%, 45% 60%, 40% 55%, 40% 45%);
  transition: clip-path 1.1s cubic-bezier(.6, 0, .2, 1) .2s;
}

.juzoFlow.isPlaying .juzoCore {
  clip-path: polygon(0 0, 100% 0, 100% 0, 100% 100%, 100% 100%, 0 100%, 0 100%, 0 0);
}

.juzoCore p {
  margin: 0;
}

.juzoCoreCode {
  color: var(--juzo-action);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .2em;
}

.juzoCoreName {
  margin: 10px 0 !important;
  font-family: var(--juzoDisplay);
  font-size: 28px;
  font-weight: 900;
}

.juzoCoreTag {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 3px;
  background: var(--juzo-action);
  color: var(--juzo-onAction);
  font-size: 13px;
  font-weight: 800;
}

.juzoCoreNote {
  margin-top: 12px !important;
  color: var(--juzo-muted);
  font-size: 12px;
  letter-spacing: .1em;
}

.juzoAside {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--juzo-line);
  color: var(--juzo-muted);
  font-size: 14px;
}

.juzoAside strong {
  margin-left: 12px;
  color: var(--juzo-action);
}

@media (max-width: 960px) {
  .juzoFlow {
    grid-template-columns: minmax(0, 1fr);
  }

  .juzoSprocket {
    height: 26px;
  }
}

/* 同一句话两版剧本：左边草稿，右边改好的剧本纸。 */
.juzoDrafts {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr);
  gap: 20px;
  align-items: stretch;
  margin-top: 12px;
}

.juzoDraft {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 24px;
  background: var(--juzo-rail);
  border: 1px dashed var(--juzo-line);
  color: var(--juzo-muted);
}

.juzoDraft.isClean {
  background: var(--juzo-panel);
  border-style: solid;
  color: var(--juzo-text);
  box-shadow: 0 24px 48px -36px rgba(36, 37, 34, .45);
}

.juzoDraft p {
  margin: 0;
}

.juzoDraftHead {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.juzoDraft.isClean .juzoDraftHead span:last-child {
  color: var(--juzo-success);
}

.juzoDraftRaw {
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--juzo-line);
  color: var(--juzo-text);
  font-family: var(--juzoDisplay);
  font-size: 18px;
  font-weight: 700;
}

.juzoDraftBody {
  flex: 1;
  font-size: 14px;
  line-height: 1.85;
}

.juzoDraftBody .juzoTokens {
  margin-bottom: 12px !important;
}

.juzoDraftBody b {
  color: var(--juzo-action);
  font-weight: 600;
}

/* 改错的地方用朱红波浪线圈出来。 */
.juzoDraftBody b.isWrong {
  text-decoration: underline wavy var(--juzo-action);
  text-underline-offset: 4px;
}

.juzoDrafts.isPlaying .juzoTokens span {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i) * 110ms + 1s);
}

.juzoDraftTags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.juzoDraftTags span {
  position: relative;
  padding: 3px 9px;
  border: 1px solid var(--juzo-line);
  border-radius: 4px;
  font-size: 12px;
}

.juzoDraftTags .isAccent {
  border-color: var(--juzo-action);
  color: var(--juzo-action);
  font-weight: 600;
}

/* 朱红铅笔把缺的项划掉。 */
.juzoDraftTags .isStruck::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -3px;
  right: -3px;
  height: 2px;
  background: var(--juzo-action);
  transform: rotate(-4deg) scaleX(0);
  transform-origin: left;
  transition: transform .35s ease-out;
}

.juzoDrafts.isPlaying .isStruck::after {
  transform: rotate(-4deg);
  transition-delay: calc(var(--i) * 250ms + .2s);
}

.juzoRevise {
  align-self: center;
  margin: 0;
  color: var(--juzo-action);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
}

@media (max-width: 960px) {
  .juzoDrafts {
    grid-template-columns: minmax(0, 1fr);
  }

  .juzoRevise {
    justify-self: center;
  }
}

/* 摄影报告单与通告单：横线表格，一行一项。 */
.juzoReport,
.juzoCallSheet {
  border-top: 2px solid var(--juzo-text);
}

.juzoReportHead,
.juzoReportRow {
  display: grid;
  grid-template-columns: 72px 56px minmax(0, 9em) minmax(0, 1fr) minmax(0, 15em);
  gap: 16px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid var(--juzo-line);
}

.juzoCallRow + .juzoCallHead {
  margin-top: 32px;
  border-top: 2px solid var(--juzo-text);
}

.juzoCallHead,
.juzoCallRow {
  display: grid;
  grid-template-columns: minmax(0, 13em) minmax(0, 1fr) minmax(0, 16em) minmax(0, 9em);
  gap: 20px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--juzo-line);
}

:is(.juzoReportHead, .juzoCallHead) {
  margin: 0;
  padding: 8px 0;
  color: var(--juzo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
}

.juzoReportCode {
  color: var(--juzo-action);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
}

.juzoReportSketch {
  width: 48px;
  height: 32px;
  overflow: visible;
}

.juzoReportSketch path {
  fill: none;
  stroke: var(--juzo-text);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset .9s ease-out;
}

.juzoReportSketch .isAccent {
  stroke: var(--juzo-action);
}

.juzoReport.isPlaying .juzoReportSketch path {
  stroke-dashoffset: 0;
  transition-delay: calc(var(--i) * 150ms + .1s);
}

:is(.juzoReportRow, .juzoCallRow) h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 800;
}

.juzoReportRow h3 small {
  display: block;
  margin-top: 2px;
  color: var(--juzo-muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
}

.juzoCallRow h3 small {
  display: block;
  margin-bottom: 4px;
  color: var(--juzo-action);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
}

:is(.juzoReportRow, .juzoCallRow) > p {
  margin: 0;
  color: var(--juzo-muted);
  font-size: 14px;
  line-height: 1.7;
}

@media (max-width: 860px) {
  :is(.juzoReportHead, .juzoCallHead) {
    display: none;
  }

  .juzoReportRow {
    grid-template-columns: 56px minmax(0, 1fr);
    grid-template-areas: "sketch code" "sketch name" "desc desc" "tags tags";
    gap: 6px 16px;
  }

  .juzoReportRow .juzoReportCode { grid-area: code; }
  .juzoReportRow .juzoReportSketch { grid-area: sketch; }
  .juzoReportRow h3 { grid-area: name; }
  .juzoReportRow > p:not(.juzoTags) { grid-area: desc; }
  .juzoReportRow .juzoTags { grid-area: tags; }

  .juzoCallRow {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }
}

/* 减弱动态：一次性动画直接落到最终画面，循环动画停在静止帧。 */
@media (prefers-reduced-motion: reduce) {
  :is(.juzoSite, .juzoAuth) *,
  :is(.juzoSite, .juzoAuth) *::before,
  :is(.juzoSite, .juzoAuth) *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }

  :is(.juzoViewfinder, .juzoShotLog, .juzoBoardTimeline) *,
  .juzoIrisVeil {
    animation: none !important;
  }

  .juzoIrisVeil {
    display: none;
  }

  .juzoCore {
    clip-path: none;
  }
}

/* 官网顶部通告条和登录页说明，内容来自后台「通告管理」。 */
.juzoSiteStrip { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 40px; box-sizing: border-box; padding: 6px 48px 6px 16px; position: relative; border-bottom: 1px solid rgba(244, 241, 234, .14); background: #171512; color: #f4f1ea; font-size: 13px; }
.juzoSiteStripTag { flex-shrink: 0; overflow: hidden; max-width: 96px; white-space: nowrap; text-overflow: ellipsis; padding: 1px 7px; border: 1px solid rgba(244, 241, 234, .4); border-radius: 3px; font-size: 11px; }
.juzoSiteStrip p { overflow: hidden; margin: 0; min-width: 0; white-space: nowrap; text-overflow: ellipsis; }
.juzoSiteStrip strong { margin-left: 8px; white-space: nowrap; font-weight: 600; color: #f3dfb6; }
.juzoSiteStrip a { flex-shrink: 0; overflow: hidden; max-width: 180px; white-space: nowrap; text-overflow: ellipsis; padding: 3px 12px; border-radius: 4px; background: #bc3d2e; color: #fff !important; font-weight: 500; }
.juzoSiteStrip a:hover { background: #a93225; }
.juzoSlide.isNotice img { object-position: 62% 26%; }
.juzoAuthMonitorBar h2 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.juzoAuthMonitorBar .juzoMonitorMeta { overflow-wrap: anywhere; }
.juzoAuthMonitorBar.isNotice .juzoMonitorMeta span { flex-shrink: 0; overflow: hidden; max-width: 120px; white-space: nowrap; text-overflow: ellipsis; }
.juzoSiteStrip button { position: absolute; top: 50%; right: 8px; width: 32px; height: 32px; transform: translateY(-50%); color: rgba(244, 241, 234, .7); font-size: 18px; line-height: 1; }
.juzoSiteStrip button:hover { color: #fff; }
.juzoAuthNotice { display: flex; gap: 8px; margin: 0 0 16px; padding: 8px 12px; border-left: 2px solid var(--juzo-action); background: color-mix(in srgb, var(--juzo-action) 8%, transparent); font-size: 13px; line-height: 1.5; }
.juzoAuthNotice span { flex-shrink: 0; color: var(--juzo-hover); font-weight: 500; }
.juzoAuthNotice b { display: -webkit-box; overflow: hidden; font-weight: 400; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
@media (max-width: 900px) {
  .juzoAuthMonitorBar.isNotice .juzoMonitorKicker { display: block; }
  .juzoAuthMonitorBar.isNotice .juzoMonitorMeta { display: flex; }
}
@media (max-width: 640px) {
  .juzoSiteStrip { flex-wrap: wrap; justify-content: flex-start; }
  .juzoSiteStrip p { display: -webkit-box; flex: 1 1 60%; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
}

/* ── 三层改版（2026-11）：首页三层卡、导演台卖点、AI 验片红黄绿行、账目行、镜头溯源行 ── */
/* 首页三层：三张分镜卡并排，手机单列。 */
.juzoLayers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.juzoLayers .juzoFrame {
  gap: 12px;
  padding: 18px 18px 20px;
}

.juzoLayers .juzoFrame h3 {
  font-size: 22px;
}

.juzoLayers .juzoFrame h3 + p {
  color: var(--juzo-text);
  font-size: 14px;
  line-height: 1.75;
}

.juzoLayers .juzoFrame .juzoChips {
  margin-top: auto;
}

.juzoLayerNote {
  margin: 28px 0 0;
  padding-top: 14px;
  border-top: 1px dashed var(--juzo-line);
  color: var(--juzo-muted);
  font-size: 14px;
}

.juzoLayerNote strong {
  color: var(--juzo-text);
}

/* 导演台批注下的两条卖点。 */
.juzoMarginSell {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.juzoMarginSell li {
  padding: 10px 0;
  border-top: 1px dashed var(--juzo-line);
  color: var(--juzo-text);
  font-size: 14px;
}

.juzoMarginSell li b {
  display: block;
  margin-bottom: 4px;
  color: var(--juzo-action);
  font-size: 11px;
  letter-spacing: .12em;
}

.juzoMarginSell li em {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 3px;
  background: var(--juzo-action);
  color: var(--juzo-onAction);
  font-size: 10px;
  font-style: normal;
}

/* 模块标题旁的描边标签，和 NEW 角标同一行。 */
.juzoModule .juzoNewBadge.isOutline {
  background: transparent;
  border: 1px solid var(--juzo-action);
  color: var(--juzo-action);
}

/* AI 验片：红黄绿三行，每行写指到哪条设定。 */
.juzoVerdicts {
  display: grid;
  margin: 0 0 16px;
}

.juzoVerdict {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  margin: 0;
  padding: 9px 0;
  border-bottom: 1px dashed var(--juzo-line);
  font-size: 13px;
}

.juzoVerdict.isStop { --juzoTone: var(--juzo-action); }
.juzoVerdict.isWarn { --juzoTone: var(--juzo-warning); }
.juzoVerdict.isPass { --juzoTone: var(--juzo-success); }

.juzoVerdict i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--juzoTone);
}

.juzoVerdict b {
  font-weight: 600;
}

.juzoVerdict small {
  color: var(--juzo-muted);
  font-size: 11px;
  letter-spacing: .08em;
}

.juzoVerdictWhere {
  display: block;
  color: var(--juzo-muted);
  font-size: 12px;
}

/* 账目行：项目、虚线、结果；预占中的那行用朱红。 */
.juzoLedger {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
}

.juzoLedger p {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 0;
  padding: 8px 0;
  border-bottom: 1px dashed var(--juzo-line);
  font-size: 13px;
}

.juzoLedger p small {
  color: var(--juzo-muted);
  font-size: 11px;
  letter-spacing: .08em;
}

.juzoLedger p i {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--juzo-line) 0 4px, transparent 4px 8px);
}

.juzoLedger p b {
  color: var(--juzo-text);
  font-weight: 600;
}

.juzoLedger p b.isPending {
  color: var(--juzo-action);
}

/* 读过全本：问答卡和镜头溯源行。 */
.juzoDraftQ {
  color: var(--juzo-text);
  font-family: var(--juzoDisplay);
  font-size: 17px;
  font-weight: 700;
}

.juzoDraftA {
  padding: 12px 14px;
  background: var(--juzo-bg);
  border: 1px solid var(--juzo-line);
  font-size: 14px;
  line-height: 1.85;
}

.juzoTraceRow {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 14px;
  padding: 10px 0;
  border-bottom: 1px dashed var(--juzo-line);
  font-size: 14px;
}

.juzoTraceRow small {
  color: var(--juzo-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
}

.juzoTraceRow em {
  color: var(--juzo-action);
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 960px) {
  .juzoLayers {
    grid-template-columns: minmax(0, 1fr);
  }
}