.collection-demo { width:100%; max-width:580px; margin:auto; border:1px solid #E3DDEF; border-radius:20px; background:#FAF9FD; overflow:hidden; color:#504A60; text-align:left; box-shadow:0 16px 48px #29203C08; }
.collection-demo-bar { display:flex; align-items:center; gap:9px; padding:18px 22px; background:white; border-bottom:1px solid #E8E3F0; font-size:14px; }
.collection-demo-bar svg { width:20px; height:20px; color:#6943EF; }
.collection-demo-bar > span { margin-left:auto; font-size:11px; color:#827A90; }
.collection-source-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:24px 20px 0; }
.collection-source { border:1px solid #DED8E8; border-radius:9px; overflow:hidden; background:white; }
.collection-source-top { display:flex; gap:5px; align-items:center; padding:9px 7px; border-bottom:1px solid #EEEAF4; font-size:10px; white-space:nowrap; }
.collection-source-top i { width:5px; height:5px; border-radius:50%; background:#967CDA; }
.collection-source-page { height:66px; padding:13px 9px; display:flex; gap:7px; position:relative; overflow:hidden; }
.collection-thumbnail { width:28px; background:#EAE4F5; border-radius:4px; }
.collection-source-page > div + div { flex:1; }
.collection-source-page b { display:block; height:4px; background:#DCD5E8; margin:5px 0; border-radius:2px; }
.collection-source-page b:last-child { width:55%; background:#9B83DA; }
.collection-scan { position:absolute; inset:0; background:linear-gradient(transparent 45%,#A88AFF45 85%,#9671EF 100%); animation:source-scan 6s linear infinite; animation-delay:var(--offset); }
.collection-read { position:relative; padding:7px; font-size:9px; color:#85759F; border-top:1px solid #EEEAF4; }
.collection-read span { position:absolute; inset:0; padding:7px; background:#F2F8F3; color:#3D7853; animation:source-done 6s infinite; animation-delay:var(--offset); }
.collection-stream { display:flex; justify-content:space-around; height:40px; margin:0 40px; overflow:hidden; }
.collection-stream i { width:2px; height:18px; background:#AC95DF; animation:source-flow 6s infinite; }
.collection-output { display:flex; align-items:center; gap:10px; padding:16px; margin:0 20px 24px; border:1px solid #CBDDCE; border-radius:9px; background:#F1F8F2; font-size:13px; color:#396449; }
.collection-output > span:last-child { margin-left:auto; font-size:10px; }
.collection-persona { padding:20px 24px 16px; display:grid; gap:5px; font-size:12px; }
.collection-persona > span { color:#827A90; font-size:11px; }
.collection-form { position:relative; margin:0 24px 24px; padding:0 18px 18px; background:white; border:1px solid #DED8E8; border-radius:10px; overflow:hidden; }
.collection-form-title { padding:12px 0; border-bottom:1px solid #EEEAF4; margin-bottom:14px; font-size:11px; }
.collection-window-dots { color:#C3B7D7; letter-spacing:2px; margin-right:8px; }
.collection-field { display:grid; grid-template-columns:85px 1fr; align-items:center; gap:12px; margin:10px 0; font-size:12px; }
.collection-field > div { border:1px solid #DCD5E8; border-radius:6px; padding:9px 11px; min-height:36px; display:flex; justify-content:space-between; }
.collection-field b { font-weight:400; white-space:nowrap; overflow:hidden; animation:form-type 8s steps(14,end) infinite; animation-delay:var(--start); }
.collection-submit { margin-top:16px; padding:10px 14px; background:white; color:#6943EF; border:1px solid #DCD5E8; border-radius:6px; text-align:center; font-size:12px; animation:form-submit 8s infinite; }
.collection-submit span { float:right; }
.collection-offer { position:absolute; inset:45px 16px 16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:#F1F8F2; border:1px solid #CBDDCE; border-radius:8px; color:#396449; animation:form-offer 8s infinite; }
.collection-offer > span { font-size:12px; }.collection-offer strong { font-size:42px; }.collection-offer strong span { font-size:14px; font-weight:400; }.collection-offer small { font-size:11px; }
@keyframes source-scan { 0% { transform:translateY(-100%); } 45%,100% { transform:translateY(100%); } }
@keyframes source-done { 0%,43% { opacity:0; } 50%,88% { opacity:1; } 98%,100% { opacity:0; } }
@keyframes source-flow { 0%,45% { opacity:0; transform:translateY(-20px); } 50% { opacity:1; } 75%,100% { transform:translateY(50px); opacity:0; } }
@keyframes form-type { 0%,5% { max-width:0; } 15%,85% { max-width:170px; } 100% { max-width:0; } }
@keyframes form-submit { 0%,45%,60%,100% { background:white; border-color:#DCD5E8; } 50%,55% { background:#F7F5FC; border-color:#A58BF5; } }
@keyframes form-offer { 0%,58%,98%,100% { opacity:0; transform:translateY(8px); } 65%,90% { opacity:1; transform:none; } }
.collection-demo:not(.is-visible) * { animation-play-state:paused; }
@media (prefers-reduced-motion:reduce) { .collection-demo * { animation:none!important; } .collection-scan,.collection-stream i { display:none; } .collection-offer { position:static; padding:14px; margin-top:14px; } }
@media (max-width:420px) { .collection-source-grid { gap:7px; padding:16px 12px 0; }.collection-source-top { font-size:9px; }.collection-output { margin:0 12px 16px; flex-wrap:wrap; }.collection-output > span:last-child { margin-left:0; }.collection-demo-bar { padding:14px; }.collection-field { grid-template-columns:65px 1fr; gap:6px; }.collection-form { margin:0 14px 16px; } }