html, body { width: 100%; height: 100%; overflow: hidden; background: #06152e; }
.display { width: 100vw; height: 100vh; display: grid; grid-template-rows: 8.5vh 1fr 6vh; color: var(--white); background: #071e3f; }
.display header, .display footer { display: flex; align-items: center; justify-content: space-between; padding: 0 3.2vw; border-color: rgba(255,255,255,.18); }
.display header { border-bottom: 1px solid rgba(200,164,106,.58); }
.display footer { border-top: 1px solid rgba(255,255,255,.16); color: #bdc9d9; font-size: clamp(12px, .78vw, 30px); letter-spacing: .04em; }
.display-brand { display: flex; align-items: center; gap: 1.2vw; font-size: clamp(18px, 1.08vw, 42px); letter-spacing: .08em; }
.display-brand img { width: clamp(210px, 12vw, 460px); height: auto; padding: 0; background: transparent; }
.display-brand small { display: block; color: var(--gold-light); font-family: Aptos, sans-serif; font-size: .58em; letter-spacing: .18em; }
.live { display: flex; align-items: center; gap: .7vw; font-size: clamp(14px, .8vw, 30px); letter-spacing: .13em; }
.live time { margin-left: 1vw; color: #d9e4f2; font-variant-numeric: tabular-nums; }
.live-dot { width: .6vw; height: .6vw; min-width: 10px; min-height: 10px; border-radius: 50%; background: #59d7ad; box-shadow: 0 0 20px rgba(89,215,173,.55); }
.canvas { position: relative; isolation: isolate; min-height: 0; overflow: hidden; padding: 4.2vh 4.2vw; display: grid; align-content: stretch; background: #06152e; }
.canvas::before { content: ''; position: absolute; inset: 0; z-index: -2; background-position: center; background-size: cover; opacity: .72; transform: scale(1.01); animation: cinematic-drift 18s ease-in-out infinite alternate; }
.canvas::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(2,14,34,.32); }
.canvas[data-theme="governance"]::before { background-image: url('/display/assets/executive-governance-4k.png'); }
.canvas[data-theme="aviation"]::before { background-image: url('/display/assets/aviation-cni-4k.png'); }
.canvas[data-theme="framework"]::before { background-image: url('/display/assets/five-layer-framework-4k.png'); }
.screen { position: relative; z-index: 1; height: 100%; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .82fr); gap: 3.6vw; align-items: center; }
.screen-copy { max-width: 68vw; padding: 2vw 2.2vw; background: rgba(3,18,43,.78); border-left: .22vw solid var(--gold-light); }
.screen-copy .kicker { color: var(--gold-light); font-size: clamp(16px, .95vw, 38px); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.screen-copy h1 { max-width: 24ch; margin: .5em 0 .45em; font-size: clamp(52px, 4vw, 154px); line-height: 1.03; font-weight: 600; text-wrap: balance; }
.screen-copy .summary { max-width: 60ch; color: #d6e0ec; font-size: clamp(24px, 1.45vw, 56px); line-height: 1.45; }
.decision { margin-top: 3.5vh; padding: 1.3em 1.5em; max-width: 52ch; background: rgba(255,255,255,.075); border-left: .16vw solid var(--gold-light); font-size: clamp(20px, 1.18vw, 46px); line-height: 1.42; }
.decision strong { display: block; margin-bottom: .4em; color: var(--gold-light); font-size: .68em; letter-spacing: .13em; text-transform: uppercase; }
.signal-panel { align-self: stretch; display: grid; grid-template-rows: auto 1fr auto; padding: 2.2vw; background: rgba(3,18,43,.86); border: 1px solid rgba(255,255,255,.2); border-top: .25vw solid var(--gold); }
.signal-panel h2 { margin: 0; color: var(--gold-light); font-size: clamp(20px, 1.35vw, 52px); font-weight: 500; }
.signals { display: grid; align-content: center; gap: 1.8vh; }
.signal { display: grid; grid-template-columns: 1fr auto; gap: 1vw; padding: 1.2em 0; border-bottom: 1px solid rgba(255,255,255,.14); font-size: clamp(18px, 1.05vw, 40px); }
.signal span:last-child { color: var(--gold-light); font-weight: 700; }
.source { color: #aebdd0; font-size: clamp(13px, .75vw, 29px); line-height: 1.5; }
.separator { display: inline-block; width: 1px; height: 1em; margin: 0 1vw; background: rgba(255,255,255,.3); vertical-align: middle; }
.progress { display: flex; gap: .45vw; }
.progress span { display: block; width: 2vw; height: 3px; background: rgba(255,255,255,.2); }
.progress span.active { background: var(--gold-light); }
@keyframes cinematic-drift { from { transform: scale(1.01) translate3d(0,0,0); } to { transform: scale(1.045) translate3d(-.35%,0,0); } }
@media (prefers-reduced-motion: reduce) { .canvas::before { animation: none; } }
@media (max-aspect-ratio: 4/3) { .screen { grid-template-columns: 1fr; } .signal-panel { align-self: auto; } }
\n.canvas[data-theme="masterclasses"]::before { background-image: url('/display/assets/executive-governance-4k.png'); opacity: .48; }\n.panel-context { margin-top: 2.1vh; padding: 1.15em 1.2em; background: rgba(255,255,255,.075); border-left: .16vw solid var(--gold-light); }\n.panel-context small { display:block; margin-bottom:.55em; color:var(--gold-light); font-size:clamp(11px,.62vw,24px); letter-spacing:.15em; }\n.panel-context strong { display:block; font-size:clamp(16px,.9vw,34px); line-height:1.35; font-weight:600; }\n.city-strip { display:grid; grid-template-columns:repeat(3,1fr); gap:1vw; margin-top:2.6vh; max-width:60vw; }\n.city-card { position:relative; min-height:15vh; overflow:hidden; border:1px solid rgba(255,255,255,.25); background-position:center; background-size:cover; box-shadow:0 12px 40px rgba(0,0,0,.22); }\n.city-card::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,18,45,.05),rgba(0,18,45,.78)); }\n.city-card span { position:absolute; z-index:1; left:1.1vw; bottom:1.2vh; font-size:clamp(18px,1.05vw,40px); font-weight:700; letter-spacing:.13em; color:#fff; }\n.city-card.barcelona { background-image:url('https://commons.wikimedia.org/wiki/Special:Redirect/file/Sagrada_Familia_at_night_01.jpg'); }\n.city-card.london { background-image:url('https://commons.wikimedia.org/wiki/Special:Redirect/file/London_skyline_by_night.jpg'); }\n.city-card.tokyo { background-image:url('https://commons.wikimedia.org/wiki/Special:Redirect/file/Tokyo_Night.jpg'); }\n.masterclass-screen .screen-copy h1 { font-size:clamp(48px,3.5vw,136px); }\n.masterclass-screen .summary { max-width:66ch; }\n.masterclass-screen .decision { margin-top:2.2vh; }\n