html,body{
margin:0;
width:100%;
height:100%;
overflow:hidden;
font-family:Arial,Helvetica,sans-serif;
background:#000;
color:#fff
}

*{
box-sizing:border-box
}

/* =========================
   STAGE
========================= */

#stage{
position:fixed;
inset:0;
background:var(--bg,#000);
overflow:hidden
}

/* =========================
   VIDEO LAYER
========================= */

#videoLayer{
position:absolute;
inset:0;
z-index:0;
overflow:hidden;
background:#000
}

#videoLayer iframe{
position:absolute;
top:50%;
left:50%;
width:100vw;
height:56.25vw;
min-width:177.78vh;
min-height:100vh;
transform:translate(-50%,-50%);
border:0;
pointer-events:auto
}

/* =========================
   IMAGE LAYER
========================= */

#imageLayer{
position:absolute;
inset:0;
width:100%;
height:100%;
background-position:center;
background-size:cover;
background-repeat:no-repeat;
z-index:1;
pointer-events:none
}

/* =========================
   LOCK LAYER
========================= */

#lockLayer{
position:absolute;
right:34px;
bottom:28px;
font-size:44px;
z-index:4;
opacity:.18;
filter:drop-shadow(0 0 18px #fff);
pointer-events:none
}

/* =========================
   MESSAGE BOX
========================= */

#messageBox{
position:absolute;
z-index:3;
text-align:center;
padding:50px 64px;
border-radius:30px;
background:rgba(0,0,0,.7);
box-shadow:0 0 80px rgba(255,255,255,.14);
backdrop-filter:blur(14px);
transition:
background .2s,
box-shadow .2s,
backdrop-filter .2s,
border .2s,
opacity .2s,
padding .2s,
border-radius .2s,
transform .2s;
transform:translate(-50%,-50%);
transform-origin:center center;
width:82vw;
max-width:100vw;
min-width:0;

pointer-events:none;
}

#messageBox iframe,
#messageBox button,
#messageBox input,
#messageBox textarea,
#messageBox select{
pointer-events:auto;
}

#messageScaler{
transform-origin:center center;
transition:transform .15s
}

/* =========================
   OVERLAY MODES
========================= */

#messageBox.mode-solid{
backdrop-filter:none;
border:1px solid rgba(255,255,255,.08)
}

#messageBox.mode-glass{
border:1px solid rgba(255,255,255,.16)
}

#messageBox.mode-clear{
background:transparent!important;
box-shadow:none;
border:0;
backdrop-filter:none!important
}

#messageBox.mode-hidden{
background:transparent!important;
box-shadow:none;
border:0;
backdrop-filter:none!important;
padding:0;
min-width:0
}

#messageBox.no-blur{
backdrop-filter:none!important
}

#messageBox.no-shadow,
#messageBox.no-shadow *{
box-shadow:none!important;
text-shadow:none!important
}

/* =========================
   TEXT
========================= */

#displayTitle{
font-size:clamp(42px,7vw,112px);
line-height:1;
margin:0 0 24px;
font-weight:900;
letter-spacing:-2px;
text-shadow:0 5px 25px rgba(0,0,0,.85)
}

#displayBody{
font-size:clamp(24px,3vw,54px);
line-height:1.2;
margin:0;
text-shadow:0 4px 22px rgba(0,0,0,.85)
}

#messageHtmlView{
font-size:clamp(24px,3vw,54px);
line-height:1.2;
text-shadow:0 4px 22px rgba(0,0,0,.85)
}

#messageHtmlView:empty{
display:none
}

#customHtmlView{
margin-top:30px
}

#customHtmlView:empty{
display:none
}

#customHtmlView iframe,
#messageHtmlView iframe{
max-width:90vw;
max-height:70vh;
border:0;
border-radius:18px;
pointer-events:auto
}

/* =========================
   GENERIC
========================= */

.hidden{
display:none!important
}

/* =========================
   EDITOR TOGGLE
========================= */

#editorToggle{
position:fixed;
top:16px;
right:16px;
z-index:10;
background:rgba(12,12,12,.72);
color:#fff;
border:1px solid rgba(255,255,255,.34);
border-radius:14px;
padding:10px 14px;
cursor:pointer;
font-weight:800;
transition:
opacity .2s,
transform .2s,
background .2s,
border-color .2s
}

