:root{--bg:#07111f;--panel:#0d1b2d;--panel-2:#10243b;--line:#223c5b;--muted:#8ca3bd;--text:#f5f8fc;--blue:#2563eb;--blue-2:#60a5fa;--green:#22c55e;--red:#ef4444;--amber:#f59e0b;--canvas:#f8fafc}*{box-sizing:border-box}html{background:var(--bg)}body{min-width:320px;color:var(--text);background:radial-gradient(circle at 20% -10%,#2563eb2e,#0000 32rem),linear-gradient(#07111f 0%,#050b14 100%);margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button,input{font:inherit}button{color:inherit}.app-shell{min-height:100vh;padding:18px}.topbar{grid-template-columns:minmax(260px,.9fr) minmax(520px,1.7fr) minmax(230px,.7fr);gap:14px;max-width:1800px;margin:0 auto 14px;display:grid}.brand-block,.active-summary,.system-status,.panel,.mode-tabs button,.canvas-card,.bottom-actions{background:linear-gradient(#0f1f34f5,#081423f5);border:1px solid #60a5fa40;box-shadow:0 16px 40px #0000002e}.brand-block{border-radius:15px;align-items:center;gap:13px;padding:16px 18px;display:flex}.brand-mark{background:linear-gradient(145deg,#3b82f6,#1d4ed8);border-radius:15px;place-items:center;width:52px;height:52px;font-size:20px;font-weight:900;display:grid;box-shadow:0 0 28px #2563eb5c}.brand-block h1{letter-spacing:-.04em;margin:0 0 5px;font-size:clamp(19px,1.6vw,27px)}.brand-block p{color:var(--muted);margin:0;font-size:13px}.brand-block p strong{color:#cbdcf1;font-weight:650}.active-summary{border-radius:15px;padding:12px 17px}.summary-label,.panel-heading>span,.context-message>span,.privacy-panel>span{color:var(--blue-2);letter-spacing:.1em;font-size:11px;font-weight:800}.summary-grid{grid-template-columns:.8fr .9fr .75fr 1.4fr;gap:10px;margin-top:6px;display:grid}.summary-grid>div{border-right:1px solid #8ca3bd2e;min-width:0;padding-right:10px}.summary-grid>div:last-child{border-right:0}.summary-grid small,.system-status small{color:var(--muted);text-transform:uppercase;letter-spacing:.06em;font-size:10px;display:block}.summary-grid strong{white-space:nowrap;text-overflow:ellipsis;margin-top:2px;font-size:14px;display:block;overflow:hidden}.active-summary>p{color:#c7d7ea;margin:8px 0 0;font-size:12px}.gesture-no-hand{color:#fca5a5}.gesture-hover{color:#93c5fd}.gesture-pinch,.gesture-drawing{color:#86efac}.system-status{border-radius:15px;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:9px;padding:15px;display:grid}.system-status strong{margin-top:2px;font-size:13px;display:block}.status-dot{background:#64748b;border-radius:50%;flex:none;width:10px;height:10px;box-shadow:0 0 0 4px #64748b1a}.status-dot.online{background:var(--green);box-shadow:0 0 12px #22c55eb3}.mode-tabs{grid-template-columns:repeat(3,1fr);gap:10px;max-width:1800px;margin:0 auto 12px;display:grid}.mode-tabs button{cursor:pointer;border-radius:14px;justify-content:center;align-items:center;gap:12px;min-height:68px;padding:12px 18px;transition:all .18s;display:flex}.mode-tabs button:hover,.mode-tabs button.active{border-color:#3b82f6;transform:translateY(-1px)}.mode-tabs button.active{background:linear-gradient(135deg,#2563ebd1,#1d4ed894);box-shadow:0 10px 28px #2563eb38}.mode-tabs button>span{font-size:24px}.mode-tabs strong,.mode-tabs small{text-align:left;display:block}.mode-tabs strong{font-size:14px}.mode-tabs small{color:#aebed1;margin-top:2px;font-size:11px}.mode-tabs .active small{color:#dbeafe}.workspace{grid-template-columns:230px minmax(560px,1fr) 310px;gap:12px;max-width:1800px;margin:0 auto;display:grid;position:relative}.panel{border-radius:15px}.tool-panel{min-height:700px;padding:15px}.panel-heading{justify-content:space-between;align-items:center;gap:8px;margin-bottom:11px;display:flex}.panel-heading small{color:var(--muted);font-size:10px}.tool-button{cursor:pointer;text-align:left;background:#142b46a6;border:1px solid #0000;border-radius:11px;align-items:center;gap:10px;width:100%;min-height:60px;margin-bottom:7px;padding:10px 12px;transition:all .15s;display:flex}.tool-button:hover,.tool-button.active{background:#2563eb40;border-color:#3b82f6}.tool-button>span{text-align:center;width:30px;font-size:22px}.tool-button strong,.tool-button small{display:block}.tool-button strong{font-size:13px}.tool-button small{color:#90a4bd;margin-top:3px;font-size:9px;line-height:1.3}.divider{background:#8ca3bd29;height:1px;margin:15px 0}.color-grid{grid-template-columns:repeat(6,1fr);gap:6px;display:grid}.color-grid button{aspect-ratio:1;cursor:pointer;border:2px solid #ffffff2e;border-radius:50%;transition:all .15s}.color-grid button.selected{outline-offset:3px;outline:2px solid #fff;transform:scale(.88)}.custom-color{color:var(--muted);justify-content:space-between;align-items:center;margin-top:12px;font-size:11px;display:flex}.custom-color input{cursor:pointer;background:0 0;border:0;width:36px;height:30px;padding:0}.size-grid{grid-template-columns:repeat(4,1fr);gap:7px;display:grid}.size-grid button,.action-grid button,.bottom-actions button{cursor:pointer;background:#142b46a3;border:1px solid #8ca3bd33;border-radius:10px;transition:all .15s}.size-grid button{height:38px;font-size:12px}.size-grid button.active,.size-grid button:hover{background:#2563eb4d;border-color:#3b82f6}.action-grid{grid-template-columns:repeat(3,1fr);gap:7px;display:grid}.action-grid button{min-height:52px;font-size:19px}.action-grid button small{color:var(--muted);margin-top:2px;font-size:9px;display:block}.action-grid button:hover{border-color:#60a5fa}.action-grid button.danger:hover{border-color:#f87171}.canvas-column{min-width:0}.canvas-card{border-radius:17px;flex-direction:column;min-height:700px;transition:box-shadow .18s,border-color .18s;display:flex;overflow:hidden}.canvas-card.cursor-inside{border-color:#60a5fad1;box-shadow:0 0 0 3px #2563eb1f,0 18px 48px #00000042}.canvas-header{color:#0f172a;background:linear-gradient(#f8fafc,#edf4fb);border-bottom:1px solid #d8e2ed;justify-content:space-between;align-items:center;gap:12px;min-height:66px;padding:12px 18px;display:flex}.canvas-header span,.canvas-header strong{display:block}.canvas-header span{color:#2563eb;letter-spacing:.09em;font-size:10px;font-weight:800}.canvas-header strong{margin-top:3px;font-size:17px}.canvas-live-status{white-space:nowrap;text-overflow:ellipsis;color:#475569;align-items:center;gap:8px;max-width:55%;font-size:11px;display:flex;overflow:hidden}.canvas-stack{background:var(--canvas);flex:1;min-height:540px;position:relative}.drawing-canvas,.guide-canvas{width:100%;height:100%;position:absolute;inset:0}.drawing-canvas{z-index:1;background:#fff}.guide-canvas{z-index:2;pointer-events:none}.canvas-empty-state{z-index:3;text-align:center;color:#0f172a;background:radial-gradient(circle,#eff6ffeb,#fffffffa);place-content:center;justify-items:center;padding:30px;display:grid;position:absolute;inset:0}.hand-illustration{color:#1d4ed8;background:#dbeafe;border-radius:50%;place-items:center;width:70px;height:70px;margin-bottom:12px;font-size:34px;display:grid}.canvas-empty-state h2{margin:0 0 8px;font-size:22px}.canvas-empty-state p{color:#64748b;max-width:470px;margin:0;font-size:13px;line-height:1.55}.canvas-empty-state button{color:#fff;cursor:pointer;background:#2563eb;border:0;border-radius:11px;margin-top:20px;padding:12px 20px;font-weight:750}.canvas-empty-state button:disabled{opacity:.55;cursor:wait}.canvas-empty-state small{color:#b91c1c;margin-top:12px}.canvas-footer{color:#0f172a;background:#f1f5f9;border-top:1px solid #dbe4ee;grid-template-columns:repeat(4,1fr);min-height:74px;padding:10px 14px;display:grid}.canvas-footer>div{border-right:1px solid #d6dee8;grid-template-columns:auto 1fr;align-content:center;column-gap:8px;padding:0 10px;display:grid}.canvas-footer>div:last-child{border-right:0}.gesture-icon{grid-row:1/3;align-self:center;font-size:22px}.canvas-footer strong,.canvas-footer small{display:block}.canvas-footer strong{font-size:10px}.canvas-footer small{color:#64748b;margin-top:2px;font-size:9px}.bottom-actions{border-radius:14px;align-items:center;gap:9px;min-height:72px;margin-top:10px;padding:10px 12px;display:flex}.context-message{flex:1;min-width:0}.context-message span,.context-message strong{display:block}.context-message strong{color:#dbeafe;white-space:nowrap;text-overflow:ellipsis;margin-top:4px;font-size:12px;overflow:hidden}.bottom-actions button{min-height:46px;padding:0 15px;font-size:11px;font-weight:700}.bottom-actions button:hover{border-color:#60a5fa}.bottom-actions .primary-action{background:#2563eb;border-color:#3b82f6;min-width:126px}.camera-column{flex-direction:column;gap:10px;display:flex}.camera-panel{padding:14px}.camera-frame{aspect-ratio:4/3;background:#020617;border:1px solid #60a5fa4d;border-radius:12px;position:relative;overflow:hidden}.camera-frame video,.camera-frame canvas{object-fit:cover;width:100%;height:100%;position:absolute;inset:0;transform:scaleX(-1)}.camera-frame canvas{pointer-events:none}.camera-placeholder{color:#71839a;background:linear-gradient(135deg,#0b1728,#07101c);place-items:center;font-size:12px;display:grid;position:absolute;inset:0}.camera-caption{align-items:center;gap:10px;margin-top:11px;display:flex}.camera-caption strong,.camera-caption small{display:block}.camera-caption strong{font-size:11px}.camera-caption small{color:var(--muted);margin-top:3px;font-size:9px}.clarity-panel{padding:14px}.clarity-panel ol{gap:10px;margin:0;padding:0;list-style:none;display:grid}.clarity-panel li{counter-increment:steps;grid-template-columns:20px 1fr;column-gap:8px;display:grid}.clarity-panel li:before{content:counter(steps);color:#93c5fd;background:#2563eb40;border-radius:6px;place-items:center;width:19px;height:19px;font-size:9px;font-weight:800;display:grid}.clarity-panel li strong,.clarity-panel li span{grid-column:2;display:block}.clarity-panel li strong{font-size:10px}.clarity-panel li span{color:var(--muted);margin-top:2px;font-size:9px;line-height:1.4}.privacy-panel{margin-top:auto;padding:15px}.privacy-panel strong{margin-top:6px;font-size:12px;display:block}.privacy-panel p{color:var(--muted);margin:6px 0 0;font-size:9px;line-height:1.5}.gesture-cursor{z-index:9999;pointer-events:none;opacity:0;border:3px solid #2563eb;border-radius:50%;width:30px;height:30px;transition:width 80ms,height 80ms,background 80ms,opacity .15s;position:fixed;transform:translate(-50%,-50%);box-shadow:0 0 0 6px #2563eb24,0 0 24px #2563eb9e}.gesture-cursor span{background:0 0;border-radius:50%;position:absolute;inset:7px}.gesture-cursor.is-pinching{background:#2563eb;border-color:#fff;width:23px;height:23px;box-shadow:0 0 0 8px #2563eb33,0 0 30px #2563ebe6}footer{color:#62758e;text-align:center;max-width:1800px;margin:12px auto 0;font-size:10px}footer strong{color:#9bb0c9}@media (max-width:1280px){.topbar{grid-template-columns:1fr 1.6fr}.system-status{display:none}.workspace{grid-template-columns:210px minmax(500px,1fr) 270px}}@media (max-width:980px){.app-shell{padding:10px}.topbar{grid-template-columns:1fr}.active-summary{display:none}.mode-tabs{grid-template-columns:1fr}.mode-tabs button{justify-content:flex-start;min-height:54px}.workspace{grid-template-columns:1fr}.tool-panel{grid-template-columns:repeat(3,1fr);gap:8px;min-height:auto;display:grid}.tool-panel .panel-heading,.tool-panel .divider,.tool-panel .color-grid,.tool-panel .custom-color,.tool-panel .size-grid,.tool-panel .action-grid{grid-column:1/-1}.tool-button{margin:0}.camera-column{grid-template-columns:1fr 1fr;display:grid}.privacy-panel{margin-top:0}}@media (max-width:640px){.brand-block{padding:12px}.brand-mark{width:44px;height:44px}.tool-panel{grid-template-columns:1fr}.tool-panel>*{grid-column:1!important}.canvas-stack{min-height:430px}.canvas-footer{grid-template-columns:repeat(2,1fr)}.canvas-footer>div:nth-child(2){border-right:0}.camera-column{grid-template-columns:1fr}.bottom-actions{flex-wrap:wrap}.context-message{flex-basis:100%}}