:root{
  --ink:#2e3027;
  --muted:#65685c;
  --paper:#f5f2e9;
  --surface:#fffdf7;
  --line:#d5d4c5;
  --forest:#344d40;
  --sand:#dcc9a6;
  --red:#b42629;
  --radius:6px;
  font-family:Arial,Helvetica,sans-serif;
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.5
}

*{
  box-sizing:border-box
}
body{
  margin:0
}
button,input,select,textarea{
  font:inherit
}
button,a,input,select,textarea,summary{
  -webkit-tap-highlight-color:transparent
}
button{
  cursor:pointer;
  background:var(--forest);
  border:1px solid var(--forest);
  color:white;
  border-radius:var(--radius);
  padding:.6rem .9rem;
  font-weight:600;
  min-height:44px
}
button:disabled{
  cursor:not-allowed;
  opacity:.5
}
button.secondary{
  color:var(--forest);
  background:transparent
}
button:hover:not(:disabled){
  filter:brightness(.9)
}
a{
  color:var(--forest);
  text-underline-offset:4px
}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid #9b641f;
  outline-offset:3px
}
input,select,textarea{
  max-width:100%;
  width:100%;
  color:var(--ink);
  background:var(--surface);
  border:1px solid #8c9181;
  border-radius:var(--radius);
  padding:.65rem
}
textarea{
  resize:vertical
}
label{
  display:block;
  font-size:.85rem;
  font-weight:600;
  margin:.5rem 0
}
h1,h2,h3,p{
  margin-top:0
}
h1,h2{
  font-family:Georgia,'Times New Roman',serif;
  font-weight:400;
  line-height:1.15
}
h1{
  font-size:clamp(2rem,3.5vw,3rem);
  margin-bottom:.75rem
}
h2{
  font-size:1.5rem
}
h3{
  font-size:1rem
}
p{
  margin-bottom:1rem
}
header{
  max-width:1440px;
  margin:auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.5rem 3rem;
  border-bottom:1px solid var(--line);
  gap:1rem
}
.brand{
  font-family:Georgia,serif;
  font-size:2rem;
  text-decoration:none;
  line-height:1.05
}
.brand span{
  display:block;
  font:10px Arial,sans-serif;
  letter-spacing:.23em;
  margin-top:.5rem
}
nav{
  display:flex;
  gap:1.5rem;
  font-size:.85rem
}
main{
  max-width:1440px;
  margin:auto;
  padding:2rem 3rem
}
.demo-banner{
  text-align:center;
  background:var(--forest);
  color:#fff;
  padding:.5rem 1rem;
  font-size:.75rem;
  letter-spacing:.04em
}
.intro{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;
  margin-bottom:1.5rem
}
.intro p:last-child{
  color:var(--muted);
  margin-bottom:0
}
.eyebrow{
  font-size:.7rem;
  font-weight:bold;
  letter-spacing:.15em;
  margin-bottom:.75rem
}
.tag{
  display:inline-block;
  border:1px solid var(--line);
  padding:.25rem .65rem;
  font-size:.75rem;
  border-radius:3px;
  white-space:nowrap
}
.studio{
  display:grid;
  grid-template-columns:minmax(0,1.9fr) minmax(300px,1fr);
  gap:1.5rem;
  align-items:start
}
.watch{
  min-width:0
}
.video-placeholder{
  aspect-ratio:16/9;
  background:#263c32;
  color:#f7f1df;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  text-align:center;
  padding:2rem;
  border:8px solid #314b3d;
  outline:1px solid var(--forest);
  outline-offset:-1px
}
.stamp{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:1px solid #b4c0a4;
  border-radius:50%;
  font-family:Georgia,serif;
  font-size:1.5rem;
  margin-bottom:1.5rem
}
.video-placeholder h2{
  font-size:clamp(1.3rem,2.3vw,2rem);
  margin-bottom:.75rem
}
.video-placeholder p:not(.eyebrow){
  font-size:.85rem;
  color:#d1dac9
}
.outline-tag{
  border:1px solid #81917c;
  padding:.25rem .5rem;
  font-size:.65rem;
  letter-spacing:.04em
}
.video-controls{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.75rem 1rem;
  background:var(--surface);
  border:1px solid var(--line);
  gap:.5rem
}
.video-controls button{
  font-size:.8rem;
  min-height:36px;
  padding:.35rem .6rem;
  background:transparent;
  color:var(--ink);
  border-color:var(--line)
}
#live-status{
  font-size:.85rem;
  font-weight:bold;
  color:var(--muted)
}
#live-status.is-live{
  color:var(--red)
}
.caption{
  font-size:.75rem;
  color:var(--muted);
  margin-top:.65rem
}
.simulation{
  font-size:.8rem;
  border-bottom:1px solid var(--line);
  padding:.5rem 0 1rem
}
.simulation summary{
  cursor:pointer;
  padding:.5rem 0
}
.simulation select{
  max-width:350px
}
.simulation p{
  margin:.5rem 0 0
}
.how{
  margin-top:1.5rem;
  max-width:650px
}
.how p:not(.eyebrow){
  font-size:.85rem;
  color:var(--muted)
}
.chat{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden
}
.chat-heading{
  padding:1.1rem 1.25rem;
  border-bottom:1px solid var(--line)
}
.chat-heading h2{
  font-size:1.25rem;
  margin-bottom:.4rem
}
#connection{
  font-size:.75rem;
  color:var(--forest)
}
.chat-notice{
  font-size:.75rem;
  padding:.75rem 1.25rem;
  background:#eeeee3;
  color:#535b4b;
  margin:0
}
.messages{
  overflow-anchor:none;
  overscroll-behavior:contain;
  list-style:none;
  padding:0 1.25rem;
  margin:0;
  height:280px;
  overflow:auto
}
.messages:focus-visible { outline:3px solid #9b641f; outline-offset:-3px; }
.message{
  padding:1rem 0;
  border-bottom:1px solid var(--line);
  overflow-wrap:anywhere
}
.message strong{
  font-size:.85rem
}
.message p{
  font-size:.85rem;
  margin:.35rem 0 0
}
.sequence{
  font-size:.65rem;
  color:var(--muted);
  float:right;
  margin-left:1rem
}
.compose{
  padding:1rem 1.25rem;
  border-top:1px solid var(--line)
}
.inline{
  display:flex;
  gap:.5rem
}
.inline select{
  min-width:0;
  flex:1
}
.inline button{
  font-size:.75rem;
  white-space:nowrap
}
#identity{
  font-size:.7rem;
  color:var(--muted);
  margin:.5rem 0 1rem
}
#chat-form button{
  width:100%;
  margin-top:.6rem
}
#feedback{
  font-size:.85rem;
  overflow-wrap:anywhere
}
#feedback:not(:empty){
  padding:.75rem;
  border-left:3px solid #9b641f;
  background:#eee7d7;
  margin-top:1rem
}
.empty{
  padding:1rem;
  font-size:.85rem;
  color:var(--muted)
}
footer{
  max-width:1440px;
  margin:1rem auto 0;
  border-top:1px solid var(--line);
  padding:1.5rem 3rem;
  color:var(--muted);
  font-size:.75rem;
  display:flex;
  justify-content:space-between;
  gap:1rem
}
.toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin:1rem 0
}
.access{
  padding:1.5rem;
  border:1px solid var(--line);
  background:var(--surface);
  max-width:650px
}
.access button{
  margin-top:1rem
}
.queue{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem
}
.review-card,.worksheet-row{
  background:var(--surface);
  border:1px solid var(--line);
  padding:1.25rem;
  overflow-wrap:anywhere;
  margin-bottom:1rem
}
.review-card h3{
  margin-bottom:.5rem
}
.review-card p{
  margin-top:1rem
}
.record-form{
  border-top:1px solid var(--line);
  padding-top:.5rem;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.5rem
}
.record-form input{
  width:90px
}
.record-form label{
  margin:0
}
.record-form button{
  font-size:.8rem
}
.worksheet-row{
  max-width:800px
}
.worksheet-row .tag{
  white-space:normal;
  max-width:100%
}
.worksheet-row button{
  margin-top:.75rem
}
body.overlay{
  background:transparent!important;
  color:white;
  margin:0
}
.overlay main{
  padding:1rem;
  max-width:600px;
  margin:0
}
.overlay ol{
  padding:0;
  list-style:none;
  margin:.5rem 0
}
.overlay .message{
  background:rgba(28,44,35,.94);
  border-left:4px solid var(--sand);
  border-bottom:0;
  padding:1rem 1.25rem;
  border-radius:4px
}
.overlay .message strong{
  color:#efdbb7;
  font-size:1.1rem
}
.overlay .message p{
  font-size:1.1rem
}
.overlay .sequence{
  color:#cbd4c5
}

