/* These effects sit above the saved pixels. Off restores the plain image. */
.sr-effects-viewport { position: relative; perspective: 1400px; }
.sr-effects-art { position: relative; width: 100%; height: 100%; transform-origin: 50% 50%; transition: transform 180ms ease-out; }
.sr-effects-viewport.sr-effects-static .sr-effects-art { transition: none; transform: none !important; }
.sr-effects-art[hidden] { display: none !important; }
.sr-effects-art > img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sr-effects-art > img[hidden] { display: none !important; }
.sr-effects-art > .sr-effects-canvas { position: absolute; display: block; pointer-events: none; }
.sr-effects-art > .sr-effects-canvas[hidden] { display: none !important; }
.sr-effects-viewport.sr-effects-interactive { cursor: grab; touch-action: pan-y; }
.sr-effects-viewport.sr-effects-interactive:active { cursor: grabbing; }
.strips-effects-panel { margin: 4px 0 24px; padding: 18px 20px; border: 1px solid #5b4b2d; border-radius: 7px; background: linear-gradient(120deg, #25211570, #12181e90); }
.strips-effects-panel .strips-section-label { margin-bottom: 13px; }
.strips-effects-panel .hint { margin: 10px 0; font-size: 11px; line-height: 1.6; }
.strips-effects-toggles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.strips-effects-toggles label { display: flex; align-items: center; gap: 7px; margin: 0 !important; font-size: 12px; }
.strips-effects-toggles [hidden] { display: none !important; }
.strips-effects-panel input { accent-color: #f5bc60; }
.strips-effects-intensity { display: block; margin: 17px 0 10px; font-size: 12px; }
.strips-effects-intensity output { float: right; color: #e8c98d; font: 11px Consolas, monospace; }
.strips-effects-intensity input[type="range"] { display: block; width: 100%; margin: 12px 0; }
.strips-effects-downloads { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 15px; }
.strips-effects-downloads button { padding: 8px 11px; min-height: 33px; font-size: 11px; }
.strips-effects-downloads .quiet { border-color: #5b4b2d; }
.strips-effects-panel [role="status"] { display: block; margin: 10px 0 0; color: #b6c2cc; font-size: 11px; line-height: 1.5; }
.sr-effects-export-page { margin: 0; min-height: 100vh; background: #0d1115; color: #edf0f4; font: 14px system-ui, sans-serif; }
.sr-effects-export-main { max-width: 1400px; margin: auto; padding: 24px; }
.sr-effects-export-main h1 { margin: 0 0 6px; font-size: 21px; font-weight: 550; }
.sr-effects-export-main p { color: #9cabbb; line-height: 1.5; }
.sr-effects-export-main .sr-effects-viewport { margin-top: 22px; width: 100%; aspect-ratio: var(--sr-art-ratio, 16 / 9); border-radius: 8px; }
.sr-effects-export-controls { display: flex; align-items: center; gap: 16px 22px; flex-wrap: wrap; margin-top: 22px; padding: 18px 0; border-top: 1px solid #33404c; }
.sr-effects-export-controls label { display: inline-flex; align-items: center; gap: 7px; }
.sr-effects-export-controls input { accent-color: #f5bc60; }
.sr-effects-export-controls button { padding: 9px 13px; background: #202a32; border: 1px solid #4c5964; border-radius: 5px; color: #edf0f4; cursor: pointer; }
.sr-effects-export-controls input[type="range"] { width: 130px; }
@media (prefers-reduced-motion: reduce) { .sr-effects-art { transition: none; } }
@media (max-width: 900px) { .strips-effects-toggles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .sr-effects-export-main { padding: 15px; } .sr-effects-export-controls { gap: 14px; font-size: 12px; } }