.spin-intro[data-preview=true]{text-align:left;grid-template-columns:minmax(0,1fr) 240px;align-items:center;gap:clamp(28px,6vw,80px);max-width:940px;display:grid}.spin-intro[data-preview=true] .effects-lead{margin-left:0}.spin-intro .spin-example{background:var(--effects-surface);width:240px;padding:8px;display:block}.spin-intro .effects-example-frame{aspect-ratio:9/16;max-height:none}.spin-intro .effects-example figcaption{text-align:left;padding:10px 4px 4px}.spin-example .rap-video{height:100%}@media (width<=700px){.spin-intro[data-preview=true]{text-align:center;grid-template-columns:minmax(0,1fr);gap:22px}.spin-intro[data-preview=true] .effects-lead{margin-inline:auto}.spin-intro .spin-example{width:min(100%,220px);margin-inline:auto}.spin-intro .effects-example-frame{aspect-ratio:9/16;width:100%}}.spin-mode-fieldset,.spin-scene-fieldset{border:0;min-width:0;margin:20px 0;padding:0}.spin-mode-fieldset legend,.spin-scene-fieldset legend{color:var(--effects-ink);margin-bottom:10px;font-size:12px;font-weight:600}.spin-scene-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.spin-scene-option{border:1px solid var(--effects-line);background:var(--effects-surface);cursor:pointer;border-radius:14px;padding:5px;transition:border-color .15s,background .15s;display:block;position:relative;overflow:hidden}.spin-scene-option img{object-fit:cover;object-position:center 35%;border-radius:9px;width:100%;height:84px;display:block}.spin-scene-option>span:not(.spin-scene-check){color:var(--effects-ink);padding:9px 6px 6px;font-size:11px;font-weight:500;line-height:1.4;display:block}.spin-scene-check{background:var(--effects-accent);color:#fff;opacity:0;border-radius:50%;place-items:center;width:23px;height:23px;display:grid;position:absolute;top:11px;right:11px}.spin-scene-option:has(input:checked){border-color:var(--effects-accent);background:var(--effects-tint);box-shadow:inset 0 0 0 1px #f36b2518}.spin-scene-option:has(input:checked) .spin-scene-check{opacity:1}:is(.spin-scene-option:has(input:focus-visible),.spin-mode-option:has(input:focus-visible)){outline-offset:3px;outline:2px solid #c34e16}:is(.spin-scene-option:has(input:disabled),.spin-mode-option:has(input:disabled)){cursor:default;opacity:.6}.spin-mode-options{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.spin-mode-option{border:1px solid var(--effects-line);cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:9px;min-height:66px;padding:12px 9px;display:flex;position:relative}.spin-mode-option>svg:first-of-type{color:#777681;flex-shrink:0}.spin-mode-option:has(input:checked){border-color:var(--effects-accent);background:var(--effects-tint)}.spin-mode-option:has(input:checked)>svg:first-of-type{color:#c14c13}.spin-mode-option .effects-choice-check{width:12px;height:12px;position:absolute;top:6px;right:6px}.spin-mode-option:has(input:checked) .effects-choice-check{opacity:1}.spin-mode-option strong,.spin-mode-option small{display:block}.spin-mode-option strong{font-size:12px;font-weight:600}.spin-mode-option small{color:var(--effects-muted);margin-top:3px;font-size:10px}.spin-photo-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.spin-photo-grid[data-count="1"]{grid-template-columns:1fr}.spin-photo-grid[data-count="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}.spin-photo-grid .effects-photo-fieldset{margin-bottom:0}.spin-photo-grid .effects-photo-slot{height:135px;padding-inline:6px}.spin-photo-grid .effects-photo-slot span{text-align:center;font-size:11px}.spin-photo-grid .effects-photo-slot>svg{width:20px;height:20px;padding:10px}.spin-music-note{color:var(--effects-muted);background:#f7f6f2;border:1px solid #e8e3db;border-radius:12px;align-items:flex-start;gap:9px;margin:16px 0;padding:12px 14px;font-size:11px;line-height:1.65;display:flex}.spin-music-note svg{color:#ae4718;flex-shrink:0;margin-top:1px}@media (width<=420px){.spin-mode-option{text-align:center;flex-direction:column;gap:5px;min-height:80px;padding:10px 5px}.spin-photo-grid{gap:7px}.spin-photo-grid .effects-photo-slot{height:115px}.spin-photo-grid[data-count="3"] .effects-photo-slot>svg{padding:8px}.spin-photo-grid[data-count="3"] .effects-photo-slot span{font-size:10px}}@media (prefers-reduced-motion:reduce){.spin-scene-option{transition:none}}
