@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;600&display=swap');
:root{--bg:#050510;--cyan:#66d9ff;--blue:#238dff;--violet:#b06aff;--mint:#44ffaa;--text:#e9f7ff;--muted:#8196b6;--line:rgba(102,204,255,.2)}
*{box-sizing:border-box}
html{min-height:100%;background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--text);font-family:"Noto Sans SC",system-ui,sans-serif;background:radial-gradient(ellipse at 50% 34%,#0a1c3a 0%,#050916 38%,#03040c 78%);overflow-x:hidden}
#universe{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.vignette{position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 35%,rgba(1,3,12,.72) 100%)}
.topbar,main{position:relative;z-index:1}
.topbar{max-width:1440px;margin:auto;padding:30px clamp(20px,4vw,64px) 12px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.eyebrow{font-size:10px;letter-spacing:.42em;color:#7bcfff;margin:0 0 8px}
h1{font-weight:300;letter-spacing:.18em;font-size:clamp(27px,3vw,42px);margin:0;text-shadow:0 0 25px #51caff35}
h1 span{color:var(--violet);padding:0 .08em}
.subtitle{font-size:12px;letter-spacing:.12em;color:#8fa5c4;margin:9px 0 0}
.top-status{display:flex;align-items:center;gap:9px;color:#9cb4d4;font-size:11px;white-space:nowrap}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#56677e;box-shadow:0 0 0 3px #56677e22}
.status-dot.active{background:var(--mint);box-shadow:0 0 12px var(--mint)}
.status-dot.muted{background:#7d6ac2}
.status-divider{color:#344b6d;margin:0 2px}
main{max-width:1440px;margin:auto;padding:0 clamp(14px,2vw,28px) 24px}
.stage{height:clamp(390px,49vw,600px);max-height:600px;min-height:390px;position:relative;overflow:hidden;border-top:1px solid rgba(105,197,255,.13);border-bottom:1px solid rgba(105,197,255,.15);background:radial-gradient(ellipse at 50% 48%,rgba(18,72,132,.22),transparent 52%),linear-gradient(90deg,rgba(2,8,20,.25),transparent 50%,rgba(13,4,27,.3))}
.stage:before{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(3,5,15,.68),transparent 25%,transparent 78%,rgba(3,5,15,.25));pointer-events:none}
.stage-label{position:absolute;left:22px;top:22px;font-size:9px;letter-spacing:.28em;color:#6f9dbd;display:flex;align-items:center;gap:10px}
.tiny-line{height:1px;width:24px;background:var(--cyan);box-shadow:0 0 8px var(--cyan)}
.orb-wrap{position:absolute;left:50%;top:47%;width:min(52vw,540px);height:min(52vw,540px);min-width:320px;min-height:320px;transform:translate(-50%,-50%);display:grid;place-items:center;--pulse:1;--energy:.15;--hue:0;filter:hue-rotate(calc(var(--hue)*1deg))}
.orb{position:absolute;width:42%;height:42%;border-radius:50%;display:grid;place-items:center;transform:scale(var(--pulse));transition:transform .12s linear; background:radial-gradient(circle at 34% 31%,rgba(255,255,255,.95) 0 1%,rgba(151,255,248,.92) 7%,rgba(44,212,255,.72) 23%,rgba(102,91,255,.58) 53%,rgba(218,92,255,.35) 70%,transparent 75%);box-shadow:0 0 26px #62dcffb5,0 0 75px #35baff70,0 0 140px #9b65ff40,inset 0 0 35px #e4ffff9c}
.orb:before{content:"";position:absolute;inset:4%;border-radius:50%;border:1px solid #b6f7ffb0;box-shadow:0 0 24px #69dfff8c,inset 0 0 26px #e3ffff50}
.orb-core{width:24%;height:24%;border-radius:50%;background:radial-gradient(circle,#fff 0,#a8fff1 15%,#58e8ff 40%,#6a72ff 72%,transparent 100%);box-shadow:0 0 25px #a8fff1,0 0 65px #45cfff}
.orb-glint{position:absolute;inset:-12%;border-radius:50%;border:1px solid #8ce9ff7c;transform:rotate(-25deg) scaleX(.8)}
.orbit{position:absolute;border:1px solid rgba(92,200,255,.48);border-radius:50%;box-shadow:0 0 18px #3dbaff21,inset 0 0 15px #3dbaff0b}
.orbit-one{inset:13%;animation:spin 24s linear infinite}
.orbit-two{inset:5%;border-color:#9a79ff5c;transform:rotate(54deg) scaleX(.83);animation:spin 32s linear infinite reverse}
.orbit-three{inset:-3%;border-style:dotted;border-color:#8ddfff4d;animation:spin 55s linear infinite}
.orb-halo{position:absolute;inset:20%;border-radius:50%;background:radial-gradient(circle,rgba(58,224,255,.2),rgba(151,89,255,.08) 55%,transparent 70%);filter:blur(14px)}
.ripple{position:absolute;width:44%;height:44%;border:1px solid #8beaff75;border-radius:50%;opacity:0;pointer-events:none}
.ripple-a{animation:ripple 3.4s ease-out infinite}
.ripple-b{animation:ripple 3.4s ease-out 1.7s infinite}
.orb-caption{position:absolute;top:83%;font-size:10px;letter-spacing:.26em;color:#9ab8db;text-align:center;white-space:nowrap;text-shadow:0 0 12px #45cfff}
.stage-prompt{position:absolute;bottom:51px;left:50%;transform:translateX(-50%);font-size:clamp(13px,1.5vw,17px);letter-spacing:.13em;color:#d8f7ff;text-align:center;width:90%;text-shadow:0 0 16px #43caff60}
.stage-hint{position:absolute;bottom:27px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.16em;color:#6989ad;text-align:center;width:95%}
.energy-meter,.sound-meter{position:absolute;bottom:27px;width:150px}
.energy-meter{left:22px}.sound-meter{right:22px}
.meter-head{display:flex;justify-content:space-between;gap:8px;font-size:8px;letter-spacing:.16em;color:#7999bb;margin-bottom:9px}
.meter-head strong{color:#bcefff;font-weight:400;letter-spacing:.05em}
.meter-track{height:3px;background:#19304b;border-radius:5px;overflow:hidden}
.meter-fill{height:100%;width:8%;background:linear-gradient(90deg,var(--cyan),var(--violet));box-shadow:0 0 12px var(--cyan);transition:width .15s}
.sound-bars{display:flex;gap:3px;align-items:center;height:6px}
.sound-bars span{display:block;flex:1;height:3px;border-radius:3px;background:#244665;transition:height .08s,background .08s}
.control-row{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 28px}
.control-card{display:flex;align-items:center;gap:13px;min-width:0;padding:15px 17px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(8,25,47,.74),rgba(6,8,22,.55));border-radius:8px}
.card-icon{font-size:24px;color:var(--cyan);text-shadow:0 0 15px #40cfff88;width:28px;text-align:center}
.control-card h2{font-size:12px;font-weight:400;letter-spacing:.12em;margin:0 0 5px}
.control-card p{font-size:10px;color:#8198b8;margin:0;line-height:1.6}
.card-state{margin-left:auto;font-size:8px;letter-spacing:.1em;color:#6483a6;border:1px solid #27415f;border-radius:3px;padding:5px 6px;white-space:nowrap}
.card-state.live{color:var(--mint);border-color:#44ffaa55}
.bottom-grid{display:grid;grid-template-columns:1fr 1.02fr;gap:clamp(20px,4vw,60px);padding:0 clamp(4px,1vw,14px)}
.section-heading{display:flex;align-items:center;gap:11px;margin:0 0 18px}
.section-heading>span:first-child{font-size:10px;color:var(--cyan);letter-spacing:.15em}
.section-heading h2{font-size:14px;font-weight:400;letter-spacing:.1em;margin:0}
.privacy{margin-left:auto;font-size:9px;color:#4e9a9c;letter-spacing:.08em}
.gesture-list{border-top:1px solid #17304a}
.gesture-item{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #12243b}
.gesture-symbol{width:33px;height:33px;border:1px solid #2c7098;border-radius:50%;display:grid;place-items:center;font-size:19px;color:#75dfff;flex-shrink:0;box-shadow:inset 0 0 12px #42cfff10}
.gesture-item strong{display:block;font-size:11px;font-weight:400;letter-spacing:.05em;margin-bottom:4px}
.gesture-item small{font-size:10px;color:#7791b1}
.gesture-tag{margin-left:auto;font-size:8px;color:#5688b3;letter-spacing:.12em}
.camera-panel{min-width:0}
.video-frame{height:280px;position:relative;overflow:hidden;border:1px solid #234d70;border-radius:7px;background:radial-gradient(ellipse at center,#0a1d38,#030711 72%)}
#cameraVideo,#poseCanvas{position:absolute;inset:0;width:100%;height:100%;transform:scaleX(-1)}
#cameraVideo{object-fit:contain!important;background:#020611}
#poseCanvas{object-fit:fill}
#cameraVideo{opacity:.48;filter:saturate(.7) hue-rotate(8deg)}
#poseCanvas{pointer-events:none}
.video-placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:9px;background:linear-gradient(135deg,rgba(3,8,20,.82),rgba(9,17,40,.52));padding:15px}
.video-placeholder.hidden{display:none}
.camera-glyph{font-size:38px;color:#7bdfff;text-shadow:0 0 22px #46d9ff;margin-bottom:2px}
.video-placeholder strong{font-size:12px;font-weight:400;letter-spacing:.1em}
.video-placeholder span{font-size:10px;color:#7f9dbf;max-width:270px;line-height:1.7}
.video-chip{position:absolute;top:10px;left:10px;display:flex;align-items:center;gap:7px;font-size:8px;letter-spacing:.14em;color:#b3d7ed;background:#050b18b8;border:1px solid #4c719055;padding:6px 8px;border-radius:3px}
.permission-actions{display:flex;gap:10px;margin-top:11px}
button{font:inherit;cursor:pointer;transition:transform .18s,background .18s,border-color .18s}
button:hover{transform:translateY(-1px)}
button:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
.primary-button,.secondary-button{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:11px 14px;border-radius:4px;font-size:11px;letter-spacing:.08em}
.primary-button{flex:1;border:1px solid #68dcff75;color:#e9fbff;background:linear-gradient(100deg,#0d466a88,#4b358d66);box-shadow:0 0 22px #2dbaff12}
.primary-button b{font-size:16px;font-weight:300;color:var(--cyan)}
.secondary-button{border:1px solid #7451a477;color:#d7c6ff;background:#2c1a4c55}
.secondary-button b{font-size:18px;font-weight:300;color:#bd9dff}
.privacy-note{font-size:9px;color:#657d9d;line-height:1.8;margin:10px 0 0}
.footer-line{display:flex;justify-content:space-between;gap:15px;border-top:1px solid #17253b;margin-top:30px;padding:15px 4px 0;font-size:8px;letter-spacing:.18em;color:#4d6687}
.toast{position:fixed;z-index:5;left:50%;bottom:22px;transform:translate(-50%,15px);opacity:0;pointer-events:none;max-width:min(90vw,620px);padding:12px 17px;border:1px solid #3a7595;border-radius:6px;background:#061324ed;color:#dff8ff;font-size:12px;box-shadow:0 10px 40px #0008;transition:opacity .25s,transform .25s}
.toast.show{opacity:1;transform:translate(-50%,0)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ripple{0%{transform:scale(.8);opacity:.6}100%{transform:scale(2.3);opacity:0}}
@media(max-width:760px){.topbar{align-items:flex-start;flex-direction:column;padding-top:23px}.top-status{font-size:10px}.stage{min-height:430px;height:70vh;max-height:540px}.orb-wrap{width:100vw;height:100vw;min-width:290px;min-height:290px;top:43%}.stage-prompt{bottom:78px;line-height:1.8}.stage-hint{bottom:53px;font-size:9px}.energy-meter,.sound-meter{bottom:16px;width:120px}.energy-meter{left:13px}.sound-meter{right:13px}.control-row{grid-template-columns:1fr;gap:8px;margin-bottom:25px}.control-card{padding:12px 14px}.bottom-grid{grid-template-columns:1fr;gap:28px}.video-frame{height:280px}.footer-line{font-size:7px;letter-spacing:.1em}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}}