@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap";:root{color-scheme:dark}html,body,#root{margin:0;padding:0;height:100%;width:100%}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;width:100%;overflow:hidden}body{font-family:Inter,system-ui,-apple-system,sans-serif;background:#08090e;color:#c8cdd8;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.app-shell{display:flex;flex-direction:column;height:100vh;width:100vw;overflow:hidden;position:fixed;inset:0}.topbar{display:flex;align-items:center;justify-content:space-between;padding:0 24px;height:52px;flex-shrink:0;background:#ffffff06;border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:20}.topbar-brand{display:flex;align-items:center;gap:10px}.topbar-logo{width:26px;height:26px;border-radius:7px;background:linear-gradient(135deg,#00e87b,#00b4f0);display:flex;align-items:center;justify-content:center;font-size:13px;color:#08090e;font-weight:800}.topbar-name{font-size:15px;font-weight:700;letter-spacing:-.3px;color:#edf0f5}.topbar-right{display:flex;align-items:center;gap:16px}.status-badge{display:flex;align-items:center;gap:7px;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.4px;text-transform:uppercase;border:1px solid rgba(255,255,255,.06);background:#ffffff08;transition:all .3s ease}.status-dot{width:7px;height:7px;border-radius:50%;transition:background .3s ease,box-shadow .3s ease}.status-badge[data-status=idle] .status-dot{background:#5a6070;box-shadow:0 0 6px #5a607066}.status-badge[data-status=drawing] .status-dot{background:#00e87b;box-shadow:0 0 8px #00e87b80}.status-badge[data-status=erasing] .status-dot{background:#f97316;box-shadow:0 0 8px #f9731680}.status-badge[data-status=shape] .status-dot{background:#a78bfa;box-shadow:0 0 8px #a78bfa80}.hand-toggle{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#c8cdd8;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.hand-toggle:hover{background:#ffffff1a;border-color:#fff3}.hand-toggle.is-left{color:#a78bfa;background:#a78bfa1a;border-color:#a78bfa33}.hand-toggle.is-right{color:#00e87b;background:#00e87b1a;border-color:#00e87b33}.hand-toggle svg{font-size:14px}.video-toggle{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:10px;background:#ffffff0d;border:1px solid rgba(255,255,255,.08);color:#c8cdd8;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease}.video-toggle:hover{background:#ffffff1a;border-color:#fff3}.video-toggle.is-on{color:#00b4f0;background:#00b4f01a;border-color:#00b4f033}.video-toggle.is-off{color:#ef4444;background:#ef44441a;border-color:#ef444433}.video-toggle svg{font-size:14px}.stage{position:relative;flex:1;width:100%;height:100%;overflow:hidden;background:#05060a}.stage-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9;transform:scaleX(-1);transition:opacity .4s ease}.stage-video[data-visible=false]{opacity:0}.stage-canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}.cursor-dot{position:absolute;border-radius:50%;border:2px solid #00ff88;transform:translate(-50%,-50%);pointer-events:none;z-index:5;transition:opacity .15s,width .1s ease-out,height .1s ease-out;box-shadow:0 0 15px #0f89,0 0 0 2px #ffffff80}.cursor-dot[data-tool=erase]{border-color:#f97316;background:#ffffff1a;box-shadow:0 0 15px #f9731699,0 0 0 2px #ffffff80}.cursor-dot[data-tool=idle]{border-color:transparent;background:transparent;box-shadow:none}.cursor-icon{opacity:0;display:flex;align-items:center;justify-content:center;transition:opacity .2s;pointer-events:none}.cursor-dot[data-tool=idle] .cursor-icon{opacity:1;color:#fff;font-size:30px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.5)) drop-shadow(0 0 1px rgba(0,0,0,.8));transform:translate(38%,38%) rotate(-10deg)}.cursor-dot[data-hidden=true]{opacity:0}.side-indicator{position:absolute;top:50%;transform:translateY(-50%);z-index:5;padding:20px 10px;pointer-events:none;opacity:.3}.left-side{left:80px}.right-side{right:20px}.side-label{font-size:12px;font-weight:800;color:#fff;writing-mode:vertical-rl;text-orientation:mixed;letter-spacing:4px;text-transform:uppercase;background:linear-gradient(to bottom,transparent,rgba(255,255,255,.1),transparent)}.toolbar{position:absolute;left:16px;top:50%;transform:translateY(-50%);z-index:15;display:flex;flex-direction:column;gap:4px;padding:8px;border-radius:16px;background:#0c0e16d1;border:1px solid rgba(255,255,255,.06);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:0 8px 32px #00000080,0 0 0 1px #ffffff08 inset}.toolbar-sep{width:28px;height:1px;margin:4px auto;background:#ffffff12}.tool-btn{position:relative;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:10px;border:none;background:transparent;color:#8891a5;font-size:17px;cursor:pointer;transition:all .2s ease}.tool-btn:hover{background:#ffffff0f;color:#cdd2dd}.tool-btn.active{background:#00e87b1f;color:#00e87b;box-shadow:inset 0 0 0 1px #00e87b33}.tool-btn.active-erase{background:#f973161f;color:#f97316;box-shadow:inset 0 0 0 1px #f9731633}.tool-btn.active-shape{background:#a78bfa1f;color:#a78bfa;box-shadow:inset 0 0 0 1px #a78bfa33}.tool-btn:disabled{opacity:.3;cursor:default;pointer-events:none}.tool-btn:after{content:attr(data-tip);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);padding:4px 10px;border-radius:6px;font-size:11px;font-weight:500;white-space:nowrap;background:#0c0e16eb;color:#cdd2dd;border:1px solid rgba(255,255,255,.08);opacity:0;pointer-events:none;transition:opacity .15s,transform .15s;transform:translateY(-50%) translate(-4px)}.tool-btn:hover:after{opacity:1;transform:translateY(-50%) translate(0)}.bottom-panel{display:flex;align-items:center;gap:28px;padding:0 24px;height:52px;flex-shrink:0;background:#ffffff06;border-top:1px solid rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);z-index:20}.panel-label{font-size:10px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;color:#5a6070;margin-right:4px}.panel-group{display:flex;align-items:center;gap:8px}.color-swatch{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:8px;border:2px solid rgba(255,255,255,.1);background:none;cursor:pointer;padding:2px;transition:border-color .2s,transform .15s}.color-swatch:hover{border-color:#ffffff4d;transform:scale(1.1)}.color-swatch::-webkit-color-swatch-wrapper{padding:0;border-radius:5px}.color-swatch::-webkit-color-swatch{border:none;border-radius:5px}.thickness-slider{-webkit-appearance:none;appearance:none;width:120px;height:4px;border-radius:999px;background:#ffffff1a;outline:none;cursor:pointer;transition:background .2s}.thickness-slider:hover{background:#ffffff2e}.thickness-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,#00e87b,#00b4f0);box-shadow:0 0 8px #00e87b66;cursor:pointer;transition:transform .15s}.thickness-slider::-webkit-slider-thumb:hover{transform:scale(1.3)}.thickness-value{font-size:12px;font-weight:600;min-width:24px;text-align:center;color:#8891a5;font-variant-numeric:tabular-nums}.gesture-guide{position:absolute;bottom:24px;left:50%;transform:translate(-50%);z-index:10;display:flex;align-items:center;gap:16px;padding:10px 24px;border-radius:24px;background:#0c0e16bf;border:1px solid rgba(255,255,255,.08);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);box-shadow:0 12px 40px #0006,0 0 0 1px #ffffff08 inset;pointer-events:none;animation:slide-up .6s cubic-bezier(.16,1,.3,1)}@keyframes slide-up{0%{opacity:0;transform:translate(-50%,20px)}to{opacity:1;transform:translate(-50%)}}.guide-item{display:flex;align-items:center;gap:8px;white-space:nowrap}.guide-icon{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:8px;background:#ffffff0d;color:#00e87b;font-size:14px;border:1px solid rgba(255,255,255,.05)}.guide-text{font-size:11px;font-weight:600;letter-spacing:.2px;color:#c8cdd8;opacity:.8}.guide-sep{width:1px;height:16px;background:#ffffff1a}.guide-item[data-tool=erase] .guide-icon{color:#f97316}.guide-item[data-tool=clear] .guide-icon{color:#ef4444}.guide-item[data-tool=shape] .guide-icon{color:#a78bfa}.guide-item[data-tool=thickness] .guide-icon{color:#00b4f0}@keyframes pulse-draw{0%,to{box-shadow:0 0 #00e87b4d}50%{box-shadow:0 0 0 6px #00e87b00}}.status-badge[data-status=drawing]{animation:pulse-draw 2s ease infinite}@keyframes pulse-erase{0%,to{box-shadow:0 0 #f973164d}50%{box-shadow:0 0 0 6px #f9731600}}.status-badge[data-status=erasing]{animation:pulse-erase 2s ease infinite}.thickness-overlay{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:30;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:12px;animation:overlay-pop .3s cubic-bezier(.34,1.56,.64,1)}@keyframes overlay-pop{0%{opacity:0;transform:translate(-50%,-40%) scale(.8)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}.overlay-badge{background:#0c0e16d9;border:1px solid rgba(255,255,255,.12);backdrop-filter:blur(32px);-webkit-backdrop-filter:blur(32px);padding:24px 40px;border-radius:32px;display:flex;flex-direction:column;align-items:center;min-width:160px;box-shadow:0 24px 64px #0009,0 0 0 1px #ffffff0d inset}.overlay-icon{font-size:28px;color:#00b4f0;margin-bottom:4px}.overlay-value{font-size:72px;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums;letter-spacing:-2px}.overlay-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:#5a6070;margin-top:8px}.overlay-visual-bar{width:120px;height:6px;background:#ffffff1a;border-radius:3px;margin-top:16px;overflow:hidden;position:relative}.overlay-badge[data-tool=erase] .overlay-icon{color:#f97316}.overlay-badge[data-tool=erase] .overlay-visual-fill{background:linear-gradient(90deg,#f97316,#fb923c)}.overlay-badge[data-tool=draw] .overlay-icon{color:#00b4f0}.overlay-badge[data-tool=draw] .overlay-visual-fill{background:linear-gradient(90deg,#00e87b,#00b4f0)}