.product-spot{background:var(--color-snow)}.spot-heading{justify-content:space-between;align-items:end;gap:48px;margin-bottom:40px;display:flex}.spot-heading h2{max-width:720px}.spot-heading>p{max-width:360px;color:var(--color-ink-muted);font-size:18px;line-height:1.8}.spot-panel{border-color:var(--color-lavender);overflow:hidden}.spot-stage{aspect-ratio:16/9;background:var(--color-canvas);position:relative;overflow:hidden}.spot-stage:fullscreen{aspect-ratio:auto;width:100vw;height:100vh}.spot-frame{opacity:0;pointer-events:none;border:0;width:100%;height:100%;position:absolute;inset:0}.spot-frame--ready{opacity:1}.spot-poster{background:radial-gradient(ellipse at center, var(--color-canvas), var(--color-surface-2));flex-direction:column;justify-content:center;align-items:center;gap:24px;display:flex;position:absolute;inset:0}.spot-poster img{width:28%;height:auto}.spot-poster p{color:var(--color-ink-muted);font-size:16px}.spot-example{color:var(--color-ink-muted);background:var(--color-canvas);border-radius:4px;padding:4px 8px;font-size:14px;position:absolute;bottom:12px;left:16px}.spot-expand{background:var(--color-canvas);position:absolute;top:12px;right:12px}.spot-controls{border-top:1px solid var(--color-hairline);background:var(--color-canvas);align-items:center;gap:12px;padding:12px 20px;display:flex}.spot-controls input{min-width:0;height:24px;accent-color:var(--color-primary);cursor:pointer;flex:1}.spot-time{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--color-ink-muted);font-size:14px}@media (max-width:991px){.spot-heading{flex-direction:column;align-items:start;gap:20px}.spot-heading>p{max-width:640px}}@media (max-width:767px){.spot-heading{margin-bottom:24px}.spot-heading h2{font-size:32px}.spot-controls{gap:4px;padding:8px}.spot-controls button{padding-inline:8px}.spot-example{font-size:12px;bottom:8px;left:8px}.spot-expand{top:4px;right:4px}.spot-time{font-size:12px}}