*{box-sizing:border-box}:root{font-family:PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;color:#111;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;background:#efefef}#app{width:100%;min-height:100vh}.face-page{max-width:828px;margin:0 auto;min-height:100vh;background:#efefef}.top-nav{height:74px;padding:0 22px;display:flex;align-items:center;justify-content:center}.page-title{margin:0;text-align:center;font-size:48px;font-weight:600;letter-spacing:2px}.hero{background:#5796de;color:#fff;padding:70px 0 0;text-align:center}.hero h2{margin:0;font-size:76px;font-weight:300}.hero p{margin:42px auto 54px;font-size:52px;font-weight:300;white-space:nowrap}.phone{margin:0 auto;width:430px;background:#f7f7f8;border-top-left-radius:54px;border-top-right-radius:54px;padding:18px 14px 0}.phone-head{height:40px;display:flex;justify-content:center;align-items:center;gap:14px}.cam{width:16px;height:16px;background:#262626;border-radius:50%}.receiver{width:76px;height:10px;border-radius:6px;background:#262626}.phone-screen{height:375px;background:#cbd6e8;padding:44px 52px}.scan-area{height:100%;border-radius:12px;background:linear-gradient(90deg,rgba(255,255,255,.5) 1px,transparent 1px) 0 0 / 14px 14px,linear-gradient(rgba(255,255,255,.5) 1px,transparent 1px) 0 0 / 14px 14px,linear-gradient(180deg,#edf2ff,#dee5f8);position:relative;overflow:hidden}.scan-line{position:absolute;top:0;bottom:0;left:50%;width:8px;background:linear-gradient(180deg,#1fe8f0bf,#7c3cd1bf);animation:scan 2.2s linear infinite}.avatar{position:absolute;left:50%;top:54%;width:200px;height:194px;transform:translate(-50%,-50%);border-radius:90px 90px 46px 46px;background:linear-gradient(180deg,#667cdc73,#6a9ae573)}.avatar:before{content:"";position:absolute;left:50%;top:18%;width:88px;height:88px;transform:translate(-50%);border-radius:50%;border:6px solid rgba(110,130,220,.5);background:#d2dcff73}.avatar:after{content:"";position:absolute;left:50%;top:102px;width:122px;height:72px;transform:translate(-50%);border-radius:0 0 58px 58px;border:6px solid rgba(110,130,220,.5);border-top:0}.corner{position:absolute;width:52px;height:52px;border-color:#60b2f2;border-style:solid;border-width:0}.top-left{left:20px;top:20px;border-left-width:8px;border-top-width:8px}.top-right{right:20px;top:20px;border-right-width:8px;border-top-width:8px}.bottom-left{left:20px;bottom:20px;border-left-width:8px;border-bottom-width:8px}.bottom-right{right:20px;bottom:20px;border-right-width:8px;border-bottom-width:8px}.instruction{padding:40px 36px 70px}.instruction ul{margin:0;padding:0 0 0 6px;list-style:none}.instruction li{display:flex;align-items:center;gap:22px;margin-bottom:24px;font-size:28px;color:#292929;line-height:1.45}.instruction li span{width:36px;height:36px;border-radius:50%;background:#d9e9f8;color:#2d7edc;font-size:22px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.start-btn{display:block;width:calc(100% - 130px);margin:44px auto 0;height:64px;border:0;border-radius:10px;font-size:24px;color:#fff;background:linear-gradient(180deg,#4a94e4,#2f79d5)}.capture-page{max-width:828px;margin:0 auto;min-height:100vh;padding:14px 20px 40px;background:radial-gradient(circle at top,rgba(108,173,249,.26),transparent 52%),linear-gradient(180deg,#f4f8ff,#edf2fa)}.capture-nav{display:grid;grid-template-columns:90px 1fr 90px;align-items:center;height:52px}.capture-nav h1{margin:0;text-align:center;font-size:22px;font-weight:600;color:#1e2a3a}.back-btn{width:72px;height:36px;border-radius:999px;border:1px solid #d3deed;background:#fff;color:#406182}.placeholder{width:1px;height:1px}.camera-panel{margin-top:30px;text-align:center}.camera-circle{width:min(72vw,340px);height:min(72vw,340px);margin:0 auto;border-radius:50%;overflow:hidden;border:8px solid #7ab0eb;box-shadow:0 12px 26px #3d7ed040;background:#d8e2ef}.camera-circle video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.hint{margin:16px 0 0;font-size:16px;color:#4f6177}.motion-panel{margin-top:34px;text-align:center}.motion-panel h2{margin:0;font-size:18px;color:#2c3e55;font-weight:500}.motion-tag{width:fit-content;margin:16px auto 0;padding:12px 18px;border-radius:12px;background:linear-gradient(180deg,#4f9bea,#2f79d5);color:#fff;font-size:24px;font-weight:600;letter-spacing:1px}.action-panel{margin-top:40px}.record-btn{width:min(560px,100%);height:52px;display:block;margin:0 auto;border:0;border-radius:10px;background:linear-gradient(180deg,#4a94e4,#2f79d5);color:#fff;font-size:20px}.record-btn[disabled]{opacity:.68}.error-text{width:min(560px,100%);margin:14px auto 0;color:#c61f1f;font-size:14px;line-height:1.45}.result-text{width:min(560px,100%);margin:14px auto 0;color:#2f5d92;font-size:13px;line-height:1.5;word-break:break-all}.error-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#f8fbff,#eef3fa)}.error-card{width:min(560px,100%);background:#fff;border-radius:16px;padding:30px 24px;box-shadow:0 10px 30px #264a741f;text-align:center}.error-card h1{margin:0;font-size:24px;color:#1d2f47}.error-card p{margin:14px 0 0;font-size:16px;color:#44576e}.error-tip{margin:12px 0 0;font-size:14px;color:#70839a}.success-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(180deg,#eef8f0,#e6f5eb)}.success-card{width:min(560px,100%);background:#fff;border-radius:16px;padding:30px 24px;box-shadow:0 10px 30px #2e78491f;text-align:center}.success-card h1{margin:0;color:#1f6e3d;font-size:24px}.success-card p{margin:14px 0 0;color:#355b45;font-size:16px}@keyframes scan{0%{transform:translate(-90px)}50%{transform:translate(0)}to{transform:translate(90px)}}@media(max-width:828px){.top-nav{height:58px;padding:0 14px}.page-title{font-size:20px;letter-spacing:1px}.hero{padding-top:42px}.hero h2{font-size:clamp(28px,11vw,56px)}.hero p{margin:24px 0 34px;font-size:clamp(16px,5.6vw,32px)}.phone{width:min(78vw,430px);border-top-left-radius:26px;border-top-right-radius:26px;padding:8px 8px 0}.phone-head{height:24px;gap:8px}.cam{width:9px;height:9px}.receiver{width:44px;height:6px}.phone-screen{height:min(52vw,375px);padding:24px 28px}.scan-line{width:4px}.avatar{width:126px;height:130px}.avatar:before{width:58px;height:58px;border-width:4px}.avatar:after{top:68px;width:80px;height:50px;border-width:4px}.corner{width:30px;height:30px}.top-left,.top-right,.bottom-left,.bottom-right{border-width:0}.top-left{top:14px;left:14px;border-top-width:5px;border-left-width:5px}.top-right{top:14px;right:14px;border-top-width:5px;border-right-width:5px}.bottom-left{left:14px;bottom:14px;border-left-width:5px;border-bottom-width:5px}.bottom-right{right:14px;bottom:14px;border-right-width:5px;border-bottom-width:5px}.instruction{padding:30px 20px 56px}.instruction li{gap:14px;margin-bottom:14px;font-size:clamp(16px,4.2vw,24px)}.instruction li span{width:28px;height:28px;font-size:18px}.start-btn{width:calc(100% - 40px);height:52px;margin-top:24px;font-size:22px}.capture-page{padding:10px 14px 24px}.capture-nav{grid-template-columns:70px 1fr 70px}.capture-nav h1{font-size:20px}.back-btn{width:64px;height:32px;font-size:14px}.camera-panel{margin-top:18px}.hint{font-size:14px}.motion-panel{margin-top:24px}.motion-tag{font-size:22px}.action-panel{margin-top:28px}.record-btn{height:48px;font-size:19px}.error-card{padding:24px 16px}.error-card h1{font-size:22px}.success-card{padding:24px 16px}.success-card h1{font-size:22px}}