@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;600;700&display=swap');:root{--bg-main:#0f0f11;--panel-bg:rgba(24,24,27,0.94);--panel-border:rgba(63,63,70,0.75);--text-main:#fafafa;--text-muted:#a1a1aa;--accent-primary:#3f3f46;--accent-hover:#27272a;--accent-light:#e4e4e7}*{box-sizing:border-box;margin:0;padding:0;font-family:'Inter',system-ui,-apple-system,sans-serif;user-select:none}body{background-color:var(--bg-main);color:var(--text-main);overflow:hidden;height:100vh;width:100vw;font-size:15px}.mono{font-family:'JetBrains Mono',monospace}.glass-panel{background:var(--panel-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--panel-border);box-shadow:0 10px 30px -4px rgba(0,0,0,0.6),0 4px 12px -2px rgba(0,0,0,0.4);border-radius:16px}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:rgba(24,24,27,0.8);border-radius:4px}::-webkit-scrollbar-thumb{background:rgba(82,82,91,0.75);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:rgba(113,113,122,0.95)}.cam-btn,.preset-btn,.speed-btn,.surface-btn{background:rgba(18,18,20,0.75);border:1px solid rgba(63,63,70,0.8);transition:all 0.15s ease-in-out}.tab-btn{transition:0.2s cubic-bezier(0.4,0,0.2,1);color:#a1a1aa;font-weight:700}.tab-btn:hover{color:#fafafa}.tab-btn.active-tab{background:linear-gradient(135deg,#3f3f46 0%,#27272a 100%);color:#fff !important;box-shadow:0 4px 14px rgba(0,0,0,0.5);border:1px solid #71717a}.preset-btn{transition:0.18s;color:#e4e4e7}.preset-btn:hover{background:rgba(39,39,42,0.9);border-color:#d4d4d8;transform:translateY(-1.5px);box-shadow:0 4px 12px rgba(0,0,0,0.4)}.preset-btn.active-preset{background:linear-gradient(135deg,#3f3f46 0%,#27272a 100%);border-color:#e4e4e7;color:#fff !important;box-shadow:0 6px 18px rgba(0,0,0,0.55)}.preset-btn.active-preset div div{color:rgba(255,255,255,0.95) !important}.cam-btn,.speed-btn,.surface-btn{color:#d4d4d8}.cam-btn:hover,.speed-btn:hover,.surface-btn:hover{background:rgba(39,39,42,0.9);border-color:#e4e4e7;color:#fff}.cam-btn.active-cam,.speed-btn.active-speed,.surface-btn.active-surface{background:#3f3f46 !important;color:#fff !important;border-color:#e4e4e7 !important;font-weight:800 !important;box-shadow:0 2px 10px rgba(0,0,0,0.5)}#joystick-zone{position:relative;width:76px;height:76px;border-radius:50%;background:radial-gradient(circle,#27272a 0%,#121214 100%);border:2px solid rgba(82,82,91,0.85);box-shadow:0 4px 14px rgba(0,0,0,0.5),inset 0 2px 6px rgba(0,0,0,0.7);touch-action:none;cursor:grab}#joystick-zone:active{cursor:grabbing}#joystick-knob{position:absolute;top:calc(50% - 16px);left:calc(50% - 16px);width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#ffffff 0%,#a1a1aa 100%);box-shadow:0 4px 12px rgba(255,255,255,0.3);pointer-events:none;transition:transform 50ms ease-out}input[type="range"]{-webkit-appearance:none;appearance:none;background:#27272a;height:7px;border-radius:4px;outline:none}input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:#e4e4e7;cursor:pointer;box-shadow:0 2px 8px rgba(255,255,255,0.4);transition:transform 0.1s}input[type="range"]::-webkit-slider-thumb:hover{transform:scale(1.2)}input[type="checkbox"]{accent-color:#a1a1aa;cursor:pointer;width:16px;height:16px}#orientation-overlay{display:none}@media screen and (orientation:portrait),screen and (max-width:1024px),screen and (max-height:540px){#orientation-overlay{display:flex !important;position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;z-index:99999;background:#0a0a0c;align-items:center;justify-content:center;overflow:hidden;touch-action:none;overscroll-behavior:none}}