:root{--bg-workspace:#f3f4f6;--bg-canvas:#fff;--bg-panel:#ffffffd9;--bg-panel-hover:#fffffff2;--border-color:#00000014;--border-color-active:var(--brand-color);--text-primary:#1f2937;--text-secondary:#4b5563;--text-muted:#9ca3af;--brand-color:#6b8f71;--brand-light:#eef5f0;--brand-dark:#435b47;--tour-color:#6b8f71;--color-danger:#ef4444;--color-success:#10b981;--color-warning:#f59e0b;--font-sans:"Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--shadow-sm:0 1px 2px 0 #0000000d;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--shadow-lg:0 10px 15px -3px #0000001a, 0 4px 6px -2px #0000000d;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;box-sizing:border-box}*,:before,:after{box-sizing:inherit}body{font-family:var(--font-sans);color:var(--text-primary);background-color:var(--bg-workspace);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;margin:0;overflow:hidden}#root{flex-direction:column;width:100vw;height:100vh;display:flex;overflow:hidden}.app-container{flex-direction:column;width:100%;height:100%;display:flex;position:relative}.top-bar{z-index:100;height:auto;box-shadow:none;pointer-events:none;background-color:#0000;border-bottom:none;justify-content:space-between;align-items:center;padding:0;display:flex;position:absolute;top:16px;left:16px;right:16px}.top-bar-left,.top-bar-center,.bottom-left-dock,.bottom-right-dock,.bottom-center-dock{pointer-events:auto;border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);background-color:#fff;align-items:center;gap:8px;height:44px;padding:6px 12px;display:flex}.top-bar-left{gap:12px}.top-bar-right{pointer-events:auto;align-items:center;gap:12px;height:44px;display:flex}:is(.top-bar-left:not(:has(*)),.top-bar-center:not(:has(*)),.top-bar-right:not(:has(*))){display:none}.app-logo{color:var(--brand-color);letter-spacing:-.5px;align-items:center;gap:6px;font-size:1.25rem;font-weight:700;display:flex}.floating-panel{background-color:var(--bg-panel);-webkit-backdrop-filter:blur(12px);border:1px solid var(--border-color);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);z-index:5;padding:8px;transition:background-color .2s,border-color .2s}.floating-panel:hover{background-color:var(--bg-panel-hover)}.toolbar-dock{flex-direction:column;gap:6px;display:flex;position:absolute;top:50%;left:16px;transform:translateY(-50%)}.properties-dock{flex-direction:column;gap:16px;width:240px;max-height:calc(100% - 120px);padding:16px;display:flex;position:absolute;top:50%;right:16px;overflow-y:auto;transform:translateY(-50%)}.panel-drag-handle{cursor:grab;color:var(--text-muted);border-bottom:1px solid var(--border-color);background-color:var(--bg-hover);touch-action:none;border-top-left-radius:12px;border-top-right-radius:12px;justify-content:center;align-items:center;margin:-16px -16px 0;padding:6px;display:flex}.panel-drag-handle:active{cursor:grabbing}.panel-section{flex-direction:column;gap:8px;display:flex}.panel-label{text-transform:uppercase;color:var(--text-secondary);letter-spacing:.5px;font-size:.75rem;font-weight:600}.btn{border-radius:var(--radius-md);border:1px solid var(--border-color);height:36px;color:var(--text-primary);cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#fff;justify-content:center;align-items:center;gap:8px;padding:0 14px;font-size:.875rem;font-weight:500;transition:all .2s;display:inline-flex}.btn:hover:not(:disabled){background-color:#f9fafb;border-color:#d1d5db}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background-color:var(--brand-color);color:#fff;border-color:var(--brand-color)}.btn-primary:hover:not(:disabled){background-color:var(--brand-dark);border-color:var(--brand-dark)}.btn-icon-only{width:36px;padding:0}.btn-tool{border-radius:var(--radius-md);color:var(--text-secondary);background-color:#0000;border-color:#0000}.btn-tool:hover{background-color:#0000000a}.btn-tool.active{background-color:var(--brand-light);color:var(--brand-color);font-weight:600}.color-grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.color-swatch{aspect-ratio:1;cursor:pointer;border:2px solid #0000;border-radius:50%;transition:transform .1s,border-color .1s;box-shadow:inset 0 0 0 1px #0000001a}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--brand-color);transform:scale(1.05)}.swatch-fill{background-image:linear-gradient(45deg,#ccc 25%,#0000 25%),linear-gradient(-45deg,#ccc 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#ccc 75%),linear-gradient(-45deg,#0000 75%,#ccc 75%);background-position:0 0,0 4px,4px -4px,-4px 0;background-size:8px 8px}.thickness-option{border-radius:var(--radius-sm);cursor:pointer;border:1px solid var(--border-color);background-color:#fff;justify-content:center;align-items:center;height:32px;display:flex}.thickness-option.active{border-color:var(--brand-color);background-color:var(--brand-light);color:var(--brand-color);font-weight:600}.thickness-indicator{background-color:currentColor;border-radius:9999px;width:80%}.font-select{border-radius:var(--radius-md);border:1px solid var(--border-color);height:36px;color:var(--text-primary);cursor:pointer;background-color:#fff;outline:none;width:100%;padding:0 8px;font-size:.875rem}.font-select:focus{border-color:var(--brand-color)}.slider-container{align-items:center;gap:12px;display:flex}.slider{appearance:none;cursor:pointer;background-color:#e5e7eb;border-radius:3px;outline:none;flex:1;height:6px}.slider::-webkit-slider-thumb{appearance:none;background-color:var(--brand-color);width:16px;height:16px;box-shadow:var(--shadow-sm);border:2px solid #fff;border-radius:50%;transition:transform .1s}.slider::-webkit-slider-thumb:hover{transform:scale(1.15)}.workspace-container{background-color:var(--bg-workspace);background-image:radial-gradient(#00000014 1.5px,#0000 1.5px);background-size:24px 24px;flex:1;justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.canvas-wrapper{box-shadow:var(--shadow-lg);transform-origin:0 0;background-color:#fff;border-radius:4px;transition:transform 50ms ease-out;position:absolute;top:0;left:0;overflow:visible}.workspace-debug-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#f8fafc;pointer-events:none;z-index:100;background:#0f172ad9;border:1px solid #ffffff1a;border-radius:8px;flex-direction:column;gap:2px;padding:8px 12px;font-family:monospace;font-size:.75rem;display:flex;position:absolute;bottom:16px;left:16px;box-shadow:0 10px 15px -3px #0000004d}.canvas-bg{z-index:1;pointer-events:none;border-radius:4px;position:absolute;top:0;left:0}.canvas-draw{z-index:2;cursor:crosshair;border-radius:4px;position:absolute;top:0;left:0}.canvas-draw.cursor-select{cursor:default}.canvas-draw.cursor-pan{cursor:grab}.canvas-draw.cursor-pan:active{cursor:grabbing}.text-editor-overlay{z-index:100;border:1.5px dashed var(--brand-color);-webkit-backdrop-filter:blur(8px);background:#fffffff2;border-radius:8px;flex-direction:column;gap:8px;margin:0;padding:8px 10px;transition:border-color .2s;display:flex;position:absolute;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.text-editor-overlay:focus-within{border-style:solid;border-color:var(--brand-color)}.text-editor-textarea{resize:none;white-space:pre-wrap;word-wrap:break-word;min-width:240px;height:auto;min-height:40px;color:inherit;font-family:inherit;font-size:inherit;background:0 0;border:none;outline:none;margin:0;padding:0;line-height:1.4;overflow:hidden}.text-editor-controls{border-top:1px solid #0000000f;justify-content:flex-end;align-items:center;gap:6px;margin-top:2px;padding-top:6px;display:flex}.text-control-btn{cursor:pointer;border:none;border-radius:4px;justify-content:center;align-items:center;gap:4px;height:24px;padding:4px 8px;font-size:11px;font-weight:600;transition:all .15s cubic-bezier(.4,0,.2,1);display:inline-flex}.text-control-btn.commit{color:#fff;background-color:#10b981;box-shadow:0 1px 3px #10b98133}.text-control-btn.commit:hover{background-color:#059669;transform:translateY(-.5px)}.text-control-btn.cancel{color:#4b5563;background-color:#f3f4f6}.text-control-btn.cancel:hover{color:#1f2937;background-color:#e5e7eb;transform:translateY(-.5px)}.welcome-card{cursor:pointer;z-index:10;text-align:center;background-color:#0000;flex-direction:column;justify-content:center;align-items:center;gap:16px;max-width:440px;padding:16px;font-family:Caveat,cursive;transition:all .2s;display:flex}.welcome-card:hover{transform:translateY(-2px)}.welcome-card p{font-family:Caveat,cursive}.welcome-description{color:var(--text-primary);margin:0;font-size:1.25rem;line-height:1.35}.file-input{display:none}.toast{background-color:var(--text-primary);color:#fff;box-shadow:var(--shadow-lg);z-index:100;opacity:0;pointer-events:none;border-radius:9999px;align-items:center;gap:10px;padding:10px 20px;font-size:.875rem;font-weight:500;animation:3s forwards toast-fade-in-out;display:flex;position:absolute;bottom:24px;left:50%;transform:translate(-50%)}@keyframes toast-fade-in-out{0%{opacity:0;transform:translate(-50%,20px)}10%{opacity:1;transform:translate(-50%)}90%{opacity:1;transform:translate(-50%)}to{opacity:0;transform:translate(-50%,-20px)}}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.top-bar-left .btn-icon-only,.top-bar-center .btn-icon-only,.top-bar-right .btn-icon-only,.bottom-left-dock .btn-icon-only,.bottom-right-dock .btn-icon-only,.bottom-center-dock .btn-icon-only{border-radius:var(--radius-sm);width:auto;min-width:28px;height:28px;color:var(--text-color);background:0 0;border:none;justify-content:center;align-items:center;padding:0 6px;transition:all .15s;display:inline-flex}.top-bar-left .btn-icon-only:hover:not(:disabled),.top-bar-center .btn-icon-only:hover:not(:disabled),.top-bar-right .btn-icon-only:hover:not(:disabled),.bottom-left-dock .btn-icon-only:hover:not(:disabled),.bottom-right-dock .btn-icon-only:hover:not(:disabled),.bottom-center-dock .btn-icon-only:hover:not(:disabled){background-color:var(--bg-hover)}.top-bar-left .btn-icon-only:active:not(:disabled),.top-bar-center .btn-icon-only:active:not(:disabled),.top-bar-right .btn-icon-only:active:not(:disabled),.bottom-left-dock .btn-icon-only:active:not(:disabled),.bottom-right-dock .btn-icon-only:active:not(:disabled),.bottom-center-dock .btn-icon-only:active:not(:disabled){background-color:var(--border-color)}.btn-label{color:var(--text-color);letter-spacing:-.2px;margin-left:5px;font-size:.7rem;font-weight:600}@media (width<=768px){.btn-label{display:none}}.page-indicator{text-align:center;-webkit-user-select:none;user-select:none;min-width:48px;padding:0 6px;font-size:.8rem;font-weight:600}.tool-shortcut-badge{color:var(--text-muted);opacity:.6;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:.55rem;font-weight:700;position:absolute;bottom:2px;right:4px}.btn-tool:hover .tool-shortcut-badge,.btn-tool:active .tool-shortcut-badge{color:var(--brand-color);opacity:1}.btn-tool.active .tool-shortcut-badge{color:var(--brand-color);opacity:.9}.bottom-left-dock{z-index:100;position:absolute;bottom:16px;left:16px}.bottom-right-dock{z-index:100;position:absolute;bottom:16px;right:16px}.bottom-center-dock{z-index:100;position:absolute;bottom:16px;left:50%;transform:translate(-50%)}.tour-guides-container{z-index:99;pointer-events:none;position:fixed;inset:0}.tour-guide-card{pointer-events:none;flex-direction:column;align-items:center;gap:8px;display:flex;position:absolute}.tour-text{box-shadow:none;text-align:center;pointer-events:none;background-color:#0000;border:none;border-radius:0;max-width:240px;padding:0}.tour-text h3{color:var(--brand-color);margin:0 0 6px;font-family:Caveat,cursive;font-size:1.4rem;font-weight:700}.tour-text p{color:var(--text-primary);margin:0;font-family:Caveat,cursive;font-size:1.15rem;line-height:1.3}.guide-logo{flex-direction:row;align-items:center;top:16px;left:48px}.guide-left-toolbar{flex-direction:row;top:50%;left:90px;transform:translateY(-50%)}.guide-top-center{top:75px;left:50%;transform:translate(-50%)}.guide-top-right{flex-direction:row;top:75px;right:150px}.guide-top-right .tour-arrow{order:2}.guide-top-right .tour-text{order:1}.guide-properties{flex-direction:row;top:50%;right:270px;transform:translateY(-50%)}.guide-properties .tour-arrow{order:2}.guide-properties .tour-text{order:1}.guide-bottom-center{bottom:85px;left:50%;transform:translate(-50%)}.guide-zoom{align-items:flex-start;bottom:75px;left:24px}.guide-rotate{align-items:flex-end;bottom:75px;right:24px}