*{margin:0;padding:0;box-sizing:border-box}body{background:#000;color:#eee;font-family:SF Mono,Fira Code,Consolas,monospace;overflow:hidden;width:100vw;height:100vh}#app{width:100%;height:100%;position:relative}#loading{position:fixed;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center}#loading.hidden{display:none}.loading-content{text-align:center}.loading-content p{margin-top:1rem;font-size:.9rem;color:#888}.spinner{width:40px;height:40px;margin:0 auto;border:3px solid #333;border-top-color:#0ff;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}#toolbar{position:fixed;top:0;left:0;right:0;z-index:10;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1rem;background:#000000b3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);flex-wrap:wrap}#mode-selector{display:flex;gap:.25rem}#mode-controls{display:flex;gap:.25rem;align-items:center;flex-wrap:wrap}.btn{padding:.4rem .9rem;border:1px solid #444;border-radius:20px;background:#222;color:#aaa;font-family:inherit;font-size:.75rem;font-weight:600;cursor:pointer;transition:all .15s ease;text-transform:uppercase;letter-spacing:.05em;-webkit-user-select:none;user-select:none}.btn:hover{border-color:#666;color:#ddd}.btn.active{background:#0ff;color:#000;border-color:#0ff}.btn.active-pink{background:#f0f;color:#000;border-color:#f0f}.btn.mode-btn.active{background:#fff;color:#000;border-color:#fff}.btn.active-listen{background:#f34;color:#fff;border-color:#f34;animation:listen-pulse 1.5s ease-in-out infinite}@keyframes listen-pulse{0%,to{box-shadow:0 0 #f346}50%{box-shadow:0 0 0 6px #f340}}.detected-key-badge{padding:.3rem .7rem;border-radius:12px;background:#ffc86426;border:1px solid rgba(255,200,100,.4);color:#ffc864;font-family:inherit;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.divider{width:1px;height:24px;background:#444;margin:0 .5rem}.toolbar-select{padding:.35rem 1.4rem .35rem .6rem;border:1px solid #444;border-radius:12px;background:#222;color:#ddd;font-family:inherit;font-size:.7rem;font-weight:600;cursor:pointer;outline:none;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;text-transform:uppercase;letter-spacing:.05em}.toolbar-select:hover{border-color:#666}.toolbar-select:focus{border-color:#f0f}.toolbar-select option{background:#222;color:#ddd}#viewport{width:100%;height:100%;position:relative}#webcam{width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}#overlay{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none}#start-prompt{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#000000d9;cursor:pointer}#start-prompt.hidden{display:none}#start-prompt .prompt-content{text-align:center}#start-prompt h1{font-size:2rem;margin-bottom:.5rem;letter-spacing:-.02em}#start-prompt p{color:#888;font-size:.9rem}