:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:transparent}body{margin:0;padding:0;overflow:hidden;width:100vw;height:100vh;background:transparent}#canvas-container{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1}#input-video{position:fixed;top:0;left:0;width:100%;height:100%;object-fit:cover;opacity:.25;z-index:0;pointer-events:none;filter:blur(0px)}#ui-container{position:absolute;top:20px;left:20px;z-index:10;background:#00000080;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);padding:20px;border-radius:12px;border:1px solid rgba(255,255,255,.1);max-width:300px;box-shadow:0 4px 30px #0000001a}#show-hud-btn{position:fixed;bottom:16px;left:16px;z-index:20;background:#0009;color:#fff;border:1px solid rgba(255,255,255,.2);border-radius:999px;padding:10px 16px;cursor:pointer;font-size:.9em;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}#show-hud-btn:hover{background:#000000bf}@media(max-width:768px){#ui-container{display:none}}h1{font-size:1.5em;margin:0 0 5px;font-weight:600}.subtitle{font-size:.8em;color:#aaa;margin:0 0 20px}.control-group{margin-bottom:15px}label{display:block;font-size:.8em;margin-bottom:8px;text-transform:uppercase;letter-spacing:1px;color:#888}.button-group{display:flex;flex-wrap:wrap;gap:8px}button{background:#ffffff1a;border:1px solid transparent;padding:6px 12px;border-radius:6px;color:#fff;cursor:pointer;font-size:.9em;transition:all .2s}button:hover{background:#fff3}button.active{background:#f05;border-color:#f05}input[type=color]{width:100%;height:40px;border:none;border-radius:6px;cursor:pointer;background:none}.status{margin-top:20px;font-size:.8em;color:#aaa;border-top:1px solid rgba(255,255,255,.1);padding-top:10px}