:root{
  /* 四段素材都是纯白背景，页面底色跟着用白 */
  --wash:#FFFFFF;
  --ink:#2E312B;
  --ink-2:#4A4E45;
  --pad:clamp(16px,2vw,28px);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  overflow:hidden;
  background:#FFFFFF;
  font-family:"Inter","Noto Sans SC",-apple-system,BlinkMacSystemFont,sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------- 背景：画面边缘横向延展 ---------- */
#bg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

/* ---------- 主体画面 ---------- */
.frame{
  position:fixed;
  left:0;
  top:0;
  overflow:hidden;
  z-index:1;
  /* 纵向羽化（横向交给 canvas 自己，避免依赖 mask-composite） */
  -webkit-mask-image:linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image:linear-gradient(to bottom, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
#fg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  /* 横向羽化，让画面溶进背景（纵向由 .frame 负责） */
  -webkit-mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image:linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
}

/* ---------- 场景指示 ---------- */
.dots{
  position:fixed;
  left:50%;
  bottom:calc(clamp(18px,3.2vh,34px) + 62px);
  transform:translateX(-50%);
  z-index:19;
  display:flex;
  align-items:center;
  gap:6px;
  padding:6px 9px;
  border-radius:99px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(24,26,22,.07);
  box-shadow:0 8px 20px -12px rgba(30,32,28,.35);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}
.dots i{
  width:5px;height:5px;border-radius:99px;
  background:rgba(46,49,43,.3);
  transition:width .5s cubic-bezier(.22,1,.36,1), background .4s ease;
  cursor:pointer;
}
.dots i:hover{background:rgba(46,49,43,.55)}
.dots i.on{width:16px;background:#2E312B}

/* ---------- 底部按钮 ---------- */
.dock{
  position:fixed;
  left:50%;
  bottom:clamp(18px,3.2vh,34px);
  transform:translateX(-50%);
  z-index:20;
  display:flex;
  align-items:center;
  gap:2px;
  padding:6px;
  border-radius:999px;
  background:rgba(255,255,255,.86);
  border:1px solid rgba(24,26,22,.07);
  box-shadow:
    0 12px 32px -16px rgba(30,32,28,.4),
    0 1px 2px rgba(30,32,28,.05);
  backdrop-filter:blur(16px) saturate(1.1);
  -webkit-backdrop-filter:blur(16px) saturate(1.1);
}
.btn{
  position:relative;
  display:flex;
  align-items:center;
  gap:7px;
  padding:9px 15px;
  border:0;
  border-radius:999px;
  background:transparent;
  cursor:pointer;
  font-family:inherit;
  font-size:11.5px;
  letter-spacing:.06em;
  color:var(--ink-2);
  transition:background .25s ease, color .25s ease;
  white-space:nowrap;
}
.btn svg{
  width:15px;height:15px;
  fill:none;stroke:currentColor;
  stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
  opacity:.85;
  flex:0 0 auto;
}
.btn:hover{background:rgba(255,255,255,.6);color:var(--ink)}
.btn:active{transform:scale(.97)}
.btn.icon{padding:9px 11px}

.btn .dot{
  width:5px;height:5px;border-radius:50%;
  background:currentColor;opacity:.28;
  transition:opacity .25s ease, background .25s ease;
  margin-left:1px;
}
.btn.is-on{color:#3F6B3A}
.btn.is-on .dot{background:#4C9A3F;opacity:1;box-shadow:0 0 0 3px rgba(76,154,63,.18)}
.btn.is-off{color:#9A8B84}
.btn.is-off .dot{background:#B0736A;opacity:1;box-shadow:0 0 0 3px rgba(176,115,106,.14)}

/* ---------- 摄像头预览 ---------- */
.debug{
  position:fixed;
  right:var(--pad);
  bottom:calc(clamp(18px,3.2vh,34px) + 56px);
  width:min(240px,40vw);
  z-index:30;
  border-radius:12px;
  overflow:hidden;
  background:#14170F;
  box-shadow:0 16px 40px -14px rgba(40,44,30,.5);
  transition:opacity .28s ease, transform .28s ease;
}
.debug[data-hidden="true"]{opacity:0;transform:translateY(10px);pointer-events:none}
.debug-media{position:relative;aspect-ratio:4/3;background:#1b1d16}
.debug-media video,.debug-media canvas{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.debug-media video{transform:scaleX(-1)}
.pct{
  position:absolute;
  left:8px;bottom:8px;
  font-size:10px;
  letter-spacing:.06em;
  color:#F3F1E4;
  background:rgba(0,0,0,.42);
  padding:3px 7px;
  border-radius:99px;
  font-variant-numeric:tabular-nums;
}

/* ---------- toast ---------- */
.toast{
  position:fixed;
  left:50%;
  bottom:calc(clamp(18px,3.2vh,34px) + 126px);
  transform:translate(-50%,10px);
  background:rgba(40,44,30,.9);
  color:#F6F4E6;
  font-size:11px;
  letter-spacing:.06em;
  padding:9px 16px;
  border-radius:99px;
  opacity:0;
  pointer-events:none;
  transition:opacity .3s ease, transform .3s ease;
  z-index:40;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- 窄屏 ---------- */
@media (max-width:640px){
  .btn{padding:8px 10px;gap:5px;font-size:10.5px}
  .btn svg{width:14px;height:14px}
  .btn.icon{padding:9px 10px}
  .dock{gap:1px;padding:5px}
  .debug{width:min(170px,44vw)}
}
@media (max-width:360px){
  .btn span{display:none}
  .btn{padding:10px}
}

/* ---------- 素材加载失败提示 ---------- */
.err{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  z-index:60;
  max-width:min(520px,84vw);
  padding:16px 22px;
  border-radius:14px;
  background:rgba(255,255,255,.94);
  border:1px solid rgba(24,26,22,.1);
  box-shadow:0 16px 44px -18px rgba(30,32,28,.35);
  font-size:12.5px;
  line-height:1.7;
  letter-spacing:.02em;
  color:#3A3E35;
  text-align:center;
}
.err b{display:block;margin-bottom:4px;font-weight:500;color:#2E312B}
.err code{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;background:rgba(24,26,22,.06);
  padding:1px 5px;border-radius:4px;
}