:root{
  color-scheme:light;
  --page:#eee9dc;
  --surface:#fffdf7;
  --surface-2:#e3ddcf;
  --surface-3:#d7d0c1;
  --ink:#0b0b0b;
  --muted:#6a675f;
  --hair:rgba(11,11,11,.16);
  --purple:#7657ff;
  --cyan:#42d8df;
  --lime:#b9ff45;
  --orange:#ff6638;
  --red:#ed4058;
  --shadow-lg:7px 7px 0 var(--ink);
  --shadow-sm:4px 4px 0 var(--ink);
}
html[data-theme="dark"]{
  color-scheme:dark;
  --page:#0d0f12;
  --surface:#171a1f;
  --surface-2:#22262d;
  --surface-3:#2c3139;
  --ink:#f2eee4;
  --muted:#aaa69d;
  --hair:rgba(242,238,228,.18);
  --shadow-lg:7px 7px 0 #000;
  --shadow-sm:4px 4px 0 #000;
}
html,body{background:var(--page);color:var(--ink)}
body.mmf-live-page{
  min-height:100dvh;
  padding:0 12px max(30px,env(safe-area-inset-bottom));
  color:var(--ink);
  background:
    linear-gradient(var(--hair) 1px,transparent 1px),
    linear-gradient(90deg,var(--hair) 1px,transparent 1px),
    var(--page);
  background-size:36px 36px;
  font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  text-shadow:none;
}
body.mmf-live-page::before{display:none}
body.mmf-live-page *,body.mmf-live-page *::before,body.mmf-live-page *::after{box-sizing:border-box}
body.mmf-live-page button,body.mmf-live-page input,body.mmf-live-page select{font:inherit}
body.mmf-live-page button,
body.mmf-live-page .support-link{
  border:2px solid var(--ink);
  border-radius:0;
  color:var(--ink);
  background:var(--surface);
  box-shadow:var(--shadow-sm);
  text-transform:none;
  transition:transform .08s linear,box-shadow .08s linear,background .14s linear,color .14s linear;
}
body.mmf-live-page button:hover,
body.mmf-live-page .support-link:hover{filter:none;transform:translate(-1px,-1px)}
body.mmf-live-page button:active,
body.mmf-live-page .support-link:active{
  color:var(--ink);background:var(--surface);border-color:var(--ink);
  transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)
}
body.mmf-live-page button:focus-visible,
body.mmf-live-page a:focus-visible,
body.mmf-live-page select:focus-visible,
body.mmf-live-page input:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
body.mmf-live-page button:disabled{opacity:.45}

