/* Native output pixels; scale the entire frame only when previewing. */
#previewStatus {position:fixed;z-index:55;max-width:520px;margin:24px;padding:28px;background:#1c1c1c;color:#f2f0ea;border:1px solid #777;border-radius:10px;font-size:16px;line-height:1.6}
#previewStatus h1 {font-size:24px;line-height:1.3;margin:0 0 20px}
#previewStatus p {color:#b8b8b3;margin:14px 0}
#previewStatus a {display:inline-block;color:#f2f0ea;margin-top:12px;text-underline-offset:4px}
* {
  box-sizing:border-box}
html,body {
  margin:0;
  width:100%;
  height:100%;
  overflow:hidden;
  background:#000;
  color:#f2f0ea;
  font-family:system-ui,sans-serif}
body {
  display:flex;
  align-items:center;
  justify-content:center}
#venueFrame {
  position:absolute;
  transform-origin:center;
  overflow:hidden;
  background:#000}
.surface {
  position:absolute;
  overflow:hidden;
  background:#000}
.surface.upper {
  width:1920px;
  height:1080px}
.surface.wall {
  width:4608px;
  height:896px}
.surface iframe {
  border:0;
  position:absolute;
  width:1920px;
  height:1080px;
  background:#000}
.wing {
  position:absolute;
  top:0;
  width:2048px;
  height:896px;
  overflow:hidden;
  background:#0c1015}
.leftWing {
  left:0}
.rightWing {
  left:2560px}
.wing iframe {
  left:227.5556px;
  top:0;
  transform:scale(.82962963);
  transform-origin:top left}
.wing:has(iframe[hidden]) {
  background:transparent}
#leftSet,#rightSet {
  position:absolute;
  top:0;
  width:2048px;
  height:896px;
  object-fit:cover;
  object-position:center 58%;
  background:#080a0c}
#leftSet {
  left:0}
#rightSet {
  left:2560px}
#centreSet {
  position:absolute;
  left:2048px;
  top:0;
  width:512px;
  height:896px;
  background:#0a1016}
.wall[data-look="work"] {
  background:#10151b}
.wall[data-look="work"] #centreSet {
  background:linear-gradient(90deg,#10151b,#1b242e 40%,#1b242e 60%,#10151b)}
.wall[data-look="apartment"] #centreSet {
  background:linear-gradient(90deg,#363936,#4b4b41,#363936)}
.wall[data-look="studio"] #centreSet {
  background:linear-gradient(90deg,#25252a,#3b3430,#25252a)}
.wall[data-look="court"] #centreSet {
  background:repeating-linear-gradient(90deg,#514332 0 2px,#766047 2px 126px,#5b4a35 126px 128px)}
.wall[data-look="candles"] #centreSet,.wall[data-look="stars"] #centreSet {
  background:linear-gradient(90deg,#090c0e,#191a17,#090c0e)}
.wall[data-look="swarm"] {
  background:#061017}
.wall[data-look="swarm"] #centreSet {
  background:#061017}
.wall[data-look="swarm"]::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(90deg,transparent,#06101799 44%,#06101799 56%,transparent)}
.wall[data-look="loom"] {
  background:linear-gradient(#3b3427 0 72%,#24201a 72%)}
.wall[data-look="loom"] #centreSet {
  background:repeating-linear-gradient(90deg,#4c4030 0 10px,#2c261d 10px 120px)}
.wall[data-look="loom"]::before {
  content:"";
  position:absolute;
  left:160px;
  right:160px;
  top:80px;
  height:520px;
  border:22px solid #66533b;
  border-bottom:0;
  background:repeating-linear-gradient(90deg,transparent 0 395px,#66533b 395px 415px),linear-gradient(#626951,#454b38);
  opacity:.7}
.wall[data-look="loom"] .leftWing {
  background:#3b3427 url('assets/sets/v2/marcus-memorial-2026.png') center/cover no-repeat}
#black {
  display:none;
  position:absolute;
  inset:0;
  background:#000;
  z-index:50}
#fullscreen {
  position:fixed;
  z-index:60;
  right:16px;
  top:16px;
  border:1px solid #777;
  border-radius:6px;
  padding:12px 18px;
  background:#141414;
  color:#f2f0ea;
  font-size:14px}
body.preview #fullscreen,body.fullscreen #fullscreen {
  display:none}
[hidden] {
  display:none!important}
.wallGuides {
  display:none;
  position:absolute;
  inset:0;
  z-index:40;
  grid-template-columns:2048px 512px 2048px;
  pointer-events:none}
.wallGuides span {
  border:3px dashed #c7f28b;
  color:#c7f28b;
  text-align:center;
  padding-top:20px;
  font:30px monospace;
  background:#0001}
.guides .wallGuides {
  display:grid}
body.overview {
  background:#141414}
body.overview #venueFrame {
  background:#141414}
body.overview .upper {
  left:1344px;
  top:0}
body.overview .wall {
  left:0;
  top:1200px}
body.overview .upper::after {
  content:"Upper · 1920 × 1080";
  position:absolute;
  left:0;
  top:0;
  background:#141414dd;
  padding:14px 22px;
  color:#b8b8b3;
  font-size:30px;
  pointer-events:none}
body.overview .wall::before {
  content:"LED wall · 4608 × 896 · schematic front view";
  position:absolute;
  z-index:45;
  left:0;
  bottom:0;
  background:#141414dd;
  padding:12px 22px;
  color:#b8b8b3;
  font-size:28px;
  pointer-events:none}
