*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,sans-serif;background:#f4f4f5;color:#18181b}#app{display:flex;flex-direction:column;height:100vh}header{padding:12px 20px;background:#fff;border-bottom:1px solid #e4e4e7;display:flex;align-items:center;gap:16px;flex-wrap:wrap}header h1{font-size:18px;margin:0}.controls{display:flex;align-items:center;gap:8px;margin-left:auto}select,button{font-size:14px;padding:6px 12px;border-radius:6px;border:1px solid #d4d4d8;background:#fff;cursor:pointer}#startBtn{background:#18181b;color:#fff;border-color:#18181b}#progress{font-size:13px;color:#71717a;min-width:80px}main{flex:1;position:relative}#canvas-container{width:100%;height:100%;position:relative}canvas{display:block;width:100%;height:100%;cursor:grab}canvas:active{cursor:grabbing}#svg-overlay{position:absolute;top:0;left:0;cursor:grab;pointer-events:none}#svg-overlay:active{cursor:grabbing}#empty-state{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;color:#71717a;background:#fafafa;pointer-events:none;z-index:10}footer{padding:16px;background:#fff;border-top:1px solid #e4e4e7;display:flex;justify-content:center;gap:24px}.thumb{font-size:18px;padding:14px 32px;border-radius:10px;font-weight:600;border:2px solid transparent}.thumb.up{background:#dcfce7;color:#166534}.thumb.up:hover:not(:disabled){border-color:#166534}.thumb.down{background:#fee2e2;color:#991b1b}.thumb.down:hover:not(:disabled){border-color:#991b1b}.thumb:disabled{opacity:.4;cursor:not-allowed}