#header.live-header{
  width:min(100%,760px);min-height:82px;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:10px 0 8px;text-align:left
}
.live-brand{display:flex;align-items:flex-end;gap:10px;color:var(--ink);text-decoration:none}
.live-brand img{display:block;width:clamp(176px,40vw,270px);height:auto}
html[data-theme="dark"] .live-brand img{filter:drop-shadow(3px 3px 0 #000)}
.live-brand span{
  padding:5px 7px;color:#0b0b0b;background:var(--lime);border:2px solid #0b0b0b;
  font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;white-space:nowrap
}
.live-icon-button{
  width:44px;min-width:44px;height:44px;min-height:44px;display:grid;place-items:center;padding:0!important
}
.live-icon-button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.installation-status{
  width:min(100%,760px);min-height:42px;justify-content:space-between!important;gap:8px;
  margin:0 0 11px;padding:7px 9px;color:var(--ink);background:var(--surface);
  border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);
  font:800 11px/1.25 ui-monospace,SFMono-Regular,Menlo,monospace;text-align:left
}
.status-left,.status-right{gap:7px;justify-content:flex-start}
.status-label{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}
.status-dot{width:10px;height:10px;border:2px solid var(--ink);border-radius:50%;background:var(--red)}
.status-dot.online{background:var(--lime);box-shadow:0 0 0 3px color-mix(in srgb,var(--lime) 25%,transparent)}
#machineStatus,#sessionCountdown{color:var(--ink)}
#participantBadge{color:var(--ink);font-weight:900}

#videoContainer{
  width:min(100%,760px);min-height:min(68dvh,660px);margin:0 auto 18px;
  color:#fffdf7;background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    radial-gradient(circle at 50% 48%,#222832,#080a0d 68%);
  background-size:48px 48px,48px 48px,auto;
  border:3px solid var(--ink);box-shadow:var(--shadow-lg);isolation:isolate
}
#videoContainer::after{
  content:"";position:absolute;inset:0;z-index:12;pointer-events:none;opacity:.09;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.18) 0 1px,transparent 1px 5px)
}
body:not(.session-active) #videoContainer{
  width:min(100%,760px);height:auto;min-height:0;margin-bottom:18px;overflow:visible;border:0;background:transparent;box-shadow:none
}
body:not(.session-active) #videoContainer::after{display:none}
body:not(.session-active) .session-intro{position:relative;inset:auto;overflow:visible;padding:0;background:transparent}
.intro-panel{
  position:relative;width:min(100%,560px);margin:auto;padding:24px 22px 25px;
  color:var(--ink);background:var(--surface);border:3px solid var(--ink);box-shadow:var(--shadow-lg)
}
.intro-panel::before{content:"";position:absolute;left:-3px;right:-3px;top:-3px;height:11px;background:var(--purple);border-bottom:3px solid var(--ink)}
.intro-panel h2{margin:10px 0 18px;color:var(--ink);font-size:clamp(28px,7vw,42px);line-height:.95;letter-spacing:-.055em}
.panel-eyebrow{
  display:block;margin:7px 0 8px;color:#5740c7;
  font:900 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em
}
html[data-theme="dark"] .panel-eyebrow{color:#a99cff}
.identity-grid{gap:13px}
.field{gap:7px;color:var(--ink);font-weight:850;font-size:14px}
.field>span:first-child,.field-note{font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.field-note{color:var(--muted);font-size:11px;font-weight:650}
.field input,.field select{
  min-height:46px;padding:0 38px 0 11px;color:var(--ink);background:var(--surface-2);
  border:2px solid var(--ink);box-shadow:none;font-size:16px;font-weight:750
}
.field select{
  appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);
  background-position:calc(100% - 16px) 20px,calc(100% - 11px) 20px;background-repeat:no-repeat;background-size:5px 5px
}
#startSessionBtn,#startSessionBtn.primary{
  width:100%;min-height:52px;margin-top:18px;color:#0b0b0b;background:var(--lime);
  border:2px solid #0b0b0b;box-shadow:4px 4px 0 #0b0b0b;font-size:16px;font-weight:950;letter-spacing:.04em
}
#formMessage{margin-top:13px;color:var(--muted);font-size:13px}
#formMessage.error{color:var(--red);font-weight:800}

