:root{
  --session-accent:#5df4ff;
  --session-soft:#b9fbff;
    --void:#05070c;
    --void-2:#0a0e18;
    --cyan:#5df4ff;
    --cyan-soft:#a6fbff;
    --violet:#b46bff;
    --amber:#ffb454;
    --hud-dim: rgba(180,235,255,0.42);
  }
  *{ box-sizing:border-box; }
  html,body{
    margin:0; padding:0; width:100%; height:100%;
    background:var(--void);
    overflow:hidden;
    font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
    color: var(--hud-dim);
    -webkit-user-select:none; user-select:none;
  }
  #stage{ position:fixed; inset:0; }
  video{ display:none; }
  canvas{ position:absolute; inset:0; width:100%; height:100%; display:block; }

  #hud{ position:fixed; inset:0; pointer-events:none; z-index:5; }
  .hud-corner{
    position:absolute; font-size:12px; letter-spacing:.04em; text-transform:none;
    opacity:.7; line-height:1.6;
  }
  .hud-tl{ top:22px; left:26px; }
  .hud-tr{ top:22px; right:26px; text-align:right; }
  .hud-bl{ bottom:22px; left:26px; }
  .hud-br{ bottom:22px; right:26px; text-align:right; }
  .hud-tl .title{ color:var(--cyan-soft); font-size:13px; letter-spacing:.08em; opacity:.92; }
  .hand-readout{ display:flex; align-items:center; gap:8px; }
  .role-label{ color:var(--cyan-soft); opacity:.85; }
  .state-readout{ font-weight:700; color:white; min-width:38px; }
  .precision-label{ font-size:10px; color:var(--amber); padding:2px 7px; border-radius:999px; border:1px solid rgba(255,180,84,.40); opacity:.85; }
  .panel-status{ font-size:10px; color:var(--cyan-soft); letter-spacing:.04em; padding:2px 7px; border-radius:4px; background:rgba(93,244,255,.08); border:1px solid rgba(93,244,255,.45); opacity:.9; transition:all .2s ease; }
  .panel-status.off{ color:rgba(220,250,255,.4); border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.03); }
  .panel-status.link{ color:var(--cyan-soft); border-color:var(--cyan); background:rgba(93,244,255,.12); }
  .signal-bars{ display:inline-flex; align-items:flex-end; gap:2px; height:16px; margin-left:4px; }
  .signal-bars span{ width:3px; height:3px; border-radius:1px; background:rgba(220,250,255,.26); border:1px solid rgba(220,250,255,.25); transition:all .18s ease; }
  .signal-bars span:nth-child(2){ height:5px; }
  .signal-bars span:nth-child(3){ height:8px; }
  .signal-bars span.active{ background:var(--cyan); border-color:var(--cyan); box-shadow:0 0 5px var(--cyan); }
  .signal-bars span.warn{ background:var(--amber); border-color:var(--amber); }
  .dot{ display:inline-block; width:6px; height:6px; border-radius:50%; margin-right:6px; background:#38506a; box-shadow:none; transition:background .15s, box-shadow .15s; }
  .hud-br .dot{ margin-left:6px; margin-right:0; }
  .dot.on{ background:var(--cyan); box-shadow:0 0 8px 1px var(--cyan); }

  #center-msg{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    text-align:center; pointer-events:none; z-index:6;
    transition:opacity .5s ease;
  }
  #center-msg .headline{
    font-size:15px; letter-spacing:.08em; text-transform:none;
    color:var(--cyan-soft); opacity:.85; margin-bottom:10px;
  }
  #center-msg .sub{ font-size:12px; letter-spacing:.03em; opacity:.5; }
  .ring-hint{
    width:64px; height:64px; margin:0 auto 18px; border-radius:50%;
    border:1px solid rgba(93,244,255,.35);
    display:flex; align-items:center; justify-content:center;
    animation: pulseRing 2.2s ease-in-out infinite;
  }
  .ring-hint::before{
    content:""; width:10px; height:10px; border-radius:50%;
    background:var(--cyan); box-shadow:0 0 12px 2px var(--cyan);
    animation: pulseDot 2.2s ease-in-out infinite;
  }
  @keyframes pulseRing{
    0%,100%{ transform:scale(1); opacity:.5; }
    50%{ transform:scale(1.18); opacity:1; }
  }
  @keyframes pulseDot{
    0%,100%{ transform:scale(.7); opacity:.6; }
    50%{ transform:scale(1.15); opacity:1; }
  }

  #boot{
    position:fixed; inset:0; background:var(--void); z-index:20;
    display:flex; align-items:center; justify-content:center; flex-direction:column;
    transition:opacity .6s ease;
  }
  #boot .label{ font-size:13px; letter-spacing:.08em; text-transform:none; color:var(--cyan-soft); margin-bottom:16px; }
  #boot .bar{ width:220px; height:2px; background:rgba(93,244,255,.15); position:relative; overflow:hidden; }
  #boot .bar::after{
    content:""; position:absolute; top:0; left:-40%; width:40%; height:100%;
    background:linear-gradient(90deg, transparent, var(--cyan), transparent);
    animation:scanbar 1.1s linear infinite;
  }
  @keyframes scanbar{ from{ left:-40%; } to{ left:100%; } }
  #boot .err{ margin-top:22px; font-size:12px; color:var(--amber); letter-spacing:.02em; max-width:340px; text-align:center; line-height:1.6; display:none; }
  #boot .retry{
    margin-top:16px; pointer-events:auto; cursor:pointer;
    border:1px solid rgba(255,180,84,.5); color:var(--amber);
    background:transparent; font-family:inherit; font-size:12px; letter-spacing:.03em;
    text-transform:none; padding:9px 18px; display:none;
  }
  #boot .retry:hover{ background:rgba(255,180,84,.1); }


