:root{
  --bg:#000; --fg:#fff;
  --panel:rgba(18,18,20,.92);
  --panel-solid:#121214;
  --line:rgba(255,255,255,.14);
  --muted:rgba(255,255,255,.62);
  --accent:#5ddc8c;
  --accent-dim:rgba(93,220,140,.16);
  --warn:#ffcf5d;
  --danger:#ff6b6b;
  --r:16px;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,system-ui,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%;margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);overscroll-behavior:none}
body{overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,select{font:inherit;color:inherit}

#stage{position:fixed;inset:0;overflow:hidden}
#cam{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;display:block}
#cam.mirror{transform:scaleX(-1)}
#overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}

/* ---------- top bar ---------- */
#topbar{
  position:absolute;top:0;left:0;right:0;z-index:6;
  display:flex;align-items:center;gap:10px;
  padding:calc(var(--safe-t) + 10px) 14px 10px;
  background:linear-gradient(to bottom,rgba(0,0,0,.62),rgba(0,0,0,0));
}
.brand{font-weight:650;letter-spacing:-.01em;font-size:17px;flex:1}
.pill{
  padding:4px 9px;border-radius:999px;font-size:11px;
  background:rgba(0,0,0,.42);border:1px solid var(--line);color:var(--muted)
}
.mono{font-family:var(--mono)}
.icon{
  width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:rgba(0,0,0,.42);border:1px solid var(--line);color:#fff;font-size:22px;line-height:1
}
.icon:active{background:rgba(255,255,255,.16)}

/* ---------- start gate ---------- */
#gate{
  position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:24px;
  background:radial-gradient(120% 90% at 50% 0%,#16171c 0%,#000 70%)
}
#gate.hidden{display:none}
.gate-card{max-width:380px;text-align:center}
.gate-icon{color:var(--accent);margin-bottom:14px;display:flex;justify-content:center}
.gate-card h1{margin:0 0 10px;font-size:34px;letter-spacing:-.03em;font-weight:680}
.gate-sub{margin:0 0 26px;color:var(--muted);line-height:1.55;font-size:15px}
.gate-note{margin:18px 0 0;font-size:12px;color:rgba(255,255,255,.42);line-height:1.5}
.primary{
  background:var(--accent);color:#04150b;font-weight:650;border-radius:999px;
  padding:15px 30px;font-size:16px;letter-spacing:-.01em
}
.primary:active{transform:scale(.975)}
.big{width:100%;max-width:280px}

/* ---------- dock ---------- */
#dock{
  position:absolute;left:0;right:0;bottom:0;z-index:6;
  display:flex;gap:8px;align-items:center;
  padding:12px 12px calc(var(--safe-b) + 12px);
  overflow-x:auto;scrollbar-width:none;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,0))
}
#dock::-webkit-scrollbar{display:none}
.dockbtn{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;
  padding:10px 15px;border-radius:999px;font-size:13.5px;font-weight:550;
  background:rgba(24,24,27,.78);border:1px solid var(--line);color:rgba(255,255,255,.8);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  min-height:44px;white-space:nowrap
}
.dockbtn[aria-pressed="true"]{background:var(--accent);color:#04150b;border-color:transparent}
.dockbtn .dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.85}
.dockbtn:active{transform:scale(.96)}

/* ---------- captions ---------- */
#captionBar{
  position:absolute;left:0;right:0;bottom:calc(var(--safe-b) + 76px);z-index:5;
  padding:0 14px;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:4px
}
.cap-src{
  font-size:13px;color:rgba(255,255,255,.6);background:rgba(0,0,0,.55);
  padding:5px 11px;border-radius:9px;max-width:min(680px,92vw);text-align:center;line-height:1.4
}
.cap-src:empty{display:none}
.cap-main{
  font-size:21px;font-weight:560;line-height:1.34;letter-spacing:-.01em;
  background:rgba(0,0,0,.74);padding:11px 16px;border-radius:13px;
  max-width:min(680px,92vw);text-align:center;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)
}
.cap-main:empty{display:none}
.cap-main .interim{opacity:.55}
.cap-meta{font-size:11px;color:rgba(255,255,255,.45);font-family:var(--mono)}
.cap-meta:empty{display:none}

