/* The stage: 1920x1080, the size the player scales. Colours follow the app's
   Graystone palette (navy ground, mint accent). */
@font-face{font-family:"Geist Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(../app/assets/fonts/geist-latin-wght-normal.woff2) format("woff2-variations")}
@font-face{font-family:"Geist Mono Variable";font-style:normal;font-weight:100 900;font-display:swap;src:url(../app/assets/fonts/geist-mono-latin-wght-normal.woff2) format("woff2-variations")}
:root { --accent: #6FD8BE; --ink: #F6FAFD; --navy: #071A2B; --deep: #051521; }
html, body { margin: 0; width: 1920px; height: 1080px; overflow: hidden; background: var(--deep); }
#stage { position: relative; width: 1920px; height: 1080px; overflow: hidden; background: var(--navy);
  font-family: "Geist Variable", Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }

#cam { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; transform-origin: 0 0; pointer-events: none; }
#appbox { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform: scale(1.2); transform-origin: 0 0; }
#app { width: 1600px; height: 900px; border: 0; display: block; background: var(--navy); }

/* A second browser window for the respondent's side of a shared survey. */
#pip { position: absolute; left: 40px; top: 32px; width: 1840px; height: 1008px; background: #0B2236;
  border: 1px solid rgba(255,255,255,.28); border-radius: 10px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4); }
#pip[hidden] { display: none; }
.pip__bar { height: 44px; display: flex; align-items: center; gap: 16px; padding: 0 16px; background: #10293F; border-bottom: 1px solid rgba(255,255,255,.14);
  font: 500 22px/1 "Geist Variable", Inter, system-ui, sans-serif; color: #C6D3DE; letter-spacing: .01em; }
.pip__dots { display: inline-flex; gap: 7px; }
.pip__dots i { width: 11px; height: 11px; border-radius: 50%; background: rgba(255,255,255,.22); display: block; }
.pip__view { position: absolute; left: 0; top: 45px; width: 1840px; height: 963px; overflow: hidden; }
#pipframe { width: 1022px; height: 535px; border: 0; transform: scale(1.8); transform-origin: 0 0; background: var(--navy); }

#overlay { position: absolute; inset: 0; z-index: 5; cursor: pointer; outline: none; }
#overlay:focus-visible { box-shadow: inset 0 0 0 6px var(--accent); }
#hls { position: absolute; inset: 0; pointer-events: none; }
.hl { position: absolute; border: 3px solid var(--accent); border-radius: 8px; box-shadow: 0 0 0 9999px rgba(3, 12, 20, 0); pointer-events: none;
  transition: opacity .35s ease; }
.hl--dim { box-shadow: 0 0 0 9999px rgba(3, 12, 20, .38); }
.hl--soft { border-style: dashed; }
.hl__label { position: absolute; left: -3px; bottom: calc(100% + 8px); white-space: nowrap; padding: 6px 12px 7px; border-radius: 5px;
  background: var(--accent); color: #052019; font: 600 25px/1.15 "Geist Variable", Inter, system-ui, sans-serif; letter-spacing: .005em; }
.hl__label--below { bottom: auto; top: calc(100% + 8px); }
.anim .hl { animation: hl-in .45s cubic-bezier(.3,.7,.3,1) both; }
@keyframes hl-in { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
.callout { position: absolute; max-width: 680px; padding: 16px 22px 17px; border-radius: 6px; background: rgba(5, 21, 33, .94);
  border: 1px solid var(--accent); color: var(--ink); font: 500 28px/1.35 "Geist Variable", Inter, system-ui, sans-serif; pointer-events: none;
  box-shadow: 0 14px 40px rgba(0,0,0,.45); white-space: pre-line; }
.anim .callout { animation: hl-in .45s ease both; }

#cursor { position: absolute; left: 0; top: 0; width: 34px; height: 34px; pointer-events: none; z-index: 6;
  filter: drop-shadow(0 3px 5px rgba(0,0,0,.55)); transition: opacity .3s; }
#cursor path { fill: #fff; stroke: #0A1A28; stroke-width: 1.6; stroke-linejoin: round; }
#cursor.hidden { opacity: 0; }
.ripple { position: absolute; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; border: 3px solid var(--accent);
  pointer-events: none; z-index: 6; animation: ripple .6s ease-out forwards; }
@keyframes ripple { from { transform: scale(.4); opacity: 1; } to { transform: scale(3.6); opacity: 0; } }

/* Chapter card: shown for a few seconds when a state starts in playback. */
#card { position: absolute; left: 56px; bottom: 52px; z-index: 7; max-width: 1160px; padding: 20px 28px 22px; border-left: 4px solid var(--accent);
  background: rgba(5, 21, 33, .93); box-shadow: 0 20px 60px rgba(0,0,0,.5); transition: opacity .6s ease; }
#card[hidden] { display: block; opacity: 0; pointer-events: none; }
.card__k { margin: 0 0 8px; font: 500 17px/1 "Geist Mono Variable", ui-monospace, Menlo, monospace; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.card__h { margin: 0; font: 600 34px/1.22 "Geist Variable", Inter, system-ui, sans-serif; color: var(--ink); letter-spacing: -.01em; }

#veil { position: absolute; inset: 0; z-index: 8; display: flex; align-items: center; justify-content: center; background: rgba(7, 26, 43, .55);
  transition: opacity .3s; }
#veil[hidden] { display: none; }
#veil p { font: 500 26px/1 "Geist Variable", Inter, system-ui, sans-serif; color: #C6D3DE; letter-spacing: .01em;
  padding: 18px 28px; background: rgba(5, 21, 33, .9); border: 1px solid rgba(255,255,255,.2); border-radius: 6px; }

.still .hl, .still .callout { animation: none !important; transition: none !important; }
.still #cam { transition: none !important; }