/* ---------------------------------------------------------------
   GESTURE GUIDE
   Compact, dismissible, and shown only when the experience starts.
--------------------------------------------------------------- */
.guide-open{
  position:fixed;
  top:20px;
  left:50%;
  transform:translateX(-50%);
  z-index:9;
  width:30px;
  height:30px;
  border:1px solid rgba(166,251,255,.32);
  border-radius:50%;
  background:rgba(3,12,22,.72);
  color:var(--cyan-soft);
  font:600 13px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  cursor:pointer;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  opacity:.68;
  transition:opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.guide-open:hover,
.guide-open:focus-visible{
  opacity:1;
  transform:translateX(-50%) scale(1.06);
  border-color:rgba(166,251,255,.72);
  outline:none;
}

.gesture-guide{
  position:fixed;
  left:50%;
  top:50%;
  width:min(430px,calc(100vw - 32px));
  transform:translate(-50%,-48%) scale(.97);
  z-index:10;
  padding:26px 28px 22px;
  border:1px solid rgba(93,244,255,.28);
  border-radius:16px;
  background:
    linear-gradient(135deg,rgba(7,22,36,.96),rgba(5,10,19,.94));
  box-shadow:0 20px 70px rgba(0,0,0,.46), inset 0 0 34px rgba(93,244,255,.035);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
}
.gesture-guide.visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transform:translate(-50%,-50%) scale(1);
}
.gesture-guide::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:repeating-linear-gradient(
    0deg,
    transparent 0 5px,
    rgba(93,244,255,.025) 6px
  );
}
.guide-close{
  position:absolute;
  top:10px;
  right:12px;
  width:30px;
  height:30px;
  border:0;
  background:transparent;
  color:rgba(220,250,255,.62);
  font:300 25px/1 Arial,sans-serif;
  cursor:pointer;
}
.guide-close:hover,
.guide-close:focus-visible{
  color:#fff;
  outline:none;
}
.guide-kicker{
  color:var(--cyan);
  font-size:10px;
  letter-spacing:.08em;
  opacity:.78;
  margin-bottom:10px;
}
.gesture-guide h1{
  margin:0 34px 20px 0;
  color:#effeff;
  font-size:21px;
  line-height:1.3;
  letter-spacing:-.015em;
  font-weight:650;
}
.gesture-steps{
  display:grid;
  gap:10px;
}
.gesture-step{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  align-items:start;
  padding:11px 12px;
  border:1px solid rgba(166,251,255,.10);
  border-radius:10px;
  background:rgba(93,244,255,.035);
}
.step-no{
  color:var(--cyan);
  font-size:10px;
  letter-spacing:.02em;
  padding-top:2px;
}
.gesture-step strong{
  display:block;
  color:#f4ffff;
  font-size:12px;
  letter-spacing:.02em;
  text-transform:none;
  margin-bottom:3px;
}
.gesture-step small{
  display:block;
  color:rgba(218,247,255,.62);
  font-size:11px;
  line-height:1.55;
  letter-spacing:0;
}
.gesture-step b{ color:var(--cyan-soft); font-weight:500; }
.guide-tip{
  margin-top:15px;
  color:rgba(190,225,238,.42);
  font-size:10px;
  line-height:1.55;
  letter-spacing:0;
}
.guide-tip b{ color:rgba(220,250,255,.68); font-weight:500; }

