*{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#fff;-webkit-user-select:none;user-select:none;background:#050505;width:100vw;height:100vh;font-family:Inter,-apple-system,sans-serif;overflow:hidden}.ui-layer{pointer-events:none;z-index:10;flex-direction:column;justify-content:space-between;width:100%;height:100%;padding:32px;display:flex;position:absolute;top:0;left:0}.ui-layer>*{pointer-events:auto}.header{justify-content:space-between;align-items:center;display:flex}.logo{letter-spacing:4px;background:linear-gradient(90deg,#a78bfa,#38bdf8);-webkit-text-fill-color:transparent;-webkit-background-clip:text;font-size:24px;font-weight:800}.controls{-webkit-backdrop-filter:blur(12px);background:#ffffff0d;border:1px solid #ffffff1a;border-radius:100px;gap:12px;padding:8px;display:flex}.controls button{color:#fff9;cursor:pointer;letter-spacing:.5px;background:0 0;border:none;border-radius:50px;padding:10px 20px;font-size:14px;font-weight:500;transition:all .3s cubic-bezier(.16,1,.3,1)}.controls button:hover{color:#fff}.controls button.active{color:#000;background:#fff;box-shadow:0 4px 12px #fff3}.footer{text-align:center;letter-spacing:2px;color:#fff6;font-size:11px}.overlay-html{pointer-events:none}.spatial-card{color:#fff;-webkit-backdrop-filter:blur(16px);background:#141414cc;border:1px solid #ffffff1a;border-radius:16px;width:320px;padding:32px}.spatial-card.accent{background:#38bdf81a;border:1px solid #38bdf84d}.spatial-card h2{color:#fff;margin-bottom:12px;font-size:20px;font-weight:400}.spatial-card p{color:#fff9;font-size:14px;line-height:1.6}