:root{--bg:#06060a;--surface:#0c0c13;--card:#12121c;--card2:#181824;--border:#232336;--border2:#2e2e44;--accent:#8b7dff;--accent2:#ff7da6;--accent3:#5fffd0;--accent4:#ffd76f;--text:#f2f0ff;--muted:#8d8db8;--muted2:#56567d;--glow:#8b7dff66}*{box-sizing:border-box}html,body,#root{width:100%;height:100%;margin:0}body{background:var(--bg);color:var(--text);-webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;overflow:hidden}body:before{content:"";pointer-events:none;background:radial-gradient(80% 50% at 75% 0,#8b7dff1a,#0000 60%),radial-gradient(60% 50% at 10% 100%,#ff7da612,#0000 55%);position:fixed;inset:0}button,input{font:inherit}.app-shell{z-index:1;background:var(--border);grid-template-rows:64px 1fr;grid-template-columns:272px minmax(0,1fr) 292px;gap:1px;height:100%;display:grid;position:relative}.header{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#0c0c13f5;grid-column:1/-1;align-items:center;gap:14px;padding:0 20px;display:flex}.brand{align-items:center;gap:10px;min-width:190px;display:flex}.brand img{object-fit:cover;border-radius:9px;width:30px;height:30px;box-shadow:0 0 24px #8b7dff59}.brand-title{letter-spacing:.2px;font-size:15px;font-weight:800}.brand-subtitle{color:var(--muted2);margin-top:1px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.status-pill{background:var(--card);border:1px solid var(--border);color:var(--muted);border-radius:999px;align-items:center;gap:8px;padding:7px 13px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;display:flex}.status-pill.active{color:var(--accent3);border-color:#5fffd057}.dot{background:var(--muted2);border-radius:50%;width:7px;height:7px}.status-pill.active .dot{background:var(--accent3);box-shadow:0 0 10px var(--accent3);animation:1.6s infinite pulse}@keyframes pulse{0%,to{opacity:1}50%{opacity:.32}}.mode-tabs{flex-wrap:wrap;gap:6px;display:flex}.mode-tab{color:var(--muted);border:1px solid var(--border);cursor:pointer;background:0 0;border-radius:8px;padding:7px 14px;font-size:12px;transition:all .18s}.mode-tab:hover{color:var(--text);border-color:var(--border2)}.mode-tab.active{color:var(--accent);border-color:var(--accent);background:#8b7dff21}.header-metrics{color:var(--muted);align-items:center;gap:12px;margin-left:auto;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;display:flex}.header-metrics b{color:var(--accent3);font-weight:700}.sidebar{background:#0c0c13f5;flex-direction:column;gap:18px;padding:18px 14px;display:flex;overflow-y:auto}.sec-title{letter-spacing:2px;text-transform:uppercase;color:var(--muted2);align-items:center;gap:7px;margin-bottom:9px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;display:flex}.sec-title:after{content:"";background:var(--border);flex:1;height:1px}.gesture-grid{gap:6px;display:grid}.gesture-card{background:var(--card);border:1px solid var(--border);border-radius:10px;align-items:center;gap:9px;padding:9px 10px;transition:all .16s;display:flex}.gesture-card.active{border-color:var(--accent);background:#8b7dff24;transform:translate(2px);box-shadow:0 0 18px #8b7dff38}.gesture-emoji{text-align:center;width:24px;font-size:18px}.gesture-label{font-size:12px;font-weight:700;line-height:1}.gesture-action{color:var(--muted);margin-top:4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.gesture-indicator{background:var(--border2);border-radius:50%;width:6px;height:6px;margin-left:auto}.gesture-card.active .gesture-indicator{background:var(--accent);box-shadow:0 0 8px var(--accent)}.ctrl-row{align-items:center;gap:9px;margin-bottom:9px;display:flex}.ctrl-row label{color:var(--muted);width:54px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.ctrl-row input{accent-color:var(--accent);flex:1}.ctrl-val{text-align:right;width:34px;color:var(--accent3);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.main-panel{background:var(--surface);position:relative;overflow:hidden}.canvas{width:100%;height:100%;display:block}.panel-label{z-index:5;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px;position:absolute;top:14px;left:16px}.gesture-cursor{border:2px solid var(--accent);pointer-events:none;z-index:25;border-radius:50%;width:26px;height:26px;transition:width .1s,height .1s,background .1s,border-color .1s;position:absolute;transform:translate(-50%,-50%)}.gesture-cursor:after{content:"";background:currentColor;border-radius:50%;width:3px;height:3px;position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%)}.gesture-cursor.draw{border-color:var(--accent3);color:var(--accent3);box-shadow:0 0 15px var(--accent3)}.gesture-cursor.pinch{border-color:var(--accent2);width:15px;height:15px;color:var(--accent2);box-shadow:0 0 14px var(--accent2);background:#8b7dff66}.gesture-cursor.grab{border-color:var(--accent3);width:36px;height:36px;color:var(--accent3);border-style:dashed}.canvas-hud{color:var(--muted);pointer-events:none;flex-direction:column;align-items:flex-end;gap:7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;display:flex;position:absolute;top:14px;right:16px}.mode-badge{color:var(--accent2);background:var(--card);letter-spacing:1.5px;border:1px solid #ff7da673;border-radius:6px;padding:6px 12px;font-size:11px}.skeleton-pip{border:1px solid var(--border2);z-index:20;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#08080eeb;border-radius:14px;width:205px;height:154px;position:absolute;bottom:16px;left:16px;overflow:hidden;box-shadow:0 8px 30px #00000080}.skeleton-pip canvas{width:100%;height:100%;display:block}.pip-label,.pip-conf{z-index:2;letter-spacing:1.5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:8px;position:absolute;top:8px}.pip-label{color:var(--muted);left:10px}.pip-conf{color:var(--accent3);right:10px}.pip-empty{color:var(--muted2);justify-content:center;align-items:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;display:flex;position:absolute;inset:0}.toolbar{border:1px solid var(--border2);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:15;background:#0c0c13eb;border-radius:14px;align-items:center;gap:8px;padding:8px 12px;display:flex;position:absolute;bottom:16px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0000006b}.tool-btn{color:var(--muted);border:1px solid var(--border);cursor:pointer;white-space:nowrap;background:0 0;border-radius:8px;padding:7px 11px;font-size:10px;transition:all .18s}.tool-btn:hover{color:var(--text);border-color:var(--border2);background:var(--card)}.tool-btn.active-tool{color:var(--accent);border-color:var(--accent);background:#8b7dff21}.tool-sep{background:var(--border2);width:1px;height:18px}.color-dot{cursor:pointer;border:2px solid #0000;border-radius:50%;width:16px;height:16px;transition:all .15s}.color-dot.selected,.color-dot:hover{border-color:var(--text);transform:scale(1.25)}.stroke-label{min-width:34px;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.stats-grid{grid-template-columns:repeat(2,1fr);gap:7px;display:grid}.stat-card{background:var(--card);border:1px solid var(--border);text-align:center;border-radius:10px;padding:11px}.stat-value{color:var(--accent);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:20px;font-weight:800;line-height:1}.stat-label{color:var(--muted);margin-top:4px;font-size:9px}.current-card{background:var(--card);border:1px solid var(--border);text-align:center;border-radius:12px;padding:16px}.current-emoji{opacity:.9;margin-bottom:8px;font-size:40px;line-height:1}.current-label{font-size:13px;font-weight:700}.current-action{color:var(--muted);margin-top:5px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px}.event-log{background:var(--card);border:1px solid var(--border);border-radius:10px;flex-direction:column-reverse;gap:4px;max-height:220px;padding:10px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;display:flex;overflow-y:auto}.log-entry{opacity:.88;gap:7px;line-height:1.45;display:flex}.log-time{color:var(--muted2);flex:none}.log-gesture{color:var(--accent);flex:none}.log-action{color:var(--accent3)}.start-overlay{z-index:40;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);text-align:center;background:#06060adb;flex-direction:column;justify-content:center;align-items:center;gap:18px;padding:24px;display:flex;position:absolute;inset:0}.start-icon{opacity:.55;font-size:42px}.start-title{font-size:22px;font-weight:800}.start-text{color:var(--muted);max-width:420px;font-size:13px;line-height:1.7}.start-btn{letter-spacing:2px;text-transform:uppercase;color:var(--accent);border:1px solid var(--accent);cursor:pointer;background:0 0;border-radius:9px;padding:13px 30px;font-size:13px;font-weight:800;transition:all .2s}.start-btn:hover{background:var(--accent);color:var(--bg);box-shadow:0 0 24px var(--glow)}.swipe-flash{color:var(--accent3);opacity:0;pointer-events:none;z-index:30;text-shadow:0 0 36px var(--accent3);font-size:70px;font-weight:900;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.swipe-flash.fire{animation:.55s swipeFlash}@keyframes swipeFlash{0%{opacity:0;transform:translate(-50%,-50%)scale(.5)}40%{opacity:1;transform:translate(-50%,-50%)scale(1.1)}to{opacity:0;transform:translate(-50%,-50%)scale(1.35)}}.hidden-video{display:none}@media (max-width:1120px){.app-shell{grid-template-columns:240px minmax(0,1fr)}.right-sidebar{display:none}}@media (max-width:760px){.app-shell{grid-template-rows:auto 1fr auto;grid-template-columns:1fr}.header{flex-wrap:wrap;align-items:flex-start;gap:8px;min-height:70px;padding:10px 12px}.brand{min-width:160px}.status-pill{order:3}.mode-tabs{flex-wrap:nowrap;order:4;width:100%;padding-bottom:2px;overflow-x:auto}.header-metrics{order:2;margin-left:0}.left-sidebar{display:none}.main-panel{min-height:0}.skeleton-pip{width:150px;height:112px;bottom:86px;left:10px}.toolbar{justify-content:flex-start;bottom:10px;left:10px;right:10px;overflow-x:auto;transform:none}.canvas-hud{top:10px;right:10px}}.app-shell{background:linear-gradient(135deg, #8b7dff2e, #5fffd014 34%, #ff7da61f), var(--border)}.header{border-bottom:1px solid #ffffff0d;box-shadow:0 18px 44px #0000003d}.brand img{background:linear-gradient(135deg,#ffffff14,#ffffff05);border:1px solid #ffffff24}.brand-title{background:linear-gradient(120deg, var(--text), var(--accent), var(--accent3));color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}.main-panel{background:radial-gradient(circle at 24% 18%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 28%), radial-gradient(circle at 78% 76%, color-mix(in srgb, var(--accent2) 16%, transparent), transparent 32%), linear-gradient(145deg, #0a0a12f5, #06060cfa)}.brand-watermark{z-index:1;pointer-events:none;letter-spacing:-.08em;color:#ffffff07;text-shadow:0 0 42px color-mix(in srgb, var(--accent) 16%, transparent);writing-mode:horizontal-tb;font-size:clamp(46px,9vw,128px);font-weight:900;position:absolute;bottom:104px;right:28px}.panel-label{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#0a0a1285;border:1px solid #ffffff0f;border-radius:999px;padding:7px 10px}.mode-badge{box-shadow:0 0 26px color-mix(in srgb, var(--accent) 18%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.sidebar{border-right:1px solid #ffffff0a}.right-sidebar{border-left:1px solid #ffffff0a;border-right:0}.gesture-card,.stat-card,.current-card,.event-log{background:linear-gradient(#ffffff0b,#ffffff05);box-shadow:inset 0 1px #ffffff0a}.gesture-card.active,.tool-btn.active-tool,.mode-tab.active{box-shadow:0 0 28px color-mix(in srgb, var(--accent) 22%, transparent)}.control-dock{z-index:18;background:linear-gradient(180deg, #12121edb, #0a0a12c2), color-mix(in srgb, var(--accent) 8%, transparent);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid #ffffff14;border-radius:18px;width:272px;padding:14px;position:absolute;top:58px;right:16px;box-shadow:0 18px 54px #0000005c,inset 0 0 0 1px #ffffff08}.dock-header{justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:13px;display:flex}.dock-title{letter-spacing:.2px;font-size:13px;font-weight:850}.dock-subtitle,.dock-label{color:var(--muted2);text-transform:uppercase;letter-spacing:1.4px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.dock-chip{color:var(--accent3);border:1px solid color-mix(in srgb, var(--accent3) 36%, transparent);background:color-mix(in srgb, var(--accent3) 10%, transparent);border-radius:999px;padding:4px 7px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:9px}.dock-section{border-top:1px solid #ffffff0f;margin-top:11px;padding-top:11px}.theme-switcher{grid-template-columns:repeat(3,1fr);gap:6px;margin-top:8px;display:grid}.theme-btn,.segmented button{color:var(--muted);cursor:pointer;background:#ffffff06;border:1px solid #ffffff14;border-radius:10px;transition:all .18s}.theme-btn{flex-direction:column;justify-content:center;align-items:center;gap:5px;min-height:42px;font-size:10px;display:flex}.theme-dot{border-radius:50%;width:14px;height:14px;box-shadow:0 0 18px}.theme-btn.active,.segmented button.active{color:var(--text);border-color:color-mix(in srgb, var(--accent) 60%, transparent);background:color-mix(in srgb, var(--accent) 15%, transparent)}.segmented{grid-template-columns:1fr;gap:6px;margin-top:8px;display:grid}.segmented button{text-align:left;padding:8px 10px;font-size:11px}.dock-grid{gap:8px;display:grid}.toggle-row{color:var(--muted);justify-content:space-between;align-items:center;gap:12px;font-size:11px;display:flex}.toggle-row input{accent-color:var(--accent)}.dock-range{width:100%;accent-color:var(--accent);margin-top:8px}.start-overlay{background:radial-gradient(circle at 50% 36%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%), #06060ae0}.start-title{background:linear-gradient(120deg, var(--text), var(--accent), var(--accent3));color:#0000;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text}@media (max-width:1120px){.control-dock{width:246px}}@media (max-width:760px){.brand-watermark{font-size:54px;bottom:148px;right:14px}.control-dock{width:auto;max-height:190px;padding:10px;inset:auto 10px 76px;overflow:auto}.dock-header{margin-bottom:8px}.dock-section{margin-top:8px;padding-top:8px}.theme-switcher{grid-template-columns:repeat(3,minmax(0,1fr))}.segmented{grid-template-columns:repeat(3,1fr)}.segmented button{text-align:center;padding:7px 4px;font-size:10px}}