:root { color-scheme: dark; font-family: "Microsoft YaHei", system-ui, sans-serif; background:#030617; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; overflow:hidden; background:radial-gradient(circle at 50% 28%,#111d50 0,#070b25 38%,#02030c 100%); color:#f7f2ff; }
#app,#three-stage,.screen,.nebula { position:fixed; inset:0; }
#three-stage canvas { display:block; width:100%; height:100%; }
.nebula { pointer-events:none; opacity:.5; background:radial-gradient(ellipse at 18% 62%,rgba(111,83,194,.14),transparent 42%),radial-gradient(ellipse at 75% 20%,rgba(76,144,255,.12),transparent 38%); mix-blend-mode:screen; }
.blackout { pointer-events:none; z-index:2; background:#01020a; opacity:0; transition:opacity .13s ease; }
.blackout.visible { opacity:.93; }
.screen { display:flex; align-items:center; justify-content:center; flex-direction:column; text-align:center; z-index:2; }
button { font:inherit; color:inherit; cursor:pointer; }
.hands-debug { display:none; position:fixed; z-index:5; left:16px; bottom:16px; width:min(330px,calc(100vw - 32px)); padding:13px 15px; border:1px solid rgba(154,191,255,.32); border-radius:12px; background:rgba(4,9,31,.78); backdrop-filter:blur(14px); color:#dce7ff; font-size:12px; line-height:1.7; white-space:pre-line; }
.hands-debug.visible { display:block; }
#camera-preview { display:none; }