:root{--bg:#030713;--panel:rgba(6,17,34,.88);--line:rgba(53,203,255,.34);--cyan:#42ddff;--blue:#1677ff;--purple:#9c58ff;--yellow:#ffd84a;--green:#3ff0a2;--red:#ff546a;--text:#f4fbff;--muted:#88a7bb}*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at 50% -20%,#123761 0,#071325 37%,#030713 78%);color:var(--text)}body{min-height:100vh;overflow-x:hidden}#particles{position:fixed;inset:0;pointer-events:none;background-image:radial-gradient(circle at 10% 20%,rgba(66,221,255,.18) 0 1px,transparent 1px),radial-gradient(circle at 80% 30%,rgba(156,88,255,.16) 0 1px,transparent 1px),radial-gradient(circle at 40% 80%,rgba(255,216,74,.12) 0 1px,transparent 1px);background-size:70px 70px,110px 110px,90px 90px;animation:drift 20s linear infinite}@keyframes drift{to{transform:translateY(30px)}}.app{max-width:1500px;margin:auto;padding:18px}.panel{background:linear-gradient(180deg,rgba(10,28,53,.9),rgba(3,11,24,.92));border:1px solid var(--line);border-radius:18px;box-shadow:0 0 30px rgba(0,153,255,.08),inset 0 0 30px rgba(19,105,175,.04);overflow:hidden}.topbar{display:grid;grid-template-columns:1fr auto auto;gap:22px;align-items:center;margin-bottom:14px}.brand{display:flex;gap:12px;align-items:center}.brand-orb{width:54px;height:54px;display:grid;place-items:center;border-radius:16px;font-size:27px;background:radial-gradient(circle,#143f6a,#06111f);border:1px solid var(--cyan);box-shadow:0 0 26px rgba(66,221,255,.32)}.brand h1{margin:0;font-size:24px;letter-spacing:.05em;font-style:italic}.brand h1 span{color:#ba75ff}.brand p{margin:3px 0 0;color:var(--cyan);font-size:12px}.levelbox{display:grid;grid-template-columns:auto 190px;gap:12px;align-items:center}.levelbox b{display:block;color:var(--yellow);font-size:12px}.levelbox small{display:block;color:var(--muted);margin-top:2px}.xp,.energy>div,.mission-progress{height:9px;border:1px solid var(--line);background:#07101e;border-radius:99px;overflow:hidden}.xp i,.energy i,.mission-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--cyan),var(--yellow));box-shadow:0 0 15px rgba(66,221,255,.5);transition:.35s}.system-pill{display:flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:rgba(2,10,20,.8);font-size:12px}.system-pill i{width:9px;height:9px;border-radius:50%;background:#56616c}.system-pill i.on{background:var(--green);box-shadow:0 0 14px var(--green)}.hero-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(300px,.7fr);gap:14px}.right-col{display:grid;grid-template-rows:1fr auto;gap:14px}.panel-title{min-height:42px;padding:11px 14px;border-bottom:1px solid rgba(66,221,255,.18);display:flex;align-items:center;justify-content:space-between;color:#bfeeff;font-weight:800;font-size:12px;letter-spacing:.05em}.panel-title b{color:var(--green);font-size:10px}.panel-title button{background:none;color:var(--muted);border:0;cursor:pointer}.stage{position:relative;aspect-ratio:16/9;background:#01050a;overflow:hidden}.stage video,.stage canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.stage video{filter:saturate(.9) contrast(1.08) brightness(.82)}.stage canvas{z-index:3}.scan{position:absolute;z-index:4;inset:0;background:linear-gradient(to bottom,transparent 49%,rgba(66,221,255,.18) 50%,transparent 51%);background-size:100% 9px;opacity:.2;pointer-events:none}.corners{position:absolute;inset:18px;z-index:5;border:1px solid rgba(66,221,255,.13);pointer-events:none}.corners:before,.corners:after{content:"";position:absolute;width:60px;height:60px}.corners:before{left:-1px;top:-1px;border-left:3px solid var(--cyan);border-top:3px solid var(--cyan)}.corners:after{right:-1px;bottom:-1px;border-right:3px solid var(--cyan);border-bottom:3px solid var(--cyan)}.empty{position:absolute;inset:0;z-index:2;display:grid;place-items:center;text-align:center;background:radial-gradient(circle,#0b2944,#02060b 70%)}.empty.hidden{display:none}.big-hand{font-size:58px;filter:drop-shadow(0 0 16px var(--cyan))}.empty h2{margin:10px 0 5px}.empty p{margin:0;color:var(--muted)}.gesture-now{position:absolute;right:22px;top:22px;z-index:6;text-align:right;padding:10px 12px;border-radius:12px;background:rgba(0,8,18,.52);border:1px solid rgba(66,221,255,.18)}.gesture-now small,.gesture-now span{display:block;color:var(--muted);font-size:10px}.gesture-now strong{display:block;color:var(--yellow);font-size:24px;margin:3px 0;text-shadow:0 0 18px rgba(255,216,74,.4)}.camera-hud{position:absolute;left:20px;bottom:18px;z-index:6;display:flex;gap:8px;flex-wrap:wrap}.camera-hud span{padding:7px 9px;border-radius:8px;background:rgba(2,10,20,.72);border:1px solid rgba(66,221,255,.28);font-size:10px;color:#ccefff}.mascot-panel{padding-bottom:12px}.mascot-wrap{display:grid;grid-template-columns:160px 1fr;gap:8px;align-items:center;padding:18px}.mascot{height:160px;position:relative;display:grid;place-items:center;border-radius:50%;background:radial-gradient(circle,rgba(66,221,255,.32),rgba(25,84,132,.13) 48%,transparent 70%);filter:drop-shadow(0 0 18px rgba(66,221,255,.35));animation:float 2.8s ease-in-out infinite}.mascot .ears{position:absolute;top:8px;color:var(--yellow);font-size:29px;letter-spacing:24px;transform:rotate(-5deg)}.mascot .face{width:112px;height:100px;border-radius:45% 45% 50% 50%;display:grid;place-items:center;background:linear-gradient(145deg,#45e4ff,#1f79ff);border:4px solid #e8fbff;color:#03111c;font-size:30px;font-weight:900;box-shadow:inset 0 -12px 0 rgba(0,0,0,.08)}.mascot .core{position:absolute;bottom:15px;background:#06182b;border:2px solid var(--yellow);color:var(--yellow);border-radius:50%;padding:8px;font-weight:900}.mascot.power{animation:power .45s ease-in-out infinite alternate}.mascot.happy .face{box-shadow:0 0 35px rgba(255,216,74,.7),inset 0 -12px 0 rgba(0,0,0,.08)}@keyframes float{50%{transform:translateY(-8px)}}@keyframes power{to{transform:scale(1.06);filter:drop-shadow(0 0 30px var(--yellow))}}.speech{position:relative;padding:15px;background:#eaf9ff;color:#082039;border-radius:14px;font-size:13px;line-height:1.45;box-shadow:0 0 16px rgba(66,221,255,.2)}.speech:before{content:"";position:absolute;left:-12px;top:45%;border:7px solid transparent;border-right-color:#eaf9ff}.mascot-name{text-align:center}.mascot-name b{display:block;color:var(--cyan);font-size:22px}.mascot-name span{font-size:11px;color:var(--muted)}.energy{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;margin:12px 16px 0;font-size:10px}.mission-panel{padding-bottom:14px}.mission-panel h3{margin:16px 16px 6px;font-size:16px}.mission-panel p{margin:0 16px 13px;color:var(--muted);font-size:12px}.mission-progress{margin:0 16px}.reward{margin:12px 16px 0;color:var(--yellow);font-size:11px}.stats-grid{display:grid;grid-template-columns:1fr 1.1fr 1.3fr;gap:14px;margin-top:14px}.current-gesture,.telemetry,.log-panel{min-height:150px}.gesture-display{display:flex;align-items:center;gap:14px;padding:20px}.gesture-display>div:first-child{font-size:58px;filter:drop-shadow(0 0 15px rgba(255,216,74,.35))}.gesture-display h2{margin:0;color:var(--yellow)}.gesture-display p{margin:4px 0 0;color:var(--muted)}.metrics{display:grid;grid-template-columns:repeat(4,1fr);padding:20px 12px}.metrics div{text-align:center;border-right:1px solid rgba(66,221,255,.14)}.metrics div:last-child{border:0}.metrics b{display:block;font-size:22px}.metrics span{display:block;color:var(--muted);font-size:10px;margin-top:4px}.log{height:105px;overflow:auto;padding:10px 14px;font:11px/1.5 Consolas,monospace;color:#a6def5}.log .ok{color:var(--green)}.log .warn{color:var(--yellow)}
.interaction-lab{margin-top:14px}.interaction-lab .panel-title small{color:var(--yellow);font-weight:700}.lab-help{padding:10px 14px;color:#b9d7e8;font-size:11px;border-bottom:1px solid rgba(66,221,255,.12)}.playground{height:360px;position:relative;overflow:hidden;background:radial-gradient(circle at 50% 45%,rgba(30,91,150,.35),rgba(2,8,18,.96) 60%),linear-gradient(rgba(66,221,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(66,221,255,.04) 1px,transparent 1px);background-size:auto,34px 34px,34px 34px}.playground.demo-on{box-shadow:inset 0 0 55px rgba(66,221,255,.12)}.scene-dots{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:flex;gap:7px}.scene-dots i{width:7px;height:7px;border-radius:50%;background:#30465a}.scene-dots i.active{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}.float-card{position:absolute;width:150px;height:105px;border-radius:16px;border:1px solid rgba(66,221,255,.42);background:linear-gradient(145deg,rgba(13,49,83,.92),rgba(5,17,32,.96));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;user-select:none;transition:box-shadow .15s,border-color .15s,opacity .2s}.float-card span{font-size:30px}.float-card b{font-size:13px}.float-card small{font-size:9px;color:var(--muted)}.float-card.grabbed{border-color:var(--yellow);box-shadow:0 0 28px rgba(255,216,74,.38);z-index:10}.float-card.closed{opacity:.18;filter:grayscale(1)}.card-a{left:7%;top:22%}.card-b{right:8%;top:17%}.card-c{right:16%;bottom:10%}.zoom-target{position:absolute;left:50%;top:52%;width:150px;height:150px;transform:translate(-50%,-50%) scale(1);border-radius:50%;display:grid;place-items:center;align-content:center;gap:3px;background:radial-gradient(circle,#1b82ca 0,#0a2e53 42%,#05111f 70%);border:2px solid rgba(66,221,255,.6);box-shadow:0 0 35px rgba(66,221,255,.25);transition:transform .08s linear}.zoom-target .orb-core{font-size:45px;filter:drop-shadow(0 0 12px var(--yellow))}.zoom-target strong{font-size:11px}.zoom-target small{color:var(--yellow);font-weight:800}.action-toast{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);padding:8px 13px;border-radius:999px;border:1px solid rgba(66,221,255,.3);background:rgba(2,11,21,.8);color:#d9f6ff;font-size:11px;opacity:.85}.gesture-strip{margin-top:14px}.gesture-strip .panel-title small{color:var(--muted);font-weight:400}.gesture-cards{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;padding:14px}.gesture-cards button{min-height:108px;border:1px solid rgba(66,221,255,.25);background:linear-gradient(180deg,rgba(11,37,63,.65),rgba(4,15,29,.9));color:var(--text);border-radius:13px;font-size:34px;cursor:pointer;transition:.2s}.gesture-cards button:hover,.gesture-cards button.active{transform:translateY(-3px);border-color:var(--yellow);box-shadow:0 0 20px rgba(255,216,74,.18)}.gesture-cards b,.gesture-cards small{display:block}.gesture-cards b{font-size:12px;margin-top:5px}.gesture-cards small{color:var(--muted);font-size:9px;margin-top:3px}.toolbar{display:flex;gap:10px;padding:12px;margin-top:14px;align-items:center;flex-wrap:wrap}.btn,.icon-btn{border-radius:11px;border:1px solid rgba(255,255,255,.12);color:white;font-weight:800;cursor:pointer;transition:.2s}.btn{padding:12px 16px}.btn:hover,.icon-btn:hover{transform:translateY(-2px);filter:brightness(1.15)}.btn:disabled{opacity:.4;cursor:not-allowed;transform:none}.green{background:#0a9f6a}.cyan{background:#08779c}.purple{background:#6c3bd1}.orange{background:#d97706}.red{background:#b72e43}.icon-btn{width:44px;height:44px;background:#0a1b30}.cursor{position:fixed;width:28px;height:28px;border:2px solid var(--cyan);border-radius:50%;pointer-events:none;z-index:9999;display:none;transform:translate(-50%,-50%);box-shadow:0 0 22px rgba(66,221,255,.7)}.cursor:after{content:"";position:absolute;inset:6px;border-radius:50%;background:rgba(66,221,255,.45)}.cursor.pinching{width:16px;height:16px;border-color:var(--yellow);box-shadow:0 0 26px var(--yellow)}@media(max-width:1050px){.topbar{grid-template-columns:1fr auto}.levelbox{display:none}.hero-grid{grid-template-columns:1fr}.right-col{grid-template-columns:1fr 1fr;grid-template-rows:auto}.stats-grid{grid-template-columns:1fr 1fr}.log-panel{grid-column:1/-1}}@media(max-width:720px){.app{padding:10px}.topbar{grid-template-columns:1fr}.system-pill{justify-self:start}.brand h1{font-size:19px}.right-col,.stats-grid{grid-template-columns:1fr}.log-panel{grid-column:auto}.gesture-cards{grid-template-columns:repeat(2,1fr)}.stage{aspect-ratio:3/4}.mascot-wrap{grid-template-columns:130px 1fr}.mascot{height:130px}.metrics{grid-template-columns:repeat(2,1fr);gap:15px}.metrics div:nth-child(2){border:0}.toolbar .btn{flex:1 1 45%}.playground{height:430px}.float-card{width:125px;height:92px}.card-a{left:4%;top:12%}.card-b{right:4%;top:12%}.card-c{right:5%;bottom:10%}.zoom-target{width:125px;height:125px}}