.vvi{background:var(--vvi-bg);color:var(--vvi-text);padding:var(--vvi-space) 40px;font-family:Arial,sans-serif}
.vvi *{box-sizing:border-box}
.vvi-layout{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:1360px;margin:auto;align-items:start}
.vvi-videos,.vvi-information{min-width:0}
.vvi h2{font:700 24px/1.3 Arial,sans-serif;letter-spacing:-.025em;text-align:center;margin:0 0 22px;color:inherit}
.vvi-description{font-size:15px;line-height:1.6;text-align:center;margin-bottom:20px;overflow-wrap:anywhere}
.vvi-track{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
.vvi-track::-webkit-scrollbar{display:none}
.vvi-card{position:relative;flex:0 0 calc((100% - 28px)/3);aspect-ratio:9/16;border-radius:8px;overflow:hidden;scroll-snap-align:start;background:#f8edf1}
.vvi-card video{display:block;width:100%;height:100%;object-fit:cover}
.vvi-play{position:absolute;inset:0;display:grid;place-items:center;width:100%;height:100%;border:0;background:transparent;cursor:pointer;padding:0}
.vvi-play svg{width:46px;height:46px;border-radius:50%;background:#ffffff75;fill:#fff;padding:12px;transition:background .15s}
.vvi-play:hover svg{background:var(--vvi-accent)}
.vvi-play[hidden]{display:none}
.vvi-caption{position:absolute;left:10px;right:10px;bottom:48px;color:#fff;background:#2b1c227d;border-radius:5px;padding:6px 8px;font-size:12px;pointer-events:none}
.vvi-card:has(video:not([paused])) .vvi-caption{pointer-events:none}
.vvi-empty{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px;text-align:center;padding:16px;color:#846c76;background:linear-gradient(145deg,#fbe8ef,#eaf2ed)}
.vvi-empty>svg{width:34px;height:34px;stroke:var(--vvi-accent);stroke-width:1.4;fill:none}
.vvi-empty span{font-size:12px;line-height:1.45}.vvi-empty small{display:block;font-size:10px;margin-top:8px}
.vvi-arrows{display:flex;justify-content:center;gap:10px;margin-top:22px}
.vvi-arrows button{display:grid;place-items:center;width:36px;height:36px;padding:8px;border:0;border-radius:50%;background:#f7e6ed;color:var(--vvi-text);cursor:pointer}
.vvi-arrows svg{width:20px;height:20px;stroke:currentColor;stroke-width:1.5;fill:none}
.vvi-arrows button:disabled{opacity:.4;cursor:default}
.vvi-information{display:grid;gap:12px;padding-top:53px}
.vvi-detail{border:1px solid #e5dfe2;border-radius:6px;background:var(--vvi-bg);overflow:hidden}
.vvi-detail summary{display:flex;justify-content:space-between;align-items:center;gap:20px;list-style:none;cursor:pointer;padding:20px;font-size:16px;font-weight:700;line-height:1.4;overflow-wrap:anywhere}
.vvi-detail summary::-webkit-details-marker{display:none}
.vvi-plus{width:12px;height:12px;position:relative;flex:0 0 12px}
.vvi-plus:before,.vvi-plus:after{content:"";position:absolute;background:currentColor;inset:5px 0;height:2px}
.vvi-plus:after{transform:rotate(90deg)}
.vvi-detail[open]{border-color:var(--vvi-accent)}
.vvi-detail[open] .vvi-plus{color:var(--vvi-accent)}
.vvi-detail[open] .vvi-plus:after{transform:none}
.vvi-answer{padding:0 20px 20px;font-size:14px;line-height:1.65;overflow-wrap:anywhere}
.vvi-answer p{margin:0 0 12px}.vvi-answer p:last-child{margin:0}
.vvi-answer a{text-decoration:underline}.vvi-answer img{max-width:100%;height:auto}
.vvi :focus-visible{outline:2px solid var(--vvi-accent);outline-offset:3px}
@media(max-width:899px){.vvi{padding:var(--vvi-space) 20px}.vvi-layout{grid-template-columns:1fr;gap:28px}.vvi-information{padding-top:0}.vvi h2{font-size:22px}.vvi-detail summary{font-size:15px;padding:18px 16px}.vvi-answer{padding:0 16px 18px}}
@media(max-width:599px){.vvi-card{flex-basis:43%}.vvi-track{gap:12px}.vvi-arrows{margin-top:16px}.vvi-arrows button{width:40px;height:40px}}