/* Open chapters: one actual workspace, followed by a light case journal. */
.workspace-chapter { position: relative; isolation: isolate; overflow: clip; background: var(--paper); padding: 120px 0 115px; }
.chapter-heading { position: relative; z-index: 2; text-align: center; }
.chapter-heading .eyebrow { justify-content: center; display: flex; align-items: center; gap: 12px; color: #8c7881; font-size: 9px; margin-bottom: 27px; }
.chapter-heading h2 { font-size: clamp(40px,4.6vw,67px); font-weight: 500; line-height: 1.22; letter-spacing: -.055em; }
.chapter-heading h2 em { font-style: normal; color: #ab6580; }
.chapter-intro { font-size: 14px; color: #7b7680; line-height: 2; margin: 25px auto 0; }
.workspace-chapter .chapter-heading { transform: translate3d(0,var(--workspace-heading-y,0px),0); }
.workspace-canvas { position: relative; padding: 65px 45px 85px; perspective: 1600px; }
.workspace-halo { position: absolute; inset: 90px -3% 30px; border-radius: 50%; background: radial-gradient(ellipse at 65% 45%,#e6c7cf80, #ede1d45c 45%,#f8f5ef00 71%); transform: translate3d(0,var(--workspace-halo-y,0px),0); }
.product-reel { position: relative; z-index: 1; max-width: 1100px; margin: 0 auto; padding: 11px 11px 0; border: 1px solid #ffffff; border-radius: 20px; background: #fffcf8c9; box-shadow: 0 36px 75px -42px #7d526b55,0 0 0 1px #d9c8ce66; transform: translate3d(0,var(--workspace-screen-y,0px),0) rotateX(var(--workspace-screen-tilt,2deg)) rotateZ(var(--workspace-screen-angle,-1deg)); transform-origin: 50% 50%; }
.product-screen { display: block; width: 100%; border: 0; background: #f3e9e3; border-radius: 12px; overflow: hidden; padding: 0; cursor: zoom-in; }
.product-screen > img { display: block; width: 100%; height: auto; }
.product-screen:hover > img { filter: brightness(1.015); }
.product-reel figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 13px 6px; color: #9a8791; font-size: 8px; letter-spacing: .05em; }
.product-reel figcaption > span:first-child { display: flex; gap: 8px; align-items: center; }
.product-reel figcaption .status-dot { width: 4px; height: 4px; }
.workspace-whisper { position: absolute; z-index: 2; bottom: 2px; right: 8%; color: #ba929e; font: italic 44px/1.1 Georgia,serif; letter-spacing: -.05em; pointer-events: none; transform: translate3d(var(--workspace-whisper-x,0px),0,0); }
.workspace-notes { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); list-style: none; gap: 55px; max-width: 1100px; padding: 35px 0 0; margin-top: 0; }
.workspace-notes > li { padding-top: 23px; border-top: 1px solid #decfd1; }
.note-index { display: block; font: 8px/1.5 ui-monospace,monospace; color: #ac7e90; letter-spacing: .1em; }
.workspace-notes h3 { margin: 17px 0 13px; font-size: 19px; line-height: 1.5; font-weight: 500; letter-spacing: -.035em; }
.workspace-notes p { font-size: 13px; line-height: 1.95; color: #837781; }
.chapter-link { display: inline-flex; align-items: center; gap: 13px; padding: 0; margin-top: 22px; border: 0; background: none; color: #ad627f; font-size: 11px; line-height: 1.8; text-decoration: none; cursor: pointer; }
.chapter-link span { display: inline-block; transition: transform .2s; }
.chapter-link:hover span { transform: translate(2px,-2px); }
.chapter-link:hover { color: #8f3f62; }

/* The light palette continues from the garden; no framed dark surface. */
.watch-chapter { position: relative; isolation: isolate; overflow: clip; padding: 115px 0 105px; background: linear-gradient(180deg,#eaf0ee 0%,#f5f1ec 18%,#f8eff0 60%,var(--paper) 100%); }
.watch-chapter .chapter-heading { transform: translate3d(0,var(--watch-heading-y,0px),0); }
.watch-landscape { position: absolute; z-index: 0; top: 255px; left: 0; width: 100%; height: 530px; opacity: .16; pointer-events: none; mask-image: radial-gradient(ellipse at 65% 50%,#000 15%,transparent 70%); transform: translate3d(0,var(--watch-landscape-y,0px),0); }
.watch-landscape > img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }
.case-moment { position: relative; z-index: 1; margin-top: 60px; margin-bottom: 58px; transform: translate3d(0,var(--watch-moment-y,0px),0); }
.case-port-change { display: flex; justify-content: center; align-items: center; gap: 48px; }
.case-port-change > div { text-align: center; }
.case-port-change > div > span { display: block; color: #a08893; font-size: 9px; letter-spacing: .1em; margin-bottom: 10px; }
.case-port-change strong { display: block; font: 400 clamp(68px,9.2vw,136px)/1.1 Georgia,serif; letter-spacing: -.065em; }
.old-port { color: #bd9aa4; text-decoration: line-through; text-decoration-thickness: 1px; text-decoration-color: #c393a0; }
.new-port { color: #926a7d; }
.case-arrow { margin-top: 25px; color: #bea1ae; font: 44px/1 Georgia,serif; transform: translate3d(var(--watch-arrow-x,0px),0,0); }
.case-moment figcaption { display: flex; gap: 15px; align-items: center; justify-content: center; color: #a08d94; font-size: 9px; margin-top: 24px; }
.case-caption-line { display: block; height: 1px; width: 38px; background: #d8c6cb; }
.case-journal { position: relative; z-index: 2; max-width: 1100px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 50px; list-style: none; padding: 0; }
.case-journal > li { position: relative; border-top: 1px solid #d8c6cb; padding-top: 23px; }
.journal-index { position: absolute; right: 0; top: 15px; font: italic 43px/1 Georgia,serif; color: #dbc6ce; }
.journal-label { font: 8px/1.5 ui-monospace,monospace; letter-spacing: .16em; color: #ac8294; }
.journal-content h3 { font-size: 20px; font-weight: 500; letter-spacing: -.035em; line-height: 1.5; margin: 24px 0 13px; }
.journal-content > p:not(.journal-label) { font-size: 13px; line-height: 1.95; color: #837782; }
.journal-fact { min-height: 33px; display: flex; align-items: center; gap: 7px; margin-top: 21px; font: 11px/1.6 ui-monospace,monospace; }
.error-fact { color: #b56c83; }
.approval-fact { color: #a27088; font-family: inherit; font-size: 11px; }
.approval-fact .icon { width: 14px; height: 14px; }
.success-fact { color: #6b8d7b; font-size: 14px; }
.success-fact > span { font-family: inherit; font-size: 9px; color: #8e998b; }
.journal-content .chapter-link { margin-top: 18px; }
.case-source { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 25px; margin-top: 60px; padding-top: 26px; border-top: 1px solid #e0d3d4; max-width: 1100px; }
.case-source > p { font-size: 10px; line-height: 1.95; color: #a08d96; }
.case-source .chapter-link { margin: 0; flex-shrink: 0; }
.extensions-section { padding-top: 120px; }

@media (max-width:1199px) {
  .workspace-notes,.case-journal,.case-source { max-width: calc(100% - 120px); }
  .workspace-notes,.case-journal { gap: 32px; }
  .workspace-canvas { padding-inline: 0; padding-top: 55px; }
  .workspace-whisper { right: 3%; }
  .workspace-notes h3,.journal-content h3 { font-size: 17px; }
  .case-port-change { gap: 35px; }
}
@media (max-width:999px) {
  .workspace-chapter { padding-top: 100px; padding-bottom: 85px; }
  .workspace-notes,.case-journal,.case-source { max-width: calc(100% - 80px); }
  .workspace-notes,.case-journal { gap: 24px; }
  .workspace-notes h3,.journal-content h3 { font-size: 15px; }
  .workspace-notes p,.journal-content > p:not(.journal-label) { font-size: 11px; }
  .workspace-notes p br,.journal-content p br { display: none; }
  .chapter-link { font-size: 10px; }
  .watch-chapter { padding-top: 95px; padding-bottom: 90px; }
  .case-moment { margin-top: 45px; margin-bottom: 50px; }
  .case-source { gap: 20px; }
}
@media (max-width:719px) {
  .workspace-chapter { padding: 85px 0 75px; }
  .chapter-heading .eyebrow { font-size: 6px; gap: 8px; letter-spacing: .12em; margin-bottom: 22px; }
  .chapter-heading h2 { font-size: 39px; }
  .chapter-intro { font-size: 12px; margin-top: 20px; }
  .workspace-canvas { width: calc(100% - 30px); padding: 45px 0 60px; }
  .product-reel { padding: 5px 5px 0; border-radius: 10px; }
  .product-screen { border-radius: 6px; }
  .product-reel figcaption { padding: 8px 3px; gap: 5px; font-size: 5px; letter-spacing: 0; }
  .product-reel figcaption > span:first-child { gap: 4px; }
  .workspace-whisper { font-size: 30px; bottom: 0; right: 5px; }
  .workspace-notes { grid-template-columns: 1fr; max-width: none; width: calc(100% - 48px); gap: 25px; padding-top: 20px; }
  .workspace-notes > li { position: relative; padding: 23px 0 0 44px; }
  .workspace-notes .note-index { position: static; font-size: 7px; }
  .workspace-notes > li::before { content: "✧"; position: absolute; top: 31px; left: 5px; font-size: 22px; color: #bf9bad; }
  .workspace-notes h3 { font-size: 18px; margin: 12px 0 10px; }
  .workspace-notes p { font-size: 12px; line-height: 1.9; }
  .workspace-notes p br { display: none; }
  .chapter-link { font-size: 11px; margin-top: 15px; }
  .watch-chapter { padding: 85px 0 70px; }
  .watch-landscape { top: 245px; left: -15%; width: 130%; height: 310px; opacity: .12; }
  .case-moment { margin: 40px auto 40px; }
  .case-port-change { gap: 15px; }
  .case-port-change strong { font-size: 61px; }
  .case-port-change > div > span { font-size: 7px; letter-spacing: .03em; margin-bottom: 9px; }
  .case-arrow { margin-top: 20px; font-size: 26px; }
  .case-moment figcaption { font-size: 7px; gap: 9px; margin-top: 20px; }
  .case-caption-line { width: 20px; }
  .case-journal { max-width: none; width: calc(100% - 48px); grid-template-columns: 1fr; gap: 30px; }
  .case-journal > li { padding: 22px 0 0 44px; }
  .journal-index { top: 24px; left: 0; right: auto; font-size: 27px; color: #caa7b6; }
  .journal-label { font-size: 7px; }
  .journal-content h3 { font-size: 19px; margin-top: 12px; }
  .journal-content > p:not(.journal-label) { font-size: 12px; }
  .journal-fact { margin-top: 16px; }
  .journal-content .chapter-link { margin-top: 12px; }
  .case-source { flex-direction: column; align-items: flex-start; max-width: none; width: calc(100% - 48px); gap: 18px; margin-top: 40px; padding-top: 23px; }
  .case-source > p { font-size: 9px; }
  .case-source > p br { display: none; }
  .extensions-section { padding-top: 80px; }
}
@media (max-width:349px) {
  .chapter-heading h2 { font-size: 33px; }
  .case-port-change strong { font-size: 49px; }
  .case-port-change { gap: 13px; }
  .workspace-notes h3 { font-size: 16px; }
  .journal-content h3 { font-size: 17px; }
}
.motion-reduced .workspace-chapter .chapter-heading,.motion-reduced .product-reel,
.motion-reduced .workspace-halo,.motion-reduced .workspace-whisper,
.motion-reduced .watch-chapter .chapter-heading,.motion-reduced .watch-landscape,
.motion-reduced .case-moment,.motion-reduced .case-arrow { transform: none; }

/* 案例端口数字滚动（里程表效果，JS 渐进增强：无 JS 时显示原始文本） */
.case-digit { display: inline-block; width: 1ch; height: 1.1em; overflow: hidden; vertical-align: top; text-align: center; }
.case-digit-strip { display: flex; flex-direction: column; transform: translateY(calc(var(--start,0) * -1.1em)); transition: transform 1.15s cubic-bezier(.2,.65,.25,1); }
.case-digit-strip > span { display: block; height: 1.1em; line-height: 1.1; }
.case-port-change.is-rolling .case-digit-strip { transform: translateY(calc(var(--digit,0) * -1.1em)); }