/* Studio editor demo (screen-studio-alternative page): auto-zoom on a click, a blur mask, export.
   Without JS (or with reduced motion) the figure shows its final state: everything visible at once. */
.ss { margin: 24px 0 8px; }
.ss-card { position: relative; background: var(--card); border-radius: 30px; padding: 18px 18px 14px; box-shadow: 0 6px 0 rgba(11,36,64,.08), 0 26px 60px rgba(11,36,64,.11); display: grid; gap: 14px; }
.ss-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 444px) minmax(0, 1fr); gap: clamp(12px, 3vw, 28px); align-items: center; }
.ss-main { min-width: 0; display: grid; gap: 10px; }

/* Canvas: gradient background, padding, rounded frame */
.ss-canvas { position: relative; aspect-ratio: 16 / 9; border: 3px solid var(--navy); border-radius: 18px; overflow: hidden; background: linear-gradient(135deg, #FFE9A8 0%, #FFC2A6 42%, #A9C8F5 100%); }
.ss-frame { position: absolute; left: 13%; right: 13%; top: 9%; bottom: 9%; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 10px 26px rgba(11,36,64,.32), 0 0 0 1.5px rgba(11,36,64,.25); }
.ss-zoom { position: absolute; inset: 0; transform-origin: 0 0; transition: transform 1s cubic-bezier(.65, 0, .35, 1); will-change: transform; }
.ss-zoom.z-chart { transform: translate(-25.6%, -27.6%) scale(1.8); }
.ss-zoom.z-table { transform: translate(0, -80%) scale(1.8); }
.ss-pic { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.ss-blur { position: absolute; left: 17.6%; top: 70.4%; width: 11.4%; height: 27%; border-radius: 6px; background: rgba(234,243,252,.35); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 0 0 1.5px rgba(11,36,64,.55); transition: opacity .35s ease; }

/* Cursor: the wrapper is as big as the picture, so translate percentages are picture percentages */
.ss-cur { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; transform: translate(86%, 92%); transition: transform .9s cubic-bezier(.65, 0, .35, 1); }
.ss-cur svg { position: absolute; left: 0; top: 0; width: 14px; height: 20px; filter: drop-shadow(0 1px 1.5px rgba(11,36,64,.45)); }
.ss-rip { position: absolute; left: -14px; top: -14px; width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--rec); opacity: 0; }

/* Timeline */
.ss-tl { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 8px; align-items: center; }
.ss-tl-labels { display: grid; gap: 6px; font: 700 11px/16px var(--display); color: var(--navy); text-align: right; }
.ss-lanes { position: relative; display: grid; gap: 6px; }
.ss-lane { position: relative; height: 16px; border-radius: 6px; background: #E3EDF8; }
.ss-seg { position: absolute; top: 0; bottom: 0; border-radius: 6px; border: 2.5px solid var(--navy); transform-origin: 0 50%; transition: transform .4s ease, opacity .3s; }
.ss-seg-zoom { background: var(--sun); }
.ss-seg-blur { background: #fff; background-image: repeating-linear-gradient(135deg, rgba(11,36,64,.18) 0 3px, transparent 3px 7px); }
.ss-ph { position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--rec); right: 0; transition: transform 1.2s ease-in-out; }
.ss-ph::before { content: ""; position: absolute; left: -3px; top: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--rec); }

/* Feature tags (left) and export chips (right) */
.ss-tags { display: grid; gap: 8px; justify-items: end; }
.ss-tag { padding: 5px 10px; border-radius: 10px; border: 2.5px solid var(--navy); background: var(--sun); box-shadow: 0 3px 0 var(--navy); font: 700 13px/1.2 var(--display); color: var(--navy); white-space: nowrap; transition: opacity .3s, background-color .3s, transform .3s; }
.ss-chips { display: grid; gap: 10px; justify-items: start; }
.ss-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 12px; border: 3px solid var(--navy); background: #fff; box-shadow: 0 4px 0 var(--navy); font: 800 14px/1 var(--display); color: var(--navy); white-space: nowrap; transition: opacity .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1); }
.ss-chip svg { width: 15px; height: 15px; flex: none; }
.ss-chip-mp4 { background: var(--sun); }

/* Caption + controls */
.ss-foot { display: flex; align-items: center; gap: 12px; min-height: 40px; }
.ss-step { flex: none; width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; background: var(--sun); border: 3px solid var(--navy); box-shadow: 0 3px 0 var(--navy); font: 800 14px/1 var(--display); color: var(--navy); }
.ss-cap { flex: 1; min-width: 0; margin: 0; font-size: 15px; line-height: 1.35; color: var(--body); transition: opacity .25s; }
.ss-cap b { color: var(--navy); }
.ss-btn { flex: none; display: none; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 12px; border: 2.5px solid var(--navy); background: #fff; color: var(--navy); font: 700 13px/1 var(--display); cursor: pointer; box-shadow: 0 3px 0 var(--navy); }
.ss-btn:active { translate: 0 2px; box-shadow: 0 1px 0 var(--navy); }
.ss-btn svg { width: 12px; height: 12px; }
.ss-steps { margin: 0; padding: 0 4px; list-style: none; display: grid; gap: 6px; font-size: 14.5px; color: var(--body); counter-reset: ss; }
.ss-steps li { display: flex; gap: 8px; }
.ss-steps li::before { counter-increment: ss; content: counter(ss); flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--sun); border: 2px solid var(--navy); font: 800 12px/1 var(--display); color: var(--navy); }

/* JS-driven states. Default (no JS): final state, captions list shown. */
.ss.is-js .ss-steps { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ss.is-js .ss-btn { display: inline-flex; }
.ss:not(.is-js) .ss-foot { display: none; }
.ss.is-js .ss-ph { left: 0; right: auto; }
.ss.is-js .ss-seg.is-off { transform: scaleX(0); opacity: 0; }
.ss.is-js .ss-blur.is-off { opacity: 0; }
.ss.is-js .ss-tag.is-off { opacity: .45; background: #fff; }
.ss.is-js .ss-chip.is-off { opacity: 0; transform: translateX(-10px) scale(.85); }

@media (max-width: 720px) {
  .ss-card { padding: 14px 12px 12px; border-radius: 24px; }
  .ss-stage { grid-template-columns: minmax(0, 1fr); }
  .ss-tags { display: none; }
  .ss-chips { grid-auto-flow: column; justify-content: center; }
  .ss-cap { font-size: 14px; }
}
/* Break out of the narrow text column on wide screens so the demo has room. */
@media (min-width: 900px) {
  .ss { margin-left: calc(50% - min(440px, 50vw - 24px)); margin-right: calc(50% - min(440px, 50vw - 24px)); }
}