:root{--bg-glass: rgba(13, 18, 30, .76);--border-glass: rgba(148, 163, 184, .22);--accent-cyan: #38bdf8;--accent-amber: #fbbf24;--accent-emerald: #34d399;--accent-rose: #fb7185;--accent-violet: #a78bfa;--text-main: #f8fafc;--text-muted: #94a3b8}*{box-sizing:border-box;margin:0;padding:0;-webkit-user-select:none;user-select:none}html,body,#app{width:100vw;height:100vh;overflow:hidden;background:#090d16;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Inter,sans-serif;color:var(--text-main)}#webcam{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);filter:brightness(.72) contrast(1.05);transition:opacity .35s ease;z-index:1}body.board-mode #webcam{opacity:.08}#three-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:2;pointer-events:auto}#labels-container{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;pointer-events:none;overflow:hidden}.vertex-label{position:absolute;transform:translate(-50%,-50%);padding:2px 7px;border-radius:6px;font-family:Times New Roman,Georgia,serif;font-style:italic;font-weight:700;font-size:19px;color:#fff;background:#0f172ab8;border:1px solid rgba(255,255,255,.25);text-shadow:0 2px 6px rgba(0,0,0,.9);transition:transform .12s ease,background .15s ease,border-color .15s ease;white-space:nowrap}.vertex-label.midpoint{font-size:15px;color:#bae6fd;background:#0f172aa6;border-color:#38bdf866}.vertex-label.snapped{transform:translate(-50%,-50%) scale(1.22);background:#0e7490eb;border-color:#38bdf8;box-shadow:0 0 14px #38bdf8bf}.vertex-label.focused{background:#d97706f2;border-color:#fde68a;color:#fffbeb;box-shadow:0 0 16px #fbbf24d9}#hud-canvas{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;z-index:4;pointer-events:none}.top-bar{position:absolute;top:14px;left:16px;right:16px;z-index:10;display:flex;align-items:center;justify-content:space-between;gap:16px;pointer-events:none}.brand{display:flex;align-items:center;gap:12px;padding:8px 16px;background:var(--bg-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border-glass);border-radius:11px;pointer-events:auto}.brand .navbar-brand-link{text-decoration:none;display:inline-flex;align-items:center}.brand .navbar-brand-link h2{font-size:16px;font-weight:800;letter-spacing:-.3px;color:#fff;transition:opacity .2s ease}.brand .navbar-brand-link:hover h2{opacity:.85}.brand-divider{width:1px;height:18px;background:#ffffff29}.brand-badge{background:linear-gradient(135deg,#0284c7,#6366f1);color:#fff;font-weight:800;font-size:11px;padding:4px 8px;border-radius:6px;letter-spacing:.5px;display:inline-flex;align-items:center;gap:5px}.brand h1{font-size:15px;font-weight:700}.brand p{font-size:11px;color:var(--text-muted)}.gesture-pill{display:flex;align-items:center;gap:12px;padding:9px 18px;border-radius:999px;background:var(--bg-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1.5px solid var(--border-glass);box-shadow:0 8px 24px #00000059;transition:all .2s ease;pointer-events:auto}.status-dot{width:12px;height:12px;border-radius:50%;background:#64748b;box-shadow:0 0 10px currentColor}.gesture-pill.state-idle{border-color:#94a3b866}.gesture-pill.state-idle .status-dot{background:#94a3b8}.gesture-pill.state-point{border-color:var(--accent-cyan);background:#082f49d1}.gesture-pill.state-point .status-dot{background:var(--accent-cyan)}.gesture-pill.state-pinch{border-color:var(--accent-amber);background:#451a03db;transform:scale(1.04)}.gesture-pill.state-pinch .status-dot{background:var(--accent-amber)}.gesture-pill.state-rotate{border-color:var(--accent-violet);background:#2e1065d6}.gesture-pill.state-rotate .status-dot{background:var(--accent-violet)}.gesture-pill.state-zoom{border-color:var(--accent-emerald);background:#064e3bd6}.gesture-pill.state-zoom .status-dot{background:var(--accent-emerald)}.gesture-text{display:flex;flex-direction:column}.gesture-text strong{font-size:13px;letter-spacing:.3px}.gesture-text span{font-size:11px;color:#cbd5e1}.snap-info{padding:9px 15px;background:var(--bg-glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--border-glass);border-radius:11px;font-size:13px;min-width:210px;text-align:right;pointer-events:auto}.snap-label{color:var(--text-muted);margin-right:4px}#snap-target-name{color:var(--accent-cyan)}.left-panel{position:absolute;top:78px;left:16px;width:270px;z-index:10;display:flex;flex-direction:column;gap:12px}.panel-section{background:var(--bg-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border-glass);border-radius:11px;padding:12px}.section-title{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--text-muted);margin-bottom:8px}.btn-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tool-btn{display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 6px;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:#1e293ba6;color:var(--text-main);font-size:12px;font-weight:600;cursor:pointer;transition:all .15s ease}.tool-btn .icon{font-size:15px;color:var(--accent-cyan)}.tool-btn:hover{background:#334155d9}.tool-btn.active{background:#0284c759;border-color:var(--accent-cyan);box-shadow:inset 0 0 10px #38bdf840}.mode-list{display:flex;flex-direction:column;gap:7px}.mode-btn{text-align:left;padding:9px 10px;border-radius:7px;border:1px solid rgba(255,255,255,.1);background:#1e293b99;color:var(--text-main);cursor:pointer;transition:all .15s ease}.mode-header{display:flex;align-items:center;gap:7px;font-size:12.5px;margin-bottom:3px}.mode-dot{width:8px;height:8px;border-radius:50%;background:#64748b}.mode-btn small{display:block;font-size:11px;color:var(--text-muted);line-height:1.35}.mode-btn.active{background:#d9770638;border-color:var(--accent-amber)}.mode-btn.active .mode-dot{background:var(--accent-amber);box-shadow:0 0 8px var(--accent-amber)}.toggle-list{display:flex;flex-direction:column;gap:7px;margin-bottom:10px}.toggle-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#e2e8f0;cursor:pointer}.toggle-row input{accent-color:var(--accent-cyan);width:15px;height:15px}.action-row{display:flex;gap:7px}.action-btn{flex:1;padding:8px;border-radius:6px;font-size:11.5px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s ease}.action-btn.primary{background:#0284c7d9;color:#fff}.action-btn.primary:hover{background:#0284c7}.action-btn.secondary{background:#334155cc;color:#e2e8f0;border-color:#ffffff1f}.action-btn.secondary:hover{background:#475569f2}.right-guide{position:absolute;top:78px;right:16px;width:265px;z-index:10;background:var(--bg-glass);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--border-glass);border-radius:11px;padding:12px;display:flex;flex-direction:column;gap:10px}.guide-title{font-size:10.5px;font-weight:700;letter-spacing:.8px;color:var(--text-muted)}.gesture-list{list-style:none;display:flex;flex-direction:column;gap:7px}.gesture-list li{padding:7px 9px;border-radius:7px;background:#1e293b80;border:1px solid rgba(255,255,255,.07);transition:all .18s ease}.gesture-list li.active{background:#0e749059;border-color:var(--accent-cyan);transform:translate(-3px)}.g-badge{display:inline-block;font-size:11px;font-weight:700;color:var(--accent-cyan);margin-bottom:2px}.gesture-list li strong{display:block;font-size:12px}.gesture-list li p{font-size:11px;color:var(--text-muted);line-height:1.3}.Focused-summary{border-top:1px solid rgba(255,255,255,.1);padding-top:9px}.summary-header{font-size:10.5px;font-weight:700;color:var(--accent-amber);margin-bottom:6px}.tags-wrap{display:flex;flex-wrap:wrap;gap:5px}.focus-tag{font-size:11px;font-weight:600;padding:3px 8px;border-radius:5px;background:#d9770647;border:1px solid rgba(251,191,36,.6);color:#fef3c7}.empty-tag{font-size:11px;color:var(--text-muted);font-style:italic}