*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-primary: #ffa575;--color-secondary: #311599;--color-success: #4caf50;--color-warning: #ffeb3b;--color-error: #f44336;--color-info: #2196f3;--font-system: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace}html,body{width:100%;height:100%;overflow:hidden;background:#000;font-family:var(--font-system)}#app{width:100%;height:100vh;position:relative;overflow:hidden;background:linear-gradient(135deg,#0a0a0a,#1a1a2e)}#webcam-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);z-index:1;filter:brightness(.15) saturate(.3)}canvas{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2;pointer-events:none}#status-indicator{position:absolute;bottom:20px;left:20px;padding:12px 20px;background:#000000bf;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:14px;font-weight:500;border-radius:12px;z-index:100;display:flex;align-items:center;gap:10px;box-shadow:0 4px 20px #0000004d;transition:all .3s ease}#status-indicator:hover{background:#000000d9}#debug-panel{position:absolute;top:20px;right:20px;padding:16px;background:#000000d9;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#0f0;font-family:var(--font-mono);font-size:12px;line-height:1.6;border-radius:12px;z-index:100;min-width:220px;box-shadow:0 4px 20px #0000004d;border:1px solid rgba(0,255,0,.2)}.loading{display:flex;align-items:center;justify-content:center;width:100%;height:100%;color:#fff;font-size:18px}.loading:before{content:"";width:30px;height:30px;border:3px solid rgba(255,255,255,.3);border-top-color:var(--color-primary);border-radius:50%;animation:spin 1s linear infinite;margin-right:15px}@keyframes spin{to{transform:rotate(360deg)}}.error{color:var(--color-error);text-align:center;padding:40px}.fade-in{animation:fadeIn .5s ease-out}.fade-out{animation:fadeOut .5s ease-out}@keyframes fadeIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes fadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.95)}}.glow{text-shadow:0 0 10px var(--color-primary),0 0 20px var(--color-primary),0 0 40px var(--color-secondary)}.instructions{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:#fffc;font-size:20px;z-index:50;pointer-events:none;opacity:0;transition:opacity .5s ease}.instructions.visible{opacity:1}.instructions h2{font-size:28px;margin-bottom:16px;font-weight:300;letter-spacing:2px}.instructions p{font-size:16px;opacity:.7}.shortcut-hint{position:absolute;bottom:20px;right:20px;padding:8px 12px;background:#00000080;color:#ffffff80;font-size:11px;border-radius:6px;z-index:100}.shortcut-hint kbd{display:inline-block;padding:2px 6px;background:#ffffff1a;border-radius:4px;margin:0 2px;font-family:var(--font-mono)}@media(max-width:768px){#status-indicator{bottom:10px;left:10px;padding:8px 14px;font-size:12px}#debug-panel{top:10px;right:10px;padding:10px;font-size:10px;min-width:180px}.instructions h2{font-size:22px}.instructions p{font-size:14px}}@media(prefers-contrast:high){#status-indicator,#debug-panel{background:#000000f2;border:2px solid #fff}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}