/* Original Figma artwork is arranged as responsive content, without flattening the sections. */
.wf-scene-timeline .wufu-case-heading > p { max-width: 900px; text-wrap: pretty; }
.wf-scene-timeline__source,
.wf-scene-timeline__variants,
.wf-iteration-drafts { border: 1px solid rgba(196, 206, 255, .36); border-radius: 11px; background: linear-gradient(145deg, rgba(1, 0, 63, .37) 8%, rgba(0, 85, 165, .207) 91%); box-shadow: inset 0 3px 4px rgba(20, 149, 255, .11); }
.wf-scene-timeline__switch { position: absolute; z-index: 4; top: 17px; left: 0; display: flex; align-items: center; justify-content: center; gap: 10px; width: 22.067%; margin: 0; }
.wf-scene-timeline__switch button { padding: 9px 18px; border: 1px solid rgba(196,206,255,.42); border-radius: 999px; background: rgba(30,23,93,.55); color: rgba(255,255,255,.75); font: inherit; font-size: clamp(13px,1vw,16px); cursor: pointer; transition: background .25s ease, color .25s ease, border-color .25s ease; }
.wf-scene-timeline__switch button:hover, .wf-scene-timeline__switch button.is-active { border-color: #b295ff; background: linear-gradient(120deg,#6337a8,#28217d); color: #fff; }
.wf-scene-timeline__switch button:focus-visible, .wf-scene-timeline__source:focus-visible { outline: 2px solid #b295ff; outline-offset: 4px; }
.wf-scene-timeline__scroll { overflow-x: auto; overflow-y: hidden; padding-block: 3px 12px; scrollbar-width: none; -ms-overflow-style: none; }
.wf-scene-timeline__scroll::-webkit-scrollbar { display: none; }
.wf-scene-timeline__scroll:focus-visible { outline: 2px solid #aa82ff; outline-offset: 6px; border-radius: 11px; }
.wf-scene-timeline__themes { position: relative; display: grid; min-width: 920px; }
.wf-scene-timeline__layout, .wf-scene-timeline__frames { display: grid; grid-template-columns: minmax(0, 395fr) minmax(64px, 176fr) minmax(0, 1219fr); align-items: stretch; min-width: 920px; }
.wf-scene-timeline__frames { grid-area: 1 / 1; pointer-events: none; }
.wf-scene-timeline__frames > span:first-child, .wf-scene-timeline__frames > span:last-child { border: 1px solid rgba(255,255,255,.09); border-radius: 28px; background: linear-gradient(145deg,rgba(1,0,63,.37) 8%,rgba(0,85,165,.207) 91%); box-shadow: inset 0 1px 0 rgba(255,255,255,.04), 0 22px 45px rgba(0,0,0,.14); }
.wf-scene-timeline__theme { grid-area: 1 / 1; z-index: 1; pointer-events: none; }
.wf-scene-timeline__theme.is-active { pointer-events: auto; }
.wf-scene-timeline__theme .wf-scene-timeline__source, .wf-scene-timeline__theme .wf-scene-timeline__variants { position: relative; border-color: transparent; border-radius: 28px; background: transparent; box-shadow: none; }
.wf-scene-timeline__theme .wf-scene-timeline__source { cursor: pointer; user-select: none; touch-action: pan-y; transition: box-shadow .3s ease; }
.wf-scene-timeline__theme .wf-scene-timeline__source::after, .wf-scene-timeline__theme .wf-scene-timeline__variants::after { content: ''; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: radial-gradient(260px circle at var(--scene-spotlight-x, 50%) var(--scene-spotlight-y, 50%), rgba(255, 255, 255, .2), transparent 72%); opacity: 0; pointer-events: none; transition: opacity .3s ease; }
@media (hover: hover) {
  .wf-scene-timeline__theme .wf-scene-timeline__source:hover, .wf-scene-timeline__theme .wf-scene-timeline__variants:hover { box-shadow: 0 12px 28px rgba(255, 255, 255, .1); }
  .wf-scene-timeline__theme .wf-scene-timeline__source:hover::after, .wf-scene-timeline__theme .wf-scene-timeline__variants:hover::after { opacity: 1; }
}
.wf-scene-timeline__image { position: relative; display: block; width: 100%; aspect-ratio: 344 / 711; border: 1px solid rgba(255,255,255,.25); border-radius: 9px; overflow: hidden; backface-visibility: hidden; transform: perspective(1100px) rotateY(180deg); transform-origin: center; transition: transform .8s cubic-bezier(.2,.72,.2,1); }
.wf-scene-timeline__theme.is-active .wf-scene-timeline__image { transform: perspective(1100px) rotateX(var(--scene-tilt-x,0deg)) rotateY(var(--scene-tilt-y,0deg)) scale(var(--scene-hover-scale,1)); }
.wf-scene-timeline__image::after { content: ''; position: absolute; inset: 0; z-index: 1; padding: 1px; border-radius: inherit; background: radial-gradient(circle 50px at var(--scene-specular-x,50%) var(--scene-specular-y,0%),#fff 0,#fff 10px,transparent 50px); -webkit-mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); mask-composite: exclude; opacity: var(--scene-specular-opacity,0); pointer-events: none; transition: opacity .35s ease; }
.wf-scene-timeline__theme .wf-scene-timeline__variants { grid-column: 3; opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility 0s .28s, box-shadow .3s ease; }
.wf-scene-timeline__theme.is-active .wf-scene-timeline__variants { opacity: 1; visibility: visible; transition-delay: .3s,0s,0s; }
.wf-scene-timeline__source { padding: 67px 20px 13px; }
.wf-scene-timeline__original { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.wf-scene-timeline__variants { display: flex; flex-direction: column; padding: 18px 16px 14px; }
.wf-scene-timeline__note { margin: 0 0 16px; color: white; font-size: clamp(12px, 1.12vw, 18px); line-height: 1.5; }
.wf-scene-timeline__rail { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9.45%; align-items: start; margin-top: auto; }
.wf-scene-timeline__state { position: relative; min-width: 0; margin: 0; }
.wf-scene-timeline__crop { position: relative; width: 100%; aspect-ratio: 315 / 648; border-radius: 9px; overflow: hidden; }
.wf-scene-timeline__crop img { position: absolute; top: -4.01%; left: -.06%; max-width: none; width: 100.13%; height: 104.01%; object-fit: fill; }
.wf-scene-timeline__state figcaption { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 15px; font-size: clamp(12px, 1.1vw, 18px); white-space: nowrap; }
.wf-scene-timeline__state figcaption strong { color: #fff; font-size: 1.13em; font-weight: 600; }
.wf-scene-timeline__state figcaption > span:last-child { color: rgba(255, 255, 255, .75); }
.wf-scene-divider { display: block; align-self: center; flex: 0 0 2px; width: 2px; height: 1em; border-radius: 1px; background: rgba(255,255,255,.75); }
.wf-scene-divider img { display: none; }
.wf-scene-arrow { display: grid; place-items: center; pointer-events: none; }
.wf-scene-arrow img { max-width: none; transform: rotate(-90deg) scale(.75); }
.wf-scene-arrow--between { position: absolute; left: 100%; top: 45%; width: 35%; height: 34px; }
.wf-iteration-layout { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(260px, 1fr); align-items: center; gap: clamp(40px, 6vw, 90px); }
.wf-iteration-drafts { display: grid; gap: 28px; padding: 18px 14px; }
.wf-iteration-row h3 { margin: 0 0 12px; color: #fff; font-size: clamp(18px, 1.6vw, 26px); font-weight: 600; line-height: 1.4; }
.wf-iteration-row__body { display: grid; grid-template-columns: minmax(0, 2.05fr) minmax(0, 1fr); align-items: start; gap: 18px; }
.wf-iteration-images { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.wf-iteration-image { position: relative; aspect-ratio: 218 / 373; overflow: hidden; border-radius: 8px; }
.wf-iteration-image img { width: 100%; height: 100%; object-fit: cover; }
.wf-iteration-image--cropped img { position: absolute; top: -24.99%; left: -.06%; width: 100.13%; height: 124.99%; max-width: none; object-fit: fill; }
.wf-iteration-notes { display: grid; gap: 13px; }
.wf-iteration-notes h4 { margin: 0 0 7px; padding: 4px 8px; border: 1px solid #0095ff; border-right-color: transparent; border-radius: 8px; background: linear-gradient(90deg, #0735aa, rgba(0, 33, 153, 0) 89%); color: #fff; font-size: clamp(15px, 1.3vw, 22px); line-height: 1.25; font-weight: 600; }
.wf-iteration-notes h4.wf-iteration-notes__reason { border-color: #ff0004; border-right-color: transparent; background: linear-gradient(90deg, #aa070a, rgba(153, 0, 23, 0) 89%); }
.wf-iteration-notes ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.wf-iteration-notes li { display: flex; align-items: baseline; gap: 5px; color: #fff; font-size: clamp(12px, 1.08vw, 17px); line-height: 1.45; }
.wf-iteration-dot { display: inline-grid; flex: 0 0 7px; width: 7px; height: 7px; place-items: center; }
.wf-iteration-dot img { max-width: none; transform: scale(.65); }
.wf-iteration-final { position: relative; width: min(100%, 355px); aspect-ratio: 1339 / 2716; margin: 0 auto; }
.wf-iteration-final__screen { position: absolute; left: 5.6%; top: 2.94%; width: 88.8%; height: 94.67%; overflow: hidden; border-radius: 6.65% / 3.06%; background: white; }
.wf-iteration-final__screen img { width: 100%; height: 100%; object-fit: cover; }
.wf-iteration-final__frame { position: relative; z-index: 1; width: 100%; height: auto; pointer-events: none; }
@media (max-width: 1120px) {
  .wf-scene-timeline__source { padding-top: 56px; }
  .wf-scene-arrow img { transform: rotate(-90deg) scale(.55); }
  .wf-scene-timeline__state figcaption { gap: 6px; font-size: 12px; }
  .wf-iteration-layout { grid-template-columns: minmax(0, 1.8fr) minmax(190px, .8fr); gap: 25px; }
  .wf-iteration-row__body { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wf-iteration-images { gap: 10px; }
  .wf-iteration-notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
  .wf-iteration-notes li { font-size: 12px; }
}
@media (max-width: 760px) {
  .wf-scene-timeline__scroll { margin-right: -20px; padding-right: 20px; }
  .wf-scene-timeline__layout { min-width: 940px; }
  .wf-scene-timeline__themes { min-width: 940px; }
  .wf-iteration-layout { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .wf-iteration-drafts { gap: 30px; padding: 16px; }
  .wf-iteration-row h3 { font-size: 19px; }
  .wf-iteration-images { gap: 10px; }
  .wf-iteration-notes { gap: 13px; }
  .wf-iteration-notes h4 { font-size: 16px; }
  .wf-iteration-notes li { font-size: 12px; }
  .wf-iteration-final { width: min(76%, 310px); }
}
@media (prefers-reduced-motion: reduce) {
  .wf-scene-timeline__switch button, .wf-scene-timeline__image, .wf-scene-timeline__theme .wf-scene-timeline__variants { transition: none; }
  .wf-scene-timeline__theme .wf-scene-timeline__source, .wf-scene-timeline__theme .wf-scene-timeline__source::after, .wf-scene-timeline__theme .wf-scene-timeline__variants::after { transition: none; }
  .wf-scene-timeline__image { transform: none; visibility: hidden; }
  .wf-scene-timeline__theme.is-active .wf-scene-timeline__image { transform: none; visibility: visible; }
}