:root{color:#173b2d;background:#f6f0df;font-family:Noto Sans SC,Microsoft YaHei,system-ui,sans-serif;font-synthesis:none;--forest: #174f38;--leaf: #2f7550;--lime: #d7ed82;--cream: #fffaf0;--orange: #ff8a4c;--ink: #173b2d}*{box-sizing:border-box}html{min-height:100%;background:#f6f0df}body{min-height:100vh;margin:0;overflow-x:hidden;background:radial-gradient(circle at 12% 8%,rgba(215,237,130,.72),transparent 30rem),radial-gradient(circle at 100% 100%,rgba(255,138,76,.18),transparent 25rem),#f6f0df}button,input{font:inherit}button{cursor:pointer}.leaf{position:fixed;z-index:0;width:18rem;height:7rem;border-radius:100% 0;background:var(--forest);opacity:.08;pointer-events:none}.leaf-a{top:-3rem;right:-6rem;transform:rotate(25deg)}.leaf-b{bottom:-4rem;left:-8rem;transform:rotate(205deg)}.shell{position:relative;z-index:1;width:min(100%,42rem);min-height:100vh;margin:0 auto;padding:max(1.25rem,env(safe-area-inset-top)) 1rem max(1.5rem,env(safe-area-inset-bottom))}.brand{display:flex;align-items:center;gap:.8rem;margin-bottom:1.4rem}.brand-mark{display:grid;place-items:center;width:3.2rem;aspect-ratio:1;border-radius:50% 48% 44% 50%;color:var(--cream);background:var(--forest);font-size:1.45rem;font-weight:800;transform:rotate(-5deg);box-shadow:inset -.25rem -.25rem #00000014}.brand h1{margin:0;font-size:1.1rem;letter-spacing:-.03em}.eyebrow{margin:0 0 .12rem;color:var(--leaf);font-size:.62rem;font-weight:750;letter-spacing:.18em}.status-pill{display:flex;align-items:center;gap:.42rem;margin-left:auto;padding:.54rem .75rem;border:1px solid rgba(23,79,56,.13);border-radius:999px;background:#fffaf09e;font-size:.75rem;font-weight:700}.status-pill span{width:.52rem;height:.52rem;border-radius:50%;background:#a49d8e}.status-pill[data-state=online] span{background:#42a669;box-shadow:0 0 0 .24rem #42a66924}.status-pill[data-state=connecting] span{background:#efaa44;animation:pulse 1.3s infinite}.panel{position:relative;overflow:hidden;padding:clamp(1.25rem,5vw,2.1rem);border:1px solid rgba(23,79,56,.1);border-radius:2rem .8rem;background:#fffaf0e6;box-shadow:0 1.1rem 3rem #2149361a;backdrop-filter:blur(10px)}.hero-panel:after{content:"";position:absolute;right:-5rem;bottom:-7rem;width:16rem;aspect-ratio:1;border:2.5rem solid rgba(215,237,130,.35);border-radius:50%;pointer-events:none}.step-number{display:grid;place-items:center;width:2.25rem;aspect-ratio:1;margin-bottom:2.8rem;border:1px solid rgba(23,79,56,.25);border-radius:50%;color:var(--leaf);font-size:.72rem;font-weight:800}.kicker{margin:0 0 .6rem;color:var(--leaf);font-size:.73rem;font-weight:800;letter-spacing:.12em}h2{margin:0;color:var(--ink);font-size:clamp(2rem,9vw,3.2rem);line-height:1.08;letter-spacing:-.065em}h2 em{color:var(--orange);font-style:normal}.lede{max-width:28rem;margin:1.1rem 0 1.5rem;color:#557064;font-size:.92rem;line-height:1.7}.join-form{position:relative;z-index:1;display:grid;gap:.72rem}.join-form label{color:#557064;font-size:.72rem;font-weight:800}.join-form input{width:100%;padding:.95rem 1rem;border:1px solid rgba(23,79,56,.2);border-radius:.9rem;outline:none;color:var(--forest);background:#fffc;font-size:1.55rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase}.join-form input:focus{border-color:var(--leaf);box-shadow:0 0 0 .25rem #2f75501f}.primary-button{display:flex;align-items:center;justify-content:space-between;width:100%;min-height:3.55rem;padding:.85rem 1.05rem;border:0;border-radius:1rem .35rem;color:var(--cream);background:var(--forest);font-weight:750;box-shadow:0 .55rem 1.1rem #174f3829}.primary-button:active{transform:translateY(1px)}.primary-button:disabled{cursor:wait;opacity:.62}.primary-button span{font-size:1.35rem}.error-text{min-height:1.2rem;margin:0;color:#ae402d;font-size:.78rem;line-height:1.45}.privacy-card{display:flex;gap:.85rem;margin:1.5rem 0;padding:1rem;border-radius:1.2rem;background:#eaf2d8}.privacy-icon{flex:0 0 auto;color:var(--leaf);font-size:1.5rem}.privacy-card strong{display:block;margin-bottom:.28rem;font-size:.95rem}.privacy-card p{margin:0;color:#557064;font-size:.78rem;line-height:1.55}.safety-list{display:grid;gap:.8rem;margin:0 0 1.4rem;padding:0;list-style:none}.safety-list li{display:flex;align-items:center;gap:.75rem;color:#49675a;font-size:.84rem}.safety-list span{display:grid;flex:0 0 auto;place-items:center;width:1.55rem;aspect-ratio:1;border-radius:50%;color:var(--forest);background:var(--lime);font-size:.7rem;font-weight:800}.calibration-heading,.control-topline{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem}.calibration-heading h2,.control-topline h2{font-size:clamp(1.6rem,7.5vw,2.5rem)}.progress-ring{--progress: 0;display:grid;flex:0 0 auto;place-items:center;width:4.15rem;aspect-ratio:1;border-radius:50%;background:conic-gradient(var(--orange) calc(var(--progress) * 1%),#e4e4d7 0)}.progress-ring:before{content:"";grid-area:1/1;width:3.25rem;aspect-ratio:1;border-radius:50%;background:var(--cream)}.progress-ring span{z-index:1;grid-area:1/1;font-size:.72rem;font-weight:800}.camera-stage{position:relative;overflow:hidden;width:100%;aspect-ratio:16/9;margin:1.25rem 0 1rem;border-radius:1.45rem .5rem;background:#153d31}.camera-stage canvas{display:block;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.camera-stage:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 3rem #00000047;pointer-events:none}.sample-target{position:absolute;top:50%;left:50%;width:25%;aspect-ratio:1;transform:translate(-50%,-50%);border:.22rem solid var(--lime);border-radius:50%;box-shadow:0 0 0 .5rem #d7ed8224,inset 0 0 0 .2rem #00000024}.sample-target span{position:absolute;inset:36%;border-radius:50%;background:#d7ed828c;animation:pulse 1.4s infinite}.tracking-dot{position:absolute;z-index:3;width:2rem;aspect-ratio:1;border:.18rem solid white;border-radius:50%;background:var(--orange);box-shadow:0 .2rem .7rem #00000047;pointer-events:none}.camera-badge{position:absolute;right:.65rem;bottom:.55rem;z-index:2;margin:0;padding:.4rem .55rem;border-radius:999px;color:#fff;background:#0e3125bf;font-size:.62rem;font-weight:700}.instruction{min-height:2.8rem;margin:0 0 .8rem;color:#557064;font-size:.85rem;line-height:1.6}.control-panel{text-align:left}.score-badge{display:grid;min-width:4rem;padding:.65rem;border-radius:1rem .3rem;color:var(--forest);background:var(--lime);text-align:center}.score-badge span{font-size:1.4rem;font-weight:800;line-height:1}.score-badge small{margin-top:.2rem;font-size:.58rem;font-weight:800;letter-spacing:.08em}.control-orb{display:grid;place-items:center;width:min(68vw,18rem);aspect-ratio:1;margin:1.5rem auto;border-radius:48% 52% 46% 54%;background:radial-gradient(circle,#e8f4ba 0 44%,rgba(215,237,130,.42) 45% 61%,transparent 62%);animation:float 4s ease-in-out infinite}.orb-core{display:flex;flex-direction:column;align-items:center;text-align:center}.orb-core>span{display:grid;place-items:center;width:3rem;aspect-ratio:1;margin-bottom:.75rem;border-radius:50%;color:#fff;background:var(--leaf);font-size:1.2rem}.orb-core strong{font-size:1rem}.orb-core small{margin-top:.35rem;color:#5d786c}.control-orb[data-state=lost]{filter:saturate(.35)}.control-orb[data-state=lost] .orb-core>span{background:#9b675a}.control-orb[data-state=playing] .orb-core>span{background:var(--orange)}.secondary-actions{display:grid;grid-template-columns:1fr 1fr;gap:.65rem;margin-top:.7rem}.secondary-actions button{min-height:2.8rem;border:1px solid rgba(23,79,56,.16);border-radius:.8rem;color:var(--forest);background:transparent;font-weight:700}.diagnostics{margin-top:1rem;border-top:1px solid rgba(23,79,56,.1);color:#60786d;font-size:.75rem}.diagnostics summary{padding:.8rem 0 .2rem;cursor:pointer}.diagnostics dl{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}.diagnostics dl div{padding:.65rem;border-radius:.7rem;background:#f0efdcbf}.diagnostics dt{font-size:.62rem}.diagnostics dd{margin:.22rem 0 0;color:var(--forest);font-weight:800}.sim-pad{position:relative;height:15rem;margin:1rem 0;border:2px dashed rgba(23,79,56,.3);border-radius:1rem;touch-action:none}.sim-pad span{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);color:#729084;font-size:.75rem}footer{display:flex;justify-content:center;gap:.4rem;padding:1.25rem .5rem 0;color:#74887f;font-size:.65rem}.hidden{display:none!important}@keyframes pulse{50%{opacity:.48;transform:scale(.82)}}@keyframes float{50%{transform:translateY(-.35rem) rotate(1deg)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}@media(min-width:48rem){.shell{padding-top:2.5rem}.panel{padding:2.3rem}}