/* E04–E10: original small native effects, scoped to the corresponding component.
 * Initial state is readable and static. Essential text/actions sit outside masks. */
.dpe-effect [data-dp-overlay]{pointer-events:none;user-select:none}
.dpe-effect [data-dp-panel][hidden],.dpe-effect [data-dp-art][hidden]{display:none!important}
.dpe-effect[data-dp-effect=flow-beam] .dpe-flow-track{position:relative;min-width:0;height:2.75rem}
.dpe-effect[data-dp-effect=flow-beam] .dpe-flow-line{position:absolute;inset-inline:0;top:calc(50% - 1px);height:2px;background:var(--line,#dce1ed)}
.dpe-effect[data-dp-effect=flow-beam] .dpe-flow-dot{position:absolute;top:calc(50% - .25rem);left:0;width:.5rem;height:.5rem;border-radius:50%;background:var(--blue,#5060c7);opacity:0;box-shadow:0 0 .75rem #5060c74d}
/* Low-specificity defaults let the actual example retain its contrast and shape. */
:where(.dpe-effect:is([data-dp-effect=pixel-transition],[data-dp-effect=circle-reveal])) .dpe-stage{position:relative;min-width:0;height:var(--dpe-stage-height,13rem);min-height:0;border-radius:12px;isolation:isolate;overflow:hidden;background:var(--surface-soft,#eff1fa)}
:where(.dpe-effect:is([data-dp-effect=pixel-transition],[data-dp-effect=circle-reveal])) [data-dp-art]{position:absolute;inset:0;z-index:var(--dpe-art-z,auto);box-sizing:border-box;border-radius:inherit;background:var(--surface,#fff)}
.dpe-effect[data-dp-effect=pixel-transition] .dpe-pixel-overlay{position:absolute;z-index:3;inset:0;display:grid;grid-template-columns:repeat(8,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));overflow:hidden}
.dpe-effect[data-dp-effect=pixel-transition] .dpe-pixel{display:block;min-width:0;min-height:0;opacity:0;background:var(--blue,#5060c7)}
.dpe-effect[data-dp-effect=scroll-stack]{--dpe-stack-top:7rem}
.dpe-effect[data-dp-effect=scroll-stack] .dpe-stack{display:grid;gap:1.5rem;min-width:0;align-items:start}
.dpe-effect[data-dp-effect=scroll-stack] .dpe-stack-item{position:relative;box-sizing:border-box;min-width:0;padding:1.5rem;border:1px solid var(--line,#dce1ed);border-radius:12px;background:var(--surface,#fff);color:var(--ink,#1c2334);overflow-wrap:anywhere}
@media(min-width:60rem) and (min-height:40rem) and (prefers-reduced-motion:no-preference){.dpe-effect[data-dp-effect=scroll-stack][data-dp-ready=true][data-dp-stack-fit=true] .dpe-stack-item{position:sticky;top:calc(var(--dpe-stack-top,7rem) + var(--dpe-stack-index,0)*.75rem)}}
.dpe-effect[data-dp-effect=text-scramble] [data-dp-output]{display:none}
.dpe-effect[data-dp-effect=text-scramble] .dpe-scramble-word{display:inline-grid;max-width:100%;font-family:ui-monospace,SFMono-Regular,Consolas,monospace;white-space:pre-wrap;overflow-wrap:anywhere}
.dpe-effect[data-dp-effect=text-scramble] .dpe-scramble-word>[data-dp-text],.dpe-effect[data-dp-effect=text-scramble] .dpe-scramble-word>[data-dp-output]{grid-area:1/1;min-width:0}
.dpe-effect[data-dp-effect=text-scramble][data-dp-ready=true][data-dp-scramble-ready=true] [data-dp-text]{opacity:0}
.dpe-effect[data-dp-effect=text-scramble][data-dp-ready=true][data-dp-scramble-ready=true] [data-dp-output]{display:inline-block}
.dpe-effect[data-dp-effect=magnet].dpe-magnet-hit,.dpe-effect[data-dp-effect=magnet] .dpe-magnet-hit{display:inline-flex;align-items:center;justify-content:center;min-height:44px}
.dpe-effect[data-dp-effect=magnet] [data-dp-surface]{display:inline-block;pointer-events:none}
.dpe-effect[data-dp-effect=magnet][data-dp-ready=true] [data-dp-surface]{transform:var(--dpe-base-transform,translate(0)) translate(var(--dpe-mx,0px),var(--dpe-my,0px));transition:transform 120ms ease-out}
.dpe-effect[data-dp-effect=aurora] .dpe-aurora-stage{position:relative;isolation:isolate;min-width:0;border-radius:12px;overflow:hidden;background:var(--surface-soft,#eff1fa)}
.dpe-effect[data-dp-effect=aurora] .dpe-aurora-layer{position:absolute;z-index:-1;inset:-12%;opacity:.55;background:radial-gradient(ellipse at 20% 35%,#5060c78c,transparent 58%),radial-gradient(ellipse at 75% 65%,#705bc561,transparent 55%),radial-gradient(ellipse at 55% 15%,#97b9eb6b,transparent 53%)}
.dpe-effect[data-dp-effect=aurora] .dpe-aurora-content{position:relative;min-height:13rem}
.dpe-effect[data-dp-effect=aurora][data-dp-ready=true][data-dp-running=true] .dpe-aurora-layer{animation:dpe-aurora-drift 1600ms ease-in-out 1}
@keyframes dpe-aurora-drift{0%,100%{transform:translate(0) scale(1)}45%{transform:translate(4%,-3%) scale(1.04)}75%{transform:translate(-2%,2%) scale(1.02)}}
@media(prefers-reduced-motion:reduce),(hover:none),(pointer:coarse){.dpe-effect[data-dp-effect=magnet] [data-dp-surface]{transform:none;transition:none}}
@media(prefers-reduced-motion:reduce){.dpe-effect[data-dp-effect=aurora] .dpe-aurora-layer{animation:none!important}}
@media print,(forced-colors:active){.dpe-effect[data-dp-effect=aurora] .dpe-aurora-layer,.dpe-effect[data-dp-effect=pixel-transition] .dpe-pixel-overlay,.dpe-effect[data-dp-effect=flow-beam] .dpe-flow-dot{display:none!important}.dpe-effect[data-dp-effect=scroll-stack] .dpe-stack-item{position:static!important}}