.auth-panel{padding:0 0 17px;border-bottom:2px solid var(--ink)}
body.auth-required .auth-panel{background:rgba(3,4,6,.84);backdrop-filter:blur(5px)}
body.auth-required #availabilityPanel,
body.auth-required #joinPanel,
body.auth-required #belowStage{display:none!important}
body.auth-loading .auth-gate-card>:not(#registrationTitle):not(#registrationLead){display:none!important}
.auth-gate-card{
  position:relative;width:min(100%,470px);gap:13px;padding:27px 22px 22px;color:var(--ink);
  background:var(--surface);border:3px solid var(--ink);box-shadow:9px 9px 0 var(--purple)
}
.auth-gate-card::before{content:"";position:absolute;left:-3px;right:-3px;top:-3px;height:10px;background:var(--cyan);border-bottom:3px solid var(--ink)}
.auth-gate-card h2{color:var(--ink);font-size:clamp(25px,7vw,36px);letter-spacing:-.04em}
.auth-gate-card>p,.auth-alt,#authMessage{color:var(--muted)}
.terms-check{grid-template-columns:24px 1fr;color:var(--ink)}
.terms-check input{
  appearance:none;width:22px;height:22px;margin:0;display:grid;place-content:center;padding:0;
  background:var(--surface);border:2px solid var(--ink);box-shadow:2px 2px 0 var(--ink)
}
.terms-check input::before{content:"";width:11px;height:7px;transform:rotate(-45deg) scale(0);border-left:3px solid #0b0b0b;border-bottom:3px solid #0b0b0b}
.terms-check input:checked{background:var(--lime)}
.terms-check input:checked::before{transform:rotate(-45deg) scale(1)}
.terms-link{color:#5740c7}
html[data-theme="dark"] .terms-link{color:#a99cff}
.google-button{width:100%;min-height:48px;font-weight:900}
.google-button svg{width:23px;height:23px}

.availability-panel{gap:12px;padding:21px 8px 9px;color:var(--ink)}
.availability-panel h2{color:var(--ink);font-size:clamp(27px,7vw,38px);letter-spacing:-.045em}
.availability-panel p{color:var(--muted)}
.notify-bell{width:54px;min-height:54px;padding:0;font-size:23px}
.notify-bell.active{color:#0b0b0b;background:var(--lime);border-color:#0b0b0b;box-shadow:4px 4px 0 #0b0b0b}
.notify-bell-label{color:var(--muted)}

.queue-card{
  gap:6px;margin-top:15px;padding:13px;color:#0b0b0b;background:var(--cyan);
  border:2px solid #0b0b0b;box-shadow:4px 4px 0 #0b0b0b
}
.queue-card strong{color:#0b0b0b}
.mini-preview{position:relative;margin-top:17px;border:2px solid var(--ink);background:#080a0d;box-shadow:4px 4px 0 var(--ink)}
.mini-preview-label{
  position:absolute;z-index:3;left:8px;top:8px;padding:6px 8px;color:#0b0b0b;background:var(--cyan);border:2px solid #0b0b0b;
  font:900 9px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em
}
.mini-preview-controls{min-height:48px;padding:7px 9px;border-top:2px solid var(--ink);background:var(--surface)}
#webrtcConnectionLabel{color:var(--muted);font-size:10px}
#webrtcSoundBtn{min-height:36px;padding:7px 10px;font-size:11px;font-weight:850}

.below-stage{width:min(100%,760px);margin:1px auto 18px}
.support-links,.community-links{gap:10px}
.support-link{
  min-height:52px;padding:9px 10px;gap:9px;font-size:12px;font-weight:900;line-height:1.15;text-decoration:none
}
.support-link.support-primary{color:#0b0b0b;background:var(--cyan);border-color:#0b0b0b}
.support-link.venmo{color:#0b0b0b;background:#4ca5ff;border-color:#0b0b0b}
.pixel-icon,.social-icon{width:31px;height:31px;border:2px solid currentColor}
.youtube-icon{background:var(--red)}

.face-loading-overlay{background:rgba(7,9,12,.84);backdrop-filter:blur(3px)}
.face-loading-card{
  color:#fffdf7;background:#11151b;border:2px solid #fffdf7;box-shadow:7px 7px 0 var(--cyan)
}
.face-loading-spinner{width:42px;height:42px;border:3px solid rgba(255,255,255,.18);border-top-color:var(--cyan);border-right-color:var(--lime);border-radius:50%;animation:mmfLiveSpin .9s linear infinite}
.face-loading-title{color:#fffdf7;font-size:18px;font-weight:900}
.face-loading-subtitle,.face-loading-dots{color:#b9b8b2}
@keyframes mmfLiveSpin{to{transform:rotate(360deg)}}

.session-overlay-status{
  top:max(13px,env(safe-area-inset-top));left:13px;display:flex;align-items:center;gap:7px;
  max-width:calc(100% - 78px);padding:8px 10px;color:#0b0b0b;background:var(--surface);
  border:2px solid #0b0b0b;box-shadow:3px 3px 0 #0b0b0b;font:850 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.session-overlay-status::before{content:"";width:8px;height:8px;flex:0 0 auto;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
.active-session-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)}
#closeSessionBtn{
  top:max(13px,env(safe-area-inset-top));right:13px;width:46px;min-height:46px;padding:0;
  color:#0b0b0b;background:var(--surface);border-color:#0b0b0b;font-size:25px
}
.grid-instruction{
  min-height:45px;padding:8px 12px;color:#0b0b0b;background:var(--surface);
  border:2px solid #0b0b0b;box-shadow:4px 4px 0 #0b0b0b;font-size:clamp(10px,2.5vw,13px)
}
.nose-key{color:#8d1732;text-shadow:none}.mouth-key{color:#5740c7;text-shadow:none}
#stopSessionBtn{border-color:var(--red);color:var(--red);background:var(--surface);font-weight:900}

.notification-modal,.mobile-orientation-modal,.donation-modal{
  overflow:auto;overscroll-behavior:contain;background:rgba(3,4,6,.82);backdrop-filter:blur(5px)
}
.notification-card,.mobile-orientation-card,.donation-card{
  max-height:calc(100dvh - 24px);overflow:auto;color:var(--ink);background:var(--surface);
  border:3px solid var(--ink);box-shadow:9px 9px 0 var(--purple)
}
.notification-card p,.mobile-orientation-card p,.donation-card p{color:var(--muted)}
.mobile-orientation-card h2,.donation-card h2{color:var(--ink)}
.mobile-orientation-icon,.donation-pixel-heart{color:var(--orange)}
.donation-amount{color:#0b0b0b;background:var(--lime);border:2px solid #0b0b0b}
#dismissDonationBtn{color:var(--ink);border-color:var(--ink)}

body.session-active{padding:0;background:#050708}
body.session-active #videoContainer{width:100vw;max-width:none;height:100dvh;min-height:0;margin:0;border:0;box-shadow:none}
body.session-active.no-program-feed #videoContainer{background:#000}
body.session-active.no-program-feed #videoContainer::after{display:none}
body.session-active.no-program-feed #sessionCanvas{background:#000;image-rendering:auto}
.session-identity{
  position:absolute;z-index:32;top:max(13px,env(safe-area-inset-top));left:13px;
  display:grid;gap:2px;min-width:150px;max-width:calc(100% - 78px);padding:8px 11px;
  color:#0b0b0b;background:var(--surface);border:2px solid #0b0b0b;box-shadow:3px 3px 0 #0b0b0b;
  font:800 11px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace
}
.session-identity strong{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.session-identity span{color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em}

@media (orientation:landscape) and (max-height:620px){
  .mobile-orientation-card{width:min(92vw,720px);grid-template-columns:auto 1fr;align-items:center;column-gap:20px;padding:18px 22px}
  .mobile-orientation-icon{grid-row:span 3;font-size:48px}
  .mobile-orientation-card h2,.mobile-orientation-card p{text-align:left}
  #mobileOrientationContinueBtn{grid-column:2}
}

@media(max-width:620px){
  body.mmf-live-page{padding-inline:8px}
  #header.live-header{min-height:69px;gap:6px;padding-top:8px}
  .live-brand{min-width:0;align-items:center;gap:6px}.live-brand img{width:min(48vw,190px)}.live-brand span{font-size:7px;padding:4px 5px}
  .installation-status{font-size:9px}.status-label{display:none}.status-right{margin-left:auto}
  .intro-panel{padding:22px 13px 20px}.intro-panel h2{font-size:clamp(26px,10vw,36px)}
  .support-links,.community-links{grid-template-columns:1fr}
  .notification-actions,.donation-providers{grid-template-columns:1fr}
  body:not(.session-active) #videoContainer{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}