*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background:#0a0a0a;color:#fff;min-height:100vh}#app{max-width:1600px;margin:0 auto;padding:20px}.header{text-align:center;margin-bottom:20px}.header h1{font-size:1.75rem;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.tagline{color:#666;font-size:14px;margin-top:4px}.mode-bar{display:flex;justify-content:center;gap:4px;margin-bottom:24px;background:#141414;padding:6px;border-radius:12px;width:fit-content;margin-left:auto;margin-right:auto}.mode-btn{display:flex;align-items:center;gap:8px;padding:10px 20px;border:none;background:transparent;color:#555;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s}.mode-btn:hover:not(:disabled){color:#888;background:#1a1a1a}.mode-btn:disabled{cursor:not-allowed;opacity:.5}.mode-btn.active{background:#667eea;color:#fff}.mode-num{width:20px;height:20px;border-radius:50%;background:#fff3;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600}.mode-btn.active .mode-num{background:#ffffff4d}.source-section{max-width:800px;margin:0 auto;padding:40px 20px}.source-section h2{text-align:center;font-size:1.5rem;margin-bottom:32px;font-weight:500}.source-options{display:flex;gap:24px;align-items:stretch}.source-option{flex:1}.source-divider{display:flex;align-items:center;color:#444;font-size:14px}.upload-box,.url-box{height:100%;min-height:240px;border:2px dashed #2a2a2a;border-radius:16px;padding:32px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;transition:all .2s}.upload-box{position:relative;cursor:pointer}.upload-box:hover,.url-box:hover{border-color:#667eea;background:#667eea0d}.upload-box input{position:absolute;inset:0;opacity:0;cursor:pointer}.upload-box svg,.url-box svg{color:#444}.upload-box p,.url-box p{font-size:16px;font-weight:500}.hint{color:#555;font-size:13px}.url-input-wrapper{display:flex;gap:8px;width:100%;max-width:300px}.url-input-wrapper input{flex:1;padding:10px 14px;background:#0a0a0a;border:1px solid #333;border-radius:8px;color:#fff;font-size:14px}.url-input-wrapper input:focus{outline:none;border-color:#667eea}.canvas-section{display:flex;flex-direction:column;gap:16px}.toolbar{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#141414;border-radius:10px}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:12px}.step-count{color:#666;font-size:14px}.step-count strong{color:#667eea}.toolbar-btn{padding:8px 14px;background:#1f1f1f;border:1px solid #2a2a2a;border-radius:6px;color:#999;cursor:pointer;font-size:13px;transition:all .2s}.toolbar-btn:hover{background:#2a2a2a;color:#fff;border-color:#333}.btn-primary{padding:10px 18px;background:#667eea;border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;font-size:14px;transition:all .2s}.btn-primary:hover{background:#5a6fd6}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-record{display:flex;align-items:center;gap:8px;padding:10px 20px;background:#dc2626;border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;font-size:14px;transition:all .2s}.btn-record:hover:not(:disabled){background:#b91c1c}.btn-record:disabled{opacity:.4;cursor:not-allowed}.record-dot{width:10px;height:10px;background:#fff;border-radius:50%}.btn-danger{padding:10px 16px;background:transparent;border:1px solid #dc2626;border-radius:6px;color:#dc2626;cursor:pointer;font-size:14px;transition:all .2s}.btn-danger:hover{background:#dc2626;color:#fff}.btn-stop{padding:10px 20px;background:#dc2626;border:none;border-radius:8px;color:#fff;font-weight:500;cursor:pointer;font-size:14px}.workspace{display:flex;gap:20px}.canvas-container{flex:1;position:relative;background:#141414;border-radius:12px;overflow:hidden;cursor:crosshair}.canvas-container img{display:block;width:100%;height:auto}#url-frame{width:100%;height:600px;border:none}.hotspots-layer{position:absolute;inset:0;pointer-events:none}.steps-sidebar{width:280px;background:#141414;border-radius:12px;padding:16px;display:flex;flex-direction:column;max-height:600px}.steps-header{margin-bottom:16px}.steps-header h3{font-size:14px;font-weight:600;color:#999;text-transform:uppercase;letter-spacing:.5px}.steps-hint{font-size:12px;color:#555}.steps-container{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}.step-item{display:flex;align-items:center;gap:12px;padding:12px;background:#1a1a1a;border-radius:8px;cursor:pointer;transition:all .2s;border:1px solid transparent}.step-item:hover{background:#222}.step-item.active{background:#667eea26;border-color:#667eea}.step-num{width:28px;height:28px;background:#f59e0b;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#000;flex-shrink:0}.step-text{flex:1;font-size:13px;color:#ccc;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.step-text.empty{color:#555;font-style:italic}.hotspot{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;z-index:10}.hotspot-marker{width:32px;height:32px;background:#f59e0b;border:3px solid #fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#000;box-shadow:0 2px 8px #0000004d;transition:transform .15s}.hotspot:hover .hotspot-marker{transform:scale(1.1)}.hotspot.active .hotspot-marker{background:#667eea;transform:scale(1.15)}.hotspot-arrow{position:absolute;bottom:100%;left:50%;transform:translate(-50%);width:3px;height:24px;background:#f59e0b;margin-bottom:4px}.hotspot-arrow:before{content:"";position:absolute;top:-6px;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:8px solid #f59e0b}.step-editor{position:fixed;bottom:24px;right:24px;width:320px;background:#1a1a1a;border:1px solid #2a2a2a;border-radius:12px;padding:16px;z-index:100;box-shadow:0 8px 32px #0006}.editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.editor-header h3{color:#667eea;font-size:16px}.close-btn{width:28px;height:28px;background:#2a2a2a;border:none;border-radius:6px;color:#888;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;transition:all .2s}.close-btn:hover{background:#333;color:#fff}.step-editor textarea{width:100%;height:80px;background:#0f0f0f;border:1px solid #2a2a2a;border-radius:8px;padding:12px;color:#fff;font-size:14px;resize:none;font-family:inherit}.step-editor textarea:focus{outline:none;border-color:#667eea}.editor-actions{display:flex;gap:8px;margin-top:12px;justify-content:flex-end}.record-overlay{position:fixed;inset:0;background:#000;z-index:1000;display:flex;flex-direction:column}.record-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:#141414f2;border-bottom:1px solid #222}.record-status{display:flex;align-items:center;gap:10px}.recording-indicator{width:12px;height:12px;background:#dc2626;border-radius:50%;animation:pulse 1s infinite}.recording-indicator.paused{animation:none;background:#666}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}#record-time{font-family:monospace;font-size:16px;color:#fff}.record-nav{display:flex;align-items:center;gap:16px}.nav-btn{padding:8px 16px;background:#2a2a2a;border:none;border-radius:6px;color:#fff;font-size:16px;cursor:pointer;transition:all .2s}.nav-btn:hover:not(:disabled){background:#3a3a3a}.nav-btn:disabled{opacity:.3;cursor:not-allowed}.step-indicator{color:#888;font-size:14px}.record-canvas{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#0a0a0a}.record-canvas img{max-width:100%;max-height:100%;object-fit:contain}.spotlight{position:absolute;border:3px solid #f59e0b;border-radius:8px;box-shadow:0 0 0 9999px #000000bf;transition:all .4s cubic-bezier(.4,0,.2,1);pointer-events:none}.description-box{position:absolute;background:#fff;color:#000;padding:14px 18px;border-radius:10px;max-width:280px;box-shadow:0 4px 20px #0000004d;transition:all .4s cubic-bezier(.4,0,.2,1);z-index:20}.description-arrow{position:absolute;width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #fff;top:-10px;left:20px}.description-content{display:flex;gap:10px;align-items:flex-start}.description-step-num{width:24px;height:24px;background:#f59e0b;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;flex-shrink:0}#record-description-text{font-size:15px;line-height:1.4}.webcam-bubble{position:fixed;bottom:80px;right:32px;width:180px;height:180px;border-radius:50%;overflow:hidden;border:4px solid #667eea;box-shadow:0 8px 32px #00000080;cursor:move;z-index:1001;background:#000}.webcam-bubble video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.webcam-resize-handle{position:absolute;bottom:4px;right:4px;width:16px;height:16px;background:#ffffff4d;border-radius:4px;cursor:nwse-resize}.replay-overlay{position:fixed;inset:0;background:#000000f2;z-index:1000;display:flex;flex-direction:column}.replay-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;border-bottom:1px solid #222}.replay-header h3{font-size:18px}.replay-actions{display:flex;gap:12px}.replay-content{flex:1;display:flex;align-items:center;justify-content:center;padding:24px}.replay-content video{max-width:100%;max-height:100%;border-radius:12px;background:#000}.hidden{display:none!important}