@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{color-scheme:dark;--bg:#0b0e19;--panel:#141827;--muted:#9a9fb6;--mint:#a2ffdd;--violet:#ae8aff}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 80% 0%,#29203d55,transparent 45%),var(--bg);color:#f6f7fc;font-family:Manrope,system-ui,sans-serif}button,input,select{font:inherit}button{cursor:pointer;color:inherit;background:#252a3c;border:1px solid #ffffff17;border-radius:12px;padding:12px 18px;transition:background .2s,transform .2s}button:hover{background:#353b52;transform:translateY(-1px)}button:disabled{opacity:.6;cursor:wait}button:focus-visible,input:focus-visible,select:focus-visible,#stage:focus-visible{outline:3px solid var(--mint);outline-offset:4px}.primary{background:var(--mint);color:#10251f;font-weight:800}.primary:hover{background:#c7ffed}header{max-width:1440px;margin:auto;padding:26px 40px;display:flex;align-items:center;gap:24px;border-bottom:1px solid #ffffff0e}.brand{color:inherit;text-decoration:none;font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px}.logo{color:var(--mint);font-size:36px}.brand small{font-size:12px;background:#292537;color:#c9b1ff;padding:5px 8px;border-radius:6px}.badge{font-size:10px;letter-spacing:2px;color:var(--muted)}header>button{margin-left:auto}main{max-width:1440px;margin:auto;padding:38px 40px 20px}.eyebrow{color:var(--mint);font-size:10px;letter-spacing:2px;font-weight:800}.intro{position:relative}.intro h1{font-size:clamp(38px,4.6vw,64px);line-height:1.13;letter-spacing:-3px;margin:18px 0}.intro h1 span{background:linear-gradient(100deg,#abffde,#b093ff);color:transparent;background-clip:text}.intro p{position:absolute;right:0;bottom:5px;color:var(--muted);font-size:14px;line-height:1.8}.modes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:30px 0 22px}.modes button{display:flex;align-items:center;text-align:left;padding:20px;background:#141827}.modes button>span{font-size:28px;margin-right:16px;color:var(--violet)}.modes button div{font-weight:800;font-size:15px}.modes small{display:block;font-weight:400;color:var(--muted);font-size:11px;margin-top:6px}.modes b{margin-left:auto;color:#626780;font-size:11px}.modes button[aria-pressed=true]{border-color:var(--mint);background:linear-gradient(110deg,#a2ffdd13,#141827)}.modes button[aria-pressed=true]>span{color:var(--mint)}.workspace{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px}.studio,.camera-card,.guide{background:var(--panel);border:1px solid #ffffff0d;border-radius:20px;overflow:hidden}.studio-top{display:flex;justify-content:space-between;padding:19px 23px;font-size:10px;letter-spacing:1.4px;color:#c3c5d5}.live-dot{color:var(--mint)}#stage{position:relative;min-height:370px;height:clamp(370px,35vw,510px);overflow:hidden;background:radial-gradient(ellipse at center,#30234688,transparent 65%),#0e1220;touch-action:none;border-top:1px solid #ffffff08;border-bottom:1px solid #ffffff08}#stage:before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff04 1px,transparent 1px),linear-gradient(90deg,#ffffff04 1px,transparent 1px);background-size:40px 40px}.scene{position:absolute;inset:0;pointer-events:none}.orb{position:absolute;left:50%;top:41%;width:200px;height:200px;border:1px solid #ab8dff88;border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 90px #af75ff22,inset 0 0 40px #ae89ff22;animation:breathe 5s ease-in-out infinite}.orb:before,.orb:after{content:'';position:absolute;inset:17px;border:1px solid #a2ffdd77;border-radius:50%;transform:rotateX(55deg) rotateZ(-30deg)}.orb:after{inset:-22px;border-color:#a58aff44;transform:rotateY(65deg) rotateZ(30deg)}.orb-core{position:absolute;inset:48px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#baffee,#9975f5 65%,#34205a);box-shadow:0 0 70px #aa88ff66}.scene-caption{position:absolute;bottom:40px;text-align:center;width:100%}.scene-caption span{font-size:11px;color:var(--mint);letter-spacing:2px}.scene-caption h2{font-size:23px;letter-spacing:-.6px;margin:12px 0}.scene-caption p{font-size:11px;color:var(--muted)}.stage-tag{position:absolute;top:20px;left:23px;font-size:9px;color:#676e89;letter-spacing:2px}#drawing,#visualizer{position:absolute;width:100%;height:100%;inset:0;pointer-events:none}#visualizer{opacity:.5}.controls{padding:18px 22px;min-height:82px}.controls>div{display:flex;align-items:center;gap:18px;flex-wrap:wrap}label{display:flex;align-items:center;gap:9px;font-size:11px;color:var(--muted)}input[type=range]{width:100px;accent-color:var(--mint)}input[type=color]{border:none;width:35px;height:30px;padding:2px;background:#252a3c;border-radius:6px}select{background:#252a3c;border:1px solid #ffffff15;color:#fff;border-radius:8px;padding:8px;font-size:11px}.card-heading{font-size:10px;letter-spacing:1px;padding:18px;display:flex;justify-content:space-between}.card-heading span{color:var(--muted);letter-spacing:0}.camera-view{position:relative;height:200px;background:#0c101d}.camera-view video,.camera-view canvas{position:absolute;width:100%;height:100%;object-fit:contain;transform:scaleX(-1)}#cameraPlaceholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column}#cameraPlaceholder span{font-size:35px;filter:grayscale(1);opacity:.7;margin-bottom:12px}#cameraPlaceholder strong{font-size:13px}#cameraPlaceholder p{font-size:11px;color:var(--muted)}.tracking{display:flex;justify-content:space-between;padding:15px 12px;font-size:9px;color:var(--mint)}.guide{margin-top:18px;padding:23px}.guide h3{font-size:21px;line-height:1.45;letter-spacing:-.5px}.guide p{display:flex;gap:13px;font-size:11px;color:#b6bbd0;line-height:1.7}.guide b{color:var(--violet)}.tip{margin-top:20px;border-top:1px solid #ffffff10;padding-top:17px;color:var(--muted);font-size:10px;line-height:1.7}#message{padding:18px 4px;color:var(--muted);font-size:12px}#message.error{color:#ffb4c1}footer{border-top:1px solid #ffffff0c;padding:20px 0;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#656d87}#gestureCursor{position:fixed;width:24px;height:24px;border:2px solid var(--mint);border-radius:50%;pointer-events:none;z-index:100;transform:translate(-50%,-50%);box-shadow:0 0 20px #a2ffdd80}#gestureCursor.pinched{background:var(--mint);transform:translate(-50%,-50%) scale(.7)}#lightOrb{position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);width:180px;height:180px;border-radius:50%;background:#a855f7;box-shadow:0 0 90px 45px #a855f780}.draw-hint{position:absolute;inset:0;display:grid;place-items:center;font-size:14px;color:#8b93ae;pointer-events:none}[hidden]{display:none!important}@keyframes breathe{50%{transform:translate(-50%,-50%) scale(1.08)}}@media(max-width:1050px){.workspace{grid-template-columns:minmax(0,1fr) 250px}.controls>div{gap:12px}.intro p{position:static}.intro h1{letter-spacing:-2px}}@media(max-width:760px){header{padding:18px 20px;gap:8px}.brand{font-size:19px}.badge{display:none}header>button{font-size:11px;padding:11px}main{padding:28px 18px}.workspace{grid-template-columns:1fr}.modes{gap:8px}.modes button{padding:13px 10px;display:block}.modes button>span{font-size:23px}.modes button div{font-size:11px;margin-top:8px}.modes b,.modes small{display:none}aside{display:grid;grid-template-columns:1fr 1fr;gap:14px}.guide{margin:0;padding:17px}.guide h3{font-size:17px}.camera-view{height:190px}.scene-caption h2{font-size:21px}.controls{padding:15px}.controls>div{gap:14px}footer{gap:15px;line-height:1.6}.intro h1{font-size:42px}}@media(max-width:460px){aside{grid-template-columns:1fr}.camera-view{height:210px}.guide h3 br{display:none}.guide p{margin:10px 0}.controls button{font-size:12px}#stage{height:390px}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}