:root { --bg: #f3f6fa; --card: #ffffff; --text: #0b1a2e; --dim: #56698a; --line: #dbe3ee; --accent: #e5484d; color-scheme: light; }
:root[data-theme="dark"] { --bg: #050b16; --card: #0c1626; --text: #eef4fb; --dim: #8ea3c2; --line: #1c2b42; color-scheme: dark; }
* { box-sizing: border-box; }
* { scrollbar-width: thin; scrollbar-color: color-mix(in srgb, var(--text) 22%, transparent) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--text) 22%, transparent); border-radius: 8px; }
html, body { margin: 0; background: var(--bg); color: var(--text); font: 15px/1.5 Inter, system-ui, sans-serif; }
a { color: inherit; }
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 14px 16px 0; flex-wrap: wrap; }
.top[hidden] { display: none; }
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand b { font: 700 18px "Space Grotesk", sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.logo { width: 40px; height: 40px; border-radius: 10px; background: var(--accent); color: #fff; display: grid; place-items: center; font: 700 18px "Space Grotesk", sans-serif; overflow: hidden; flex: none; }
.logo img { width: 100%; height: 100%; object-fit: contain; background: var(--card); }
.badge { font: 700 10px/1 "Space Grotesk", sans-serif; letter-spacing: .12em; background: var(--accent); color: #fff; padding: 5px 7px; border-radius: 5px; }
.badge[hidden] { display: none; }
.links { display: flex; gap: 6px; flex-wrap: wrap; }
.links a { text-decoration: none; font: 500 13px Inter, sans-serif; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); }
.links a:hover { border-color: var(--accent); }
.wrap { max-width: 1180px; margin: 0 auto; padding: 14px 16px 24px; }
.stage { position: relative; aspect-ratio: 16 / 9; background: #000; border-radius: 14px; overflow: hidden; }
video { width: 100%; height: 100%; display: block; background: #000; }
.over { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 20px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--accent) 18%, transparent), rgba(0, 0, 0, .86)); color: #dbe7f5; }
.over[hidden] { display: none; }
.over b { display: block; font: 600 clamp(18px, 3vw, 26px) "Space Grotesk", sans-serif; margin-bottom: 6px; }
.over span { color: #b4c4da; }
.over button { margin-top: 14px; font: 600 15px Inter, sans-serif; color: #fff; background: var(--accent); border: 0; border-radius: 999px; padding: 12px 22px; cursor: pointer; }
.live { position: absolute; top: 12px; left: 12px; font: 700 11px/1 "Space Grotesk", sans-serif; letter-spacing: .12em; background: var(--accent); color: #fff; padding: 6px 9px; border-radius: 6px; }
.live[hidden] { display: none; }
.info { margin-top: 14px; }
.info[hidden] { display: none; }
.info-h { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.info h1 { margin: 0; font: 700 clamp(20px, 3vw, 28px)/1.2 "Space Grotesk", sans-serif; }
.meta { color: var(--dim); font-size: 14px; display: flex; gap: 12px; margin-top: 4px; }
.meta span:empty { display: none; }
.back { flex: none; font: 600 13px Inter, sans-serif; border: 0; color: #fff; background: var(--accent); border-radius: 999px; padding: 8px 14px; cursor: pointer; }
.back[hidden] { display: none; }
.share { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 12px; }
.share[hidden] { display: none; }
.share-l { color: var(--dim); font-size: 13px; margin-right: 4px; }
.sh { font: 500 13px Inter, sans-serif; text-decoration: none; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.sh:hover { border-color: var(--accent); }
.sh[hidden] { display: none; }
.desc { margin: 12px 0 0; color: var(--dim); white-space: pre-line; }
.desc:empty { display: none; }
.vt { margin-top: 28px; }
.vt[hidden] { display: none; }
.vt h2 { font: 600 18px "Space Grotesk", sans-serif; margin: 0 0 12px; }
.vt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.vt-item { all: unset; cursor: pointer; display: grid; gap: 4px; border-radius: 10px; }
.vt-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vt-th { position: relative; display: block; aspect-ratio: 16/9; border-radius: 10px; overflow: hidden; background: #000; }
.vt-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.vt-item:hover .vt-th img { transform: scale(1.04); }
.vt-th i { position: absolute; right: 6px; bottom: 6px; font: 600 12px Inter, sans-serif; font-style: normal; background: rgba(0,0,0,.8); color: #fff; padding: 2px 6px; border-radius: 4px; }
.vt-item b { font-weight: 600; line-height: 1.3; }
.vt-item small { color: var(--dim); }
.vt-item.on .vt-th { outline: 3px solid var(--accent); outline-offset: -3px; }
.foot { text-align: center; color: var(--dim); font-size: 12.5px; padding: 0 16px 24px; }
.foot[hidden] { display: none; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: #0b1a2e; color: #fff; padding: 10px 16px; border-radius: 10px; font-size: 14px; z-index: 9; }
@media (max-width: 640px) { .info-h { flex-direction: column; gap: 8px; } .vt-list { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; } }
/* incorporado em outro site */
body.embed .wrap { padding: 0; max-width: none; }
body.embed .stage { border-radius: 0; }
body.embed:not(.with-list) .stage { height: 100vh; aspect-ratio: auto; }
body.embed .info, body.embed .top, body.embed .foot { display: none; }
body.embed.with-list .vt { margin: 12px; }
body.embed.with-list .vt h2 { font-size: 15px; }