/* ---------- detail sheet ---------- */
#sheet{
  position:absolute;left:0;right:0;bottom:0;z-index:14;
  max-height:78vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--panel);backdrop-filter:blur(26px);-webkit-backdrop-filter:blur(26px);
  border-top:1px solid var(--line);border-radius:22px 22px 0 0;
  padding:8px 20px calc(var(--safe-b) + 26px);
  animation:rise .22s cubic-bezier(.2,.8,.3,1)
}
@keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
.sheet-grab{width:38px;height:4px;border-radius:2px;background:rgba(255,255,255,.26);margin:6px auto 14px}
.sheet-close{position:absolute;top:12px;right:14px;width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.1);font-size:22px;line-height:1;display:grid;place-items:center}
.sh-kicker{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--accent);font-weight:650;margin-bottom:5px}
.sh-title{font-size:25px;font-weight:670;letter-spacing:-.025em;margin:0 0 3px;line-height:1.2}
.sh-sci{font-style:italic;color:var(--muted);font-size:14.5px;margin:0 0 14px}
.sh-hero{width:100%;height:172px;object-fit:cover;border-radius:13px;margin:0 0 14px;background:#1c1c20;display:block}
.sh-body{font-size:15px;line-height:1.62;color:rgba(255,255,255,.87);margin:0 0 16px}
.sh-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:9px;margin:0 0 18px}
.fact{background:rgba(255,255,255,.055);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.fact dt{font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 3px}
.fact dd{margin:0;font-size:14px;font-weight:560;line-height:1.35}
.sh-actions{display:flex;gap:9px;flex-wrap:wrap}
.ghost{
  display:inline-flex;align-items:center;gap:7px;min-height:44px;
  padding:11px 17px;border-radius:999px;font-size:14px;font-weight:560;
  background:rgba(255,255,255,.09);border:1px solid var(--line)
}
.ghost:active{background:rgba(255,255,255,.17)}
.ghost.solid{background:var(--accent);color:#04150b;border-color:transparent}
.sh-conf{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);margin-bottom:12px}
.bar{width:54px;height:4px;border-radius:2px;background:rgba(255,255,255,.16);overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent)}
.sh-note{font-size:12.5px;color:var(--muted);line-height:1.55;margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line)}
.skel{background:linear-gradient(90deg,rgba(255,255,255,.06),rgba(255,255,255,.13),rgba(255,255,255,.06));background-size:200% 100%;animation:sk 1.1s linear infinite;border-radius:7px;height:13px;margin-bottom:8px}
@keyframes sk{from{background-position:200% 0}to{background-position:-200% 0}}

/* ---------- settings ---------- */
#settings{
  position:absolute;inset:0;z-index:18;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--panel-solid)
}
.settings-inner{max-width:560px;margin:0 auto;padding:calc(var(--safe-t) + 14px) 20px calc(var(--safe-b) + 40px)}
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.sh h2{margin:0;font-size:26px;letter-spacing:-.025em}
.sgroup{border:1px solid var(--line);border-radius:var(--r);padding:16px;margin-bottom:14px;background:rgba(255,255,255,.025)}
.slabel{display:block;font-size:13px;font-weight:600;margin-bottom:7px}
.stitle{font-size:14.5px;font-weight:600;margin-bottom:3px}
.shelp{font-size:12.5px;color:var(--muted);line-height:1.55;margin:5px 0 0}
.shelp code{font-family:var(--mono);font-size:11.5px;background:rgba(255,255,255,.09);padding:1px 5px;border-radius:4px}
#settings input[type=url]{
  width:100%;padding:12px 13px;border-radius:10px;min-height:44px;
  background:rgba(0,0,0,.45);border:1px solid var(--line);font-size:14px;font-family:var(--mono)
}
#settings input[type=url]:focus{outline:none;border-color:var(--accent)}
.srow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--line)}
.srow:first-child{border-top:0;padding-top:2px}
.srow>div:first-child{flex:1;min-width:0}
#settings select{
  padding:10px 12px;border-radius:10px;min-height:44px;
  background:rgba(0,0,0,.45);border:1px solid var(--line);font-size:14px
}
#settings input[type=range]{width:124px;accent-color:var(--accent)}
.switch{position:relative;display:inline-block;width:50px;height:30px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch span{position:absolute;inset:0;background:rgba(255,255,255,.18);border-radius:999px;transition:background .18s}
.switch span:before{content:"";position:absolute;width:24px;height:24px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .18s}
.switch input:checked+span{background:var(--accent)}
.switch input:checked+span:before{transform:translateX(20px)}
.status{font-size:12.5px;margin:10px 0;min-height:18px}
.status.ok{color:var(--accent)}
.status.bad{color:var(--danger)}
.status.wait{color:var(--warn)}

/* ---------- toast ---------- */
#toast{
  position:absolute;left:50%;top:calc(var(--safe-t) + 62px);transform:translateX(-50%);z-index:30;
  background:rgba(0,0,0,.88);border:1px solid var(--line);color:#fff;
  padding:11px 18px;border-radius:999px;font-size:13.5px;max-width:90vw;text-align:center;
  animation:rise .18s ease
}

@media (min-width:900px){
  #sheet{left:auto;right:16px;bottom:16px;width:400px;max-height:calc(100vh - 32px);border-radius:20px;border:1px solid var(--line)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- live scene label ---------- */
#reticle{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(66vw,66vh);height:min(66vw,66vh);z-index:4;pointer-events:none
}
#reticle span{position:absolute;width:26px;height:26px;border:2.5px solid rgba(255,255,255,.85)}
#reticle span:nth-child(1){left:0;top:0;border-right:0;border-bottom:0;border-radius:8px 0 0 0}
#reticle span:nth-child(2){right:0;top:0;border-left:0;border-bottom:0;border-radius:0 8px 0 0}
#reticle span:nth-child(3){left:0;bottom:0;border-right:0;border-top:0;border-radius:0 0 0 8px}
#reticle span:nth-child(4){right:0;bottom:0;border-left:0;border-top:0;border-radius:0 0 8px 0}
#reticle.hot span{border-color:var(--accent)}

#sceneChip{
  position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(var(--safe-b) + 78px);z-index:7;
  display:flex;align-items:center;gap:10px;max-width:92vw;
  padding:12px 18px;border-radius:999px;min-height:48px;
  background:rgba(0,0,0,.8);border:1px solid var(--line);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  animation:rise .16s ease
}
#sceneChip:active{transform:translateX(-50%) scale(.97)}
#sceneName{font-size:17px;font-weight:620;letter-spacing:-.015em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#sceneMeta{font-size:11px;color:var(--muted);flex:0 0 auto}
body.caps-on #sceneChip{bottom:calc(var(--safe-b) + 150px)}