@font-face {
  font-family: 'Archivo Black';
  src: url('/fonts/ArchivoBlack-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}
:root { color-scheme: dark; background: #000; }
@font-face {
  font-family: 'Gelasio';
  src: url('/fonts/Gelasio-Italic.ttf') format('truetype');
  font-weight: 400 700;
  font-style: italic;
  font-display: block;
}
* { box-sizing: border-box; cursor: none !important; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #000; }
body { overscroll-behavior: none; }
#visuals { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#stage {
  contain: layout style;
  will-change: transform;
  z-index: 1;
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7vh 7vw;
  user-select: none;
  -webkit-user-select: none;
}
#message {
  width: 100%;
  text-align: center;
  font-family: 'Archivo Black', sans-serif;
  font-weight: 400;
  font-size: 4.4vw;
  line-height: 1.3;
  letter-spacing: .015em;
  text-transform: uppercase;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: #000;
  -webkit-text-stroke: .05em #fff;
  paint-order: stroke fill;
  filter: drop-shadow(0 2px 3px #000);
}
#message .italic {
  font-family: 'Gelasio', Georgia, serif;
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  letter-spacing: .005em;
  font-variant-numeric: lining-nums;
}
#input {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  font-size: 16px;
  caret-color: transparent;
  /* This editor captures input only. Avoid thousands of one-character lines
     and their caret/scroll layout work in long-text edits. */
  white-space: pre;
  overflow: hidden;
  contain: strict;
  resize: none;
  outline: none;
}
::selection { background: transparent; }

#message .big { font-size: 2.5em; }

#background-video, #audience-video { position: fixed; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; pointer-events: none; }
body[data-background="video"] #background-video { opacity: var(--video-opacity, .72); }

#audience-video { filter: grayscale(1); }
body[data-background="audience"] #audience-video { opacity:.85; }

#operator-launcher { position:fixed; z-index:10; top:18px; right:18px; max-width:310px; padding:14px; border:1px solid #445065; border-radius:10px; background:#17202eee; color:#fff; font:14px system-ui,sans-serif; }
#operator-launcher[hidden] { display:none; }
#operator-launcher a { color:#fff; font-weight:700; text-decoration:none; }
#operator-launcher button { margin-left:12px; border:0; background:none; color:#c6cfdd; font-size:22px; }
#operator-launcher small { display:block; margin-top:8px; color:#aebbd0; font-size:11px; line-height:1.4; }
#operator-launcher, #operator-launcher * { cursor:auto !important; }
#operator-launcher a, #operator-launcher button { cursor:pointer !important; }

/* The same curved ampersand in every typing style, with normal text editing. */
#message .ampersand {
  display: inline-block;
  width: .86em;
  height: .74em;
  vertical-align: -.035em;
  overflow: hidden;
  color: transparent;
  -webkit-text-stroke: 0;
  background: url('/ampersand.svg') center / contain no-repeat;
}

#operator-launcher .desktop-notice {
  display: block;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #526078;
  color: #ffda8a;
  font-size: 13px;
  font-weight: 750;
  line-height: 1.45;
}

#message .ampersand.big { background-image: url('/ampersand-big.svg'); }