@media (max-width:600px){
  .guide-open{ top:14px; }
  .gesture-guide{
    padding:22px 18px 18px;
    border-radius:13px;
  }
  .gesture-guide h1{
    font-size:17px;
    margin-bottom:16px;
  }
  .gesture-step{
    grid-template-columns:32px 1fr;
    padding:10px;
  }
  .hud-corner{
    font-size:10px;
  }
  .hud-tl{ top:12px; left:12px; }
  .hud-tr{ top:12px; right:12px; }
  .hud-bl{ bottom:12px; left:12px; }
  .hud-br{ bottom:12px; right:12px; }
  .hud-tl .title{ font-size:10px; }
}

/* Respect devices that explicitly ask for reduced motion. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}


/* ---------------------------------------------------------------
   PANEL MODE SELECTOR
--------------------------------------------------------------- */
.hud-control-area{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  pointer-events:none;
}
.panel-mode{
  display:flex;
  gap:4px;
  padding:4px;
  border:1px solid rgba(166,251,255,.12);
  border-radius:7px;
  background:rgba(3,10,18,.52);
  pointer-events:auto;
}
.panel-mode button{
  border:1px solid transparent;
  border-radius:4px;
  padding:4px 7px;
  color:rgba(214,247,255,.48);
  background:transparent;
  font:600 9px/1 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Arial, sans-serif;
  letter-spacing:.02em;
  cursor:pointer;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.panel-mode button:hover,.panel-mode button:focus-visible{
  color:var(--cyan-soft);
  border-color:rgba(93,244,255,.28);
  outline:none;
}
.panel-mode button.active{
  color:#eaffff;
  background:rgba(93,244,255,.10);
  border-color:rgba(93,244,255,.38);
}
@media (max-width:600px){
  .hud-control-area{top:10px;right:10px;gap:5px;}
  .panel-mode{gap:2px;padding:3px;}
  .panel-mode button{padding:5px 7px;font-size:8px;}
}


/* V5 session palette + lightweight feedback */
.session-readout{display:flex;flex-direction:column;align-items:flex-end;gap:1px;margin-bottom:3px}
#sessionReadout{font-weight:600;color:var(--session-soft);letter-spacing:.02em}
#paletteReadout{font-size:10px;color:var(--hud-dim);letter-spacing:.02em;text-transform:none}
#session-toast{
  position:fixed;left:50%;top:18%;transform:translate(-50%,-8px);
  z-index:8;pointer-events:none;text-align:center;opacity:0;
  transition:opacity .3s ease,transform .45s ease;
}
#session-toast.show{opacity:1;transform:translate(-50%,0)}
#session-toast .toast-kicker{display:block;font-size:9px;letter-spacing:.08em;color:var(--hud-dim);margin-bottom:3px}
#session-toast strong{font-size:12px;font-weight:600;color:var(--session-soft)}
#stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:rgba(2,5,10,.10)}
@media (max-width:720px){
  .session-readout{font-size:9px}
  #paletteReadout{font-size:9px}
  #session-toast{top:16%}
}