:root{--color-primary: #00F2FE;--color-secondary: #EE00FF;--color-bg-dark: #0a0e27;--color-text: #ffffff;--color-text-secondary: #b8c5d6;--glass-bg: rgba(255, 255, 255, .05);--glass-border: rgba(255, 255, 255, .1);--shadow: 0 8px 32px rgba(0, 0, 0, .3)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;background-color:var(--color-bg-dark);color:var(--color-text);overflow-x:hidden;min-height:100vh}.gradient-bg{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,var(--color-primary) 0%,#4a00e0 50%,var(--color-secondary) 100%);opacity:.15;z-index:-1;animation:gradientShift 15s ease infinite}@keyframes gradientShift{0%,to{transform:scale(1) rotate(0)}50%{transform:scale(1.1) rotate(5deg)}}.glass-card{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:20px;box-shadow:var(--shadow)}.container{position:fixed;top:0;left:0;width:100vw;height:100vh;padding:0;margin:0;z-index:1}.header,.content-wrapper{display:none}.video-container{position:relative;width:100%;height:300px;border-radius:20px;overflow:hidden;background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid var(--glass-border);box-shadow:var(--shadow)}.input-video{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.output-canvas{position:absolute;top:0;left:0;width:100%;height:100%;transform:scaleX(-1)}.canvas-container{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:1;border:none;border-radius:0;background:transparent}#three-container{width:100%;height:100%}#three-container canvas{display:block!important;width:100%!important;height:100%!important}.controls{display:none}.control-group{display:flex;gap:1.5rem;flex-wrap:wrap}.slider-group{display:flex;flex-direction:column;gap:1rem;min-width:280px}.slider-item{display:flex;flex-direction:column;gap:.5rem}.slider-item label{font-size:.9rem;color:var(--color-text-secondary);display:flex;justify-content:space-between}.slider-item span{color:var(--color-primary);font-weight:600}.slider-item input[type=range]{width:100%;height:6px;border-radius:3px;background:linear-gradient(to right,var(--color-primary),var(--color-secondary));outline:none;opacity:.8;transition:opacity .2s;cursor:pointer}.slider-item input[type=range]:hover{opacity:1}.slider-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px #00f2fe80;cursor:pointer;transition:transform .2s}.slider-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.slider-item input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px #00f2fe80;cursor:pointer;border:none;transition:transform .2s}.slider-item input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}.control-label,.info-panel,.info-item,.slider-group,.control-group{display:none}.info-label{color:var(--color-text-secondary);font-size:.9rem}.info-value{font-weight:700;font-size:1.1rem;color:var(--color-primary)}.loading-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0e27f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.loading-content{text-align:center}.loader{width:60px;height:60px;border:4px solid rgba(255,255,255,.1);border-top-color:var(--color-primary);border-radius:50%;margin:0 auto 1.5rem;animation:spin 1s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.loading-text{font-size:1.2rem;margin-bottom:.5rem;color:var(--color-text)}.loading-hint{font-size:.9rem;color:var(--color-text-secondary)}.error-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0a0e27f2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);display:flex;justify-content:center;align-items:center;z-index:1000;animation:fadeIn .3s ease}.error-content{padding:3rem;text-align:center;max-width:500px}.error-content h2{font-size:2rem;margin-bottom:1rem}.error-content p{color:var(--color-text-secondary);margin-bottom:2rem;line-height:1.6}.btn-retry{padding:.8rem 2rem;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border:none;border-radius:10px;color:#fff;font-size:1rem;font-weight:600;cursor:pointer;transition:transform .2s,box-shadow .2s}.btn-retry:hover{transform:translateY(-2px);box-shadow:0 8px 20px #00f2fe66}.footer{text-align:center;padding:2rem;color:var(--color-text-secondary);font-size:.9rem}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.copyright-info{position:fixed;top:20px;left:20px;font-size:11px;color:#ffffff80;z-index:100;transition:opacity .3s;pointer-events:none}.copyright-info p{margin:0;font-weight:300}.shortcuts-hint{margin-top:5px;color:#fff6}.fps-display{position:fixed;top:20px;right:20px;font-size:13px;color:#fffc;background:#0006;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:8px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.1);z-index:100;transition:opacity .3s;font-family:Courier New,monospace}.camera-selector{position:fixed;bottom:20px;left:20px;z-index:100;transition:opacity .3s}.camera-select{background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;border:1px solid rgba(255,255,255,.2);padding:10px 16px;border-radius:8px;cursor:pointer;font-size:13px;outline:none;transition:all .3s}.camera-select:hover{background:#000000b3;border-color:#ffffff4d}.camera-select:focus{border-color:var(--color-primary);box-shadow:0 0 10px #00f2fe4d}.settings-btn{position:fixed;bottom:80px;right:20px;width:48px;height:48px;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer;z-index:100;transition:all .3s;display:flex;align-items:center;justify-content:center;color:#fff}.settings-btn:hover{background:#000000b3;transform:scale(1.1) rotate(90deg);box-shadow:0 0 20px #00f2fe66}.fullscreen-btn{position:fixed;bottom:20px;right:20px;width:48px;height:48px;background:#00000080;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2);border-radius:50%;cursor:pointer;z-index:100;transition:all .3s;display:flex;align-items:center;justify-content:center;color:#fff}.fullscreen-btn:hover{background:#000000b3;transform:scale(1.1);box-shadow:0 0 20px #00f2fe66}.settings-panel{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#000000b3;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);z-index:1000;display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease}.settings-content{width:90%;max-width:600px;max-height:80vh;overflow-y:auto;padding:0;animation:slideUp .3s ease}.settings-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem 2rem;border-bottom:1px solid rgba(255,255,255,.1)}.settings-header h2{margin:0;font-size:1.5rem;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.close-btn{width:36px;height:36px;border:none;background:#ffffff1a;color:#fff;font-size:24px;border-radius:50%;cursor:pointer;transition:all .3s;display:flex;align-items:center;justify-content:center;line-height:1}.close-btn:hover{background:#ff000080;transform:rotate(90deg)}.settings-body{padding:2rem;display:flex;flex-direction:column;gap:2rem}.setting-section{display:flex;flex-direction:column;gap:1rem}.preset-buttons{display:flex;gap:10px;flex-wrap:wrap}.preset-btn{padding:8px 16px;background:#ffffff1a;border:1px solid rgba(255,255,255,.2);color:var(--color-text-secondary);border-radius:8px;cursor:pointer;transition:all .2s ease;font-size:14px}.preset-btn:hover{background:#fff3;color:var(--color-text);border-color:var(--color-primary)}.preset-btn.active{background:var(--color-primary);color:var(--color-bg-dark);font-weight:700;border-color:var(--color-primary)}.setting-section h3{margin:0;font-size:1.1rem;color:var(--color-primary);border-bottom:1px solid rgba(0,242,254,.2);padding-bottom:.5rem}.setting-item{display:flex;flex-direction:column;gap:.5rem}.setting-item label{display:flex;justify-content:space-between;font-size:.9rem;color:var(--color-text-secondary)}.setting-item label span{color:var(--color-primary);font-weight:600;font-family:Courier New,monospace}.setting-item input[type=range]{width:100%;height:6px;border-radius:3px;background:#ffffff1a;outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.setting-item input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px #00f2fe80;cursor:pointer;transition:transform .2s}.setting-item input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.setting-item input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary);box-shadow:0 0 10px #00f2fe80;cursor:pointer;border:none;transition:transform .2s}.setting-item input[type=range]::-moz-range-thumb:hover{transform:scale(1.2)}@keyframes slideUp{0%{opacity:0;transform:translateY(50px)}to{opacity:1;transform:translateY(0)}}:fullscreen .copyright-info,:fullscreen .fps-display,:fullscreen .camera-selector,:fullscreen .settings-btn,:fullscreen .fullscreen-btn,:-webkit-full-screen .copyright-info,:-webkit-full-screen .fps-display,:-webkit-full-screen .camera-selector,:-webkit-full-screen .settings-btn,:-webkit-full-screen .fullscreen-btn,:-moz-full-screen .copyright-info,:-moz-full-screen .fps-display,:-moz-full-screen .camera-selector,:-moz-full-screen .settings-btn,:-moz-full-screen .fullscreen-btn,body.is-fullscreen .copyright-info,body.is-fullscreen .fps-display,body.is-fullscreen .camera-selector,body.is-fullscreen .settings-btn,body.is-fullscreen .fullscreen-btn{opacity:0!important;pointer-events:none!important;visibility:hidden!important}:fullscreen .settings-panel,:-webkit-full-screen .settings-panel,:-moz-full-screen .settings-panel,body.is-fullscreen .settings-panel{display:none!important}@media (max-width: 1024px){.content-wrapper{grid-template-columns:1fr}.canvas-container{height:500px}.controls{grid-template-columns:1fr;gap:1.5rem}.slider-group{min-width:100%}}@media (max-width: 768px){.title{font-size:2rem}.subtitle{font-size:.95rem}.container{padding:1rem}.canvas-container{height:400px}.control-group{flex-direction:column;gap:1rem}.copyright-info,.fps-display{font-size:.7rem;padding:.4rem .8rem}.camera-selector{left:.5rem;bottom:.5rem}.camera-select{font-size:.8rem;padding:.5rem .8rem}.settings-btn,.fullscreen-btn{width:45px;height:45px;font-size:1.2rem;right:.5rem}.settings-btn{bottom:5rem}.fullscreen-btn{bottom:.5rem}.settings-content{width:95vw;max-width:none;max-height:85vh;padding:1.5rem}.settings-content h2{font-size:1.3rem;margin-bottom:1rem}.slider-group{margin-bottom:1rem}.slider-group label,.slider-value{font-size:.85rem}}@media (max-width: 768px) and (orientation: portrait){.copyright-info{top:.5rem;left:.5rem}.fps-display{top:.5rem;right:.5rem}.camera-selector{top:3.5rem;left:50%;transform:translate(-50%);bottom:auto}.camera-select{min-width:200px}}@media (max-width: 960px) and (orientation: landscape){.copyright-info,.fps-display{font-size:.65rem;padding:.3rem .6rem}.camera-selector{bottom:.5rem;left:.5rem}.settings-btn,.fullscreen-btn{width:40px;height:40px;font-size:1rem}}@media (max-width: 480px){.copyright-info p,.fps-display span{font-size:.65rem}.settings-content{padding:1rem}.settings-content h2{font-size:1.1rem}.slider-group label{font-size:.8rem}input[type=range]{height:8px}input[type=range]::-webkit-slider-thumb{width:18px;height:18px}input[type=range]::-moz-range-thumb{width:18px;height:18px}}@media (hover: none) and (pointer: coarse){.settings-btn,.fullscreen-btn,.close-btn{min-width:44px;min-height:44px;touch-action:manipulation}.camera-select{min-height:44px;touch-action:manipulation}input[type=range]{height:12px;touch-action:pan-y}input[type=range]::-webkit-slider-thumb{width:24px;height:24px}input[type=range]::-moz-range-thumb{width:24px;height:24px}.glass-card:hover{transform:none}.settings-btn:active,.fullscreen-btn:active,.close-btn:active{transform:scale(.95)}}