.dc-demo{max-width:1080px;margin:56px auto 0;position:relative;container-type:inline-size}.dc-src{background:#fff;border-radius:999px;align-items:center;gap:10px;height:46px;padding:0 18px 0 6px;font-size:15px;font-weight:600;display:inline-flex;box-shadow:0 0 0 1px #1111110f,0 10px 24px -12px #11111140}.dc-src img{background:#ffe1c2;border-radius:50%;width:34px;height:34px}.dc-src svg{color:#f5a524}.dc-stage{--gap:clamp(16px, 3vw, 40px);--hw:min(clamp(250px, 52vw, 640px), calc((100cqw - var(--gap) - 8px) / 1.36));justify-content:center;align-items:flex-end;gap:var(--gap);margin-top:26px;display:flex;position:relative}.dc-col{flex-direction:column;align-items:center;gap:12px;display:flex;position:relative}.dc-frame{background:#221f1c;border-radius:18px;transition:opacity .4s;position:relative;overflow:hidden;box-shadow:0 0 0 6px #1e1b19,0 40px 80px -30px #1111118c}.dc-h{width:var(--hw);aspect-ratio:16/9}.dc-v{width:calc(var(--hw) * .36);aspect-ratio:9/16;border-radius:20px}.dc-box{transition:left .7s cubic-bezier(.65,0,.2,1),top .7s cubic-bezier(.65,0,.2,1),width .7s cubic-bezier(.65,0,.2,1),height .7s cubic-bezier(.65,0,.2,1),border-radius .7s,opacity .45s;position:absolute;overflow:hidden}.dc-av{object-fit:contain;width:auto;max-width:96%;height:92%;position:absolute;bottom:-4%;left:50%;transform:translate(-50%)}.dc-name{color:#fff;background:#141210b8;border-radius:6px;align-items:center;height:20px;padding:0 7px;font-size:11px;font-weight:600;display:flex;position:absolute;bottom:8px;left:8px}.dc-slide{background:#fbfaf7;position:absolute;inset:0}.dc-slide i{background:#e4e1da;border-radius:4px;height:5%;position:absolute;left:8%}.dc-title{text-align:center;letter-spacing:-.03em;color:#111;justify-content:center;align-items:center;font-size:clamp(16px,2.6vw,32px);font-weight:800;line-height:1;display:flex;position:absolute;inset:0}.dc-live{color:#fff;letter-spacing:.05em;z-index:3;background:#d93a35;border-radius:6px;align-items:center;gap:6px;height:22px;padding:0 8px;font-size:10.5px;font-weight:800;display:flex;position:absolute;top:10px;left:10px}.dc-live i{background:#fff;border-radius:50%;width:6px;height:6px;animation:1.2s infinite msblink}.dc-logos{z-index:3;gap:4px;display:flex;position:absolute;top:10px;right:10px}.dc-logos span{border-radius:7px;justify-content:center;align-items:center;width:24px;height:24px;display:flex;box-shadow:0 0 0 1.5px #fffc}.dc-cap{font:500 13px/1 var(--font-mono);color:#666;white-space:nowrap;align-items:center;gap:7px;display:inline-flex}.dc-off{color:#eee9e2;text-align:left;z-index:4;background:#1e1b19;border-radius:16px;flex-direction:column;align-items:flex-start;gap:6px;width:200px;padding:16px;display:flex;position:absolute;top:40%;left:50%;transform:translate(-50%,-50%);box-shadow:0 20px 40px #00000059}.dc-off b{font-size:14px}.dc-off span{color:#a39b91;font-size:12.5px;line-height:1.4}.dc-off button{color:#1a1500;cursor:pointer;background:#f5c542;border:0;border-radius:8px;height:28px;margin-top:4px;padding:0 12px;font-family:inherit;font-size:12.5px;font-weight:700}.dc-controls{flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin-top:30px;display:flex}.dc-vt{color:#111;cursor:pointer;background:#f2f2f2;border:0;border-radius:999px;align-items:center;gap:10px;height:40px;padding:0 16px 0 8px;font-family:inherit;font-size:14px;font-weight:500;display:inline-flex}.dc-hint{color:#6f6f6f;margin:12px 0 0;font-size:14px}.dc-wheres{grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:14px;display:grid}.dc-where{background:#f4f4f4;border-radius:28px;align-items:flex-start;gap:22px;padding:30px;display:flex}.dc-where h2{letter-spacing:-.02em;margin:0;font-size:21px;font-weight:700}.dc-where p{color:#555;margin:8px 0 16px;font-size:16px;line-height:1.6}.dc-shape{background:#111;border-radius:10px;flex-shrink:0;box-shadow:inset 0 0 0 3px #f5c542}.dc-row{gap:8px;margin:0;padding:0;list-style:none;display:flex}.dc-row li{border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.dc-lead{color:#555;margin:18px 0 0;font-size:18px;line-height:1.65}.dc-pairs{grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:14px;margin-top:40px;padding:0;list-style:none;display:grid}.msp .dc-pair{box-sizing:border-box;color:#111;background:#f4f4f4;border-radius:24px;flex-direction:column;gap:10px;height:100%;padding:18px;text-decoration:none;transition:transform .2s,box-shadow .2s;display:flex}.msp .dc-pair:hover{color:#111;transform:translateY(-3px)}.dc-pair b{margin-top:4px;font-size:16px}.dc-pair>span:last-child{color:#666;font-size:14px;line-height:1.5}.dc-mini{align-items:flex-end;gap:10px;display:flex}.dc-mh,.dc-mv{background:#2b2724;border-radius:8px;display:block;position:relative;overflow:hidden}.dc-mh{aspect-ratio:16/9;width:150px}.dc-mv{aspect-ratio:9/16;width:48px}.dc-mh i,.dc-mv i{display:block;position:absolute}@media (max-width:720px){.dc-seg{border-radius:22px;flex-wrap:wrap;justify-content:center}.dc-off{width:170px;left:auto;right:0;transform:translateY(-50%)}}@media (max-width:560px){.dc-where{border-radius:24px;gap:18px;padding:24px}.dc-frame{box-shadow:0 0 0 4px #1e1b19,0 30px 60px -30px #1111118c}.dc-v{border-radius:14px}.dc-live{top:6px;left:6px}.dc-v .dc-logos{display:none}.dc-name{bottom:5px;left:5px}}@media (prefers-reduced-motion:reduce){.dc-box,.dc-frame{transition:none}.dc-live i{animation:none}}
