:root{--bg-color: #0f0c29;--bg-gradient: linear-gradient(135deg, #0f0c29, #302b63, #24243e);--primary-color: #00d2ff;--secondary-color: #3a7bd5;--accent-color: #ff0099;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--text-primary: #ffffff;--text-secondary: rgba(255, 255, 255, .7);--font-main: "Inter", sans-serif;--font-display: "Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);background:var(--bg-gradient);color:var(--text-primary);height:100vh;overflow:hidden;display:flex;justify-content:center;align-items:center}#fireworks-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:5;pointer-events:none}#fireworks-container canvas{width:100%!important;height:100%!important}.app-container{width:100%;height:100%;position:relative;overflow:hidden;z-index:10;pointer-events:none}.app-header,.viewport,.gesture-overlay,.controls{pointer-events:auto}.app-header{display:flex;justify-content:space-between;align-items:center;padding:20px;position:absolute;top:0;left:0;width:100%;z-index:20}.logo{font-family:var(--font-display);font-size:2rem;font-weight:700;letter-spacing:-.5px;text-shadow:0 2px 10px rgba(0,0,0,.5)}.highlight{color:var(--primary-color)}.status-indicator{display:flex;align-items:center;gap:8px;font-size:.9rem;color:var(--text-secondary);background:var(--glass-bg);padding:6px 12px;border-radius:20px;border:1px solid var(--glass-border);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.status-dot{width:8px;height:8px;border-radius:50%;background-color:#ff9800;box-shadow:0 0 8px #ff9800;transition:all .3s ease}.status-dot.active{background-color:#0f8;box-shadow:0 0 8px #0f8}.status-dot.error{background-color:#f44;box-shadow:0 0 8px #f44}.viewport{position:relative;width:320px;height:240px;border-radius:16px;overflow:hidden;background:#0000004d;box-shadow:0 10px 40px #0009;z-index:100;border:1px solid rgba(255,255,255,.1);opacity:.6;transition:opacity .3s ease,transform .3s ease}.viewport:hover{opacity:1;transform:scale(1.05)}.webcam-feed{position:absolute;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.output-canvas{position:absolute;width:100%;height:100%;transform:scaleX(-1)}.gesture-overlay{position:absolute;bottom:40px;left:40px;z-index:20}.glass-panel{background:#0f0c29b3;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:0 8px 32px #0000004d}.gesture-card{display:flex;align-items:center;gap:8px;padding:6px 10px;min-width:120px;background:#0006;border:1px solid rgba(255,255,255,.1);border-radius:8px}.gesture-card:hover{background:#0009}.gesture-icon{font-size:1.2rem;background:var(--bg-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:none}.gesture-info{flex:1}.label{font-size:.5rem;text-transform:uppercase;letter-spacing:.5px;color:#ffffff80;display:block;margin-bottom:0}.gesture-name{font-family:var(--font-main);font-size:.85rem;font-weight:600;margin-bottom:2px;color:#fff;background:none;-webkit-text-fill-color:white;line-height:1.1}.confidence-bar{height:2px;background:#ffffff1a;border-radius:1px;overflow:hidden;margin-bottom:1px}.confidence-level{height:100%;background:var(--primary-color);box-shadow:none;transition:width .2s ease}.confidence-text{font-size:.6rem;color:#fff6;float:right;line-height:1}.camera-container{position:absolute;bottom:20px;right:20px;display:flex;flex-direction:column;align-items:flex-end;gap:10px;z-index:100}.controls{position:relative;padding:0;display:flex;flex-direction:row;gap:10px;z-index:20}.btn-primary{background:#ffffff1a;border:1px solid rgba(255,255,255,.2);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:8px 16px;color:#fff;font-family:var(--font-main);font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:.75rem;text-transform:uppercase;letter-spacing:1px}.btn-primary:hover{background:#fff3;border-color:#fff6}.btn-primary:active{transform:scale(.98)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 768px){.app-container{padding:0}.viewport{width:120px;height:160px}.camera-container{bottom:10px;right:10px}.gesture-overlay{bottom:10px;left:10px}}