:root{color:#e5edf7;font-synthesis:none;text-rendering:optimizelegibility;background:#07111f;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at 0 0,#2dd4bf33,#0000 34rem),radial-gradient(circle at 85% 15%,#3b82f642,#0000 28rem),#07111f;min-width:320px;min-height:100vh;margin:0}#effectLayer{z-index:20;pointer-events:none;position:fixed;inset:0;overflow:hidden}.gesture-effect-canvas{width:100%;height:100%;position:absolute;inset:0}.gesture-effect-label{z-index:2;color:#ecfeff;letter-spacing:.02em;text-shadow:0 1px 10px #0000005c;backdrop-filter:blur(14px);background:linear-gradient(135deg,#0ea5e9cc,#a855f7c7),#0f172a8c;border:1px solid #ffffff57;border-radius:999px;padding:10px 16px;font-size:.92rem;font-weight:900;animation:1.35s forwards gesture-label-pop;position:absolute;transform:translate(-50%,-50%)scale(.72);box-shadow:0 0 34px #67e8f97a,0 14px 44px #00000047}.gesture-effect-label--10{color:#451a03;background:linear-gradient(135deg,#fef08af5,#fb7185e6),#ffffffad;box-shadow:0 0 54px #facc15b3,0 0 96px #fb718585}@keyframes gesture-label-pop{0%{opacity:0;transform:translate(-50%,-50%)scale(.72)}18%{opacity:1;transform:translate(-50%,-140%)scale(1.05)}70%{opacity:1;transform:translate(-50%,-175%)scale(1)}to{opacity:0;transform:translate(-50%,-230%)scale(.9)}}button{font:inherit}.app{width:min(1180px,100% - 32px);margin:0 auto;padding:40px 0}.hero{grid-template-columns:1fr auto;align-items:end;gap:24px;margin-bottom:28px;display:grid}.eyebrow{color:#67e8f9;letter-spacing:.08em;text-transform:uppercase;margin:0 0 10px;font-size:.86rem;font-weight:700}h1,h2,h3,p{margin-top:0}h1{letter-spacing:-.06em;max-width:760px;margin-bottom:12px;font-size:clamp(2rem,5vw,4.5rem);line-height:.95}.subtitle{color:#aab7c7;max-width:690px;margin-bottom:0;font-size:1.06rem;line-height:1.7}.hero-card,.camera-panel,.result-panel,.face-card,.hand-card,.side-card,.summary-card,.tips{backdrop-filter:blur(18px);background:#0f172ab8;border:1px solid #94a3b82e;box-shadow:0 24px 80px #00000047}.hero-card{border-radius:22px;min-width:168px;padding:18px}.hero-card span,.label,.hand-card__label{color:#94a3b8;margin-bottom:6px;font-size:.82rem;display:block}.hero-card strong{color:#86efac;font-size:1.32rem}.workspace{grid-template-columns:minmax(0,1fr) 340px;gap:22px;display:grid}.camera-panel,.result-panel{border-radius:30px;overflow:hidden}.video-wrap{background:linear-gradient(135deg,#0f172af5,#1e293bb8);min-height:460px;position:relative;overflow:hidden}#webcam,#overlay{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}#webcam{opacity:.94}#overlay{z-index:2}.face-overlay{z-index:4;filter:drop-shadow(0 0 18px #ffffff9e)drop-shadow(0 12px 24px #00000052);pointer-events:none;border-radius:999px;place-items:center;width:1em;height:1em;animation:1.8s ease-in-out infinite face-emoji-breathe;display:grid;position:absolute;transform:translate(-50%,-50%)}@keyframes face-emoji-breathe{0%,to{transform:translate(-50%,-50%)scale(1)}50%{transform:translate(-50%,-54%)scale(1.08)}}.empty-hint{z-index:3;color:#cbd5e1;text-align:center;background:#02061794;border:1px dashed #94a3b859;border-radius:22px;width:min(82%,360px);padding:22px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.controls{justify-content:space-between;align-items:center;gap:16px;padding:18px;display:flex}#toggleCamera{color:#042f2e;cursor:pointer;background:linear-gradient(135deg,#5eead4,#86efac);border:0;border-radius:999px;min-width:140px;padding:13px 22px;font-weight:800;transition:transform .18s,filter .18s}#toggleCamera:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-1px)}#toggleCamera:disabled{cursor:not-allowed;filter:grayscale();opacity:.55}.status-line{color:#94a3b8;flex-wrap:wrap;justify-content:flex-end;gap:8px 14px;font-size:.92rem;display:flex}.result-panel{flex-direction:column;gap:16px;padding:18px;display:flex}.summary-card{background:linear-gradient(135deg,#22c55e2e,#3b82f61f),#0f172ad6;border-radius:24px;padding:22px}.summary-card strong{color:#fff;font-size:4.8rem;line-height:.95;display:block}.summary-card small{color:#86efac;font-size:1rem;font-weight:700}.face-card{border-radius:24px;padding:18px}.face-card__body{align-items:center;gap:14px;display:flex}.face-card__body strong{background:radial-gradient(circle at 35% 28%,#ffffff8c,#0000 28px),linear-gradient(135deg,#facc15e6,#fb7185d1);border-radius:22px;flex:none;place-items:center;width:68px;height:68px;font-size:2.45rem;display:grid;box-shadow:0 14px 34px #fb71853d}.face-card__body b{color:#e0f2fe;margin-bottom:5px;font-size:1.2rem;display:block}.face-card__body small{color:#94a3b8}.side-results{grid-template-columns:repeat(2,1fr);gap:12px;display:grid}.side-card{border-radius:20px;padding:16px}.side-card span{color:#94a3b8;margin-bottom:8px;font-size:.82rem;display:block}.side-card strong{color:#e0f2fe;margin-bottom:6px;font-size:1.1rem;display:block}.side-card small{color:#94a3b8;line-height:1.5}.hand-results{gap:14px;display:grid}.placeholder{color:#94a3b8;border:1px dashed #94a3b847;border-radius:20px;padding:20px;line-height:1.65}.hand-card{border-radius:22px;padding:18px}.hand-card__head{justify-content:space-between;align-items:center;gap:14px;margin-bottom:14px;display:flex}.hand-card h3{margin-bottom:0;font-size:1.24rem}.hand-card__head strong{color:#67e8f9;font-size:2.4rem;line-height:1}.metric-grid{grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px;display:grid}.metric-grid span{background:#02061747;border:1px solid #94a3b829;border-radius:14px;padding:10px}.metric-grid small{margin-bottom:4px;display:block}.metric-grid b{color:#e0f2fe;font-size:1.15rem}.state-row{flex-wrap:wrap;gap:8px;margin-bottom:14px;display:flex}.state-pill,.gesture-pill{border-radius:999px;padding:7px 12px;font-size:.86rem;font-weight:800;display:inline-flex}.state-pill{color:#022c22;background:#86efac}.gesture-pill{color:#082f49;background:#7dd3fc}.finger-list{grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px;display:grid}.finger-list span{color:#94a3b8;background:#02061761;border:1px solid #94a3b838;border-radius:12px;place-items:center;min-height:38px;font-weight:800;display:grid}.finger-list span.active{color:#042f2e;background:linear-gradient(135deg,#67e8f9,#86efac);border-color:#5eead4b3}.hand-card small{color:#94a3b8}.tips{border-radius:22px;margin-top:auto;padding:18px}.tips h2{margin-bottom:10px;font-size:1rem}.tips ul{color:#aab7c7;gap:8px;margin:0;padding-left:20px;line-height:1.55;display:grid}@media (width<=920px){.hero,.workspace{grid-template-columns:1fr}.hero-card{width:100%}.video-wrap{min-height:56vw}}@media (width<=620px){.app{width:min(100% - 20px,1180px);padding:24px 0}.controls{flex-direction:column;align-items:stretch}.status-line{justify-content:space-between}.summary-card strong{font-size:4rem}}