[hidden]{
  display:none!important
}

@media(max-width:900px){
  header,main{
  padding:1.5rem
}
.studio{
  grid-template-columns:1fr
}
.chat{
  max-width:none
}
.messages{
  height:240px
}
.intro>.tag{
  display:none
}
.video-placeholder{
  min-height:290px
}
.queue{
  grid-template-columns:1fr
}
footer{
  padding:1.5rem;
  flex-direction:column
}

}

@media(max-width:480px){
  header,main{
  padding:1rem
}
header{
  align-items:flex-start
}
.brand{
  font-size:1.5rem
}
nav{
  flex-direction:column;
  gap:.5rem;
  font-size:.75rem
}
.intro{
  margin-top:.5rem
}
.intro p:last-child{
  font-size:.85rem
}
.video-placeholder{
  padding:1rem;
  min-height:310px
}
.stamp{
  margin-bottom:1rem
}
.chat-heading,.compose{
  padding:1rem
}
.video-controls{
  padding:.75rem
}
.record-form{
  align-items:stretch
}
.record-form button{
  width:100%
}
.demo-banner{
  font-size:.65rem
}
.toolbar button{
  font-size:.8rem
}

}

.video-placeholder{
  width:100%;
  min-width:0
}

#live-status{
  display:inline-flex;
  align-items:center;
  gap:.35rem
}
.bolt{
  width:1rem;
  height:1.25rem;
  flex:none
}
.is-live .bolt{
  filter:drop-shadow(0 0 3px #b4262955)
}


html.overlay-document { background: transparent; }

/* App viewport theater, independent of native video fullscreen. */
.theater-active::before { content:''; position:fixed; inset:0; z-index:99; background:#17271f; }
.video-controls { flex-wrap:wrap; }
#fixture-settings summary { cursor:pointer; font-size:.75rem; padding:.35rem 0; }
.studio.theater {
  position:fixed; z-index:100; top:var(--theater-top,0px); left:var(--theater-left,0px);
  width:var(--theater-width,100vw); height:var(--theater-height,100dvh);
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
  background:#17271f; color:#fffdf7; display:grid; grid-template-columns:minmax(0,1fr);
  grid-template-rows:54px minmax(70px,1fr) minmax(0,min(380px,52%)); gap:0; overflow:hidden; align-items:stretch;
}
.theater-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 8px; background:#17271f; }
.theater-bar>span { text-align:center; font-size:.85rem; line-height:1.25; }
.theater-bar small { display:block; font-size:.65rem; color:#d4ddce; }
.theater-bar button { padding:.4rem .65rem; min-height:44px; border-color:#839789; }
.theater .watch { min-height:0; display:grid; grid-template-rows:minmax(0,1fr) auto; overflow:hidden; }
.theater .watch>.caption,.theater .watch>.simulation,.theater .watch>.how,.theater #enter-theater { display:none; }
.theater .video-placeholder { aspect-ratio:auto; height:100%; min-height:0; padding:8px; border:0; outline:0; overflow:hidden; }
.theater .video-placeholder .stamp,.theater .video-placeholder .eyebrow,.theater .video-placeholder .outline-tag { display:none; }
.theater .video-placeholder h2 { font-size:clamp(1rem,3vw,1.5rem); margin:0 0 6px; }
.theater .video-placeholder p { margin:0; font-size:.75rem; }
.theater video,.theater mux-player { width:100%; height:100%; min-height:0; object-fit:contain; --media-object-fit:contain; }
.theater .video-controls { padding:4px 8px; min-height:52px; background:#f5f2e9; color:var(--ink); border:0; }
.theater .video-controls button { min-height:44px; }
.theater .chat { color:#fffdf7; background:rgba(38,60,50,.94); border:0; border-radius:0; min-height:0; display:flex; flex-direction:column; overflow:auto; }
.theater .chat-heading { padding:6px 10px; display:flex; align-items:center; justify-content:space-between; gap:6px; flex-wrap:wrap; border-color:#81917c; }
.theater .chat-heading h2 { margin:0; font:600 .8rem Arial,sans-serif; }
.theater #connection { color:#d7e0d1; font-size:.7rem; }
.theater #toggle-history { padding:3px 8px; font-size:.7rem; min-height:44px; border-color:#839789; }
.theater .chat-notice { padding:4px 10px; font-size:.65rem; background:rgba(255,255,255,.07); color:#d7e0d1; }
.theater .messages { height:auto; min-height:0; max-height:100px; padding:0 10px; flex:0 1 auto; }
.theater:not(.history-open) .messages .message:nth-last-child(n+3) { display:none; }
.theater .message { padding:5px 0; border-color:#728578; }
.theater .message p { margin:2px 0 0; font-size:.8rem; }
.theater .sequence { color:#d7e0d1; }
.theater .compose { padding:5px 10px 8px; border-color:#81917c; flex:none; margin-top:auto; }
.theater #fixture-settings summary { min-height:28px; color:#d7e0d1; }
.theater #fixture-settings[open] { max-height:150px; overflow:auto; }
.theater #identity { color:#d7e0d1; margin-bottom:4px; }
.theater #chat-form { display:grid; grid-template-columns:minmax(0,1fr) 100px; gap:4px 6px; }
.theater #chat-form label { grid-column:1/-1; margin:0; font-size:.7rem; }
.theater #message { height:44px; min-height:44px; resize:none; padding:8px; }
.theater #send { width:auto; margin:0; padding:3px 5px; font-size:.7rem; min-height:44px; }
.theater #feedback { margin:0; }
.theater #feedback:not(:empty) { max-height:44px; overflow:auto; padding:4px 6px; font-size:.7rem; color:var(--ink); }
.theater.history-open:not(.theater-wide) { grid-template-rows:54px minmax(70px,1fr) minmax(0,min(480px,65%)); }
.theater.history-open .messages { max-height:200px; flex:1 1 auto; }
.theater.chat-hidden { grid-template-rows:54px minmax(0,1fr); }
.theater.theater-wide { grid-template-columns:minmax(0,1fr) min(320px,42%); grid-template-rows:54px minmax(0,1fr); }
.theater-wide .theater-bar { grid-column:1/-1; }
.theater-wide .chat { grid-column:2; grid-row:2; max-height:none; border-left:1px solid #81917c; }
.theater-wide .watch { grid-column:1; grid-row:2; }
.theater-wide .messages { flex:1 1 auto; max-height:none; }
.theater-wide.chat-hidden { grid-template-columns:minmax(0,1fr); }
.theater.theater-short:not(.theater-wide) .chat-heading h2,.theater-short .chat-notice { display:none; }
.theater-short:not(.theater-wide) .messages { max-height:40px; }
.theater-short .video-placeholder p { display:none; }
.theater-keyboard .messages,.theater-keyboard #toggle-history { display:none; }
.theater-keyboard .chat-heading { padding:2px 10px; }
.theater-keyboard .chat-heading h2 { display:none; }
.theater.theater-keyboard:not(.theater-wide) { grid-template-rows:54px minmax(70px,1fr) minmax(0,160px); }
.theater #buyer-login.buyer-signed-in { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:6px; margin-bottom:4px; }
.theater #buyer-login.buyer-signed-in>h3,.theater #buyer-login.buyer-signed-in>p:not(#buyer-status),.theater #buyer-login.buyer-signed-in #buyer-form { display:none; }
.theater .buyer-signed-in #buyer-status { grid-column:1; grid-row:1; margin:0; font-size:.65rem; max-height:32px; overflow:auto; overflow-wrap:anywhere; }
.theater .buyer-signed-in #buyer-logout { grid-column:2; grid-row:1; font-size:.7rem; color:#fffdf7; border-color:#839789; }
.theater #buyer-login:not(.buyer-signed-in)>h3,
.theater #buyer-login:not(.buyer-signed-in)>p:not(#buyer-status) { display:none; }
.theater #buyer-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px; }
.theater #buyer-form label { grid-column:1/-1; margin:0; font-size:.7rem; }
.theater #buyer-form input,.theater #buyer-form button { min-width:0; min-height:44px; margin:0; font-size:.75rem; }
.theater #buyer-status { font-size:.7rem; margin:4px 0; }
.theater #buyer-logout { font-size:.7rem; min-height:44px; padding:4px 8px; }
.video-placeholder.live-player { padding: 0; min-height: 0; aspect-ratio: 16 / 9; }
.live-player mux-player { display: block; width: 100%; height: 100%; --media-object-fit: contain; }

/* Live-sale schedule beneath customer-page branding. */
.brand-schedule { margin: .75rem 0 0; font-size: .875rem; line-height: 1.4; }

/* Match customer desktop video geometry to the host view. */
@media (min-width: 901px) {
  main:has(> .studio) { max-width: none; padding-inline: 4vw; }
  main > .studio:not(.theater) { grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr); gap: 24px; }
}

/* Text-only OBS overlay; does not affect website or host chat. */
html.overlay-document,
body.overlay,
body.overlay main,
body.overlay ol,
body.overlay .message {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
}
body.overlay .message {
  background: rgba(0,0,0,0.30) !important;
  color: #fff;
  text-shadow: -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000, -1.5px -1.5px 0 #000, 1.5px -1.5px 0 #000, -1.5px 1.5px 0 #000, 1.5px 1.5px 0 #000, 0 3px 3px rgba(0,0,0,.7);
}
body.overlay .message strong,
body.overlay .message p,
body.overlay .sequence {
  color: #fff;
}