:root{
--dcfs-bg: #0b0a0f;
--dcfs-fg: #ffffff;
--dcfs-pink: #ff4fa3;
--dcfs-size: clamp(64px, 16vw, 220px);
--dcfs-gap-em: 0.18;
}
.dcfs-stage{
min-height: 40vh;
display:grid;
place-items:center;
overflow:hidden;
position:relative;
background: radial-gradient(60% 60% at 50% 50%, #13111a 0%, var(--dcfs-bg) 60%);
color: var(--dcfs-fg);
font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, Arial;
}
.dcfs-display{
display:flex; align-items:center; color:var(--dcfs-pink);
font-variant-numeric: tabular-nums lining-nums;
text-shadow: 0 0 24px color-mix(in oklab, var(--dcfs-pink) 40%, transparent), 0 8px 30px rgba(0,0,0,.6);
}
.dcfs-hm{
position:relative;
font-weight:900; letter-spacing:.02em;
font-size: var(--dcfs-size);
line-height:.9;
}
.dcfs-colon{ animation: dcfs-blink 1s steps(1,end) infinite; transform: translateY(-.05em); }
@keyframes dcfs-blink { 0%,49%{opacity:1} 50%,100%{opacity:.25} }
.dcfs-flyer{
position:fixed; pointer-events:none; user-select:none;
font-weight:900; font-variant-numeric: tabular-nums lining-nums;
letter-spacing:.02em; line-height:.9;
font-size: var(--dcfs-size);
color:var(--dcfs-pink);
text-shadow: 0 0 24px color-mix(in oklab, var(--dcfs-pink) 40%, transparent), 0 8px 26px rgba(0,0,0,.7);
opacity:.98;
transition:
left 900ms cubic-bezier(.2,.7,.2,1),
top  900ms cubic-bezier(.2,.7,.2,1),
opacity .2s linear,
transform 900ms cubic-bezier(.2,.7,.2,1);
will-change: left, top, opacity, transform;
}