:root {
  --primary: #f4c34f;
  --secondary: #101a2c;
  --accent: #fff2ae;
  --danger: #ff344f;
  --success: #36d98b;
  --text: #f7fbff;
  --shadow: 0 28px 80px rgba(0,0,0,.44);
  --glass: rgba(8,13,23,.80);
  --line: rgba(255,255,255,.18);
  --ease: cubic-bezier(.18,.88,.25,1);
}
* { box-sizing: border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background: transparent; font-family: Inter, Arial, Helvetica, sans-serif; color: var(--text); }
.transparent-output.fill-mode { background: transparent; }
.transparent-output.key-mode { background: #000; }
.stage { position: relative; width: 100vw; height: 56.25vw; max-height: 100vh; max-width: 177.7778vh; margin: auto; top: 50%; transform: translateY(-50%); overflow: hidden; background: transparent; transform-origin: center; }
.layer-root { position:absolute; inset:0; }
.layer { position:absolute; opacity:0; transform: translate3d(0,18px,0) scale(.985); transition: opacity .52s var(--ease), transform .52s var(--ease), filter .52s var(--ease); will-change: transform, opacity; pointer-events:none; }
.layer.visible { opacity:1; transform: translate3d(0,0,0) scale(1); }
.layer.out { opacity:0; transform: translate3d(0,18px,0) scale(.985); }
.safe-guides { position:absolute; inset:54px 96px; border:2px dashed rgba(255,255,255,.32); z-index:10000; pointer-events:none; }
.safe-guides:before { content:""; position:absolute; inset:54px 96px; border:1px dashed rgba(255,255,255,.22); }
.safe-guides span { position:absolute; right:14px; top:10px; background:rgba(0,0,0,.68); color:white; font:700 18px Arial; padding:8px 12px; border-radius:999px; }
.hidden { display:none !important; }
.connection-light { position:absolute; left:18px; top:18px; width:10px; height:10px; border-radius:50%; background:#777; z-index:9999; opacity:.55; }
.connection-light.live { background:#28e68c; box-shadow:0 0 14px rgba(40,230,140,.9); }
.connection-light.warn { background:#ffbd3c; box-shadow:0 0 14px rgba(255,189,60,.9); }

/* Key mode converts all visible graphics into luminance matte for key/fill workflows. */
.key-mode .layer { filter: brightness(0) invert(1) contrast(1000%) saturate(0); }
.key-mode img, .key-mode video, .key-mode iframe { filter: brightness(0) invert(1) contrast(1000%) saturate(0) !important; }
.key-mode .media-frame { background:#fff !important; }
.key-mode .layer * { color:#fff !important; text-shadow:none !important; box-shadow:none !important; }
.key-mode .safe-guides, .key-mode .connection-light { display:none !important; }

.logo-bug-v2 { display:flex; align-items:center; gap:13px; padding:12px 18px 12px 12px; border-radius:24px; background:linear-gradient(135deg, rgba(5,9,16,.66), rgba(18,28,45,.50)); border:1px solid rgba(255,255,255,.15); box-shadow:0 18px 55px rgba(0,0,0,.24); backdrop-filter: blur(18px); }
.logo-bug-v2 img { width:72px; height:72px; object-fit:contain; }
.logo-bug-v2 .bug-name { font-size:18px; font-weight:950; letter-spacing:.07em; max-width:180px; line-height:1.05; }

.brand-header { width:100%; height:100%; display:flex; align-items:center; justify-content:space-between; padding:0 34px; background:linear-gradient(100deg,rgba(7,12,22,.82),rgba(20,34,58,.68)); border:1px solid var(--line); border-radius:26px; box-shadow:var(--shadow); overflow:hidden; }
.brand-header:after { content:""; position:absolute; inset:-40% -10%; background:linear-gradient(110deg,transparent,rgba(255,255,255,.16),transparent); transform:translateX(-80%); animation: sheen 7s linear infinite; }
.brand-header .title { font-size:40px; font-weight:1000; letter-spacing:.06em; }
.brand-header .subtitle { font-size:22px; color:var(--accent); font-weight:800; letter-spacing:.08em; }

.lowerthird-premium { width:100%; height:100%; border-radius:30px; overflow:hidden; background:linear-gradient(105deg,rgba(7,12,22,.96),rgba(15,27,48,.88) 58%,rgba(9,14,24,.92)); border:1px solid rgba(255,255,255,.14); box-shadow:var(--shadow); display:flex; align-items:center; padding:18px 36px 18px 32px; }
.lowerthird-premium:before { content:""; position:absolute; left:0; top:0; bottom:0; width:12px; background:linear-gradient(180deg,var(--accent),var(--primary)); box-shadow:0 0 28px rgba(244,195,79,.65); }
.lowerthird-premium:after { content:""; position:absolute; inset:0; background:radial-gradient(circle at 8% 20%, rgba(244,195,79,.30), transparent 28%), linear-gradient(110deg, transparent 0 35%, rgba(255,255,255,.10) 48%, transparent 62%); mix-blend-mode:screen; pointer-events:none; }
.lt-avatar { width:106px; height:106px; border-radius:24px; object-fit:cover; margin-right:24px; border:3px solid rgba(244,195,79,.82); box-shadow:0 0 28px rgba(244,195,79,.35); }
.lt-text { min-width:0; z-index:2; }
.lt-name { font-size:52px; line-height:.98; font-weight:1000; letter-spacing:.012em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:980px; }
.lt-meta { margin-top:13px; display:flex; align-items:center; gap:14px; font-size:25px; font-weight:820; color:rgba(241,247,255,.88); white-space:nowrap; }
.lt-dot { width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 12px var(--primary); }

.dual-strip { width:100%; height:100%; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.dual-box { position:relative; border-radius:28px; overflow:hidden; background:linear-gradient(120deg, rgba(7,12,22,.96), rgba(20,34,58,.92)); border:1px solid var(--line); padding:28px 34px; box-shadow:var(--shadow); }
.dual-box:before { content:""; position:absolute; left:0; top:0; bottom:0; width:11px; background:var(--primary); }
.dual-name { font-size:44px; font-weight:1000; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dual-role { margin-top:10px; color:var(--accent); font-size:24px; font-weight:800; }
.dual-topic { position:absolute; left:50%; bottom:16px; transform:translateX(-50%); background:linear-gradient(90deg,var(--primary),var(--accent)); color:#0b101a; border-radius:999px; padding:9px 22px; font-size:20px; font-weight:950; white-space:nowrap; z-index:2; }

.topic-card { width:100%; height:100%; border-radius:38px; overflow:hidden; background:linear-gradient(135deg,rgba(6,10,18,.95),rgba(17,30,53,.92)); border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow); display:grid; grid-template-columns:1.25fr .75fr; }
.topic-card.no-image { grid-template-columns:1fr; }
.topic-copy { padding:58px 62px; display:flex; flex-direction:column; justify-content:center; }
.topic-kicker { color:#111; background:linear-gradient(90deg,var(--primary),var(--accent)); font-size:23px; font-weight:1000; letter-spacing:.1em; border-radius:999px; padding:10px 18px; width:max-content; margin-bottom:30px; }
.topic-title { font-size:76px; line-height:.97; font-weight:1000; letter-spacing:-.025em; max-width:940px; }
.topic-subtitle { margin-top:28px; font-size:30px; color:rgba(240,246,255,.82); line-height:1.22; font-weight:760; }
.topic-image { position:relative; overflow:hidden; background:rgba(255,255,255,.05); }
.topic-image img { width:100%; height:100%; object-fit:cover; filter:saturate(1.08) contrast(1.03); }
.topic-image:after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(6,10,18,.72),transparent 40%); }

.breaking-news { width:100%; height:100%; display:flex; align-items:stretch; border-radius:26px; overflow:hidden; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,.15); }
.br-label { min-width:340px; display:grid; place-items:center; background:linear-gradient(135deg,#ff344f,#a90019); font-size:34px; font-weight:1000; letter-spacing:.06em; text-align:center; padding:0 24px; animation: pulseRed 1.6s ease-in-out infinite; }
.br-copy { flex:1; background:linear-gradient(90deg,rgba(8,12,21,.98),rgba(24,34,52,.94)); padding:24px 34px; display:flex; flex-direction:column; justify-content:center; }
.br-headline { font-size:44px; font-weight:1000; line-height:1.02; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.br-subline { margin-top:9px; font-size:24px; color:rgba(240,246,255,.78); font-weight:760; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.countdown-box { width:100%; height:100%; border-radius:28px; background:linear-gradient(145deg,rgba(7,12,22,.94),rgba(20,34,58,.90)); border:1px solid rgba(255,255,255,.16); box-shadow:var(--shadow); display:grid; place-items:center; text-align:center; padding:20px; }
.cd-label { font-size:22px; font-weight:1000; color:var(--primary); letter-spacing:.12em; }
.cd-time { margin-top:8px; font-variant-numeric:tabular-nums; font-size:68px; font-weight:1000; line-height:.95; }

.notification-toast { width:100%; height:100%; display:flex; align-items:center; gap:18px; border-radius:24px; padding:22px 26px; background:linear-gradient(145deg,rgba(7,12,22,.96),rgba(20,34,58,.92)); border:1px solid rgba(255,255,255,.16); box-shadow:var(--shadow); }
.nt-rail { width:10px; align-self:stretch; border-radius:999px; background:var(--primary); }
.notification-toast.success .nt-rail { background:var(--success); }
.notification-toast.warning .nt-rail { background:#ffbd3c; }
.notification-toast.danger .nt-rail { background:var(--danger); }
.nt-title { font-size:28px; font-weight:1000; }
.nt-message { margin-top:8px; font-size:21px; color:rgba(240,246,255,.78); font-weight:740; line-height:1.2; }

.media-preview { width:100%; height:100%; border-radius:34px; overflow:hidden; background:linear-gradient(145deg,rgba(5,8,14,.98),rgba(17,27,45,.95)); border:1px solid rgba(255,255,255,.18); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.media-head { height:74px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; background:rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.12); }
.media-title { font-size:25px; font-weight:1000; }
.media-link { color:#111; background:linear-gradient(90deg,var(--primary),var(--accent)); text-decoration:none; padding:11px 18px; border-radius:999px; font-weight:950; }
.media-frame { flex:1; margin:24px; border-radius:22px; overflow:hidden; background:#0b101a; display:grid; place-items:center; }
.media-frame img, .media-frame video, .media-frame iframe { width:100%; height:100%; border:0; object-fit:contain; background:#0b101a; }
.media-frame audio { width:75%; }

.project-timeline { width:100%; height:100%; border-radius:30px; background:linear-gradient(135deg,rgba(7,12,22,.96),rgba(20,34,58,.92)); border:1px solid rgba(255,255,255,.16); box-shadow:var(--shadow); padding:28px 34px; overflow:hidden; }
.project-head { display:flex; justify-content:space-between; gap:30px; align-items:flex-start; margin-bottom:22px; }
.project-name { font-size:38px; font-weight:1000; line-height:1.03; }
.client-name { margin-top:6px; font-size:21px; color:rgba(240,246,255,.76); font-weight:780; }
.project-status { max-width:560px; font-size:22px; font-weight:950; color:#111; background:linear-gradient(90deg,var(--primary),var(--accent)); padding:12px 18px; border-radius:999px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.project-grid { display:grid; grid-template-columns: 1fr 1fr; gap:18px 28px; }
.progress-line { display:grid; grid-template-columns:180px 1fr 76px; align-items:center; gap:14px; font-size:21px; font-weight:900; }
.progress-shell { height:27px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; box-shadow:inset 0 0 0 1px rgba(255,255,255,.10); }
.progress-fill { display:block; height:100%; width:0%; background:linear-gradient(90deg,#36d98b,#ccf35d); border-radius:inherit; transition:width .8s var(--ease); }
.project-timeline.warning .payment-fill { background:linear-gradient(90deg,#ffbd3c,#ff823e); }
.project-timeline.danger .payment-fill { background:linear-gradient(90deg,#ff344f,#a90019); }
.payment-summary { grid-column:1/-1; display:flex; justify-content:space-between; gap:20px; margin-top:4px; font-size:22px; font-weight:850; color:rgba(240,246,255,.86); }
.payment-summary strong { color:var(--accent); }

.ticker-crawl { width:100%; height:100%; display:flex; align-items:stretch; background:linear-gradient(90deg,rgba(4,7,13,.98),rgba(14,24,42,.96)); border-top:1px solid rgba(255,255,255,.18); box-shadow:0 -18px 50px rgba(0,0,0,.32); }
.ticker-label { min-width:270px; display:grid; place-items:center; padding:0 24px; background:linear-gradient(90deg,var(--primary),var(--accent)); color:#111; font-size:25px; font-weight:1000; letter-spacing:.04em; }
.ticker-window { position:relative; overflow:hidden; flex:1; display:flex; align-items:center; }
.ticker-track { position:absolute; white-space:nowrap; will-change:transform; font-size:31px; font-weight:800; letter-spacing:.01em; animation-name:tickerMove; animation-timing-function:linear; animation-iteration-count:infinite; padding-left:100%; }
@keyframes tickerMove { from { transform:translateX(0); } to { transform:translateX(-100%); } }
@keyframes sheen { 0% { transform:translateX(-80%); } 100% { transform:translateX(120%); } }
@keyframes pulseRed { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.25); } }
@media (max-aspect-ratio:16/9) { .stage { width:100vw; height:calc(100vw * 9 / 16); top:50%; transform:translateY(-50%); } }

/* v3 embedded monitor preview. Real browser-source output remains transparent. */
body.preview-output { background-color:#152033; background-image:linear-gradient(45deg,rgba(255,255,255,.075) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.075) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.075) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.075) 75%); background-size:28px 28px; background-position:0 0,0 14px,14px -14px,-14px 0; }
body.preview-output .connection-light { display:none; }
body.preview-output:after { content:"TRANSPARENT OUTPUT PREVIEW"; position:absolute; right:30px; top:24px; color:rgba(255,255,255,.28); font:900 18px/1 Inter,Arial,sans-serif; letter-spacing:.09em; z-index:9999; }

/* v8 broadcast motion polish: GPU-only transforms for clean NewBlue/Captivate-style live graphics. */
.layer.visible .lowerthird-premium{animation:ltReveal .62s var(--ease) both}
.layer.visible .dual-strip{animation:dualReveal .62s var(--ease) both}
.layer.visible .topic-card{animation:topicReveal .72s var(--ease) both}
.layer.visible .breaking-news{animation:strapReveal .42s var(--ease) both}
.layer.visible .countdown-box{animation:clockReveal .55s var(--ease) both}
.layer.visible .media-preview{animation:mediaReveal .52s var(--ease) both}
.layer.visible .project-timeline{animation:timelineReveal .58s var(--ease) both}
.layer.visible .logo-bug-v2{animation:bugReveal .44s var(--ease) both}
.lowerthird-premium .lt-name,.lowerthird-premium .lt-meta{transform:translate3d(0,0,0);animation:textSettle .74s var(--ease) both}.lowerthird-premium .lt-meta{animation-delay:.05s}.topic-title,.topic-subtitle{animation:textSettle .7s var(--ease) both}.topic-subtitle{animation-delay:.06s}.project-timeline .progress-fill{transition:width .9s cubic-bezier(.16,.9,.26,1)}
@keyframes ltReveal{0%{opacity:0;transform:translate3d(-90px,22px,0) scale(.985);filter:blur(10px)}60%{opacity:1;filter:blur(0)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes dualReveal{0%{opacity:0;transform:translate3d(0,38px,0) scale(.985);filter:blur(8px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes topicReveal{0%{opacity:0;transform:translate3d(0,28px,0) scale(.965);filter:blur(12px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes strapReveal{0%{opacity:0;transform:translate3d(-60px,0,0) scaleX(.96);filter:blur(6px)}100%{opacity:1;transform:translate3d(0,0,0) scaleX(1);filter:blur(0)}}
@keyframes clockReveal{0%{opacity:0;transform:translate3d(30px,20px,0) scale(.92);filter:blur(8px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes mediaReveal{0%{opacity:0;transform:translate3d(0,28px,0) scale(.94);filter:blur(10px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes timelineReveal{0%{opacity:0;transform:translate3d(0,34px,0) scale(.97);filter:blur(8px)}100%{opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}}
@keyframes bugReveal{0%{opacity:0;transform:translate3d(20px,-16px,0) scale(.82)}100%{opacity:1;transform:translate3d(0,0,0) scale(1)}}
@keyframes textSettle{0%{opacity:0;transform:translate3d(26px,0,0)}100%{opacity:1;transform:translate3d(0,0,0)}}