.fp .dl { --dl-h: clamp(220px, 22vw, 320px); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px; margin: 0 0 30px; }
.fp .dl-clip { margin: 0; }
.fp .dl-wide { width: calc(var(--dl-h) * 16 / 9); max-width: 100%; }
.fp .dl-tall { width: calc(var(--dl-h) * 9 / 16); }
.fp .dl-wide .dl-box { aspect-ratio: 16 / 9; }
.fp .dl-tall .dl-box { aspect-ratio: 9 / 16; }
.fp .dl-box { position: relative; border-radius: var(--r-sm); overflow: hidden; background: linear-gradient(140deg, #E9E4FA, #DCE6F7); box-shadow: 0 14px 34px -18px rgba(23, 21, 42, .45); }
.fp .dl-tall .dl-box { background: linear-gradient(160deg, #3B2D6B, #6B4A9B); }
.fp .dl-box video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.fp .dl-speed { position: absolute; top: 8px; left: 8px; padding: 4px 7px; border-radius: 6px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 700 11px/1 var(--text); letter-spacing: .01em; pointer-events: none; }
.fp .dl-cap { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: flex-start; pointer-events: none; font-style: normal; }
.fp .dl-cap:empty { display: none; }
.fp .dl-cap span { max-width: 100%; padding: 6px 9px; border-radius: 8px; background: rgba(23, 21, 42, .78); color: #fff; font: 700 13px/1.3 var(--text); animation: fadein .3s ease; }
.fp .dl-cap b { color: #FFC94D; margin-right: 2px; }
.fp .dl-tall .dl-cap span { font-size: 12px; padding: 5px 7px; }
.fp .dl-note { position: absolute; top: 8px; right: 8px; max-width: calc(100% - 16px); display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 12px 12px 4px 12px; background: #fff; color: var(--ink); font: 600 13px/1.3 var(--text); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); opacity: 0; transform: translateY(-4px) scale(.96); transition: opacity .2s, transform .25s; pointer-events: none; }
.fp .dl-note::before { content: "You"; font-weight: 800; color: var(--v-cta, #FF6B3D); }
.fp .dl-note.on { opacity: 1; transform: none; }
.fp .dl-note-t::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 1px; vertical-align: -2px; background: var(--ink); animation: dl-caret .8s steps(1) infinite; }
.fp .dl-note.done .dl-note-t::after { display: none; }
@keyframes dl-caret { 50% { opacity: 0; } }
.fp .dl-tall .dl-note { top: 34px; font-size: 12px; padding: 6px 8px; }
.fp .dl-play { position: absolute; inset: 0; margin: auto; width: 60px; height: 60px; border-radius: 50%; background: rgba(255, 255, 255, .94); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(0, 0, 0, .25); }
.fp .dl-play[hidden] { display: none; }
.fp .dl-play span { width: 0; height: 0; border-left: 18px solid var(--ink); border-top: 11px solid transparent; border-bottom: 11px solid transparent; margin-left: 5px; }
.fp .dl-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.fp .dl.dl-still .dl-steps { position: static; width: 100%; height: auto; clip: auto; white-space: normal; overflow: visible; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; list-style: none; counter-reset: dl; color: var(--ink-2); font-size: 14px; }
.fp .dl.dl-still .dl-steps li { counter-increment: dl; }
.fp .dl.dl-still .dl-steps li::before { content: counter(dl) " · "; font-weight: 800; }
.fp .dl-fine { width: 100%; text-align: center; color: var(--ink-3); font-size: 12.5px; margin-top: -6px; }
.fp .in9 { margin-top: 40px; }
.fp .in9-h { font: 800 19px/1.2 var(--display); margin-bottom: 14px; }
.fp .in9-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, .36fr); gap: 18px; align-items: start; }
.fp .in9-shot { margin: 0; }
.fp .in9-frame { position: relative; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--hair); box-shadow: 0 12px 30px -20px rgba(23, 21, 42, .5); }
.fp .in9-desk .in9-frame { padding-top: 22px; background: #F4F2F8; }
.fp .in9-dots { position: absolute; top: 8px; left: 10px; display: flex; gap: 5px; }
.fp .in9-dots i { width: 7px; height: 7px; border-radius: 50%; background: #D6D2E2; }
.fp .in9-frame img { display: block; width: 100%; height: auto; }
.fp .in9-desk img { aspect-ratio: 16 / 9; }

.fp .in9-phone .in9-frame { overflow: visible; border: 0; border-radius: 40px; padding: 8px; background: #1C1A27; box-shadow: 0 0 0 1.5px #3A3747 inset, 0 18px 36px -20px rgba(23, 21, 42, .6); }
.fp .in9-phone .in9-frame::before, .fp .in9-phone .in9-frame::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #2A2736; }
.fp .in9-phone .in9-frame::before { left: -3px; top: 20%; height: 12%; }
.fp .in9-phone .in9-frame::after { right: -3px; top: 26%; height: 17%; }
.fp .in9-screen { position: relative; overflow: hidden; border-radius: 32px; background: #fff; }
.fp .in9-status { position: relative; display: flex; align-items: center; justify-content: space-between; height: 34px; padding: 4px 22px 0 26px; font: 700 12px/1 var(--text, system-ui); color: #1C1A27; }
.fp .in9-status i { width: 22px; height: 10px; border: 1.5px solid #1C1A27; border-radius: 3px; position: relative; opacity: .85; }
.fp .in9-status i::after { content: ""; position: absolute; inset: 1.5px 4px 1.5px 1.5px; background: #1C1A27; border-radius: 1px; }
.fp .in9-island { position: absolute; left: 50%; top: 8px; width: 31%; height: 21px; margin-left: -15.5%; border-radius: 12px; background: #1C1A27; }
.fp .in9-phone img { aspect-ratio: 390 / 555; }
.fp .in9-home { display: block; height: 22px; position: relative; }
.fp .in9-home::after { content: ""; position: absolute; left: 50%; bottom: 8px; width: 36%; height: 4px; margin-left: -18%; border-radius: 3px; background: #1C1A27; }
.fp .in9-shot figcaption { margin-top: 9px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
@media (max-width: 900px) {
  
  .fp .in9-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; scrollbar-width: none; }
  .fp .in9-row > * { flex: none; scroll-snap-align: start; }
  .fp .in9-row > .in9-desk { width: min(78vw, 560px); }
  .fp .in9-row > .in9-phone { width: min(40vw, 200px); }
}
@media (max-width: 640px) {
  .fp .dl { gap: 14px; margin-bottom: 22px; }
  .fp .dl-wide { width: 100%; }
  .fp .dl-tall { width: min(52%, 220px); }
  .fp .in9 { margin-top: 28px; }
  
  .fp .in9-row { flex-direction: column; overflow: visible; scroll-snap-type: none; gap: 30px; padding-bottom: 0; }
  .fp .in9-row > .in9-desk { width: auto; margin: 0 calc(6px - var(--gut, 16px)); }
  .fp .in9-desk .in9-frame { border-radius: 14px; }
  .fp .in9-live img { aspect-ratio: 580 / 544; }
  .fp .in9-chamber img { aspect-ratio: 544 / 496; }
  .fp .in9-desk figcaption { padding: 0 calc(var(--gut, 16px) - 6px); }
  .fp .in9-row > .in9-phone { width: min(68vw, 270px); align-self: center; }
  .fp .in9-shot figcaption { font-size: 16px; }
  .fp .in9-phone figcaption { text-align: center; }
}