:root{--color-bg: #ffffff;--color-bg-subtle: #f9fafb;--color-bg-muted: #f3f4f6;--color-border: #e5e7eb;--color-border-strong: #d1d5db;--color-text-primary: #111827;--color-text-secondary: #374151;--color-text-muted: #4b5563;--color-accent: #2563eb;--color-accent-hover: #1d4ed8;--color-accent-subtle: #eff6ff;--color-success: #16a34a;--color-warning: #d97706;--color-error: #dc2626;--color-canvas-bg: #f4f5f7;--color-grid: #dfe3e8;--color-grid-strong: #c6ccd4;--space-1: .25rem;--space-2: .5rem;--space-3: .75rem;--space-4: 1rem;--space-6: 1.5rem;--space-8: 2rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--radius-sm: .375rem;--radius-md: .5rem;--radius-lg: .75rem;--radius-xl: 1rem;--radius-full: 9999px;--sat: env(safe-area-inset-top, 0px);--sab: env(safe-area-inset-bottom, 0px);--sal: env(safe-area-inset-left, 0px);--sar: env(safe-area-inset-right, 0px);--topbar-h: 56px;--rail-w: 56px;--panel-w: 300px;--font-sans: "DM Sans", sans-serif}@media (prefers-color-scheme: dark){:root{--color-bg: #0a0a0a;--color-bg-subtle: #111111;--color-bg-muted: #1a1a1a;--color-border: #262626;--color-border-strong: #3a3a3a;--color-text-primary: #f9fafb;--color-text-secondary: #d4d4d8;--color-text-muted: #a1a1aa;--color-canvas-bg: #15171c;--color-grid: #23262d;--color-grid-strong: #2e323b;--color-accent-subtle: #0e1b33}}*{box-sizing:border-box}html,body,#root{height:100%;margin:0}body{font-family:var(--font-sans);color:var(--color-text-primary);background:var(--color-bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;padding-top:var(--sat);padding-bottom:var(--sab);padding-left:var(--sal);padding-right:var(--sar);overscroll-behavior:none}h1,h2,h3{font-weight:700;letter-spacing:-.025em;line-height:1.2;margin:0}h1{font-size:clamp(2rem,5vw,3rem)}h2{font-size:clamp(1.5rem,3vw,2.25rem)}h3{font-size:clamp(1.25rem,2vw,1.5rem)}p{font-size:1rem;line-height:1.625;margin:0}button{font-family:inherit}.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-6);background:var(--color-accent);color:#fff;border-radius:var(--radius-md);font-weight:600;font-size:.9rem;border:none;cursor:pointer;min-height:44px;transition:background .15s ease,transform .1s ease,box-shadow .15s ease}.btn-primary:hover{background:var(--color-accent-hover);transform:translateY(-1px);box-shadow:0 4px 12px #2563eb40}.btn-primary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}.btn-primary:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--color-bg);color:var(--color-text-primary);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);font-weight:600;font-size:.875rem;cursor:pointer;min-height:44px;transition:border-color .15s ease,background .15s ease}.btn-ghost:hover{border-color:var(--color-accent);background:var(--color-bg-subtle)}.btn-ghost:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}input,select{font-family:inherit;font-size:16px;color:var(--color-text-primary);background:var(--color-bg);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);padding:var(--space-2) var(--space-3);min-height:44px}input:focus-visible,select:focus-visible{outline:2px solid var(--color-accent);outline-offset:1px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.animate-in{animation:fadeInUp .3s ease forwards}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}@media (max-width: 639px){.editor-rail{flex-direction:row!important;width:100%!important;flex:0 0 48px!important;height:48px!important;border-right:none!important;border-top:1px solid var(--color-border);overflow-x:auto;justify-content:flex-start;padding:0 var(--space-2)}.editor-canvas{flex:1}.editor-panel{position:fixed!important;bottom:48px;left:0;right:0;height:65vh;z-index:50;border-left:none!important;border-top:1px solid var(--color-border-strong);transform:translateY(100%);transition:transform .28s ease}.editor-panel.panel-open{transform:translateY(0)}}.fab-toggle{display:none;position:fixed;bottom:64px;right:var(--space-4);width:52px;height:52px;border-radius:50%;background:var(--color-accent);color:#fff;font-size:22px;border:none;cursor:pointer;z-index:60;box-shadow:0 4px 14px #2563eb66;align-items:center;justify-content:center}@media (max-width: 639px){.fab-toggle{display:flex}}