/* Drag-to-animate frames, shared by both pages. */
.scx { display: grid; gap: 12px; }
.scx-pic { position: relative; border-radius: var(--radius); overflow: hidden; background: #0b0c0e; touch-action: pan-y; cursor: ew-resize; user-select: none; -webkit-user-select: none; box-shadow: 0 0 0 1px rgba(255, 216, 163, .08); }
.scx-pic img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; pointer-events: none; }
.scx-hint { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: 999px; background: rgba(6, 7, 8, .7); color: var(--bone); font: 500 11px/1 var(--f-mono); letter-spacing: .08em; text-transform: uppercase; transition: opacity .4s; }
.scx[data-touched] .scx-hint { opacity: 0; }
.scx-row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; font: 500 11px/1 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-dark); }
.scx-row input[type=range] { width: 100%; height: 44px; background: transparent; accent-color: var(--beam); cursor: pointer; }
.scx-row input[type=range]::-webkit-slider-thumb { width: 28px; height: 28px; }

/* Coming soon optic section. */
.opx__head { max-width: 760px; margin-bottom: 28px; }
.opx__grid { display: grid; gap: 32px; }
.opx__steps { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; }
.opx__steps li { color: var(--mute-dark); font-size: 15px; line-height: 1.5; }
.opx__steps b { display: block; font: 700 13px/1.2 var(--f-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 216, 163, .85); margin-bottom: 2px; }
@media (min-width: 900px) { .opx__grid { grid-template-columns: 1fr 1fr; } }

@media (min-width: 900px) { .opx__wide { grid-column: 1 / -1; } }