.demo-reel{display:grid;gap:14px}.dr-window{position:relative;border-radius:20px;overflow:hidden;background:#0f0c1d;box-shadow:0 1px #ffffff0f inset,0 40px 90px -30px #3a118f8c,0 12px 30px -12px #0f0c1d59}.dr-bar{display:flex;align-items:center;gap:14px;height:40px;padding:0 16px;background:linear-gradient(#1b1530,#151027);border-bottom:1px solid rgba(199,181,255,.1)}.dr-dots{display:inline-flex;gap:7px;flex:0 0 auto}.dr-dots i{width:10px;height:10px;border-radius:50%;background:#c7b5ff38}.dr-dots i:first-child{background:#7a2bff}.dr-url{flex:0 1 auto;min-width:0;padding:4px 12px;border-radius:8px;background:#c7b5ff14;color:#c7b5ff;font:500 12px/1.2 var(--mono, ui-monospace, monospace);letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dr-live{margin-left:auto;color:#f1ecffb8;font:500 13px/1 var(--display, system-ui);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.dr-screen{position:relative;aspect-ratio:16 / 10;background:#0f0c1d}.dr-screen video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}.dr-play{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:14px;border:1px solid rgba(199,181,255,.28);background:#0f0c1d9e;color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:background .2s,transform .2s,opacity .2s}.dr-play:hover{background:#7a2bffd9}.dr-play:active{transform:scale(.96)}.dr-play:focus-visible{outline:2px solid #C7B5FF;outline-offset:2px}.dr-play.is-playing{opacity:.55}.dr-window:hover .dr-play.is-playing{opacity:1}.dr-caption{margin:0;padding:14px 18px 16px;color:#f1ecffc7;font-size:15px;line-height:1.5;border-top:1px solid rgba(199,181,255,.1)}.dr-caption b{color:#fff;font-weight:600}.dr-tabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.dr-tab{position:relative;display:grid;gap:8px;padding:8px 8px 12px;border-radius:14px;border:1px solid var(--line, #E7E3F3);background:#fff;text-align:left;cursor:pointer;transition:border-color .2s,box-shadow .2s,transform .2s;color:var(--ink, #0F0C1D)}.dr-tab:hover{border-color:#d6d0e8;transform:translateY(-1px)}.dr-tab:active{transform:translateY(0)}.dr-tab:focus-visible{outline:2px solid var(--violet, #7A2BFF);outline-offset:2px}.dr-tab.is-on{border-color:var(--violet, #7A2BFF);box-shadow:0 0 0 3px #7a2bff1a}.dr-tab img{width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover;border-radius:8px;display:block;background:#0f0c1d}.dr-tab-t{font:600 13.5px/1.3 var(--display, system-ui);letter-spacing:-.01em;text-wrap:balance}.dr-prog{position:absolute;left:10px;right:10px;bottom:6px;height:2px;border-radius:2px;background:#7a2bff1f;overflow:hidden}.dr-prog span{position:absolute;inset:0;background:var(--violet, #7A2BFF);transform-origin:left;transform:scaleX(0)}.dr-tab-c{display:none}@media(min-width:1024px){.demo-reel{grid-template-columns:minmax(0,1fr) 312px;align-items:start;gap:18px}.dr-caption{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;padding:0;border:0}.dr-tabs{grid-template-columns:1fr;gap:8px}.dr-tab{grid-template-columns:104px minmax(0,1fr);grid-template-rows:auto 1fr;column-gap:12px;row-gap:3px;align-items:start;padding:8px 12px 12px 8px}.dr-tab img{grid-row:1 / span 2;width:104px}.dr-tab-t{padding-top:2px}.dr-tab-c{display:block;color:var(--ink-2, #4A4560);font-size:12.5px;line-height:1.4}.dr-tab:not(.is-on) .dr-tab-c{color:var(--muted, #6B6682)}}@media(min-width:641px)and (max-width:1023px){.dr-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}}@media(max-width:640px){.dr-window{border-radius:16px}.dr-bar{height:34px;padding:0 12px;gap:10px}.dr-live{display:none}.dr-caption{font-size:14px;padding:12px 14px 14px}.dr-tabs{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;padding-bottom:4px;scrollbar-width:none}.dr-tabs::-webkit-scrollbar{display:none}.dr-tab{flex:0 0 46%;scroll-snap-align:start}}@media(prefers-reduced-motion:reduce){.dr-tab,.dr-play{transition:none}}