#editorToggle:hover{
transform:scale(1.05)
}

#editorToggle.mode-icon{
width:38px;
height:38px;
padding:0;
border-radius:50%;
font-size:0
}

#editorToggle.mode-icon:after{
content:'⚙';
font-size:18px
}

#editorToggle.mode-hotspot{
opacity:0!important;
background:transparent!important;
border-color:transparent!important;
color:transparent!important;
width:72px;
height:72px
}

#editorToggle.mode-hidden{
display:none!important
}

#editorToggle.auto-hide:not(:hover){
opacity:0!important
}

/* =========================
   EDITOR PANEL
========================= */

#editorPanel{
position:fixed;
top:16px;
left:16px;
bottom:16px;
width:min(620px,calc(100vw - 32px));
z-index:9;
background:rgba(15,15,18,.92);
border:1px solid rgba(255,255,255,.16);
border-radius:22px;
padding:18px;
box-shadow:0 20px 70px rgba(0,0,0,.55);
overflow:auto;
backdrop-filter:blur(18px);

pointer-events:auto
}

#editorPanel *{
pointer-events:auto
}

/* =========================
   PANEL
========================= */

.panelHeader{
display:flex;
align-items:center;
justify-content:space-between;
margin-bottom:14px
}

.panelHeader strong{
font-size:20px
}

/* =========================
   FORM
========================= */

button,input,textarea,select{
box-sizing:border-box;
font:inherit
}

button{
background:#fff;
color:#111;
border:0;
border-radius:12px;
padding:12px 14px;
cursor:pointer;
font-weight:800;
min-height:44px
}

button:hover{
filter:brightness(.9)
}

#closeEditor{
background:transparent;
color:#fff;
font-size:28px;
padding:0 8px;
min-height:0
}

label{
display:block;
font-size:12px;
color:#cfcfcf;
text-transform:uppercase;
letter-spacing:.06em;
margin:12px 0 6px
}

input,
textarea,
select{
width:100%;
margin-top:6px;
border:1px solid rgba(255,255,255,.18);
border-radius:12px;
background:rgba(0,0,0,.42);
color:#fff;
padding:11px;
outline:none
}

textarea{
min-height:82px;
resize:vertical
}

.codeBox{
font-family:Consolas,Menlo,Monaco,monospace;
min-height:120px
}

.checkLabel{
display:flex;
align-items:center;
gap:10px;
text-transform:none;
letter-spacing:0;
font-size:14px
}

.checkLabel input{
width:auto;
margin:0
}

/* =========================
   GRIDS
========================= */

.grid2,
.grid3,
.buttonGrid{
display:grid;
gap:14px;
align-items:end
}

.grid2{
grid-template-columns:1fr 1fr
}

.grid3{
grid-template-columns:1fr 1fr 1fr
}

.buttonGrid{
grid-template-columns:repeat(2,minmax(0,1fr));
margin-top:12px
}

.buttonGrid button{
white-space:normal;
line-height:1.1
}

.buttonGrid button:nth-child(5){
grid-column:1/-1
}

/* =========================
   MISC
========================= */

hr{
border:0;
border-top:1px solid rgba(255,255,255,.16);
margin:18px 0
}

#status{
color:#b7ffca;
text-transform:none;
letter-spacing:0;
font-size:13px
}

.sectionTitle{
font-size:13px;
font-weight:900;
letter-spacing:.08em;
text-transform:uppercase;
color:#fff;
margin:4px 0 10px;
padding:10px 12px;
border-radius:12px;
background:rgba(255,255,255,.08);
border:1px solid rgba(255,255,255,.12)
}

.boardButtons{
grid-template-columns:repeat(2,minmax(0,1fr));
margin:10px 0 16px
}

.boardButtons button{
font-size:14px
}

.rangeRow{
display:grid;
grid-template-columns:120px 1fr;
gap:12px;
align-items:center;
margin:10px 0
}

.rangeRow label{
margin:0
}

/* =========================
   MOBILE
========================= */

@media(max-width:720px){

.grid2,
.grid3,
.buttonGrid{
grid-template-columns:1fr
}

#messageBox{
width:88vw;
padding:34px 28px
}

.buttonGrid button:nth-child(5){
grid-column:auto
}

}